@mui/x-data-grid-pro 8.9.2 → 8.10.1
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 +217 -6
- package/DataGridPro/DataGridPro.js +1 -1
- package/DataGridPro/useDataGridProComponent.js +1 -0
- package/esm/DataGridPro/DataGridPro.js +1 -1
- package/esm/DataGridPro/useDataGridProComponent.js +2 -1
- package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js +4 -2
- package/esm/hooks/features/dataSource/useGridDataSourceBasePro.d.ts +1 -1
- package/esm/hooks/features/dataSource/utils.js +59 -61
- package/esm/hooks/features/rowReorder/useGridRowReorder.d.ts +2 -0
- package/esm/hooks/features/rowReorder/useGridRowReorder.js +19 -1
- package/esm/index.js +1 -1
- package/esm/internals/index.d.ts +2 -1
- package/esm/internals/index.js +1 -1
- package/esm/models/gridApiPro.d.ts +2 -1
- package/esm/models/gridRowReorderApi.d.ts +10 -0
- package/esm/models/gridRowReorderApi.js +1 -0
- package/esm/utils/tree/sortRowTree.js +0 -4
- package/hooks/features/columnHeaders/useGridColumnHeaders.js +4 -2
- package/hooks/features/dataSource/useGridDataSourceBasePro.d.ts +1 -1
- package/hooks/features/dataSource/utils.js +59 -61
- package/hooks/features/rowReorder/useGridRowReorder.d.ts +2 -0
- package/hooks/features/rowReorder/useGridRowReorder.js +21 -2
- package/index.js +1 -1
- package/internals/index.d.ts +2 -1
- package/internals/index.js +7 -0
- package/models/gridApiPro.d.ts +2 -1
- package/models/gridRowReorderApi.d.ts +10 -0
- package/models/gridRowReorderApi.js +5 -0
- package/package.json +17 -19
- package/utils/tree/sortRowTree.js +0 -4
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,217 @@
|
|
|
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.10.1
|
|
9
|
+
|
|
10
|
+
_Aug 15, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
|
|
15
|
+
- 📚 Documentation improvements
|
|
16
|
+
|
|
17
|
+
The following are all team members who have contributed to this release:
|
|
18
|
+
@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
|
|
19
|
+
|
|
20
|
+
### Data Grid
|
|
21
|
+
|
|
22
|
+
#### `@mui/x-data-grid@8.10.1`
|
|
23
|
+
|
|
24
|
+
- [DataGrid] Fix scroll jumping (#19156) @romgrk
|
|
25
|
+
- [DataGrid] Fix scroll restoration (#19182) @romgrk
|
|
26
|
+
- [DataGrid] Fix "no row with id" error (#19193) @romgrk
|
|
27
|
+
|
|
28
|
+
#### `@mui/x-data-grid-pro@8.10.1` [](https://mui.com/r/x-pro-svg-link "Pro plan")
|
|
29
|
+
|
|
30
|
+
Same changes as in `@mui/x-data-grid@8.10.1`.
|
|
31
|
+
|
|
32
|
+
#### `@mui/x-data-grid-premium@8.10.1` [](https://mui.com/r/x-premium-svg-link "Premium plan")
|
|
33
|
+
|
|
34
|
+
Same changes as in `@mui/x-data-grid-pro@8.10.1`.
|
|
35
|
+
|
|
36
|
+
### Date and Time Pickers
|
|
37
|
+
|
|
38
|
+
#### `@mui/x-date-pickers@8.10.0`
|
|
39
|
+
|
|
40
|
+
Internal changes.
|
|
41
|
+
|
|
42
|
+
#### `@mui/x-date-pickers-pro@8.10.0` [](https://mui.com/r/x-pro-svg-link "Pro plan")
|
|
43
|
+
|
|
44
|
+
Same changes as in `@mui/x-date-pickers@8.10.0`.
|
|
45
|
+
|
|
46
|
+
### Charts
|
|
47
|
+
|
|
48
|
+
- Axes can now be grouped by category when using `band` and `point` scales
|
|
49
|
+
|
|
50
|
+
<img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
|
|
51
|
+
|
|
52
|
+
#### `@mui/x-charts@8.10.1`
|
|
53
|
+
|
|
54
|
+
- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
|
|
55
|
+
- [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
|
|
56
|
+
- [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
|
|
57
|
+
- [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
|
|
58
|
+
|
|
59
|
+
#### `@mui/x-charts-pro@8.10.1` [](https://mui.com/r/x-pro-svg-link "Pro plan")
|
|
60
|
+
|
|
61
|
+
Same changes as in `@mui/x-charts@8.10.1`.
|
|
62
|
+
|
|
63
|
+
### Tree View
|
|
64
|
+
|
|
65
|
+
#### `@mui/x-tree-view@8.10.1`
|
|
66
|
+
|
|
67
|
+
Internal changes.
|
|
68
|
+
|
|
69
|
+
#### `@mui/x-tree-view-pro@8.10.1` [](https://mui.com/r/x-pro-svg-link "Pro plan")
|
|
70
|
+
|
|
71
|
+
Same changes as in `@mui/x-tree-view@8.10.1`.
|
|
72
|
+
|
|
73
|
+
### Codemod
|
|
74
|
+
|
|
75
|
+
#### `@mui/x-codemod@8.10.1`
|
|
76
|
+
|
|
77
|
+
Internal changes.
|
|
78
|
+
|
|
79
|
+
### Docs
|
|
80
|
+
|
|
81
|
+
- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
|
|
82
|
+
- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
|
|
83
|
+
- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
|
|
84
|
+
- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
|
|
85
|
+
- [docs] Reproduce npm sparkline (#19089) @alexfauquette
|
|
86
|
+
|
|
87
|
+
### Core
|
|
88
|
+
|
|
89
|
+
- [core] Fix licensing model name (#19025) @oliviertassinari
|
|
90
|
+
- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
|
|
91
|
+
- [core] Refactor virtualizer API (#18995) @romgrk
|
|
92
|
+
|
|
93
|
+
### Miscellaneous
|
|
94
|
+
|
|
95
|
+
- [code-infra] Remove namespaces (#19071) @Janpot
|
|
96
|
+
- [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
|
|
97
|
+
- [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
|
|
98
|
+
- [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
|
|
99
|
+
- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
|
|
100
|
+
- [internal] Fix writing style action name @oliviertassinari
|
|
101
|
+
- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
|
|
102
|
+
- [support-infra] Remove default issue label (#19104) @oliviertassinari
|
|
103
|
+
|
|
104
|
+
## 8.10.0
|
|
105
|
+
|
|
106
|
+
_Aug 8, 2025_
|
|
107
|
+
|
|
108
|
+
We'd like to extend a big thank you to the 17 contributors who made this release possible. Here are some highlights ✨:
|
|
109
|
+
|
|
110
|
+
- 📊 [`FunnelChart`](https://mui.com/x/react-charts/funnel/) marked as stable
|
|
111
|
+
- 📈 [Zoom slider](https://mui.com/x/react-charts/zoom-and-pan/#zoom-slider) and [Preview](https://mui.com/x/react-charts/zoom-and-pan/#preview) marked as stable
|
|
112
|
+
- 📈 Supporting [label groups](https://mui.com/x/react-charts/axis/#grouped-axes) in band and point axis
|
|
113
|
+
- 🌎 Improve Norwegian Nynorsk (nn-NO) locale on the Data Grid
|
|
114
|
+
- 🐞 Bugfixes
|
|
115
|
+
- 📚 Documentation improvements
|
|
116
|
+
|
|
117
|
+
Special thanks go out to the community members for their valuable contributions:
|
|
118
|
+
@AnderzL7, @aqeelat, @dwrth, @noobyogi0010, @nusr, @sai6855
|
|
119
|
+
|
|
120
|
+
The following are all team members who have contributed to this release:
|
|
121
|
+
@arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @oliviertassinari, @rita-codes, @romgrk
|
|
122
|
+
|
|
123
|
+
### Data Grid
|
|
124
|
+
|
|
125
|
+
#### `@mui/x-data-grid@8.10.0`
|
|
126
|
+
|
|
127
|
+
- [DataGrid] Move spread operator in `BaseSelect` to allow `variant` change (#19026) @dwrth
|
|
128
|
+
- [DataGrid] Use `use-sync-external-store` shim (#19063) @romgrk
|
|
129
|
+
- [DataGrid] Allow skipping cache in `dataSource.fetchRows()` API method (#18904) @MBilalShafi
|
|
130
|
+
- [DataGrid] Do not call `preProcessEditCellProps()` if cell is not editable based on `isCellEditable()` (#18405) @nusr
|
|
131
|
+
- [DataGrid] Fix `renderCountry` throwing an error when used in tree data (#19068) @cherniavskii
|
|
132
|
+
- [DataGrid] Fix performance issue for root level "select all" (#19015) @MBilalShafi
|
|
133
|
+
- [DataGrid] Fix pagination `slotProps` being ignored by the grid (#19095) @romgrk
|
|
134
|
+
- [l10n] Improve Norwegian Nynorsk (nn-NO) locale (#19076) @AnderzL7
|
|
135
|
+
|
|
136
|
+
#### `@mui/x-data-grid-pro@8.10.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
137
|
+
|
|
138
|
+
Same changes as in `@mui/x-data-grid@8.10.0`, plus:
|
|
139
|
+
|
|
140
|
+
- [DataGridPro] Fix row reorder not working with column reorder disabled (#19016) @MBilalShafi
|
|
141
|
+
- [DataGridPro] Fix header filters cache sharing issue (#19090) @MBilalShafi
|
|
142
|
+
|
|
143
|
+
#### `@mui/x-data-grid-premium@8.10.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
144
|
+
|
|
145
|
+
Same changes as in `@mui/x-data-grid-pro@8.10.0`, plus:
|
|
146
|
+
|
|
147
|
+
- [DataGridPremium] Allow additional derived columns customization via `valueFormatter` (#18982) @arminmeh
|
|
148
|
+
- [DataGridPremium] Fix complex `singleSelect` columns not working in pivot model (#18971) @cherniavskii
|
|
149
|
+
|
|
150
|
+
### Date and Time Pickers
|
|
151
|
+
|
|
152
|
+
#### `@mui/x-date-pickers@8.10.0`
|
|
153
|
+
|
|
154
|
+
- [pickers] `MuiPickersLayout-toolbar` is overlapping the Calendar in RTL `MobileDatePicker` variant (#18981) @rita-codes
|
|
155
|
+
|
|
156
|
+
#### `@mui/x-date-pickers-pro@8.10.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
157
|
+
|
|
158
|
+
Same changes as in `@mui/x-date-pickers@8.10.0`.
|
|
159
|
+
|
|
160
|
+
### Charts
|
|
161
|
+
|
|
162
|
+
#### `@mui/x-charts@8.10.0`
|
|
163
|
+
|
|
164
|
+
- [charts] Add `groups` to `band` and `point` axis config (#18766) @JCQuintas
|
|
165
|
+
- [charts] Animation example using `motion` library (#18993) @JCQuintas
|
|
166
|
+
- [charts] Deprecate `Unstable_` radar exports (#19079) @JCQuintas
|
|
167
|
+
- [charts] Improve grouped axis logic (#19069) @JCQuintas
|
|
168
|
+
- [charts] Fix type assertion in axis highlight components (#19060) @sai6855
|
|
169
|
+
- [charts] Remove unnecessary type assertion in tooltip `valueFormatter` in heatmap (#19047) @sai6855
|
|
170
|
+
|
|
171
|
+
#### `@mui/x-charts-pro@8.10.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
172
|
+
|
|
173
|
+
Same changes as in `@mui/x-charts@8.10.0`, plus:
|
|
174
|
+
|
|
175
|
+
- [charts-pro] Fix `slotProps.tooltip.trigger` not respected in `ScatterChartPro` and `FunnelChart` (#18902) @bernardobelchior
|
|
176
|
+
- [charts-pro] Fix zoom filtering adjusting axis too soon (#18992) @bernardobelchior
|
|
177
|
+
- [charts-pro] Mark `FunnelChart` as stable (#19048) @JCQuintas
|
|
178
|
+
- [charts-pro] Mark zoom slider and preview as stable (#19049) @JCQuintas
|
|
179
|
+
- [charts-pro] Refactor `createAxisFilterMapper` (#18998) @bernardobelchior
|
|
180
|
+
|
|
181
|
+
### Tree View
|
|
182
|
+
|
|
183
|
+
#### `@mui/x-tree-view@8.10.0`
|
|
184
|
+
|
|
185
|
+
Internal changes.
|
|
186
|
+
|
|
187
|
+
#### `@mui/x-tree-view-pro@8.10.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
188
|
+
|
|
189
|
+
Same changes as in `@mui/x-tree-view@8.10.0`.
|
|
190
|
+
|
|
191
|
+
### Codemod
|
|
192
|
+
|
|
193
|
+
#### `@mui/x-codemod@8.10.0`
|
|
194
|
+
|
|
195
|
+
Internal changes.
|
|
196
|
+
|
|
197
|
+
### Docs
|
|
198
|
+
|
|
199
|
+
- [docs] Add CSS bundler breaking change to migration guide (#17436) @romgrk
|
|
200
|
+
- [docs] `RichTreeViewPro` demo for dragging via custom drag-handle is not working properly (#19008) @rita-codes
|
|
201
|
+
- [docs] Fix broken link to D3 in Charts (#19020) @oliviertassinari
|
|
202
|
+
- [docs] Revise the Charts Animation doc (#18990) @mapache-salvaje
|
|
203
|
+
- [docs] Fix incorrect code in line chart preview (#19023) @noobyogi0010
|
|
204
|
+
- [docs] Improve bundling instructions for the Data Grid (#19065) @romgrk
|
|
205
|
+
- [docs] Reduce image size in the inventory grid demo (#19004) @arminmeh
|
|
206
|
+
|
|
207
|
+
### Core
|
|
208
|
+
|
|
209
|
+
- [core] Fix ESLint reference name @oliviertassinari
|
|
210
|
+
|
|
211
|
+
### Miscellaneous
|
|
212
|
+
|
|
213
|
+
- [infra] Remove bundle size tracking for subpaths (#19072) @Janpot
|
|
214
|
+
- [infra] Accept `PORT` env on `docs:dev` script (#19014) @JCQuintas
|
|
215
|
+
- [infra] Skip codesandbox iframe demos in regressions tests (#18970) @cherniavskii
|
|
216
|
+
- [infra] Remove package.json `module` field (#18961) @Janpot
|
|
217
|
+
- [internal] Remove peer dependency on `@mui/system` (#19062) @aqeelat
|
|
218
|
+
|
|
8
219
|
## 8.9.2
|
|
9
220
|
|
|
10
221
|
_Jul 31, 2025_
|
|
@@ -418,8 +629,8 @@ Same changes as in `@mui/x-tree-view@8.7.0`, plus:
|
|
|
418
629
|
|
|
419
630
|
- [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
|
|
420
631
|
- [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
|
|
421
|
-
- [code-infra] Migrate to flat
|
|
422
|
-
- [code-infra] Refactor
|
|
632
|
+
- [code-infra] Migrate to flat ESLint config (#18562) @brijeshb42
|
|
633
|
+
- [code-infra] Refactor ESLint config (#18643) @LukasTy
|
|
423
634
|
- [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
|
|
424
635
|
- [infra] Move pushArgos script to code-infra (#18667) @Janpot
|
|
425
636
|
- [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
|
|
@@ -1333,7 +1544,7 @@ Same changes as in `@mui/x-tree-view@8.2.0`.
|
|
|
1333
1544
|
- [core] Fix all Vale errors @oliviertassinari
|
|
1334
1545
|
- [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
|
|
1335
1546
|
- [core] Remove empty version (#17582) @oliviertassinari
|
|
1336
|
-
- [core] Remove
|
|
1547
|
+
- [core] Remove ESLint from codemod spec files (#17443) @alexfauquette
|
|
1337
1548
|
- [core] Remove unnecessary versions (#17597) @oliviertassinari
|
|
1338
1549
|
- [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
|
|
1339
1550
|
- [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
|
|
@@ -6827,7 +7038,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`.
|
|
|
6827
7038
|
|
|
6828
7039
|
### Core
|
|
6829
7040
|
|
|
6830
|
-
- [core] Add
|
|
7041
|
+
- [core] Add ESLint rule to restrict import from `../internals` root (#13633) @JCQuintas
|
|
6831
7042
|
- [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
|
|
6832
7043
|
- [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle
|
|
6833
7044
|
|
|
@@ -6965,7 +7176,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
|
|
|
6965
7176
|
|
|
6966
7177
|
- [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
|
|
6967
7178
|
- [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
|
|
6968
|
-
- [charts] Fix
|
|
7179
|
+
- [charts] Fix ESLint for react compiler (#13444) @alexfauquette
|
|
6969
7180
|
- [charts] Improve themeAugmentation typing (#13433) @noraleonte
|
|
6970
7181
|
- [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
|
|
6971
7182
|
- [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
|
|
@@ -7512,7 +7723,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
|
|
|
7512
7723
|
- [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
|
|
7513
7724
|
- [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
|
|
7514
7725
|
- [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
|
|
7515
|
-
- [code-infra] Closer sync with
|
|
7726
|
+
- [code-infra] Closer sync with ESLint config of codebase (#12864) @oliviertassinari
|
|
7516
7727
|
- [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
|
|
7517
7728
|
|
|
7518
7729
|
## 7.3.0
|
|
@@ -29,7 +29,7 @@ const configuration = {
|
|
|
29
29
|
useCellAggregationResult: () => null
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
const releaseInfo = "
|
|
32
|
+
const releaseInfo = "MTc1NTIzMDQwMDAwMA==";
|
|
33
33
|
const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
|
|
34
34
|
packageName: "x-data-grid-pro",
|
|
35
35
|
releaseInfo: releaseInfo
|
|
@@ -56,6 +56,7 @@ const useDataGridProComponent = (apiRef, props) => {
|
|
|
56
56
|
(0, _internals.useGridInitializeState)(_internals.propsStateInitializer, apiRef, props);
|
|
57
57
|
(0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
|
|
58
58
|
(0, _internals.useGridInitializeState)(_internals.rowSelectionStateInitializer, apiRef, props);
|
|
59
|
+
(0, _internals.useGridInitializeState)(_useGridRowReorder.rowReorderStateInitializer, apiRef, props);
|
|
59
60
|
(0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
|
|
60
61
|
(0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
|
|
61
62
|
(0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
|
|
@@ -22,7 +22,7 @@ const configuration = {
|
|
|
22
22
|
useCellAggregationResult: () => null
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
|
-
const releaseInfo = "
|
|
25
|
+
const releaseInfo = "MTc1NTIzMDQwMDAwMA==";
|
|
26
26
|
const watermark = /*#__PURE__*/_jsx(Watermark, {
|
|
27
27
|
packageName: "x-data-grid-pro",
|
|
28
28
|
releaseInfo: releaseInfo
|
|
@@ -12,7 +12,7 @@ import { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/fe
|
|
|
12
12
|
import { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.js";
|
|
13
13
|
import { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.js";
|
|
14
14
|
import { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
|
|
15
|
-
import { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
15
|
+
import { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
16
16
|
import { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
|
|
17
17
|
import { useGridLazyLoader } from "../hooks/features/lazyLoader/useGridLazyLoader.js";
|
|
18
18
|
import { useGridLazyLoaderPreProcessors } from "../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js";
|
|
@@ -49,6 +49,7 @@ export const useDataGridProComponent = (apiRef, props) => {
|
|
|
49
49
|
useGridInitializeState(propsStateInitializer, apiRef, props);
|
|
50
50
|
useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
|
|
51
51
|
useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
|
|
52
|
+
useGridInitializeState(rowReorderStateInitializer, apiRef, props);
|
|
52
53
|
useGridInitializeState(detailPanelStateInitializer, apiRef, props);
|
|
53
54
|
useGridInitializeState(columnPinningStateInitializer, apiRef, props);
|
|
54
55
|
useGridInitializeState(columnsStateInitializer, apiRef, props);
|
|
@@ -18,7 +18,6 @@ const useUtilityClasses = ownerState => {
|
|
|
18
18
|
return composeClasses(slots, getDataGridUtilityClass, classes);
|
|
19
19
|
}, [classes]);
|
|
20
20
|
};
|
|
21
|
-
const filterItemsCache = Object.create(null);
|
|
22
21
|
export const useGridColumnHeadersPro = props => {
|
|
23
22
|
const apiRef = useGridPrivateApiContext();
|
|
24
23
|
const {
|
|
@@ -54,6 +53,7 @@ export const useGridColumnHeadersPro = props => {
|
|
|
54
53
|
const headerFilterHeight = useGridSelector(apiRef, gridHeaderFilterHeightSelector);
|
|
55
54
|
const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
|
|
56
55
|
const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
|
|
56
|
+
const filterItemsCache = React.useRef(Object.create(null)).current;
|
|
57
57
|
const getFilterItem = React.useCallback(colDef => {
|
|
58
58
|
const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
|
|
59
59
|
if (filterModelItem != null) {
|
|
@@ -69,7 +69,9 @@ export const useGridColumnHeadersPro = props => {
|
|
|
69
69
|
const defaultItem = getGridFilter(colDef);
|
|
70
70
|
filterItemsCache[colDef.field] = defaultItem;
|
|
71
71
|
return defaultItem;
|
|
72
|
-
},
|
|
72
|
+
},
|
|
73
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
74
|
+
[filterModel]);
|
|
73
75
|
const getColumnFilters = params => {
|
|
74
76
|
const {
|
|
75
77
|
renderedColumns,
|
|
@@ -13,7 +13,7 @@ export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(a
|
|
|
13
13
|
public: GridDataSourceApiPro;
|
|
14
14
|
private: GridDataSourcePrivateApiPro;
|
|
15
15
|
};
|
|
16
|
-
debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?:
|
|
16
|
+
debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("@mui/x-data-grid/hooks/features/dataSource/models").GridDataSourceFetchRowsParams) => void) & import("@mui/utils/debounce").Cancelable;
|
|
17
17
|
strategyProcessor: {
|
|
18
18
|
strategyName: DataSourceRowsUpdateStrategy;
|
|
19
19
|
group: "dataSourceRowsUpdate";
|
|
@@ -15,71 +15,69 @@ export let RequestStatus = /*#__PURE__*/function (RequestStatus) {
|
|
|
15
15
|
* Uses `GridRowId` to uniquely identify a request
|
|
16
16
|
*/
|
|
17
17
|
export class NestedDataManager {
|
|
18
|
+
pendingRequests = (() => new Set())();
|
|
19
|
+
queuedRequests = (() => new Set())();
|
|
20
|
+
settledRequests = (() => new Set())();
|
|
18
21
|
constructor(privateApiRef, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
|
|
19
|
-
this.pendingRequests = new Set();
|
|
20
|
-
this.queuedRequests = new Set();
|
|
21
|
-
this.settledRequests = new Set();
|
|
22
|
-
this.api = void 0;
|
|
23
|
-
this.maxConcurrentRequests = void 0;
|
|
24
|
-
this.processQueue = async () => {
|
|
25
|
-
if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
|
|
29
|
-
if (loopLength === 0) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
const fetchQueue = Array.from(this.queuedRequests);
|
|
33
|
-
for (let i = 0; i < loopLength; i += 1) {
|
|
34
|
-
const id = fetchQueue[i];
|
|
35
|
-
this.queuedRequests.delete(id);
|
|
36
|
-
this.pendingRequests.add(id);
|
|
37
|
-
this.api.fetchRowChildren(id);
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
this.queue = async ids => {
|
|
41
|
-
const loadingIds = {};
|
|
42
|
-
ids.forEach(id => {
|
|
43
|
-
this.queuedRequests.add(id);
|
|
44
|
-
loadingIds[id] = true;
|
|
45
|
-
});
|
|
46
|
-
this.api.setState(state => _extends({}, state, {
|
|
47
|
-
dataSource: _extends({}, state.dataSource, {
|
|
48
|
-
loading: _extends({}, state.dataSource.loading, loadingIds)
|
|
49
|
-
})
|
|
50
|
-
}));
|
|
51
|
-
this.processQueue();
|
|
52
|
-
};
|
|
53
|
-
this.setRequestSettled = id => {
|
|
54
|
-
this.pendingRequests.delete(id);
|
|
55
|
-
this.settledRequests.add(id);
|
|
56
|
-
this.processQueue();
|
|
57
|
-
};
|
|
58
|
-
this.clear = () => {
|
|
59
|
-
this.queuedRequests.clear();
|
|
60
|
-
Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
|
|
61
|
-
};
|
|
62
|
-
this.clearPendingRequest = id => {
|
|
63
|
-
this.api.dataSource.setChildrenLoading(id, false);
|
|
64
|
-
this.pendingRequests.delete(id);
|
|
65
|
-
this.processQueue();
|
|
66
|
-
};
|
|
67
|
-
this.getRequestStatus = id => {
|
|
68
|
-
if (this.pendingRequests.has(id)) {
|
|
69
|
-
return RequestStatus.PENDING;
|
|
70
|
-
}
|
|
71
|
-
if (this.queuedRequests.has(id)) {
|
|
72
|
-
return RequestStatus.QUEUED;
|
|
73
|
-
}
|
|
74
|
-
if (this.settledRequests.has(id)) {
|
|
75
|
-
return RequestStatus.SETTLED;
|
|
76
|
-
}
|
|
77
|
-
return RequestStatus.UNKNOWN;
|
|
78
|
-
};
|
|
79
|
-
this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
|
|
80
22
|
this.api = privateApiRef.current;
|
|
81
23
|
this.maxConcurrentRequests = maxConcurrentRequests;
|
|
82
24
|
}
|
|
25
|
+
processQueue = async () => {
|
|
26
|
+
if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
|
|
30
|
+
if (loopLength === 0) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
const fetchQueue = Array.from(this.queuedRequests);
|
|
34
|
+
for (let i = 0; i < loopLength; i += 1) {
|
|
35
|
+
const id = fetchQueue[i];
|
|
36
|
+
this.queuedRequests.delete(id);
|
|
37
|
+
this.pendingRequests.add(id);
|
|
38
|
+
this.api.fetchRowChildren(id);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
queue = async ids => {
|
|
42
|
+
const loadingIds = {};
|
|
43
|
+
ids.forEach(id => {
|
|
44
|
+
this.queuedRequests.add(id);
|
|
45
|
+
loadingIds[id] = true;
|
|
46
|
+
});
|
|
47
|
+
this.api.setState(state => _extends({}, state, {
|
|
48
|
+
dataSource: _extends({}, state.dataSource, {
|
|
49
|
+
loading: _extends({}, state.dataSource.loading, loadingIds)
|
|
50
|
+
})
|
|
51
|
+
}));
|
|
52
|
+
this.processQueue();
|
|
53
|
+
};
|
|
54
|
+
setRequestSettled = id => {
|
|
55
|
+
this.pendingRequests.delete(id);
|
|
56
|
+
this.settledRequests.add(id);
|
|
57
|
+
this.processQueue();
|
|
58
|
+
};
|
|
59
|
+
clear = () => {
|
|
60
|
+
this.queuedRequests.clear();
|
|
61
|
+
Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
|
|
62
|
+
};
|
|
63
|
+
clearPendingRequest = id => {
|
|
64
|
+
this.api.dataSource.setChildrenLoading(id, false);
|
|
65
|
+
this.pendingRequests.delete(id);
|
|
66
|
+
this.processQueue();
|
|
67
|
+
};
|
|
68
|
+
getRequestStatus = id => {
|
|
69
|
+
if (this.pendingRequests.has(id)) {
|
|
70
|
+
return RequestStatus.PENDING;
|
|
71
|
+
}
|
|
72
|
+
if (this.queuedRequests.has(id)) {
|
|
73
|
+
return RequestStatus.QUEUED;
|
|
74
|
+
}
|
|
75
|
+
if (this.settledRequests.has(id)) {
|
|
76
|
+
return RequestStatus.SETTLED;
|
|
77
|
+
}
|
|
78
|
+
return RequestStatus.UNKNOWN;
|
|
79
|
+
};
|
|
80
|
+
getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
|
|
83
81
|
}
|
|
84
82
|
export const getGroupKeys = (tree, rowId) => {
|
|
85
83
|
const rowNode = tree[rowId];
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { RefObject } from '@mui/x-internals/types';
|
|
2
|
+
import { GridStateInitializer } from '@mui/x-data-grid/internals';
|
|
2
3
|
import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
|
|
3
4
|
import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
|
|
5
|
+
export declare const rowReorderStateInitializer: GridStateInitializer;
|
|
4
6
|
/**
|
|
5
7
|
* Only available in DataGridPro
|
|
6
8
|
* @requires useGridRows (method)
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
4
|
import * as React from 'react';
|
|
4
5
|
import composeClasses from '@mui/utils/composeClasses';
|
|
5
|
-
import { useGridLogger, useGridEvent, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridEventPriority, gridRowNodeSelector } from '@mui/x-data-grid';
|
|
6
|
+
import { useGridLogger, useGridEvent, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridEventPriority, gridRowNodeSelector, useGridApiMethod } from '@mui/x-data-grid';
|
|
6
7
|
import { gridEditRowsStateSelector, gridSortedRowIndexLookupSelector } from '@mui/x-data-grid/internals';
|
|
7
8
|
import { GRID_REORDER_COL_DEF } from "./gridRowReorderColDef.js";
|
|
8
9
|
var Direction = /*#__PURE__*/function (Direction) {
|
|
@@ -27,6 +28,11 @@ const useUtilityClasses = ownerState => {
|
|
|
27
28
|
};
|
|
28
29
|
return composeClasses(slots, getDataGridUtilityClass, classes);
|
|
29
30
|
};
|
|
31
|
+
export const rowReorderStateInitializer = state => _extends({}, state, {
|
|
32
|
+
rowReorder: {
|
|
33
|
+
isActive: false
|
|
34
|
+
}
|
|
35
|
+
});
|
|
30
36
|
|
|
31
37
|
/**
|
|
32
38
|
* Only available in DataGridPro
|
|
@@ -153,6 +159,7 @@ export const useGridRowReorder = (apiRef, props) => {
|
|
|
153
159
|
// Prevent drag events propagation.
|
|
154
160
|
// For more information check here https://github.com/mui/mui-x/issues/2680.
|
|
155
161
|
event.stopPropagation();
|
|
162
|
+
apiRef.current.setRowDragActive(true);
|
|
156
163
|
dragRowNode.current = event.currentTarget;
|
|
157
164
|
// Apply cell-level dragging class to the drag handle
|
|
158
165
|
dragRowNode.current.classList.add(classes.rowDragging);
|
|
@@ -257,6 +264,7 @@ export const useGridRowReorder = (apiRef, props) => {
|
|
|
257
264
|
// Clear visual indicators and dragged state
|
|
258
265
|
applyDropIndicator(null, null);
|
|
259
266
|
applyDraggedState(dragRowId, false);
|
|
267
|
+
apiRef.current.setRowDragActive(false);
|
|
260
268
|
|
|
261
269
|
// Check if the row was dropped outside the grid.
|
|
262
270
|
if (!event.dataTransfer || event.dataTransfer.dropEffect === 'none') {
|
|
@@ -315,4 +323,14 @@ export const useGridRowReorder = (apiRef, props) => {
|
|
|
315
323
|
useGridEvent(apiRef, 'rowDragEnd', handleDragEnd);
|
|
316
324
|
useGridEvent(apiRef, 'cellDragOver', handleDragOver);
|
|
317
325
|
useGridEventPriority(apiRef, 'rowOrderChange', props.onRowOrderChange);
|
|
326
|
+
const setRowDragActive = React.useCallback(isActive => {
|
|
327
|
+
apiRef.current.setState(state => _extends({}, state, {
|
|
328
|
+
rowReorder: _extends({}, state.rowReorder, {
|
|
329
|
+
isActive
|
|
330
|
+
})
|
|
331
|
+
}));
|
|
332
|
+
}, [apiRef]);
|
|
333
|
+
useGridApiMethod(apiRef, {
|
|
334
|
+
setRowDragActive
|
|
335
|
+
}, 'private');
|
|
318
336
|
};
|
package/esm/index.js
CHANGED
package/esm/internals/index.d.ts
CHANGED
|
@@ -11,8 +11,9 @@ export { useGridDataSourceTreeDataPreProcessors } from "../hooks/features/server
|
|
|
11
11
|
export { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.js";
|
|
12
12
|
export { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
|
|
13
13
|
export { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
|
|
14
|
-
export { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
14
|
+
export { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
15
15
|
export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
|
|
16
|
+
export type { GridRowReorderPrivateApi } from "../models/gridRowReorderApi.js";
|
|
16
17
|
export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
|
|
17
18
|
export { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
|
|
18
19
|
export { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features/rowPinning/useGridRowPinning.js";
|
package/esm/internals/index.js
CHANGED
|
@@ -15,7 +15,7 @@ export { useGridDataSourceTreeDataPreProcessors } from "../hooks/features/server
|
|
|
15
15
|
export { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.js";
|
|
16
16
|
export { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
|
|
17
17
|
export { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
|
|
18
|
-
export { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
18
|
+
export { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
19
19
|
export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
|
|
20
20
|
export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
|
|
21
21
|
export { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
|
|
@@ -2,10 +2,11 @@ import { GridApiCommon, GridColumnReorderApi, GridRowMultiSelectionApi, GridRowP
|
|
|
2
2
|
import { GridPrivateOnlyApiCommon, GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/internals';
|
|
3
3
|
import { GridInitialStatePro, GridStatePro } from "./gridStatePro.js";
|
|
4
4
|
import type { GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi } from "../hooks/index.js";
|
|
5
|
+
import type { GridRowReorderPrivateApi } from "./gridRowReorderApi.js";
|
|
5
6
|
import type { GridDataSourceApiPro, GridDataSourcePrivateApiPro } from "../hooks/features/dataSource/models.js";
|
|
6
7
|
import type { DataGridProProcessedProps } from "./dataGridProProps.js";
|
|
7
8
|
/**
|
|
8
9
|
* The api of Data Grid Pro.
|
|
9
10
|
*/
|
|
10
11
|
export interface GridApiPro extends GridApiCommon<GridStatePro, GridInitialStatePro>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDataSourceApiPro, GridRowMultiSelectionApi, GridColumnReorderApi {}
|
|
11
|
-
export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi, GridDataSourcePrivateApiPro {}
|
|
12
|
+
export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi, GridRowReorderPrivateApi, GridDataSourcePrivateApiPro {}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The row reorder private API interface.
|
|
3
|
+
*/
|
|
4
|
+
export interface GridRowReorderPrivateApi {
|
|
5
|
+
/**
|
|
6
|
+
* Sets the row drag active state.
|
|
7
|
+
* @param {boolean} isActive Whether a row drag operation is currently active.
|
|
8
|
+
*/
|
|
9
|
+
setRowDragActive: (isActive: boolean) => void;
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -2,8 +2,6 @@ import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
|
|
|
2
2
|
// Single-linked list node
|
|
3
3
|
class Node {
|
|
4
4
|
constructor(data, next) {
|
|
5
|
-
this.next = void 0;
|
|
6
|
-
this.data = void 0;
|
|
7
5
|
this.next = next;
|
|
8
6
|
this.data = data;
|
|
9
7
|
}
|
|
@@ -20,8 +18,6 @@ class Node {
|
|
|
20
18
|
// Single-linked list container
|
|
21
19
|
class List {
|
|
22
20
|
constructor(first, last) {
|
|
23
|
-
this.first = void 0;
|
|
24
|
-
this.last = void 0;
|
|
25
21
|
this.first = first;
|
|
26
22
|
this.last = last;
|
|
27
23
|
}
|
|
@@ -26,7 +26,6 @@ const useUtilityClasses = ownerState => {
|
|
|
26
26
|
return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
|
|
27
27
|
}, [classes]);
|
|
28
28
|
};
|
|
29
|
-
const filterItemsCache = Object.create(null);
|
|
30
29
|
const useGridColumnHeadersPro = props => {
|
|
31
30
|
const apiRef = (0, _internals.useGridPrivateApiContext)();
|
|
32
31
|
const {
|
|
@@ -62,6 +61,7 @@ const useGridColumnHeadersPro = props => {
|
|
|
62
61
|
const headerFilterHeight = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilterHeightSelector);
|
|
63
62
|
const scrollbarWidth = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridVerticalScrollbarWidthSelector);
|
|
64
63
|
const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFocusColumnHeaderFilterSelector);
|
|
64
|
+
const filterItemsCache = React.useRef(Object.create(null)).current;
|
|
65
65
|
const getFilterItem = React.useCallback(colDef => {
|
|
66
66
|
const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
|
|
67
67
|
if (filterModelItem != null) {
|
|
@@ -77,7 +77,9 @@ const useGridColumnHeadersPro = props => {
|
|
|
77
77
|
const defaultItem = (0, _internals.getGridFilter)(colDef);
|
|
78
78
|
filterItemsCache[colDef.field] = defaultItem;
|
|
79
79
|
return defaultItem;
|
|
80
|
-
},
|
|
80
|
+
},
|
|
81
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
82
|
+
[filterModel]);
|
|
81
83
|
const getColumnFilters = params => {
|
|
82
84
|
const {
|
|
83
85
|
renderedColumns,
|
|
@@ -13,7 +13,7 @@ export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(a
|
|
|
13
13
|
public: GridDataSourceApiPro;
|
|
14
14
|
private: GridDataSourcePrivateApiPro;
|
|
15
15
|
};
|
|
16
|
-
debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?:
|
|
16
|
+
debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("@mui/x-data-grid/hooks/features/dataSource/models").GridDataSourceFetchRowsParams) => void) & import("@mui/utils/debounce").Cancelable;
|
|
17
17
|
strategyProcessor: {
|
|
18
18
|
strategyName: DataSourceRowsUpdateStrategy;
|
|
19
19
|
group: "dataSourceRowsUpdate";
|
|
@@ -21,71 +21,69 @@ let RequestStatus = exports.RequestStatus = /*#__PURE__*/function (RequestStatus
|
|
|
21
21
|
* Uses `GridRowId` to uniquely identify a request
|
|
22
22
|
*/
|
|
23
23
|
class NestedDataManager {
|
|
24
|
+
pendingRequests = new Set();
|
|
25
|
+
queuedRequests = new Set();
|
|
26
|
+
settledRequests = new Set();
|
|
24
27
|
constructor(privateApiRef, maxConcurrentRequests = MAX_CONCURRENT_REQUESTS) {
|
|
25
|
-
this.pendingRequests = new Set();
|
|
26
|
-
this.queuedRequests = new Set();
|
|
27
|
-
this.settledRequests = new Set();
|
|
28
|
-
this.api = void 0;
|
|
29
|
-
this.maxConcurrentRequests = void 0;
|
|
30
|
-
this.processQueue = async () => {
|
|
31
|
-
if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
|
|
35
|
-
if (loopLength === 0) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
const fetchQueue = Array.from(this.queuedRequests);
|
|
39
|
-
for (let i = 0; i < loopLength; i += 1) {
|
|
40
|
-
const id = fetchQueue[i];
|
|
41
|
-
this.queuedRequests.delete(id);
|
|
42
|
-
this.pendingRequests.add(id);
|
|
43
|
-
this.api.fetchRowChildren(id);
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
this.queue = async ids => {
|
|
47
|
-
const loadingIds = {};
|
|
48
|
-
ids.forEach(id => {
|
|
49
|
-
this.queuedRequests.add(id);
|
|
50
|
-
loadingIds[id] = true;
|
|
51
|
-
});
|
|
52
|
-
this.api.setState(state => (0, _extends2.default)({}, state, {
|
|
53
|
-
dataSource: (0, _extends2.default)({}, state.dataSource, {
|
|
54
|
-
loading: (0, _extends2.default)({}, state.dataSource.loading, loadingIds)
|
|
55
|
-
})
|
|
56
|
-
}));
|
|
57
|
-
this.processQueue();
|
|
58
|
-
};
|
|
59
|
-
this.setRequestSettled = id => {
|
|
60
|
-
this.pendingRequests.delete(id);
|
|
61
|
-
this.settledRequests.add(id);
|
|
62
|
-
this.processQueue();
|
|
63
|
-
};
|
|
64
|
-
this.clear = () => {
|
|
65
|
-
this.queuedRequests.clear();
|
|
66
|
-
Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
|
|
67
|
-
};
|
|
68
|
-
this.clearPendingRequest = id => {
|
|
69
|
-
this.api.dataSource.setChildrenLoading(id, false);
|
|
70
|
-
this.pendingRequests.delete(id);
|
|
71
|
-
this.processQueue();
|
|
72
|
-
};
|
|
73
|
-
this.getRequestStatus = id => {
|
|
74
|
-
if (this.pendingRequests.has(id)) {
|
|
75
|
-
return RequestStatus.PENDING;
|
|
76
|
-
}
|
|
77
|
-
if (this.queuedRequests.has(id)) {
|
|
78
|
-
return RequestStatus.QUEUED;
|
|
79
|
-
}
|
|
80
|
-
if (this.settledRequests.has(id)) {
|
|
81
|
-
return RequestStatus.SETTLED;
|
|
82
|
-
}
|
|
83
|
-
return RequestStatus.UNKNOWN;
|
|
84
|
-
};
|
|
85
|
-
this.getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
|
|
86
28
|
this.api = privateApiRef.current;
|
|
87
29
|
this.maxConcurrentRequests = maxConcurrentRequests;
|
|
88
30
|
}
|
|
31
|
+
processQueue = async () => {
|
|
32
|
+
if (this.queuedRequests.size === 0 || this.pendingRequests.size >= this.maxConcurrentRequests) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const loopLength = Math.min(this.maxConcurrentRequests - this.pendingRequests.size, this.queuedRequests.size);
|
|
36
|
+
if (loopLength === 0) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const fetchQueue = Array.from(this.queuedRequests);
|
|
40
|
+
for (let i = 0; i < loopLength; i += 1) {
|
|
41
|
+
const id = fetchQueue[i];
|
|
42
|
+
this.queuedRequests.delete(id);
|
|
43
|
+
this.pendingRequests.add(id);
|
|
44
|
+
this.api.fetchRowChildren(id);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
queue = async ids => {
|
|
48
|
+
const loadingIds = {};
|
|
49
|
+
ids.forEach(id => {
|
|
50
|
+
this.queuedRequests.add(id);
|
|
51
|
+
loadingIds[id] = true;
|
|
52
|
+
});
|
|
53
|
+
this.api.setState(state => (0, _extends2.default)({}, state, {
|
|
54
|
+
dataSource: (0, _extends2.default)({}, state.dataSource, {
|
|
55
|
+
loading: (0, _extends2.default)({}, state.dataSource.loading, loadingIds)
|
|
56
|
+
})
|
|
57
|
+
}));
|
|
58
|
+
this.processQueue();
|
|
59
|
+
};
|
|
60
|
+
setRequestSettled = id => {
|
|
61
|
+
this.pendingRequests.delete(id);
|
|
62
|
+
this.settledRequests.add(id);
|
|
63
|
+
this.processQueue();
|
|
64
|
+
};
|
|
65
|
+
clear = () => {
|
|
66
|
+
this.queuedRequests.clear();
|
|
67
|
+
Array.from(this.pendingRequests).forEach(id => this.clearPendingRequest(id));
|
|
68
|
+
};
|
|
69
|
+
clearPendingRequest = id => {
|
|
70
|
+
this.api.dataSource.setChildrenLoading(id, false);
|
|
71
|
+
this.pendingRequests.delete(id);
|
|
72
|
+
this.processQueue();
|
|
73
|
+
};
|
|
74
|
+
getRequestStatus = id => {
|
|
75
|
+
if (this.pendingRequests.has(id)) {
|
|
76
|
+
return RequestStatus.PENDING;
|
|
77
|
+
}
|
|
78
|
+
if (this.queuedRequests.has(id)) {
|
|
79
|
+
return RequestStatus.QUEUED;
|
|
80
|
+
}
|
|
81
|
+
if (this.settledRequests.has(id)) {
|
|
82
|
+
return RequestStatus.SETTLED;
|
|
83
|
+
}
|
|
84
|
+
return RequestStatus.UNKNOWN;
|
|
85
|
+
};
|
|
86
|
+
getActiveRequestsCount = () => this.pendingRequests.size + this.queuedRequests.size;
|
|
89
87
|
}
|
|
90
88
|
exports.NestedDataManager = NestedDataManager;
|
|
91
89
|
const getGroupKeys = (tree, rowId) => {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { RefObject } from '@mui/x-internals/types';
|
|
2
|
+
import { GridStateInitializer } from '@mui/x-data-grid/internals';
|
|
2
3
|
import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
|
|
3
4
|
import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
|
|
5
|
+
export declare const rowReorderStateInitializer: GridStateInitializer;
|
|
4
6
|
/**
|
|
5
7
|
* Only available in DataGridPro
|
|
6
8
|
* @requires useGridRows (method)
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
'use client';
|
|
3
3
|
|
|
4
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
4
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
6
6
|
Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
value: true
|
|
8
8
|
});
|
|
9
|
-
exports.useGridRowReorder = void 0;
|
|
9
|
+
exports.useGridRowReorder = exports.rowReorderStateInitializer = void 0;
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
11
|
var React = _interopRequireWildcard(require("react"));
|
|
11
12
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
12
13
|
var _xDataGrid = require("@mui/x-data-grid");
|
|
@@ -34,11 +35,17 @@ const useUtilityClasses = ownerState => {
|
|
|
34
35
|
};
|
|
35
36
|
return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
|
|
36
37
|
};
|
|
38
|
+
const rowReorderStateInitializer = state => (0, _extends2.default)({}, state, {
|
|
39
|
+
rowReorder: {
|
|
40
|
+
isActive: false
|
|
41
|
+
}
|
|
42
|
+
});
|
|
37
43
|
|
|
38
44
|
/**
|
|
39
45
|
* Only available in DataGridPro
|
|
40
46
|
* @requires useGridRows (method)
|
|
41
47
|
*/
|
|
48
|
+
exports.rowReorderStateInitializer = rowReorderStateInitializer;
|
|
42
49
|
const useGridRowReorder = (apiRef, props) => {
|
|
43
50
|
const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridRowReorder');
|
|
44
51
|
const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
|
|
@@ -160,6 +167,7 @@ const useGridRowReorder = (apiRef, props) => {
|
|
|
160
167
|
// Prevent drag events propagation.
|
|
161
168
|
// For more information check here https://github.com/mui/mui-x/issues/2680.
|
|
162
169
|
event.stopPropagation();
|
|
170
|
+
apiRef.current.setRowDragActive(true);
|
|
163
171
|
dragRowNode.current = event.currentTarget;
|
|
164
172
|
// Apply cell-level dragging class to the drag handle
|
|
165
173
|
dragRowNode.current.classList.add(classes.rowDragging);
|
|
@@ -264,6 +272,7 @@ const useGridRowReorder = (apiRef, props) => {
|
|
|
264
272
|
// Clear visual indicators and dragged state
|
|
265
273
|
applyDropIndicator(null, null);
|
|
266
274
|
applyDraggedState(dragRowId, false);
|
|
275
|
+
apiRef.current.setRowDragActive(false);
|
|
267
276
|
|
|
268
277
|
// Check if the row was dropped outside the grid.
|
|
269
278
|
if (!event.dataTransfer || event.dataTransfer.dropEffect === 'none') {
|
|
@@ -322,5 +331,15 @@ const useGridRowReorder = (apiRef, props) => {
|
|
|
322
331
|
(0, _xDataGrid.useGridEvent)(apiRef, 'rowDragEnd', handleDragEnd);
|
|
323
332
|
(0, _xDataGrid.useGridEvent)(apiRef, 'cellDragOver', handleDragOver);
|
|
324
333
|
(0, _xDataGrid.useGridEventPriority)(apiRef, 'rowOrderChange', props.onRowOrderChange);
|
|
334
|
+
const setRowDragActive = React.useCallback(isActive => {
|
|
335
|
+
apiRef.current.setState(state => (0, _extends2.default)({}, state, {
|
|
336
|
+
rowReorder: (0, _extends2.default)({}, state.rowReorder, {
|
|
337
|
+
isActive
|
|
338
|
+
})
|
|
339
|
+
}));
|
|
340
|
+
}, [apiRef]);
|
|
341
|
+
(0, _xDataGrid.useGridApiMethod)(apiRef, {
|
|
342
|
+
setRowDragActive
|
|
343
|
+
}, 'private');
|
|
325
344
|
};
|
|
326
345
|
exports.useGridRowReorder = useGridRowReorder;
|
package/index.js
CHANGED
package/internals/index.d.ts
CHANGED
|
@@ -11,8 +11,9 @@ export { useGridDataSourceTreeDataPreProcessors } from "../hooks/features/server
|
|
|
11
11
|
export { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.js";
|
|
12
12
|
export { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
|
|
13
13
|
export { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
|
|
14
|
-
export { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
14
|
+
export { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
|
|
15
15
|
export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
|
|
16
|
+
export type { GridRowReorderPrivateApi } from "../models/gridRowReorderApi.js";
|
|
16
17
|
export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
|
|
17
18
|
export { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
|
|
18
19
|
export { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features/rowPinning/useGridRowPinning.js";
|
package/internals/index.js
CHANGED
|
@@ -21,6 +21,7 @@ var _exportNames = {
|
|
|
21
21
|
useGridDetailPanelPreProcessors: true,
|
|
22
22
|
useGridInfiniteLoader: true,
|
|
23
23
|
useGridRowReorder: true,
|
|
24
|
+
rowReorderStateInitializer: true,
|
|
24
25
|
useGridRowReorderPreProcessors: true,
|
|
25
26
|
useGridTreeData: true,
|
|
26
27
|
useGridTreeDataPreProcessors: true,
|
|
@@ -144,6 +145,12 @@ Object.defineProperty(exports, "rowPinningStateInitializer", {
|
|
|
144
145
|
return _useGridRowPinning.rowPinningStateInitializer;
|
|
145
146
|
}
|
|
146
147
|
});
|
|
148
|
+
Object.defineProperty(exports, "rowReorderStateInitializer", {
|
|
149
|
+
enumerable: true,
|
|
150
|
+
get: function () {
|
|
151
|
+
return _useGridRowReorder.rowReorderStateInitializer;
|
|
152
|
+
}
|
|
153
|
+
});
|
|
147
154
|
Object.defineProperty(exports, "skipFiltering", {
|
|
148
155
|
enumerable: true,
|
|
149
156
|
get: function () {
|
package/models/gridApiPro.d.ts
CHANGED
|
@@ -2,10 +2,11 @@ import { GridApiCommon, GridColumnReorderApi, GridRowMultiSelectionApi, GridRowP
|
|
|
2
2
|
import { GridPrivateOnlyApiCommon, GridInfiniteLoaderPrivateApi } from '@mui/x-data-grid/internals';
|
|
3
3
|
import { GridInitialStatePro, GridStatePro } from "./gridStatePro.js";
|
|
4
4
|
import type { GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDetailPanelPrivateApi } from "../hooks/index.js";
|
|
5
|
+
import type { GridRowReorderPrivateApi } from "./gridRowReorderApi.js";
|
|
5
6
|
import type { GridDataSourceApiPro, GridDataSourcePrivateApiPro } from "../hooks/features/dataSource/models.js";
|
|
6
7
|
import type { DataGridProProcessedProps } from "./dataGridProProps.js";
|
|
7
8
|
/**
|
|
8
9
|
* The api of Data Grid Pro.
|
|
9
10
|
*/
|
|
10
11
|
export interface GridApiPro extends GridApiCommon<GridStatePro, GridInitialStatePro>, GridRowProApi, GridColumnPinningApi, GridDetailPanelApi, GridRowPinningApi, GridDataSourceApiPro, GridRowMultiSelectionApi, GridColumnReorderApi {}
|
|
11
|
-
export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi, GridDataSourcePrivateApiPro {}
|
|
12
|
+
export interface GridPrivateApiPro extends GridApiPro, GridPrivateOnlyApiCommon<GridApiPro, GridPrivateApiPro, DataGridProProcessedProps>, GridDetailPanelPrivateApi, GridInfiniteLoaderPrivateApi, GridRowReorderPrivateApi, GridDataSourcePrivateApiPro {}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The row reorder private API interface.
|
|
3
|
+
*/
|
|
4
|
+
export interface GridRowReorderPrivateApi {
|
|
5
|
+
/**
|
|
6
|
+
* Sets the row drag active state.
|
|
7
|
+
* @param {boolean} isActive Whether a row drag operation is currently active.
|
|
8
|
+
*/
|
|
9
|
+
setRowDragActive: (isActive: boolean) => void;
|
|
10
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-data-grid-pro",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.10.1",
|
|
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,13 +35,13 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@babel/runtime": "^7.28.2",
|
|
38
|
-
"@mui/utils": "^7.
|
|
38
|
+
"@mui/utils": "^7.3.1",
|
|
39
39
|
"@types/format-util": "^1.0.4",
|
|
40
40
|
"clsx": "^2.1.1",
|
|
41
41
|
"prop-types": "^15.8.1",
|
|
42
|
-
"@mui/x-
|
|
43
|
-
"@mui/x-
|
|
44
|
-
"@mui/x-
|
|
42
|
+
"@mui/x-data-grid": "8.10.1",
|
|
43
|
+
"@mui/x-license": "8.10.1",
|
|
44
|
+
"@mui/x-internals": "8.10.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@emotion/react": "^11.9.0",
|
|
@@ -62,32 +62,30 @@
|
|
|
62
62
|
"engines": {
|
|
63
63
|
"node": ">=14.0.0"
|
|
64
64
|
},
|
|
65
|
-
"
|
|
66
|
-
"
|
|
65
|
+
"type": "commonjs",
|
|
66
|
+
"types": "./index.d.ts",
|
|
67
67
|
"exports": {
|
|
68
68
|
"./package.json": "./package.json",
|
|
69
69
|
".": {
|
|
70
|
-
"require": {
|
|
71
|
-
"types": "./index.d.ts",
|
|
72
|
-
"default": "./index.js"
|
|
73
|
-
},
|
|
74
70
|
"import": {
|
|
75
71
|
"types": "./esm/index.d.ts",
|
|
76
72
|
"default": "./esm/index.js"
|
|
73
|
+
},
|
|
74
|
+
"require": {
|
|
75
|
+
"types": "./index.d.ts",
|
|
76
|
+
"default": "./index.js"
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
"./*": {
|
|
80
|
-
"require": {
|
|
81
|
-
"types": "./*/index.d.ts",
|
|
82
|
-
"default": "./*/index.js"
|
|
83
|
-
},
|
|
84
80
|
"import": {
|
|
85
81
|
"types": "./esm/*/index.d.ts",
|
|
86
82
|
"default": "./esm/*/index.js"
|
|
83
|
+
},
|
|
84
|
+
"require": {
|
|
85
|
+
"types": "./*/index.d.ts",
|
|
86
|
+
"default": "./*/index.js"
|
|
87
87
|
}
|
|
88
88
|
},
|
|
89
|
-
"./esm": null
|
|
90
|
-
|
|
91
|
-
},
|
|
92
|
-
"types": "./index.d.ts"
|
|
89
|
+
"./esm": null
|
|
90
|
+
}
|
|
93
91
|
}
|
|
@@ -8,8 +8,6 @@ var _xDataGrid = require("@mui/x-data-grid");
|
|
|
8
8
|
// Single-linked list node
|
|
9
9
|
class Node {
|
|
10
10
|
constructor(data, next) {
|
|
11
|
-
this.next = void 0;
|
|
12
|
-
this.data = void 0;
|
|
13
11
|
this.next = next;
|
|
14
12
|
this.data = data;
|
|
15
13
|
}
|
|
@@ -26,8 +24,6 @@ class Node {
|
|
|
26
24
|
// Single-linked list container
|
|
27
25
|
class List {
|
|
28
26
|
constructor(first, last) {
|
|
29
|
-
this.first = void 0;
|
|
30
|
-
this.last = void 0;
|
|
31
27
|
this.first = first;
|
|
32
28
|
this.last = last;
|
|
33
29
|
}
|