@fluentui/react-tree 9.0.0-beta.4 → 9.0.0-beta.6
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 +151 -1
- package/CHANGELOG.md +40 -2
- 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.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.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.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.map +1 -1
- package/lib/hooks/useFlatTree.js +2 -4
- package/lib/hooks/useFlatTree.js.map +1 -1
- 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.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/createUnfilteredFlatTree.js +3 -4
- package/lib/utils/createUnfilteredFlatTree.js.map +1 -1
- package/lib/utils/createVisibleFlatTree.js +10 -7
- package/lib/utils/createVisibleFlatTree.js.map +1 -1
- package/lib/utils/flattenTree.js +3 -4
- 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 +45 -51
- package/lib-commonjs/hooks/useFlatTree.js.map +1 -1
- package/lib-commonjs/hooks/useFlatTreeNavigation.js +70 -69
- 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/createUnfilteredFlatTree.js +84 -75
- package/lib-commonjs/utils/createUnfilteredFlatTree.js.map +1 -1
- package/lib-commonjs/utils/createVisibleFlatTree.js +77 -78
- package/lib-commonjs/utils/createVisibleFlatTree.js.map +1 -1
- package/lib-commonjs/utils/flattenTree.js +25 -29
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../lib/hooks/useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { createVisibleFlatTree } from '../utils/createVisibleFlatTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param items - a list of tree items\n * @param options - in case control over the internal openItems is required\n */\nexport function useFlatTree_unstable(items, options = {}) {\n const [openItems, updateOpenItems] = useOpenItemsState(options);\n const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree(items), [items]);\n const [navigate, navigationRef] = useFlatTreeNavigation(unfilteredFlatTree);\n const visibleFlatTree = React.useMemo(() => createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);\n const handleOpenChange = useEventCallback((event, data) => {\n event.preventDefault();\n updateOpenItems(data);\n });\n const handleNavigation = useEventCallback((event, data) => {\n event.preventDefault();\n navigate(data);\n });\n var _unfilteredFlatTree_itemsPerId_get;\n const flatTree = {\n ...visibleFlatTree,\n getTreeProps: () => ({\n ref: navigationRef,\n openItems,\n onOpenChange: handleOpenChange,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n onNavigation_unstable: handleNavigation\n }),\n navigate,\n getItem: id => (_unfilteredFlatTree_itemsPerId_get = unfilteredFlatTree.itemsPerId.get(id)) !== null && _unfilteredFlatTree_itemsPerId_get !== void 0 ? _unfilteredFlatTree_itemsPerId_get : null\n };\n return flatTree;\n}\n//# sourceMappingURL=useFlatTree.js.map"],"names":["useFlatTree_unstable","items","options","openItems","updateOpenItems","useOpenItemsState","unfilteredFlatTree","React","useMemo","createUnfilteredFlatTree","navigate","navigationRef","useFlatTreeNavigation","visibleFlatTree","createVisibleFlatTree","handleOpenChange","useEventCallback","event","data","preventDefault","handleNavigation","_unfilteredFlatTree_itemsPerId_get","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","itemsPerId","get"],"mappings":";;;;+BAkBgBA;;aAAAA;;;gCAlBiB;6DACV;0CACkB;uCACH;uCACA;mCACJ;AAa3B,SAASA,qBAAqBC,KAAK,EAAEC,UAAU,CAAC,CAAC,EAAE;IACxD,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,qBAAqBC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,kDAAwB,EAACR,QAAQ;QAACA;KAAM;IACvF,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,kBAAkBN,OAAMC,OAAO,CAAC,IAAMM,IAAAA,4CAAqB,EAACR,oBAAoBH,YAAY;QAACG;QAAoBH;KAAU;IACjI,MAAMY,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBf,gBAAgBc;IAClB;IACA,MAAME,mBAAmBJ,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAS;QACzDD,MAAME,cAAc;QACpBT,SAASQ;IACX;IACA,IAAIG;IACJ,MAAMC,WAAW;QACf,GAAGT,eAAe;QAClBU,cAAc,IAAO,CAAA;gBACnBC,KAAKb;gBACLR;gBACAsB,cAAcV;gBACd,gEAAgE;gBAChEW,uBAAuBN;YACzB,CAAA;QACAV;QACAiB,SAASC,CAAAA,KAAM,AAACP,CAAAA,qCAAqCf,mBAAmBuB,UAAU,CAACC,GAAG,CAACF,GAAE,MAAO,IAAI,IAAIP,uCAAuC,KAAK,IAAIA,qCAAqC,IAAI;IACnM;IACA,OAAOC;AACT,EACA,uCAAuC"}
|
|
@@ -1,81 +1,82 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "useFlatTreeNavigation", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: ()=>useFlatTreeNavigation
|
|
5
8
|
});
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const useRovingTabIndexes_1 = /*#__PURE__*/require("./useRovingTabIndexes");
|
|
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");
|
|
14
16
|
function useFlatTreeNavigation(flatTree) {
|
|
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
|
-
case tokens_1.treeDataTypes.arrowUp:
|
|
48
|
-
treeItemWalker.currentElement = data.target;
|
|
49
|
-
return treeItemWalker.previousElement();
|
|
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(flatTree, 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
|
+
}
|
|
50
49
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
function navigate(data) {
|
|
51
|
+
const nextElement = getNextElement(data);
|
|
52
|
+
if (nextElement) {
|
|
53
|
+
rove(nextElement);
|
|
54
|
+
}
|
|
56
55
|
}
|
|
57
|
-
|
|
58
|
-
|
|
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
73
|
}
|
|
74
74
|
function parentElement(flatTree, target, document) {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
75
|
+
const flatTreeItem = flatTree.itemsPerId.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 { 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(flatTree) {\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(flatTree, 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 function navigate(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(flatTree, target, document) {\n const flatTreeItem = flatTree.itemsPerId.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","flatTree","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","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","itemsPerId","get","id","parentId","getElementById"],"mappings":";;;;+BAOgBA;;aAAAA;;qCAPmB;gCACL;sCACO;wBACP;gCACC;sCACS;qCACN;AAC3B,SAASA,sBAAsBC,QAAQ,EAAE;IAC9C,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,UAAUW,KAAKM,MAAM,EAAEhB;YAC9C,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,SAASC,SAASxB,IAAI,EAAE;QACtB,MAAMqB,cAActB,eAAeC;QACnC,IAAIqB,aAAa;YACfzB,KAAKyB;QACP,CAAC;IACH;IACA,OAAO;QAACG;QAAUC,IAAAA,6BAAa,EAAChC,uBAAuBI;KAAe;AACxE;AACA,SAASkB,WAAWT,MAAM,EAAEoB,UAAU,EAAE;IACtC,MAAML,cAAcK,WAAWL,WAAW;IAC1C,IAAI,CAACA,aAAa;QAChB,OAAO,IAAI;IACb,CAAC;IACD,MAAMM,0BAA0BN,YAAYO,YAAY,CAAC;IACzD,MAAMC,uBAAuBR,YAAYO,YAAY,CAAC;IACtD,MAAME,kBAAkBxB,OAAOsB,YAAY,CAAC;IAC5C,IAAID,4BAA4B,OAAOI,OAAOF,0BAA0BE,OAAOD,mBAAmB,GAAG;QACnG,OAAOT;IACT,CAAC;IACD,OAAO,IAAI;AACb;AACA,SAASR,cAAcxB,QAAQ,EAAEiB,MAAM,EAAE0B,QAAQ,EAAE;IACjD,MAAMC,eAAe5C,SAAS6C,UAAU,CAACC,GAAG,CAAC7B,OAAO8B,EAAE;IACtD,IAAIH,gBAAgBA,aAAaI,QAAQ,EAAE;QACzC,OAAOL,SAASM,cAAc,CAACL,aAAaI,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
|