@mui/x-data-grid-pro 8.5.0 → 8.5.2
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 +204 -0
- package/DataGridPro/DataGridPro.js +1 -1
- package/DataGridPro/useDataGridProComponent.js +9 -5
- package/components/GridDetailPanel.d.ts +1 -1
- package/components/GridDetailPanel.js +5 -0
- package/esm/DataGridPro/DataGridPro.js +1 -1
- package/esm/DataGridPro/useDataGridProComponent.js +9 -5
- package/esm/components/GridDetailPanel.d.ts +1 -1
- package/esm/components/GridDetailPanel.js +5 -0
- package/esm/hooks/features/columnReorder/columnReorderSelector.d.ts +3 -1
- package/esm/hooks/features/dataSource/gridDataSourceSelector.d.ts +12 -4
- package/esm/hooks/features/detailPanel/gridDetailPanelSelector.d.ts +10 -4
- package/esm/hooks/features/detailPanel/useGridDetailPanel.js +1 -1
- package/esm/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js +17 -19
- package/esm/hooks/features/rowReorder/useGridRowReorderPreProcessors.js +10 -8
- package/esm/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js +2 -3
- package/esm/hooks/features/treeData/useGridTreeDataPreProcessors.js +2 -3
- package/esm/index.js +1 -1
- package/esm/utils/tree/models.d.ts +3 -0
- package/hooks/features/columnReorder/columnReorderSelector.d.ts +3 -1
- package/hooks/features/dataSource/gridDataSourceSelector.d.ts +12 -4
- package/hooks/features/detailPanel/gridDetailPanelSelector.d.ts +10 -4
- package/hooks/features/detailPanel/useGridDetailPanel.js +1 -1
- package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js +17 -19
- package/hooks/features/rowReorder/useGridRowReorderPreProcessors.js +10 -8
- package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js +1 -2
- package/hooks/features/treeData/useGridTreeDataPreProcessors.js +1 -2
- package/index.js +1 -1
- package/package.json +6 -7
- package/utils/tree/models.d.ts +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,210 @@
|
|
|
5
5
|
All notable changes to this project will be documented in this file.
|
|
6
6
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
7
|
|
|
8
|
+
## 8.5.2
|
|
9
|
+
|
|
10
|
+
_Jun 12, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 📊 Improve Data Grid selectors performance
|
|
15
|
+
- 🐞 Fix `useSyncExternalStore` import error in React 17
|
|
16
|
+
|
|
17
|
+
Special thanks go out to the community members for their valuable contributions:
|
|
18
|
+
@alisasanib, @noobyogi0010.
|
|
19
|
+
|
|
20
|
+
The following are all team members who have contributed to this release:
|
|
21
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari, @prakhargupta1, @romgrk.
|
|
22
|
+
|
|
23
|
+
### Data Grid
|
|
24
|
+
|
|
25
|
+
#### `@mui/x-data-grid@8.5.2`
|
|
26
|
+
|
|
27
|
+
- [DataGrid] Improve selectors performance (#18234) @romgrk
|
|
28
|
+
- [DataGrid] Fix data grid palette when using CSS vars (#18310) @KenanYusuf
|
|
29
|
+
- [DataGrid] Ignore data source request if the grid got unmounted (#18268) @arminmeh
|
|
30
|
+
|
|
31
|
+
#### `@mui/x-data-grid-pro@8.5.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
32
|
+
|
|
33
|
+
Same changes as in `@mui/x-data-grid@8.5.2`, plus:
|
|
34
|
+
|
|
35
|
+
- [DataGridPro] Fix flex column width if it is a pinned column (#18293) @alisasanib
|
|
36
|
+
- [DataGridPro] Fix inconsistent filtering results with aggregation (#17954) @cherniavskii
|
|
37
|
+
|
|
38
|
+
#### `@mui/x-data-grid-premium@8.5.2` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
39
|
+
|
|
40
|
+
Same changes as in `@mui/x-data-grid-pro@8.5.2`.
|
|
41
|
+
|
|
42
|
+
### Date and Time Pickers
|
|
43
|
+
|
|
44
|
+
#### `@mui/x-date-pickers@8.5.2`
|
|
45
|
+
|
|
46
|
+
- [pickers] Add `PickerDay2` and `DateRangePickerDay2` components (#15921) @noraleonte
|
|
47
|
+
- [pickers] Fix `hiddenLabel` prop propagation (#18195) @noobyogi0010
|
|
48
|
+
|
|
49
|
+
#### `@mui/x-date-pickers-pro@8.5.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
50
|
+
|
|
51
|
+
Same changes as in `@mui/x-date-pickers@8.5.2`.
|
|
52
|
+
|
|
53
|
+
### Charts
|
|
54
|
+
|
|
55
|
+
#### `@mui/x-charts@8.5.2`
|
|
56
|
+
|
|
57
|
+
- [charts] Add a default value formatter for continuous scales (#18178) @bernardobelchior
|
|
58
|
+
- [charts] Add margin-bottom to charts toolbar (#18326) @bernardobelchior
|
|
59
|
+
- [charts] Fix grid with band scale (#18295) @alexfauquette
|
|
60
|
+
- [charts] Remove unnecessary style changes in tests (#18317) @JCQuintas
|
|
61
|
+
- [charts] Remove `sx` prop merging from `useComponentRenderer` (#18235) @bernardobelchior
|
|
62
|
+
- [charts] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
|
|
63
|
+
|
|
64
|
+
#### `@mui/x-charts-pro@8.5.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
65
|
+
|
|
66
|
+
Same changes as in `@mui/x-charts@8.5.2`, plus:
|
|
67
|
+
|
|
68
|
+
- [charts-pro] Document zoom slider tooltip value formatting (#18261) @bernardobelchior
|
|
69
|
+
- [charts-pro] Funnel `gap` prop does not impact the drawing area (#18233) @JCQuintas
|
|
70
|
+
- [charts-pro] Use `ChartsToolbarPro` types in pro charts (#18243) @bernardobelchior
|
|
71
|
+
|
|
72
|
+
### Tree View
|
|
73
|
+
|
|
74
|
+
#### `@mui/x-tree-view@8.5.2`
|
|
75
|
+
|
|
76
|
+
- [tree-view] Fix `useSyncExternalStore` import error in React 17 (#18314) @bernardobelchior
|
|
77
|
+
|
|
78
|
+
#### `@mui/x-tree-view-pro@8.5.2` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
79
|
+
|
|
80
|
+
Same changes as in `@mui/x-tree-view@8.5.2`.
|
|
81
|
+
|
|
82
|
+
### Docs
|
|
83
|
+
|
|
84
|
+
- [docs] Add toolbar custom trigger and panel recipe (#18297) @KenanYusuf
|
|
85
|
+
- [docs] Copyedit the Priority support page (#18311) @mapache-salvaje
|
|
86
|
+
- [docs] Remove confusing opt-out mention in telemetry docs (#18257) @prakhargupta1
|
|
87
|
+
- [docs] Revise the Master Detail doc (#17927) @mapache-salvaje
|
|
88
|
+
- [docs] Revise the list view doc (#17928) @mapache-salvaje
|
|
89
|
+
- [docs] Audit and revise the Pro column docs (#17844) @mapache-salvaje
|
|
90
|
+
- [docs] Add some more context on Heatmap (#18256) @oliviertassinari
|
|
91
|
+
- [x-telemetry] Reduce Telemetry overhead (#18292) @oliviertassinari
|
|
92
|
+
- [code-infra] Align Node version used in CI to v22 (#18319) @LukasTy
|
|
93
|
+
- [code-infra] Fix pkg.pr.new publishing (#18316) @bernardobelchior
|
|
94
|
+
- [code-infra] Revert `React` to `19.0.0` (#18265) @LukasTy
|
|
95
|
+
- [code-infra] Use `catalog` for reused dependencies (#18302) @LukasTy
|
|
96
|
+
- [infra] Remove unused karma/mocha deps and files (#18340) @JCQuintas
|
|
97
|
+
- [infra] Update github label references to use 'scope' instead of 'component' (#18260) @michelengelen
|
|
98
|
+
- [infra] Use a single browser server in CI (#18230) @JCQuintas
|
|
99
|
+
|
|
100
|
+
## 8.5.1
|
|
101
|
+
|
|
102
|
+
<!-- generated comparing v8.5.0..master -->
|
|
103
|
+
|
|
104
|
+
_Jun 5, 2025_
|
|
105
|
+
|
|
106
|
+
We'd like to extend a big thank you to the 9 contributors who made this release possible. Here are some highlights ✨:
|
|
107
|
+
|
|
108
|
+
- 📊 Allow exporting pie charts
|
|
109
|
+
- 📚 Documentation improvements
|
|
110
|
+
- 🌎 Improve Portuguese (ptPT) translations on the Data Grid
|
|
111
|
+
- 🌎 Improve Portuguese (ptPT, ptBR) translations on Charts
|
|
112
|
+
- 🌎 Improve Arabic (ar-SD) locale
|
|
113
|
+
- 🐞 Bugfixes
|
|
114
|
+
|
|
115
|
+
Special thanks go out to the community members for their valuable contributions: @moosekebab, @TiagoPortfolio.
|
|
116
|
+
The following are all team members who have contributed to this release:
|
|
117
|
+
@alexfauquette, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @michelengelen, @arminmeh.
|
|
118
|
+
|
|
119
|
+
<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
|
|
120
|
+
|
|
121
|
+
### Data Grid
|
|
122
|
+
|
|
123
|
+
#### `@mui/x-data-grid@8.5.1`
|
|
124
|
+
|
|
125
|
+
- [DataGrid] Fix `registerPipeProcessor()` for Node v20 (#18241) @arminmeh
|
|
126
|
+
- [DataGrid] Fix background color in column header filler cells (#18188) @KenanYusuf
|
|
127
|
+
- [DataGrid] Keep pipe pre-processors execution order when callback reference changes (#17558) @arminmeh
|
|
128
|
+
- [DataGrid] Use `useComponentRenderer` from x-internals (#18203) @bernardobelchior
|
|
129
|
+
- [l10n] Improve Arabic (ar-SD) locale (#17959) @moosekebab
|
|
130
|
+
- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#18064) @TiagoPortfolio
|
|
131
|
+
|
|
132
|
+
#### `@mui/x-data-grid-pro@8.5.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
133
|
+
|
|
134
|
+
Same changes as in `@mui/x-data-grid@8.5.1`, plus:
|
|
135
|
+
|
|
136
|
+
- [DataGridPro] Skip rendering detail panels of the rows turned into skeleton rows with lazy loading (#17958) @arminmeh
|
|
137
|
+
|
|
138
|
+
#### `@mui/x-data-grid-premium@8.5.1` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
139
|
+
|
|
140
|
+
Same changes as in `@mui/x-data-grid-pro@8.5.1`.
|
|
141
|
+
|
|
142
|
+
### Date and Time Pickers
|
|
143
|
+
|
|
144
|
+
#### `@mui/x-date-pickers@8.5.1`
|
|
145
|
+
|
|
146
|
+
- [pickers] Fix `transformOrigin` resolving based on popper `placement` (#18206) @LukasTy
|
|
147
|
+
|
|
148
|
+
#### `@mui/x-date-pickers-pro@8.5.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
149
|
+
|
|
150
|
+
Same changes as in `@mui/x-date-pickers@8.5.1`.
|
|
151
|
+
|
|
152
|
+
### Charts
|
|
153
|
+
|
|
154
|
+
#### `@mui/x-charts@8.5.1`
|
|
155
|
+
|
|
156
|
+
- [charts] Allow skipping tooltip render (#18050) @alexfauquette
|
|
157
|
+
- [charts] Fix act warnings in toolbar tests (#18212) @JCQuintas
|
|
158
|
+
- [charts] Fix prop typo in `extendVertically` (#18211) @JCQuintas
|
|
159
|
+
- [charts] Fix responsive height for ChartsWrapper (#18183) @alexfauquette
|
|
160
|
+
- [charts] Improve charts toolbar accessibility (#18056) @bernardobelchior
|
|
161
|
+
- [charts] Let line series propagate null from the dataset (#18223) @alexfauquette
|
|
162
|
+
- [l10n] Add Portuguese locales for charts (pt-PT, pt-BR) (#18069) @bernardobelchior
|
|
163
|
+
|
|
164
|
+
#### `@mui/x-charts-pro@8.5.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
165
|
+
|
|
166
|
+
Same changes as in `@mui/x-charts@8.5.1`, plus:
|
|
167
|
+
|
|
168
|
+
- [charts-pro] Add `linear-sharp` curve as alternative to square edge (#17966) @JCQuintas
|
|
169
|
+
- [charts-pro] Add correct classes to `FunnelSectionLabel` (#18061) @JCQuintas
|
|
170
|
+
- [charts-pro] Allow exporting a pie chart (#18063) @bernardobelchior
|
|
171
|
+
- [charts-pro] Fix initial render for zoom slider selection (#18208) @bernardobelchior
|
|
172
|
+
- [charts-pro] Fix props being passed to DOM in FunnelChart (#18192) @JCQuintas
|
|
173
|
+
- [charts-pro] Show axis value in zoom slider tooltip (#18054) @bernardobelchior
|
|
174
|
+
- [charts-pro] Render the toolbar in the heatmap chart (#18247) @bernardobelchior
|
|
175
|
+
|
|
176
|
+
### Tree View
|
|
177
|
+
|
|
178
|
+
#### `@mui/x-tree-view@8.5.1`
|
|
179
|
+
|
|
180
|
+
Internal changes.
|
|
181
|
+
|
|
182
|
+
#### `@mui/x-tree-view-pro@8.5.1` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
183
|
+
|
|
184
|
+
Same changes as in `@mui/x-tree-view@8.5.1`.
|
|
185
|
+
|
|
186
|
+
### Docs
|
|
187
|
+
|
|
188
|
+
- [docs] Update `valueFormatter` signature in migration guide (#18226) @michelengelen
|
|
189
|
+
|
|
190
|
+
### Core
|
|
191
|
+
|
|
192
|
+
- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
|
|
193
|
+
- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
|
|
194
|
+
- chore(deps): bump babel (#18157) @renovate[bot]
|
|
195
|
+
- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
|
|
196
|
+
- chore(deps): bump material ui (#17802) @renovate[bot]
|
|
197
|
+
- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
|
|
198
|
+
- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
|
|
199
|
+
- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
|
|
200
|
+
- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
|
|
201
|
+
- [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
|
|
202
|
+
- [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
|
|
203
|
+
- [code-infra] Remove `istanbul` references (#18194) @JCQuintas
|
|
204
|
+
- [code-infra] Remove codesandbox:ci (#18179) @JCQuintas
|
|
205
|
+
- [code-infra] Replace `mocha` with `vitest` on e2e and regression tests (#18071) @JCQuintas
|
|
206
|
+
- [code-infra] Upgrade @mui/internal-test-utils (#18191) @JCQuintas
|
|
207
|
+
- [code-infra] Use vitest for `no-direct-state-access` tests (#18209) @JCQuintas
|
|
208
|
+
- [infra] Improve test setup (#18228) @LukasTy
|
|
209
|
+
- [infra] Update bug and feature request templates to standardize label types (#18198) @michelengelen
|
|
210
|
+
- [infra] Use `playwright` docker image (#18186) @LukasTy
|
|
211
|
+
|
|
8
212
|
## 8.5.0
|
|
9
213
|
|
|
10
214
|
_May 29, 2025_
|
|
@@ -29,7 +29,7 @@ const configuration = {
|
|
|
29
29
|
useCellAggregationResult: () => null
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
const releaseInfo = "
|
|
32
|
+
const releaseInfo = "MTc0OTY3OTIwMDAwMA==";
|
|
33
33
|
const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
|
|
34
34
|
packageName: "x-data-grid-pro",
|
|
35
35
|
releaseInfo: releaseInfo
|
|
@@ -30,16 +30,20 @@ const useDataGridProComponent = (apiRef, props) => {
|
|
|
30
30
|
|
|
31
31
|
/**
|
|
32
32
|
* Register all pre-processors called during state initialization here.
|
|
33
|
+
* Some pre-processors are changing the same part of the state (like the order of the columns).
|
|
34
|
+
* Order them in descending order of priority.
|
|
35
|
+
* For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
|
|
36
|
+
* Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
|
|
37
|
+
* Desired autogenerated columns order is:
|
|
38
|
+
* left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
|
|
33
39
|
*/
|
|
34
|
-
(0,
|
|
35
|
-
(0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
|
|
40
|
+
(0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
|
|
36
41
|
(0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
|
|
37
42
|
(0, _useGridDataSourceTreeDataPreProcessors.useGridDataSourceTreeDataPreProcessors)(apiRef, props);
|
|
43
|
+
(0, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
|
|
38
44
|
(0, _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors)(apiRef, props);
|
|
39
45
|
(0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
|
|
40
|
-
(0,
|
|
41
|
-
// The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
|
|
42
|
-
// Because it changes the order of the columns.
|
|
46
|
+
(0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
|
|
43
47
|
(0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props);
|
|
44
48
|
(0, _internals.useGridRowsPreProcessors)(apiRef);
|
|
45
49
|
|
|
@@ -10,5 +10,5 @@ interface GridDetailPanelProps extends Pick<React.HTMLAttributes<HTMLDivElement>
|
|
|
10
10
|
*/
|
|
11
11
|
height: number | 'auto';
|
|
12
12
|
}
|
|
13
|
-
declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element;
|
|
13
|
+
declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element | null;
|
|
14
14
|
export { GridDetailPanel };
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.GridDetailPanel = GridDetailPanel;
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _styles = require("@mui/material/styles");
|
|
11
|
+
var _xDataGrid = require("@mui/x-data-grid");
|
|
11
12
|
var _internals = require("@mui/x-data-grid/internals");
|
|
12
13
|
var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
|
|
13
14
|
var _useGridRootProps = require("../hooks/utils/useGridRootProps");
|
|
@@ -33,6 +34,7 @@ function GridDetailPanel(props) {
|
|
|
33
34
|
const rootProps = (0, _useGridRootProps.useGridRootProps)();
|
|
34
35
|
const ownerState = rootProps;
|
|
35
36
|
const hasAutoHeight = height === 'auto';
|
|
37
|
+
const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, rowId);
|
|
36
38
|
React.useLayoutEffect(() => {
|
|
37
39
|
if (hasAutoHeight && typeof ResizeObserver === 'undefined') {
|
|
38
40
|
// Fallback for IE
|
|
@@ -44,6 +46,9 @@ function GridDetailPanel(props) {
|
|
|
44
46
|
const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
|
|
45
47
|
apiRef.current.storeDetailPanelHeight(rowId, observedHeight);
|
|
46
48
|
}, hasAutoHeight);
|
|
49
|
+
if (rowNode?.type === 'skeletonRow') {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
47
52
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailPanel, {
|
|
48
53
|
ref: ref,
|
|
49
54
|
ownerState: ownerState,
|
|
@@ -22,7 +22,7 @@ const configuration = {
|
|
|
22
22
|
useCellAggregationResult: () => null
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
-
const releaseInfo = "
|
|
25
|
+
const releaseInfo = "MTc0OTY3OTIwMDAwMA==";
|
|
26
26
|
const watermark = /*#__PURE__*/_jsx(Watermark, {
|
|
27
27
|
packageName: "x-data-grid-pro",
|
|
28
28
|
releaseInfo: releaseInfo
|
|
@@ -23,16 +23,20 @@ export const useDataGridProComponent = (apiRef, props) => {
|
|
|
23
23
|
|
|
24
24
|
/**
|
|
25
25
|
* Register all pre-processors called during state initialization here.
|
|
26
|
+
* Some pre-processors are changing the same part of the state (like the order of the columns).
|
|
27
|
+
* Order them in descending order of priority.
|
|
28
|
+
* For example, left pinned columns should always render first from the left, so the `hydrateColumns` pre-processor from `useGridColumnPinningPreProcessors` should be called last (after all other `hydrateColumns` pre-processors).
|
|
29
|
+
* Similarly, the `hydrateColumns` pre-processor from `useGridRowSelectionPreProcessors` should be called after `useGridTreeDataPreProcessors` because the selection checkboxes should appear before the tree data.
|
|
30
|
+
* Desired autogenerated columns order is:
|
|
31
|
+
* left pinned columns -> row reordering column -> checkbox column -> tree data column -> master detail column -> rest of the columns
|
|
26
32
|
*/
|
|
27
|
-
|
|
28
|
-
useGridRowReorderPreProcessors(apiRef, props);
|
|
33
|
+
useGridDetailPanelPreProcessors(apiRef, props);
|
|
29
34
|
useGridTreeDataPreProcessors(apiRef, props);
|
|
30
35
|
useGridDataSourceTreeDataPreProcessors(apiRef, props);
|
|
36
|
+
useGridRowSelectionPreProcessors(apiRef, props);
|
|
31
37
|
useGridLazyLoaderPreProcessors(apiRef, props);
|
|
32
38
|
useGridRowPinningPreProcessors(apiRef);
|
|
33
|
-
|
|
34
|
-
// The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
|
|
35
|
-
// Because it changes the order of the columns.
|
|
39
|
+
useGridRowReorderPreProcessors(apiRef, props);
|
|
36
40
|
useGridColumnPinningPreProcessors(apiRef, props);
|
|
37
41
|
useGridRowsPreProcessors(apiRef);
|
|
38
42
|
|
|
@@ -10,5 +10,5 @@ interface GridDetailPanelProps extends Pick<React.HTMLAttributes<HTMLDivElement>
|
|
|
10
10
|
*/
|
|
11
11
|
height: number | 'auto';
|
|
12
12
|
}
|
|
13
|
-
declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element;
|
|
13
|
+
declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element | null;
|
|
14
14
|
export { GridDetailPanel };
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
|
+
import { gridRowNodeSelector } from '@mui/x-data-grid';
|
|
5
6
|
import { vars } from '@mui/x-data-grid/internals';
|
|
6
7
|
import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
|
|
7
8
|
import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
|
|
@@ -27,6 +28,7 @@ function GridDetailPanel(props) {
|
|
|
27
28
|
const rootProps = useGridRootProps();
|
|
28
29
|
const ownerState = rootProps;
|
|
29
30
|
const hasAutoHeight = height === 'auto';
|
|
31
|
+
const rowNode = gridRowNodeSelector(apiRef, rowId);
|
|
30
32
|
React.useLayoutEffect(() => {
|
|
31
33
|
if (hasAutoHeight && typeof ResizeObserver === 'undefined') {
|
|
32
34
|
// Fallback for IE
|
|
@@ -38,6 +40,9 @@ function GridDetailPanel(props) {
|
|
|
38
40
|
const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
|
|
39
41
|
apiRef.current.storeDetailPanelHeight(rowId, observedHeight);
|
|
40
42
|
}, hasAutoHeight);
|
|
43
|
+
if (rowNode?.type === 'skeletonRow') {
|
|
44
|
+
return null;
|
|
45
|
+
}
|
|
41
46
|
return /*#__PURE__*/_jsx(DetailPanel, {
|
|
42
47
|
ref: ref,
|
|
43
48
|
ownerState: ownerState,
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import { GridStatePro } from "../../../models/gridStatePro.js";
|
|
2
2
|
export declare const gridColumnReorderSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./columnReorderInterfaces.js").GridColumnReorderState>;
|
|
3
|
-
export declare const gridColumnReorderDragColSelector:
|
|
3
|
+
export declare const gridColumnReorderDragColSelector: (args_0: import("react").RefObject<{
|
|
4
|
+
state: GridStatePro;
|
|
5
|
+
} | null>) => string;
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import type { GridRowId } from '@mui/x-data-grid';
|
|
2
2
|
import { GridStatePro } from "../../../models/gridStatePro.js";
|
|
3
3
|
export declare const gridDataSourceStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./models.js").GridDataSourceState>;
|
|
4
|
-
export declare const gridDataSourceLoadingSelector:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export declare const
|
|
4
|
+
export declare const gridDataSourceLoadingSelector: (args_0: import("react").RefObject<{
|
|
5
|
+
state: GridStatePro;
|
|
6
|
+
} | null>) => Record<GridRowId, boolean>;
|
|
7
|
+
export declare const gridDataSourceLoadingIdSelector: (args_0: import("react").RefObject<{
|
|
8
|
+
state: GridStatePro;
|
|
9
|
+
} | null>, id: GridRowId) => boolean;
|
|
10
|
+
export declare const gridDataSourceErrorsSelector: (args_0: import("react").RefObject<{
|
|
11
|
+
state: GridStatePro;
|
|
12
|
+
} | null>) => Record<GridRowId, any>;
|
|
13
|
+
export declare const gridDataSourceErrorSelector: (args_0: import("react").RefObject<{
|
|
14
|
+
state: GridStatePro;
|
|
15
|
+
} | null>, id: GridRowId) => any;
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import { GridStatePro } from "../../../models/gridStatePro.js";
|
|
2
2
|
export declare const gridDetailPanelStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./gridDetailPanelInterface.js").GridDetailPanelState>;
|
|
3
|
-
export declare const gridDetailPanelExpandedRowIdsSelector:
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export declare const gridDetailPanelExpandedRowIdsSelector: (args_0: import("react").RefObject<{
|
|
4
|
+
state: GridStatePro;
|
|
5
|
+
} | null>) => Set<import("@mui/x-data-grid").GridRowId>;
|
|
6
|
+
export declare const gridDetailPanelExpandedRowsContentCacheSelector: (args_0: import("react").RefObject<{
|
|
7
|
+
state: GridStatePro;
|
|
8
|
+
} | null>) => Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>;
|
|
9
|
+
export declare const gridDetailPanelRawHeightCacheSelector: (args_0: import("react").RefObject<{
|
|
10
|
+
state: GridStatePro;
|
|
11
|
+
} | null>) => {
|
|
6
12
|
[x: string]: {
|
|
7
13
|
autoHeight: boolean;
|
|
8
14
|
height: number;
|
|
@@ -11,4 +17,4 @@ export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-
|
|
|
11
17
|
autoHeight: boolean;
|
|
12
18
|
height: number;
|
|
13
19
|
};
|
|
14
|
-
}
|
|
20
|
+
};
|
|
@@ -174,7 +174,7 @@ export const useGridDetailPanel = (apiRef, props) => {
|
|
|
174
174
|
}
|
|
175
175
|
updateCachesIfNeeded();
|
|
176
176
|
const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef);
|
|
177
|
-
initialValue.detail = heightCache[row.id]
|
|
177
|
+
initialValue.detail = heightCache[row.id]?.height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
|
|
178
178
|
return initialValue;
|
|
179
179
|
}, [apiRef, updateCachesIfNeeded]);
|
|
180
180
|
const enabled = props.getDetailPanelContent !== undefined;
|
|
@@ -6,28 +6,26 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from
|
|
|
6
6
|
import { gridDetailPanelExpandedRowIdsSelector } from "./gridDetailPanelSelector.js";
|
|
7
7
|
export const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
|
|
8
8
|
const addToggleColumn = React.useCallback(columnsState => {
|
|
9
|
-
|
|
10
|
-
// Remove the toggle column, when it exists
|
|
11
|
-
if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
|
|
12
|
-
delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
|
|
13
|
-
columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
|
|
14
|
-
}
|
|
15
|
-
return columnsState;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
// Don't add the toggle column if there's already one
|
|
19
|
-
// The user might have manually added it to have it in a custom position
|
|
20
|
-
if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
|
|
21
|
-
return columnsState;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Otherwise, add the toggle column at the beginning
|
|
25
|
-
columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
|
|
26
|
-
columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
|
|
9
|
+
const detailPanelToggleColumn = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
|
|
27
10
|
headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
|
|
28
11
|
});
|
|
12
|
+
const shouldHaveToggleColumn = !!props.getDetailPanelContent;
|
|
13
|
+
const hasToggleColumn = columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
|
|
14
|
+
if (shouldHaveToggleColumn && !hasToggleColumn) {
|
|
15
|
+
columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
|
|
16
|
+
columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
|
|
17
|
+
} else if (!shouldHaveToggleColumn && hasToggleColumn) {
|
|
18
|
+
delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
|
|
19
|
+
columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
|
|
20
|
+
} else if (shouldHaveToggleColumn && hasToggleColumn) {
|
|
21
|
+
columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, detailPanelToggleColumn, columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]);
|
|
22
|
+
// If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
|
|
23
|
+
if (!props.columns.some(col => col.field === GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
|
|
24
|
+
columnsState.orderedFields = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD)];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
29
27
|
return columnsState;
|
|
30
|
-
}, [privateApiRef, props.getDetailPanelContent]);
|
|
28
|
+
}, [privateApiRef, props.columns, props.getDetailPanelContent]);
|
|
31
29
|
const addExpandedClassToRow = React.useCallback((classes, id) => {
|
|
32
30
|
if (props.getDetailPanelContent == null) {
|
|
33
31
|
return classes;
|
|
@@ -28,19 +28,21 @@ export const useGridRowReorderPreProcessors = (privateApiRef, props) => {
|
|
|
28
28
|
headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
|
|
29
29
|
});
|
|
30
30
|
const shouldHaveReorderColumn = props.rowReordering;
|
|
31
|
-
const
|
|
32
|
-
if (shouldHaveReorderColumn &&
|
|
33
|
-
columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
|
|
34
|
-
return columnsState;
|
|
35
|
-
}
|
|
36
|
-
if (shouldHaveReorderColumn && !haveReorderColumn) {
|
|
31
|
+
const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
|
|
32
|
+
if (shouldHaveReorderColumn && !hasReorderColumn) {
|
|
37
33
|
columnsState.lookup[reorderColumn.field] = reorderColumn;
|
|
38
34
|
columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
|
|
39
|
-
} else if (!shouldHaveReorderColumn &&
|
|
35
|
+
} else if (!shouldHaveReorderColumn && hasReorderColumn) {
|
|
40
36
|
delete columnsState.lookup[reorderColumn.field];
|
|
41
37
|
columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
|
|
38
|
+
} else if (shouldHaveReorderColumn && hasReorderColumn) {
|
|
39
|
+
columnsState.lookup[reorderColumn.field] = _extends({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
|
|
40
|
+
// If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
|
|
41
|
+
if (!props.columns.some(col => col.field === GRID_REORDER_COL_DEF.field)) {
|
|
42
|
+
columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
|
|
43
|
+
}
|
|
42
44
|
}
|
|
43
45
|
return columnsState;
|
|
44
|
-
}, [privateApiRef, classes, props.rowReordering]);
|
|
46
|
+
}, [privateApiRef, classes, props.columns, props.rowReordering]);
|
|
45
47
|
useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateReorderColumn);
|
|
46
48
|
};
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
const _excluded = ["hideDescendantCount"];
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import { gridRowTreeSelector, useFirstRender
|
|
5
|
+
import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
|
|
6
6
|
import { GridStrategyGroup, useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
|
|
7
7
|
import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "../treeData/gridTreeDataGroupColDef.js";
|
|
8
8
|
import { skipFiltering, skipSorting } from "./utils.js";
|
|
@@ -56,8 +56,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
|
|
|
56
56
|
}
|
|
57
57
|
columnsState.lookup[groupingColDefField] = newGroupingColumn;
|
|
58
58
|
if (prevGroupingColumn == null) {
|
|
59
|
-
|
|
60
|
-
columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
|
|
59
|
+
columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
|
|
61
60
|
}
|
|
62
61
|
} else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
|
|
63
62
|
delete columnsState.lookup[groupingColDefField];
|
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
|
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
const _excluded = ["hideDescendantCount"];
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import { gridRowTreeSelector, useFirstRender
|
|
5
|
+
import { gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
|
|
6
6
|
import { GridStrategyGroup, useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
|
|
7
7
|
import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "./gridTreeDataGroupColDef.js";
|
|
8
8
|
import { filterRowTreeFromTreeData, TreeDataStrategy } from "./gridTreeDataUtils.js";
|
|
@@ -56,8 +56,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
|
|
|
56
56
|
}
|
|
57
57
|
columnsState.lookup[groupingColDefField] = newGroupingColumn;
|
|
58
58
|
if (prevGroupingColumn == null) {
|
|
59
|
-
|
|
60
|
-
columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
|
|
59
|
+
columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
|
|
61
60
|
}
|
|
62
61
|
} else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
|
|
63
62
|
delete columnsState.lookup[groupingColDefField];
|
package/esm/index.js
CHANGED
|
@@ -10,5 +10,8 @@ export interface RowTreeBuilderNode {
|
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* Callback called when trying to insert a data row in the tree in place of an already existing data row.
|
|
13
|
+
* @param {GridRowId} firstId The id of the row that is already in the tree.
|
|
14
|
+
* @param {GridRowId} secondId The id of the row that is being inserted.
|
|
15
|
+
* @param {RowTreeBuilderGroupingCriterion[]} path The path of the row that is being inserted.
|
|
13
16
|
*/
|
|
14
17
|
export type GridTreePathDuplicateHandler = (firstId: GridRowId, secondId: GridRowId, path: RowTreeBuilderGroupingCriterion[]) => void;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import { GridStatePro } from "../../../models/gridStatePro.js";
|
|
2
2
|
export declare const gridColumnReorderSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./columnReorderInterfaces.js").GridColumnReorderState>;
|
|
3
|
-
export declare const gridColumnReorderDragColSelector:
|
|
3
|
+
export declare const gridColumnReorderDragColSelector: (args_0: import("react").RefObject<{
|
|
4
|
+
state: GridStatePro;
|
|
5
|
+
} | null>) => string;
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import type { GridRowId } from '@mui/x-data-grid';
|
|
2
2
|
import { GridStatePro } from "../../../models/gridStatePro.js";
|
|
3
3
|
export declare const gridDataSourceStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./models.js").GridDataSourceState>;
|
|
4
|
-
export declare const gridDataSourceLoadingSelector:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export declare const
|
|
4
|
+
export declare const gridDataSourceLoadingSelector: (args_0: import("react").RefObject<{
|
|
5
|
+
state: GridStatePro;
|
|
6
|
+
} | null>) => Record<GridRowId, boolean>;
|
|
7
|
+
export declare const gridDataSourceLoadingIdSelector: (args_0: import("react").RefObject<{
|
|
8
|
+
state: GridStatePro;
|
|
9
|
+
} | null>, id: GridRowId) => boolean;
|
|
10
|
+
export declare const gridDataSourceErrorsSelector: (args_0: import("react").RefObject<{
|
|
11
|
+
state: GridStatePro;
|
|
12
|
+
} | null>) => Record<GridRowId, any>;
|
|
13
|
+
export declare const gridDataSourceErrorSelector: (args_0: import("react").RefObject<{
|
|
14
|
+
state: GridStatePro;
|
|
15
|
+
} | null>, id: GridRowId) => any;
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import { GridStatePro } from "../../../models/gridStatePro.js";
|
|
2
2
|
export declare const gridDetailPanelStateSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, unknown, import("./gridDetailPanelInterface.js").GridDetailPanelState>;
|
|
3
|
-
export declare const gridDetailPanelExpandedRowIdsSelector:
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export declare const gridDetailPanelExpandedRowIdsSelector: (args_0: import("react").RefObject<{
|
|
4
|
+
state: GridStatePro;
|
|
5
|
+
} | null>) => Set<import("@mui/x-data-grid").GridRowId>;
|
|
6
|
+
export declare const gridDetailPanelExpandedRowsContentCacheSelector: (args_0: import("react").RefObject<{
|
|
7
|
+
state: GridStatePro;
|
|
8
|
+
} | null>) => Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>;
|
|
9
|
+
export declare const gridDetailPanelRawHeightCacheSelector: (args_0: import("react").RefObject<{
|
|
10
|
+
state: GridStatePro;
|
|
11
|
+
} | null>) => {
|
|
6
12
|
[x: string]: {
|
|
7
13
|
autoHeight: boolean;
|
|
8
14
|
height: number;
|
|
@@ -11,4 +17,4 @@ export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-
|
|
|
11
17
|
autoHeight: boolean;
|
|
12
18
|
height: number;
|
|
13
19
|
};
|
|
14
|
-
}
|
|
20
|
+
};
|
|
@@ -183,7 +183,7 @@ const useGridDetailPanel = (apiRef, props) => {
|
|
|
183
183
|
}
|
|
184
184
|
updateCachesIfNeeded();
|
|
185
185
|
const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef);
|
|
186
|
-
initialValue.detail = heightCache[row.id]
|
|
186
|
+
initialValue.detail = heightCache[row.id]?.height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
|
|
187
187
|
return initialValue;
|
|
188
188
|
}, [apiRef, updateCachesIfNeeded]);
|
|
189
189
|
const enabled = props.getDetailPanelContent !== undefined;
|
|
@@ -14,28 +14,26 @@ var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
|
|
|
14
14
|
var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
|
|
15
15
|
const useGridDetailPanelPreProcessors = (privateApiRef, props) => {
|
|
16
16
|
const addToggleColumn = React.useCallback(columnsState => {
|
|
17
|
-
|
|
18
|
-
// Remove the toggle column, when it exists
|
|
19
|
-
if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
|
|
20
|
-
delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
|
|
21
|
-
columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD);
|
|
22
|
-
}
|
|
23
|
-
return columnsState;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// Don't add the toggle column if there's already one
|
|
27
|
-
// The user might have manually added it to have it in a custom position
|
|
28
|
-
if (columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
|
|
29
|
-
return columnsState;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// Otherwise, add the toggle column at the beginning
|
|
33
|
-
columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
|
|
34
|
-
columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
|
|
17
|
+
const detailPanelToggleColumn = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
|
|
35
18
|
headerName: privateApiRef.current.getLocaleText('detailPanelToggle')
|
|
36
19
|
});
|
|
20
|
+
const shouldHaveToggleColumn = !!props.getDetailPanelContent;
|
|
21
|
+
const hasToggleColumn = columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] != null;
|
|
22
|
+
if (shouldHaveToggleColumn && !hasToggleColumn) {
|
|
23
|
+
columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = detailPanelToggleColumn;
|
|
24
|
+
columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields];
|
|
25
|
+
} else if (!shouldHaveToggleColumn && hasToggleColumn) {
|
|
26
|
+
delete columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD];
|
|
27
|
+
columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD);
|
|
28
|
+
} else if (shouldHaveToggleColumn && hasToggleColumn) {
|
|
29
|
+
columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, detailPanelToggleColumn, columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
|
|
30
|
+
// If the column is not in the columns array (not a custom detail panel toggle column), move it to the beginning of the column order
|
|
31
|
+
if (!props.columns.some(col => col.field === _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD)) {
|
|
32
|
+
columnsState.orderedFields = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.orderedFields.filter(field => field !== _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD)];
|
|
33
|
+
}
|
|
34
|
+
}
|
|
37
35
|
return columnsState;
|
|
38
|
-
}, [privateApiRef, props.getDetailPanelContent]);
|
|
36
|
+
}, [privateApiRef, props.columns, props.getDetailPanelContent]);
|
|
39
37
|
const addExpandedClassToRow = React.useCallback((classes, id) => {
|
|
40
38
|
if (props.getDetailPanelContent == null) {
|
|
41
39
|
return classes;
|
|
@@ -36,20 +36,22 @@ const useGridRowReorderPreProcessors = (privateApiRef, props) => {
|
|
|
36
36
|
headerName: privateApiRef.current.getLocaleText('rowReorderingHeaderName')
|
|
37
37
|
});
|
|
38
38
|
const shouldHaveReorderColumn = props.rowReordering;
|
|
39
|
-
const
|
|
40
|
-
if (shouldHaveReorderColumn &&
|
|
41
|
-
columnsState.lookup[reorderColumn.field] = (0, _extends2.default)({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
|
|
42
|
-
return columnsState;
|
|
43
|
-
}
|
|
44
|
-
if (shouldHaveReorderColumn && !haveReorderColumn) {
|
|
39
|
+
const hasReorderColumn = columnsState.lookup[reorderColumn.field] != null;
|
|
40
|
+
if (shouldHaveReorderColumn && !hasReorderColumn) {
|
|
45
41
|
columnsState.lookup[reorderColumn.field] = reorderColumn;
|
|
46
42
|
columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields];
|
|
47
|
-
} else if (!shouldHaveReorderColumn &&
|
|
43
|
+
} else if (!shouldHaveReorderColumn && hasReorderColumn) {
|
|
48
44
|
delete columnsState.lookup[reorderColumn.field];
|
|
49
45
|
columnsState.orderedFields = columnsState.orderedFields.filter(field => field !== reorderColumn.field);
|
|
46
|
+
} else if (shouldHaveReorderColumn && hasReorderColumn) {
|
|
47
|
+
columnsState.lookup[reorderColumn.field] = (0, _extends2.default)({}, reorderColumn, columnsState.lookup[reorderColumn.field]);
|
|
48
|
+
// If the column is not in the columns array (not a custom reorder column), move it to the beginning of the column order
|
|
49
|
+
if (!props.columns.some(col => col.field === _gridRowReorderColDef.GRID_REORDER_COL_DEF.field)) {
|
|
50
|
+
columnsState.orderedFields = [reorderColumn.field, ...columnsState.orderedFields.filter(field => field !== reorderColumn.field)];
|
|
51
|
+
}
|
|
50
52
|
}
|
|
51
53
|
return columnsState;
|
|
52
|
-
}, [privateApiRef, classes, props.rowReordering]);
|
|
54
|
+
}, [privateApiRef, classes, props.columns, props.rowReordering]);
|
|
53
55
|
(0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateColumns', updateReorderColumn);
|
|
54
56
|
};
|
|
55
57
|
exports.useGridRowReorderPreProcessors = useGridRowReorderPreProcessors;
|
|
@@ -64,8 +64,7 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
|
|
|
64
64
|
}
|
|
65
65
|
columnsState.lookup[groupingColDefField] = newGroupingColumn;
|
|
66
66
|
if (prevGroupingColumn == null) {
|
|
67
|
-
|
|
68
|
-
columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
|
|
67
|
+
columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
|
|
69
68
|
}
|
|
70
69
|
} else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
|
|
71
70
|
delete columnsState.lookup[groupingColDefField];
|
|
@@ -64,8 +64,7 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
|
|
|
64
64
|
}
|
|
65
65
|
columnsState.lookup[groupingColDefField] = newGroupingColumn;
|
|
66
66
|
if (prevGroupingColumn == null) {
|
|
67
|
-
|
|
68
|
-
columnsState.orderedFields = [...columnsState.orderedFields.slice(0, index), groupingColDefField, ...columnsState.orderedFields.slice(index)];
|
|
67
|
+
columnsState.orderedFields = [groupingColDefField, ...columnsState.orderedFields];
|
|
69
68
|
}
|
|
70
69
|
} else if (!shouldHaveGroupingColumn && prevGroupingColumn) {
|
|
71
70
|
delete columnsState.lookup[groupingColDefField];
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid-pro",
|
|
3
|
-
"version": "8.5.
|
|
3
|
+
"version": "8.5.2",
|
|
4
4
|
"author": "MUI Team",
|
|
5
5
|
"description": "The Pro plan edition of the MUI X Data Grid components.",
|
|
6
6
|
"main": "./index.js",
|
|
@@ -35,15 +35,14 @@
|
|
|
35
35
|
"directory": "packages/x-data-grid-pro"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@babel/runtime": "^7.27.
|
|
39
|
-
"@mui/utils": "^7.
|
|
38
|
+
"@babel/runtime": "^7.27.6",
|
|
39
|
+
"@mui/utils": "^7.1.1",
|
|
40
40
|
"@types/format-util": "^1.0.4",
|
|
41
41
|
"clsx": "^2.1.1",
|
|
42
42
|
"prop-types": "^15.8.1",
|
|
43
|
-
"
|
|
44
|
-
"@mui/x-internals": "8.5.
|
|
45
|
-
"@mui/x-
|
|
46
|
-
"@mui/x-data-grid": "8.5.0"
|
|
43
|
+
"@mui/x-license": "8.5.2",
|
|
44
|
+
"@mui/x-internals": "8.5.2",
|
|
45
|
+
"@mui/x-data-grid": "8.5.2"
|
|
47
46
|
},
|
|
48
47
|
"peerDependencies": {
|
|
49
48
|
"@emotion/react": "^11.9.0",
|
package/utils/tree/models.d.ts
CHANGED
|
@@ -10,5 +10,8 @@ export interface RowTreeBuilderNode {
|
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* Callback called when trying to insert a data row in the tree in place of an already existing data row.
|
|
13
|
+
* @param {GridRowId} firstId The id of the row that is already in the tree.
|
|
14
|
+
* @param {GridRowId} secondId The id of the row that is being inserted.
|
|
15
|
+
* @param {RowTreeBuilderGroupingCriterion[]} path The path of the row that is being inserted.
|
|
13
16
|
*/
|
|
14
17
|
export type GridTreePathDuplicateHandler = (firstId: GridRowId, secondId: GridRowId, path: RowTreeBuilderGroupingCriterion[]) => void;
|