@mui/x-tree-view-pro 8.11.3 → 8.13.0

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 (16) hide show
  1. package/CHANGELOG.md +296 -6
  2. package/RichTreeViewPro/RichTreeViewPro.js +1 -1
  3. package/RichTreeViewPro/RichTreeViewPro.types.d.ts +2 -3
  4. package/RichTreeViewPro/index.d.ts +1 -1
  5. package/esm/RichTreeViewPro/RichTreeViewPro.js +1 -1
  6. package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts +2 -3
  7. package/esm/RichTreeViewPro/index.d.ts +1 -1
  8. package/esm/index.js +1 -1
  9. package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +2 -2
  10. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +1 -2
  11. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +123 -157
  12. package/index.js +1 -1
  13. package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +2 -2
  14. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +1 -2
  15. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +125 -159
  16. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -5,6 +5,296 @@
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.13.0
9
+
10
+ _Oct 1, 2025_
11
+
12
+ We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
13
+
14
+ - 📊 The chart zoom now supports the `tapAndDrag` gesture. Zoom in/out by tapping twice and dragging vertically.
15
+ - 🔎 Charts now allow [fine-grained control for zoom interactions](https://mui.com/x/react-charts/zoom-and-pan/#zoom-interactions-configuration).
16
+ ```jsx
17
+ <BarChartPro
18
+ zoomInteractionConfig={{
19
+ // Only zoom when Control key is pressed
20
+ zoom: [{ type: 'wheel', keys: ['Control'] }],
21
+ // Only pan when Shift key is pressed
22
+ pan: [{ type: 'drag', keys: ['Shift'] }],
23
+ }}
24
+ />
25
+ ```
26
+ - ➡️ Data Grid grouping rows now persist their expansion state when the rows are updated.
27
+ - 📜 Updated Data Grid vertical scrollbar to include pinned rows and aggregation sections.
28
+ - 📌 Improved the appearance of [pinned columns](https://mui.com/x/react-data-grid/column-pinning/#pinned-columns-appearance) and [pinned rows](https://mui.com/x/react-data-grid/row-pinning/#pinned-rows-appearance) sections in the Data Grid.
29
+ - 🚀 Tree View now fetches the children of expanded items on mount when using lazy loading.
30
+ - 🐞 Bugfixes
31
+ - 📚 Documentation improvements
32
+
33
+ Special thanks go out to the community members for their valuable contributions:
34
+ @sai6855
35
+
36
+ The following are all team members who have contributed to this release:
37
+ @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @hasdfa, @Janpot, @JCQuintas, @KenanYusuf, @mapache-salvaje, @MBilalShafi, @mnajdova, @rita-codes, @siriwatknp
38
+
39
+ ### Data Grid
40
+
41
+ #### `@mui/x-data-grid@8.13.0`
42
+
43
+ - [DataGrid] Add scroll shadows and fix scrollbar overlap (#16476) @KenanYusuf
44
+ - [DataGrid] Fix row spanning stale state issue (#19733) @MBilalShafi
45
+ - [DataGrid] Fix toolbar `slotProps` not being applied (#19769) @sai6855
46
+ - [DataGrid] Skip calling `fetchRows()` when strategy is not initialized (#19728) @MBilalShafi
47
+
48
+ #### `@mui/x-data-grid-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
49
+
50
+ Same changes as in `@mui/x-data-grid@8.13.0`, plus:
51
+
52
+ - [DataGridPro] Retain expansion state on rows update (#19697) @MBilalShafi
53
+
54
+ #### `@mui/x-data-grid-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
55
+
56
+ Same changes as in `@mui/x-data-grid-pro@8.13.0`, plus:
57
+
58
+ - [DataGridPremium] Add `metadata.referenceId` to AI assistant prompt resolver (#19695) @hasdfa
59
+ - [DataGridPremium] Fix aggregation value retrieval (#19724) @arminmeh
60
+ - [DataGridPremium] Get correct active chart id while rebuilding data (#19720) @arminmeh
61
+
62
+ ### Date and Time Pickers
63
+
64
+ #### `@mui/x-date-pickers@8.12.0`
65
+
66
+ Internal changes.
67
+
68
+ #### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
69
+
70
+ Same changes as in `@mui/x-date-pickers@8.12.0`.
71
+
72
+ ### Charts
73
+
74
+ #### `@mui/x-charts@8.13.0`
75
+
76
+ - [charts] Add `tapAndDrag` zoom gesture (#19727) @JCQuintas
77
+ - [charts] Add arc focus indicator that follows the arc form (#19696) @mnajdova
78
+ - [charts] Fix outline color (#19752) @alexfauquette
79
+ - [charts] Improve tooltip doc (#19731) @JCQuintas
80
+ - [charts] Make axis highlight reflect the keyboard interaction (#19631) @alexfauquette
81
+ - [charts] Prevent horizontal scroll on keyboard navigation (#19704) @alexfauquette
82
+ - [charts] Simplify gestures by removing bindings (#19767) @JCQuintas
83
+
84
+ #### `@mui/x-charts-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
85
+
86
+ Same changes as in `@mui/x-charts@8.13.0`, plus:
87
+
88
+ - [charts-pro] Allow zoom interactions to be configured (#18646) @JCQuintas
89
+ - [charts-pro] Fix zoom preview having wrong domain in some cases (#19723) @bernardobelchior
90
+
91
+ #### `@mui/x-charts-premium@8.13.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
92
+
93
+ Same changes as in `@mui/x-charts-pro@8.13.0`.
94
+
95
+ ### Tree View
96
+
97
+ #### `@mui/x-tree-view@8.13.0`
98
+
99
+ - [tree view] Export the `apiRef` type of each Tree View component (#19543) @flaviendelangle
100
+ - [tree view] Fix indeterminate checkbox state (#19544) @flaviendelangle
101
+ - [tree view] Improve the lazy loading initial expansion (#19284) @flaviendelangle
102
+ - [tree view] Use Base UI utils whenever possible (#19502) @flaviendelangle
103
+
104
+ #### `@mui/x-tree-view-pro@8.13.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
105
+
106
+ Same changes as in `@mui/x-tree-view@8.13.0`.
107
+
108
+ ### Codemod
109
+
110
+ #### `@mui/x-codemod@8.12.0`
111
+
112
+ Internal changes.
113
+
114
+ ### Docs
115
+
116
+ - [docs] Add a recipe to customize editing component with Autocomplete (#19651) @siriwatknp
117
+ - [docs] Refine the electricity scatter tooltip (#19689) @alexfauquette
118
+ - [docs] Revise the Axis doc (#19052) @mapache-salvaje
119
+ - [docs] Remove reference to nonexistent `FocusedMark` API page (#19773) @bernardobelchior
120
+
121
+ ### Core
122
+
123
+ - [code-infra] Change charts codspeed integration to use walltime (#19729) @JCQuintas
124
+ - [code-infra] Port stylelint from core repo (#19633) @Janpot
125
+ - [code-infra] Stabilize fake timers in regression tests (#19719) @Janpot
126
+ - [code-infra] Stabilize size for bundles with `releaseInfo` (#19674) @Janpot
127
+ - [code-infra] Fix `pnpm-lock.yaml` broken lockfile (#19755) @bernardobelchior
128
+
129
+ ## 8.12.1
130
+
131
+ _Sep 25, 2025_
132
+
133
+ Release highlight ✨:
134
+
135
+ - 🐞 Hotfix for Grid-Charts integration issue with aggregated values
136
+
137
+ ### Data Grid
138
+
139
+ #### `@mui/x-data-grid@8.12.1`
140
+
141
+ Internal changes.
142
+
143
+ #### `@mui/x-data-grid-pro@8.12.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
144
+
145
+ Same changes as in `@mui/x-data-grid@8.12.1`.
146
+
147
+ #### `@mui/x-data-grid-premium@8.12.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
148
+
149
+ Same changes as in `@mui/x-data-grid-pro@8.12.1`, plus:
150
+
151
+ - [DataGridPremium] Collect aggregated values properly for the charts integration context (#19714) @arminmeh
152
+
153
+ ## 8.12.0
154
+
155
+ _Sep 25, 2025_
156
+
157
+ We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
158
+
159
+ - 🤝 Grid-Charts integration
160
+
161
+ ![Grid x Charts](https://github.com/user-attachments/assets/0817c36f-f87f-4688-8f30-fa0db638ca8c)
162
+
163
+ 👉 [🎥 Watch the full video](https://github.com/user-attachments/assets/28f1848e-dc85-4077-8756-a3e88afd4e54)
164
+
165
+ - ⌨️ Charts keyboard navigation
166
+ - ⚡️ Charts: Add new `renderer="svg-batch"` prop to Scatter charts that provides improved performance for large datasets
167
+ - 🐞 Bugfixes
168
+ - 📚 Documentation improvements
169
+ - 🧰 Codemod requires Node >=20.19
170
+
171
+ `@mui/x-codemod` minimum supported Node version is `20.19`.
172
+ This was only the case due to using the v18 `yargs` package; this now explicitly aligns with it. (#18979)
173
+
174
+ Special thanks go out to the community members for their valuable contributions:
175
+ @deade1e, @sai6855, @thomas-mcdonald
176
+
177
+ The following are all team members who have contributed to this release:
178
+ @alexfauquette, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @michelengelen, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @romgrk
179
+
180
+ ### Data Grid
181
+
182
+ #### `@mui/x-data-grid@8.12.0`
183
+
184
+ - [DataGrid] Fix flex column width diff calculation while resizing (#19667) @arminmeh
185
+
186
+ #### `@mui/x-data-grid-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
187
+
188
+ Same changes as in `@mui/x-data-grid@8.12.0`.
189
+
190
+ #### `@mui/x-data-grid-premium@8.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
191
+
192
+ Same changes as in `@mui/x-data-grid-pro@8.12.0`, plus:
193
+
194
+ - [DataGridPremium] Grid-Charts integration (#18021) @arminmeh
195
+ - [DataGridPremium] Fix sorting and filtering of the tree group columns with aggregation (#19607) @arminmeh
196
+ - [DataGridPremium] Disable aggregation on the grouping column by default (#19692) @arminmeh
197
+ - [DataGridPremium] Do not rely on the group separation constant to retrieve the column name for the charts panel (#19677) @arminmeh
198
+ - [DataGridPremium] Fix stale aggregation state (#19690) @arminmeh
199
+ - [DataGridPremium] Fix pivot column being hidden on autosizing (#19699) @cherniavskii
200
+
201
+ ### Date and Time Pickers
202
+
203
+ #### `@mui/x-date-pickers@8.12.0`
204
+
205
+ - [pickers] Ensure reference value is not updated for invalid values (#19635) @michelengelen
206
+ - [pickers] Fix `slotProps.textField.slotProps.htmlInput` resolution (#19713) @LukasTy
207
+ - [pickers] Preserve time format when using single column layout on Time Range Picker (#19626) @sai6855
208
+ - [pickers] Preserve time format when using single column layout on Date Time Picker and Date Time Range Picker (#19608) @sai6855
209
+
210
+ #### `@mui/x-date-pickers-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
211
+
212
+ Same changes as in `@mui/x-date-pickers@8.12.0`.
213
+
214
+ ### Charts
215
+
216
+ #### `@mui/x-charts@8.12.0`
217
+
218
+ - [charts] Add batch renderer for scatter chart (#19075) @bernardobelchior
219
+ - [charts] Add renderer suffix to performance benchmarks (#19620) @bernardobelchior
220
+ - [charts] Document how plugins can be used (#19343) @alexfauquette
221
+ - [charts] Export chart plugins per series type (#19337) @alexfauquette
222
+ - [charts] Export plugins (#19335) @alexfauquette
223
+ - [charts] Fix horizontal layout and toolbar (#19655) @alexfauquette
224
+ - [charts] Fix performance issue with JS animations (#19606) @bernardobelchior
225
+ - [charts] Fix piecewise scale causing wrong colors in axis with min/max (#19610) @bernardobelchior
226
+ - [charts] Fix zoom discard inconsistency (#19535) @bernardobelchior
227
+ - [charts] Introduce keyboard navigation (#19155) @alexfauquette
228
+ - [charts] Refactor `getAxisExtremum` (#19627) @bernardobelchior
229
+ - [charts] Remove unused code path from `getAxisScale` (#19673) @bernardobelchior
230
+ - [charts] Make new hideLegend prop on ChartWrapper optional (#19694) @thomas-mcdonald
231
+ - [charts] Fix chart crash in test environment (#19711) @JCQuintas
232
+
233
+ #### `@mui/x-charts-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
234
+
235
+ Same changes as in `@mui/x-charts@8.12.0`, plus:
236
+
237
+ - [charts-pro] Add `valueFormatter` to sankey (#19636) @JCQuintas
238
+ - [charts-pro] Allow `source/target` keywords in sankey link color (#19634) @JCQuintas
239
+ - [charts-pro] Allow exporting `SankeyChart` (#19659) @JCQuintas
240
+ - [charts-pro] Fix axis inversion when using axis `max` and `filterMode: 'discard'` (#19200) @bernardobelchior
241
+
242
+ #### `@mui/x-charts-premium@8.12.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
243
+
244
+ Same changes as in `@mui/x-charts-pro@8.12.0`, plus:
245
+
246
+ - [charts-premium] Grid-Charts integration (#18021) @arminmeh
247
+
248
+ ### Tree View
249
+
250
+ #### `@mui/x-tree-view@8.12.0`
251
+
252
+ - [tree view] Allow to pass `null` to the icon slots (#19569) @flaviendelangle
253
+ - [tree view] Fix `apiRef.current.isItemExpanded()` method (#19619) @flaviendelangle
254
+
255
+ #### `@mui/x-tree-view-pro@8.12.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
256
+
257
+ Same changes as in `@mui/x-tree-view@8.12.0`.
258
+
259
+ ### Codemod
260
+
261
+ #### `@mui/x-codemod@8.12.0`
262
+
263
+ - [codemod] Bump `engines.node` to `>=20.19` to align with `yargs` package (#18979) @LukasTy
264
+
265
+ ### Docs
266
+
267
+ - [docs] Add missing label to Charts example (#19616) @prakhargupta1
268
+ - [docs] Replace axis type and axis data with a table (#19618) @prakhargupta1
269
+ - [docs] Add Charts example collection page (#18353) @prakhargupta1
270
+ - [docs] Add a Charts demo showcasing bar and scatter composition (#19605) @prakhargupta1
271
+ - [docs] Add composition Charts demo for legends and tooltip (#19602) @prakhargupta1
272
+ - [docs] Add recipe about server-side data export (#19617) @siriwatknp
273
+ - [docs] Clarify DataGrid layout requirements (#19413) @romgrk
274
+ - [docs] Fix `ExportServerSideData` demo layout shift (#19669) @siriwatknp
275
+ - [docs] Improve server-side `updateRow()` description (#19554) @deade1e
276
+ - [docs] Show how to customize drawing area background (#19682) @alexfauquette
277
+ - [docs] Add hook documentation pages (#19334) @Copilot
278
+
279
+ ### Core
280
+
281
+ - [code-infra] Add copilot instructions specific to x repo (#19623) @JCQuintas
282
+ - [code-infra] Load `tsx` files in visual regression (#19595) @JCQuintas
283
+ - [code-infra] Remove renovate automerge (#19501) @Janpot
284
+ - [code-infra] Update `DEFAULT_TIMESTAMP` format to ISO 8601 (#19624) @Janpot
285
+ - [code-infra] Update `findLatestTaggedVersion` to filter tags based on major version (#19693) @michelengelen
286
+ - [code-infra] Fix changelog generation for charts premium (#19701) @JCQuintas
287
+ - [code-infra] Run prettier on `createReleasePR.mjs` (#19702) @bernardobelchior
288
+ - [code-infra] Make `x-charts-premium` releasable (#18959) @JCQuintas
289
+ - [docs-infra] Ensure `create-playground` script only runs if target file is absent (#19603) @michelengelen
290
+ - [docs-infra] Add @prakhargupta1 as a codeowner of the docs (#19679) @alexfauquette
291
+
292
+ ### Miscellaneous
293
+
294
+ - [test] Reduce time for wheel zoom test (#19571) @alexfauquette
295
+ - Change `matchPackageNames` to `matchDepNames` for date-fns-v2 @Janpot
296
+ - Remove groupName for date-fns-v2 in renovate.json @Janpot
297
+
8
298
  ## 8.11.3
9
299
 
10
300
  _Sep 16, 2025_
@@ -27,11 +317,11 @@ The following are all team members who have contributed to this release:
27
317
  - [DataGrid] Fix numeric font size not being applied (#19552) @cherniavskii
28
318
  - [DataGrid] Improve `operator` types to display literal values (#19529) @siriwatknp
29
319
 
30
- #### `@mui/x-data-grid-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
320
+ #### `@mui/x-data-grid-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
31
321
 
32
322
  Same changes as in `@mui/x-data-grid@8.11.3`.
33
323
 
34
- #### `@mui/x-data-grid-premium@8.11.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
324
+ #### `@mui/x-data-grid-premium@8.11.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
35
325
 
36
326
  Same changes as in `@mui/x-data-grid-pro@8.11.3`.
37
327
 
@@ -41,7 +331,7 @@ Same changes as in `@mui/x-data-grid-pro@8.11.3`.
41
331
 
42
332
  - [pickers] Refactor `slots` and `slotProps` propagation strategy (#18867) @LukasTy
43
333
 
44
- #### `@mui/x-date-pickers-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
334
+ #### `@mui/x-date-pickers-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
45
335
 
46
336
  Same changes as in `@mui/x-date-pickers@8.11.3`.
47
337
 
@@ -55,7 +345,7 @@ Same changes as in `@mui/x-date-pickers@8.11.3`.
55
345
  - [charts] Rename `isBandScale` to `isDiscreteScale` (#19514) @bernardobelchior
56
346
  - [charts] Fix legend position affecting toolbar's position (#19257) @sai6855
57
347
 
58
- #### `@mui/x-charts-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
348
+ #### `@mui/x-charts-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
59
349
 
60
350
  Same changes as in `@mui/x-charts@8.11.3`, plus:
61
351
 
@@ -69,7 +359,7 @@ Same changes as in `@mui/x-charts@8.11.3`, plus:
69
359
  - [tree view] Support flat DOM structure (#19350) @flaviendelangle
70
360
  - [tree view] Update cursor styles for disabled TreeItem (#19548) @sai6855
71
361
 
72
- #### `@mui/x-tree-view-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
362
+ #### `@mui/x-tree-view-pro@8.11.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
73
363
 
74
364
  Same changes as in `@mui/x-tree-view@8.11.3`.
75
365
 
@@ -83,7 +373,7 @@ Internal changes.
83
373
 
84
374
  - [docs] Add styling row group recipe (#19349) @siriwatknp
85
375
  - [docs] Group demos data into the dataset folder (#19549) @alexfauquette
86
- - [docs] Add `shiny` bar chart example at the top (#19416) @JCQuintas
376
+ - [docs] Add `shiny` bar chart example at the top (#19416) @JCQuintas
87
377
 
88
378
  ### Core
89
379
 
package/RichTreeViewPro/RichTreeViewPro.js CHANGED
@@ -52,7 +52,7 @@ const RichTreeViewProRoot = exports.RichTreeViewProRoot = (0, _zeroStyled.styled
52
52
  outline: 0,
53
53
  position: 'relative'
54
54
  });
55
- const releaseInfo = "MTc1ODA2NzIwMDAwMA==";
55
+ const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
56
56
 
57
57
  /**
58
58
  *
package/RichTreeViewPro/RichTreeViewPro.types.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface RichTreeViewProSlots extends TreeViewSlots, RichTreeViewItemsSl
15
15
  export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
16
16
  root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
17
17
  }
18
- type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
18
+ export type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
19
19
  export interface RichTreeViewProPropsBase extends React.HTMLAttributes<HTMLUListElement> {
20
20
  className?: string;
21
21
  /**
@@ -42,5 +42,4 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
42
42
  * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
43
43
  */
44
44
  apiRef?: RichTreeViewProApiRef;
45
- }
46
- export {};
45
+ }
package/RichTreeViewPro/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export * from "./RichTreeViewPro.js";
2
2
  export * from "./richTreeViewProClasses.js";
3
- export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps } from "./RichTreeViewPro.types.js";
3
+ export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps, RichTreeViewProApiRef } from "./RichTreeViewPro.types.js";
4
4
  export type { RichTreeViewProPluginSignatures } from "./RichTreeViewPro.plugins.js";
package/esm/RichTreeViewPro/RichTreeViewPro.js CHANGED
@@ -45,7 +45,7 @@ export const RichTreeViewProRoot = styled('ul', {
45
45
  outline: 0,
46
46
  position: 'relative'
47
47
  });
48
- const releaseInfo = "MTc1ODA2NzIwMDAwMA==";
48
+ const releaseInfo = "MTc1OTI3NjgwMDAwMA==";
49
49
 
50
50
  /**
51
51
  *
package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts CHANGED
@@ -15,7 +15,7 @@ export interface RichTreeViewProSlots extends TreeViewSlots, RichTreeViewItemsSl
15
15
  export interface RichTreeViewProSlotProps<R extends {}, Multiple extends boolean | undefined> extends TreeViewSlotProps, RichTreeViewItemsSlotProps {
16
16
  root?: SlotComponentProps<'ul', {}, RichTreeViewProProps<R, Multiple>>;
17
17
  }
18
- type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
18
+ export type RichTreeViewProApiRef = React.RefObject<Partial<TreeViewPublicAPI<RichTreeViewProPluginSignatures>> | undefined>;
19
19
  export interface RichTreeViewProPropsBase extends React.HTMLAttributes<HTMLUListElement> {
20
20
  className?: string;
21
21
  /**
@@ -42,5 +42,4 @@ export interface RichTreeViewProProps<R extends {}, Multiple extends boolean | u
42
42
  * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`.
43
43
  */
44
44
  apiRef?: RichTreeViewProApiRef;
45
- }
46
- export {};
45
+ }
package/esm/RichTreeViewPro/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export * from "./RichTreeViewPro.js";
2
2
  export * from "./richTreeViewProClasses.js";
3
- export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps } from "./RichTreeViewPro.types.js";
3
+ export type { RichTreeViewProProps, RichTreeViewProPropsBase, RichTreeViewProSlots, RichTreeViewProSlotProps, RichTreeViewProApiRef } from "./RichTreeViewPro.types.js";
4
4
  export type { RichTreeViewProPluginSignatures } from "./RichTreeViewPro.plugins.js";
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-tree-view-pro v8.11.3
2
+ * @mui/x-tree-view-pro v8.13.0
3
3
  *
4
4
  * @license SEE LICENSE IN LICENSE
5
5
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import * as React from 'react';
3
- import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
3
+ import { useIsoLayoutEffect } from '@base-ui-components/utils/useIsoLayoutEffect';
4
4
  import { itemsSelectors, labelSelectors } from '@mui/x-tree-view/internals';
5
5
  import { chooseActionToApply, isAncestor, moveItemInTree } from "./useTreeViewItemsReordering.utils.js";
6
6
  import { useTreeViewItemsReorderingItemPlugin } from "./useTreeViewItemsReordering.itemPlugin.js";
@@ -171,7 +171,7 @@ export const useTreeViewItemsReordering = ({
171
171
  })
172
172
  }));
173
173
  }, [store, params.itemChildrenIndentation]);
174
- useEnhancedEffect(() => {
174
+ useIsoLayoutEffect(() => {
175
175
  store.set('itemsReordering', _extends({}, store.state.itemsReordering, {
176
176
  isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
177
177
  }));
package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- import { TreeViewPlugin } from '@mui/x-tree-view/internals';
2
- import type { UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
1
+ import { TreeViewPlugin, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
3
2
  export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;
package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js CHANGED
@@ -2,205 +2,144 @@
2
2
 
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import * as React from 'react';
5
- import useLazyRef from '@mui/utils/useLazyRef';
6
- import useEventCallback from '@mui/utils/useEventCallback';
7
- import { itemsSelectors, expansionSelectors, selectionSelectors, lazyLoadingSelectors, useInstanceEventHandler } from '@mui/x-tree-view/internals';
5
+ import { useRefWithInit } from '@base-ui-components/utils/useRefWithInit';
6
+ import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
7
+ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
8
+ import { itemsSelectors, expansionSelectors, selectionSelectors, lazyLoadingSelectors, useInstanceEventHandler, TREE_VIEW_ROOT_PARENT_ID } from '@mui/x-tree-view/internals';
8
9
  import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
9
10
  import { NestedDataManager } from "./utils.js";
10
11
  const INITIAL_STATE = {
11
12
  loading: {},
12
13
  errors: {}
13
14
  };
14
- const noopCache = {
15
- clear: () => {},
16
- get: () => undefined,
17
- set: () => {}
18
- };
19
- function getCache(cacheProp) {
20
- if (cacheProp === null) {
21
- return noopCache;
22
- }
23
- return cacheProp ?? new DataSourceCacheDefault({});
24
- }
25
15
  export const useTreeViewLazyLoading = ({
26
16
  instance,
27
17
  params,
28
18
  store
29
19
  }) => {
30
- const isLazyLoadingEnabled = !!params.dataSource;
31
- const firstRenderRef = React.useRef(true);
32
- const nestedDataManager = useLazyRef(() => new NestedDataManager(instance)).current;
33
- const cacheRef = useLazyRef(() => getCache(params.dataSourceCache));
20
+ const nestedDataManager = useRefWithInit(() => new NestedDataManager(instance)).current;
21
+ const cache = useRefWithInit(() => params.dataSourceCache ?? new DataSourceCacheDefault({})).current;
34
22
  const setDataSourceLoading = useEventCallback((itemId, isLoading) => {
35
- if (!isLazyLoadingEnabled) {
23
+ if (!params.dataSource) {
36
24
  return;
37
25
  }
38
- if (lazyLoadingSelectors.isItemLoading(store.state, itemId) === isLoading) {
26
+ const itemIdWithDefault = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
27
+ if (lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
39
28
  return;
40
29
  }
41
- const loadingState = _extends({}, store.state.lazyLoading.dataSource.loading);
30
+ const loading = _extends({}, store.state.lazyLoading.dataSource.loading);
42
31
  if (isLoading === false) {
43
- delete loadingState[itemId];
32
+ delete loading[itemIdWithDefault];
44
33
  } else {
45
- loadingState[itemId] = isLoading;
34
+ loading[itemIdWithDefault] = isLoading;
46
35
  }
47
36
  store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
48
37
  dataSource: _extends({}, store.state.lazyLoading.dataSource, {
49
- loading: loadingState
38
+ loading
50
39
  })
51
40
  }));
52
41
  });
53
- const setDataSourceError = (itemId, error) => {
54
- if (!isLazyLoadingEnabled) {
42
+ const setDataSourceError = useEventCallback((itemId, error) => {
43
+ if (!params.dataSource) {
44
+ return;
45
+ }
46
+ if (lazyLoadingSelectors.itemError(store.state, itemId) === error) {
55
47
  return;
56
48
  }
49
+ const stateId = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
57
50
  const errors = _extends({}, store.state.lazyLoading.dataSource.errors);
58
- if (error === null && errors[itemId] !== undefined) {
59
- delete errors[itemId];
51
+ if (error === null && errors[stateId] !== undefined) {
52
+ delete errors[stateId];
60
53
  } else {
61
- errors[itemId] = error;
54
+ errors[stateId] = error;
62
55
  }
63
- errors[itemId] = error;
64
56
  store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
65
57
  dataSource: _extends({}, store.state.lazyLoading.dataSource, {
66
58
  errors
67
59
  })
68
60
  }));
69
- };
70
- const resetDataSourceState = useEventCallback(() => {
71
- if (!isLazyLoadingEnabled) {
72
- return;
73
- }
74
- store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
75
- dataSource: INITIAL_STATE
76
- }));
77
- });
78
- const fetchItems = useEventCallback(async parentIds => {
79
- if (!isLazyLoadingEnabled) {
80
- return;
81
- }
82
- const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
83
- const getTreeItems = params.dataSource?.getTreeItems;
84
- if (!getTreeItems) {
85
- return;
86
- }
87
- if (parentIds) {
88
- await nestedDataManager.queue(parentIds);
89
- return;
90
- }
91
- nestedDataManager.clear();
92
- // handle loading here
93
- instance.setTreeViewLoading(true);
94
- // reset the state if we are refetching the first visible items
95
- if (lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
96
- resetDataSourceState();
97
- }
98
- // handle caching here
99
- const cachedData = cacheRef.current.get('root');
100
- if (cachedData !== undefined && cachedData !== -1) {
101
- instance.addItems({
102
- items: cachedData,
103
- depth: 0,
104
- getChildrenCount
105
- });
106
- instance.setTreeViewLoading(false);
107
- return;
108
- }
109
- try {
110
- const getTreeItemsResponse = await getTreeItems();
111
-
112
- // set caching
113
- cacheRef.current.set('root', getTreeItemsResponse);
114
-
115
- // update the items in the state
116
- instance.addItems({
117
- items: getTreeItemsResponse,
118
- depth: 0,
119
- getChildrenCount
120
- });
121
- } catch (error) {
122
- // set the items to empty
123
- instance.addItems({
124
- items: [],
125
- depth: 0,
126
- getChildrenCount
127
- });
128
- // set error state
129
- instance.setTreeViewError(error);
130
- } finally {
131
- // set loading state
132
- instance.setTreeViewLoading(false);
133
- }
134
61
  });
62
+ const fetchItems = useEventCallback(async parentIds => nestedDataManager.queue(parentIds));
135
63
  const fetchItemChildren = useEventCallback(async ({
136
64
  itemId,
137
65
  forceRefresh
138
66
  }) => {
139
- if (!isLazyLoadingEnabled) {
67
+ if (!params.dataSource) {
140
68
  return;
141
69
  }
142
- const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
143
- const getTreeItems = params.dataSource?.getTreeItems;
144
- if (!getTreeItems) {
70
+ const {
71
+ getChildrenCount,
72
+ getTreeItems
73
+ } = params.dataSource;
74
+ // clear the request if the item is not in the tree
75
+ if (itemId != null && !itemsSelectors.itemMeta(store.state, itemId)) {
145
76
  nestedDataManager.clearPendingRequest(itemId);
146
77
  return;
147
78
  }
148
- const parent = itemsSelectors.itemMeta(store.state, itemId);
149
- if (!parent) {
150
- nestedDataManager.clearPendingRequest(itemId);
151
- return;
152
- }
153
- const depth = parent.depth ? parent.depth + 1 : 1;
154
79
 
155
- // handle loading here
156
- instance.setDataSourceLoading(itemId, true);
157
-
158
- // handle caching here
80
+ // reset the state if we are fetching the root items
81
+ if (itemId == null && lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
82
+ store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
83
+ dataSource: INITIAL_STATE
84
+ }));
85
+ }
86
+ const cacheKey = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
159
87
  if (!forceRefresh) {
160
- const cachedData = cacheRef.current.get(itemId);
88
+ // reads from the value from the cache
89
+ const cachedData = cache.get(cacheKey);
161
90
  if (cachedData !== undefined && cachedData !== -1) {
162
- nestedDataManager.setRequestSettled(itemId);
163
- instance.addItems({
91
+ if (itemId != null) {
92
+ nestedDataManager.setRequestSettled(itemId);
93
+ }
94
+ instance.setItemChildren({
164
95
  items: cachedData,
165
- depth,
166
96
  parentId: itemId,
167
97
  getChildrenCount
168
98
  });
169
99
  instance.setDataSourceLoading(itemId, false);
170
100
  return;
171
101
  }
102
+
103
+ // set the item loading status to true
104
+ instance.setDataSourceLoading(itemId, true);
172
105
  if (cachedData === -1) {
173
106
  instance.removeChildren(itemId);
174
107
  }
175
108
  }
176
- if (lazyLoadingSelectors.itemHasError(store.state, itemId)) {
109
+
110
+ // reset existing error if any
111
+ if (lazyLoadingSelectors.itemError(store.state, itemId)) {
177
112
  instance.setDataSourceError(itemId, null);
178
113
  }
179
114
  try {
180
- const getTreeItemsResponse = await getTreeItems(itemId);
181
- nestedDataManager.setRequestSettled(itemId);
182
-
183
- // set caching
184
- cacheRef.current.set(itemId, getTreeItemsResponse);
185
- // update the items in the state
186
- if (forceRefresh) {
187
- instance.removeChildren(itemId);
115
+ let response;
116
+ if (itemId == null) {
117
+ response = await getTreeItems();
118
+ } else {
119
+ response = await getTreeItems(itemId);
120
+ nestedDataManager.setRequestSettled(itemId);
188
121
  }
189
- instance.addItems({
190
- items: getTreeItemsResponse,
191
- depth,
122
+ // save the response in the cache
123
+ cache.set(cacheKey, response);
124
+ // update the items in the state
125
+ instance.setItemChildren({
126
+ items: response,
192
127
  parentId: itemId,
193
128
  getChildrenCount
194
129
  });
195
130
  } catch (error) {
196
131
  const childrenFetchError = error;
197
- // handle errors here
132
+ // set the item error in the state
198
133
  instance.setDataSourceError(itemId, childrenFetchError);
199
- instance.removeChildren(itemId);
134
+ if (forceRefresh) {
135
+ instance.removeChildren(itemId);
136
+ }
200
137
  } finally {
201
- // unset loading
138
+ // set the item loading status to false
202
139
  instance.setDataSourceLoading(itemId, false);
203
- nestedDataManager.setRequestSettled(itemId);
140
+ if (itemId != null) {
141
+ nestedDataManager.setRequestSettled(itemId);
142
+ }
204
143
  }
205
144
  });
206
145
  const updateItemChildren = useEventCallback(itemId => {
@@ -210,15 +149,15 @@ export const useTreeViewLazyLoading = ({
210
149
  });
211
150
  });
212
151
  useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
213
- if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
152
+ if (!params.dataSource || !eventParameters.shouldBeExpanded) {
214
153
  return;
215
154
  }
216
- // prevent the default expansion behavior
217
155
 
156
+ // prevent the default expansion behavior
218
157
  eventParameters.isExpansionPrevented = true;
219
158
  await instance.fetchItems([eventParameters.itemId]);
220
- const itemHasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
221
- if (!itemHasError) {
159
+ const hasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
160
+ if (!hasError) {
222
161
  instance.applyItemExpansion({
223
162
  itemId: eventParameters.itemId,
224
163
  shouldBeExpanded: true,
@@ -235,29 +174,12 @@ export const useTreeViewLazyLoading = ({
235
174
  }
236
175
  }
237
176
  });
238
- React.useEffect(() => {
239
- if (isLazyLoadingEnabled && firstRenderRef.current) {
240
- store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
241
- enabled: true
242
- }));
243
- if (params.items.length) {
244
- const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
245
- instance.addItems({
246
- items: params.items,
247
- depth: 0,
248
- getChildrenCount
249
- });
250
- } else {
251
- const expandedItems = expansionSelectors.expandedItemsRaw(store.state);
252
- if (expandedItems.length > 0) {
253
- instance.resetItemExpansion();
254
- }
255
- instance.fetchItems();
256
- }
257
- firstRenderRef.current = false;
258
- }
259
- }, [instance, params.items, params.dataSource, isLazyLoadingEnabled, store]);
260
- if (isLazyLoadingEnabled) {
177
+ useLazyLoadOnMount({
178
+ instance,
179
+ params,
180
+ store
181
+ });
182
+ if (params.dataSource) {
261
183
  instance.preventItemUpdates();
262
184
  }
263
185
  return {
@@ -282,4 +204,48 @@ useTreeViewLazyLoading.getInitialState = () => ({
282
204
  useTreeViewLazyLoading.params = {
283
205
  dataSource: true,
284
206
  dataSourceCache: true
285
- };
207
+ };
208
+ function useLazyLoadOnMount({
209
+ instance,
210
+ params,
211
+ store
212
+ }) {
213
+ const firstRenderRef = React.useRef(true);
214
+ useEnhancedEffect(() => {
215
+ if (!params.dataSource || !firstRenderRef.current) {
216
+ return;
217
+ }
218
+ firstRenderRef.current = false;
219
+ store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
220
+ enabled: true
221
+ }));
222
+ async function fetchAllExpandedItems() {
223
+ async function fetchChildrenIfExpanded(parentIds) {
224
+ const expandedItems = parentIds.filter(id => expansionSelectors.isItemExpanded(store.state, id));
225
+ if (expandedItems.length > 0) {
226
+ const itemsToLazyLoad = expandedItems.filter(id => itemsSelectors.itemOrderedChildrenIds(store.state, id).length === 0);
227
+ if (itemsToLazyLoad.length > 0) {
228
+ await instance.fetchItems(itemsToLazyLoad);
229
+ }
230
+ const childrenIds = expandedItems.flatMap(id => itemsSelectors.itemOrderedChildrenIds(store.state, id));
231
+ await fetchChildrenIfExpanded(childrenIds);
232
+ }
233
+ }
234
+ if (params.items.length) {
235
+ const newlyExpandableItems = getExpandableItemsFromDataSource(store, params.dataSource);
236
+ if (newlyExpandableItems.length > 0) {
237
+ instance.addExpandableItems(newlyExpandableItems);
238
+ }
239
+ } else {
240
+ await instance.fetchItemChildren({
241
+ itemId: null
242
+ });
243
+ }
244
+ await fetchChildrenIfExpanded(itemsSelectors.itemOrderedChildrenIds(store.state, null));
245
+ }
246
+ fetchAllExpandedItems();
247
+ }, [instance, params.items, params.dataSource, store]);
248
+ }
249
+ function getExpandableItemsFromDataSource(store, dataSource) {
250
+ return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) > 0).map(item => item.id);
251
+ }
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-tree-view-pro v8.11.3
2
+ * @mui/x-tree-view-pro v8.13.0
3
3
  *
4
4
  * @license SEE LICENSE IN LICENSE
5
5
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js CHANGED
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
8
8
  exports.useTreeViewItemsReordering = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
- var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
11
+ var _useIsoLayoutEffect = require("@base-ui-components/utils/useIsoLayoutEffect");
12
12
  var _internals = require("@mui/x-tree-view/internals");
13
13
  var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
14
14
  var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.itemPlugin");
@@ -179,7 +179,7 @@ const useTreeViewItemsReordering = ({
179
179
  })
180
180
  }));
181
181
  }, [store, params.itemChildrenIndentation]);
182
- (0, _useEnhancedEffect.default)(() => {
182
+ (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
183
183
  store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
184
184
  isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
185
185
  }));
package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts CHANGED
@@ -1,3 +1,2 @@
1
- import { TreeViewPlugin } from '@mui/x-tree-view/internals';
2
- import type { UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
1
+ import { TreeViewPlugin, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
3
2
  export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;
package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js CHANGED
@@ -9,8 +9,9 @@ Object.defineProperty(exports, "__esModule", {
9
9
  exports.useTreeViewLazyLoading = void 0;
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
  var React = _interopRequireWildcard(require("react"));
12
- var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
13
- var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
12
+ var _useRefWithInit = require("@base-ui-components/utils/useRefWithInit");
13
+ var _useEventCallback = require("@base-ui-components/utils/useEventCallback");
14
+ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
14
15
  var _internals = require("@mui/x-tree-view/internals");
15
16
  var _utils = require("@mui/x-tree-view/utils");
16
17
  var _utils2 = require("./utils");
@@ -18,214 +19,152 @@ const INITIAL_STATE = {
18
19
  loading: {},
19
20
  errors: {}
20
21
  };
21
- const noopCache = {
22
- clear: () => {},
23
- get: () => undefined,
24
- set: () => {}
25
- };
26
- function getCache(cacheProp) {
27
- if (cacheProp === null) {
28
- return noopCache;
29
- }
30
- return cacheProp ?? new _utils.DataSourceCacheDefault({});
31
- }
32
22
  const useTreeViewLazyLoading = ({
33
23
  instance,
34
24
  params,
35
25
  store
36
26
  }) => {
37
- const isLazyLoadingEnabled = !!params.dataSource;
38
- const firstRenderRef = React.useRef(true);
39
- const nestedDataManager = (0, _useLazyRef.default)(() => new _utils2.NestedDataManager(instance)).current;
40
- const cacheRef = (0, _useLazyRef.default)(() => getCache(params.dataSourceCache));
41
- const setDataSourceLoading = (0, _useEventCallback.default)((itemId, isLoading) => {
42
- if (!isLazyLoadingEnabled) {
27
+ const nestedDataManager = (0, _useRefWithInit.useRefWithInit)(() => new _utils2.NestedDataManager(instance)).current;
28
+ const cache = (0, _useRefWithInit.useRefWithInit)(() => params.dataSourceCache ?? new _utils.DataSourceCacheDefault({})).current;
29
+ const setDataSourceLoading = (0, _useEventCallback.useEventCallback)((itemId, isLoading) => {
30
+ if (!params.dataSource) {
43
31
  return;
44
32
  }
45
- if (_internals.lazyLoadingSelectors.isItemLoading(store.state, itemId) === isLoading) {
33
+ const itemIdWithDefault = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
34
+ if (_internals.lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
46
35
  return;
47
36
  }
48
- const loadingState = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.loading);
37
+ const loading = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.loading);
49
38
  if (isLoading === false) {
50
- delete loadingState[itemId];
39
+ delete loading[itemIdWithDefault];
51
40
  } else {
52
- loadingState[itemId] = isLoading;
41
+ loading[itemIdWithDefault] = isLoading;
53
42
  }
54
43
  store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
55
44
  dataSource: (0, _extends2.default)({}, store.state.lazyLoading.dataSource, {
56
- loading: loadingState
45
+ loading
57
46
  })
58
47
  }));
59
48
  });
60
- const setDataSourceError = (itemId, error) => {
61
- if (!isLazyLoadingEnabled) {
49
+ const setDataSourceError = (0, _useEventCallback.useEventCallback)((itemId, error) => {
50
+ if (!params.dataSource) {
51
+ return;
52
+ }
53
+ if (_internals.lazyLoadingSelectors.itemError(store.state, itemId) === error) {
62
54
  return;
63
55
  }
56
+ const stateId = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
64
57
  const errors = (0, _extends2.default)({}, store.state.lazyLoading.dataSource.errors);
65
- if (error === null && errors[itemId] !== undefined) {
66
- delete errors[itemId];
58
+ if (error === null && errors[stateId] !== undefined) {
59
+ delete errors[stateId];
67
60
  } else {
68
- errors[itemId] = error;
61
+ errors[stateId] = error;
69
62
  }
70
- errors[itemId] = error;
71
63
  store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
72
64
  dataSource: (0, _extends2.default)({}, store.state.lazyLoading.dataSource, {
73
65
  errors
74
66
  })
75
67
  }));
76
- };
77
- const resetDataSourceState = (0, _useEventCallback.default)(() => {
78
- if (!isLazyLoadingEnabled) {
79
- return;
80
- }
81
- store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
82
- dataSource: INITIAL_STATE
83
- }));
84
68
  });
85
- const fetchItems = (0, _useEventCallback.default)(async parentIds => {
86
- if (!isLazyLoadingEnabled) {
87
- return;
88
- }
89
- const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
90
- const getTreeItems = params.dataSource?.getTreeItems;
91
- if (!getTreeItems) {
92
- return;
93
- }
94
- if (parentIds) {
95
- await nestedDataManager.queue(parentIds);
96
- return;
97
- }
98
- nestedDataManager.clear();
99
- // handle loading here
100
- instance.setTreeViewLoading(true);
101
- // reset the state if we are refetching the first visible items
102
- if (_internals.lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
103
- resetDataSourceState();
104
- }
105
- // handle caching here
106
- const cachedData = cacheRef.current.get('root');
107
- if (cachedData !== undefined && cachedData !== -1) {
108
- instance.addItems({
109
- items: cachedData,
110
- depth: 0,
111
- getChildrenCount
112
- });
113
- instance.setTreeViewLoading(false);
114
- return;
115
- }
116
- try {
117
- const getTreeItemsResponse = await getTreeItems();
118
-
119
- // set caching
120
- cacheRef.current.set('root', getTreeItemsResponse);
121
-
122
- // update the items in the state
123
- instance.addItems({
124
- items: getTreeItemsResponse,
125
- depth: 0,
126
- getChildrenCount
127
- });
128
- } catch (error) {
129
- // set the items to empty
130
- instance.addItems({
131
- items: [],
132
- depth: 0,
133
- getChildrenCount
134
- });
135
- // set error state
136
- instance.setTreeViewError(error);
137
- } finally {
138
- // set loading state
139
- instance.setTreeViewLoading(false);
140
- }
141
- });
142
- const fetchItemChildren = (0, _useEventCallback.default)(async ({
69
+ const fetchItems = (0, _useEventCallback.useEventCallback)(async parentIds => nestedDataManager.queue(parentIds));
70
+ const fetchItemChildren = (0, _useEventCallback.useEventCallback)(async ({
143
71
  itemId,
144
72
  forceRefresh
145
73
  }) => {
146
- if (!isLazyLoadingEnabled) {
74
+ if (!params.dataSource) {
147
75
  return;
148
76
  }
149
- const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
150
- const getTreeItems = params.dataSource?.getTreeItems;
151
- if (!getTreeItems) {
77
+ const {
78
+ getChildrenCount,
79
+ getTreeItems
80
+ } = params.dataSource;
81
+ // clear the request if the item is not in the tree
82
+ if (itemId != null && !_internals.itemsSelectors.itemMeta(store.state, itemId)) {
152
83
  nestedDataManager.clearPendingRequest(itemId);
153
84
  return;
154
85
  }
155
- const parent = _internals.itemsSelectors.itemMeta(store.state, itemId);
156
- if (!parent) {
157
- nestedDataManager.clearPendingRequest(itemId);
158
- return;
159
- }
160
- const depth = parent.depth ? parent.depth + 1 : 1;
161
86
 
162
- // handle loading here
163
- instance.setDataSourceLoading(itemId, true);
164
-
165
- // handle caching here
87
+ // reset the state if we are fetching the root items
88
+ if (itemId == null && _internals.lazyLoadingSelectors.dataSource(store.state) !== INITIAL_STATE) {
89
+ store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
90
+ dataSource: INITIAL_STATE
91
+ }));
92
+ }
93
+ const cacheKey = itemId ?? _internals.TREE_VIEW_ROOT_PARENT_ID;
166
94
  if (!forceRefresh) {
167
- const cachedData = cacheRef.current.get(itemId);
95
+ // reads from the value from the cache
96
+ const cachedData = cache.get(cacheKey);
168
97
  if (cachedData !== undefined && cachedData !== -1) {
169
- nestedDataManager.setRequestSettled(itemId);
170
- instance.addItems({
98
+ if (itemId != null) {
99
+ nestedDataManager.setRequestSettled(itemId);
100
+ }
101
+ instance.setItemChildren({
171
102
  items: cachedData,
172
- depth,
173
103
  parentId: itemId,
174
104
  getChildrenCount
175
105
  });
176
106
  instance.setDataSourceLoading(itemId, false);
177
107
  return;
178
108
  }
109
+
110
+ // set the item loading status to true
111
+ instance.setDataSourceLoading(itemId, true);
179
112
  if (cachedData === -1) {
180
113
  instance.removeChildren(itemId);
181
114
  }
182
115
  }
183
- if (_internals.lazyLoadingSelectors.itemHasError(store.state, itemId)) {
116
+
117
+ // reset existing error if any
118
+ if (_internals.lazyLoadingSelectors.itemError(store.state, itemId)) {
184
119
  instance.setDataSourceError(itemId, null);
185
120
  }
186
121
  try {
187
- const getTreeItemsResponse = await getTreeItems(itemId);
188
- nestedDataManager.setRequestSettled(itemId);
189
-
190
- // set caching
191
- cacheRef.current.set(itemId, getTreeItemsResponse);
192
- // update the items in the state
193
- if (forceRefresh) {
194
- instance.removeChildren(itemId);
122
+ let response;
123
+ if (itemId == null) {
124
+ response = await getTreeItems();
125
+ } else {
126
+ response = await getTreeItems(itemId);
127
+ nestedDataManager.setRequestSettled(itemId);
195
128
  }
196
- instance.addItems({
197
- items: getTreeItemsResponse,
198
- depth,
129
+ // save the response in the cache
130
+ cache.set(cacheKey, response);
131
+ // update the items in the state
132
+ instance.setItemChildren({
133
+ items: response,
199
134
  parentId: itemId,
200
135
  getChildrenCount
201
136
  });
202
137
  } catch (error) {
203
138
  const childrenFetchError = error;
204
- // handle errors here
139
+ // set the item error in the state
205
140
  instance.setDataSourceError(itemId, childrenFetchError);
206
- instance.removeChildren(itemId);
141
+ if (forceRefresh) {
142
+ instance.removeChildren(itemId);
143
+ }
207
144
  } finally {
208
- // unset loading
145
+ // set the item loading status to false
209
146
  instance.setDataSourceLoading(itemId, false);
210
- nestedDataManager.setRequestSettled(itemId);
147
+ if (itemId != null) {
148
+ nestedDataManager.setRequestSettled(itemId);
149
+ }
211
150
  }
212
151
  });
213
- const updateItemChildren = (0, _useEventCallback.default)(itemId => {
152
+ const updateItemChildren = (0, _useEventCallback.useEventCallback)(itemId => {
214
153
  return instance.fetchItemChildren({
215
154
  itemId,
216
155
  forceRefresh: true
217
156
  });
218
157
  });
219
158
  (0, _internals.useInstanceEventHandler)(instance, 'beforeItemToggleExpansion', async eventParameters => {
220
- if (!isLazyLoadingEnabled || !eventParameters.shouldBeExpanded) {
159
+ if (!params.dataSource || !eventParameters.shouldBeExpanded) {
221
160
  return;
222
161
  }
223
- // prevent the default expansion behavior
224
162
 
163
+ // prevent the default expansion behavior
225
164
  eventParameters.isExpansionPrevented = true;
226
165
  await instance.fetchItems([eventParameters.itemId]);
227
- const itemHasError = _internals.lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
228
- if (!itemHasError) {
166
+ const hasError = _internals.lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
167
+ if (!hasError) {
229
168
  instance.applyItemExpansion({
230
169
  itemId: eventParameters.itemId,
231
170
  shouldBeExpanded: true,
@@ -242,29 +181,12 @@ const useTreeViewLazyLoading = ({
242
181
  }
243
182
  }
244
183
  });
245
- React.useEffect(() => {
246
- if (isLazyLoadingEnabled && firstRenderRef.current) {
247
- store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
248
- enabled: true
249
- }));
250
- if (params.items.length) {
251
- const getChildrenCount = params.dataSource?.getChildrenCount || (() => 0);
252
- instance.addItems({
253
- items: params.items,
254
- depth: 0,
255
- getChildrenCount
256
- });
257
- } else {
258
- const expandedItems = _internals.expansionSelectors.expandedItemsRaw(store.state);
259
- if (expandedItems.length > 0) {
260
- instance.resetItemExpansion();
261
- }
262
- instance.fetchItems();
263
- }
264
- firstRenderRef.current = false;
265
- }
266
- }, [instance, params.items, params.dataSource, isLazyLoadingEnabled, store]);
267
- if (isLazyLoadingEnabled) {
184
+ useLazyLoadOnMount({
185
+ instance,
186
+ params,
187
+ store
188
+ });
189
+ if (params.dataSource) {
268
190
  instance.preventItemUpdates();
269
191
  }
270
192
  return {
@@ -290,4 +212,48 @@ useTreeViewLazyLoading.getInitialState = () => ({
290
212
  useTreeViewLazyLoading.params = {
291
213
  dataSource: true,
292
214
  dataSourceCache: true
293
- };
215
+ };
216
+ function useLazyLoadOnMount({
217
+ instance,
218
+ params,
219
+ store
220
+ }) {
221
+ const firstRenderRef = React.useRef(true);
222
+ (0, _useEnhancedEffect.default)(() => {
223
+ if (!params.dataSource || !firstRenderRef.current) {
224
+ return;
225
+ }
226
+ firstRenderRef.current = false;
227
+ store.set('lazyLoading', (0, _extends2.default)({}, store.state.lazyLoading, {
228
+ enabled: true
229
+ }));
230
+ async function fetchAllExpandedItems() {
231
+ async function fetchChildrenIfExpanded(parentIds) {
232
+ const expandedItems = parentIds.filter(id => _internals.expansionSelectors.isItemExpanded(store.state, id));
233
+ if (expandedItems.length > 0) {
234
+ const itemsToLazyLoad = expandedItems.filter(id => _internals.itemsSelectors.itemOrderedChildrenIds(store.state, id).length === 0);
235
+ if (itemsToLazyLoad.length > 0) {
236
+ await instance.fetchItems(itemsToLazyLoad);
237
+ }
238
+ const childrenIds = expandedItems.flatMap(id => _internals.itemsSelectors.itemOrderedChildrenIds(store.state, id));
239
+ await fetchChildrenIfExpanded(childrenIds);
240
+ }
241
+ }
242
+ if (params.items.length) {
243
+ const newlyExpandableItems = getExpandableItemsFromDataSource(store, params.dataSource);
244
+ if (newlyExpandableItems.length > 0) {
245
+ instance.addExpandableItems(newlyExpandableItems);
246
+ }
247
+ } else {
248
+ await instance.fetchItemChildren({
249
+ itemId: null
250
+ });
251
+ }
252
+ await fetchChildrenIfExpanded(_internals.itemsSelectors.itemOrderedChildrenIds(store.state, null));
253
+ }
254
+ fetchAllExpandedItems();
255
+ }, [instance, params.items, params.dataSource, store]);
256
+ }
257
+ function getExpandableItemsFromDataSource(store, dataSource) {
258
+ return Object.values(store.state.items.itemMetaLookup).filter(itemMeta => !itemMeta.expandable && dataSource.getChildrenCount(store.state.items.itemModelLookup[itemMeta.id]) > 0).map(item => item.id);
259
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-tree-view-pro",
3
- "version": "8.11.3",
3
+ "version": "8.13.0",
4
4
  "author": "MUI Team",
5
5
  "description": "The Pro plan edition of the MUI X Tree View components.",
6
6
  "license": "SEE LICENSE IN LICENSE",
@@ -31,7 +31,7 @@
31
31
  "directory": "packages/x-tree-view-pro"
32
32
  },
33
33
  "dependencies": {
34
- "@babel/runtime": "^7.28.2",
34
+ "@babel/runtime": "^7.28.4",
35
35
  "@base-ui-components/utils": "0.1.1",
36
36
  "@mui/utils": "^7.3.2",
37
37
  "@types/react-transition-group": "^4.4.12",
@@ -40,9 +40,9 @@
40
40
  "react-transition-group": "^4.4.5",
41
41
  "reselect": "^5.1.1",
42
42
  "use-sync-external-store": "^1.5.0",
43
- "@mui/x-internals": "8.11.3",
44
- "@mui/x-license": "8.11.3",
45
- "@mui/x-tree-view": "8.11.3"
43
+ "@mui/x-internals": "8.12.0",
44
+ "@mui/x-license": "8.12.0",
45
+ "@mui/x-tree-view": "8.13.0"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "@emotion/react": "^11.9.0",