@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.
Files changed (30) hide show
  1. package/CHANGELOG.md +204 -0
  2. package/DataGridPro/DataGridPro.js +1 -1
  3. package/DataGridPro/useDataGridProComponent.js +9 -5
  4. package/components/GridDetailPanel.d.ts +1 -1
  5. package/components/GridDetailPanel.js +5 -0
  6. package/esm/DataGridPro/DataGridPro.js +1 -1
  7. package/esm/DataGridPro/useDataGridProComponent.js +9 -5
  8. package/esm/components/GridDetailPanel.d.ts +1 -1
  9. package/esm/components/GridDetailPanel.js +5 -0
  10. package/esm/hooks/features/columnReorder/columnReorderSelector.d.ts +3 -1
  11. package/esm/hooks/features/dataSource/gridDataSourceSelector.d.ts +12 -4
  12. package/esm/hooks/features/detailPanel/gridDetailPanelSelector.d.ts +10 -4
  13. package/esm/hooks/features/detailPanel/useGridDetailPanel.js +1 -1
  14. package/esm/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js +17 -19
  15. package/esm/hooks/features/rowReorder/useGridRowReorderPreProcessors.js +10 -8
  16. package/esm/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js +2 -3
  17. package/esm/hooks/features/treeData/useGridTreeDataPreProcessors.js +2 -3
  18. package/esm/index.js +1 -1
  19. package/esm/utils/tree/models.d.ts +3 -0
  20. package/hooks/features/columnReorder/columnReorderSelector.d.ts +3 -1
  21. package/hooks/features/dataSource/gridDataSourceSelector.d.ts +12 -4
  22. package/hooks/features/detailPanel/gridDetailPanelSelector.d.ts +10 -4
  23. package/hooks/features/detailPanel/useGridDetailPanel.js +1 -1
  24. package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js +17 -19
  25. package/hooks/features/rowReorder/useGridRowReorderPreProcessors.js +10 -8
  26. package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js +1 -2
  27. package/hooks/features/treeData/useGridTreeDataPreProcessors.js +1 -2
  28. package/index.js +1 -1
  29. package/package.json +6 -7
  30. 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` [![pro](https://mui.com/r/x-pro-svg)](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` [![premium](https://mui.com/r/x-premium-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![premium](https://mui.com/r/x-premium-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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 = "MTc0ODQ2OTYwMDAwMA==";
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, _internals.useGridRowSelectionPreProcessors)(apiRef, props);
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, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
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 = "MTc0ODQ2OTYwMDAwMA==";
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
- useGridRowSelectionPreProcessors(apiRef, props);
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
- useGridDetailPanelPreProcessors(apiRef, props);
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: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./columnReorderInterfaces.js").GridColumnReorderState, string>;
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: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models.js").GridDataSourceState, Record<GridRowId, boolean>>;
5
- export declare const gridDataSourceLoadingIdSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, GridRowId, boolean>;
6
- export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models.js").GridDataSourceState, Record<GridRowId, any>>;
7
- export declare const gridDataSourceErrorSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, GridRowId, any>;
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: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, Set<import("@mui/x-data-grid").GridRowId>>;
4
- export declare const gridDetailPanelExpandedRowsContentCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>>;
5
- export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, {
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].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
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
- if (props.getDetailPanelContent == null) {
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 haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
32
- if (shouldHaveReorderColumn && haveReorderColumn) {
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 && haveReorderColumn) {
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, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
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
- const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
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, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
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
- const index = columnsState.orderedFields[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
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
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid-pro v8.5.0
2
+ * @mui/x-data-grid-pro v8.5.2
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
@@ -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: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./columnReorderInterfaces.js").GridColumnReorderState, string>;
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: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models.js").GridDataSourceState, Record<GridRowId, boolean>>;
5
- export declare const gridDataSourceLoadingIdSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, GridRowId, boolean>;
6
- export declare const gridDataSourceErrorsSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./models.js").GridDataSourceState, Record<GridRowId, any>>;
7
- export declare const gridDataSourceErrorSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, GridRowId, any>;
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: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, Set<import("@mui/x-data-grid").GridRowId>>;
4
- export declare const gridDetailPanelExpandedRowsContentCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>>;
5
- export declare const gridDetailPanelRawHeightCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, import("./gridDetailPanelInterface.js").GridDetailPanelState, {
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].height ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
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
- if (props.getDetailPanelContent == null) {
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 haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
40
- if (shouldHaveReorderColumn && haveReorderColumn) {
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 && haveReorderColumn) {
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
- const index = columnsState.orderedFields[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
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
- const index = columnsState.orderedFields[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
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
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid-pro v8.5.0
2
+ * @mui/x-data-grid-pro v8.5.2
3
3
  *
4
4
  * @license MUI X Commercial
5
5
  * This source code is licensed under the commercial license found in the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-data-grid-pro",
3
- "version": "8.5.0",
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.1",
39
- "@mui/utils": "^7.0.2",
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
- "reselect": "^5.1.1",
44
- "@mui/x-internals": "8.5.0",
45
- "@mui/x-license": "8.5.0",
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",
@@ -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;