@mui/x-tree-view-pro 8.17.0 → 8.19.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.
- package/CHANGELOG.md +213 -0
- package/RichTreeViewPro/RichTreeViewPro.js +21 -21
- package/esm/RichTreeViewPro/RichTreeViewPro.js +21 -21
- package/esm/index.js +1 -1
- package/esm/internals/plugins/useTreeViewItemsReordering/itemPlugin.d.ts +23 -0
- package/esm/internals/plugins/useTreeViewItemsReordering/{useTreeViewItemsReordering.itemPlugin.js → itemPlugin.js} +6 -9
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +1 -12
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +5 -4
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +2 -5
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +20 -44
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts +2 -2
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +1 -1
- package/index.js +1 -1
- package/internals/plugins/useTreeViewItemsReordering/itemPlugin.d.ts +23 -0
- package/internals/plugins/useTreeViewItemsReordering/{useTreeViewItemsReordering.itemPlugin.js → itemPlugin.js} +6 -9
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +6 -17
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +5 -4
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +2 -5
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +20 -44
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts +2 -2
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +1 -1
- package/package.json +5 -5
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.d.ts +0 -3
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.d.ts +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,219 @@
|
|
|
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.19.0
|
|
9
|
+
|
|
10
|
+
_Nov 20, 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
|
+
- 🔎 Add pan on `wheel` to the charts zoom
|
|
15
|
+
- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
|
|
16
|
+
- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
|
|
17
|
+
- 🐞 Bugfixes
|
|
18
|
+
- 📚 Documentation improvements
|
|
19
|
+
|
|
20
|
+
Special thanks go out to these community members for their valuable contributions:
|
|
21
|
+
@lauri865, @noobyogi0010, @sai6855
|
|
22
|
+
|
|
23
|
+
The following team members contributed to this release:
|
|
24
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
|
|
25
|
+
|
|
26
|
+
### Data Grid
|
|
27
|
+
|
|
28
|
+
#### `@mui/x-data-grid@8.19.0`
|
|
29
|
+
|
|
30
|
+
- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
|
|
31
|
+
- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
|
|
32
|
+
- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
|
|
33
|
+
- [DataGrid] Fix failing tests (#20332) @cherniavskii
|
|
34
|
+
- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
|
|
35
|
+
- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
|
|
36
|
+
- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
|
|
37
|
+
|
|
38
|
+
#### `@mui/x-data-grid-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
39
|
+
|
|
40
|
+
Same changes as in `@mui/x-data-grid@8.19.0`.
|
|
41
|
+
|
|
42
|
+
#### `@mui/x-data-grid-premium@8.19.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
43
|
+
|
|
44
|
+
Same changes as in `@mui/x-data-grid-pro@8.19.0`, plus:
|
|
45
|
+
|
|
46
|
+
- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
|
|
47
|
+
- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
|
|
48
|
+
|
|
49
|
+
### Date and Time Pickers
|
|
50
|
+
|
|
51
|
+
#### `@mui/x-date-pickers@8.19.0`
|
|
52
|
+
|
|
53
|
+
- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
|
|
54
|
+
|
|
55
|
+
#### `@mui/x-date-pickers-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
56
|
+
|
|
57
|
+
Same changes as in `@mui/x-date-pickers@8.19.0`.
|
|
58
|
+
|
|
59
|
+
### Charts
|
|
60
|
+
|
|
61
|
+
#### `@mui/x-charts@8.19.0`
|
|
62
|
+
|
|
63
|
+
- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
|
|
64
|
+
- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
|
|
65
|
+
- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
|
|
66
|
+
- [charts] Memoize series selectors (#20326) @JCQuintas
|
|
67
|
+
- [charts] Relax dataset type (#20294) @bernardobelchior
|
|
68
|
+
- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
|
|
69
|
+
- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
|
|
70
|
+
- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
|
|
71
|
+
- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
|
|
72
|
+
|
|
73
|
+
#### `@mui/x-charts-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
74
|
+
|
|
75
|
+
Same changes as in `@mui/x-charts@8.19.0`, plus:
|
|
76
|
+
|
|
77
|
+
- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
|
|
78
|
+
- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
|
|
79
|
+
|
|
80
|
+
#### `@mui/x-charts-premium@8.19.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
81
|
+
|
|
82
|
+
Same changes as in `@mui/x-charts-pro@8.19.0`.
|
|
83
|
+
|
|
84
|
+
### Tree View
|
|
85
|
+
|
|
86
|
+
#### `@mui/x-tree-view@8.19.0`
|
|
87
|
+
|
|
88
|
+
- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
|
|
89
|
+
- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
|
|
90
|
+
|
|
91
|
+
#### `@mui/x-tree-view-pro@8.19.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
92
|
+
|
|
93
|
+
Same changes as in `@mui/x-tree-view@8.19.0`.
|
|
94
|
+
|
|
95
|
+
### Codemod
|
|
96
|
+
|
|
97
|
+
#### `@mui/x-codemod@8.19.0`
|
|
98
|
+
|
|
99
|
+
Internal changes.
|
|
100
|
+
|
|
101
|
+
### Docs
|
|
102
|
+
|
|
103
|
+
- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
|
|
104
|
+
- [docs] Fix Autosizing documentation (#20348) @siriwatknp
|
|
105
|
+
- [docs] Fix separator opacity in demo (#20293) @sai6855
|
|
106
|
+
- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
|
|
107
|
+
|
|
108
|
+
### Core
|
|
109
|
+
|
|
110
|
+
- [code-infra] Add new broken links checker (#20120) @Janpot
|
|
111
|
+
- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
|
|
112
|
+
- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
|
|
113
|
+
- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
|
|
114
|
+
- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
|
|
115
|
+
|
|
116
|
+
### Miscellaneous
|
|
117
|
+
|
|
118
|
+
- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
|
|
119
|
+
- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
|
|
120
|
+
|
|
121
|
+
## 8.18.0
|
|
122
|
+
|
|
123
|
+
<!-- generated comparing v8.17.0..master -->
|
|
124
|
+
|
|
125
|
+
_Nov 13, 2025_
|
|
126
|
+
|
|
127
|
+
We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
|
|
128
|
+
|
|
129
|
+
- Add `barLabelPlacement` property to customize the bar label position in bar charts, enabling labels to be placed above bars.
|
|
130
|
+
|
|
131
|
+

|
|
132
|
+
|
|
133
|
+
- Add `source` property to the date/time picker lifecycle and event handler context, enabling clearer differentiation between changes initiated by the picker UI and those from direct field input.
|
|
134
|
+
- 🐞 Bugfixes
|
|
135
|
+
- 📚 Documentation improvements
|
|
136
|
+
|
|
137
|
+
Special thanks go out to these community members for their valuable contributions:
|
|
138
|
+
@htollefsen, @sai6855, @Sigdriv
|
|
139
|
+
|
|
140
|
+
The following team members contributed to this release:
|
|
141
|
+
@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @JCQuintas, @michelengelen, @noraleonte, @prakhargupta1, @rita-codes, @siriwatknp
|
|
142
|
+
|
|
143
|
+
### Data Grid
|
|
144
|
+
|
|
145
|
+
#### `@mui/x-data-grid@8.18.0`
|
|
146
|
+
|
|
147
|
+
- [DataGrid] Allow default event in the column action cell item click event handler (#20272) @arminmeh
|
|
148
|
+
- [DataGrid] Remove unnecessary generic from `useGridApiRef` (#20277) @cherniavskii
|
|
149
|
+
|
|
150
|
+
#### `@mui/x-data-grid-pro@8.18.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
151
|
+
|
|
152
|
+
Same changes as in `@mui/x-data-grid@8.18.0`.
|
|
153
|
+
|
|
154
|
+
#### `@mui/x-data-grid-premium@8.18.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
155
|
+
|
|
156
|
+
Same changes as in `@mui/x-data-grid-pro@8.18.0`, plus:
|
|
157
|
+
|
|
158
|
+
- [DataGridPremium] Return the correct `cellParams` value from the aggregation cells (#20224) @arminmeh
|
|
159
|
+
|
|
160
|
+
### Date and Time Pickers
|
|
161
|
+
|
|
162
|
+
#### `@mui/x-date-pickers@8.18.0`
|
|
163
|
+
|
|
164
|
+
- [pickers] Keep invalid date state consistent (#20040) @michelengelen
|
|
165
|
+
- [pickers] Adds new `source` property to `onChange` and `onAccept` context object (#20234) @michelengelen
|
|
166
|
+
|
|
167
|
+
#### `@mui/x-date-pickers-pro@8.18.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
168
|
+
|
|
169
|
+
Same changes as in `@mui/x-date-pickers@8.18.0`.
|
|
170
|
+
|
|
171
|
+
### Charts
|
|
172
|
+
|
|
173
|
+
#### `@mui/x-charts@8.18.0`
|
|
174
|
+
|
|
175
|
+
- [charts] Add prop for positioning a bar label (#20194) @Sigdriv
|
|
176
|
+
- [charts] Fix applying dark mode styles in `ChartAxisZoomSliderThumb` (#20232) @sai6855
|
|
177
|
+
|
|
178
|
+
#### `@mui/x-charts-pro@8.18.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
179
|
+
|
|
180
|
+
Same changes as in `@mui/x-charts@8.18.0`, plus:
|
|
181
|
+
|
|
182
|
+
- [charts-pro] Allow specifying Content Security Policy nonce on export (#20053) @bernardobelchior
|
|
183
|
+
- [charts-pro] Fix applying dark mode styles to slider (#20220) @sai6855
|
|
184
|
+
- [charts-pro] Sankey should respect node order (#20065) @JCQuintas
|
|
185
|
+
|
|
186
|
+
#### `@mui/x-charts-premium@8.18.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
187
|
+
|
|
188
|
+
Same changes as in `@mui/x-charts-pro@8.18.0`.
|
|
189
|
+
|
|
190
|
+
### Tree View
|
|
191
|
+
|
|
192
|
+
#### `@mui/x-tree-view@8.18.0`
|
|
193
|
+
|
|
194
|
+
- [tree view] Prepare tests for the new store structure (#20225) @flaviendelangle
|
|
195
|
+
- [tree view] Prepare the item plugin files for the store migration (#20240) @flaviendelangle
|
|
196
|
+
- [tree view] Use `TreeItemId` type instead of raw string (#20233) @flaviendelangle
|
|
197
|
+
|
|
198
|
+
#### `@mui/x-tree-view-pro@8.18.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
199
|
+
|
|
200
|
+
Same changes as in `@mui/x-tree-view@8.18.0`.
|
|
201
|
+
|
|
202
|
+
### Codemod
|
|
203
|
+
|
|
204
|
+
#### `@mui/x-codemod@8.18.0`
|
|
205
|
+
|
|
206
|
+
Internal changes.
|
|
207
|
+
|
|
208
|
+
### Docs
|
|
209
|
+
|
|
210
|
+
- [charts] Add a demo for a custom tick label (#20073) @prakhargupta1
|
|
211
|
+
- [charts] Create `useAxes()` hook documentation page (#20229) @JCQuintas
|
|
212
|
+
- [charts] Fix logo alignment (#20228) @JCQuintas
|
|
213
|
+
- [charts] Fixes typo in import example (#20236) @htollefsen
|
|
214
|
+
- [Data Grid] Add recipe for cursor pagination with data source (#19700) @siriwatknp
|
|
215
|
+
- [Data Grid] Add a demo for pinned rows aggregation (#20198) @cherniavskii
|
|
216
|
+
|
|
217
|
+
### Core
|
|
218
|
+
|
|
219
|
+
- [docs-infra] Use deployment config from docs-infra package (#20243) @brijeshb42
|
|
220
|
+
|
|
8
221
|
## 8.17.0
|
|
9
222
|
|
|
10
223
|
_Nov 5, 2025_
|
|
@@ -52,7 +52,7 @@ const RichTreeViewProRoot = exports.RichTreeViewProRoot = (0, _zeroStyled.styled
|
|
|
52
52
|
outline: 0,
|
|
53
53
|
position: 'relative'
|
|
54
54
|
});
|
|
55
|
-
const releaseInfo = "
|
|
55
|
+
const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
|
|
56
56
|
|
|
57
57
|
/**
|
|
58
58
|
*
|
|
@@ -141,15 +141,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
141
141
|
}),
|
|
142
142
|
/**
|
|
143
143
|
* Used to determine if a given item can move to some new position.
|
|
144
|
-
* @param {object}
|
|
145
|
-
* @param {
|
|
146
|
-
* @param {TreeViewItemReorderPosition}
|
|
147
|
-
* @param {TreeViewItemReorderPosition}
|
|
144
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
145
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
|
|
146
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
147
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
148
148
|
* @returns {boolean} `true` if the item can move to the new position.
|
|
149
149
|
*/
|
|
150
150
|
canMoveItemToNewPosition: _propTypes.default.func,
|
|
151
151
|
/**
|
|
152
|
-
*
|
|
152
|
+
* Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
|
|
153
153
|
* @default false
|
|
154
154
|
*/
|
|
155
155
|
checkboxSelection: _propTypes.default.bool,
|
|
@@ -186,12 +186,12 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
186
186
|
*/
|
|
187
187
|
defaultSelectedItems: _propTypes.default.any,
|
|
188
188
|
/**
|
|
189
|
-
*
|
|
189
|
+
* Whether the items should be focusable when disabled.
|
|
190
190
|
* @default false
|
|
191
191
|
*/
|
|
192
192
|
disabledItemsFocusable: _propTypes.default.bool,
|
|
193
193
|
/**
|
|
194
|
-
*
|
|
194
|
+
* Whether selection is disabled.
|
|
195
195
|
* @default false
|
|
196
196
|
*/
|
|
197
197
|
disableSelection: _propTypes.default.bool,
|
|
@@ -219,7 +219,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
219
219
|
*
|
|
220
220
|
* @template R
|
|
221
221
|
* @param {R} item The item to check.
|
|
222
|
-
* @returns {
|
|
222
|
+
* @returns {TreeViewItemId} The id of the item.
|
|
223
223
|
* @default (item) => item.id
|
|
224
224
|
*/
|
|
225
225
|
getItemId: _propTypes.default.func,
|
|
@@ -254,7 +254,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
254
254
|
isItemEditable: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
|
|
255
255
|
/**
|
|
256
256
|
* Determine if a given item can be reordered.
|
|
257
|
-
* @param {
|
|
257
|
+
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
258
258
|
* @returns {boolean} `true` if the item can be reordered.
|
|
259
259
|
* @default () => true
|
|
260
260
|
*/
|
|
@@ -272,33 +272,33 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
272
272
|
*/
|
|
273
273
|
itemsReordering: _propTypes.default.bool,
|
|
274
274
|
/**
|
|
275
|
-
*
|
|
275
|
+
* Whether multiple items can be selected.
|
|
276
276
|
* @default false
|
|
277
277
|
*/
|
|
278
278
|
multiSelect: _propTypes.default.bool,
|
|
279
279
|
/**
|
|
280
280
|
* Callback fired when Tree Items are expanded/collapsed.
|
|
281
281
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
|
|
282
|
-
* @param {
|
|
282
|
+
* @param {TreeViewItemId[]} itemIds The ids of the expanded items.
|
|
283
283
|
*/
|
|
284
284
|
onExpandedItemsChange: _propTypes.default.func,
|
|
285
285
|
/**
|
|
286
286
|
* Callback fired when the `content` slot of a given Tree Item is clicked.
|
|
287
287
|
* @param {React.MouseEvent} event The DOM event that triggered the change.
|
|
288
|
-
* @param {
|
|
288
|
+
* @param {TreeViewItemId} itemId The id of the focused item.
|
|
289
289
|
*/
|
|
290
290
|
onItemClick: _propTypes.default.func,
|
|
291
291
|
/**
|
|
292
292
|
* Callback fired when a Tree Item is expanded or collapsed.
|
|
293
293
|
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
|
|
294
|
-
* @param {
|
|
294
|
+
* @param {TreeViewItemId} itemId The itemId of the modified item.
|
|
295
295
|
* @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
|
|
296
296
|
*/
|
|
297
297
|
onItemExpansionToggle: _propTypes.default.func,
|
|
298
298
|
/**
|
|
299
299
|
* Callback fired when a given Tree Item is focused.
|
|
300
300
|
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
|
|
301
|
-
* @param {
|
|
301
|
+
* @param {TreeViewItemId} itemId The id of the focused item.
|
|
302
302
|
*/
|
|
303
303
|
onItemFocus: _propTypes.default.func,
|
|
304
304
|
/**
|
|
@@ -309,23 +309,23 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
309
309
|
onItemLabelChange: _propTypes.default.func,
|
|
310
310
|
/**
|
|
311
311
|
* Callback fired when a Tree Item is moved in the tree.
|
|
312
|
-
* @param {object}
|
|
313
|
-
* @param {
|
|
314
|
-
* @param {TreeViewItemReorderPosition}
|
|
315
|
-
* @param {TreeViewItemReorderPosition}
|
|
312
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
313
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item moved.
|
|
314
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
315
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
316
316
|
*/
|
|
317
317
|
onItemPositionChange: _propTypes.default.func,
|
|
318
318
|
/**
|
|
319
319
|
* Callback fired when a Tree Item is selected or deselected.
|
|
320
320
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
|
|
321
|
-
* @param {
|
|
321
|
+
* @param {TreeViewItemId} itemId The itemId of the modified item.
|
|
322
322
|
* @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
|
|
323
323
|
*/
|
|
324
324
|
onItemSelectionToggle: _propTypes.default.func,
|
|
325
325
|
/**
|
|
326
326
|
* Callback fired when Tree Items are selected/deselected.
|
|
327
327
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
|
|
328
|
-
* @param {
|
|
328
|
+
* @param {TreeViewItemId[] | TreeViewItemId} itemIds The ids of the selected items.
|
|
329
329
|
* When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
|
|
330
330
|
*/
|
|
331
331
|
onSelectedItemsChange: _propTypes.default.func,
|
|
@@ -45,7 +45,7 @@ export const RichTreeViewProRoot = styled('ul', {
|
|
|
45
45
|
outline: 0,
|
|
46
46
|
position: 'relative'
|
|
47
47
|
});
|
|
48
|
-
const releaseInfo = "
|
|
48
|
+
const releaseInfo = "MTc2MzU5NjgwMDAwMA==";
|
|
49
49
|
|
|
50
50
|
/**
|
|
51
51
|
*
|
|
@@ -134,15 +134,15 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
134
134
|
}),
|
|
135
135
|
/**
|
|
136
136
|
* Used to determine if a given item can move to some new position.
|
|
137
|
-
* @param {object}
|
|
138
|
-
* @param {
|
|
139
|
-
* @param {TreeViewItemReorderPosition}
|
|
140
|
-
* @param {TreeViewItemReorderPosition}
|
|
137
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
138
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
|
|
139
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
140
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
141
141
|
* @returns {boolean} `true` if the item can move to the new position.
|
|
142
142
|
*/
|
|
143
143
|
canMoveItemToNewPosition: PropTypes.func,
|
|
144
144
|
/**
|
|
145
|
-
*
|
|
145
|
+
* Whether the Tree View renders a checkbox at the left of its label that allows selecting it.
|
|
146
146
|
* @default false
|
|
147
147
|
*/
|
|
148
148
|
checkboxSelection: PropTypes.bool,
|
|
@@ -179,12 +179,12 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
179
179
|
*/
|
|
180
180
|
defaultSelectedItems: PropTypes.any,
|
|
181
181
|
/**
|
|
182
|
-
*
|
|
182
|
+
* Whether the items should be focusable when disabled.
|
|
183
183
|
* @default false
|
|
184
184
|
*/
|
|
185
185
|
disabledItemsFocusable: PropTypes.bool,
|
|
186
186
|
/**
|
|
187
|
-
*
|
|
187
|
+
* Whether selection is disabled.
|
|
188
188
|
* @default false
|
|
189
189
|
*/
|
|
190
190
|
disableSelection: PropTypes.bool,
|
|
@@ -212,7 +212,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
212
212
|
*
|
|
213
213
|
* @template R
|
|
214
214
|
* @param {R} item The item to check.
|
|
215
|
-
* @returns {
|
|
215
|
+
* @returns {TreeViewItemId} The id of the item.
|
|
216
216
|
* @default (item) => item.id
|
|
217
217
|
*/
|
|
218
218
|
getItemId: PropTypes.func,
|
|
@@ -247,7 +247,7 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
247
247
|
isItemEditable: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
|
|
248
248
|
/**
|
|
249
249
|
* Determine if a given item can be reordered.
|
|
250
|
-
* @param {
|
|
250
|
+
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
251
251
|
* @returns {boolean} `true` if the item can be reordered.
|
|
252
252
|
* @default () => true
|
|
253
253
|
*/
|
|
@@ -265,33 +265,33 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
265
265
|
*/
|
|
266
266
|
itemsReordering: PropTypes.bool,
|
|
267
267
|
/**
|
|
268
|
-
*
|
|
268
|
+
* Whether multiple items can be selected.
|
|
269
269
|
* @default false
|
|
270
270
|
*/
|
|
271
271
|
multiSelect: PropTypes.bool,
|
|
272
272
|
/**
|
|
273
273
|
* Callback fired when Tree Items are expanded/collapsed.
|
|
274
274
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
|
|
275
|
-
* @param {
|
|
275
|
+
* @param {TreeViewItemId[]} itemIds The ids of the expanded items.
|
|
276
276
|
*/
|
|
277
277
|
onExpandedItemsChange: PropTypes.func,
|
|
278
278
|
/**
|
|
279
279
|
* Callback fired when the `content` slot of a given Tree Item is clicked.
|
|
280
280
|
* @param {React.MouseEvent} event The DOM event that triggered the change.
|
|
281
|
-
* @param {
|
|
281
|
+
* @param {TreeViewItemId} itemId The id of the focused item.
|
|
282
282
|
*/
|
|
283
283
|
onItemClick: PropTypes.func,
|
|
284
284
|
/**
|
|
285
285
|
* Callback fired when a Tree Item is expanded or collapsed.
|
|
286
286
|
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
|
|
287
|
-
* @param {
|
|
287
|
+
* @param {TreeViewItemId} itemId The itemId of the modified item.
|
|
288
288
|
* @param {boolean} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
|
|
289
289
|
*/
|
|
290
290
|
onItemExpansionToggle: PropTypes.func,
|
|
291
291
|
/**
|
|
292
292
|
* Callback fired when a given Tree Item is focused.
|
|
293
293
|
* @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event.
|
|
294
|
-
* @param {
|
|
294
|
+
* @param {TreeViewItemId} itemId The id of the focused item.
|
|
295
295
|
*/
|
|
296
296
|
onItemFocus: PropTypes.func,
|
|
297
297
|
/**
|
|
@@ -302,23 +302,23 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
302
302
|
onItemLabelChange: PropTypes.func,
|
|
303
303
|
/**
|
|
304
304
|
* Callback fired when a Tree Item is moved in the tree.
|
|
305
|
-
* @param {object}
|
|
306
|
-
* @param {
|
|
307
|
-
* @param {TreeViewItemReorderPosition}
|
|
308
|
-
* @param {TreeViewItemReorderPosition}
|
|
305
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
306
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item moved.
|
|
307
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
308
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
309
309
|
*/
|
|
310
310
|
onItemPositionChange: PropTypes.func,
|
|
311
311
|
/**
|
|
312
312
|
* Callback fired when a Tree Item is selected or deselected.
|
|
313
313
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
|
|
314
|
-
* @param {
|
|
314
|
+
* @param {TreeViewItemId} itemId The itemId of the modified item.
|
|
315
315
|
* @param {boolean} isSelected `true` if the item has just been selected, `false` if it has just been deselected.
|
|
316
316
|
*/
|
|
317
317
|
onItemSelectionToggle: PropTypes.func,
|
|
318
318
|
/**
|
|
319
319
|
* Callback fired when Tree Items are selected/deselected.
|
|
320
320
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemSelection()` method.
|
|
321
|
-
* @param {
|
|
321
|
+
* @param {TreeViewItemId[] | TreeViewItemId} itemIds The ids of the selected items.
|
|
322
322
|
* When `multiSelect` is `true`, this is an array of strings; when false (default) a string.
|
|
323
323
|
*/
|
|
324
324
|
onSelectedItemsChange: PropTypes.func,
|
package/esm/index.js
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TreeViewCancellableEventHandler } from '@mui/x-tree-view/models';
|
|
3
|
+
import { TreeViewItemPlugin } from '@mui/x-tree-view/internals';
|
|
4
|
+
import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
|
|
5
|
+
export declare const isAndroid: () => boolean;
|
|
6
|
+
export declare const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin;
|
|
7
|
+
interface UseTreeItemRootSlotPropsFromItemsReordering {
|
|
8
|
+
draggable?: true;
|
|
9
|
+
onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
10
|
+
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
11
|
+
onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
12
|
+
}
|
|
13
|
+
interface UseTreeItemContentSlotPropsFromItemsReordering {
|
|
14
|
+
onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
15
|
+
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
16
|
+
}
|
|
17
|
+
interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {}
|
|
18
|
+
declare module '@mui/x-tree-view/useTreeItem' {
|
|
19
|
+
interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {}
|
|
20
|
+
interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {}
|
|
21
|
+
interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {}
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -16,7 +16,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
16
16
|
const validActionsRef = React.useRef(null);
|
|
17
17
|
const draggedItemProperties = useStore(store, itemsReorderingSelectors.draggedItemProperties, itemId);
|
|
18
18
|
const canItemBeReordered = useStore(store, itemsReorderingSelectors.canItemBeReordered, itemId);
|
|
19
|
-
const
|
|
19
|
+
const isDragging = useStore(store, itemsReorderingSelectors.isDragging, itemId);
|
|
20
20
|
return {
|
|
21
21
|
propsEnhancers: {
|
|
22
22
|
root: ({
|
|
@@ -24,12 +24,9 @@ export const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
24
24
|
contentRefObject,
|
|
25
25
|
externalEventHandlers
|
|
26
26
|
}) => {
|
|
27
|
-
if (!canItemBeReordered) {
|
|
28
|
-
return {};
|
|
29
|
-
}
|
|
30
27
|
const handleDragStart = event => {
|
|
31
28
|
externalEventHandlers.onDragStart?.(event);
|
|
32
|
-
if (event.defaultMuiPrevented || event.defaultPrevented) {
|
|
29
|
+
if (!canItemBeReordered || event.defaultMuiPrevented || event.defaultPrevented) {
|
|
33
30
|
return;
|
|
34
31
|
}
|
|
35
32
|
|
|
@@ -75,7 +72,7 @@ export const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
75
72
|
instance.completeDraggingItem(itemId);
|
|
76
73
|
};
|
|
77
74
|
return {
|
|
78
|
-
draggable: true,
|
|
75
|
+
draggable: canItemBeReordered ? true : undefined,
|
|
79
76
|
onDragStart: handleDragStart,
|
|
80
77
|
onDragOver: handleRootDragOver,
|
|
81
78
|
onDragEnd: handleRootDragEnd
|
|
@@ -85,15 +82,15 @@ export const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
85
82
|
externalEventHandlers,
|
|
86
83
|
contentRefObject
|
|
87
84
|
}) => {
|
|
88
|
-
if (!
|
|
85
|
+
if (!isDragging) {
|
|
89
86
|
return {};
|
|
90
87
|
}
|
|
91
88
|
const handleDragOver = event => {
|
|
92
89
|
externalEventHandlers.onDragOver?.(event);
|
|
93
|
-
if (event.defaultMuiPrevented || validActionsRef.current == null) {
|
|
90
|
+
if (event.defaultMuiPrevented || validActionsRef.current == null || !contentRefObject.current) {
|
|
94
91
|
return;
|
|
95
92
|
}
|
|
96
|
-
const rect =
|
|
93
|
+
const rect = contentRefObject.current.getBoundingClientRect();
|
|
97
94
|
const y = event.clientY - rect.top;
|
|
98
95
|
const x = event.clientX - rect.left;
|
|
99
96
|
instance.setDragTargetItem({
|
|
@@ -3,22 +3,12 @@ import * as React from 'react';
|
|
|
3
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
|
-
import { useTreeViewItemsReorderingItemPlugin } from "./
|
|
6
|
+
import { useTreeViewItemsReorderingItemPlugin } from "./itemPlugin.js";
|
|
7
7
|
import { itemsReorderingSelectors } from "./useTreeViewItemsReordering.selectors.js";
|
|
8
8
|
export const useTreeViewItemsReordering = ({
|
|
9
9
|
params,
|
|
10
10
|
store
|
|
11
11
|
}) => {
|
|
12
|
-
const canItemBeDragged = React.useCallback(itemId => {
|
|
13
|
-
if (!params.itemsReordering) {
|
|
14
|
-
return false;
|
|
15
|
-
}
|
|
16
|
-
const isItemReorderable = params.isItemReorderable;
|
|
17
|
-
if (isItemReorderable) {
|
|
18
|
-
return isItemReorderable(itemId);
|
|
19
|
-
}
|
|
20
|
-
return true;
|
|
21
|
-
}, [params.itemsReordering, params.isItemReorderable]);
|
|
22
12
|
const getDroppingTargetValidActions = React.useCallback(itemId => {
|
|
23
13
|
const currentReorder = itemsReorderingSelectors.currentReorder(store.state);
|
|
24
14
|
if (!currentReorder) {
|
|
@@ -178,7 +168,6 @@ export const useTreeViewItemsReordering = ({
|
|
|
178
168
|
}, [store, params.itemsReordering, params.isItemReorderable]);
|
|
179
169
|
return {
|
|
180
170
|
instance: {
|
|
181
|
-
canItemBeDragged,
|
|
182
171
|
getDroppingTargetValidActions,
|
|
183
172
|
startDraggingItem,
|
|
184
173
|
cancelDraggingItem,
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { TreeViewState } from '@mui/x-tree-view/internals';
|
|
2
|
+
import { TreeViewItemId } from '@mui/x-tree-view/models';
|
|
2
3
|
import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
|
|
3
4
|
export declare const itemsReorderingSelectors: {
|
|
4
5
|
/**
|
|
5
6
|
* Gets the properties of the current reordering.
|
|
6
7
|
*/
|
|
7
8
|
currentReorder: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
8
|
-
draggedItemId:
|
|
9
|
-
targetItemId:
|
|
9
|
+
draggedItemId: TreeViewItemId;
|
|
10
|
+
targetItemId: TreeViewItemId;
|
|
10
11
|
newPosition: import("./useTreeViewItemsReordering.types.js").TreeViewItemReorderPosition | null;
|
|
11
12
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
12
13
|
} | null;
|
|
@@ -19,9 +20,9 @@ export declare const itemsReorderingSelectors: {
|
|
|
19
20
|
targetDepth: number;
|
|
20
21
|
} | null;
|
|
21
22
|
/**
|
|
22
|
-
* Checks whether an item is
|
|
23
|
+
* Checks whether an item is being dragged.
|
|
23
24
|
*/
|
|
24
|
-
|
|
25
|
+
isDragging: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => boolean;
|
|
25
26
|
/**
|
|
26
27
|
* Checks whether an item can be reordered.
|
|
27
28
|
*/
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js
CHANGED
|
@@ -22,12 +22,9 @@ export const itemsReorderingSelectors = {
|
|
|
22
22
|
};
|
|
23
23
|
}),
|
|
24
24
|
/**
|
|
25
|
-
* Checks whether an item is
|
|
25
|
+
* Checks whether an item is being dragged.
|
|
26
26
|
*/
|
|
27
|
-
|
|
28
|
-
const draggedItemId = state.itemsReordering.currentReorder?.draggedItemId;
|
|
29
|
-
return draggedItemId != null && draggedItemId !== itemId;
|
|
30
|
-
}),
|
|
27
|
+
isDragging: createSelector(state => !!state.itemsReordering.currentReorder?.draggedItemId),
|
|
31
28
|
/**
|
|
32
29
|
* Checks whether an item can be reordered.
|
|
33
30
|
*/
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts
CHANGED
|
@@ -1,15 +1,7 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { DefaultizedProps } from '@mui/x-internals/types';
|
|
3
2
|
import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
|
|
4
|
-
import { TreeViewItemId, TreeViewItemsReorderingAction
|
|
5
|
-
import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
|
|
3
|
+
import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
|
|
6
4
|
export interface UseTreeViewItemsReorderingInstance {
|
|
7
|
-
/**
|
|
8
|
-
* Check if a given item can be dragged.
|
|
9
|
-
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
10
|
-
* @returns {boolean} `true` if the item can be dragged, `false` otherwise.
|
|
11
|
-
*/
|
|
12
|
-
canItemBeDragged: (itemId: TreeViewItemId) => boolean;
|
|
13
5
|
/**
|
|
14
6
|
* Get the valid reordering action if a given item is the target of the ongoing reordering.
|
|
15
7
|
* @param {TreeViewItemId} itemId The id of the item to get the action of.
|
|
@@ -51,7 +43,7 @@ export interface UseTreeViewItemsReorderingInstance {
|
|
|
51
43
|
}) => void;
|
|
52
44
|
}
|
|
53
45
|
export interface TreeViewItemReorderPosition {
|
|
54
|
-
parentId:
|
|
46
|
+
parentId: TreeViewItemId | null;
|
|
55
47
|
index: number;
|
|
56
48
|
}
|
|
57
49
|
export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
|
|
@@ -63,33 +55,33 @@ export interface UseTreeViewItemsReorderingParameters {
|
|
|
63
55
|
itemsReordering?: boolean;
|
|
64
56
|
/**
|
|
65
57
|
* Determine if a given item can be reordered.
|
|
66
|
-
* @param {
|
|
58
|
+
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
67
59
|
* @returns {boolean} `true` if the item can be reordered.
|
|
68
60
|
* @default () => true
|
|
69
61
|
*/
|
|
70
|
-
isItemReorderable?: (itemId:
|
|
62
|
+
isItemReorderable?: (itemId: TreeViewItemId) => boolean;
|
|
71
63
|
/**
|
|
72
64
|
* Used to determine if a given item can move to some new position.
|
|
73
|
-
* @param {object}
|
|
74
|
-
* @param {
|
|
75
|
-
* @param {TreeViewItemReorderPosition}
|
|
76
|
-
* @param {TreeViewItemReorderPosition}
|
|
65
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
66
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
|
|
67
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
68
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
77
69
|
* @returns {boolean} `true` if the item can move to the new position.
|
|
78
70
|
*/
|
|
79
|
-
canMoveItemToNewPosition?: (
|
|
80
|
-
itemId:
|
|
71
|
+
canMoveItemToNewPosition?: (parameters: {
|
|
72
|
+
itemId: TreeViewItemId;
|
|
81
73
|
oldPosition: TreeViewItemReorderPosition;
|
|
82
74
|
newPosition: TreeViewItemReorderPosition;
|
|
83
75
|
}) => boolean;
|
|
84
76
|
/**
|
|
85
77
|
* Callback fired when a Tree Item is moved in the tree.
|
|
86
|
-
* @param {object}
|
|
87
|
-
* @param {
|
|
88
|
-
* @param {TreeViewItemReorderPosition}
|
|
89
|
-
* @param {TreeViewItemReorderPosition}
|
|
78
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
79
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item moved.
|
|
80
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
81
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
90
82
|
*/
|
|
91
|
-
onItemPositionChange?: (
|
|
92
|
-
itemId:
|
|
83
|
+
onItemPositionChange?: (parameters: {
|
|
84
|
+
itemId: TreeViewItemId;
|
|
93
85
|
oldPosition: TreeViewItemReorderPosition;
|
|
94
86
|
newPosition: TreeViewItemReorderPosition;
|
|
95
87
|
}) => void;
|
|
@@ -97,10 +89,10 @@ export interface UseTreeViewItemsReorderingParameters {
|
|
|
97
89
|
export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
|
|
98
90
|
export interface UseTreeViewItemsReorderingState {
|
|
99
91
|
itemsReordering: {
|
|
100
|
-
isItemReorderable: (itemId:
|
|
92
|
+
isItemReorderable: (itemId: TreeViewItemId) => boolean;
|
|
101
93
|
currentReorder: {
|
|
102
|
-
draggedItemId:
|
|
103
|
-
targetItemId:
|
|
94
|
+
draggedItemId: TreeViewItemId;
|
|
95
|
+
targetItemId: TreeViewItemId;
|
|
104
96
|
newPosition: TreeViewItemReorderPosition | null;
|
|
105
97
|
action: TreeViewItemsReorderingAction | null;
|
|
106
98
|
} | null;
|
|
@@ -112,20 +104,4 @@ export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
|
|
|
112
104
|
instance: UseTreeViewItemsReorderingInstance;
|
|
113
105
|
state: UseTreeViewItemsReorderingState;
|
|
114
106
|
dependencies: [UseTreeViewItemsSignature];
|
|
115
|
-
}>;
|
|
116
|
-
export interface UseTreeItemRootSlotPropsFromItemsReordering {
|
|
117
|
-
draggable?: true;
|
|
118
|
-
onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
119
|
-
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
120
|
-
onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
121
|
-
}
|
|
122
|
-
export interface UseTreeItemContentSlotPropsFromItemsReordering {
|
|
123
|
-
onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
124
|
-
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
125
|
-
}
|
|
126
|
-
export interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {}
|
|
127
|
-
declare module '@mui/x-tree-view/useTreeItem' {
|
|
128
|
-
interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {}
|
|
129
|
-
interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {}
|
|
130
|
-
interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {}
|
|
131
|
-
}
|
|
107
|
+
}>;
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, Us
|
|
|
5
5
|
* Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
|
|
6
6
|
*/
|
|
7
7
|
export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
|
|
8
|
-
interface
|
|
8
|
+
interface GetNewPositionParameters {
|
|
9
9
|
itemChildrenIndentation: string | number;
|
|
10
10
|
validActions: TreeViewItemItemReorderingValidActions;
|
|
11
11
|
targetHeight: number;
|
|
@@ -22,7 +22,7 @@ export declare const chooseActionToApply: ({
|
|
|
22
22
|
cursorX,
|
|
23
23
|
cursorY,
|
|
24
24
|
contentElement
|
|
25
|
-
}:
|
|
25
|
+
}: GetNewPositionParameters) => TreeViewItemsReorderingAction | null;
|
|
26
26
|
export declare const moveItemInTree: <R extends {}>({
|
|
27
27
|
itemToMoveId,
|
|
28
28
|
oldPosition,
|
|
@@ -247,5 +247,5 @@ function useLazyLoadOnMount({
|
|
|
247
247
|
}, [instance, params.items, params.dataSource, store]);
|
|
248
248
|
}
|
|
249
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])
|
|
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
251
|
}
|
package/index.js
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { TreeViewCancellableEventHandler } from '@mui/x-tree-view/models';
|
|
3
|
+
import { TreeViewItemPlugin } from '@mui/x-tree-view/internals';
|
|
4
|
+
import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
|
|
5
|
+
export declare const isAndroid: () => boolean;
|
|
6
|
+
export declare const useTreeViewItemsReorderingItemPlugin: TreeViewItemPlugin;
|
|
7
|
+
interface UseTreeItemRootSlotPropsFromItemsReordering {
|
|
8
|
+
draggable?: true;
|
|
9
|
+
onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
10
|
+
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
11
|
+
onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
12
|
+
}
|
|
13
|
+
interface UseTreeItemContentSlotPropsFromItemsReordering {
|
|
14
|
+
onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
15
|
+
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
16
|
+
}
|
|
17
|
+
interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {}
|
|
18
|
+
declare module '@mui/x-tree-view/useTreeItem' {
|
|
19
|
+
interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {}
|
|
20
|
+
interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {}
|
|
21
|
+
interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {}
|
|
22
|
+
}
|
|
23
|
+
export {};
|
|
@@ -24,7 +24,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
24
24
|
const validActionsRef = React.useRef(null);
|
|
25
25
|
const draggedItemProperties = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.draggedItemProperties, itemId);
|
|
26
26
|
const canItemBeReordered = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.canItemBeReordered, itemId);
|
|
27
|
-
const
|
|
27
|
+
const isDragging = (0, _store.useStore)(store, _useTreeViewItemsReordering.itemsReorderingSelectors.isDragging, itemId);
|
|
28
28
|
return {
|
|
29
29
|
propsEnhancers: {
|
|
30
30
|
root: ({
|
|
@@ -32,12 +32,9 @@ const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
32
32
|
contentRefObject,
|
|
33
33
|
externalEventHandlers
|
|
34
34
|
}) => {
|
|
35
|
-
if (!canItemBeReordered) {
|
|
36
|
-
return {};
|
|
37
|
-
}
|
|
38
35
|
const handleDragStart = event => {
|
|
39
36
|
externalEventHandlers.onDragStart?.(event);
|
|
40
|
-
if (event.defaultMuiPrevented || event.defaultPrevented) {
|
|
37
|
+
if (!canItemBeReordered || event.defaultMuiPrevented || event.defaultPrevented) {
|
|
41
38
|
return;
|
|
42
39
|
}
|
|
43
40
|
|
|
@@ -83,7 +80,7 @@ const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
83
80
|
instance.completeDraggingItem(itemId);
|
|
84
81
|
};
|
|
85
82
|
return {
|
|
86
|
-
draggable: true,
|
|
83
|
+
draggable: canItemBeReordered ? true : undefined,
|
|
87
84
|
onDragStart: handleDragStart,
|
|
88
85
|
onDragOver: handleRootDragOver,
|
|
89
86
|
onDragEnd: handleRootDragEnd
|
|
@@ -93,15 +90,15 @@ const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
93
90
|
externalEventHandlers,
|
|
94
91
|
contentRefObject
|
|
95
92
|
}) => {
|
|
96
|
-
if (!
|
|
93
|
+
if (!isDragging) {
|
|
97
94
|
return {};
|
|
98
95
|
}
|
|
99
96
|
const handleDragOver = event => {
|
|
100
97
|
externalEventHandlers.onDragOver?.(event);
|
|
101
|
-
if (event.defaultMuiPrevented || validActionsRef.current == null) {
|
|
98
|
+
if (event.defaultMuiPrevented || validActionsRef.current == null || !contentRefObject.current) {
|
|
102
99
|
return;
|
|
103
100
|
}
|
|
104
|
-
const rect =
|
|
101
|
+
const rect = contentRefObject.current.getBoundingClientRect();
|
|
105
102
|
const y = event.clientY - rect.top;
|
|
106
103
|
const x = event.clientX - rect.left;
|
|
107
104
|
instance.setDragTargetItem({
|
|
@@ -11,24 +11,14 @@ var React = _interopRequireWildcard(require("react"));
|
|
|
11
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
|
-
var
|
|
15
|
-
var
|
|
14
|
+
var _itemPlugin = require("./itemPlugin");
|
|
15
|
+
var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.selectors");
|
|
16
16
|
const useTreeViewItemsReordering = ({
|
|
17
17
|
params,
|
|
18
18
|
store
|
|
19
19
|
}) => {
|
|
20
|
-
const canItemBeDragged = React.useCallback(itemId => {
|
|
21
|
-
if (!params.itemsReordering) {
|
|
22
|
-
return false;
|
|
23
|
-
}
|
|
24
|
-
const isItemReorderable = params.isItemReorderable;
|
|
25
|
-
if (isItemReorderable) {
|
|
26
|
-
return isItemReorderable(itemId);
|
|
27
|
-
}
|
|
28
|
-
return true;
|
|
29
|
-
}, [params.itemsReordering, params.isItemReorderable]);
|
|
30
20
|
const getDroppingTargetValidActions = React.useCallback(itemId => {
|
|
31
|
-
const currentReorder =
|
|
21
|
+
const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
|
|
32
22
|
if (!currentReorder) {
|
|
33
23
|
throw new Error('There is no ongoing reordering.');
|
|
34
24
|
}
|
|
@@ -103,7 +93,7 @@ const useTreeViewItemsReordering = ({
|
|
|
103
93
|
}));
|
|
104
94
|
}, [store]);
|
|
105
95
|
const cancelDraggingItem = React.useCallback(() => {
|
|
106
|
-
const currentReorder =
|
|
96
|
+
const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
|
|
107
97
|
if (currentReorder == null) {
|
|
108
98
|
return;
|
|
109
99
|
}
|
|
@@ -112,7 +102,7 @@ const useTreeViewItemsReordering = ({
|
|
|
112
102
|
}));
|
|
113
103
|
}, [store]);
|
|
114
104
|
const completeDraggingItem = React.useCallback(itemId => {
|
|
115
|
-
const currentReorder =
|
|
105
|
+
const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
|
|
116
106
|
if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
|
|
117
107
|
return;
|
|
118
108
|
}
|
|
@@ -186,7 +176,6 @@ const useTreeViewItemsReordering = ({
|
|
|
186
176
|
}, [store, params.itemsReordering, params.isItemReorderable]);
|
|
187
177
|
return {
|
|
188
178
|
instance: {
|
|
189
|
-
canItemBeDragged,
|
|
190
179
|
getDroppingTargetValidActions,
|
|
191
180
|
startDraggingItem,
|
|
192
181
|
cancelDraggingItem,
|
|
@@ -196,7 +185,7 @@ const useTreeViewItemsReordering = ({
|
|
|
196
185
|
};
|
|
197
186
|
};
|
|
198
187
|
exports.useTreeViewItemsReordering = useTreeViewItemsReordering;
|
|
199
|
-
useTreeViewItemsReordering.itemPlugin =
|
|
188
|
+
useTreeViewItemsReordering.itemPlugin = _itemPlugin.useTreeViewItemsReorderingItemPlugin;
|
|
200
189
|
useTreeViewItemsReordering.applyDefaultValuesToParams = ({
|
|
201
190
|
params
|
|
202
191
|
}) => (0, _extends2.default)({}, params, {
|
package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { TreeViewState } from '@mui/x-tree-view/internals';
|
|
2
|
+
import { TreeViewItemId } from '@mui/x-tree-view/models';
|
|
2
3
|
import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
|
|
3
4
|
export declare const itemsReorderingSelectors: {
|
|
4
5
|
/**
|
|
5
6
|
* Gets the properties of the current reordering.
|
|
6
7
|
*/
|
|
7
8
|
currentReorder: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
|
|
8
|
-
draggedItemId:
|
|
9
|
-
targetItemId:
|
|
9
|
+
draggedItemId: TreeViewItemId;
|
|
10
|
+
targetItemId: TreeViewItemId;
|
|
10
11
|
newPosition: import("./useTreeViewItemsReordering.types.js").TreeViewItemReorderPosition | null;
|
|
11
12
|
action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
|
|
12
13
|
} | null;
|
|
@@ -19,9 +20,9 @@ export declare const itemsReorderingSelectors: {
|
|
|
19
20
|
targetDepth: number;
|
|
20
21
|
} | null;
|
|
21
22
|
/**
|
|
22
|
-
* Checks whether an item is
|
|
23
|
+
* Checks whether an item is being dragged.
|
|
23
24
|
*/
|
|
24
|
-
|
|
25
|
+
isDragging: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => boolean;
|
|
25
26
|
/**
|
|
26
27
|
* Checks whether an item can be reordered.
|
|
27
28
|
*/
|
package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js
CHANGED
|
@@ -28,12 +28,9 @@ const itemsReorderingSelectors = exports.itemsReorderingSelectors = {
|
|
|
28
28
|
};
|
|
29
29
|
}),
|
|
30
30
|
/**
|
|
31
|
-
* Checks whether an item is
|
|
31
|
+
* Checks whether an item is being dragged.
|
|
32
32
|
*/
|
|
33
|
-
|
|
34
|
-
const draggedItemId = state.itemsReordering.currentReorder?.draggedItemId;
|
|
35
|
-
return draggedItemId != null && draggedItemId !== itemId;
|
|
36
|
-
}),
|
|
33
|
+
isDragging: (0, _store.createSelector)(state => !!state.itemsReordering.currentReorder?.draggedItemId),
|
|
37
34
|
/**
|
|
38
35
|
* Checks whether an item can be reordered.
|
|
39
36
|
*/
|
|
@@ -1,15 +1,7 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { DefaultizedProps } from '@mui/x-internals/types';
|
|
3
2
|
import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
|
|
4
|
-
import { TreeViewItemId, TreeViewItemsReorderingAction
|
|
5
|
-
import { TreeItemDragAndDropOverlayProps } from '@mui/x-tree-view/TreeItemDragAndDropOverlay';
|
|
3
|
+
import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
|
|
6
4
|
export interface UseTreeViewItemsReorderingInstance {
|
|
7
|
-
/**
|
|
8
|
-
* Check if a given item can be dragged.
|
|
9
|
-
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
10
|
-
* @returns {boolean} `true` if the item can be dragged, `false` otherwise.
|
|
11
|
-
*/
|
|
12
|
-
canItemBeDragged: (itemId: TreeViewItemId) => boolean;
|
|
13
5
|
/**
|
|
14
6
|
* Get the valid reordering action if a given item is the target of the ongoing reordering.
|
|
15
7
|
* @param {TreeViewItemId} itemId The id of the item to get the action of.
|
|
@@ -51,7 +43,7 @@ export interface UseTreeViewItemsReorderingInstance {
|
|
|
51
43
|
}) => void;
|
|
52
44
|
}
|
|
53
45
|
export interface TreeViewItemReorderPosition {
|
|
54
|
-
parentId:
|
|
46
|
+
parentId: TreeViewItemId | null;
|
|
55
47
|
index: number;
|
|
56
48
|
}
|
|
57
49
|
export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
|
|
@@ -63,33 +55,33 @@ export interface UseTreeViewItemsReorderingParameters {
|
|
|
63
55
|
itemsReordering?: boolean;
|
|
64
56
|
/**
|
|
65
57
|
* Determine if a given item can be reordered.
|
|
66
|
-
* @param {
|
|
58
|
+
* @param {TreeViewItemId} itemId The id of the item to check.
|
|
67
59
|
* @returns {boolean} `true` if the item can be reordered.
|
|
68
60
|
* @default () => true
|
|
69
61
|
*/
|
|
70
|
-
isItemReorderable?: (itemId:
|
|
62
|
+
isItemReorderable?: (itemId: TreeViewItemId) => boolean;
|
|
71
63
|
/**
|
|
72
64
|
* Used to determine if a given item can move to some new position.
|
|
73
|
-
* @param {object}
|
|
74
|
-
* @param {
|
|
75
|
-
* @param {TreeViewItemReorderPosition}
|
|
76
|
-
* @param {TreeViewItemReorderPosition}
|
|
65
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
66
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item that is being moved to a new position.
|
|
67
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
68
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
77
69
|
* @returns {boolean} `true` if the item can move to the new position.
|
|
78
70
|
*/
|
|
79
|
-
canMoveItemToNewPosition?: (
|
|
80
|
-
itemId:
|
|
71
|
+
canMoveItemToNewPosition?: (parameters: {
|
|
72
|
+
itemId: TreeViewItemId;
|
|
81
73
|
oldPosition: TreeViewItemReorderPosition;
|
|
82
74
|
newPosition: TreeViewItemReorderPosition;
|
|
83
75
|
}) => boolean;
|
|
84
76
|
/**
|
|
85
77
|
* Callback fired when a Tree Item is moved in the tree.
|
|
86
|
-
* @param {object}
|
|
87
|
-
* @param {
|
|
88
|
-
* @param {TreeViewItemReorderPosition}
|
|
89
|
-
* @param {TreeViewItemReorderPosition}
|
|
78
|
+
* @param {object} parameters The params describing the item re-ordering.
|
|
79
|
+
* @param {TreeViewItemId} parameters.itemId The id of the item moved.
|
|
80
|
+
* @param {TreeViewItemReorderPosition} parameters.oldPosition The old position of the item.
|
|
81
|
+
* @param {TreeViewItemReorderPosition} parameters.newPosition The new position of the item.
|
|
90
82
|
*/
|
|
91
|
-
onItemPositionChange?: (
|
|
92
|
-
itemId:
|
|
83
|
+
onItemPositionChange?: (parameters: {
|
|
84
|
+
itemId: TreeViewItemId;
|
|
93
85
|
oldPosition: TreeViewItemReorderPosition;
|
|
94
86
|
newPosition: TreeViewItemReorderPosition;
|
|
95
87
|
}) => void;
|
|
@@ -97,10 +89,10 @@ export interface UseTreeViewItemsReorderingParameters {
|
|
|
97
89
|
export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
|
|
98
90
|
export interface UseTreeViewItemsReorderingState {
|
|
99
91
|
itemsReordering: {
|
|
100
|
-
isItemReorderable: (itemId:
|
|
92
|
+
isItemReorderable: (itemId: TreeViewItemId) => boolean;
|
|
101
93
|
currentReorder: {
|
|
102
|
-
draggedItemId:
|
|
103
|
-
targetItemId:
|
|
94
|
+
draggedItemId: TreeViewItemId;
|
|
95
|
+
targetItemId: TreeViewItemId;
|
|
104
96
|
newPosition: TreeViewItemReorderPosition | null;
|
|
105
97
|
action: TreeViewItemsReorderingAction | null;
|
|
106
98
|
} | null;
|
|
@@ -112,20 +104,4 @@ export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
|
|
|
112
104
|
instance: UseTreeViewItemsReorderingInstance;
|
|
113
105
|
state: UseTreeViewItemsReorderingState;
|
|
114
106
|
dependencies: [UseTreeViewItemsSignature];
|
|
115
|
-
}>;
|
|
116
|
-
export interface UseTreeItemRootSlotPropsFromItemsReordering {
|
|
117
|
-
draggable?: true;
|
|
118
|
-
onDragStart?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
119
|
-
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
120
|
-
onDragEnd?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
121
|
-
}
|
|
122
|
-
export interface UseTreeItemContentSlotPropsFromItemsReordering {
|
|
123
|
-
onDragEnter?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
124
|
-
onDragOver?: TreeViewCancellableEventHandler<React.DragEvent>;
|
|
125
|
-
}
|
|
126
|
-
export interface UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering extends TreeItemDragAndDropOverlayProps {}
|
|
127
|
-
declare module '@mui/x-tree-view/useTreeItem' {
|
|
128
|
-
interface UseTreeItemRootSlotOwnProps extends UseTreeItemRootSlotPropsFromItemsReordering {}
|
|
129
|
-
interface UseTreeItemContentSlotOwnProps extends UseTreeItemContentSlotPropsFromItemsReordering {}
|
|
130
|
-
interface UseTreeItemDragAndDropOverlaySlotOwnProps extends UseTreeItemDragAndDropOverlaySlotPropsFromItemsReordering {}
|
|
131
|
-
}
|
|
107
|
+
}>;
|
|
@@ -5,7 +5,7 @@ import { TreeViewItemItemReorderingValidActions, TreeViewItemReorderPosition, Us
|
|
|
5
5
|
* Checks if the item with the id itemIdB is an ancestor of the item with the id itemIdA.
|
|
6
6
|
*/
|
|
7
7
|
export declare const isAncestor: (store: TreeViewUsedStore<UseTreeViewItemsReorderingSignature>, itemIdA: string, itemIdB: string) => boolean;
|
|
8
|
-
interface
|
|
8
|
+
interface GetNewPositionParameters {
|
|
9
9
|
itemChildrenIndentation: string | number;
|
|
10
10
|
validActions: TreeViewItemItemReorderingValidActions;
|
|
11
11
|
targetHeight: number;
|
|
@@ -22,7 +22,7 @@ export declare const chooseActionToApply: ({
|
|
|
22
22
|
cursorX,
|
|
23
23
|
cursorY,
|
|
24
24
|
contentElement
|
|
25
|
-
}:
|
|
25
|
+
}: GetNewPositionParameters) => TreeViewItemsReorderingAction | null;
|
|
26
26
|
export declare const moveItemInTree: <R extends {}>({
|
|
27
27
|
itemToMoveId,
|
|
28
28
|
oldPosition,
|
|
@@ -255,5 +255,5 @@ function useLazyLoadOnMount({
|
|
|
255
255
|
}, [instance, params.items, params.dataSource, store]);
|
|
256
256
|
}
|
|
257
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])
|
|
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
259
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-tree-view-pro",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.19.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",
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.28.4",
|
|
35
35
|
"@base-ui-components/utils": "0.1.2",
|
|
36
|
-
"@mui/utils": "^7.3.
|
|
36
|
+
"@mui/utils": "^7.3.5",
|
|
37
37
|
"@types/react-transition-group": "^4.4.12",
|
|
38
38
|
"clsx": "^2.1.1",
|
|
39
39
|
"prop-types": "^15.8.1",
|
|
40
40
|
"react-transition-group": "^4.4.5",
|
|
41
41
|
"reselect": "^5.1.1",
|
|
42
42
|
"use-sync-external-store": "^1.6.0",
|
|
43
|
-
"@mui/x-internals": "8.
|
|
44
|
-
"@mui/x-
|
|
45
|
-
"@mui/x-
|
|
43
|
+
"@mui/x-internals": "8.19.0",
|
|
44
|
+
"@mui/x-license": "8.19.0",
|
|
45
|
+
"@mui/x-tree-view": "8.19.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"@emotion/react": "^11.9.0",
|