@fluentui/react-tree 9.0.0-beta.1 → 9.0.0-beta.10
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/.swcrc +30 -0
- package/CHANGELOG.json +385 -1
- package/CHANGELOG.md +118 -2
- package/dist/index.d.ts +139 -25
- package/lib/Tree.js.map +1 -1
- package/lib/TreeItem.js.map +1 -1
- package/lib/TreeItemLayout.js.map +1 -1
- package/lib/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/Tree/Tree.types.js +1 -1
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/index.js.map +1 -1
- package/lib/components/Tree/renderTree.js +1 -3
- package/lib/components/Tree/renderTree.js.map +1 -1
- package/lib/components/Tree/useTree.js +5 -4
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/Tree/useTreeContextValues.js +3 -3
- package/lib/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib/components/Tree/useTreeStyles.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.js +10 -1
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js +1 -1
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItem/index.js.map +1 -1
- package/lib/components/TreeItem/renderTreeItem.js +2 -12
- package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemStyles.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js +3 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib/components/TreeItemLayout/index.js.map +1 -1
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js +1 -9
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js +1 -0
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +3 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +2 -14
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +1 -0
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +1 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/treeContext.js +1 -2
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/contexts/treeItemContext.js +2 -4
- package/lib/contexts/treeItemContext.js.map +1 -1
- package/lib/hooks/index.js +1 -1
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useFlatTree.js +77 -0
- package/lib/hooks/useFlatTree.js.map +1 -0
- package/lib/hooks/useFlatTreeNavigation.js +10 -10
- package/lib/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib/hooks/useHTMLElementWalker.js +5 -5
- package/lib/hooks/useHTMLElementWalker.js.map +1 -1
- package/lib/hooks/useNestedTreeNavigation.js.map +1 -1
- package/lib/hooks/useOpenItemsState.js.map +1 -1
- package/lib/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/ImmutableSet.js.map +1 -1
- package/lib/utils/assert.js +1 -0
- package/lib/utils/assert.js.map +1 -1
- package/lib/utils/createFlatTreeItems.js +109 -0
- package/lib/utils/createFlatTreeItems.js.map +1 -0
- package/lib/utils/flattenTree.js +75 -16
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib/utils/nextTypeAheadElement.js +2 -2
- package/lib/utils/nextTypeAheadElement.js.map +1 -1
- package/lib/utils/normalizeOpenItems.js.map +1 -1
- package/lib/utils/tokens.js.map +1 -1
- package/lib/utils/treeItemFilter.js.map +1 -1
- package/lib-commonjs/Tree.js +5 -4
- package/lib-commonjs/Tree.js.map +1 -1
- package/lib-commonjs/TreeItem.js +5 -4
- package/lib-commonjs/TreeItem.js.map +1 -1
- package/lib-commonjs/TreeItemLayout.js +5 -4
- package/lib-commonjs/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/TreeItemPersonaLayout.js +5 -4
- package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.js +18 -22
- package/lib-commonjs/components/Tree/Tree.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.types.js +5 -2
- package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
- package/lib-commonjs/components/Tree/index.js +10 -9
- package/lib-commonjs/components/Tree/index.js.map +1 -1
- package/lib-commonjs/components/Tree/renderTree.js +16 -18
- package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTree.js +88 -101
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeContextValues.js +22 -28
- package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeStyles.js +31 -20
- package/lib-commonjs/components/Tree/useTreeStyles.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.js +18 -17
- package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.types.js +5 -3
- package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib-commonjs/components/TreeItem/index.js +9 -8
- package/lib-commonjs/components/TreeItem/index.js.map +1 -1
- package/lib-commonjs/components/TreeItem/renderTreeItem.js +19 -32
- package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +229 -249
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +24 -20
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.js +353 -188
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js +16 -15
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js +3 -2
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/index.js +9 -8
- package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +14 -27
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +42 -52
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js +126 -88
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +18 -17
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +3 -2
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js +9 -8
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +17 -34
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +46 -61
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +18 -15
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +165 -101
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +1 -1
- package/lib-commonjs/contexts/index.js +6 -5
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/treeContext.js +25 -17
- package/lib-commonjs/contexts/treeContext.js.map +1 -1
- package/lib-commonjs/contexts/treeItemContext.js +20 -12
- package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
- package/lib-commonjs/hooks/index.js +7 -6
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTree.js +86 -0
- package/lib-commonjs/hooks/useFlatTree.js.map +1 -0
- package/lib-commonjs/hooks/useFlatTreeNavigation.js +73 -72
- package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useHTMLElementWalker.js +94 -83
- package/lib-commonjs/hooks/useHTMLElementWalker.js.map +1 -1
- package/lib-commonjs/hooks/useNestedTreeNavigation.js +61 -58
- package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useOpenItemsState.js +32 -22
- package/lib-commonjs/hooks/useOpenItemsState.js.map +1 -1
- package/lib-commonjs/hooks/useRovingTabIndexes.js +56 -53
- package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib-commonjs/index.js +48 -180
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ImmutableSet.js +39 -38
- package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
- package/lib-commonjs/utils/assert.js +13 -9
- package/lib-commonjs/utils/assert.js.map +1 -1
- package/lib-commonjs/utils/createFlatTreeItems.js +126 -0
- package/lib-commonjs/utils/createFlatTreeItems.js.map +1 -0
- package/lib-commonjs/utils/flattenTree.js +55 -32
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/utils/nextTypeAheadElement.js +18 -16
- package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
- package/lib-commonjs/utils/normalizeOpenItems.js +13 -9
- package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
- package/lib-commonjs/utils/tokens.js +30 -20
- package/lib-commonjs/utils/tokens.js.map +1 -1
- package/lib-commonjs/utils/treeItemFilter.js +9 -7
- package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
- package/package.json +19 -15
- package/lib/hooks/useFlatTreeItems.js +0 -134
- package/lib/hooks/useFlatTreeItems.js.map +0 -1
- package/lib-commonjs/hooks/useFlatTreeItems.js +0 -141
- package/lib-commonjs/hooks/useFlatTreeItems.js.map +0 -1
|
@@ -1,81 +1,82 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
5
4
|
});
|
|
6
|
-
exports
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
rove
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
function navigate(data) {
|
|
53
|
-
const nextElement = getNextElement(data);
|
|
54
|
-
if (nextElement) {
|
|
55
|
-
rove(nextElement);
|
|
5
|
+
Object.defineProperty(exports, "useFlatTreeNavigation", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>useFlatTreeNavigation
|
|
8
|
+
});
|
|
9
|
+
const _reactSharedContexts = require("@fluentui/react-shared-contexts");
|
|
10
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
11
|
+
const _nextTypeAheadElement = require("../utils/nextTypeAheadElement");
|
|
12
|
+
const _tokens = require("../utils/tokens");
|
|
13
|
+
const _treeItemFilter = require("../utils/treeItemFilter");
|
|
14
|
+
const _useHTMLElementWalker = require("./useHTMLElementWalker");
|
|
15
|
+
const _useRovingTabIndexes = require("./useRovingTabIndexes");
|
|
16
|
+
function useFlatTreeNavigation(flatTreeItems) {
|
|
17
|
+
const { targetDocument } = (0, _reactSharedContexts.useFluent_unstable)();
|
|
18
|
+
const [treeItemWalkerRef, treeItemWalkerRootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
|
|
19
|
+
const [{ rove }, rovingRootRef] = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
|
|
20
|
+
function getNextElement(data) {
|
|
21
|
+
if (!targetDocument || !treeItemWalkerRef.current) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
const treeItemWalker = treeItemWalkerRef.current;
|
|
25
|
+
switch(data.type){
|
|
26
|
+
case _tokens.treeDataTypes.click:
|
|
27
|
+
return data.target;
|
|
28
|
+
case _tokens.treeDataTypes.typeAhead:
|
|
29
|
+
treeItemWalker.currentElement = data.target;
|
|
30
|
+
return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
|
|
31
|
+
case _tokens.treeDataTypes.arrowLeft:
|
|
32
|
+
return parentElement(flatTreeItems, data.target, targetDocument);
|
|
33
|
+
case _tokens.treeDataTypes.arrowRight:
|
|
34
|
+
treeItemWalker.currentElement = data.target;
|
|
35
|
+
return firstChild(data.target, treeItemWalker);
|
|
36
|
+
case _tokens.treeDataTypes.end:
|
|
37
|
+
treeItemWalker.currentElement = treeItemWalker.root;
|
|
38
|
+
return treeItemWalker.lastChild();
|
|
39
|
+
case _tokens.treeDataTypes.home:
|
|
40
|
+
treeItemWalker.currentElement = treeItemWalker.root;
|
|
41
|
+
return treeItemWalker.firstChild();
|
|
42
|
+
case _tokens.treeDataTypes.arrowDown:
|
|
43
|
+
treeItemWalker.currentElement = data.target;
|
|
44
|
+
return treeItemWalker.nextElement();
|
|
45
|
+
case _tokens.treeDataTypes.arrowUp:
|
|
46
|
+
treeItemWalker.currentElement = data.target;
|
|
47
|
+
return treeItemWalker.previousElement();
|
|
48
|
+
}
|
|
56
49
|
}
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
const navigate = (0, _reactUtilities.useEventCallback)((data)=>{
|
|
51
|
+
const nextElement = getNextElement(data);
|
|
52
|
+
if (nextElement) {
|
|
53
|
+
rove(nextElement);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
return [
|
|
57
|
+
navigate,
|
|
58
|
+
(0, _reactUtilities.useMergedRefs)(treeItemWalkerRootRef, rovingRootRef)
|
|
59
|
+
];
|
|
59
60
|
}
|
|
60
|
-
exports.useFlatTreeNavigation = useFlatTreeNavigation;
|
|
61
61
|
function firstChild(target, treeWalker) {
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
const nextElement = treeWalker.nextElement();
|
|
63
|
+
if (!nextElement) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');
|
|
67
|
+
const nextElementAriaLevel = nextElement.getAttribute('aria-level');
|
|
68
|
+
const targetAriaLevel = target.getAttribute('aria-level');
|
|
69
|
+
if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {
|
|
70
|
+
return nextElement;
|
|
71
|
+
}
|
|
64
72
|
return null;
|
|
65
|
-
}
|
|
66
|
-
const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');
|
|
67
|
-
const nextElementAriaLevel = nextElement.getAttribute('aria-level');
|
|
68
|
-
const targetAriaLevel = target.getAttribute('aria-level');
|
|
69
|
-
if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {
|
|
70
|
-
return nextElement;
|
|
71
|
-
}
|
|
72
|
-
return null;
|
|
73
|
-
}
|
|
74
|
-
function parentElement(flatTree, target, targetDocument) {
|
|
75
|
-
const item = flatTree.get(target.id);
|
|
76
|
-
if (item && item.parentId) {
|
|
77
|
-
return targetDocument.getElementById(item.parentId);
|
|
78
|
-
}
|
|
79
|
-
return null;
|
|
80
73
|
}
|
|
74
|
+
function parentElement(flatTreeItems, target, document) {
|
|
75
|
+
const flatTreeItem = flatTreeItems.get(target.id);
|
|
76
|
+
if (flatTreeItem && flatTreeItem.parentId) {
|
|
77
|
+
return document.getElementById(flatTreeItem.parentId);
|
|
78
|
+
}
|
|
79
|
+
return null;
|
|
80
|
+
} //# sourceMappingURL=useFlatTreeNavigation.js.map
|
|
81
|
+
|
|
81
82
|
//# sourceMappingURL=useFlatTreeNavigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nexport function useFlatTreeNavigation(flatTreeItems) {\n const {\n targetDocument\n } = useFluent_unstable();\n const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const [{\n rove\n }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n function getNextElement(data) {\n if (!targetDocument || !treeItemWalkerRef.current) {\n return null;\n }\n const treeItemWalker = treeItemWalkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n return parentElement(flatTreeItems, data.target, targetDocument);\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return firstChild(data.target, treeItemWalker);\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.lastChild();\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n }\n const navigate = useEventCallback(data => {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n });\n return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];\n}\nfunction firstChild(target, treeWalker) {\n const nextElement = treeWalker.nextElement();\n if (!nextElement) {\n return null;\n }\n const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n const targetAriaLevel = target.getAttribute('aria-level');\n if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n return nextElement;\n }\n return null;\n}\nfunction parentElement(flatTreeItems, target, document) {\n const flatTreeItem = flatTreeItems.get(target.id);\n if (flatTreeItem && flatTreeItem.parentId) {\n return document.getElementById(flatTreeItem.parentId);\n }\n return null;\n}\n//# sourceMappingURL=useFlatTreeNavigation.js.map"],"names":["useFlatTreeNavigation","flatTreeItems","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","click","target","typeAhead","currentElement","nextTypeAheadElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChild","home","arrowDown","nextElement","arrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","get","id","parentId","getElementById"],"mappings":";;;;+BAOgBA;;aAAAA;;qCAPmB;gCACa;sCACX;wBACP;gCACC;sCACS;qCACN;AAC3B,SAASA,sBAAsBC,aAAa,EAAE;IACnD,MAAM,EACJC,eAAc,EACf,GAAGC,IAAAA,uCAAkB;IACtB,MAAM,CAACC,mBAAmBC,sBAAsB,GAAGC,IAAAA,6CAAuB,EAACC,8BAAc;IACzF,MAAM,CAAC,EACLC,KAAI,EACL,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACH,8BAAc;IACpD,SAASI,eAAeC,IAAI,EAAE;QAC5B,IAAI,CAACV,kBAAkB,CAACE,kBAAkBS,OAAO,EAAE;YACjD,OAAO,IAAI;QACb,CAAC;QACD,MAAMC,iBAAiBV,kBAAkBS,OAAO;QAChD,OAAQD,KAAKG,IAAI;YACf,KAAKC,qBAAa,CAACC,KAAK;gBACtB,OAAOL,KAAKM,MAAM;YACpB,KAAKF,qBAAa,CAACG,SAAS;gBAC1BL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC5D,KAAKP,qBAAa,CAACQ,SAAS;gBAC1B,OAAOC,cAAcxB,eAAeW,KAAKM,MAAM,EAAEhB;YACnD,KAAKc,qBAAa,CAACU,UAAU;gBAC3BZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOS,WAAWf,KAAKM,MAAM,EAAEJ;YACjC,KAAKE,qBAAa,CAACY,GAAG;gBACpBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAegB,SAAS;YACjC,KAAKd,qBAAa,CAACe,IAAI;gBACrBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YAClC,KAAKX,qBAAa,CAACgB,SAAS;gBAC1BlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACnC,KAAKjB,qBAAa,CAACkB,OAAO;gBACxBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QACzC;IACF;IACA,MAAMC,WAAWC,IAAAA,gCAAgB,EAACzB,CAAAA,OAAQ;QACxC,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACfzB,KAAKyB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUE,IAAAA,6BAAa,EAACjC,uBAAuBI;KAAe;AACxE;AACA,SAASkB,WAAWT,MAAM,EAAEqB,UAAU,EAAE;IACtC,MAAMN,cAAcM,WAAWN,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO,IAAI;IACb,CAAC;IACD,MAAMO,0BAA0BP,YAAYQ,YAAY,CAAC;IACzD,MAAMC,uBAAuBT,YAAYQ,YAAY,CAAC;IACtD,MAAME,kBAAkBzB,OAAOuB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOV;IACT,CAAC;IACD,OAAO,IAAI;AACb;AACA,SAASR,cAAcxB,aAAa,EAAEiB,MAAM,EAAE2B,QAAQ,EAAE;IACtD,MAAMC,eAAe7C,cAAc8C,GAAG,CAAC7B,OAAO8B,EAAE;IAChD,IAAIF,gBAAgBA,aAAaG,QAAQ,EAAE;QACzC,OAAOJ,SAASK,cAAc,CAACJ,aAAaG,QAAQ;IACtD,CAAC;IACD,OAAO,IAAI;AACb,EACA,iDAAiD"}
|
|
@@ -1,88 +1,99 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
createHTMLElementWalker: ()=>createHTMLElementWalker,
|
|
13
|
+
useHTMLElementWalkerRef: ()=>useHTMLElementWalkerRef
|
|
5
14
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
function createHTMLElementWalker(root, filter = ()
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
15
|
+
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
|
16
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
17
|
+
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
|
18
|
+
function createHTMLElementWalker(root, filter = ()=>NodeFilter.FILTER_ACCEPT) {
|
|
19
|
+
let temporaryFilter;
|
|
20
|
+
const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
21
|
+
acceptNode (node) {
|
|
22
|
+
if (!(0, _reactUtilities.isHTMLElement)(node)) {
|
|
23
|
+
return NodeFilter.FILTER_REJECT;
|
|
24
|
+
}
|
|
25
|
+
const filterResult = filter(node);
|
|
26
|
+
var _temporaryFilter;
|
|
27
|
+
return filterResult === NodeFilter.FILTER_ACCEPT ? (_temporaryFilter = temporaryFilter === null || temporaryFilter === void 0 ? void 0 : temporaryFilter(node)) !== null && _temporaryFilter !== void 0 ? _temporaryFilter : filterResult : filterResult;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
return {
|
|
31
|
+
get root () {
|
|
32
|
+
return treeWalker.root;
|
|
33
|
+
},
|
|
34
|
+
get currentElement () {
|
|
35
|
+
return treeWalker.currentNode;
|
|
36
|
+
},
|
|
37
|
+
set currentElement (element){
|
|
38
|
+
treeWalker.currentNode = element;
|
|
39
|
+
},
|
|
40
|
+
firstChild: (localFilter)=>{
|
|
41
|
+
temporaryFilter = localFilter;
|
|
42
|
+
const result = treeWalker.firstChild();
|
|
43
|
+
temporaryFilter = undefined;
|
|
44
|
+
return result;
|
|
45
|
+
},
|
|
46
|
+
lastChild: (localFilter)=>{
|
|
47
|
+
temporaryFilter = localFilter;
|
|
48
|
+
const result = treeWalker.lastChild();
|
|
49
|
+
temporaryFilter = undefined;
|
|
50
|
+
return result;
|
|
51
|
+
},
|
|
52
|
+
nextElement: (localFilter)=>{
|
|
53
|
+
temporaryFilter = localFilter;
|
|
54
|
+
const result = treeWalker.nextNode();
|
|
55
|
+
temporaryFilter = undefined;
|
|
56
|
+
return result;
|
|
57
|
+
},
|
|
58
|
+
nextSibling: (localFilter)=>{
|
|
59
|
+
temporaryFilter = localFilter;
|
|
60
|
+
const result = treeWalker.nextSibling();
|
|
61
|
+
temporaryFilter = undefined;
|
|
62
|
+
return result;
|
|
63
|
+
},
|
|
64
|
+
parentElement: (localFilter)=>{
|
|
65
|
+
temporaryFilter = localFilter;
|
|
66
|
+
const result = treeWalker.parentNode();
|
|
67
|
+
temporaryFilter = undefined;
|
|
68
|
+
return result;
|
|
69
|
+
},
|
|
70
|
+
previousElement: (localFilter)=>{
|
|
71
|
+
temporaryFilter = localFilter;
|
|
72
|
+
const result = treeWalker.previousNode();
|
|
73
|
+
temporaryFilter = undefined;
|
|
74
|
+
return result;
|
|
75
|
+
},
|
|
76
|
+
previousSibling: (localFilter)=>{
|
|
77
|
+
temporaryFilter = localFilter;
|
|
78
|
+
const result = treeWalker.previousSibling();
|
|
79
|
+
temporaryFilter = undefined;
|
|
80
|
+
return result;
|
|
81
|
+
}
|
|
82
|
+
};
|
|
74
83
|
}
|
|
75
|
-
|
|
76
|
-
const
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
84
|
+
const useHTMLElementWalkerRef = (filter)=>{
|
|
85
|
+
const walkerRef = _react.useRef();
|
|
86
|
+
const rootRefCallback = (element1)=>{
|
|
87
|
+
if (!element1) {
|
|
88
|
+
walkerRef.current = undefined;
|
|
89
|
+
return;
|
|
90
|
+
}
|
|
91
|
+
walkerRef.current = createHTMLElementWalker(element1, filter);
|
|
92
|
+
};
|
|
93
|
+
return [
|
|
94
|
+
walkerRef,
|
|
95
|
+
rootRefCallback
|
|
96
|
+
];
|
|
97
|
+
}; //# sourceMappingURL=useHTMLElementWalker.js.map
|
|
98
|
+
|
|
88
99
|
//# sourceMappingURL=useHTMLElementWalker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useHTMLElementWalker.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nexport function createHTMLElementWalker(root, filter = () => NodeFilter.FILTER_ACCEPT) {\n let temporaryFilter;\n const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node) {\n if (!isHTMLElement(node)) {\n return NodeFilter.FILTER_REJECT;\n }\n const filterResult = filter(node);\n var _temporaryFilter;\n return filterResult === NodeFilter.FILTER_ACCEPT ? (_temporaryFilter = temporaryFilter === null || temporaryFilter === void 0 ? void 0 : temporaryFilter(node)) !== null && _temporaryFilter !== void 0 ? _temporaryFilter : filterResult : filterResult;\n }\n });\n return {\n get root() {\n return treeWalker.root;\n },\n get currentElement() {\n return treeWalker.currentNode;\n },\n set currentElement(element) {\n treeWalker.currentNode = element;\n },\n firstChild: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.firstChild();\n temporaryFilter = undefined;\n return result;\n },\n lastChild: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.lastChild();\n temporaryFilter = undefined;\n return result;\n },\n nextElement: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.nextNode();\n temporaryFilter = undefined;\n return result;\n },\n nextSibling: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.nextSibling();\n temporaryFilter = undefined;\n return result;\n },\n parentElement: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.parentNode();\n temporaryFilter = undefined;\n return result;\n },\n previousElement: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.previousNode();\n temporaryFilter = undefined;\n return result;\n },\n previousSibling: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.previousSibling();\n temporaryFilter = undefined;\n return result;\n }\n };\n}\nexport const useHTMLElementWalkerRef = filter => {\n const walkerRef = React.useRef();\n const rootRefCallback = element1 => {\n if (!element1) {\n walkerRef.current = undefined;\n return;\n }\n walkerRef.current = createHTMLElementWalker(element1, filter);\n };\n return [walkerRef, rootRefCallback];\n};\n//# sourceMappingURL=useHTMLElementWalker.js.map"],"names":["createHTMLElementWalker","useHTMLElementWalkerRef","root","filter","NodeFilter","FILTER_ACCEPT","temporaryFilter","treeWalker","document","createTreeWalker","SHOW_ELEMENT","acceptNode","node","isHTMLElement","FILTER_REJECT","filterResult","_temporaryFilter","currentElement","currentNode","element","firstChild","localFilter","result","undefined","lastChild","nextElement","nextNode","nextSibling","parentElement","parentNode","previousElement","previousNode","previousSibling","walkerRef","React","useRef","rootRefCallback","element1","current"],"mappings":";;;;;;;;;;;IAEgBA,uBAAuB,MAAvBA;IAkEHC,uBAAuB,MAAvBA;;;gCApEiB;6DACP;AAChB,SAASD,wBAAwBE,IAAI,EAAEC,SAAS,IAAMC,WAAWC,aAAa,EAAE;IACrF,IAAIC;IACJ,MAAMC,aAAaC,SAASC,gBAAgB,CAACP,MAAME,WAAWM,YAAY,EAAE;QAC1EC,YAAWC,IAAI,EAAE;YACf,IAAI,CAACC,IAAAA,6BAAa,EAACD,OAAO;gBACxB,OAAOR,WAAWU,aAAa;YACjC,CAAC;YACD,MAAMC,eAAeZ,OAAOS;YAC5B,IAAII;YACJ,OAAOD,iBAAiBX,WAAWC,aAAa,GAAG,AAACW,CAAAA,mBAAmBV,oBAAoB,IAAI,IAAIA,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBM,KAAK,AAAD,MAAO,IAAI,IAAII,qBAAqB,KAAK,IAAIA,mBAAmBD,YAAY,GAAGA,YAAY;QAC1P;IACF;IACA,OAAO;QACL,IAAIb,QAAO;YACT,OAAOK,WAAWL,IAAI;QACxB;QACA,IAAIe,kBAAiB;YACnB,OAAOV,WAAWW,WAAW;QAC/B;QACA,IAAID,gBAAeE,QAAS;YAC1BZ,WAAWW,WAAW,GAAGC;QAC3B;QACAC,YAAYC,CAAAA,cAAe;YACzBf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWa,UAAU;YACpCd,kBAAkBiB;YAClB,OAAOD;QACT;QACAE,WAAWH,CAAAA,cAAe;YACxBf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWiB,SAAS;YACnClB,kBAAkBiB;YAClB,OAAOD;QACT;QACAG,aAAaJ,CAAAA,cAAe;YAC1Bf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWmB,QAAQ;YAClCpB,kBAAkBiB;YAClB,OAAOD;QACT;QACAK,aAAaN,CAAAA,cAAe;YAC1Bf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWoB,WAAW;YACrCrB,kBAAkBiB;YAClB,OAAOD;QACT;QACAM,eAAeP,CAAAA,cAAe;YAC5Bf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWsB,UAAU;YACpCvB,kBAAkBiB;YAClB,OAAOD;QACT;QACAQ,iBAAiBT,CAAAA,cAAe;YAC9Bf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWwB,YAAY;YACtCzB,kBAAkBiB;YAClB,OAAOD;QACT;QACAU,iBAAiBX,CAAAA,cAAe;YAC9Bf,kBAAkBe;YAClB,MAAMC,SAASf,WAAWyB,eAAe;YACzC1B,kBAAkBiB;YAClB,OAAOD;QACT;IACF;AACF;AACO,MAAMrB,0BAA0BE,CAAAA,SAAU;IAC/C,MAAM8B,YAAYC,OAAMC,MAAM;IAC9B,MAAMC,kBAAkBC,CAAAA,WAAY;QAClC,IAAI,CAACA,UAAU;YACbJ,UAAUK,OAAO,GAAGf;YACpB;QACF,CAAC;QACDU,UAAUK,OAAO,GAAGtC,wBAAwBqC,UAAUlC;IACxD;IACA,OAAO;QAAC8B;QAAWG;KAAgB;AACrC,GACA,gDAAgD"}
|
|
@@ -1,66 +1,69 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useNestedTreeNavigation", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>useNestedTreeNavigation
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
+
const _useHTMLElementWalker = require("./useHTMLElementWalker");
|
|
10
|
+
const _nextTypeAheadElement = require("../utils/nextTypeAheadElement");
|
|
11
|
+
const _tokens = require("../utils/tokens");
|
|
12
|
+
const _treeItemFilter = require("../utils/treeItemFilter");
|
|
13
|
+
const _useRovingTabIndexes = require("./useRovingTabIndexes");
|
|
14
|
+
const _reactUtilities = require("@fluentui/react-utilities");
|
|
13
15
|
function useNestedTreeNavigation() {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
rove(nextElement);
|
|
16
|
+
const [{ rove }, rovingRootRef] = (0, _useRovingTabIndexes.useRovingTabIndex)(_treeItemFilter.treeItemFilter);
|
|
17
|
+
const [walkerRef, rootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
|
|
18
|
+
const getNextElement = (data)=>{
|
|
19
|
+
if (!walkerRef.current) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
const treeItemWalker = walkerRef.current;
|
|
23
|
+
switch(data.type){
|
|
24
|
+
case _tokens.treeDataTypes.click:
|
|
25
|
+
return data.target;
|
|
26
|
+
case _tokens.treeDataTypes.typeAhead:
|
|
27
|
+
treeItemWalker.currentElement = data.target;
|
|
28
|
+
return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
|
|
29
|
+
case _tokens.treeDataTypes.arrowLeft:
|
|
30
|
+
treeItemWalker.currentElement = data.target;
|
|
31
|
+
return treeItemWalker.parentElement();
|
|
32
|
+
case _tokens.treeDataTypes.arrowRight:
|
|
33
|
+
treeItemWalker.currentElement = data.target;
|
|
34
|
+
return treeItemWalker.firstChild();
|
|
35
|
+
case _tokens.treeDataTypes.end:
|
|
36
|
+
treeItemWalker.currentElement = treeItemWalker.root;
|
|
37
|
+
return lastChildRecursive(treeItemWalker);
|
|
38
|
+
case _tokens.treeDataTypes.home:
|
|
39
|
+
treeItemWalker.currentElement = treeItemWalker.root;
|
|
40
|
+
return treeItemWalker.firstChild();
|
|
41
|
+
case _tokens.treeDataTypes.arrowDown:
|
|
42
|
+
treeItemWalker.currentElement = data.target;
|
|
43
|
+
return treeItemWalker.nextElement();
|
|
44
|
+
case _tokens.treeDataTypes.arrowUp:
|
|
45
|
+
treeItemWalker.currentElement = data.target;
|
|
46
|
+
return treeItemWalker.previousElement();
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
function navigate(data) {
|
|
50
|
+
const nextElement = getNextElement(data);
|
|
51
|
+
if (nextElement) {
|
|
52
|
+
rove(nextElement);
|
|
53
|
+
}
|
|
53
54
|
}
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
return [
|
|
56
|
+
navigate,
|
|
57
|
+
(0, _reactUtilities.useMergedRefs)(rootRef, rovingRootRef)
|
|
58
|
+
];
|
|
56
59
|
}
|
|
57
|
-
exports.useNestedTreeNavigation = useNestedTreeNavigation;
|
|
58
60
|
function lastChildRecursive(walker) {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
}
|
|
61
|
+
let lastElement = null;
|
|
62
|
+
let nextElement = null;
|
|
63
|
+
while(nextElement = walker.lastChild()){
|
|
64
|
+
lastElement = nextElement;
|
|
65
|
+
}
|
|
66
|
+
return lastElement;
|
|
67
|
+
} //# sourceMappingURL=useNestedTreeNavigation.js.map
|
|
68
|
+
|
|
66
69
|
//# sourceMappingURL=useNestedTreeNavigation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useNestedTreeNavigation.js"],"sourcesContent":["import { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nexport function useNestedTreeNavigation() {\n const [{\n rove\n }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const getNextElement = data => {\n if (!walkerRef.current) {\n return;\n }\n const treeItemWalker = walkerRef.current;\n switch (data.type) {\n case treeDataTypes.click:\n return data.target;\n case treeDataTypes.typeAhead:\n treeItemWalker.currentElement = data.target;\n return nextTypeAheadElement(treeItemWalker, data.event.key);\n case treeDataTypes.arrowLeft:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.parentElement();\n case treeDataTypes.arrowRight:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.firstChild();\n case treeDataTypes.end:\n treeItemWalker.currentElement = treeItemWalker.root;\n return lastChildRecursive(treeItemWalker);\n case treeDataTypes.home:\n treeItemWalker.currentElement = treeItemWalker.root;\n return treeItemWalker.firstChild();\n case treeDataTypes.arrowDown:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.nextElement();\n case treeDataTypes.arrowUp:\n treeItemWalker.currentElement = data.target;\n return treeItemWalker.previousElement();\n }\n };\n function navigate(data) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return [navigate, useMergedRefs(rootRef, rovingRootRef)];\n}\nfunction lastChildRecursive(walker) {\n let lastElement = null;\n let nextElement = null;\n while (nextElement = walker.lastChild()) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n//# sourceMappingURL=useNestedTreeNavigation.js.map"],"names":["useNestedTreeNavigation","rove","rovingRootRef","useRovingTabIndex","treeItemFilter","walkerRef","rootRef","useHTMLElementWalkerRef","getNextElement","data","current","treeItemWalker","type","treeDataTypes","click","target","typeAhead","currentElement","nextTypeAheadElement","event","key","arrowLeft","parentElement","arrowRight","firstChild","end","root","lastChildRecursive","home","arrowDown","nextElement","arrowUp","previousElement","navigate","useMergedRefs","walker","lastElement","lastChild"],"mappings":";;;;+BAMgBA;;aAAAA;;sCANwB;sCACH;wBACP;gCACC;qCACG;gCACJ;AACvB,SAASA,0BAA0B;IACxC,MAAM,CAAC,EACLC,KAAI,EACL,EAAEC,cAAc,GAAGC,IAAAA,sCAAiB,EAACC,8BAAc;IACpD,MAAM,CAACC,WAAWC,QAAQ,GAAGC,IAAAA,6CAAuB,EAACH,8BAAc;IACnE,MAAMI,iBAAiBC,CAAAA,OAAQ;QAC7B,IAAI,CAACJ,UAAUK,OAAO,EAAE;YACtB;QACF,CAAC;QACD,MAAMC,iBAAiBN,UAAUK,OAAO;QACxC,OAAQD,KAAKG,IAAI;YACf,KAAKC,qBAAa,CAACC,KAAK;gBACtB,OAAOL,KAAKM,MAAM;YACpB,KAAKF,qBAAa,CAACG,SAAS;gBAC1BL,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOG,IAAAA,0CAAoB,EAACP,gBAAgBF,KAAKU,KAAK,CAACC,GAAG;YAC5D,KAAKP,qBAAa,CAACQ,SAAS;gBAC1BV,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeW,aAAa;YACrC,KAAKT,qBAAa,CAACU,UAAU;gBAC3BZ,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAea,UAAU;YAClC,KAAKX,qBAAa,CAACY,GAAG;gBACpBd,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOC,mBAAmBhB;YAC5B,KAAKE,qBAAa,CAACe,IAAI;gBACrBjB,eAAeM,cAAc,GAAGN,eAAee,IAAI;gBACnD,OAAOf,eAAea,UAAU;YAClC,KAAKX,qBAAa,CAACgB,SAAS;gBAC1BlB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAemB,WAAW;YACnC,KAAKjB,qBAAa,CAACkB,OAAO;gBACxBpB,eAAeM,cAAc,GAAGR,KAAKM,MAAM;gBAC3C,OAAOJ,eAAeqB,eAAe;QACzC;IACF;IACA,SAASC,SAASxB,IAAI,EAAE;QACtB,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACf7B,KAAK6B;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUC,IAAAA,6BAAa,EAAC5B,SAASJ;KAAe;AAC1D;AACA,SAASyB,mBAAmBQ,MAAM,EAAE;IAClC,IAAIC,cAAc,IAAI;IACtB,IAAIN,cAAc,IAAI;IACtB,MAAOA,cAAcK,OAAOE,SAAS,GAAI;QACvCD,cAAcN;IAChB;IACA,OAAOM;AACT,EACA,mDAAmD"}
|