@mui/x-tree-view 8.0.0-alpha.13 → 8.0.0-alpha.14
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 +131 -0
- package/RichTreeView/RichTreeView.js +24 -5
- package/SimpleTreeView/SimpleTreeView.js +8 -6
- package/TreeItem/TreeItem.d.ts +2 -0
- package/TreeItem/TreeItem.js +46 -5
- package/TreeItem/TreeItem.types.d.ts +14 -0
- package/TreeItemIcon/TreeItemIcon.js +2 -0
- package/esm/RichTreeView/RichTreeView.js +24 -5
- package/esm/SimpleTreeView/SimpleTreeView.js +8 -6
- package/esm/TreeItem/TreeItem.d.ts +2 -0
- package/esm/TreeItem/TreeItem.js +45 -4
- package/esm/TreeItem/TreeItem.types.d.ts +14 -0
- package/esm/TreeItemIcon/TreeItemIcon.js +2 -0
- package/esm/hooks/useTreeItemUtils/useTreeItemUtils.d.ts +3 -2
- package/esm/hooks/useTreeItemUtils/useTreeItemUtils.js +21 -9
- package/esm/hooks/useTreeViewApiRef.d.ts +1 -1
- package/esm/index.js +1 -1
- package/esm/internals/index.d.ts +6 -1
- package/esm/internals/index.js +4 -1
- package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +35 -12
- package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +4 -0
- package/esm/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +40 -16
- package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.js +157 -16
- package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +172 -0
- package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +13 -0
- package/esm/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +49 -0
- package/esm/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +2 -2
- package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +16 -7
- package/esm/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +2 -1
- package/esm/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/index.js +1 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +249 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +27 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +83 -0
- package/esm/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.js +1 -0
- package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +4 -4
- package/esm/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +12 -12
- package/esm/internals/utils/selectors.d.ts +7 -0
- package/esm/internals/utils/selectors.js +9 -0
- package/esm/useTreeItem/useTreeItem.d.ts +1 -1
- package/esm/useTreeItem/useTreeItem.js +13 -0
- package/esm/useTreeItem/useTreeItem.types.d.ts +21 -0
- package/esm/utils/cache.d.ts +38 -0
- package/esm/utils/cache.js +31 -0
- package/esm/utils/index.d.ts +1 -0
- package/esm/utils/index.js +1 -0
- package/hooks/useTreeItemUtils/useTreeItemUtils.d.ts +3 -2
- package/hooks/useTreeItemUtils/useTreeItemUtils.js +22 -10
- package/hooks/useTreeViewApiRef.d.ts +1 -1
- package/index.js +1 -1
- package/internals/index.d.ts +6 -1
- package/internals/index.js +33 -0
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +35 -12
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +4 -0
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +40 -16
- package/internals/plugins/useTreeViewItems/useTreeViewItems.js +157 -16
- package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +172 -0
- package/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +14 -1
- package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +49 -0
- package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +1 -1
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +16 -7
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +2 -1
- package/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -0
- package/internals/plugins/useTreeViewLazyLoading/index.js +5 -0
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +249 -0
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +33 -0
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +83 -0
- package/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.js +5 -0
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +4 -4
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +12 -12
- package/internals/utils/selectors.d.ts +7 -0
- package/internals/utils/selectors.js +9 -0
- package/modern/RichTreeView/RichTreeView.js +24 -5
- package/modern/SimpleTreeView/SimpleTreeView.js +8 -6
- package/modern/TreeItem/TreeItem.d.ts +2 -0
- package/modern/TreeItem/TreeItem.js +45 -4
- package/modern/TreeItem/TreeItem.types.d.ts +14 -0
- package/modern/TreeItemIcon/TreeItemIcon.js +2 -0
- package/modern/hooks/useTreeItemUtils/useTreeItemUtils.d.ts +3 -2
- package/modern/hooks/useTreeItemUtils/useTreeItemUtils.js +21 -9
- package/modern/hooks/useTreeViewApiRef.d.ts +1 -1
- package/modern/index.js +1 -1
- package/modern/internals/index.d.ts +6 -1
- package/modern/internals/index.js +4 -1
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +35 -12
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.d.ts +4 -0
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.d.ts +40 -16
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js +157 -16
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.d.ts +172 -0
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.selectors.js +13 -0
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +49 -0
- package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +2 -2
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +16 -7
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types.d.ts +2 -1
- package/modern/internals/plugins/useTreeViewLazyLoading/index.d.ts +1 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/index.js +1 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.d.ts +249 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js +27 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.d.ts +83 -0
- package/modern/internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.types.js +1 -0
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +4 -4
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.d.ts +12 -12
- package/modern/internals/utils/selectors.d.ts +7 -0
- package/modern/internals/utils/selectors.js +9 -0
- package/modern/useTreeItem/useTreeItem.d.ts +1 -1
- package/modern/useTreeItem/useTreeItem.js +13 -0
- package/modern/useTreeItem/useTreeItem.types.d.ts +21 -0
- package/modern/utils/cache.d.ts +38 -0
- package/modern/utils/cache.js +31 -0
- package/modern/utils/index.d.ts +1 -0
- package/modern/utils/index.js +1 -0
- package/package.json +1 -1
- package/tsconfig.build.tsbuildinfo +1 -1
- package/useTreeItem/useTreeItem.d.ts +1 -1
- package/useTreeItem/useTreeItem.js +13 -0
- package/useTreeItem/useTreeItem.types.d.ts +21 -0
- package/utils/cache.d.ts +38 -0
- package/utils/cache.js +38 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +16 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { TreeViewItemMeta } from "../internals/models/index.js";
|
|
2
|
+
type DataSourceCacheDefaultConfig = {
|
|
3
|
+
/**
|
|
4
|
+
* Time To Live for each cache entry in milliseconds.
|
|
5
|
+
* After this time the cache entry will become stale and the next query will result in cache miss.
|
|
6
|
+
* @default 300000 (5 minutes)
|
|
7
|
+
*/
|
|
8
|
+
ttl?: number;
|
|
9
|
+
};
|
|
10
|
+
export interface DataSourceCache {
|
|
11
|
+
/**
|
|
12
|
+
* Set the cache entry for the given key.
|
|
13
|
+
* @param {string} key The key of type `string`
|
|
14
|
+
* @param {TreeViewItemMeta[]} value The value to be stored in the cache
|
|
15
|
+
*/
|
|
16
|
+
set: (key: string, value: TreeViewItemMeta[]) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Get the cache entry for the given key.
|
|
19
|
+
* @param {string} key The key of type `string`
|
|
20
|
+
* @returns {TreeViewItemMeta[]} The value stored in the cache
|
|
21
|
+
*/
|
|
22
|
+
get: (key: string) => TreeViewItemMeta[] | undefined | -1;
|
|
23
|
+
/**
|
|
24
|
+
* Clear the cache.
|
|
25
|
+
*/
|
|
26
|
+
clear: () => void;
|
|
27
|
+
}
|
|
28
|
+
export declare class DataSourceCacheDefault {
|
|
29
|
+
private cache;
|
|
30
|
+
private ttl;
|
|
31
|
+
constructor({
|
|
32
|
+
ttl
|
|
33
|
+
}: DataSourceCacheDefaultConfig);
|
|
34
|
+
set(key: string, value: TreeViewItemMeta[]): void;
|
|
35
|
+
get(key: string): TreeViewItemMeta[] | undefined | -1;
|
|
36
|
+
clear(): void;
|
|
37
|
+
}
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export class DataSourceCacheDefault {
|
|
2
|
+
constructor({
|
|
3
|
+
ttl = 300000
|
|
4
|
+
}) {
|
|
5
|
+
this.cache = void 0;
|
|
6
|
+
this.ttl = void 0;
|
|
7
|
+
this.cache = {};
|
|
8
|
+
this.ttl = ttl;
|
|
9
|
+
}
|
|
10
|
+
set(key, value) {
|
|
11
|
+
const expiry = Date.now() + this.ttl;
|
|
12
|
+
this.cache[key] = {
|
|
13
|
+
value,
|
|
14
|
+
expiry
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
get(key) {
|
|
18
|
+
const entry = this.cache[key];
|
|
19
|
+
if (!entry) {
|
|
20
|
+
return undefined;
|
|
21
|
+
}
|
|
22
|
+
if (Date.now() > entry.expiry) {
|
|
23
|
+
delete this.cache[key];
|
|
24
|
+
return -1;
|
|
25
|
+
}
|
|
26
|
+
return entry.value;
|
|
27
|
+
}
|
|
28
|
+
clear() {
|
|
29
|
+
this.cache = {};
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./cache.js";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./cache.js";
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import type { UseTreeViewLazyLoadingSignature } from '../../internals/plugins/useTreeViewLazyLoading';
|
|
2
3
|
import type { UseTreeViewSelectionSignature } from '../../internals/plugins/useTreeViewSelection';
|
|
3
4
|
import type { UseTreeViewExpansionSignature } from '../../internals/plugins/useTreeViewExpansion';
|
|
4
5
|
import type { UseTreeViewItemsSignature } from '../../internals/plugins/useTreeViewItems';
|
|
@@ -21,7 +22,7 @@ type UseTreeItemUtilsMinimalPlugins = readonly [UseTreeViewSelectionSignature, U
|
|
|
21
22
|
/**
|
|
22
23
|
* Plugins that `useTreeItemUtils` can use if they are present, but are not required.
|
|
23
24
|
*/
|
|
24
|
-
export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature];
|
|
25
|
+
export type UseTreeItemUtilsOptionalPlugins = readonly [UseTreeViewLabelSignature, UseTreeViewLazyLoadingSignature];
|
|
25
26
|
interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins> {
|
|
26
27
|
interactions: UseTreeItemInteractions;
|
|
27
28
|
status: UseTreeItemStatus;
|
|
@@ -30,7 +31,7 @@ interface UseTreeItemUtilsReturnValue<TSignatures extends UseTreeItemUtilsMinima
|
|
|
30
31
|
*/
|
|
31
32
|
publicAPI: TreeViewPublicAPI<TSignatures, TOptionalSignatures>;
|
|
32
33
|
}
|
|
33
|
-
export declare const
|
|
34
|
+
export declare const itemHasChildren: (reactChildren: React.ReactNode) => boolean;
|
|
34
35
|
export declare const useTreeItemUtils: <TSignatures extends UseTreeItemUtilsMinimalPlugins = UseTreeItemUtilsMinimalPlugins, TOptionalSignatures extends UseTreeItemUtilsOptionalPlugins = UseTreeItemUtilsOptionalPlugins>({
|
|
35
36
|
itemId,
|
|
36
37
|
children
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.useTreeItemUtils = exports.
|
|
7
|
+
exports.useTreeItemUtils = exports.itemHasChildren = void 0;
|
|
8
8
|
var _TreeViewProvider = require("../../internals/TreeViewProvider");
|
|
9
9
|
var _useTreeViewLabel = require("../../internals/plugins/useTreeViewLabel");
|
|
10
10
|
var _plugins = require("../../internals/utils/plugins");
|
|
@@ -13,6 +13,7 @@ var _useTreeViewExpansion = require("../../internals/plugins/useTreeViewExpansio
|
|
|
13
13
|
var _useTreeViewFocus = require("../../internals/plugins/useTreeViewFocus/useTreeViewFocus.selectors");
|
|
14
14
|
var _useTreeViewItems = require("../../internals/plugins/useTreeViewItems/useTreeViewItems.selectors");
|
|
15
15
|
var _useTreeViewSelection = require("../../internals/plugins/useTreeViewSelection/useTreeViewSelection.selectors");
|
|
16
|
+
var _useTreeViewLazyLoading = require("../../internals/plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");
|
|
16
17
|
var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTreeViewLabel.selectors");
|
|
17
18
|
/**
|
|
18
19
|
* Plugins that need to be present in the Tree View in order for `useTreeItemUtils` to work correctly.
|
|
@@ -22,13 +23,13 @@ var _useTreeViewLabel2 = require("../../internals/plugins/useTreeViewLabel/useTr
|
|
|
22
23
|
* Plugins that `useTreeItemUtils` can use if they are present, but are not required.
|
|
23
24
|
*/
|
|
24
25
|
|
|
25
|
-
const
|
|
26
|
+
const itemHasChildren = reactChildren => {
|
|
26
27
|
if (Array.isArray(reactChildren)) {
|
|
27
|
-
return reactChildren.length > 0 && reactChildren.some(
|
|
28
|
+
return reactChildren.length > 0 && reactChildren.some(itemHasChildren);
|
|
28
29
|
}
|
|
29
30
|
return Boolean(reactChildren);
|
|
30
31
|
};
|
|
31
|
-
exports.
|
|
32
|
+
exports.itemHasChildren = itemHasChildren;
|
|
32
33
|
const useTreeItemUtils = ({
|
|
33
34
|
itemId,
|
|
34
35
|
children
|
|
@@ -42,6 +43,11 @@ const useTreeItemUtils = ({
|
|
|
42
43
|
},
|
|
43
44
|
publicAPI
|
|
44
45
|
} = (0, _TreeViewProvider.useTreeViewContext)();
|
|
46
|
+
const isItemExpandable = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpandable, itemId);
|
|
47
|
+
const isLazyLoadingEnabled = (0, _useSelector.useSelector)(store, _useTreeViewLazyLoading.selectorIsLazyLoadingEnabled);
|
|
48
|
+
const loading = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? (0, _useTreeViewLazyLoading.selectorIsItemLoading)(state, itemId) : false);
|
|
49
|
+
const error = (0, _useSelector.useSelector)(store, state => isLazyLoadingEnabled ? Boolean((0, _useTreeViewLazyLoading.selectorGetTreeItemError)(state, itemId)) : false);
|
|
50
|
+
const isExpandable = itemHasChildren(children) || isItemExpandable;
|
|
45
51
|
const isExpanded = (0, _useSelector.useSelector)(store, _useTreeViewExpansion.selectorIsItemExpanded, itemId);
|
|
46
52
|
const isFocused = (0, _useSelector.useSelector)(store, _useTreeViewFocus.selectorIsItemFocused, itemId);
|
|
47
53
|
const isSelected = (0, _useSelector.useSelector)(store, _useTreeViewSelection.selectorIsItemSelected, itemId);
|
|
@@ -52,13 +58,15 @@ const useTreeItemUtils = ({
|
|
|
52
58
|
isItemEditable: label.isItemEditable
|
|
53
59
|
}));
|
|
54
60
|
const status = {
|
|
55
|
-
expandable:
|
|
61
|
+
expandable: isExpandable,
|
|
56
62
|
expanded: isExpanded,
|
|
57
63
|
focused: isFocused,
|
|
58
64
|
selected: isSelected,
|
|
59
65
|
disabled: isDisabled,
|
|
60
66
|
editing: isEditing,
|
|
61
|
-
editable: isEditable
|
|
67
|
+
editable: isEditable,
|
|
68
|
+
loading,
|
|
69
|
+
error
|
|
62
70
|
};
|
|
63
71
|
const handleExpansion = event => {
|
|
64
72
|
if (status.disabled) {
|
|
@@ -71,7 +79,11 @@ const useTreeItemUtils = ({
|
|
|
71
79
|
|
|
72
80
|
// If already expanded and trying to toggle selection don't close
|
|
73
81
|
if (status.expandable && !(multiple && (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId))) {
|
|
74
|
-
|
|
82
|
+
// make sure the children selection is propagated again
|
|
83
|
+
instance.setItemExpansion({
|
|
84
|
+
event,
|
|
85
|
+
itemId
|
|
86
|
+
});
|
|
75
87
|
}
|
|
76
88
|
};
|
|
77
89
|
const handleSelection = event => {
|
|
@@ -86,14 +98,14 @@ const useTreeItemUtils = ({
|
|
|
86
98
|
if (event.shiftKey) {
|
|
87
99
|
instance.expandSelectionRange(event, itemId);
|
|
88
100
|
} else {
|
|
89
|
-
instance.
|
|
101
|
+
instance.setItemSelection({
|
|
90
102
|
event,
|
|
91
103
|
itemId,
|
|
92
104
|
keepExistingSelection: true
|
|
93
105
|
});
|
|
94
106
|
}
|
|
95
107
|
} else {
|
|
96
|
-
instance.
|
|
108
|
+
instance.setItemSelection({
|
|
97
109
|
event,
|
|
98
110
|
itemId,
|
|
99
111
|
shouldBeSelected: true
|
|
@@ -105,7 +117,7 @@ const useTreeItemUtils = ({
|
|
|
105
117
|
if (multiSelect && hasShift) {
|
|
106
118
|
instance.expandSelectionRange(event, itemId);
|
|
107
119
|
} else {
|
|
108
|
-
instance.
|
|
120
|
+
instance.setItemSelection({
|
|
109
121
|
event,
|
|
110
122
|
itemId,
|
|
111
123
|
keepExistingSelection: multiSelect,
|
|
@@ -4,4 +4,4 @@ import { RichTreeViewPluginSignatures } from "../RichTreeView/RichTreeView.plugi
|
|
|
4
4
|
/**
|
|
5
5
|
* Hook that instantiates a [[TreeViewApiRef]].
|
|
6
6
|
*/
|
|
7
|
-
export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] =
|
|
7
|
+
export declare const useTreeViewApiRef: <TSignatures extends readonly TreeViewAnyPluginSignature[] = RichTreeViewPluginSignatures>() => React.RefObject<TreeViewPublicAPI<TSignatures> | undefined>;
|
package/index.js
CHANGED
package/internals/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { useTreeView } from "./useTreeView/index.js";
|
|
|
2
2
|
export { TreeViewProvider, useTreeViewContext } from "./TreeViewProvider/index.js";
|
|
3
3
|
export { RichTreeViewItems } from "./components/RichTreeViewItems.js";
|
|
4
4
|
export type { RichTreeViewItemsSlots, RichTreeViewItemsSlotProps } from './components/RichTreeViewItems';
|
|
5
|
-
export { unstable_resetCleanupTracking } from "./hooks/useInstanceEventHandler.js";
|
|
5
|
+
export { unstable_resetCleanupTracking, useInstanceEventHandler } from "./hooks/useInstanceEventHandler.js";
|
|
6
6
|
export { useSelector } from "./hooks/useSelector.js";
|
|
7
7
|
export type { TreeViewPlugin, TreeViewPluginSignature, ConvertPluginsIntoSignatures, MergeSignaturesProperty, TreeViewPublicAPI, TreeViewState, TreeViewExperimentalFeatures, TreeViewItemMeta, TreeViewInstance, TreeViewItemPlugin, TreeViewUsedStore } from './models';
|
|
8
8
|
export type { TreeViewCorePluginParameters } from './corePlugins';
|
|
@@ -21,6 +21,11 @@ export { selectorItemMetaLookup, selectorItemMeta, selectorItemIndex, selectorIt
|
|
|
21
21
|
export type { UseTreeViewItemsSignature, UseTreeViewItemsParameters, UseTreeViewItemsState } from './plugins/useTreeViewItems';
|
|
22
22
|
export { useTreeViewLabel } from "./plugins/useTreeViewLabel/index.js";
|
|
23
23
|
export type { UseTreeViewLabelSignature, UseTreeViewLabelParameters } from './plugins/useTreeViewLabel';
|
|
24
|
+
export { selectorIsItemExpanded } from "./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors.js";
|
|
25
|
+
export { selectorIsItemSelected } from "./plugins/useTreeViewSelection/useTreeViewSelection.selectors.js";
|
|
26
|
+
export { selectorDataSourceState, selectorGetTreeItemError } from "./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors.js";
|
|
27
|
+
export type { UseTreeViewLazyLoadingSignature } from './plugins/useTreeViewLazyLoading';
|
|
28
|
+
export type { UseTreeViewLazyLoadingParameters } from './plugins/useTreeViewLazyLoading';
|
|
24
29
|
export { useTreeViewJSXItems } from "./plugins/useTreeViewJSXItems/index.js";
|
|
25
30
|
export type { UseTreeViewJSXItemsSignature, UseTreeViewJSXItemsParameters } from './plugins/useTreeViewJSXItems';
|
|
26
31
|
export { createSelector } from "./utils/selectors.js";
|
package/internals/index.js
CHANGED
|
@@ -45,6 +45,30 @@ Object.defineProperty(exports, "isTargetInDescendants", {
|
|
|
45
45
|
return _tree.isTargetInDescendants;
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
|
+
Object.defineProperty(exports, "selectorDataSourceState", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () {
|
|
51
|
+
return _useTreeViewLazyLoading.selectorDataSourceState;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(exports, "selectorGetTreeItemError", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () {
|
|
57
|
+
return _useTreeViewLazyLoading.selectorGetTreeItemError;
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
Object.defineProperty(exports, "selectorIsItemExpanded", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () {
|
|
63
|
+
return _useTreeViewExpansion2.selectorIsItemExpanded;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(exports, "selectorIsItemSelected", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _useTreeViewSelection2.selectorIsItemSelected;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
48
72
|
Object.defineProperty(exports, "selectorItemIndex", {
|
|
49
73
|
enumerable: true,
|
|
50
74
|
get: function () {
|
|
@@ -75,6 +99,12 @@ Object.defineProperty(exports, "unstable_resetCleanupTracking", {
|
|
|
75
99
|
return _useInstanceEventHandler.unstable_resetCleanupTracking;
|
|
76
100
|
}
|
|
77
101
|
});
|
|
102
|
+
Object.defineProperty(exports, "useInstanceEventHandler", {
|
|
103
|
+
enumerable: true,
|
|
104
|
+
get: function () {
|
|
105
|
+
return _useInstanceEventHandler.useInstanceEventHandler;
|
|
106
|
+
}
|
|
107
|
+
});
|
|
78
108
|
Object.defineProperty(exports, "useSelector", {
|
|
79
109
|
enumerable: true,
|
|
80
110
|
get: function () {
|
|
@@ -154,6 +184,9 @@ var _useTreeViewIcons = require("./plugins/useTreeViewIcons");
|
|
|
154
184
|
var _useTreeViewItems = require("./plugins/useTreeViewItems");
|
|
155
185
|
var _useTreeViewItems2 = require("./plugins/useTreeViewItems/useTreeViewItems.selectors");
|
|
156
186
|
var _useTreeViewLabel = require("./plugins/useTreeViewLabel");
|
|
187
|
+
var _useTreeViewExpansion2 = require("./plugins/useTreeViewExpansion/useTreeViewExpansion.selectors");
|
|
188
|
+
var _useTreeViewSelection2 = require("./plugins/useTreeViewSelection/useTreeViewSelection.selectors");
|
|
189
|
+
var _useTreeViewLazyLoading = require("./plugins/useTreeViewLazyLoading/useTreeViewLazyLoading.selectors");
|
|
157
190
|
var _useTreeViewJSXItems = require("./plugins/useTreeViewJSXItems");
|
|
158
191
|
var _selectors = require("./utils/selectors");
|
|
159
192
|
var _tree = require("./utils/tree");
|
|
@@ -11,6 +11,7 @@ var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedE
|
|
|
11
11
|
var _useTreeViewExpansion = require("./useTreeViewExpansion.selectors");
|
|
12
12
|
var _useTreeViewExpansion2 = require("./useTreeViewExpansion.utils");
|
|
13
13
|
var _useTreeViewItems = require("../useTreeViewItems/useTreeViewItems.selectors");
|
|
14
|
+
var _publishTreeViewEvent = require("../../utils/publishTreeViewEvent");
|
|
14
15
|
const useTreeViewExpansion = ({
|
|
15
16
|
instance,
|
|
16
17
|
store,
|
|
@@ -44,26 +45,48 @@ const useTreeViewExpansion = ({
|
|
|
44
45
|
params.onExpandedItemsChange?.(event, value);
|
|
45
46
|
models.expandedItems.setControlledValue(value);
|
|
46
47
|
};
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
|
|
53
|
-
if (isExpandedBefore === isExpanded) {
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
48
|
+
const applyItemExpansion = (0, _useEventCallback.default)(({
|
|
49
|
+
itemId,
|
|
50
|
+
event,
|
|
51
|
+
shouldBeExpanded
|
|
52
|
+
}) => {
|
|
56
53
|
let newExpanded;
|
|
57
|
-
if (
|
|
54
|
+
if (shouldBeExpanded) {
|
|
58
55
|
newExpanded = [itemId].concat(models.expandedItems.value);
|
|
59
56
|
} else {
|
|
60
57
|
newExpanded = models.expandedItems.value.filter(id => id !== itemId);
|
|
61
58
|
}
|
|
62
59
|
if (params.onItemExpansionToggle) {
|
|
63
|
-
params.onItemExpansionToggle(event, itemId,
|
|
60
|
+
params.onItemExpansionToggle(event, itemId, shouldBeExpanded);
|
|
64
61
|
}
|
|
65
62
|
setExpandedItems(event, newExpanded);
|
|
66
63
|
});
|
|
64
|
+
const setItemExpansion = (0, _useEventCallback.default)(({
|
|
65
|
+
itemId,
|
|
66
|
+
event = null,
|
|
67
|
+
shouldBeExpanded
|
|
68
|
+
}) => {
|
|
69
|
+
const isExpandedBefore = (0, _useTreeViewExpansion.selectorIsItemExpanded)(store.value, itemId);
|
|
70
|
+
const cleanShouldBeExpanded = shouldBeExpanded ?? !isExpandedBefore;
|
|
71
|
+
if (isExpandedBefore === cleanShouldBeExpanded) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
const eventParameters = {
|
|
75
|
+
isExpansionPrevented: false,
|
|
76
|
+
shouldBeExpanded: cleanShouldBeExpanded,
|
|
77
|
+
event,
|
|
78
|
+
itemId
|
|
79
|
+
};
|
|
80
|
+
(0, _publishTreeViewEvent.publishTreeViewEvent)(instance, 'beforeItemToggleExpansion', eventParameters);
|
|
81
|
+
if (eventParameters.isExpansionPrevented) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
instance.applyItemExpansion({
|
|
85
|
+
itemId,
|
|
86
|
+
event,
|
|
87
|
+
shouldBeExpanded: cleanShouldBeExpanded
|
|
88
|
+
});
|
|
89
|
+
});
|
|
67
90
|
const expandAllSiblings = (event, itemId) => {
|
|
68
91
|
const itemMeta = (0, _useTreeViewItems.selectorItemMeta)(store.value, itemId);
|
|
69
92
|
if (itemMeta == null) {
|
|
@@ -87,7 +110,7 @@ const useTreeViewExpansion = ({
|
|
|
87
110
|
},
|
|
88
111
|
instance: {
|
|
89
112
|
setItemExpansion,
|
|
90
|
-
|
|
113
|
+
applyItemExpansion,
|
|
91
114
|
expandAllSiblings
|
|
92
115
|
}
|
|
93
116
|
};
|
|
@@ -90,6 +90,8 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
|
|
|
90
90
|
[itemId: string]: number;
|
|
91
91
|
};
|
|
92
92
|
};
|
|
93
|
+
loading: boolean;
|
|
94
|
+
error: Error | null;
|
|
93
95
|
}) => {
|
|
94
96
|
[itemId: string]: import("../..").TreeViewItemMeta;
|
|
95
97
|
};
|
|
@@ -109,6 +111,8 @@ export declare const selectorIsItemExpandable: ((state: any, itemId: string | nu
|
|
|
109
111
|
[itemId: string]: number;
|
|
110
112
|
};
|
|
111
113
|
};
|
|
114
|
+
loading: boolean;
|
|
115
|
+
error: Error | null;
|
|
112
116
|
}) => {
|
|
113
117
|
[itemId: string]: import("../..").TreeViewItemMeta;
|
|
114
118
|
}) & {
|
|
@@ -7,26 +7,38 @@ import { UseTreeViewLabelSignature } from "../useTreeViewLabel/index.js";
|
|
|
7
7
|
export interface UseTreeViewExpansionPublicAPI {
|
|
8
8
|
/**
|
|
9
9
|
* Change the expansion status of a given item.
|
|
10
|
-
* @param {
|
|
11
|
-
* @param {string} itemId The id of the item to expand of collapse.
|
|
12
|
-
* @param {
|
|
10
|
+
* @param {object} parameters The parameters of the method.
|
|
11
|
+
* @param {string} parameters.itemId The id of the item to expand of collapse.
|
|
12
|
+
* @param {React.SyntheticEvent} parameters.event The DOM event that triggered the change.
|
|
13
|
+
* @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed. If not defined, the item's expansion status will be the toggled.
|
|
13
14
|
*/
|
|
14
|
-
setItemExpansion: (
|
|
15
|
+
setItemExpansion: (parameters: {
|
|
16
|
+
itemId: string;
|
|
17
|
+
event?: React.SyntheticEvent;
|
|
18
|
+
shouldBeExpanded?: boolean;
|
|
19
|
+
}) => void;
|
|
15
20
|
}
|
|
16
21
|
export interface UseTreeViewExpansionInstance extends UseTreeViewExpansionPublicAPI {
|
|
17
|
-
/**
|
|
18
|
-
* Toggle the current expansion of an item.
|
|
19
|
-
* If it is expanded, it will be collapsed, and vice versa.
|
|
20
|
-
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
|
|
21
|
-
* @param {TreeViewItemId} itemId The id of the item to toggle.
|
|
22
|
-
*/
|
|
23
|
-
toggleItemExpansion: (event: React.SyntheticEvent, itemId: TreeViewItemId) => void;
|
|
24
22
|
/**
|
|
25
23
|
* Expand all the siblings (i.e.: the items that have the same parent) of a given item.
|
|
26
24
|
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
|
|
27
25
|
* @param {TreeViewItemId} itemId The id of the item whose siblings will be expanded.
|
|
28
26
|
*/
|
|
29
27
|
expandAllSiblings: (event: React.KeyboardEvent, itemId: TreeViewItemId) => void;
|
|
28
|
+
/**
|
|
29
|
+
* APply the new expansion status of a given item.
|
|
30
|
+
* Is used by the `setItemExpansion` method and by the `useTreeViewLazyLoading` plugin.
|
|
31
|
+
* Unlike `setItemExpansion`, this method does not trigger the lazy loading.
|
|
32
|
+
* @param {object} parameters The parameters of the method.
|
|
33
|
+
* @param {string} parameters.itemId The id of the item to expand of collapse.
|
|
34
|
+
* @param {React.SyntheticEvent | null} parameters.event The DOM event that triggered the change.
|
|
35
|
+
* @param {boolean} parameters.shouldBeExpanded If `true` the item will be expanded. If `false` the item will be collapsed.
|
|
36
|
+
*/
|
|
37
|
+
applyItemExpansion: (parameters: {
|
|
38
|
+
itemId: string;
|
|
39
|
+
event: React.SyntheticEvent | null;
|
|
40
|
+
shouldBeExpanded: boolean;
|
|
41
|
+
}) => void;
|
|
30
42
|
}
|
|
31
43
|
export interface UseTreeViewExpansionParameters {
|
|
32
44
|
/**
|
|
@@ -42,17 +54,17 @@ export interface UseTreeViewExpansionParameters {
|
|
|
42
54
|
defaultExpandedItems?: string[];
|
|
43
55
|
/**
|
|
44
56
|
* Callback fired when Tree Items are expanded/collapsed.
|
|
45
|
-
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
|
|
57
|
+
* @param {React.SyntheticEvent} event The DOM event that triggered the change. Can be null when the change is caused by the `publicAPI.setItemExpansion()` method.
|
|
46
58
|
* @param {array} itemIds The ids of the expanded items.
|
|
47
59
|
*/
|
|
48
|
-
onExpandedItemsChange?: (event: React.SyntheticEvent, itemIds: string[]) => void;
|
|
60
|
+
onExpandedItemsChange?: (event: React.SyntheticEvent | null, itemIds: string[]) => void;
|
|
49
61
|
/**
|
|
50
62
|
* Callback fired when a Tree Item is expanded or collapsed.
|
|
51
|
-
* @param {React.SyntheticEvent} event The DOM event that triggered the change.
|
|
63
|
+
* @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.
|
|
52
64
|
* @param {array} itemId The itemId of the modified item.
|
|
53
65
|
* @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed.
|
|
54
66
|
*/
|
|
55
|
-
onItemExpansionToggle?: (event: React.SyntheticEvent, itemId: string, isExpanded: boolean) => void;
|
|
67
|
+
onItemExpansionToggle?: (event: React.SyntheticEvent | null, itemId: string, isExpanded: boolean) => void;
|
|
56
68
|
/**
|
|
57
69
|
* The slot that triggers the item's expansion when clicked.
|
|
58
70
|
* @default 'content'
|
|
@@ -66,6 +78,16 @@ export interface UseTreeViewExpansionState {
|
|
|
66
78
|
expansionTrigger: 'content' | 'iconContainer';
|
|
67
79
|
};
|
|
68
80
|
}
|
|
81
|
+
interface UseTreeViewExpansionEventLookup {
|
|
82
|
+
beforeItemToggleExpansion: {
|
|
83
|
+
params: {
|
|
84
|
+
isExpansionPrevented: boolean;
|
|
85
|
+
shouldBeExpanded: boolean;
|
|
86
|
+
event: React.SyntheticEvent | null;
|
|
87
|
+
itemId: TreeViewItemId;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
}
|
|
69
91
|
export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
|
|
70
92
|
params: UseTreeViewExpansionParameters;
|
|
71
93
|
defaultizedParams: UseTreeViewExpansionDefaultizedParameters;
|
|
@@ -75,4 +97,6 @@ export type UseTreeViewExpansionSignature = TreeViewPluginSignature<{
|
|
|
75
97
|
state: UseTreeViewExpansionState;
|
|
76
98
|
dependencies: [UseTreeViewItemsSignature];
|
|
77
99
|
optionalDependencies: [UseTreeViewLabelSignature];
|
|
78
|
-
|
|
100
|
+
events: UseTreeViewExpansionEventLookup;
|
|
101
|
+
}>;
|
|
102
|
+
export {};
|