@mui/x-tree-view-pro 8.23.0 → 8.24.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 (100) hide show
  1. package/CHANGELOG.md +111 -1
  2. package/RichTreeViewPro/RichTreeViewPro.js +32 -29
  3. package/RichTreeViewPro/RichTreeViewPro.types.d.ts +6 -5
  4. package/RichTreeViewPro/index.d.ts +1 -2
  5. package/RichTreeViewPro/useExtractRichTreeViewProParameters.d.ts +294 -0
  6. package/RichTreeViewPro/useExtractRichTreeViewProParameters.js +107 -0
  7. package/esm/RichTreeViewPro/RichTreeViewPro.js +32 -29
  8. package/esm/RichTreeViewPro/RichTreeViewPro.types.d.ts +6 -5
  9. package/esm/RichTreeViewPro/index.d.ts +1 -2
  10. package/esm/RichTreeViewPro/useExtractRichTreeViewProParameters.d.ts +294 -0
  11. package/esm/RichTreeViewPro/useExtractRichTreeViewProParameters.js +99 -0
  12. package/esm/hooks/useRichTreeViewProApiRef.d.ts +2 -2
  13. package/esm/index.d.ts +0 -1
  14. package/esm/index.js +1 -2
  15. package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.d.ts +49 -0
  16. package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.js +15 -0
  17. package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.types.d.ts +69 -0
  18. package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.utils.d.ts +3 -0
  19. package/esm/internals/RichTreeViewProStore/RichTreeViewProStore.utils.js +18 -0
  20. package/esm/internals/RichTreeViewProStore/index.d.ts +2 -0
  21. package/esm/internals/RichTreeViewProStore/index.js +2 -0
  22. package/esm/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.d.ts +53 -0
  23. package/esm/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.js +180 -0
  24. package/esm/internals/plugins/itemsReordering/index.d.ts +3 -0
  25. package/esm/internals/plugins/itemsReordering/index.js +3 -0
  26. package/esm/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.js +6 -7
  27. package/esm/internals/plugins/itemsReordering/selectors.d.ts +29 -0
  28. package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js → itemsReordering/selectors.js} +4 -4
  29. package/esm/internals/plugins/itemsReordering/types.d.ts +6 -0
  30. package/{internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts → esm/internals/plugins/itemsReordering/utils.d.ts} +7 -7
  31. package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js → itemsReordering/utils.js} +2 -2
  32. package/esm/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.d.ts +51 -0
  33. package/esm/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.js +230 -0
  34. package/esm/internals/plugins/lazyLoading/index.d.ts +2 -0
  35. package/esm/internals/plugins/lazyLoading/index.js +2 -0
  36. package/esm/internals/plugins/lazyLoading/types.d.ts +21 -0
  37. package/esm/internals/plugins/lazyLoading/types.js +1 -0
  38. package/{internals/plugins/useTreeViewLazyLoading → esm/internals/plugins/lazyLoading}/utils.d.ts +3 -7
  39. package/esm/internals/plugins/{useTreeViewLazyLoading → lazyLoading}/utils.js +3 -11
  40. package/hooks/useRichTreeViewProApiRef.d.ts +2 -2
  41. package/index.d.ts +0 -1
  42. package/index.js +1 -23
  43. package/internals/RichTreeViewProStore/RichTreeViewProStore.d.ts +49 -0
  44. package/internals/RichTreeViewProStore/RichTreeViewProStore.js +23 -0
  45. package/internals/RichTreeViewProStore/RichTreeViewProStore.types.d.ts +69 -0
  46. package/internals/RichTreeViewProStore/RichTreeViewProStore.utils.d.ts +3 -0
  47. package/internals/RichTreeViewProStore/RichTreeViewProStore.utils.js +25 -0
  48. package/internals/RichTreeViewProStore/index.d.ts +2 -0
  49. package/internals/RichTreeViewProStore/index.js +27 -0
  50. package/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.d.ts +53 -0
  51. package/internals/plugins/itemsReordering/TreeViewItemsReorderingPlugin.js +188 -0
  52. package/internals/plugins/itemsReordering/index.d.ts +3 -0
  53. package/internals/plugins/itemsReordering/index.js +27 -0
  54. package/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.js +9 -10
  55. package/internals/plugins/itemsReordering/selectors.d.ts +29 -0
  56. package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.js → itemsReordering/selectors.js} +4 -4
  57. package/internals/plugins/itemsReordering/types.d.ts +6 -0
  58. package/{esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.utils.d.ts → internals/plugins/itemsReordering/utils.d.ts} +7 -7
  59. package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.utils.js → itemsReordering/utils.js} +2 -2
  60. package/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.d.ts +51 -0
  61. package/internals/plugins/lazyLoading/TreeViewLazyLoadingPlugin.js +238 -0
  62. package/internals/plugins/lazyLoading/index.d.ts +2 -0
  63. package/internals/plugins/lazyLoading/index.js +27 -0
  64. package/internals/plugins/lazyLoading/types.d.ts +21 -0
  65. package/internals/plugins/lazyLoading/types.js +5 -0
  66. package/{esm/internals/plugins/useTreeViewLazyLoading → internals/plugins/lazyLoading}/utils.d.ts +3 -7
  67. package/internals/plugins/{useTreeViewLazyLoading → lazyLoading}/utils.js +3 -9
  68. package/package.json +4 -4
  69. package/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +0 -5
  70. package/RichTreeViewPro/RichTreeViewPro.plugins.js +0 -12
  71. package/esm/RichTreeViewPro/RichTreeViewPro.plugins.d.ts +0 -5
  72. package/esm/RichTreeViewPro/RichTreeViewPro.plugins.js +0 -6
  73. package/esm/internals/index.d.ts +0 -1
  74. package/esm/internals/plugins/useTreeViewItemsReordering/index.d.ts +0 -3
  75. package/esm/internals/plugins/useTreeViewItemsReordering/index.js +0 -2
  76. package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +0 -3
  77. package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +0 -196
  78. package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +0 -30
  79. package/esm/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +0 -107
  80. package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts +0 -1
  81. package/esm/internals/plugins/useTreeViewLazyLoading/index.js +0 -1
  82. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +0 -2
  83. package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +0 -251
  84. package/internals/index.d.ts +0 -1
  85. package/internals/plugins/useTreeViewItemsReordering/index.d.ts +0 -3
  86. package/internals/plugins/useTreeViewItemsReordering/index.js +0 -19
  87. package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.d.ts +0 -3
  88. package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.js +0 -205
  89. package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.selectors.d.ts +0 -30
  90. package/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.d.ts +0 -107
  91. package/internals/plugins/useTreeViewLazyLoading/index.d.ts +0 -1
  92. package/internals/plugins/useTreeViewLazyLoading/index.js +0 -12
  93. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.d.ts +0 -2
  94. package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.js +0 -259
  95. /package/esm/internals/{index.js → RichTreeViewProStore/RichTreeViewProStore.types.js} +0 -0
  96. /package/esm/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.d.ts +0 -0
  97. /package/esm/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.types.js → itemsReordering/types.js} +0 -0
  98. /package/internals/{index.js → RichTreeViewProStore/RichTreeViewProStore.types.js} +0 -0
  99. /package/internals/plugins/{useTreeViewItemsReordering → itemsReordering}/itemPlugin.d.ts +0 -0
  100. /package/internals/plugins/{useTreeViewItemsReordering/useTreeViewItemsReordering.types.js → itemsReordering/types.js} +0 -0
