@mui/x-tree-view-pro 8.2.0 → 8.3.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 +107 -0
- package/RichTreeViewPro/RichTreeViewPro.js +1 -9
- package/RichTreeViewPro/RichTreeViewPro.types.d.ts +1 -7
- package/esm/RichTreeViewPro/RichTreeViewPro.js +1 -9
- package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts +1 -7
- package/esm/index.js +1 -1
- package/esm/internals/plugins/useTreeViewItemsReordering/index.d.ts +1 -1
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +7 -1
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +15 -3
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +2 -2
- package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +9 -5
- package/index.js +1 -1
- package/internals/plugins/useTreeViewItemsReordering/index.d.ts +1 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js +7 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +15 -3
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js +1 -1
- package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +9 -5
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,113 @@
|
|
|
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.3.0
|
|
9
|
+
|
|
10
|
+
_May 8, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- 🎨 Added new styling options and shapes for `<FunnelChart />`, including `variant`, `borderRadius`, `pyramid`, and `step-pyramid` curves.
|
|
15
|
+
- 📚 Documentation improvements
|
|
16
|
+
- 🐞 Bugfixes
|
|
17
|
+
|
|
18
|
+
Special thanks go out to this community member for a valuable contribution:
|
|
19
|
+
@ptuukkan.
|
|
20
|
+
Team members who have contributed to this release:
|
|
21
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @JCQuintas, @LukasTy, @MBilalShafi, @rita-codes, @romgrk.
|
|
22
|
+
|
|
23
|
+
### Data Grid
|
|
24
|
+
|
|
25
|
+
#### `@mui/x-data-grid@8.3.0`
|
|
26
|
+
|
|
27
|
+
- [DataGrid] Fix cell editing of computed columns with data source (#17684) @ptuukkan
|
|
28
|
+
- [DataGrid] Fix lazy loading crash with `isRowSelectable` prop (#17629) @MBilalShafi
|
|
29
|
+
- [DataGrid] Fix: use CSS nonce (#17726) @romgrk
|
|
30
|
+
- [DataGrid] Ignore `preProcessEditCellProps` for non-editable columns when starting a row update (#17732) @arminmeh
|
|
31
|
+
- [DataGrid] Avoid applying row selection propagation on filtered rows (#17739) @MBilalShafi
|
|
32
|
+
|
|
33
|
+
#### `@mui/x-data-grid-pro@8.3.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
34
|
+
|
|
35
|
+
Same changes as in `@mui/x-data-grid@8.3.0`.
|
|
36
|
+
|
|
37
|
+
#### `@mui/x-data-grid-premium@8.3.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
38
|
+
|
|
39
|
+
Same changes as in `@mui/x-data-grid-pro@8.3.0`.
|
|
40
|
+
|
|
41
|
+
### Date and Time Pickers
|
|
42
|
+
|
|
43
|
+
#### `@mui/x-date-pickers@8.3.0`
|
|
44
|
+
|
|
45
|
+
- [DateTimePicker] Fix focus behavior on desktop variant (#17719) @LukasTy
|
|
46
|
+
- [pickers] Avoid `DigitalClock` stealing focus from a Picker open button on close (#17686) @LukasTy
|
|
47
|
+
|
|
48
|
+
#### `@mui/x-date-pickers-pro@8.3.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
49
|
+
|
|
50
|
+
Same changes as in `@mui/x-date-pickers@8.3.0`, plus:
|
|
51
|
+
|
|
52
|
+
- [DateRangePicker] Fix to reset range position after closing mobile Picker (#17631) @LukasTy
|
|
53
|
+
|
|
54
|
+
### Charts
|
|
55
|
+
|
|
56
|
+
- The `<FunnelChart />` series now accepts a `variant='outlined'` prop for a simpler style.
|
|
57
|
+
<img width="398" alt="Screenshot 2025-05-06 at 20 36 12" src="https://github.com/user-attachments/assets/00fef14f-9026-421e-a4b6-7e081adce1e8" />
|
|
58
|
+
|
|
59
|
+
- Add a `borderRadius` property to `<FunnelChart />`. All funnels have `8px` as a default value.
|
|
60
|
+
<img width="386" alt="Screenshot 2025-05-06 at 14 00 20" src="https://github.com/user-attachments/assets/4f4cc0e7-01ce-4ed6-a0e1-a387f78def23" />
|
|
61
|
+
|
|
62
|
+
- Add a `pyramid` curve to `<FunnelChart />`, which allows creation of a pyramid-shaped funnel.
|
|
63
|
+
<img width="344" alt="Screenshot 2025-05-06 at 14 32 59" src="https://github.com/user-attachments/assets/0b2896e0-0478-4766-bb1b-258a4977a751" />
|
|
64
|
+
|
|
65
|
+
- Add a `step-pyramid` curve to `<FunnelChart />`, which creates a stepped-pyramid like shape.
|
|
66
|
+
<img width="344" alt="Screenshot 2025-05-06 at 14 33 03" src="https://github.com/user-attachments/assets/894f0ab3-7898-40fe-b0df-560feea4085a" />
|
|
67
|
+
|
|
68
|
+
#### `@mui/x-charts@8.3.0`
|
|
69
|
+
|
|
70
|
+
- [charts] Add charts toolbar with zoom options (#17615) @bernardobelchior
|
|
71
|
+
- [charts] Add zoom slider (#17496) @bernardobelchior
|
|
72
|
+
- [charts] Cleanup compiler warnings (#17360) @alexfauquette
|
|
73
|
+
- [charts] Fix `<PieArcLabel />` not taking `arcLabelRadius` into account (#17655) @bernardobelchior
|
|
74
|
+
- [charts] Fix spark line not having clip path (#17501) @bernardobelchior
|
|
75
|
+
- [charts] Fix type issue with ESM (#17624) @alexfauquette
|
|
76
|
+
- [charts] Improve `<MarkElement />` performance (#17546) @bernardobelchior
|
|
77
|
+
- [charts] Rename `materialSlots` internal constant (#17710) @bernardobelchior
|
|
78
|
+
- [charts] Update zoom slider design (#17682) @bernardobelchior
|
|
79
|
+
- [charts] Fix zoom being documented as available for heatmap (#17657) @bernardobelchior
|
|
80
|
+
|
|
81
|
+
#### `@mui/x-charts-pro@8.3.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
82
|
+
|
|
83
|
+
Same changes as in `@mui/x-charts@8.3.0`, plus:
|
|
84
|
+
|
|
85
|
+
- [charts-pro] Add `pyramid` curve to `<FunnelChart />` (#17665) @JCQuintas
|
|
86
|
+
- [charts-pro] Add `variant='outlined'` to `<FunnelChart />` series (#17661) @JCQuintas
|
|
87
|
+
- [charts-pro] Add a `borderRadius` property to `<FunnelChart />` (#17660) @JCQuintas
|
|
88
|
+
|
|
89
|
+
### Tree View
|
|
90
|
+
|
|
91
|
+
#### `@mui/x-tree-view@8.3.0`
|
|
92
|
+
|
|
93
|
+
- [tree view] Bug fix - Escape does not cancel Drag n Drop (#17735) @rita-codes
|
|
94
|
+
- [tree view] Fix keyboard navigation error (#17685) @rita-codes
|
|
95
|
+
- [tree view] Continue cleaning the plugin system (#17386) @flaviendelangle
|
|
96
|
+
|
|
97
|
+
#### `@mui/x-tree-view-pro@8.3.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
98
|
+
|
|
99
|
+
Same changes as in `@mui/x-tree-view@8.3.0`.
|
|
100
|
+
|
|
101
|
+
### Docs
|
|
102
|
+
|
|
103
|
+
- [charts] Add population pyramid demo (#17652) @bernardobelchior
|
|
104
|
+
- [charts] Fix randomised argos test (#17658) @JCQuintas
|
|
105
|
+
- [docs] Make preview messaging consistent in charts @bernardobelchior
|
|
106
|
+
|
|
107
|
+
### Core
|
|
108
|
+
|
|
109
|
+
- [code-infra] Avoid `node` types in the built packages (#17533) @LukasTy
|
|
110
|
+
- [code-infra] Add `pkg.pr.new` publishing (#17402) @Janpot
|
|
111
|
+
- [code-infra] Normalize author package in org @oliviertassinari
|
|
112
|
+
- [code-infra] Remove required checkout step (#17729) @JCQuintas
|
|
113
|
+
- [docs-infra] Normalize netlify.toml in org @oliviertassinari
|
|
114
|
+
|
|
8
115
|
## 8.2.0
|
|
9
116
|
|
|
10
117
|
_May 1, 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 = "MTc0NjY1NTIwMDAwMA==";
|
|
56
56
|
|
|
57
57
|
/**
|
|
58
58
|
*
|
|
@@ -195,14 +195,6 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
195
195
|
* @default 'content'
|
|
196
196
|
*/
|
|
197
197
|
expansionTrigger: _propTypes.default.oneOf(['content', 'iconContainer']),
|
|
198
|
-
/**
|
|
199
|
-
* Unstable features, breaking changes might be introduced.
|
|
200
|
-
* For each feature, if the flag is not explicitly set to `true`,
|
|
201
|
-
* the feature will be fully disabled and any property / method call will not have any effect.
|
|
202
|
-
*/
|
|
203
|
-
experimentalFeatures: _propTypes.default.shape({
|
|
204
|
-
lazyLoading: _propTypes.default.bool
|
|
205
|
-
}),
|
|
206
198
|
/**
|
|
207
199
|
* Used to determine the id of a given item.
|
|
208
200
|
*
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { Theme } from '@mui/material/styles';
|
|
3
3
|
import { SxProps } from '@mui/system/styleFunctionSx';
|
|
4
4
|
import { SlotComponentProps } from '@mui/utils/types';
|
|
5
|
-
import { TreeViewPublicAPI,
|
|
5
|
+
import { TreeViewPublicAPI, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps, TreeViewSlots, TreeViewSlotProps } from '@mui/x-tree-view/internals';
|
|
6
6
|
import { RichTreeViewProClasses } from "./richTreeViewProClasses.js";
|
|
7
7
|
import { RichTreeViewProPluginParameters, RichTreeViewProPluginSignatures } from "./RichTreeViewPro.plugins.js";
|
|
8
8
|
export interface RichTreeViewProSlots extends TreeViewSlots, RichTreeViewItemsSlots {
|
|
@@ -42,10 +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
|
-
* Unstable features, breaking changes might be introduced.
|
|
47
|
-
* For each feature, if the flag is not explicitly set to `true`,
|
|
48
|
-
* the feature will be fully disabled and any property / method call will not have any effect.
|
|
49
|
-
*/
|
|
50
|
-
experimentalFeatures?: TreeViewExperimentalFeatures<RichTreeViewProPluginSignatures>;
|
|
51
45
|
}
|
|
@@ -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 = "MTc0NjY1NTIwMDAwMA==";
|
|
49
49
|
|
|
50
50
|
/**
|
|
51
51
|
*
|
|
@@ -188,14 +188,6 @@ process.env.NODE_ENV !== "production" ? RichTreeViewPro.propTypes = {
|
|
|
188
188
|
* @default 'content'
|
|
189
189
|
*/
|
|
190
190
|
expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']),
|
|
191
|
-
/**
|
|
192
|
-
* Unstable features, breaking changes might be introduced.
|
|
193
|
-
* For each feature, if the flag is not explicitly set to `true`,
|
|
194
|
-
* the feature will be fully disabled and any property / method call will not have any effect.
|
|
195
|
-
*/
|
|
196
|
-
experimentalFeatures: PropTypes.shape({
|
|
197
|
-
lazyLoading: PropTypes.bool
|
|
198
|
-
}),
|
|
199
191
|
/**
|
|
200
192
|
* Used to determine the id of a given item.
|
|
201
193
|
*
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { Theme } from '@mui/material/styles';
|
|
3
3
|
import { SxProps } from '@mui/system/styleFunctionSx';
|
|
4
4
|
import { SlotComponentProps } from '@mui/utils/types';
|
|
5
|
-
import { TreeViewPublicAPI,
|
|
5
|
+
import { TreeViewPublicAPI, RichTreeViewItemsSlots, RichTreeViewItemsSlotProps, TreeViewSlots, TreeViewSlotProps } from '@mui/x-tree-view/internals';
|
|
6
6
|
import { RichTreeViewProClasses } from "./richTreeViewProClasses.js";
|
|
7
7
|
import { RichTreeViewProPluginParameters, RichTreeViewProPluginSignatures } from "./RichTreeViewPro.plugins.js";
|
|
8
8
|
export interface RichTreeViewProSlots extends TreeViewSlots, RichTreeViewItemsSlots {
|
|
@@ -42,10 +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
|
-
* Unstable features, breaking changes might be introduced.
|
|
47
|
-
* For each feature, if the flag is not explicitly set to `true`,
|
|
48
|
-
* the feature will be fully disabled and any property / method call will not have any effect.
|
|
49
|
-
*/
|
|
50
|
-
experimentalFeatures?: TreeViewExperimentalFeatures<RichTreeViewProPluginSignatures>;
|
|
51
45
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { useTreeViewItemsReordering } from "./useTreeViewItemsReordering.js";
|
|
2
|
-
export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters,
|
|
2
|
+
export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingParametersWithDefaults, TreeViewItemReorderPosition } from "./useTreeViewItemsReordering.types.js";
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js
CHANGED
|
@@ -65,7 +65,13 @@ export const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
65
65
|
if (event.defaultMuiPrevented) {
|
|
66
66
|
return;
|
|
67
67
|
}
|
|
68
|
-
|
|
68
|
+
|
|
69
|
+
// Check if the drag-and-drop was cancelled, possibly by pressing Escape
|
|
70
|
+
if (event.dataTransfer.dropEffect === 'none') {
|
|
71
|
+
instance.cancelDraggingItem();
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
instance.completeDraggingItem(itemId);
|
|
69
75
|
};
|
|
70
76
|
return {
|
|
71
77
|
draggable: true,
|
|
@@ -98,7 +98,18 @@ export const useTreeViewItemsReordering = ({
|
|
|
98
98
|
});
|
|
99
99
|
});
|
|
100
100
|
}, [store]);
|
|
101
|
-
const
|
|
101
|
+
const cancelDraggingItem = React.useCallback(() => {
|
|
102
|
+
const currentReorder = selectorCurrentItemReordering(store.value);
|
|
103
|
+
if (currentReorder == null) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
store.update(prevState => _extends({}, prevState, {
|
|
107
|
+
itemsReordering: _extends({}, prevState.itemsReordering, {
|
|
108
|
+
currentReorder: null
|
|
109
|
+
})
|
|
110
|
+
}));
|
|
111
|
+
}, [store]);
|
|
112
|
+
const completeDraggingItem = React.useCallback(itemId => {
|
|
102
113
|
const currentReorder = selectorCurrentItemReordering(store.value);
|
|
103
114
|
if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
|
|
104
115
|
return;
|
|
@@ -184,13 +195,14 @@ export const useTreeViewItemsReordering = ({
|
|
|
184
195
|
canItemBeDragged,
|
|
185
196
|
getDroppingTargetValidActions,
|
|
186
197
|
startDraggingItem,
|
|
187
|
-
|
|
198
|
+
cancelDraggingItem,
|
|
199
|
+
completeDraggingItem,
|
|
188
200
|
setDragTargetItem
|
|
189
201
|
}
|
|
190
202
|
};
|
|
191
203
|
};
|
|
192
204
|
useTreeViewItemsReordering.itemPlugin = useTreeViewItemsReorderingItemPlugin;
|
|
193
|
-
useTreeViewItemsReordering.
|
|
205
|
+
useTreeViewItemsReordering.applyDefaultValuesToParams = ({
|
|
194
206
|
params
|
|
195
207
|
}) => _extends({}, params, {
|
|
196
208
|
itemsReordering: params.itemsReordering ?? false
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createSelector, selectorItemMetaLookup,
|
|
1
|
+
import { createSelector, selectorItemMetaLookup, selectorIsAnyItemBeingEdited } from '@mui/x-tree-view/internals';
|
|
2
2
|
/**
|
|
3
3
|
* Get the items reordering state.
|
|
4
4
|
* @param {TreeViewState<[UseTreeViewItemsReorderingSignature]>} state The state of the tree view.
|
|
@@ -47,4 +47,4 @@ export const selectorIsItemValidReorderingTarget = createSelector([selectorCurre
|
|
|
47
47
|
* @param {string} itemId The id of the item.
|
|
48
48
|
* @returns {boolean} `true` if the items can be reordered, `false` otherwise.
|
|
49
49
|
*/
|
|
50
|
-
export const selectorCanItemBeReordered = createSelector([selectorItemsReordering,
|
|
50
|
+
export const selectorCanItemBeReordered = createSelector([selectorItemsReordering, selectorIsAnyItemBeingEdited, (_, itemId) => itemId], (itemsReordering, isEditing, itemId) => !isEditing && itemsReordering.isItemReorderable(itemId));
|
package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts
CHANGED
|
@@ -22,10 +22,14 @@ export interface UseTreeViewItemsReorderingInstance {
|
|
|
22
22
|
*/
|
|
23
23
|
startDraggingItem: (itemId: TreeViewItemId) => void;
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
26
|
-
* @param {TreeViewItemId} itemId The id of the item to
|
|
25
|
+
* Complete the reordering of a given item.
|
|
26
|
+
* @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
|
|
27
27
|
*/
|
|
28
|
-
|
|
28
|
+
completeDraggingItem: (itemId: TreeViewItemId) => void;
|
|
29
|
+
/**
|
|
30
|
+
* Cancel the current reordering operation and reset the state.
|
|
31
|
+
*/
|
|
32
|
+
cancelDraggingItem: () => void;
|
|
29
33
|
/**
|
|
30
34
|
* Set the new target item for the ongoing reordering.
|
|
31
35
|
* The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
|
|
@@ -90,7 +94,7 @@ export interface UseTreeViewItemsReorderingParameters {
|
|
|
90
94
|
newPosition: TreeViewItemReorderPosition;
|
|
91
95
|
}) => void;
|
|
92
96
|
}
|
|
93
|
-
export type
|
|
97
|
+
export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
|
|
94
98
|
export interface UseTreeViewItemsReorderingState {
|
|
95
99
|
itemsReordering: {
|
|
96
100
|
isItemReorderable: (itemId: string) => boolean;
|
|
@@ -104,7 +108,7 @@ export interface UseTreeViewItemsReorderingState {
|
|
|
104
108
|
}
|
|
105
109
|
export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
|
|
106
110
|
params: UseTreeViewItemsReorderingParameters;
|
|
107
|
-
|
|
111
|
+
paramsWithDefaults: UseTreeViewItemsReorderingParametersWithDefaults;
|
|
108
112
|
instance: UseTreeViewItemsReorderingInstance;
|
|
109
113
|
state: UseTreeViewItemsReorderingState;
|
|
110
114
|
dependencies: [UseTreeViewItemsSignature];
|
package/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { useTreeViewItemsReordering } from "./useTreeViewItemsReordering.js";
|
|
2
|
-
export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters,
|
|
2
|
+
export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingParametersWithDefaults, TreeViewItemReorderPosition } from "./useTreeViewItemsReordering.types.js";
|
package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.itemPlugin.js
CHANGED
|
@@ -73,7 +73,13 @@ const useTreeViewItemsReorderingItemPlugin = ({
|
|
|
73
73
|
if (event.defaultMuiPrevented) {
|
|
74
74
|
return;
|
|
75
75
|
}
|
|
76
|
-
|
|
76
|
+
|
|
77
|
+
// Check if the drag-and-drop was cancelled, possibly by pressing Escape
|
|
78
|
+
if (event.dataTransfer.dropEffect === 'none') {
|
|
79
|
+
instance.cancelDraggingItem();
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
instance.completeDraggingItem(itemId);
|
|
77
83
|
};
|
|
78
84
|
return {
|
|
79
85
|
draggable: true,
|
|
@@ -106,7 +106,18 @@ const useTreeViewItemsReordering = ({
|
|
|
106
106
|
});
|
|
107
107
|
});
|
|
108
108
|
}, [store]);
|
|
109
|
-
const
|
|
109
|
+
const cancelDraggingItem = React.useCallback(() => {
|
|
110
|
+
const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
|
|
111
|
+
if (currentReorder == null) {
|
|
112
|
+
return;
|
|
113
|
+
}
|
|
114
|
+
store.update(prevState => (0, _extends2.default)({}, prevState, {
|
|
115
|
+
itemsReordering: (0, _extends2.default)({}, prevState.itemsReordering, {
|
|
116
|
+
currentReorder: null
|
|
117
|
+
})
|
|
118
|
+
}));
|
|
119
|
+
}, [store]);
|
|
120
|
+
const completeDraggingItem = React.useCallback(itemId => {
|
|
110
121
|
const currentReorder = (0, _useTreeViewItemsReordering3.selectorCurrentItemReordering)(store.value);
|
|
111
122
|
if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
|
|
112
123
|
return;
|
|
@@ -192,14 +203,15 @@ const useTreeViewItemsReordering = ({
|
|
|
192
203
|
canItemBeDragged,
|
|
193
204
|
getDroppingTargetValidActions,
|
|
194
205
|
startDraggingItem,
|
|
195
|
-
|
|
206
|
+
cancelDraggingItem,
|
|
207
|
+
completeDraggingItem,
|
|
196
208
|
setDragTargetItem
|
|
197
209
|
}
|
|
198
210
|
};
|
|
199
211
|
};
|
|
200
212
|
exports.useTreeViewItemsReordering = useTreeViewItemsReordering;
|
|
201
213
|
useTreeViewItemsReordering.itemPlugin = _useTreeViewItemsReordering2.useTreeViewItemsReorderingItemPlugin;
|
|
202
|
-
useTreeViewItemsReordering.
|
|
214
|
+
useTreeViewItemsReordering.applyDefaultValuesToParams = ({
|
|
203
215
|
params
|
|
204
216
|
}) => (0, _extends2.default)({}, params, {
|
|
205
217
|
itemsReordering: params.itemsReordering ?? false
|
package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js
CHANGED
|
@@ -53,4 +53,4 @@ const selectorIsItemValidReorderingTarget = exports.selectorIsItemValidReorderin
|
|
|
53
53
|
* @param {string} itemId The id of the item.
|
|
54
54
|
* @returns {boolean} `true` if the items can be reordered, `false` otherwise.
|
|
55
55
|
*/
|
|
56
|
-
const selectorCanItemBeReordered = exports.selectorCanItemBeReordered = (0, _internals.createSelector)([selectorItemsReordering, _internals.
|
|
56
|
+
const selectorCanItemBeReordered = exports.selectorCanItemBeReordered = (0, _internals.createSelector)([selectorItemsReordering, _internals.selectorIsAnyItemBeingEdited, (_, itemId) => itemId], (itemsReordering, isEditing, itemId) => !isEditing && itemsReordering.isItemReorderable(itemId));
|
|
@@ -22,10 +22,14 @@ export interface UseTreeViewItemsReorderingInstance {
|
|
|
22
22
|
*/
|
|
23
23
|
startDraggingItem: (itemId: TreeViewItemId) => void;
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
26
|
-
* @param {TreeViewItemId} itemId The id of the item to
|
|
25
|
+
* Complete the reordering of a given item.
|
|
26
|
+
* @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
|
|
27
27
|
*/
|
|
28
|
-
|
|
28
|
+
completeDraggingItem: (itemId: TreeViewItemId) => void;
|
|
29
|
+
/**
|
|
30
|
+
* Cancel the current reordering operation and reset the state.
|
|
31
|
+
*/
|
|
32
|
+
cancelDraggingItem: () => void;
|
|
29
33
|
/**
|
|
30
34
|
* Set the new target item for the ongoing reordering.
|
|
31
35
|
* The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
|
|
@@ -90,7 +94,7 @@ export interface UseTreeViewItemsReorderingParameters {
|
|
|
90
94
|
newPosition: TreeViewItemReorderPosition;
|
|
91
95
|
}) => void;
|
|
92
96
|
}
|
|
93
|
-
export type
|
|
97
|
+
export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
|
|
94
98
|
export interface UseTreeViewItemsReorderingState {
|
|
95
99
|
itemsReordering: {
|
|
96
100
|
isItemReorderable: (itemId: string) => boolean;
|
|
@@ -104,7 +108,7 @@ export interface UseTreeViewItemsReorderingState {
|
|
|
104
108
|
}
|
|
105
109
|
export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
|
|
106
110
|
params: UseTreeViewItemsReorderingParameters;
|
|
107
|
-
|
|
111
|
+
paramsWithDefaults: UseTreeViewItemsReorderingParametersWithDefaults;
|
|
108
112
|
instance: UseTreeViewItemsReorderingInstance;
|
|
109
113
|
state: UseTreeViewItemsReorderingState;
|
|
110
114
|
dependencies: [UseTreeViewItemsSignature];
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/x-tree-view-pro",
|
|
3
|
-
"version": "8.
|
|
4
|
-
"description": "The Pro plan edition of the Tree View components (MUI X).",
|
|
3
|
+
"version": "8.3.0",
|
|
5
4
|
"author": "MUI Team",
|
|
5
|
+
"description": "The Pro plan edition of the MUI X Tree View components.",
|
|
6
6
|
"main": "./index.js",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"bugs": {
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"directory": "packages/x-tree-view-pro"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@babel/runtime": "^7.27.
|
|
36
|
+
"@babel/runtime": "^7.27.1",
|
|
37
37
|
"@mui/utils": "^7.0.2",
|
|
38
38
|
"@types/react-transition-group": "^4.4.12",
|
|
39
39
|
"clsx": "^2.1.1",
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
"react-transition-group": "^4.4.5",
|
|
42
42
|
"reselect": "^5.1.1",
|
|
43
43
|
"use-sync-external-store": "^1.5.0",
|
|
44
|
-
"@mui/x-internals": "8.
|
|
45
|
-
"@mui/x-
|
|
46
|
-
"@mui/x-
|
|
44
|
+
"@mui/x-internals": "8.3.0",
|
|
45
|
+
"@mui/x-license": "8.3.0",
|
|
46
|
+
"@mui/x-tree-view": "8.3.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@emotion/react": "^11.9.0",
|