@mui/x-data-grid 8.14.1 → 8.16.0

package/CHANGELOG.md

@@ -5,6 +5,213 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.16.0
+
+_Oct 29, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add `brush` zoom interaction to charts
+- 🔁 [Server-side update](https://mui.com/x/react-data-grid/server-side-data/#updating-server-side-data) in a grid with tree data/row grouping and aggregation will trigger re-fetch for all parent levels of that row to update aggregated values. See the [demo](https://mui.com/x/react-data-grid/server-side-data/aggregation/#usage-with-tree-data).
+
+Special thanks go out to the community members for their valuable contributions:
+@felix-wg, @frncesc, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @MBilalShafi, @mbrookes, @michelengelen, @noraleonte, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.16.0`
+
+- [DataGrid] Ignore `Ctrl+A` key combination for the row selection in the community version (#20110) @felix-wg
+- [DataGrid][l10n] Improve Spanish (es-ES) locale (#20134) @frncesc
+
+#### `@mui/x-data-grid-pro@8.16.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.16.0`, plus:
+
+- [DataGridPro] Add explicit return type to `getVisibleRowsLookup()` to fix the build with `tsc` (#20116) @arminmeh
+- [DataGridPro] Retain the expansion state with expansion configuration props (#20126) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.16.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.16.0`, plus:
+
+- [DataGridPremium] Export and restore chart integration state (#20079) @arminmeh
+- [DataGridPremium] Fix grouping column `valueFormatter()` crash  (#20070) @sai6855
+- [DataGridPremium] Refetch aggregation data after row update with server-side aggregation (#20039) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.16.0`
+
+- [pickers] Prevent blur event propagation on individual sections (#19825) @michelengelen
+
+#### `@mui/x-date-pickers-pro@8.16.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.16.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.16.0`
+
+- [charts] Allow tooltip to anchor items (#19954) @alexfauquette
+- [charts] Fix behavior of grouped axis (#20118) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+- [charts] Fix AreaChartConnectNulls demo height not correctly resizing (#20078) @sai6855
+- [charts] Fix charts resizing overflow (#20080) @alexfauquette
+- [charts] Fix tooltip not showing on first render (#20115) @bernardobelchior
+- [charts] Handle `undefined` id and color in series (#20087) @bernardobelchior
+- [charts] Remove `useMemo` from isZoomOn*Enabled and isPanOn*Enabled hooks (#20132) @Copilot
+- [charts] Use static data for perf (#20072) @JCQuintas
+- [charts] Move scale symlog inside scales (#20137) @JCQuintas
+
+#### `@mui/x-charts-pro@8.16.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.16.0`, plus:
+
+- [charts-pro] Add `brush` zoom interaction (#19899) @JCQuintas
+- [charts-pro] Add sankey performance check (#20069) @JCQuintas
+
+#### `@mui/x-charts-premium@8.16.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.16.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.16.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.16.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.16.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.16.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Setup eslint compat plugin (#20105) @brijeshb42
+- [code-infra] Improve store types (#20129) @JCQuintas
+- [docs] Update the callout in `rows` prop documentation (#20127) @MBilalShafi
+- [docs-infra] Refine changelog contributor acknowledgment messages (#20123) @mbrookes
+
+### Miscellaneous
+
+- [x-telemetry] Skip telemetry tests on browser mode (#20122) @bernardobelchior
+
+## 8.15.0
+
+_Oct 23, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add new [`brush` charts interaction](https://mui.com/x/react-charts/brush/) for building custom behavior.
+  ![brush visualization example](https://github.com/user-attachments/assets/60c382a1-e418-4736-8dcb-1567c4e361e3)
+- ⚡️ Performance improvements for large bar charts
+- 🤖 Data Grid AI assistant can now [visualize the query results](https://mui.com/x/react-data-grid/ai-assistant/#data-visualization) by controlling the chart integration settings
+- 📦 DataGrid uses an internal MUI fork of ExcelJS that does not depend on vulnerable versions of NPM packages
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ZagrebaAlex
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @brijeshb42, @noraleonte
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.15.0`
+
+- [DataGrid] Fix `dataSource.fetchRows` API's return type (#20068) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.15.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.15.0`, plus:
+
+- [DataGridPro] Keep children in the tree after parent row is re-fetched with the data source (#19934) @arminmeh
+- [DataGridPro] Support scroll shadows customization (#19982) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@8.15.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.15.0`, plus:
+
+- [DataGridPremium] Use ExcelJS fork (#19796) @cherniavskii
+- [DataGridPremium] Support data visualization in AI Assistant (#19831) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.15.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.15.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.15.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.15.0`
+
+- [charts] Add `ChartsBrushOverlay` and allow brush configuration (#19956) @JCQuintas
+- [charts] Add `getStringSize` benchmark. Remove benchmarks from built package. (#19995) @bernardobelchior
+- [charts] Batch string size measurement (#19994) @bernardobelchior
+- [charts] Fix console issue (#20025) @JCQuintas
+- [charts] Fix is[ZoomFeature]Enabled type (#20058) @alexfauquette
+- [charts] Fix reference line middle spacing (#20004) @JCQuintas
+- [charts] Improve `getStringSize` and `batchMeasureStrings` performance (#19996) @bernardobelchior
+- [charts] Improve deep export script (#20007) @JCQuintas
+- [charts] Improve string measurement benchmarks (#19999) @bernardobelchior
+- [charts] Measure string sizes using SVG elements (#19981) @bernardobelchior
+- [l10n] Improve Greek (gr-GR) locale (#20060) @ZagrebaAlex
+
+#### `@mui/x-charts-pro@8.15.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.15.0`, plus:
+
+- [charts-pro] Fix pan with `axis.reverse` (#20031) @JCQuintas
+
+#### `@mui/x-charts-premium@8.15.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.15.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.15.0`
+
+- [tree view] Multi character type-ahead (#19942) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.15.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.15.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add overview section for scatter chart and heatmap (#19888) @prakhargupta1
+- [docs] Add charts bell curve example (#20003) @JCQuintas
+- [docs] Add grouped multiple fields for Data Grid row grouping recipe (#19964) @siriwatknp
+- [docs] Add Data Grid loading state recipe (#19958) @siriwatknp
+
+### Core
+
+- [code-infra] Remove @mui/monorepo usage for react versioning (#19894) @Janpot
+- [code-infra] Remove invalid `environment: 'browser'` from vitest browser config (#19993) @bernardobelchior
+- [code-infra] Remove unused babel aliases (#19987) @Janpot
+- [code-infra] Turn on all testing-library eslint rules (#19946) @brijeshb42
+- [docs-infra] Fix broken hash link (#20062) @Janpot
+
 ## 8.14.1
 
 _Oct 16, 2025_

package/DataGrid/DataGrid.js

@@ -16,6 +16,7 @@ var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
 var _useGridParamsOverridableMethods = require("../hooks/features/rows/useGridParamsOverridableMethods");
+var _useGridCellEditable = require("../hooks/features/editing/useGridCellEditable");
 var _GridContextProvider = require("../context/GridContextProvider");
 var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
@@ -30,6 +31,7 @@ const configuration = {
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
     useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods,
+    useIsCellEditable: _useGridCellEditable.useIsCellEditable,
     useCellAggregationResult: () => null,
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }

package/DataGrid/useDataGridComponent.js

@@ -81,7 +81,7 @@ const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridParamsApi.useGridParamsApi)(apiRef, props, configuration);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);
-  (0, _useGridEditing.useGridEditing)(apiRef, props);
+  (0, _useGridEditing.useGridEditing)(apiRef, props, configuration);
   (0, _useGridFocus.useGridFocus)(apiRef, props);
   (0, _useGridPreferencesPanel.useGridPreferencesPanel)(apiRef, props);
   (0, _useGridFilter.useGridFilter)(apiRef, props, configuration);

package/components/GridScrollShadows.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,14 +10,30 @@ exports.GridScrollShadows = GridScrollShadows;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _hooks = require("../hooks");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _cssVariables = require("../constants/cssVariables");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _gridDimensionsSelectors = require("../hooks/features/dimensions/gridDimensionsSelectors");
+var _constants = require("../constants");
 var _jsxRuntime = require("react/jsx-runtime");
-const ScrollShadow = (0, _system.styled)('div')(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    position
+  } = ownerState;
+  const slots = {
+    root: ['scrollShadow', `scrollShadow--${position}`]
+  };
+  return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
+};
+const ScrollShadow = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollShadow',
+  overridesResolver: (props, styles) => [styles.root, styles[props.position]]
+})(({
   theme
 }) => ({
   position: 'absolute',
@@ -30,8 +47,9 @@ const ScrollShadow = (0, _system.styled)('div')(({
   '--opacity': theme.palette.mode === 'dark' ? '0.7' : '0.18',
   '--blur': 'var(--length)',
   '--spread': 'calc(var(--length) * -1)',
-  '--color-start': 'rgba(0, 0, 0, calc(var(--hasScrollStart) * var(--opacity)))',
-  '--color-end': 'rgba(0, 0, 0, calc(var(--hasScrollEnd) * var(--opacity)))',
+  '--color': '0, 0, 0',
+  '--color-start': 'rgba(var(--color), calc(var(--hasScrollStart) * var(--opacity)))',
+  '--color-end': 'rgba(var(--color), calc(var(--hasScrollEnd) * var(--opacity)))',
   variants: [{
     props: {
       position: 'vertical'
@@ -61,6 +79,7 @@ function GridScrollShadows(props) {
     classes: rootProps.classes,
     position
   };
+  const classes = useUtilityClasses(ownerState);
   const ref = React.useRef(null);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const hasScrollX = (0, _hooks.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
@@ -98,6 +117,7 @@ function GridScrollShadows(props) {
     updateScrollShadowVisibility((position === 'horizontal' ? apiRef.current.virtualScrollerRef?.current?.scrollLeft : apiRef.current.virtualScrollerRef?.current?.scrollTop) ?? 0);
   }, [updateScrollShadowVisibility, apiRef, position]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ScrollShadow, {
+    className: classes.root,
     ownerState: ownerState,
     ref: ref,
     style: {

package/constants/gridClasses.d.ts

@@ -676,6 +676,18 @@ export interface GridClasses {
    * Styles applied to the scrollbar filler cell.
    */
   'scrollbarFiller--pinnedRight': string;
+  /**
+   * Styles applied to the scroll shadow element.
+   */
+  scrollShadow: string;
+  /**
+   * Styles applied to the horizontal scroll shadow element.
+   */
+  'scrollShadow--horizontal': string;
+  /**
+   * Styles applied to the vertical scroll shadow element.
+   */
+  'scrollShadow--vertical': string;
   /**
    * Styles applied to the footer selected row count element.
    */

package/constants/gridClasses.js

@@ -13,4 +13,4 @@ function getDataGridUtilityClass(slot) {
 }
 const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/constants/localeTextConstants.js

@@ -290,5 +290,6 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
   promptChangePivotRowsLabel: count => `Rows (${count})`,
   promptChangePivotValuesLabel: count => `Values (${count})`,
-  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeChartsLabel: (dimensionsCount, valuesCount) => `Dimensions (${dimensionsCount}), Values (${valuesCount})`
 };

package/esm/DataGrid/DataGrid.js

@@ -9,6 +9,7 @@ import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 import { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
+import { useIsCellEditable } from "../hooks/features/editing/useGridCellEditable.js";
 import { GridContextProvider } from "../context/GridContextProvider.js";
 import { useDataGridComponent } from "./useDataGridComponent.js";
 import { useDataGridProps } from "./useDataGridProps.js";
@@ -23,6 +24,7 @@ const configuration = {
     useGridRowAriaAttributes,
     useGridRowsOverridableMethods,
     useGridParamsOverridableMethods,
+    useIsCellEditable,
     useCellAggregationResult: () => null,
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }

package/esm/DataGrid/useDataGridComponent.js

@@ -75,7 +75,7 @@ export const useDataGridComponent = (apiRef, props, configuration) => {
   useGridParamsApi(apiRef, props, configuration);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
-  useGridEditing(apiRef, props);
+  useGridEditing(apiRef, props, configuration);
   useGridFocus(apiRef, props);
   useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props, configuration);

package/esm/components/GridScrollShadows.js

@@ -3,14 +3,30 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { useRtl } from '@mui/system/RtlProvider';
+import composeClasses from '@mui/utils/composeClasses';
 import { gridDimensionsSelector, gridPinnedColumnsSelector, useGridEvent, useGridSelector } from "../hooks/index.js";
 import { gridPinnedRowsSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { vars } from "../constants/cssVariables.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { gridHasScrollXSelector, gridHasScrollYSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { getDataGridUtilityClass } from "../constants/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ScrollShadow = styled('div')(({
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    position
+  } = ownerState;
+  const slots = {
+    root: ['scrollShadow', `scrollShadow--${position}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const ScrollShadow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollShadow',
+  overridesResolver: (props, styles) => [styles.root, styles[props.position]]
+})(({
   theme
 }) => ({
   position: 'absolute',
@@ -24,8 +40,9 @@ const ScrollShadow = styled('div')(({
   '--opacity': theme.palette.mode === 'dark' ? '0.7' : '0.18',
   '--blur': 'var(--length)',
   '--spread': 'calc(var(--length) * -1)',
-  '--color-start': 'rgba(0, 0, 0, calc(var(--hasScrollStart) * var(--opacity)))',
-  '--color-end': 'rgba(0, 0, 0, calc(var(--hasScrollEnd) * var(--opacity)))',
+  '--color': '0, 0, 0',
+  '--color-start': 'rgba(var(--color), calc(var(--hasScrollStart) * var(--opacity)))',
+  '--color-end': 'rgba(var(--color), calc(var(--hasScrollEnd) * var(--opacity)))',
   variants: [{
     props: {
       position: 'vertical'
@@ -55,6 +72,7 @@ function GridScrollShadows(props) {
     classes: rootProps.classes,
     position
   };
+  const classes = useUtilityClasses(ownerState);
   const ref = React.useRef(null);
   const apiRef = useGridPrivateApiContext();
   const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
@@ -92,6 +110,7 @@ function GridScrollShadows(props) {
     updateScrollShadowVisibility((position === 'horizontal' ? apiRef.current.virtualScrollerRef?.current?.scrollLeft : apiRef.current.virtualScrollerRef?.current?.scrollTop) ?? 0);
   }, [updateScrollShadowVisibility, apiRef, position]);
   return /*#__PURE__*/_jsx(ScrollShadow, {
+    className: classes.root,
     ownerState: ownerState,
     ref: ref,
     style: {

package/esm/constants/gridClasses.d.ts

@@ -676,6 +676,18 @@ export interface GridClasses {
    * Styles applied to the scrollbar filler cell.
    */
   'scrollbarFiller--pinnedRight': string;
+  /**
+   * Styles applied to the scroll shadow element.
+   */
+  scrollShadow: string;
+  /**
+   * Styles applied to the horizontal scroll shadow element.
+   */
+  'scrollShadow--horizontal': string;
+  /**
+   * Styles applied to the vertical scroll shadow element.
+   */
+  'scrollShadow--vertical': string;
   /**
    * Styles applied to the footer selected row count element.
    */

package/esm/constants/gridClasses.js

@@ -5,4 +5,4 @@ export function getDataGridUtilityClass(slot) {
 }
 export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/constants/localeTextConstants.js

@@ -284,5 +284,6 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
   promptChangePivotRowsLabel: count => `Rows (${count})`,
   promptChangePivotValuesLabel: count => `Values (${count})`,
-  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeChartsLabel: (dimensionsCount, valuesCount) => `Dimensions (${dimensionsCount}), Values (${valuesCount})`
 };

package/esm/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -1,7 +1,7 @@
-import { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState } from "../../features/rows/gridRowsInterfaces.js";
-import { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from "../../features/filter/gridFilterState.js";
-import { GridSortingMethodParams, GridSortingMethodValue } from "../../features/sorting/gridSortingState.js";
-import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
+import type { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState } from "../../features/rows/gridRowsInterfaces.js";
+import type { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from "../../features/filter/gridFilterState.js";
+import type { GridSortingMethodParams, GridSortingMethodValue } from "../../features/sorting/gridSortingState.js";
+import type { GridGetRowsParams, GridGetRowsResponse, GridGetRowsOptions } from "../../../models/gridDataSource.js";
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
 export declare enum GridStrategyGroup {
   DataSource = "dataSource",
@@ -14,9 +14,11 @@ export interface GridStrategyProcessingLookup {
     params: {
       response: GridGetRowsResponse;
       fetchParams: GridGetRowsParams;
+      options: GridGetRowsOptions;
     } | {
       error: Error;
       fetchParams: GridGetRowsParams;
+      options: GridGetRowsOptions;
     };
     value: void;
   };

package/esm/hooks/features/dataSource/models.d.ts

@@ -1,40 +1,40 @@
-import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams } from "../../../models/gridDataSource.js";
+import type { GridDataSourceCache, GridGetRowsParams, GridUpdateRowParams, GridGetRowsOptions } from "../../../models/gridDataSource.js";
 import type { GridRowId, GridRowModel } from "../../../models/gridRows.js";
 import type { GridDataSourceCacheDefaultConfig } from "./cache.js";
 /**
  * The parameters for the `fetchRows` method.
  */
-export interface GridDataSourceFetchRowsParams extends Partial<GridGetRowsParams> {
-  /**
-   * If `true`, bypasses the cache and forces a refetch of the rows from the server.
-   */
-  skipCache?: boolean;
-}
-export interface GridDataSourceApiBase {
-  /**
-   * Fetches the rows from the server.
-   * If no `parentId` option is provided, it fetches the root rows.
-   * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
-   * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
-   * @param {GridDataSourceFetchRowsParams} params Request parameters override.
-   */
-  fetchRows: (parentId?: GridRowId, params?: GridDataSourceFetchRowsParams) => void;
-  /**
-   * The data source cache object.
-   */
-  cache: GridDataSourceCache;
-  /**
-   * Syncs the row with the server and updates in the grid.
-   * @param {GridUpdateRowParams} params The parameters for the edit operation.
-   * @returns {Promise<GridRowModel> | undefined} The updated row or `undefined` if `dataSource.updateRow` is not passed.
-   */
-  editRow: (params: GridUpdateRowParams) => Promise<GridRowModel> | undefined;
-}
+export type GridDataSourceFetchRowsParams<T> = Partial<T> & GridGetRowsOptions;
 export interface GridDataSourceApi {
   /**
    * The data source API.
    */
-  dataSource: GridDataSourceApiBase;
+  dataSource: {
+    /**
+     * Fetches the rows from the server.
+     * If no `parentId` option is provided, it fetches the root rows.
+     * Any missing parameter from `params` will be filled from the state (sorting, filtering, etc.).
+     * @param {GridRowId} parentId The id of the parent node (default: `GRID_ROOT_GROUP_ID`).
+     * @param {GridDataSourceFetchRowsParams<GridGetRowsParams>} params Request parameters override.
+     * @returns {Promise<void>} A promise that resolves when the rows are fetched.
+     */
+    fetchRows: (parentId?: GridRowId, params?: GridDataSourceFetchRowsParams<GridGetRowsParams>) => Promise<void>;
+    /**
+     * The data source cache object.
+     */
+    cache: GridDataSourceCache;
+    /**
+     * Syncs the row with the server and updates in the grid.
+     * @param {GridUpdateRowParams} params The parameters for the edit operation.
+     * @returns {Promise<GridRowModel> | undefined} The updated row or `undefined` if `dataSource.updateRow` is not passed.
+     */
+    editRow: (params: GridUpdateRowParams) => Promise<GridRowModel> | undefined;
+  };
+}
+export interface GridDataSourceApiBase {
+  fetchRows: GridDataSourceApi['dataSource']['fetchRows'];
+  cache: GridDataSourceApi['dataSource']['cache'];
+  editRow: GridDataSourceApi['dataSource']['editRow'];
 }
 export interface GridDataSourceBaseOptions {
   cacheOptions?: GridDataSourceCacheDefaultConfig;

package/esm/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -10,7 +10,7 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   api: {
     public: GridDataSourceApi;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams) => void) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("./models.js").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";