@@ -1,107 +0,0 @@
1
- import { DefaultizedProps } from '@mui/x-internals/types';
2
- import { TreeViewPluginSignature, UseTreeViewItemsSignature } from '@mui/x-tree-view/internals';
3
- import { TreeViewItemId, TreeViewItemsReorderingAction } from '@mui/x-tree-view/models';
4
- export interface UseTreeViewItemsReorderingInstance {
5
- /**
6
- * Get the valid reordering action if a given item is the target of the ongoing reordering.
7
- * @param {TreeViewItemId} itemId The id of the item to get the action of.
8
- * @returns {TreeViewItemItemReorderingValidActions} The valid actions for the item.
9
- */
10
- getDroppingTargetValidActions: (itemId: TreeViewItemId) => TreeViewItemItemReorderingValidActions;
11
- /**
12
- * Start a reordering for the given item.
13
- * @param {TreeViewItemId} itemId The id of the item to start the reordering for.
14
- */
15
- startDraggingItem: (itemId: TreeViewItemId) => void;
16
- /**
17
- * Complete the reordering of a given item.
18
- * @param {TreeViewItemId} itemId The id of the item to complete the reordering for.
19
- */
20
- completeDraggingItem: (itemId: TreeViewItemId) => void;
21
- /**
22
- * Cancel the current reordering operation and reset the state.
23
- */
24
- cancelDraggingItem: () => void;
25
- /**
26
- * Set the new target item for the ongoing reordering.
27
- * The action will be determined based on the position of the cursor inside the target and the valid actions for this target.
28
- * @param {object} params The params describing the new target item.
29
- * @param {TreeViewItemId} params.itemId The id of the new target item.
30
- * @param {TreeViewItemItemReorderingValidActions} params.validActions The valid actions for the new target item.
31
- * @param {number} params.targetHeight The height of the target item.
32
- * @param {number} params.cursorY The Y coordinate of the mouse cursor.
33
- * @param {number} params.cursorX The X coordinate of the mouse cursor.
34
- * @param {HTMLDivElement} params.contentElement The DOM element rendered for the content slot.
35
- */
36
- setDragTargetItem: (params: {
37
- itemId: TreeViewItemId;
38
- validActions: TreeViewItemItemReorderingValidActions;
39
- targetHeight: number;
40
- cursorY: number;
41
- cursorX: number;
42
- contentElement: HTMLDivElement;
43
- }) => void;
44
- }
45
- export interface TreeViewItemReorderPosition {
46
- parentId: TreeViewItemId | null;
47
- index: number;
48
- }
49
- export type TreeViewItemItemReorderingValidActions = { [key in TreeViewItemsReorderingAction]?: TreeViewItemReorderPosition };
50
- export interface UseTreeViewItemsReorderingParameters {
51
- /**
52
- * If `true`, the reordering of items is enabled.
53
- * @default false
54
- */
55
- itemsReordering?: boolean;
56
- /**
57
- * Determine if a given item can be reordered.
58
- * @param {TreeViewItemId} itemId The id of the item to check.
59
- * @returns {boolean} `true` if the item can be reordered.
60
- * @default () => true
61
- */
62
- isItemReorderable?: (itemId: TreeViewItemId) => boolean;
63
- /**
64
- * Used to determine if a given item can move to some new position.
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.
69
- * @returns {boolean} `true` if the item can move to the new position.
70
- */
71
- canMoveItemToNewPosition?: (parameters: {
72
- itemId: TreeViewItemId;
73
- oldPosition: TreeViewItemReorderPosition;
74
- newPosition: TreeViewItemReorderPosition;
75
- }) => boolean;
76
- /**
77
- * Callback fired when a Tree Item is moved in the tree.
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.
82
- */
83
- onItemPositionChange?: (parameters: {
84
- itemId: TreeViewItemId;
85
- oldPosition: TreeViewItemReorderPosition;
86
- newPosition: TreeViewItemReorderPosition;
87
- }) => void;
88
- }
89
- export type UseTreeViewItemsReorderingParametersWithDefaults = DefaultizedProps<UseTreeViewItemsReorderingParameters, 'itemsReordering'>;
90
- export interface UseTreeViewItemsReorderingState {
91
- itemsReordering: {
92
- isItemReorderable: (itemId: TreeViewItemId) => boolean;
93
- currentReorder: {
94
- draggedItemId: TreeViewItemId;
95
- targetItemId: TreeViewItemId;
96
- newPosition: TreeViewItemReorderPosition | null;
97
- action: TreeViewItemsReorderingAction | null;
98
- } | null;
99
- };
100
- }
101
- export type UseTreeViewItemsReorderingSignature = TreeViewPluginSignature<{
102
- params: UseTreeViewItemsReorderingParameters;
103
- paramsWithDefaults: UseTreeViewItemsReorderingParametersWithDefaults;
104
- instance: UseTreeViewItemsReorderingInstance;
105
- state: UseTreeViewItemsReorderingState;
106
- dependencies: [UseTreeViewItemsSignature];
107
- }>;
@@ -1 +0,0 @@
1
- export { useTreeViewLazyLoading } from "./useTreeViewLazyLoading.js";
@@ -1 +0,0 @@
1
- export { useTreeViewLazyLoading } from "./useTreeViewLazyLoading.js";
@@ -1,2 +0,0 @@
1
- import { TreeViewPlugin, UseTreeViewLazyLoadingSignature } from '@mui/x-tree-view/internals';
2
- export declare const useTreeViewLazyLoading: TreeViewPlugin<UseTreeViewLazyLoadingSignature>;
@@ -1,251 +0,0 @@
1
- 'use client';
2
-
3
- import _extends from "@babel/runtime/helpers/esm/extends";
4
- import * as React from 'react';
5
- import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
6
- import { useStableCallback } from '@base-ui/utils/useStableCallback';
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';
9
- import { DataSourceCacheDefault } from '@mui/x-tree-view/utils';
10
- import { NestedDataManager } from "./utils.js";
11
- const INITIAL_STATE = {
12
- loading: {},
13
- errors: {}
14
- };
15
- export const useTreeViewLazyLoading = ({
16
- instance,
17
- params,
18
- store
19
- }) => {
20
- const nestedDataManager = useRefWithInit(() => new NestedDataManager(instance)).current;
21
- const cache = useRefWithInit(() => params.dataSourceCache ?? new DataSourceCacheDefault({})).current;
22
- const setDataSourceLoading = useStableCallback((itemId, isLoading) => {
23
- if (!params.dataSource) {
24
- return;
25
- }
26
- const itemIdWithDefault = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
27
- if (lazyLoadingSelectors.isItemLoading(store.state, itemIdWithDefault) === isLoading) {
28
- return;
29
- }
30
- const loading = _extends({}, store.state.lazyLoading.dataSource.loading);
31
- if (isLoading === false) {
32
- delete loading[itemIdWithDefault];
33
- } else {
34
- loading[itemIdWithDefault] = isLoading;
35
- }
36
- store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
37
- dataSource: _extends({}, store.state.lazyLoading.dataSource, {
38
- loading
39
- })
40
- }));
41
- });
42
- const setDataSourceError = useStableCallback((itemId, error) => {
43
- if (!params.dataSource) {
44
- return;
45
- }
46
- if (lazyLoadingSelectors.itemError(store.state, itemId) === error) {
47
- return;
48
- }
49
- const stateId = itemId ?? TREE_VIEW_ROOT_PARENT_ID;
50
- const errors = _extends({}, store.state.lazyLoading.dataSource.errors);
51
- if (error === null && errors[stateId] !== undefined) {
52
- delete errors[stateId];
53
- } else {
54
- errors[stateId] = error;
55
- }
56
- store.set('lazyLoading', _extends({}, store.state.lazyLoading, {
57
- dataSource: _extends({}, store.state.lazyLoading.dataSource, {
58
- errors
59
- })
60
- }));
61
- });
62
- const fetchItems = useStableCallback(async parentIds => nestedDataManager.queue(parentIds));
63
- const fetchItemChildren = useStableCallback(async ({
64
- itemId,
65
- forceRefresh
66
- }) => {
67
- if (!params.dataSource) {
68
- return;
69
- }
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)) {
76
- nestedDataManager.clearPendingRequest(itemId);
77
- return;
78
- }
79
-
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;
87
- if (!forceRefresh) {
88
- // reads from the value from the cache
89
- const cachedData = cache.get(cacheKey);
90
- if (cachedData !== undefined && cachedData !== -1) {
91
- if (itemId != null) {
92
- nestedDataManager.setRequestSettled(itemId);
93
- }
94
- instance.setItemChildren({
95
- items: cachedData,
96
- parentId: itemId,
97
- getChildrenCount
98
- });
99
- instance.setDataSourceLoading(itemId, false);
100
- return;
101
- }
102
-
103
- // set the item loading status to true
104
- instance.setDataSourceLoading(itemId, true);
105
- if (cachedData === -1) {
106
- instance.removeChildren(itemId);
107
- }
108
- }
109
-
110
- // reset existing error if any
111
- if (lazyLoadingSelectors.itemError(store.state, itemId)) {
112
- instance.setDataSourceError(itemId, null);
113
- }
114
- try {
115
- let response;
116
- if (itemId == null) {
117
- response = await getTreeItems();
118
- } else {
119
- response = await getTreeItems(itemId);
120
- nestedDataManager.setRequestSettled(itemId);
121
- }
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,
127
- parentId: itemId,
128
- getChildrenCount
129
- });
130
- } catch (error) {
131
- const childrenFetchError = error;
132
- // set the item error in the state
133
- instance.setDataSourceError(itemId, childrenFetchError);
134
- if (forceRefresh) {
135
- instance.removeChildren(itemId);
136
- }
137
- } finally {
138
- // set the item loading status to false
139
- instance.setDataSourceLoading(itemId, false);
140
- if (itemId != null) {
141
- nestedDataManager.setRequestSettled(itemId);
142
- }
143
- }
144
- });
145
- const updateItemChildren = useStableCallback(itemId => {
146
- return instance.fetchItemChildren({
147
- itemId,
148
- forceRefresh: true
149
- });
150
- });
151
- useInstanceEventHandler(instance, 'beforeItemToggleExpansion', async eventParameters => {
152
- if (!params.dataSource || !eventParameters.shouldBeExpanded) {
153
- return;
154
- }
155
-
156
- // prevent the default expansion behavior
157
- eventParameters.isExpansionPrevented = true;
158
- await instance.fetchItems([eventParameters.itemId]);
159
- const hasError = lazyLoadingSelectors.itemHasError(store.state, eventParameters.itemId);
160
- if (!hasError) {
161
- instance.applyItemExpansion({
162
- itemId: eventParameters.itemId,
163
- shouldBeExpanded: true,
164
- event: eventParameters.event
165
- });
166
- if (selectionSelectors.isItemSelected(store.state, eventParameters.itemId)) {
167
- // make sure selection propagation works correctly
168
- instance.setItemSelection({
169
- event: eventParameters.event,
170
- itemId: eventParameters.itemId,
171
- keepExistingSelection: true,
172
- shouldBeSelected: true
173
- });
174
- }
175
- }
176
- });
177
- useLazyLoadOnMount({
178
- instance,
179
- params,
180
- store
181
- });
182
- if (params.dataSource) {
183
- instance.preventItemUpdates();
184
- }
185
- return {
186
- instance: {
187
- fetchItemChildren,
188
- fetchItems,
189
- updateItemChildren,
190
- setDataSourceLoading,
191
- setDataSourceError
192
- },
193
- publicAPI: {
194
- updateItemChildren
195
- }
196
- };
197
- };
198
- useTreeViewLazyLoading.getInitialState = () => ({
199
- lazyLoading: {
200
- enabled: false,
201
- dataSource: INITIAL_STATE
202
- }
203
- });
204
- useTreeViewLazyLoading.params = {
205
- dataSource: true,
206
- dataSourceCache: true
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
- }
@@ -1 +0,0 @@
1
- export type { UseTreeViewItemsReorderingSignature } from "./plugins/useTreeViewItemsReordering/index.js";
@@ -1,3 +0,0 @@
1
- export { useTreeViewItemsReordering } from "./useTreeViewItemsReordering.js";
2
- export type { UseTreeViewItemsReorderingSignature, UseTreeViewItemsReorderingParameters, UseTreeViewItemsReorderingParametersWithDefaults, TreeViewItemReorderPosition } from "./useTreeViewItemsReordering.types.js";
3
- export { itemsReorderingSelectors } from "./useTreeViewItemsReordering.selectors.js";
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- Object.defineProperty(exports, "itemsReorderingSelectors", {
7
- enumerable: true,
8
- get: function () {
9
- return _useTreeViewItemsReordering2.itemsReorderingSelectors;
10
- }
11
- });
12
- Object.defineProperty(exports, "useTreeViewItemsReordering", {
13
- enumerable: true,
14
- get: function () {
15
- return _useTreeViewItemsReordering.useTreeViewItemsReordering;
16
- }
17
- });
18
- var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering");
19
- var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.selectors");
@@ -1,3 +0,0 @@
1
- import { TreeViewPlugin } from '@mui/x-tree-view/internals';
2
- import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
3
- export declare const useTreeViewItemsReordering: TreeViewPlugin<UseTreeViewItemsReorderingSignature>;
@@ -1,205 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.useTreeViewItemsReordering = void 0;
9
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var React = _interopRequireWildcard(require("react"));
11
- var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
12
- var _internals = require("@mui/x-tree-view/internals");
13
- var _useTreeViewItemsReordering = require("./useTreeViewItemsReordering.utils");
14
- var _itemPlugin = require("./itemPlugin");
15
- var _useTreeViewItemsReordering2 = require("./useTreeViewItemsReordering.selectors");
16
- const useTreeViewItemsReordering = ({
17
- params,
18
- store
19
- }) => {
20
- const getDroppingTargetValidActions = React.useCallback(itemId => {
21
- const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
22
- if (!currentReorder) {
23
- throw new Error('There is no ongoing reordering.');
24
- }
25
- if (itemId === currentReorder.draggedItemId) {
26
- return {};
27
- }
28
- const canMoveItemToNewPosition = params.canMoveItemToNewPosition;
29
- const targetItemMeta = _internals.itemsSelectors.itemMeta(store.state, itemId);
30
- const targetItemIndex = _internals.itemsSelectors.itemIndex(store.state, targetItemMeta.id);
31
- const draggedItemMeta = _internals.itemsSelectors.itemMeta(store.state, currentReorder.draggedItemId);
32
- const draggedItemIndex = _internals.itemsSelectors.itemIndex(store.state, draggedItemMeta.id);
33
- const isTargetLastSibling = targetItemIndex === _internals.itemsSelectors.itemOrderedChildrenIds(store.state, targetItemMeta.parentId).length - 1;
34
- const oldPosition = {
35
- parentId: draggedItemMeta.parentId,
36
- index: draggedItemIndex
37
- };
38
- const checkIfPositionIsValid = positionAfterAction => {
39
- let isValid;
40
- // If the new position is equal to the old one, we don't want to show any dropping UI.
41
- if (positionAfterAction.parentId === oldPosition.parentId && positionAfterAction.index === oldPosition.index) {
42
- isValid = false;
43
- } else if (canMoveItemToNewPosition) {
44
- isValid = canMoveItemToNewPosition({
45
- itemId: currentReorder.draggedItemId,
46
- oldPosition,
47
- newPosition: positionAfterAction
48
- });
49
- } else {
50
- isValid = true;
51
- }
52
- return isValid;
53
- };
54
- const positionsAfterAction = {
55
- 'make-child': {
56
- parentId: targetItemMeta.id,
57
- index: 0
58
- },
59
- 'reorder-above': {
60
- parentId: targetItemMeta.parentId,
61
- index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex - 1 : targetItemIndex
62
- },
63
- 'reorder-below': !targetItemMeta.expandable || isTargetLastSibling ? {
64
- parentId: targetItemMeta.parentId,
65
- index: targetItemMeta.parentId === draggedItemMeta.parentId && targetItemIndex > draggedItemIndex ? targetItemIndex : targetItemIndex + 1
66
- } : null,
67
- 'move-to-parent': targetItemMeta.parentId == null ? null : {
68
- parentId: targetItemMeta.parentId,
69
- index: _internals.itemsSelectors.itemOrderedChildrenIds(store.state, targetItemMeta.parentId).length
70
- }
71
- };
72
- const validActions = {};
73
- Object.keys(positionsAfterAction).forEach(action => {
74
- const positionAfterAction = positionsAfterAction[action];
75
- if (positionAfterAction != null && checkIfPositionIsValid(positionAfterAction)) {
76
- validActions[action] = positionAfterAction;
77
- }
78
- });
79
- return validActions;
80
- }, [store, params.canMoveItemToNewPosition]);
81
- const startDraggingItem = React.useCallback(itemId => {
82
- const isItemBeingEdited = _internals.labelSelectors.isItemBeingEdited(store.state, itemId);
83
- if (isItemBeingEdited) {
84
- return;
85
- }
86
- store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
87
- currentReorder: {
88
- targetItemId: itemId,
89
- draggedItemId: itemId,
90
- action: null,
91
- newPosition: null
92
- }
93
- }));
94
- }, [store]);
95
- const cancelDraggingItem = React.useCallback(() => {
96
- const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
97
- if (currentReorder == null) {
98
- return;
99
- }
100
- store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
101
- currentReorder: null
102
- }));
103
- }, [store]);
104
- const completeDraggingItem = React.useCallback(itemId => {
105
- const currentReorder = _useTreeViewItemsReordering2.itemsReorderingSelectors.currentReorder(store.state);
106
- if (currentReorder == null || currentReorder.draggedItemId !== itemId) {
107
- return;
108
- }
109
- if (currentReorder.draggedItemId === currentReorder.targetItemId || currentReorder.action == null || currentReorder.newPosition == null) {
110
- store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
111
- currentReorder: null
112
- }));
113
- return;
114
- }
115
- const draggedItemMeta = _internals.itemsSelectors.itemMeta(store.state, currentReorder.draggedItemId);
116
- const oldPosition = {
117
- parentId: draggedItemMeta.parentId,
118
- index: _internals.itemsSelectors.itemIndex(store.state, draggedItemMeta.id)
119
- };
120
- const newPosition = currentReorder.newPosition;
121
- store.update({
122
- itemsReordering: (0, _extends2.default)({}, store.state.itemsReordering, {
123
- currentReorder: null
124
- }),
125
- items: (0, _useTreeViewItemsReordering.moveItemInTree)({
126
- itemToMoveId: itemId,
127
- newPosition,
128
- oldPosition,
129
- prevState: store.state.items
130
- })
131
- });
132
- const onItemPositionChange = params.onItemPositionChange;
133
- onItemPositionChange?.({
134
- itemId,
135
- newPosition,
136
- oldPosition
137
- });
138
- }, [store, params.onItemPositionChange]);
139
- const setDragTargetItem = React.useCallback(({
140
- itemId,
141
- validActions,
142
- targetHeight,
143
- cursorY,
144
- cursorX,
145
- contentElement
146
- }) => {
147
- const prevItemReorder = store.state.itemsReordering.currentReorder;
148
- if (prevItemReorder == null || (0, _useTreeViewItemsReordering.isAncestor)(store, itemId, prevItemReorder.draggedItemId)) {
149
- return;
150
- }
151
- const action = (0, _useTreeViewItemsReordering.chooseActionToApply)({
152
- itemChildrenIndentation: params.itemChildrenIndentation,
153
- validActions,
154
- targetHeight,
155
- targetDepth: store.state.items.itemMetaLookup[itemId].depth,
156
- cursorY,
157
- cursorX,
158
- contentElement
159
- });
160
- const newPosition = action == null ? null : validActions[action];
161
- if (prevItemReorder.targetItemId === itemId && prevItemReorder.action === action && prevItemReorder.newPosition?.parentId === newPosition?.parentId && prevItemReorder.newPosition?.index === newPosition?.index) {
162
- return;
163
- }
164
- store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
165
- currentReorder: (0, _extends2.default)({}, prevItemReorder, {
166
- targetItemId: itemId,
167
- newPosition,
168
- action
169
- })
170
- }));
171
- }, [store, params.itemChildrenIndentation]);
172
- (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
173
- store.set('itemsReordering', (0, _extends2.default)({}, store.state.itemsReordering, {
174
- isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
175
- }));
176
- }, [store, params.itemsReordering, params.isItemReorderable]);
177
- return {
178
- instance: {
179
- getDroppingTargetValidActions,
180
- startDraggingItem,
181
- cancelDraggingItem,
182
- completeDraggingItem,
183
- setDragTargetItem
184
- }
185
- };
186
- };
187
- exports.useTreeViewItemsReordering = useTreeViewItemsReordering;
188
- useTreeViewItemsReordering.itemPlugin = _itemPlugin.useTreeViewItemsReorderingItemPlugin;
189
- useTreeViewItemsReordering.applyDefaultValuesToParams = ({
190
- params
191
- }) => (0, _extends2.default)({}, params, {
192
- itemsReordering: params.itemsReordering ?? false
193
- });
194
- useTreeViewItemsReordering.getInitialState = params => ({
195
- itemsReordering: {
196
- currentReorder: null,
197
- isItemReorderable: params.itemsReordering ? params.isItemReorderable ?? (() => true) : () => false
198
- }
199
- });
200
- useTreeViewItemsReordering.params = {
201
- itemsReordering: true,
202
- isItemReorderable: true,
203
- canMoveItemToNewPosition: true,
204
- onItemPositionChange: true
205
- };
@@ -1,30 +0,0 @@
1
- import { TreeViewState } from '@mui/x-tree-view/internals';
2
- import { TreeViewItemId } from '@mui/x-tree-view/models';
3
- import { UseTreeViewItemsReorderingSignature } from "./useTreeViewItemsReordering.types.js";
4
- export declare const itemsReorderingSelectors: {
5
- /**
6
- * Gets the properties of the current reordering.
7
- */
8
- currentReorder: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => {
9
- draggedItemId: TreeViewItemId;
10
- targetItemId: TreeViewItemId;
11
- newPosition: import("./useTreeViewItemsReordering.types.js").TreeViewItemReorderPosition | null;
12
- action: import("@mui/x-tree-view").TreeViewItemsReorderingAction | null;
13
- } | null;
14
- /**
15
- * Gets the properties of the dragged item.
16
- */
17
- draggedItemProperties: (args_0: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("@mui/x-tree-view/internals").UseTreeViewItemsState<import("@mui/x-tree-view").TreeViewDefaultItemModelProperties> & Partial<{}>, itemId: string) => {
18
- newPosition: import("./useTreeViewItemsReordering.types.js").TreeViewItemReorderPosition | null;
19
- action: import("@mui/x-tree-view").TreeViewItemsReorderingAction;
20
- targetDepth: number;
21
- } | null;
22
- /**
23
- * Checks whether an item is being dragged.
24
- */
25
- isDragging: (state: TreeViewState<[UseTreeViewItemsReorderingSignature]>) => boolean;
26
- /**
27
- * Checks whether an item can be reordered.
28
- */
29
- canItemBeReordered: (args_0: import("@mui/x-tree-view/internals/corePlugins/useTreeViewId/useTreeViewId.types").UseTreeViewIdState & import("./useTreeViewItemsReordering.types.js").UseTreeViewItemsReorderingState & Partial<{}>, itemId: string) => boolean;
30
- };