@mui/x-tree-view 7.1.1 → 7.2.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 +86 -0
- package/RichTreeView/RichTreeView.types.d.ts +3 -3
- package/TreeItem/TreeItem.js +1 -1
- package/TreeItem2/TreeItem2.d.ts +5 -1
- package/TreeItem2/TreeItem2.js +0 -1
- package/index.js +1 -1
- package/internals/TreeViewProvider/TreeViewChildrenItemProvider.d.ts +16 -0
- package/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +57 -0
- package/internals/TreeViewProvider/TreeViewContext.d.ts +2 -0
- package/internals/TreeViewProvider/TreeViewProvider.js +2 -3
- package/internals/TreeViewProvider/TreeViewProvider.types.d.ts +3 -1
- package/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +7 -8
- package/internals/models/plugin.d.ts +13 -5
- package/internals/models/treeView.d.ts +1 -2
- package/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +15 -15
- package/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +25 -26
- package/internals/plugins/useTreeViewId/useTreeViewId.js +5 -7
- package/internals/plugins/useTreeViewId/useTreeViewId.types.d.ts +1 -1
- package/internals/plugins/useTreeViewItems/useTreeViewItems.js +60 -50
- package/internals/plugins/useTreeViewItems/useTreeViewItems.types.d.ts +19 -15
- package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.d.ts +4 -0
- package/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +8 -0
- package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +66 -41
- package/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.types.d.ts +3 -2
- package/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +20 -18
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +11 -22
- package/internals/useTreeView/useTreeView.js +21 -3
- package/internals/utils/tree.d.ts +8 -0
- package/internals/utils/tree.js +137 -0
- package/modern/TreeItem/TreeItem.js +1 -1
- package/modern/TreeItem2/TreeItem2.js +0 -1
- package/modern/index.js +1 -1
- package/modern/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +57 -0
- package/modern/internals/TreeViewProvider/TreeViewProvider.js +2 -3
- package/modern/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +7 -8
- package/modern/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +15 -15
- package/modern/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +25 -26
- package/modern/internals/plugins/useTreeViewId/useTreeViewId.js +5 -7
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.js +60 -50
- package/modern/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +8 -0
- package/modern/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +66 -41
- package/modern/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +20 -18
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +11 -22
- package/modern/internals/useTreeView/useTreeView.js +21 -3
- package/modern/internals/utils/tree.js +137 -0
- package/modern/useTreeItem2/useTreeItem2.js +1 -1
- package/node/TreeItem/TreeItem.js +1 -1
- package/node/TreeItem2/TreeItem2.js +0 -1
- package/node/index.js +1 -1
- package/node/internals/TreeViewProvider/TreeViewChildrenItemProvider.js +67 -0
- package/node/internals/TreeViewProvider/TreeViewProvider.js +2 -3
- package/node/internals/corePlugins/useTreeViewInstanceEvents/useTreeViewInstanceEvents.js +7 -8
- package/node/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.js +15 -15
- package/node/internals/plugins/useTreeViewFocus/useTreeViewFocus.js +25 -26
- package/node/internals/plugins/useTreeViewId/useTreeViewId.js +5 -7
- package/node/internals/plugins/useTreeViewItems/useTreeViewItems.js +60 -50
- package/node/internals/plugins/useTreeViewItems/useTreeViewItems.utils.js +15 -0
- package/node/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.js +66 -41
- package/node/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.js +20 -18
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.js +11 -22
- package/node/internals/useTreeView/useTreeView.js +21 -3
- package/node/internals/utils/tree.js +148 -0
- package/node/useTreeItem2/useTreeItem2.js +1 -1
- package/package.json +1 -1
- package/useTreeItem2/useTreeItem2.js +1 -1
- package/internals/TreeViewProvider/DescendantProvider.d.ts +0 -38
- package/internals/TreeViewProvider/DescendantProvider.js +0 -176
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.d.ts +0 -17
- package/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +0 -55
- package/internals/useTreeView/useTreeView.utils.d.ts +0 -9
- package/internals/useTreeView/useTreeView.utils.js +0 -46
- package/modern/internals/TreeViewProvider/DescendantProvider.js +0 -176
- package/modern/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +0 -55
- package/modern/internals/useTreeView/useTreeView.utils.js +0 -46
- package/node/internals/TreeViewProvider/DescendantProvider.js +0 -185
- package/node/internals/plugins/useTreeViewSelection/useTreeViewSelection.utils.js +0 -62
- package/node/internals/useTreeView/useTreeView.utils.js +0 -58
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
const getLastNavigableItemInArray = (instance, items) => {
|
|
2
|
+
// Equivalent to Array.prototype.findLastIndex
|
|
3
|
+
let itemIndex = items.length - 1;
|
|
4
|
+
while (itemIndex >= 0 && !instance.isItemNavigable(items[itemIndex])) {
|
|
5
|
+
itemIndex -= 1;
|
|
6
|
+
}
|
|
7
|
+
if (itemIndex === -1) {
|
|
8
|
+
return undefined;
|
|
9
|
+
}
|
|
10
|
+
return items[itemIndex];
|
|
11
|
+
};
|
|
12
|
+
export const getPreviousNavigableItem = (instance, itemId) => {
|
|
13
|
+
const itemMeta = instance.getItemMeta(itemId);
|
|
14
|
+
const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
|
|
15
|
+
const itemIndex = instance.getItemIndex(itemId);
|
|
16
|
+
|
|
17
|
+
// TODO: What should we do if the parent is not navigable?
|
|
18
|
+
if (itemIndex === 0) {
|
|
19
|
+
return itemMeta.parentId;
|
|
20
|
+
}
|
|
21
|
+
let currentItemId = siblings[itemIndex - 1];
|
|
22
|
+
let lastNavigableChild = getLastNavigableItemInArray(instance, instance.getItemOrderedChildrenIds(currentItemId));
|
|
23
|
+
while (instance.isItemExpanded(currentItemId) && lastNavigableChild != null) {
|
|
24
|
+
currentItemId = lastNavigableChild;
|
|
25
|
+
lastNavigableChild = instance.getItemOrderedChildrenIds(currentItemId).find(instance.isItemNavigable);
|
|
26
|
+
}
|
|
27
|
+
return currentItemId;
|
|
28
|
+
};
|
|
29
|
+
export const getNextNavigableItem = (instance, itemId) => {
|
|
30
|
+
// If the item is expanded and has some navigable children, return the first of them.
|
|
31
|
+
if (instance.isItemExpanded(itemId)) {
|
|
32
|
+
const firstNavigableChild = instance.getItemOrderedChildrenIds(itemId).find(instance.isItemNavigable);
|
|
33
|
+
if (firstNavigableChild != null) {
|
|
34
|
+
return firstNavigableChild;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
let itemMeta = instance.getItemMeta(itemId);
|
|
38
|
+
while (itemMeta != null) {
|
|
39
|
+
// Try to find the first navigable sibling after the current item.
|
|
40
|
+
const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
|
|
41
|
+
const currentItemIndex = instance.getItemIndex(itemMeta.id);
|
|
42
|
+
if (currentItemIndex < siblings.length - 1) {
|
|
43
|
+
let nextItemIndex = currentItemIndex + 1;
|
|
44
|
+
while (!instance.isItemNavigable(siblings[nextItemIndex]) && nextItemIndex < siblings.length - 1) {
|
|
45
|
+
nextItemIndex += 1;
|
|
46
|
+
}
|
|
47
|
+
if (instance.isItemNavigable(siblings[nextItemIndex])) {
|
|
48
|
+
return siblings[nextItemIndex];
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// If the sibling does not exist, go up a level to the parent and try again.
|
|
53
|
+
itemMeta = instance.getItemMeta(itemMeta.parentId);
|
|
54
|
+
}
|
|
55
|
+
return null;
|
|
56
|
+
};
|
|
57
|
+
export const getLastNavigableItem = instance => {
|
|
58
|
+
let itemId = null;
|
|
59
|
+
while (itemId == null || instance.isItemExpanded(itemId)) {
|
|
60
|
+
const children = instance.getItemOrderedChildrenIds(itemId);
|
|
61
|
+
const lastNavigableChild = getLastNavigableItemInArray(instance, children);
|
|
62
|
+
|
|
63
|
+
// The item has no navigable children.
|
|
64
|
+
if (lastNavigableChild == null) {
|
|
65
|
+
return itemId;
|
|
66
|
+
}
|
|
67
|
+
itemId = lastNavigableChild;
|
|
68
|
+
}
|
|
69
|
+
return itemId;
|
|
70
|
+
};
|
|
71
|
+
export const getFirstNavigableItem = instance => instance.getItemOrderedChildrenIds(null).find(instance.isItemNavigable);
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* This is used to determine the start and end of a selection range so
|
|
75
|
+
* we can get the items between the two border items.
|
|
76
|
+
*
|
|
77
|
+
* It finds the items' common ancestor using
|
|
78
|
+
* a naive implementation of a lowest common ancestor algorithm
|
|
79
|
+
* (https://en.wikipedia.org/wiki/Lowest_common_ancestor).
|
|
80
|
+
* Then compares the ancestor's 2 children that are ancestors of itemA and ItemB
|
|
81
|
+
* so we can compare their indexes to work out which item comes first in a depth first search.
|
|
82
|
+
* (https://en.wikipedia.org/wiki/Depth-first_search)
|
|
83
|
+
*
|
|
84
|
+
* Another way to put it is which item is shallower in a trémaux tree
|
|
85
|
+
* https://en.wikipedia.org/wiki/Tr%C3%A9maux_tree
|
|
86
|
+
*/
|
|
87
|
+
const findOrderInTremauxTree = (instance, itemAId, itemBId) => {
|
|
88
|
+
if (itemAId === itemBId) {
|
|
89
|
+
return [itemAId, itemBId];
|
|
90
|
+
}
|
|
91
|
+
const itemMetaA = instance.getItemMeta(itemAId);
|
|
92
|
+
const itemMetaB = instance.getItemMeta(itemBId);
|
|
93
|
+
if (itemMetaA.parentId === itemMetaB.id || itemMetaB.parentId === itemMetaA.id) {
|
|
94
|
+
return itemMetaB.parentId === itemMetaA.id ? [itemMetaA.id, itemMetaB.id] : [itemMetaB.id, itemMetaA.id];
|
|
95
|
+
}
|
|
96
|
+
const aFamily = [itemMetaA.id];
|
|
97
|
+
const bFamily = [itemMetaB.id];
|
|
98
|
+
let aAncestor = itemMetaA.parentId;
|
|
99
|
+
let bAncestor = itemMetaB.parentId;
|
|
100
|
+
let aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
|
|
101
|
+
let bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
|
|
102
|
+
let continueA = true;
|
|
103
|
+
let continueB = true;
|
|
104
|
+
while (!bAncestorIsCommon && !aAncestorIsCommon) {
|
|
105
|
+
if (continueA) {
|
|
106
|
+
aFamily.push(aAncestor);
|
|
107
|
+
aAncestorIsCommon = bFamily.indexOf(aAncestor) !== -1;
|
|
108
|
+
continueA = aAncestor !== null;
|
|
109
|
+
if (!aAncestorIsCommon && continueA) {
|
|
110
|
+
aAncestor = instance.getItemMeta(aAncestor).parentId;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
if (continueB && !aAncestorIsCommon) {
|
|
114
|
+
bFamily.push(bAncestor);
|
|
115
|
+
bAncestorIsCommon = aFamily.indexOf(bAncestor) !== -1;
|
|
116
|
+
continueB = bAncestor !== null;
|
|
117
|
+
if (!bAncestorIsCommon && continueB) {
|
|
118
|
+
bAncestor = instance.getItemMeta(bAncestor).parentId;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
const commonAncestor = aAncestorIsCommon ? aAncestor : bAncestor;
|
|
123
|
+
const ancestorFamily = instance.getItemOrderedChildrenIds(commonAncestor);
|
|
124
|
+
const aSide = aFamily[aFamily.indexOf(commonAncestor) - 1];
|
|
125
|
+
const bSide = bFamily[bFamily.indexOf(commonAncestor) - 1];
|
|
126
|
+
return ancestorFamily.indexOf(aSide) < ancestorFamily.indexOf(bSide) ? [itemAId, itemBId] : [itemBId, itemAId];
|
|
127
|
+
};
|
|
128
|
+
export const getNavigableItemsInRange = (instance, itemAId, itemBId) => {
|
|
129
|
+
const [first, last] = findOrderInTremauxTree(instance, itemAId, itemBId);
|
|
130
|
+
const items = [first];
|
|
131
|
+
let current = first;
|
|
132
|
+
while (current !== last) {
|
|
133
|
+
current = getNextNavigableItem(instance, current);
|
|
134
|
+
items.push(current);
|
|
135
|
+
}
|
|
136
|
+
return items;
|
|
137
|
+
};
|
|
@@ -31,7 +31,7 @@ export const useTreeItem2 = parameters => {
|
|
|
31
31
|
itemId,
|
|
32
32
|
children
|
|
33
33
|
});
|
|
34
|
-
const idAttribute = instance.
|
|
34
|
+
const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
|
|
35
35
|
const handleRootRef = useForkRef(rootRef, pluginRootRef);
|
|
36
36
|
const createRootHandleFocus = otherHandlers => event => {
|
|
37
37
|
otherHandlers.onFocus?.(event);
|
|
@@ -278,7 +278,7 @@ const TreeItem = exports.TreeItem = /*#__PURE__*/React.forwardRef(function TreeI
|
|
|
278
278
|
onKeyDown?.(event);
|
|
279
279
|
instance.handleItemKeyDown(event, itemId);
|
|
280
280
|
};
|
|
281
|
-
const idAttribute = instance.
|
|
281
|
+
const idAttribute = instance.getTreeItemIdAttribute(itemId, id);
|
|
282
282
|
const tabIndex = instance.canItemBeTabbed(itemId) ? 0 : -1;
|
|
283
283
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeItem2Provider.TreeItem2Provider, {
|
|
284
284
|
itemId: itemId,
|
package/node/index.js
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TreeViewChildrenItemContext = void 0;
|
|
8
|
+
exports.TreeViewChildrenItemProvider = TreeViewChildrenItemProvider;
|
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _useTreeViewContext = require("./useTreeViewContext");
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
15
|
+
const TreeViewChildrenItemContext = exports.TreeViewChildrenItemContext = /*#__PURE__*/React.createContext(null);
|
|
16
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
17
|
+
TreeViewChildrenItemContext.displayName = 'TreeViewChildrenItemContext';
|
|
18
|
+
}
|
|
19
|
+
function TreeViewChildrenItemProvider(props) {
|
|
20
|
+
const {
|
|
21
|
+
children,
|
|
22
|
+
itemId = null
|
|
23
|
+
} = props;
|
|
24
|
+
const {
|
|
25
|
+
instance,
|
|
26
|
+
rootRef
|
|
27
|
+
} = (0, _useTreeViewContext.useTreeViewContext)();
|
|
28
|
+
const childrenIdAttrToIdRef = React.useRef(new Map());
|
|
29
|
+
React.useEffect(() => {
|
|
30
|
+
if (!rootRef.current) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
let idAttr = null;
|
|
34
|
+
if (itemId == null) {
|
|
35
|
+
idAttr = rootRef.current.id;
|
|
36
|
+
} else {
|
|
37
|
+
// Undefined during 1st render
|
|
38
|
+
const itemMeta = instance.getItemMeta(itemId);
|
|
39
|
+
if (itemMeta !== undefined) {
|
|
40
|
+
idAttr = instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
if (idAttr == null) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
const previousChildrenIds = instance.getItemOrderedChildrenIds(itemId ?? null) ?? [];
|
|
47
|
+
const childrenElements = rootRef.current.querySelectorAll(`${itemId == null ? '' : `*[id="${idAttr}"] `}[role="treeitem"]:not(*[id="${idAttr}"] [role="treeitem"] [role="treeitem"])`);
|
|
48
|
+
const childrenIds = Array.from(childrenElements).map(child => childrenIdAttrToIdRef.current.get(child.id));
|
|
49
|
+
const hasChanged = childrenIds.length !== previousChildrenIds.length || childrenIds.some((childId, index) => childId !== previousChildrenIds[index]);
|
|
50
|
+
if (hasChanged) {
|
|
51
|
+
instance.setJSXItemsOrderedChildrenIds(itemId ?? null, childrenIds);
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
const value = React.useMemo(() => ({
|
|
55
|
+
registerChild: (childIdAttribute, childItemId) => childrenIdAttrToIdRef.current.set(childIdAttribute, childItemId),
|
|
56
|
+
unregisterChild: childIdAttribute => childrenIdAttrToIdRef.current.delete(childIdAttribute),
|
|
57
|
+
parentId: itemId
|
|
58
|
+
}), [itemId]);
|
|
59
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TreeViewChildrenItemContext.Provider, {
|
|
60
|
+
value: value,
|
|
61
|
+
children: children
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
process.env.NODE_ENV !== "production" ? TreeViewChildrenItemProvider.propTypes = {
|
|
65
|
+
children: _propTypes.default.node,
|
|
66
|
+
id: _propTypes.default.string
|
|
67
|
+
} : void 0;
|
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.TreeViewProvider = TreeViewProvider;
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _TreeViewContext = require("./TreeViewContext");
|
|
9
|
-
var _DescendantProvider = require("./DescendantProvider");
|
|
10
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -22,8 +21,8 @@ function TreeViewProvider(props) {
|
|
|
22
21
|
} = props;
|
|
23
22
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TreeViewContext.TreeViewContext.Provider, {
|
|
24
23
|
value: value,
|
|
25
|
-
children:
|
|
26
|
-
children
|
|
24
|
+
children: value.wrapRoot({
|
|
25
|
+
children
|
|
27
26
|
})
|
|
28
27
|
});
|
|
29
28
|
}
|
|
@@ -6,15 +6,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.useTreeViewInstanceEvents = void 0;
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _EventManager = require("../../utils/EventManager");
|
|
9
|
-
var _useTreeView = require("../../useTreeView/useTreeView.utils");
|
|
10
9
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
11
|
const isSyntheticEvent = event => {
|
|
13
12
|
return event.isPropagationStopped !== undefined;
|
|
14
13
|
};
|
|
15
|
-
const useTreeViewInstanceEvents = ({
|
|
16
|
-
instance
|
|
17
|
-
}) => {
|
|
14
|
+
const useTreeViewInstanceEvents = () => {
|
|
18
15
|
const [eventManager] = React.useState(() => new _EventManager.EventManager());
|
|
19
16
|
const publishEvent = React.useCallback((...args) => {
|
|
20
17
|
const [name, params, event = {}] = args;
|
|
@@ -30,10 +27,12 @@ const useTreeViewInstanceEvents = ({
|
|
|
30
27
|
eventManager.removeListener(event, handler);
|
|
31
28
|
};
|
|
32
29
|
}, [eventManager]);
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
return {
|
|
31
|
+
instance: {
|
|
32
|
+
$$publishEvent: publishEvent,
|
|
33
|
+
$$subscribeEvent: subscribeEvent
|
|
34
|
+
}
|
|
35
|
+
};
|
|
37
36
|
};
|
|
38
37
|
exports.useTreeViewInstanceEvents = useTreeViewInstanceEvents;
|
|
39
38
|
useTreeViewInstanceEvents.params = {};
|
|
@@ -8,12 +8,10 @@ exports.useTreeViewExpansion = void 0;
|
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
11
|
-
var _useTreeView = require("../../useTreeView/useTreeView.utils");
|
|
12
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
13
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
13
|
const useTreeViewExpansion = ({
|
|
15
14
|
instance,
|
|
16
|
-
publicAPI,
|
|
17
15
|
params,
|
|
18
16
|
models
|
|
19
17
|
}) => {
|
|
@@ -29,7 +27,7 @@ const useTreeViewExpansion = ({
|
|
|
29
27
|
models.expandedItems.setControlledValue(value);
|
|
30
28
|
};
|
|
31
29
|
const isItemExpanded = React.useCallback(itemId => expandedItemsMap.has(itemId), [expandedItemsMap]);
|
|
32
|
-
const isItemExpandable = React.useCallback(itemId => !!instance.
|
|
30
|
+
const isItemExpandable = React.useCallback(itemId => !!instance.getItemMeta(itemId)?.expandable, [instance]);
|
|
33
31
|
const toggleItemExpansion = (0, _useEventCallback.default)((event, itemId) => {
|
|
34
32
|
const isExpandedBefore = instance.isItemExpanded(itemId);
|
|
35
33
|
instance.setItemExpansion(event, itemId, !isExpandedBefore);
|
|
@@ -51,8 +49,8 @@ const useTreeViewExpansion = ({
|
|
|
51
49
|
setExpandedItems(event, newExpanded);
|
|
52
50
|
});
|
|
53
51
|
const expandAllSiblings = (event, itemId) => {
|
|
54
|
-
const
|
|
55
|
-
const siblings = instance.
|
|
52
|
+
const itemMeta = instance.getItemMeta(itemId);
|
|
53
|
+
const siblings = instance.getItemOrderedChildrenIds(itemMeta.parentId);
|
|
56
54
|
const diff = siblings.filter(child => instance.isItemExpandable(child) && !instance.isItemExpanded(child));
|
|
57
55
|
const newExpanded = models.expandedItems.value.concat(diff);
|
|
58
56
|
if (diff.length > 0) {
|
|
@@ -64,16 +62,18 @@ const useTreeViewExpansion = ({
|
|
|
64
62
|
setExpandedItems(event, newExpanded);
|
|
65
63
|
}
|
|
66
64
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
65
|
+
return {
|
|
66
|
+
publicAPI: {
|
|
67
|
+
setItemExpansion
|
|
68
|
+
},
|
|
69
|
+
instance: {
|
|
70
|
+
isItemExpanded,
|
|
71
|
+
isItemExpandable,
|
|
72
|
+
setItemExpansion,
|
|
73
|
+
toggleItemExpansion,
|
|
74
|
+
expandAllSiblings
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
77
|
};
|
|
78
78
|
exports.useTreeViewExpansion = useTreeViewExpansion;
|
|
79
79
|
useTreeViewExpansion.models = {
|
|
@@ -9,15 +9,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
var React = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
|
|
11
11
|
var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
|
|
12
|
-
var _useTreeView = require("../../useTreeView/useTreeView.utils");
|
|
13
12
|
var _useInstanceEventHandler = require("../../hooks/useInstanceEventHandler");
|
|
14
13
|
var _utils = require("../../utils/utils");
|
|
14
|
+
var _tree = require("../../utils/tree");
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
17
17
|
const useTabbableItemId = (instance, selectedItems) => {
|
|
18
18
|
const isItemVisible = itemId => {
|
|
19
|
-
const
|
|
20
|
-
return
|
|
19
|
+
const itemMeta = instance.getItemMeta(itemId);
|
|
20
|
+
return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
|
|
21
21
|
};
|
|
22
22
|
let tabbableItemId;
|
|
23
23
|
if (Array.isArray(selectedItems)) {
|
|
@@ -26,13 +26,12 @@ const useTabbableItemId = (instance, selectedItems) => {
|
|
|
26
26
|
tabbableItemId = selectedItems;
|
|
27
27
|
}
|
|
28
28
|
if (tabbableItemId == null) {
|
|
29
|
-
tabbableItemId =
|
|
29
|
+
tabbableItemId = (0, _tree.getFirstNavigableItem)(instance);
|
|
30
30
|
}
|
|
31
31
|
return tabbableItemId;
|
|
32
32
|
};
|
|
33
33
|
const useTreeViewFocus = ({
|
|
34
34
|
instance,
|
|
35
|
-
publicAPI,
|
|
36
35
|
params,
|
|
37
36
|
state,
|
|
38
37
|
setState,
|
|
@@ -51,12 +50,12 @@ const useTreeViewFocus = ({
|
|
|
51
50
|
const isTreeViewFocused = React.useCallback(() => !!rootRef.current && rootRef.current.contains((0, _utils.getActiveElement)((0, _ownerDocument.default)(rootRef.current))), [rootRef]);
|
|
52
51
|
const isItemFocused = React.useCallback(itemId => state.focusedItemId === itemId && isTreeViewFocused(), [state.focusedItemId, isTreeViewFocused]);
|
|
53
52
|
const isItemVisible = itemId => {
|
|
54
|
-
const
|
|
55
|
-
return
|
|
53
|
+
const itemMeta = instance.getItemMeta(itemId);
|
|
54
|
+
return itemMeta && (itemMeta.parentId == null || instance.isItemExpanded(itemMeta.parentId));
|
|
56
55
|
};
|
|
57
56
|
const innerFocusItem = (event, itemId) => {
|
|
58
|
-
const
|
|
59
|
-
const itemElement = document.getElementById(instance.
|
|
57
|
+
const itemMeta = instance.getItemMeta(itemId);
|
|
58
|
+
const itemElement = document.getElementById(instance.getTreeItemIdAttribute(itemId, itemMeta.idAttribute));
|
|
60
59
|
if (itemElement) {
|
|
61
60
|
itemElement.focus();
|
|
62
61
|
}
|
|
@@ -79,7 +78,7 @@ const useTreeViewFocus = ({
|
|
|
79
78
|
itemToFocusId = models.selectedItems.value;
|
|
80
79
|
}
|
|
81
80
|
if (itemToFocusId == null) {
|
|
82
|
-
itemToFocusId =
|
|
81
|
+
itemToFocusId = (0, _tree.getFirstNavigableItem)(instance);
|
|
83
82
|
}
|
|
84
83
|
innerFocusItem(event, itemToFocusId);
|
|
85
84
|
});
|
|
@@ -87,9 +86,9 @@ const useTreeViewFocus = ({
|
|
|
87
86
|
if (state.focusedItemId == null) {
|
|
88
87
|
return;
|
|
89
88
|
}
|
|
90
|
-
const
|
|
91
|
-
if (
|
|
92
|
-
const itemElement = document.getElementById(instance.
|
|
89
|
+
const itemMeta = instance.getItemMeta(state.focusedItemId);
|
|
90
|
+
if (itemMeta) {
|
|
91
|
+
const itemElement = document.getElementById(instance.getTreeItemIdAttribute(state.focusedItemId, itemMeta.idAttribute));
|
|
93
92
|
if (itemElement) {
|
|
94
93
|
itemElement.blur();
|
|
95
94
|
}
|
|
@@ -97,16 +96,6 @@ const useTreeViewFocus = ({
|
|
|
97
96
|
setFocusedItemId(null);
|
|
98
97
|
});
|
|
99
98
|
const canItemBeTabbed = itemId => itemId === tabbableItemId;
|
|
100
|
-
(0, _useTreeView.populateInstance)(instance, {
|
|
101
|
-
isItemFocused,
|
|
102
|
-
canItemBeTabbed,
|
|
103
|
-
focusItem,
|
|
104
|
-
focusDefaultItem,
|
|
105
|
-
removeFocusedItem
|
|
106
|
-
});
|
|
107
|
-
(0, _useTreeView.populatePublicAPI)(publicAPI, {
|
|
108
|
-
focusItem
|
|
109
|
-
});
|
|
110
99
|
(0, _useInstanceEventHandler.useInstanceEventHandler)(instance, 'removeItem', ({
|
|
111
100
|
id
|
|
112
101
|
}) => {
|
|
@@ -121,13 +110,23 @@ const useTreeViewFocus = ({
|
|
|
121
110
|
instance.focusDefaultItem(event);
|
|
122
111
|
}
|
|
123
112
|
};
|
|
124
|
-
const focusedItem = instance.
|
|
125
|
-
const activeDescendant = focusedItem ? instance.
|
|
113
|
+
const focusedItem = instance.getItemMeta(state.focusedItemId);
|
|
114
|
+
const activeDescendant = focusedItem ? instance.getTreeItemIdAttribute(focusedItem.id, focusedItem.idAttribute) : null;
|
|
126
115
|
return {
|
|
127
116
|
getRootProps: otherHandlers => ({
|
|
128
117
|
onFocus: createHandleFocus(otherHandlers),
|
|
129
118
|
'aria-activedescendant': activeDescendant ?? undefined
|
|
130
|
-
})
|
|
119
|
+
}),
|
|
120
|
+
publicAPI: {
|
|
121
|
+
focusItem
|
|
122
|
+
},
|
|
123
|
+
instance: {
|
|
124
|
+
isItemFocused,
|
|
125
|
+
canItemBeTabbed,
|
|
126
|
+
focusItem,
|
|
127
|
+
focusDefaultItem,
|
|
128
|
+
removeFocusedItem
|
|
129
|
+
}
|
|
131
130
|
};
|
|
132
131
|
};
|
|
133
132
|
exports.useTreeViewFocus = useTreeViewFocus;
|
|
@@ -7,22 +7,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.useTreeViewId = void 0;
|
|
8
8
|
var React = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
|
|
10
|
-
var _useTreeView = require("../../useTreeView/useTreeView.utils");
|
|
11
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
12
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
13
12
|
const useTreeViewId = ({
|
|
14
|
-
instance,
|
|
15
13
|
params
|
|
16
14
|
}) => {
|
|
17
15
|
const treeId = (0, _useId.default)(params.id);
|
|
18
|
-
const
|
|
19
|
-
(0, _useTreeView.populateInstance)(instance, {
|
|
20
|
-
getTreeItemId
|
|
21
|
-
});
|
|
16
|
+
const getTreeItemIdAttribute = React.useCallback((itemId, idAttribute) => idAttribute ?? `${treeId}-${itemId}`, [treeId]);
|
|
22
17
|
return {
|
|
23
18
|
getRootProps: () => ({
|
|
24
19
|
id: treeId
|
|
25
|
-
})
|
|
20
|
+
}),
|
|
21
|
+
instance: {
|
|
22
|
+
getTreeItemIdAttribute
|
|
23
|
+
}
|
|
26
24
|
};
|
|
27
25
|
};
|
|
28
26
|
exports.useTreeViewId = useTreeViewId;
|