@mui/x-data-grid 9.0.0-alpha.2 → 9.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +123 -1
- package/components/columnHeaders/GridColumnGroupHeader.js +2 -1
- package/components/columnHeaders/GridColumnGroupHeader.mjs +2 -1
- package/components/columnHeaders/GridColumnHeaderItem.js +2 -1
- package/components/columnHeaders/GridColumnHeaderItem.mjs +2 -1
- package/constants/gridClasses.js +1 -1
- package/constants/gridClasses.mjs +1 -1
- package/hooks/features/dataSource/useGridDataSourceBase.js +2 -1
- package/hooks/features/dataSource/useGridDataSourceBase.mjs +2 -1
- package/hooks/features/editing/useGridRowEditing.js +12 -4
- package/hooks/features/editing/useGridRowEditing.mjs +12 -4
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,127 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 9.0.0-alpha.3
|
|
4
|
+
|
|
5
|
+
_Mar 12, 2026_
|
|
6
|
+
|
|
7
|
+
We'd like to extend a big thank you to the 13 contributors who made this release possible. Here are some highlights ✨:
|
|
8
|
+
|
|
9
|
+
- 🐞 Bugfixes and internal improvements
|
|
10
|
+
|
|
11
|
+
The following team members contributed to this release:
|
|
12
|
+
@aemartos, @alexfauquette, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @MBilalShafi, @michelengelen, @rita-codes, @sai6855, @siriwatknp
|
|
13
|
+
|
|
14
|
+
### Data Grid
|
|
15
|
+
|
|
16
|
+
#### `@mui/x-data-grid@9.0.0-alpha.3`
|
|
17
|
+
|
|
18
|
+
- [DataGrid] Fix crash when `rows` and `rowModesModel` are updated simultaneously (#21265) @michelengelen
|
|
19
|
+
- [DataGrid] Add missing `resizablePanelHandle` classes to `gridClasses` object (#21538) @sai6855
|
|
20
|
+
- [DataGrid] Refactor `headerAlign` style calls (#21541) @sai6855
|
|
21
|
+
|
|
22
|
+
#### `@mui/x-data-grid-pro@9.0.0-alpha.3` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
23
|
+
|
|
24
|
+
Same changes as in `@mui/x-data-grid@9.0.0-alpha.3`, plus:
|
|
25
|
+
|
|
26
|
+
- [DataGridPro] Add `role="presentation"` to detail panel toggle header content (#21634) @michelengelen
|
|
27
|
+
- [DataGridPro] Fix sorting not reflected in nested server-side data (#21619) @MBilalShafi
|
|
28
|
+
|
|
29
|
+
#### `@mui/x-data-grid-premium@9.0.0-alpha.3` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
30
|
+
|
|
31
|
+
Same changes as in `@mui/x-data-grid-pro@9.0.0-alpha.3`.
|
|
32
|
+
|
|
33
|
+
### Date and Time Pickers
|
|
34
|
+
|
|
35
|
+
#### `@mui/x-date-pickers@9.0.0-alpha.3`
|
|
36
|
+
|
|
37
|
+
- [pickers] Refactor `DateRangePickerDay` overrides to use a centralized `elementOverrides` object (#21426) @sai6855
|
|
38
|
+
- [pickers] Migrate from deprecated props for `PickersModalDialog` (#21702) @siriwatknp
|
|
39
|
+
|
|
40
|
+
#### `@mui/x-date-pickers-pro@9.0.0-alpha.3` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
41
|
+
|
|
42
|
+
Same changes as in `@mui/x-date-pickers@9.0.0-alpha.3`.
|
|
43
|
+
|
|
44
|
+
### Charts
|
|
45
|
+
|
|
46
|
+
#### `@mui/x-charts@9.0.0-alpha.3`
|
|
47
|
+
|
|
48
|
+
- [charts] Differentiate Line Plot roots classes (#21679) @JCQuintas
|
|
49
|
+
- [charts] Enable keyboard navigation by default (#21675) @alexfauquette
|
|
50
|
+
- [charts] Fix keyboard tooltip radar (#21667) @alexfauquette
|
|
51
|
+
- [charts] Fix selector default parameter (#21638) @JCQuintas
|
|
52
|
+
- [charts] Fix tooltip blink between node and pointer anchor (#21611) @alexfauquette
|
|
53
|
+
- [charts] Let tooltip and legend reflect the line shape (#21475) @alexfauquette
|
|
54
|
+
- [charts] Refactor `BarChart` classes structure (#21601) @JCQuintas
|
|
55
|
+
- [charts] Refactor `LineChart` classes structure (#21648) @JCQuintas
|
|
56
|
+
- [charts] Refactor `ScatterChart` classes structure (#21651) @JCQuintas
|
|
57
|
+
- [charts] Refactor `PieChart` classes structure (#21649) @JCQuintas
|
|
58
|
+
- [charts] Remove batch rendering checks in highlight selectors (#21646) @bernardobelchior
|
|
59
|
+
- [charts] Standardize generic arg names to `SeriesType` (#21694) @alexfauquette
|
|
60
|
+
- [charts] Simplify highlight hooks return types (#21695) @alexfauquette
|
|
61
|
+
|
|
62
|
+
#### `@mui/x-charts-pro@9.0.0-alpha.3` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
63
|
+
|
|
64
|
+
Same changes as in `@mui/x-charts@9.0.0-alpha.3`, plus:
|
|
65
|
+
|
|
66
|
+
- [charts-pro] Fix heatmap style override from `arc` to `cell` (#21693) @Copilot
|
|
67
|
+
- [charts-pro] Fix image export truncated when page is zoomed out (#21685) @bernardobelchior
|
|
68
|
+
- [charts-pro] Speed-up heatmap cell search with an index lookup (#21130) @alexfauquette
|
|
69
|
+
- [charts-pro] Fix heatmap highlight not working (#21710) @Copilot
|
|
70
|
+
|
|
71
|
+
#### `@mui/x-charts-premium@9.0.0-alpha.3` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
72
|
+
|
|
73
|
+
Same changes as in `@mui/x-charts-pro@9.0.0-alpha.3`, plus:
|
|
74
|
+
|
|
75
|
+
- [charts-premium] Re-enable WebGL tests (#21708) @bernardobelchior
|
|
76
|
+
|
|
77
|
+
### Tree View
|
|
78
|
+
|
|
79
|
+
#### Breaking changes
|
|
80
|
+
|
|
81
|
+
- Remove `TreeViewBaseItem` type (use `TreeViewDefaultItemModelProperties` or a custom interface)
|
|
82
|
+
- Remove `useTreeViewApiRef` hook (use `useRichTreeViewApiRef`, `useSimpleTreeViewApiRef`, or `useRichTreeViewProApiRef`)
|
|
83
|
+
- Remove `status` from content slot props returned by `getContentProps()` (use `data-*` attributes; `status` on `useTreeItem` return value is unchanged)
|
|
84
|
+
- Remove deprecated CSS state classes from `treeItemClasses`: `expanded`, `selected`, `focused`, `disabled`, `editable`, `editing` (use `[data-expanded]`, `[data-selected]`, etc.)
|
|
85
|
+
- The `<RichTreeViewPro />` component has now virtualization enabled by default.
|
|
86
|
+
- The items used inside the `<RichTreeViewPro />` now have a default height of `32px`.
|
|
87
|
+
- The events of the `<RichTreeViewPro />` are now rendered as a flat list instead of a nested tree.
|
|
88
|
+
|
|
89
|
+
#### `@mui/x-tree-view@9.0.0-alpha.3`
|
|
90
|
+
|
|
91
|
+
- [tree view] Remove deprecated APIs (#21591) @flaviendelangle
|
|
92
|
+
- [tree view] Fix collapsed children not selected with `selectionPropagation.descendants` in `SimpleTreeView` (#21253) @flaviendelangle
|
|
93
|
+
|
|
94
|
+
#### `@mui/x-tree-view-pro@9.0.0-alpha.3` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
95
|
+
|
|
96
|
+
Same changes as in `@mui/x-tree-view@9.0.0-alpha.3`, plus:
|
|
97
|
+
|
|
98
|
+
- [RichTreeViewPro] Make the virtualization opt-out and port the layout doc from the data grid (#21461) @flaviendelangle
|
|
99
|
+
|
|
100
|
+
### Codemod
|
|
101
|
+
|
|
102
|
+
#### `@mui/x-codemod@9.0.0-alpha.3`
|
|
103
|
+
|
|
104
|
+
Internal changes.
|
|
105
|
+
|
|
106
|
+
### Docs
|
|
107
|
+
|
|
108
|
+
- [docs] Fix `AssistantWithDataSource` demo crashing (#21555) @sai6855
|
|
109
|
+
- [docs] Remove `Preview` pill from Sankey (#21623) @bernardobelchior
|
|
110
|
+
- [docs] Migrate internal Material UI deprecated APIs (#21680) @siriwatknp
|
|
111
|
+
- [docs] Remove `New` flag on Tree View and Date and Time Pickers features released before v9 alpha (#21585) @flaviendelangle
|
|
112
|
+
|
|
113
|
+
### Core
|
|
114
|
+
|
|
115
|
+
- [code-infra] Remove checkout step (#21688) @Janpot
|
|
116
|
+
- [code-infra] Fix contributor generation in changelog (#21718) @brijeshb42
|
|
117
|
+
- [docs-infra] Do not point to non-existent v8 subdomain (#21640) @cherniavskii
|
|
118
|
+
|
|
119
|
+
### Miscellaneous
|
|
120
|
+
|
|
121
|
+
- [test] Add missing tests for forwarding props to filter operators in DataGrid (#21441) @siriwatknp
|
|
122
|
+
- [x-license] Export additional license types and constants (#21625) @aemartos
|
|
123
|
+
- [x-license] Refactor license verification to accept package info object and add v9 version gating (#21690) @aemartos
|
|
124
|
+
|
|
3
125
|
## 9.0.0-alpha.2
|
|
4
126
|
|
|
5
127
|
_Mar 5, 2026_
|
|
@@ -92,7 +214,7 @@ Internal changes.
|
|
|
92
214
|
|
|
93
215
|
- [docs] Add backticks and parentheses to all functions and hooks (DX-173) (#21496) @mapache-salvaje
|
|
94
216
|
- [docs] Remove mentions of `mySvgRef` (#21559) @bernardobelchior
|
|
95
|
-
- [docs] Update Roadmap section in the docs
|
|
217
|
+
- [docs] Update Roadmap section in the docs (#20892) @alelthomas
|
|
96
218
|
- [docs] Add tutorial and example app for aggregation with row grouping (DX-162) (#21102) @mapache-salvaje
|
|
97
219
|
- [docs] Fix missing codemod docs (#21604) @JCQuintas
|
|
98
220
|
|
|
@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
|
|
13
13
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
14
|
+
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
|
|
14
15
|
var _RtlProvider = require("@mui/system/RtlProvider");
|
|
15
16
|
var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
|
|
16
17
|
var _gridClasses = require("../../constants/gridClasses");
|
|
@@ -35,7 +36,7 @@ const useUtilityClasses = ownerState => {
|
|
|
35
36
|
pinnedPosition
|
|
36
37
|
} = ownerState;
|
|
37
38
|
const slots = {
|
|
38
|
-
root: ['columnHeader', headerAlign
|
|
39
|
+
root: ['columnHeader', headerAlign && `columnHeader--align${(0, _capitalize.default)(headerAlign)}`, isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
|
|
39
40
|
draggableContainer: ['columnHeaderDraggableContainer'],
|
|
40
41
|
titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
|
|
41
42
|
titleContainerContent: ['columnHeaderTitleContainerContent']
|
|
@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import useId from '@mui/utils/useId';
|
|
6
6
|
import composeClasses from '@mui/utils/composeClasses';
|
|
7
|
+
import capitalize from '@mui/utils/capitalize';
|
|
7
8
|
import { useRtl } from '@mui/system/RtlProvider';
|
|
8
9
|
import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.mjs";
|
|
9
10
|
import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
|
|
@@ -28,7 +29,7 @@ const useUtilityClasses = ownerState => {
|
|
|
28
29
|
pinnedPosition
|
|
29
30
|
} = ownerState;
|
|
30
31
|
const slots = {
|
|
31
|
-
root: ['columnHeader', headerAlign
|
|
32
|
+
root: ['columnHeader', headerAlign && `columnHeader--align${capitalize(headerAlign)}`, isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
|
|
32
33
|
draggableContainer: ['columnHeaderDraggableContainer'],
|
|
33
34
|
titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
|
|
34
35
|
titleContainerContent: ['columnHeaderTitleContainerContent']
|
|
@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
var _clsx = _interopRequireDefault(require("clsx"));
|
|
14
14
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
15
|
+
var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
|
|
15
16
|
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
|
|
16
17
|
var _fastMemo = require("@mui/x-internals/fastMemo");
|
|
17
18
|
var _RtlProvider = require("@mui/system/RtlProvider");
|
|
@@ -48,7 +49,7 @@ const useUtilityClasses = ownerState => {
|
|
|
48
49
|
// todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
|
|
49
50
|
const isColumnNumeric = colDef.type === 'number';
|
|
50
51
|
const slots = {
|
|
51
|
-
root: ['columnHeader', colDef.headerAlign
|
|
52
|
+
root: ['columnHeader', colDef.headerAlign && `columnHeader--align${(0, _capitalize.default)(colDef.headerAlign)}`, isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
|
|
52
53
|
// TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
|
|
53
54
|
// See https://github.com/mui/mui-x/pull/14559
|
|
54
55
|
isSiblingFocused && 'columnHeader--siblingFocused'],
|
|
@@ -5,6 +5,7 @@ import * as React from 'react';
|
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import composeClasses from '@mui/utils/composeClasses';
|
|
8
|
+
import capitalize from '@mui/utils/capitalize';
|
|
8
9
|
import useId from '@mui/utils/useId';
|
|
9
10
|
import { fastMemo } from '@mui/x-internals/fastMemo';
|
|
10
11
|
import { useRtl } from '@mui/system/RtlProvider';
|
|
@@ -41,7 +42,7 @@ const useUtilityClasses = ownerState => {
|
|
|
41
42
|
// todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
|
|
42
43
|
const isColumnNumeric = colDef.type === 'number';
|
|
43
44
|
const slots = {
|
|
44
|
-
root: ['columnHeader', colDef.headerAlign
|
|
45
|
+
root: ['columnHeader', colDef.headerAlign && `columnHeader--align${capitalize(colDef.headerAlign)}`, isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
|
|
45
46
|
// TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
|
|
46
47
|
// See https://github.com/mui/mui-x/pull/14559
|
|
47
48
|
isSiblingFocused && 'columnHeader--siblingFocused'],
|
package/constants/gridClasses.js
CHANGED
|
@@ -13,4 +13,4 @@ function getDataGridUtilityClass(slot) {
|
|
|
13
13
|
}
|
|
14
14
|
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', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', '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',
|
|
15
15
|
// TODO v9: Rename to `cell--dragging`
|
|
16
|
-
'row--dragging', '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']);
|
|
16
|
+
'row--dragging', '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', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
|
|
@@ -5,4 +5,4 @@ export function getDataGridUtilityClass(slot) {
|
|
|
5
5
|
}
|
|
6
6
|
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', 'longTextCell', 'longTextCellContent', 'longTextCellExpandButton', 'longTextCellCollapseButton', 'longTextCellPopup', 'longTextCellPopperContent', 'editLongTextCell', 'editLongTextCellValue', 'editLongTextCellPopup', 'editLongTextCellPopperContent', 'editLongTextCellTextarea', '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',
|
|
7
7
|
// TODO v9: Rename to `cell--dragging`
|
|
8
|
-
'row--dragging', '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']);
|
|
8
|
+
'row--dragging', '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', 'resizablePanelHandle', 'resizablePanelHandle--horizontal', 'resizablePanelHandle--vertical']);
|
|
@@ -260,9 +260,10 @@ const useGridDataSourceBase = (apiRef, props, options = {}) => {
|
|
|
260
260
|
};
|
|
261
261
|
const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
|
|
262
262
|
const handleFetchRowsOnParamsChange = React.useCallback(() => {
|
|
263
|
+
apiRef.current.setRows([]);
|
|
263
264
|
stopPolling();
|
|
264
265
|
debouncedFetchRows();
|
|
265
|
-
}, [stopPolling, debouncedFetchRows]);
|
|
266
|
+
}, [stopPolling, debouncedFetchRows, apiRef]);
|
|
266
267
|
const isFirstRender = React.useRef(true);
|
|
267
268
|
React.useEffect(() => {
|
|
268
269
|
if (isFirstRender.current) {
|
|
@@ -253,9 +253,10 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
|
|
|
253
253
|
};
|
|
254
254
|
const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
|
|
255
255
|
const handleFetchRowsOnParamsChange = React.useCallback(() => {
|
|
256
|
+
apiRef.current.setRows([]);
|
|
256
257
|
stopPolling();
|
|
257
258
|
debouncedFetchRows();
|
|
258
|
-
}, [stopPolling, debouncedFetchRows]);
|
|
259
|
+
}, [stopPolling, debouncedFetchRows, apiRef]);
|
|
259
260
|
const isFirstRender = React.useRef(true);
|
|
260
261
|
React.useEffect(() => {
|
|
261
262
|
if (isFirstRender.current) {
|
|
@@ -411,11 +411,15 @@ const useGridRowEditing = (apiRef, props) => {
|
|
|
411
411
|
updateRowInRowModesModel(id, null);
|
|
412
412
|
delete prevRowValuesLookup.current[id];
|
|
413
413
|
};
|
|
414
|
-
if (ignoreModifications) {
|
|
414
|
+
if (ignoreModifications && apiRef.current.getRow(id)) {
|
|
415
415
|
finishRowEditMode();
|
|
416
416
|
return;
|
|
417
417
|
}
|
|
418
418
|
const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
|
|
419
|
+
if (!editingState[id]) {
|
|
420
|
+
finishRowEditMode();
|
|
421
|
+
return;
|
|
422
|
+
}
|
|
419
423
|
const row = prevRowValuesLookup.current[id];
|
|
420
424
|
const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
|
|
421
425
|
if (isSomeFieldProcessingProps) {
|
|
@@ -474,14 +478,18 @@ const useGridRowEditing = (apiRef, props) => {
|
|
|
474
478
|
Promise.resolve(processRowUpdate(rowUpdate, row, {
|
|
475
479
|
rowId: id
|
|
476
480
|
})).then(finalRowUpdate => {
|
|
477
|
-
apiRef.current.
|
|
481
|
+
if (apiRef.current.getRow(id)) {
|
|
482
|
+
apiRef.current.updateRows([finalRowUpdate]);
|
|
483
|
+
}
|
|
478
484
|
finishRowEditMode();
|
|
479
485
|
}).catch(handleError);
|
|
480
486
|
} catch (errorThrown) {
|
|
481
487
|
handleError(errorThrown);
|
|
482
488
|
}
|
|
483
489
|
} else {
|
|
484
|
-
apiRef.current.
|
|
490
|
+
if (apiRef.current.getRow(id)) {
|
|
491
|
+
apiRef.current.updateRows([rowUpdate]);
|
|
492
|
+
}
|
|
485
493
|
finishRowEditMode();
|
|
486
494
|
}
|
|
487
495
|
});
|
|
@@ -649,6 +657,6 @@ const useGridRowEditing = (apiRef, props) => {
|
|
|
649
657
|
}, params));
|
|
650
658
|
}
|
|
651
659
|
});
|
|
652
|
-
}, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
|
|
660
|
+
}, [apiRef, rowModesModel, updateOrDeleteRowState, updateStateToStartRowEditMode, updateStateToStopRowEditMode, updateRowInRowModesModel]);
|
|
653
661
|
};
|
|
654
662
|
exports.useGridRowEditing = useGridRowEditing;
|
|
@@ -404,11 +404,15 @@ export const useGridRowEditing = (apiRef, props) => {
|
|
|
404
404
|
updateRowInRowModesModel(id, null);
|
|
405
405
|
delete prevRowValuesLookup.current[id];
|
|
406
406
|
};
|
|
407
|
-
if (ignoreModifications) {
|
|
407
|
+
if (ignoreModifications && apiRef.current.getRow(id)) {
|
|
408
408
|
finishRowEditMode();
|
|
409
409
|
return;
|
|
410
410
|
}
|
|
411
411
|
const editingState = gridEditRowsStateSelector(apiRef);
|
|
412
|
+
if (!editingState[id]) {
|
|
413
|
+
finishRowEditMode();
|
|
414
|
+
return;
|
|
415
|
+
}
|
|
412
416
|
const row = prevRowValuesLookup.current[id];
|
|
413
417
|
const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
|
|
414
418
|
if (isSomeFieldProcessingProps) {
|
|
@@ -467,14 +471,18 @@ export const useGridRowEditing = (apiRef, props) => {
|
|
|
467
471
|
Promise.resolve(processRowUpdate(rowUpdate, row, {
|
|
468
472
|
rowId: id
|
|
469
473
|
})).then(finalRowUpdate => {
|
|
470
|
-
apiRef.current.
|
|
474
|
+
if (apiRef.current.getRow(id)) {
|
|
475
|
+
apiRef.current.updateRows([finalRowUpdate]);
|
|
476
|
+
}
|
|
471
477
|
finishRowEditMode();
|
|
472
478
|
}).catch(handleError);
|
|
473
479
|
} catch (errorThrown) {
|
|
474
480
|
handleError(errorThrown);
|
|
475
481
|
}
|
|
476
482
|
} else {
|
|
477
|
-
apiRef.current.
|
|
483
|
+
if (apiRef.current.getRow(id)) {
|
|
484
|
+
apiRef.current.updateRows([rowUpdate]);
|
|
485
|
+
}
|
|
478
486
|
finishRowEditMode();
|
|
479
487
|
}
|
|
480
488
|
});
|
|
@@ -642,5 +650,5 @@ export const useGridRowEditing = (apiRef, props) => {
|
|
|
642
650
|
}, params));
|
|
643
651
|
}
|
|
644
652
|
});
|
|
645
|
-
}, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
|
|
653
|
+
}, [apiRef, rowModesModel, updateOrDeleteRowState, updateStateToStartRowEditMode, updateStateToStopRowEditMode, updateRowInRowModesModel]);
|
|
646
654
|
};
|
package/index.js
CHANGED
package/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.3",
|
|
4
4
|
"author": "MUI Team",
|
|
5
5
|
"description": "The Community plan edition of the MUI X Data Grid components.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,8 +42,8 @@
|
|
|
42
42
|
"clsx": "^2.1.1",
|
|
43
43
|
"prop-types": "^15.8.1",
|
|
44
44
|
"use-sync-external-store": "^1.6.0",
|
|
45
|
-
"@mui/x-
|
|
46
|
-
"@mui/x-
|
|
45
|
+
"@mui/x-virtualizer": "1.0.0-alpha.1",
|
|
46
|
+
"@mui/x-internals": "9.0.0-alpha.2"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@emotion/react": "^11.9.0",
|