@fluentui/react-tree 9.0.0-beta.3 → 9.0.0-beta.30
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.json +1566 -1
- package/CHANGELOG.md +423 -2
- package/dist/index.d.ts +408 -131
- package/lib/FlatTree.js +1 -0
- package/lib/FlatTree.js.map +1 -0
- package/lib/Tree.js +0 -1
- package/lib/Tree.js.map +1 -1
- package/lib/TreeItem.js +0 -1
- package/lib/TreeItem.js.map +1 -1
- package/lib/TreeItemLayout.js +0 -1
- package/lib/TreeItemLayout.js.map +1 -1
- package/lib/TreeItemPersonaLayout.js +0 -1
- package/lib/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/FlatTree/FlatTree.js +13 -0
- package/lib/components/FlatTree/FlatTree.js.map +1 -0
- package/lib/components/FlatTree/FlatTree.types.js +1 -0
- package/lib/components/FlatTree/FlatTree.types.js.map +1 -0
- package/lib/components/FlatTree/index.js +6 -0
- package/lib/components/FlatTree/index.js.map +1 -0
- package/lib/components/FlatTree/useFlatControllableCheckedItems.js +63 -0
- package/lib/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -0
- package/lib/components/FlatTree/useFlatTree.js +3 -0
- package/lib/components/FlatTree/useFlatTree.js.map +1 -0
- package/lib/components/FlatTree/useFlatTreeNavigation.js +74 -0
- package/lib/components/FlatTree/useFlatTreeNavigation.js.map +1 -0
- package/lib/components/FlatTree/useFlatTreeStyles.styles.js +20 -0
- package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -0
- package/lib/components/FlatTree/useHeadlessFlatTree.js +117 -0
- package/lib/components/FlatTree/useHeadlessFlatTree.js.map +1 -0
- package/lib/components/Tree/Tree.js +8 -15
- package/lib/components/Tree/Tree.js.map +1 -1
- package/lib/components/Tree/Tree.types.js +1 -2
- package/lib/components/Tree/Tree.types.js.map +1 -1
- package/lib/components/Tree/index.js +2 -3
- package/lib/components/Tree/index.js.map +1 -1
- package/lib/components/Tree/renderTree.js +7 -13
- package/lib/components/Tree/renderTree.js.map +1 -1
- package/lib/components/Tree/useControllableCheckedItems.js +94 -0
- package/lib/components/Tree/useControllableCheckedItems.js.map +1 -0
- package/lib/components/Tree/useTree.js +55 -112
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/Tree/useTreeContextValues.js +14 -22
- package/lib/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib/components/Tree/useTreeNavigation.js +52 -0
- package/lib/components/Tree/useTreeNavigation.js.map +1 -0
- package/lib/components/Tree/{useTreeStyles.js → useTreeStyles.styles.js} +7 -3
- package/lib/components/Tree/useTreeStyles.styles.js.map +1 -0
- package/lib/components/TreeItem/TreeItem.js +16 -9
- package/lib/components/TreeItem/TreeItem.js.map +1 -1
- package/lib/components/TreeItem/TreeItem.types.js +1 -2
- package/lib/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib/components/TreeItem/index.js +2 -2
- package/lib/components/TreeItem/index.js.map +1 -1
- package/lib/components/TreeItem/renderTreeItem.js +7 -25
- package/lib/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +163 -234
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemContextValues.js +20 -16
- package/lib/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib/components/TreeItem/useTreeItemStyles.styles.js +100 -0
- package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
- package/lib/components/TreeItemChevron.js +24 -0
- package/lib/components/TreeItemChevron.js.map +1 -0
- package/lib/components/TreeItemLayout/TreeItemLayout.js +8 -8
- package/lib/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js +1 -2
- package/lib/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib/components/TreeItemLayout/index.js +1 -2
- package/lib/components/TreeItemLayout/index.js.map +1 -1
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js +8 -21
- package/lib/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayout.js +99 -40
- package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +237 -0
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +9 -9
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -2
- package/lib/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/index.js +1 -2
- package/lib/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +10 -27
- package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +40 -48
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +9 -10
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +210 -0
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
- package/lib/contexts/index.js +0 -1
- package/lib/contexts/index.js.map +1 -1
- package/lib/contexts/treeContext.js +13 -15
- package/lib/contexts/treeContext.js.map +1 -1
- package/lib/contexts/treeItemContext.js +16 -10
- package/lib/contexts/treeItemContext.js.map +1 -1
- package/lib/hooks/useControllableOpenItems.js +28 -0
- package/lib/hooks/useControllableOpenItems.js.map +1 -0
- package/lib/hooks/useRootTree.js +139 -0
- package/lib/hooks/useRootTree.js.map +1 -0
- package/lib/hooks/useRovingTabIndexes.js +30 -49
- package/lib/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib/hooks/useSubtree.js +39 -0
- package/lib/hooks/useSubtree.js.map +1 -0
- package/lib/index.js +3 -4
- package/lib/index.js.map +1 -1
- package/lib/utils/ImmutableMap.js +41 -0
- package/lib/utils/ImmutableMap.js.map +1 -0
- package/lib/utils/ImmutableSet.js +42 -33
- package/lib/utils/ImmutableSet.js.map +1 -1
- package/lib/utils/assert.js +5 -5
- package/lib/utils/assert.js.map +1 -1
- package/lib/utils/createCheckedItems.js +18 -0
- package/lib/utils/createCheckedItems.js.map +1 -0
- package/lib/utils/createHTMLElementWalker.js +67 -0
- package/lib/utils/createHTMLElementWalker.js.map +1 -0
- package/lib/utils/createHeadlessTree.js +188 -0
- package/lib/utils/createHeadlessTree.js.map +1 -0
- package/lib/utils/createOpenItems.js +10 -0
- package/lib/utils/createOpenItems.js.map +1 -0
- package/lib/utils/flattenTree.js +54 -29
- package/lib/utils/flattenTree.js.map +1 -1
- package/lib/utils/getTreeItemValueFromElement.js +4 -0
- package/lib/utils/getTreeItemValueFromElement.js.map +1 -0
- package/lib/utils/nextTypeAheadElement.js +11 -12
- package/lib/utils/nextTypeAheadElement.js.map +1 -1
- package/lib/utils/normalizeOpenItems.js +6 -5
- package/lib/utils/normalizeOpenItems.js.map +1 -1
- package/lib/utils/tokens.js +14 -14
- package/lib/utils/tokens.js.map +1 -1
- package/lib/utils/treeItemFilter.js +2 -3
- package/lib/utils/treeItemFilter.js.map +1 -1
- package/lib-commonjs/FlatTree.js +6 -0
- package/lib-commonjs/FlatTree.js.map +1 -0
- package/lib-commonjs/Tree.js +3 -5
- package/lib-commonjs/Tree.js.map +1 -1
- package/lib-commonjs/TreeItem.js +3 -5
- package/lib-commonjs/TreeItem.js.map +1 -1
- package/lib-commonjs/TreeItemLayout.js +3 -5
- package/lib-commonjs/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/TreeItemPersonaLayout.js +3 -5
- package/lib-commonjs/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/FlatTree/FlatTree.js +20 -0
- package/lib-commonjs/components/FlatTree/FlatTree.js.map +1 -0
- package/lib-commonjs/components/FlatTree/FlatTree.types.js +4 -0
- package/lib-commonjs/components/FlatTree/FlatTree.types.js.map +1 -0
- package/lib-commonjs/components/FlatTree/index.js +21 -0
- package/lib-commonjs/components/FlatTree/index.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js +78 -0
- package/lib-commonjs/components/FlatTree/useFlatControllableCheckedItems.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTree.js +12 -0
- package/lib-commonjs/components/FlatTree/useFlatTree.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeNavigation.js +82 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeNavigation.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js +36 -0
- package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -0
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js +114 -0
- package/lib-commonjs/components/FlatTree/useHeadlessFlatTree.js.map +1 -0
- package/lib-commonjs/components/Tree/Tree.js +17 -23
- package/lib-commonjs/components/Tree/Tree.js.map +1 -1
- package/lib-commonjs/components/Tree/Tree.types.js +1 -3
- package/lib-commonjs/components/Tree/Tree.types.js.map +1 -1
- package/lib-commonjs/components/Tree/index.js +8 -10
- package/lib-commonjs/components/Tree/index.js.map +1 -1
- package/lib-commonjs/components/Tree/renderTree.js +14 -19
- package/lib-commonjs/components/Tree/renderTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useControllableCheckedItems.js +103 -0
- package/lib-commonjs/components/Tree/useControllableCheckedItems.js.map +1 -0
- package/lib-commonjs/components/Tree/useTree.js +61 -116
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeContextValues.js +19 -26
- package/lib-commonjs/components/Tree/useTreeContextValues.js.map +1 -1
- package/lib-commonjs/components/Tree/useTreeNavigation.js +60 -0
- package/lib-commonjs/components/Tree/useTreeNavigation.js.map +1 -0
- package/lib-commonjs/components/Tree/useTreeStyles.styles.js +41 -0
- package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -0
- package/lib-commonjs/components/TreeItem/TreeItem.js +17 -18
- package/lib-commonjs/components/TreeItem/TreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/TreeItem.types.js +3 -4
- package/lib-commonjs/components/TreeItem/TreeItem.types.js.map +1 -1
- package/lib-commonjs/components/TreeItem/index.js +8 -9
- package/lib-commonjs/components/TreeItem/index.js.map +1 -1
- package/lib-commonjs/components/TreeItem/renderTreeItem.js +14 -33
- package/lib-commonjs/components/TreeItem/renderTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +172 -250
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js +25 -20
- package/lib-commonjs/components/TreeItem/useTreeItemContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +202 -0
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -0
- package/lib-commonjs/components/TreeItemChevron.js +33 -0
- package/lib-commonjs/components/TreeItemChevron.js.map +1 -0
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js +15 -16
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js +1 -3
- package/lib-commonjs/components/TreeItemLayout/TreeItemLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/index.js +7 -9
- package/lib-commonjs/components/TreeItemLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js +14 -28
- package/lib-commonjs/components/TreeItemLayout/renderTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +105 -52
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +392 -0
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -0
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js +17 -18
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js +1 -3
- package/lib-commonjs/components/TreeItemPersonaLayout/TreeItemPersonaLayout.types.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js +7 -9
- package/lib-commonjs/components/TreeItemPersonaLayout/index.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js +17 -35
- package/lib-commonjs/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js +47 -61
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js +16 -15
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map +1 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +379 -0
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -0
- package/lib-commonjs/contexts/index.js +4 -6
- package/lib-commonjs/contexts/index.js.map +1 -1
- package/lib-commonjs/contexts/treeContext.js +26 -18
- package/lib-commonjs/contexts/treeContext.js.map +1 -1
- package/lib-commonjs/contexts/treeItemContext.js +30 -13
- package/lib-commonjs/contexts/treeItemContext.js.map +1 -1
- package/lib-commonjs/hooks/useControllableOpenItems.js +39 -0
- package/lib-commonjs/hooks/useControllableOpenItems.js.map +1 -0
- package/lib-commonjs/hooks/useRootTree.js +143 -0
- package/lib-commonjs/hooks/useRootTree.js.map +1 -0
- package/lib-commonjs/hooks/useRovingTabIndexes.js +36 -55
- package/lib-commonjs/hooks/useRovingTabIndexes.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js +43 -0
- package/lib-commonjs/hooks/useSubtree.js.map +1 -0
- package/lib-commonjs/index.js +53 -181
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ImmutableMap.js +49 -0
- package/lib-commonjs/utils/ImmutableMap.js.map +1 -0
- package/lib-commonjs/utils/ImmutableSet.js +47 -38
- package/lib-commonjs/utils/ImmutableSet.js.map +1 -1
- package/lib-commonjs/utils/assert.js +11 -9
- package/lib-commonjs/utils/assert.js.map +1 -1
- package/lib-commonjs/utils/createCheckedItems.js +26 -0
- package/lib-commonjs/utils/createCheckedItems.js.map +1 -0
- package/lib-commonjs/utils/createHTMLElementWalker.js +75 -0
- package/lib-commonjs/utils/createHTMLElementWalker.js.map +1 -0
- package/lib-commonjs/utils/createHeadlessTree.js +202 -0
- package/lib-commonjs/utils/createHeadlessTree.js.map +1 -0
- package/lib-commonjs/utils/createOpenItems.js +18 -0
- package/lib-commonjs/utils/createOpenItems.js.map +1 -0
- package/lib-commonjs/utils/flattenTree.js +21 -34
- package/lib-commonjs/utils/flattenTree.js.map +1 -1
- package/lib-commonjs/utils/getTreeItemValueFromElement.js +18 -0
- package/lib-commonjs/utils/getTreeItemValueFromElement.js.map +1 -0
- package/lib-commonjs/utils/nextTypeAheadElement.js +16 -16
- package/lib-commonjs/utils/nextTypeAheadElement.js.map +1 -1
- package/lib-commonjs/utils/normalizeOpenItems.js +11 -9
- package/lib-commonjs/utils/normalizeOpenItems.js.map +1 -1
- package/lib-commonjs/utils/tokens.js +29 -20
- package/lib-commonjs/utils/tokens.js.map +1 -1
- package/lib-commonjs/utils/treeItemFilter.js +7 -7
- package/lib-commonjs/utils/treeItemFilter.js.map +1 -1
- package/package.json +26 -17
- package/lib/components/Tree/useTreeStyles.js.map +0 -1
- package/lib/components/TreeItem/useTreeItemStyles.js +0 -203
- package/lib/components/TreeItem/useTreeItemStyles.js.map +0 -1
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -98
- package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -115
- package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
- package/lib/hooks/index.js +0 -4
- package/lib/hooks/index.js.map +0 -1
- package/lib/hooks/useFlatTree.js +0 -49
- package/lib/hooks/useFlatTree.js.map +0 -1
- package/lib/hooks/useFlatTreeNavigation.js +0 -74
- package/lib/hooks/useFlatTreeNavigation.js.map +0 -1
- package/lib/hooks/useHTMLElementWalker.js +0 -80
- package/lib/hooks/useHTMLElementWalker.js.map +0 -1
- package/lib/hooks/useNestedTreeNavigation.js +0 -59
- package/lib/hooks/useNestedTreeNavigation.js.map +0 -1
- package/lib/hooks/useOpenItemsState.js +0 -22
- package/lib/hooks/useOpenItemsState.js.map +0 -1
- package/lib/utils/createUnfilteredFlatTree.js +0 -77
- package/lib/utils/createUnfilteredFlatTree.js.map +0 -1
- package/lib/utils/createVisibleFlatTree.js +0 -80
- package/lib/utils/createVisibleFlatTree.js.map +0 -1
- package/lib-commonjs/components/Tree/useTreeStyles.js +0 -27
- package/lib-commonjs/components/Tree/useTreeStyles.js.map +0 -1
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.js +0 -210
- package/lib-commonjs/components/TreeItem/useTreeItemStyles.js.map +0 -1
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js +0 -105
- package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.js.map +0 -1
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js +0 -122
- package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.js.map +0 -1
- package/lib-commonjs/hooks/index.js +0 -10
- package/lib-commonjs/hooks/index.js.map +0 -1
- package/lib-commonjs/hooks/useFlatTree.js +0 -56
- package/lib-commonjs/hooks/useFlatTree.js.map +0 -1
- package/lib-commonjs/hooks/useFlatTreeNavigation.js +0 -81
- package/lib-commonjs/hooks/useFlatTreeNavigation.js.map +0 -1
- package/lib-commonjs/hooks/useHTMLElementWalker.js +0 -88
- package/lib-commonjs/hooks/useHTMLElementWalker.js.map +0 -1
- package/lib-commonjs/hooks/useNestedTreeNavigation.js +0 -66
- package/lib-commonjs/hooks/useNestedTreeNavigation.js.map +0 -1
- package/lib-commonjs/hooks/useOpenItemsState.js +0 -29
- package/lib-commonjs/hooks/useOpenItemsState.js.map +0 -1
- package/lib-commonjs/utils/createUnfilteredFlatTree.js +0 -84
- package/lib-commonjs/utils/createUnfilteredFlatTree.js.map +0 -1
- package/lib-commonjs/utils/createVisibleFlatTree.js +0 -87
- package/lib-commonjs/utils/createVisibleFlatTree.js.map +0 -1
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useTreeItemPersonaLayoutStyles_unstable = exports.treeItemPersonaLayoutClassNames = void 0;
|
|
7
|
-
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
8
|
-
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
9
|
-
exports.treeItemPersonaLayoutClassNames = {
|
|
10
|
-
root: 'fui-TreeItemPersonaLayout',
|
|
11
|
-
media: 'fui-TreeItemPersonaLayout__media',
|
|
12
|
-
content: 'fui-TreeItemPersonaLayout__content',
|
|
13
|
-
description: 'fui-TreeItemPersonaLayout__description',
|
|
14
|
-
aside: 'fui-TreeItemPersonaLayout__aside',
|
|
15
|
-
main: 'fui-TreeItemPersonaLayout__main'
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* Styles for the root slot
|
|
19
|
-
*/
|
|
20
|
-
const useRootStyles = /*#__PURE__*/react_1.__styles({
|
|
21
|
-
base: {
|
|
22
|
-
a9b677: "fly5x3f",
|
|
23
|
-
mc9l5x: "f22iagw",
|
|
24
|
-
Bt984gj: "f122n59"
|
|
25
|
-
}
|
|
26
|
-
}, {
|
|
27
|
-
d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}"]
|
|
28
|
-
});
|
|
29
|
-
/**
|
|
30
|
-
* Styles for the expand icon slot
|
|
31
|
-
*/
|
|
32
|
-
const useMediaStyles = /*#__PURE__*/react_1.__styles({
|
|
33
|
-
base: {
|
|
34
|
-
mc9l5x: "f22iagw",
|
|
35
|
-
Bt984gj: "f122n59",
|
|
36
|
-
a9b677: "f1szoe96",
|
|
37
|
-
Bqenvij: "f1d2rq10",
|
|
38
|
-
z8tnut: "f1g0x7ka",
|
|
39
|
-
z189sj: ["f7x41pl", "fruq291"],
|
|
40
|
-
Byoj8tv: "f1qch9an",
|
|
41
|
-
uwmqm3: ["fgiv446", "ffczdla"]
|
|
42
|
-
}
|
|
43
|
-
}, {
|
|
44
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1szoe96{width:32px;}", ".f1d2rq10{height:32px;}", ".f1g0x7ka{padding-top:0;}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f1qch9an{padding-bottom:0;}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"]
|
|
45
|
-
});
|
|
46
|
-
const useContentStyles = /*#__PURE__*/react_1.__styles({
|
|
47
|
-
base: {
|
|
48
|
-
a9b677: "fly5x3f",
|
|
49
|
-
mc9l5x: "f22iagw",
|
|
50
|
-
Beiy3e4: "f1vx9l62",
|
|
51
|
-
z8tnut: "f1ngh7ph",
|
|
52
|
-
z189sj: ["f7x41pl", "fruq291"],
|
|
53
|
-
Byoj8tv: "f5o476b",
|
|
54
|
-
uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
|
|
55
|
-
i8kkvl: "f1fps8zv",
|
|
56
|
-
Belr9w4: "fws515f"
|
|
57
|
-
}
|
|
58
|
-
}, {
|
|
59
|
-
d: [".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}", ".fws515f{row-gap:var(--spacingHorizontalNone);}"]
|
|
60
|
-
});
|
|
61
|
-
const useMainStyles = /*#__PURE__*/react_1.__styles({
|
|
62
|
-
base: {
|
|
63
|
-
Bahqtrf: "fk6fouc",
|
|
64
|
-
Be2twd7: "fkhj508",
|
|
65
|
-
Bhrd7zp: "figsok6",
|
|
66
|
-
Bg96gwp: "f1i3iumi"
|
|
67
|
-
}
|
|
68
|
-
}, {
|
|
69
|
-
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
70
|
-
});
|
|
71
|
-
const useDescriptionStyles = /*#__PURE__*/react_1.__styles({
|
|
72
|
-
base: {
|
|
73
|
-
Bahqtrf: "fk6fouc",
|
|
74
|
-
Be2twd7: "fy9rknc",
|
|
75
|
-
Bhrd7zp: "figsok6",
|
|
76
|
-
Bg96gwp: "fwrc4pm"
|
|
77
|
-
}
|
|
78
|
-
}, {
|
|
79
|
-
d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
|
|
80
|
-
});
|
|
81
|
-
const useAsideStyles = /*#__PURE__*/react_1.__styles({
|
|
82
|
-
base: {
|
|
83
|
-
mc9l5x: "f22iagw",
|
|
84
|
-
Beiy3e4: "f1vx9l62",
|
|
85
|
-
Huce71: "fz5stix",
|
|
86
|
-
z189sj: ["fw5db7e", "f1uw59to"],
|
|
87
|
-
Bahqtrf: "fk6fouc",
|
|
88
|
-
Be2twd7: "fy9rknc",
|
|
89
|
-
Bhrd7zp: "figsok6",
|
|
90
|
-
Bg96gwp: "fwrc4pm"
|
|
91
|
-
}
|
|
92
|
-
}, {
|
|
93
|
-
d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".fz5stix{white-space:nowrap;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}"]
|
|
94
|
-
});
|
|
95
|
-
/**
|
|
96
|
-
* Apply styling to the TreeItemPersonaLayout slots based on the state
|
|
97
|
-
*/
|
|
98
|
-
const useTreeItemPersonaLayoutStyles_unstable = state => {
|
|
99
|
-
const rootStyles = useRootStyles();
|
|
100
|
-
const mediaStyles = useMediaStyles();
|
|
101
|
-
const contentStyles = useContentStyles();
|
|
102
|
-
const mainStyles = useMainStyles();
|
|
103
|
-
const descriptionStyles = useDescriptionStyles();
|
|
104
|
-
const asideStyles = useAsideStyles();
|
|
105
|
-
state.root.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);
|
|
106
|
-
state.media.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
|
|
107
|
-
if (state.content) {
|
|
108
|
-
state.content.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
|
|
109
|
-
}
|
|
110
|
-
if (state.main) {
|
|
111
|
-
state.main.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);
|
|
112
|
-
}
|
|
113
|
-
if (state.description) {
|
|
114
|
-
state.description.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
|
|
115
|
-
}
|
|
116
|
-
if (state.aside) {
|
|
117
|
-
state.aside.className = react_1.mergeClasses(exports.treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
|
|
118
|
-
}
|
|
119
|
-
return state;
|
|
120
|
-
};
|
|
121
|
-
exports.useTreeItemPersonaLayoutStyles_unstable = useTreeItemPersonaLayoutStyles_unstable;
|
|
122
|
-
//# sourceMappingURL=useTreeItemPersonaLayoutStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["react_1","require","react_theme_1","exports","treeItemPersonaLayoutClassNames","root","media","content","description","aside","main","useRootStyles","__styles","base","a9b677","mc9l5x","Bt984gj","d","useMediaStyles","Bqenvij","z8tnut","z189sj","Byoj8tv","uwmqm3","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useMainStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useDescriptionStyles","useAsideStyles","Huce71","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","contentStyles","mainStyles","descriptionStyles","asideStyles","className","mergeClasses"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.ts"],"sourcesContent":["import type { TreeItemPersonaLayoutSlots, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const treeItemPersonaLayoutClassNames: SlotClassNames<TreeItemPersonaLayoutSlots> = {\n root: 'fui-TreeItemPersonaLayout',\n media: 'fui-TreeItemPersonaLayout__media',\n content: 'fui-TreeItemPersonaLayout__content',\n description: 'fui-TreeItemPersonaLayout__description',\n aside: 'fui-TreeItemPersonaLayout__aside',\n main: 'fui-TreeItemPersonaLayout__main',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n },\n});\n\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = makeStyles({\n base: {\n display: 'flex',\n alignItems: 'center',\n width: '32px',\n height: '32px',\n ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS),\n },\n});\n\nconst useContentStyles = makeStyles({\n base: {\n width: '100%',\n display: 'flex',\n flexDirection: 'column',\n ...shorthands.padding(\n tokens.spacingVerticalMNudge,\n tokens.spacingHorizontalXS,\n tokens.spacingVerticalMNudge,\n tokens.spacingHorizontalS,\n ),\n ...shorthands.gap(tokens.spacingVerticalNone, tokens.spacingHorizontalNone),\n },\n});\nconst useMainStyles = makeStyles({\n base: {\n ...typographyStyles.body1,\n },\n});\nconst useDescriptionStyles = makeStyles({\n base: {\n ...typographyStyles.caption1,\n },\n});\nconst useAsideStyles = makeStyles({\n base: {\n display: 'flex',\n flexDirection: 'column',\n whiteSpace: 'nowrap',\n paddingRight: tokens.spacingHorizontalM,\n ...typographyStyles.caption1,\n },\n});\n\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = (\n state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutState => {\n const rootStyles = useRootStyles();\n const mediaStyles = useMediaStyles();\n const contentStyles = useContentStyles();\n const mainStyles = useMainStyles();\n const descriptionStyles = useDescriptionStyles();\n const asideStyles = useAsideStyles();\n\n state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, state.root.className);\n\n state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n\n if (state.content) {\n state.content.className = mergeClasses(\n treeItemPersonaLayoutClassNames.content,\n contentStyles.base,\n state.content.className,\n );\n }\n if (state.main) {\n state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.main.className);\n }\n if (state.description) {\n state.description.className = mergeClasses(\n treeItemPersonaLayoutClassNames.description,\n descriptionStyles.base,\n state.description.className,\n );\n }\n if (state.aside) {\n state.aside.className = mergeClasses(\n treeItemPersonaLayoutClassNames.aside,\n asideStyles.base,\n state.aside.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
7
|
-
tslib_1.__exportStar(require("./useFlatTree"), exports);
|
|
8
|
-
tslib_1.__exportStar(require("./useNestedTreeNavigation"), exports);
|
|
9
|
-
tslib_1.__exportStar(require("./useOpenItemsState"), exports);
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tree/src/hooks/index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA"}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useFlatTree_unstable = void 0;
|
|
7
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
const createUnfilteredFlatTree_1 = /*#__PURE__*/require("../utils/createUnfilteredFlatTree");
|
|
10
|
-
const createVisibleFlatTree_1 = /*#__PURE__*/require("../utils/createVisibleFlatTree");
|
|
11
|
-
const useFlatTreeNavigation_1 = /*#__PURE__*/require("./useFlatTreeNavigation");
|
|
12
|
-
const useOpenItemsState_1 = /*#__PURE__*/require("./useOpenItemsState");
|
|
13
|
-
/**
|
|
14
|
-
* this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems
|
|
15
|
-
* in multiple scenarios including virtualization.
|
|
16
|
-
*
|
|
17
|
-
* !!A flat tree is an unofficial spec for tree!!
|
|
18
|
-
*
|
|
19
|
-
* It should be used on cases where more complex interactions with a Tree is required.
|
|
20
|
-
* On simple scenarios it is advised to simply use a nested structure instead.
|
|
21
|
-
*
|
|
22
|
-
* @param items - a list of tree items
|
|
23
|
-
* @param options - in case control over the internal openItems is required
|
|
24
|
-
*/
|
|
25
|
-
function useFlatTree_unstable(items, options = {}) {
|
|
26
|
-
const [openItems, updateOpenItems] = useOpenItemsState_1.useOpenItemsState(options);
|
|
27
|
-
const unfilteredFlatTree = React.useMemo(() => createUnfilteredFlatTree_1.createUnfilteredFlatTree(items), [items]);
|
|
28
|
-
const [navigate, navigationRef] = useFlatTreeNavigation_1.useFlatTreeNavigation(unfilteredFlatTree);
|
|
29
|
-
const visibleFlatTree = React.useMemo(() => createVisibleFlatTree_1.createVisibleFlatTree(unfilteredFlatTree, openItems), [unfilteredFlatTree, openItems]);
|
|
30
|
-
const handleOpenChange = react_utilities_1.useEventCallback((event, data) => {
|
|
31
|
-
event.preventDefault();
|
|
32
|
-
updateOpenItems(data);
|
|
33
|
-
});
|
|
34
|
-
const handleNavigation = react_utilities_1.useEventCallback((event, data) => {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
navigate(data);
|
|
37
|
-
});
|
|
38
|
-
const flatTree = {
|
|
39
|
-
...visibleFlatTree,
|
|
40
|
-
getTreeProps: () => ({
|
|
41
|
-
ref: navigationRef,
|
|
42
|
-
openItems,
|
|
43
|
-
onOpenChange: handleOpenChange,
|
|
44
|
-
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
45
|
-
onNavigation_unstable: handleNavigation
|
|
46
|
-
}),
|
|
47
|
-
navigate,
|
|
48
|
-
getItem: id => {
|
|
49
|
-
var _a;
|
|
50
|
-
return (_a = unfilteredFlatTree.itemsPerId.get(id)) !== null && _a !== void 0 ? _a : null;
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
return flatTree;
|
|
54
|
-
}
|
|
55
|
-
exports.useFlatTree_unstable = useFlatTree_unstable;
|
|
56
|
-
//# sourceMappingURL=useFlatTree.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["react_utilities_1","require","React","createUnfilteredFlatTree_1","createVisibleFlatTree_1","useFlatTreeNavigation_1","useOpenItemsState_1","useFlatTree_unstable","items","options","openItems","updateOpenItems","useOpenItemsState","unfilteredFlatTree","useMemo","createUnfilteredFlatTree","navigate","navigationRef","useFlatTreeNavigation","visibleFlatTree","createVisibleFlatTree","handleOpenChange","useEventCallback","event","data","preventDefault","handleNavigation","flatTree","getTreeProps","ref","onOpenChange","onNavigation_unstable","getItem","id","_a","itemsPerId","get","exports"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTree.ts"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n} from '../Tree';\nimport { TreeItemProps } from '../TreeItem';\nimport { createUnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { createVisibleFlatTree } from '../utils/createVisibleFlatTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n\nexport type FlatTreeItemProps = Required<Pick<TreeItemProps, 'id'>> &\n TreeItemProps & {\n parentId?: string;\n };\n\nexport type FlatTreeItem = {\n getTreeItemProps(): Required<Pick<TreeItemProps, 'id' | 'aria-setsize' | 'aria-level' | 'aria-posinset' | 'leaf'>> &\n TreeItemProps;\n parentId?: string;\n childrenSize: number;\n index: number;\n id: string;\n level: number;\n};\n\nexport type FlatTreeProps = Required<\n Pick<TreeProps, 'openItems' | 'onOpenChange' | 'onNavigation_unstable'> & { ref: React.Ref<HTMLDivElement> }\n>;\n\n/**\n * 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 *\n * On simple scenarios it is advised to simply use a nested structure instead.\n */\nexport type FlatTree = {\n /**\n * returns the properties required for the Tree component to work properly.\n * That includes:\n * `openItems`, `onOpenChange`, `onNavigation_unstable` and `ref`\n */\n getTreeProps(): FlatTreeProps;\n /**\n * internal method used to react to an `onNavigation` event.\n * This method ensures proper navigation on keyboard and mouse interaction.\n * In case of virtualization it might be required to cancel default provided `onNavigation`\n * event and then call this method manually.\n *\n * @example\n * ```ts\n * // react-window\n * const handleNavigation = (event, data) => {\n * event.preventDefault();\n * const nextItem = tree.getNextNavigableItem(data);\n * // scroll to item using virtualization scroll mechanism\n * if (nextItem && !targetDocument.getElementById(nextItem.id)) {\n * listRef.current.scrollToItem(nextItem.index);\n * }\n * // wait for scrolling to happen and then invoke navigate method\n * requestAnimationFrame(() => {\n * tree.navigate(data);\n * });\n * };\n *```\n */\n navigate(data: TreeNavigationData_unstable): void;\n /**\n * returns next item to be focused on a navigation.\n * This method is provided to decouple the element that needs to be focused from\n * the action of focusing it itself.\n */\n getNextNavigableItem(data: TreeNavigationData_unstable): FlatTreeItem | null;\n /**\n * returns a single flat tree item by id without iterating over the whole collection\n */\n getItem(id: string): FlatTreeItem | null;\n /**\n * returns an iterable containing all visually available flat tree items\n */\n items(): Iterable<FlatTreeItem>;\n};\n\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(\n items: FlatTreeItemProps[],\n options: Pick<TreeProps, 'openItems' | 'defaultOpenItems'> = {},\n): FlatTree {\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(\n () => createVisibleFlatTree(unfilteredFlatTree, openItems),\n [unfilteredFlatTree, openItems],\n );\n\n const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n event.preventDefault();\n updateOpenItems(data);\n });\n\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n event.preventDefault();\n navigate(data);\n },\n );\n\n const flatTree: FlatTree = {\n ...visibleFlatTree,\n getTreeProps: () => ({\n ref: navigationRef as React.Ref<HTMLDivElement>,\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(id) ?? null,\n };\n return flatTree;\n}\n"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,KAAA,gBAAAD,OAAA;AASA,MAAAE,0BAAA,gBAAAF,OAAA;AACA,MAAAG,uBAAA,gBAAAH,OAAA;AACA,MAAAI,uBAAA,gBAAAJ,OAAA;AACA,MAAAK,mBAAA,gBAAAL,OAAA;AA8EA;;;;;;;;;;;;AAYA,SAAgBM,oBAAoBA,CAClCC,KAA0B,EAC1BC,OAAA,GAA6D,EAAE;EAE/D,MAAM,CAACC,SAAS,EAAEC,eAAe,CAAC,GAAGL,mBAAA,CAAAM,iBAAiB,CAACH,OAAO,CAAC;EAC/D,MAAMI,kBAAkB,GAAGX,KAAK,CAACY,OAAO,CAAC,MAAMX,0BAAA,CAAAY,wBAAwB,CAACP,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACxF,MAAM,CAACQ,QAAQ,EAAEC,aAAa,CAAC,GAAGZ,uBAAA,CAAAa,qBAAqB,CAACL,kBAAkB,CAAC;EAC3E,MAAMM,eAAe,GAAGjB,KAAK,CAACY,OAAO,CACnC,MAAMV,uBAAA,CAAAgB,qBAAqB,CAACP,kBAAkB,EAAEH,SAAS,CAAC,EAC1D,CAACG,kBAAkB,EAAEH,SAAS,CAAC,CAChC;EAED,MAAMW,gBAAgB,GAAGrB,iBAAA,CAAAsB,gBAAgB,CAAC,CAACC,KAA0B,EAAEC,IAAwB,KAAI;IACjGD,KAAK,CAACE,cAAc,EAAE;IACtBd,eAAe,CAACa,IAAI,CAAC;EACvB,CAAC,CAAC;EAEF,MAAME,gBAAgB,GAAG1B,iBAAA,CAAAsB,gBAAgB,CACvC,CAACC,KAAmC,EAAEC,IAAiC,KAAI;IACzED,KAAK,CAACE,cAAc,EAAE;IACtBT,QAAQ,CAACQ,IAAI,CAAC;EAChB,CAAC,CACF;EAED,MAAMG,QAAQ,GAAa;IACzB,GAAGR,eAAe;IAClBS,YAAY,EAAEA,CAAA,MAAO;MACnBC,GAAG,EAAEZ,aAA0C;MAC/CP,SAAS;MACToB,YAAY,EAAET,gBAAgB;MAC9B;MACAU,qBAAqB,EAAEL;KACxB,CAAC;IACFV,QAAQ;IACRgB,OAAO,EAAEC,EAAE,IAAG;MAAA,IAAAC,EAAA;MAAC,QAAAA,EAAA,GAAArB,kBAAkB,CAACsB,UAAU,CAACC,GAAG,CAACH,EAAE,CAAC,cAAAC,EAAA,cAAAA,EAAA,GAAI,IAAI;IAAA;GAC7D;EACD,OAAOP,QAAQ;AACjB;AArCAU,OAAA,CAAA9B,oBAAA,GAAAA,oBAAA"}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useFlatTreeNavigation = void 0;
|
|
7
|
-
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
8
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
const nextTypeAheadElement_1 = /*#__PURE__*/require("../utils/nextTypeAheadElement");
|
|
10
|
-
const tokens_1 = /*#__PURE__*/require("../utils/tokens");
|
|
11
|
-
const treeItemFilter_1 = /*#__PURE__*/require("../utils/treeItemFilter");
|
|
12
|
-
const useHTMLElementWalker_1 = /*#__PURE__*/require("./useHTMLElementWalker");
|
|
13
|
-
const useRovingTabIndexes_1 = /*#__PURE__*/require("./useRovingTabIndexes");
|
|
14
|
-
function useFlatTreeNavigation(flatTree) {
|
|
15
|
-
const {
|
|
16
|
-
targetDocument
|
|
17
|
-
} = react_shared_contexts_1.useFluent_unstable();
|
|
18
|
-
const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalker_1.useHTMLElementWalkerRef(treeItemFilter_1.treeItemFilter);
|
|
19
|
-
const [{
|
|
20
|
-
rove
|
|
21
|
-
}, rovingRootRef] = useRovingTabIndexes_1.useRovingTabIndex(treeItemFilter_1.treeItemFilter);
|
|
22
|
-
function getNextElement(data) {
|
|
23
|
-
if (!targetDocument || !treeItemWalkerRef.current) {
|
|
24
|
-
return null;
|
|
25
|
-
}
|
|
26
|
-
const treeItemWalker = treeItemWalkerRef.current;
|
|
27
|
-
switch (data.type) {
|
|
28
|
-
case tokens_1.treeDataTypes.click:
|
|
29
|
-
return data.target;
|
|
30
|
-
case tokens_1.treeDataTypes.typeAhead:
|
|
31
|
-
treeItemWalker.currentElement = data.target;
|
|
32
|
-
return nextTypeAheadElement_1.nextTypeAheadElement(treeItemWalker, data.event.key);
|
|
33
|
-
case tokens_1.treeDataTypes.arrowLeft:
|
|
34
|
-
return parentElement(flatTree, data.target, targetDocument);
|
|
35
|
-
case tokens_1.treeDataTypes.arrowRight:
|
|
36
|
-
treeItemWalker.currentElement = data.target;
|
|
37
|
-
return firstChild(data.target, treeItemWalker);
|
|
38
|
-
case tokens_1.treeDataTypes.end:
|
|
39
|
-
treeItemWalker.currentElement = treeItemWalker.root;
|
|
40
|
-
return treeItemWalker.lastChild();
|
|
41
|
-
case tokens_1.treeDataTypes.home:
|
|
42
|
-
treeItemWalker.currentElement = treeItemWalker.root;
|
|
43
|
-
return treeItemWalker.firstChild();
|
|
44
|
-
case tokens_1.treeDataTypes.arrowDown:
|
|
45
|
-
treeItemWalker.currentElement = data.target;
|
|
46
|
-
return treeItemWalker.nextElement();
|
|
47
|
-
case tokens_1.treeDataTypes.arrowUp:
|
|
48
|
-
treeItemWalker.currentElement = data.target;
|
|
49
|
-
return treeItemWalker.previousElement();
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
function navigate(data) {
|
|
53
|
-
const nextElement = getNextElement(data);
|
|
54
|
-
if (nextElement) {
|
|
55
|
-
rove(nextElement);
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
return [navigate, react_utilities_1.useMergedRefs(treeItemWalkerRootRef, rovingRootRef)];
|
|
59
|
-
}
|
|
60
|
-
exports.useFlatTreeNavigation = useFlatTreeNavigation;
|
|
61
|
-
function firstChild(target, treeWalker) {
|
|
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
|
-
}
|
|
72
|
-
return null;
|
|
73
|
-
}
|
|
74
|
-
function parentElement(flatTree, target, document) {
|
|
75
|
-
const flatTreeItem = flatTree.itemsPerId.get(target.id);
|
|
76
|
-
if (flatTreeItem && flatTreeItem.parentId) {
|
|
77
|
-
return document.getElementById(flatTreeItem.parentId);
|
|
78
|
-
}
|
|
79
|
-
return null;
|
|
80
|
-
}
|
|
81
|
-
//# sourceMappingURL=useFlatTreeNavigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["react_shared_contexts_1","require","react_utilities_1","nextTypeAheadElement_1","tokens_1","treeItemFilter_1","useHTMLElementWalker_1","useRovingTabIndexes_1","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","exports","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","document","flatTreeItem","itemsPerId","get","id","parentId","getElementById"],"sources":["../src/packages/react-components/react-tree/src/hooks/useFlatTreeNavigation.ts"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { TreeNavigationData_unstable } from '../Tree';\nimport { UnfilteredFlatTree } from '../utils/createUnfilteredFlatTree';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { HTMLElementWalker, useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\n\nexport function useFlatTreeNavigation(flatTree: UnfilteredFlatTree) {\n const { targetDocument } = useFluent_unstable();\n const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n\n function getNextElement(data: TreeNavigationData_unstable) {\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: TreeNavigationData_unstable) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return [navigate, useMergedRefs(treeItemWalkerRootRef, rovingRootRef)] as const;\n}\n\nfunction firstChild(target: HTMLElement, treeWalker: HTMLElementWalker): HTMLElement | null {\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}\n\nfunction parentElement(flatTree: UnfilteredFlatTree, target: HTMLElement, document: 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"],"mappings":"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"}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useHTMLElementWalkerRef = exports.createHTMLElementWalker = void 0;
|
|
7
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
function createHTMLElementWalker(root, filter = () => NodeFilter.FILTER_ACCEPT) {
|
|
10
|
-
let temporaryFilter;
|
|
11
|
-
const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
12
|
-
acceptNode(node) {
|
|
13
|
-
var _a;
|
|
14
|
-
if (!react_utilities_1.isHTMLElement(node)) {
|
|
15
|
-
return NodeFilter.FILTER_REJECT;
|
|
16
|
-
}
|
|
17
|
-
const filterResult = filter(node);
|
|
18
|
-
return filterResult === NodeFilter.FILTER_ACCEPT ? (_a = temporaryFilter === null || temporaryFilter === void 0 ? void 0 : temporaryFilter(node)) !== null && _a !== void 0 ? _a : filterResult : filterResult;
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
return {
|
|
22
|
-
get root() {
|
|
23
|
-
return treeWalker.root;
|
|
24
|
-
},
|
|
25
|
-
get currentElement() {
|
|
26
|
-
return treeWalker.currentNode;
|
|
27
|
-
},
|
|
28
|
-
set currentElement(element) {
|
|
29
|
-
treeWalker.currentNode = element;
|
|
30
|
-
},
|
|
31
|
-
firstChild: localFilter => {
|
|
32
|
-
temporaryFilter = localFilter;
|
|
33
|
-
const result = treeWalker.firstChild();
|
|
34
|
-
temporaryFilter = undefined;
|
|
35
|
-
return result;
|
|
36
|
-
},
|
|
37
|
-
lastChild: localFilter => {
|
|
38
|
-
temporaryFilter = localFilter;
|
|
39
|
-
const result = treeWalker.lastChild();
|
|
40
|
-
temporaryFilter = undefined;
|
|
41
|
-
return result;
|
|
42
|
-
},
|
|
43
|
-
nextElement: localFilter => {
|
|
44
|
-
temporaryFilter = localFilter;
|
|
45
|
-
const result = treeWalker.nextNode();
|
|
46
|
-
temporaryFilter = undefined;
|
|
47
|
-
return result;
|
|
48
|
-
},
|
|
49
|
-
nextSibling: localFilter => {
|
|
50
|
-
temporaryFilter = localFilter;
|
|
51
|
-
const result = treeWalker.nextSibling();
|
|
52
|
-
temporaryFilter = undefined;
|
|
53
|
-
return result;
|
|
54
|
-
},
|
|
55
|
-
parentElement: localFilter => {
|
|
56
|
-
temporaryFilter = localFilter;
|
|
57
|
-
const result = treeWalker.parentNode();
|
|
58
|
-
temporaryFilter = undefined;
|
|
59
|
-
return result;
|
|
60
|
-
},
|
|
61
|
-
previousElement: localFilter => {
|
|
62
|
-
temporaryFilter = localFilter;
|
|
63
|
-
const result = treeWalker.previousNode();
|
|
64
|
-
temporaryFilter = undefined;
|
|
65
|
-
return result;
|
|
66
|
-
},
|
|
67
|
-
previousSibling: localFilter => {
|
|
68
|
-
temporaryFilter = localFilter;
|
|
69
|
-
const result = treeWalker.previousSibling();
|
|
70
|
-
temporaryFilter = undefined;
|
|
71
|
-
return result;
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
exports.createHTMLElementWalker = createHTMLElementWalker;
|
|
76
|
-
const useHTMLElementWalkerRef = filter => {
|
|
77
|
-
const walkerRef = React.useRef();
|
|
78
|
-
const rootRefCallback = element => {
|
|
79
|
-
if (!element) {
|
|
80
|
-
walkerRef.current = undefined;
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
walkerRef.current = createHTMLElementWalker(element, filter);
|
|
84
|
-
};
|
|
85
|
-
return [walkerRef, rootRefCallback];
|
|
86
|
-
};
|
|
87
|
-
exports.useHTMLElementWalkerRef = useHTMLElementWalkerRef;
|
|
88
|
-
//# sourceMappingURL=useHTMLElementWalker.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["react_utilities_1","require","React","createHTMLElementWalker","root","filter","NodeFilter","FILTER_ACCEPT","temporaryFilter","treeWalker","document","createTreeWalker","SHOW_ELEMENT","acceptNode","node","isHTMLElement","FILTER_REJECT","filterResult","_a","currentElement","currentNode","element","firstChild","localFilter","result","undefined","lastChild","nextElement","nextNode","nextSibling","parentElement","parentNode","previousElement","previousNode","previousSibling","exports","useHTMLElementWalkerRef","walkerRef","useRef","rootRefCallback","current"],"sources":["../src/packages/react-components/react-tree/src/hooks/useHTMLElementWalker.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport interface HTMLElementWalker {\n readonly root: HTMLElement;\n currentElement: HTMLElement;\n firstChild(filter?: HTMLElementFilter): HTMLElement | null;\n lastChild(filter?: HTMLElementFilter): HTMLElement | null;\n nextElement(filter?: HTMLElementFilter): HTMLElement | null;\n nextSibling(filter?: HTMLElementFilter): HTMLElement | null;\n parentElement(filter?: HTMLElementFilter): HTMLElement | null;\n previousElement(filter?: HTMLElementFilter): HTMLElement | null;\n previousSibling(filter?: HTMLElementFilter): HTMLElement | null;\n}\n\nexport type HTMLElementFilter = (element: HTMLElement) => number;\n\nexport function createHTMLElementWalker(\n root: HTMLElement,\n filter: HTMLElementFilter = () => NodeFilter.FILTER_ACCEPT,\n): HTMLElementWalker {\n let temporaryFilter: HTMLElementFilter | undefined;\n const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {\n acceptNode(node: Node) {\n if (!isHTMLElement(node)) {\n return NodeFilter.FILTER_REJECT;\n }\n const filterResult = filter(node);\n return filterResult === NodeFilter.FILTER_ACCEPT ? temporaryFilter?.(node) ?? filterResult : filterResult;\n },\n });\n return {\n get root() {\n return treeWalker.root as HTMLElement;\n },\n get currentElement() {\n return treeWalker.currentNode as HTMLElement;\n },\n set currentElement(element) {\n treeWalker.currentNode = element;\n },\n firstChild: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.firstChild() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n lastChild: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.lastChild() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n nextElement: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.nextNode() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n nextSibling: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.nextSibling() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n parentElement: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.parentNode() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n previousElement: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.previousNode() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n previousSibling: localFilter => {\n temporaryFilter = localFilter;\n const result = treeWalker.previousSibling() as HTMLElement | null;\n temporaryFilter = undefined;\n return result;\n },\n };\n}\n\nexport const useHTMLElementWalkerRef = (filter?: HTMLElementFilter) => {\n const walkerRef = React.useRef<HTMLElementWalker>();\n\n const rootRefCallback = (element?: HTMLElement) => {\n if (!element) {\n walkerRef.current = undefined;\n return;\n }\n walkerRef.current = createHTMLElementWalker(element, filter);\n };\n return [walkerRef as React.RefObject<HTMLElementWalker>, rootRefCallback as React.Ref<HTMLElement>] as const;\n};\n"],"mappings":"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"}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useNestedTreeNavigation = void 0;
|
|
7
|
-
const useHTMLElementWalker_1 = /*#__PURE__*/require("./useHTMLElementWalker");
|
|
8
|
-
const nextTypeAheadElement_1 = /*#__PURE__*/require("../utils/nextTypeAheadElement");
|
|
9
|
-
const tokens_1 = /*#__PURE__*/require("../utils/tokens");
|
|
10
|
-
const treeItemFilter_1 = /*#__PURE__*/require("../utils/treeItemFilter");
|
|
11
|
-
const useRovingTabIndexes_1 = /*#__PURE__*/require("./useRovingTabIndexes");
|
|
12
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
13
|
-
function useNestedTreeNavigation() {
|
|
14
|
-
const [{
|
|
15
|
-
rove
|
|
16
|
-
}, rovingRootRef] = useRovingTabIndexes_1.useRovingTabIndex(treeItemFilter_1.treeItemFilter);
|
|
17
|
-
const [walkerRef, rootRef] = useHTMLElementWalker_1.useHTMLElementWalkerRef(treeItemFilter_1.treeItemFilter);
|
|
18
|
-
const getNextElement = data => {
|
|
19
|
-
if (!walkerRef.current) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
const treeItemWalker = walkerRef.current;
|
|
23
|
-
switch (data.type) {
|
|
24
|
-
case tokens_1.treeDataTypes.click:
|
|
25
|
-
return data.target;
|
|
26
|
-
case tokens_1.treeDataTypes.typeAhead:
|
|
27
|
-
treeItemWalker.currentElement = data.target;
|
|
28
|
-
return nextTypeAheadElement_1.nextTypeAheadElement(treeItemWalker, data.event.key);
|
|
29
|
-
case tokens_1.treeDataTypes.arrowLeft:
|
|
30
|
-
treeItemWalker.currentElement = data.target;
|
|
31
|
-
return treeItemWalker.parentElement();
|
|
32
|
-
case tokens_1.treeDataTypes.arrowRight:
|
|
33
|
-
treeItemWalker.currentElement = data.target;
|
|
34
|
-
return treeItemWalker.firstChild();
|
|
35
|
-
case tokens_1.treeDataTypes.end:
|
|
36
|
-
treeItemWalker.currentElement = treeItemWalker.root;
|
|
37
|
-
return lastChildRecursive(treeItemWalker);
|
|
38
|
-
case tokens_1.treeDataTypes.home:
|
|
39
|
-
treeItemWalker.currentElement = treeItemWalker.root;
|
|
40
|
-
return treeItemWalker.firstChild();
|
|
41
|
-
case tokens_1.treeDataTypes.arrowDown:
|
|
42
|
-
treeItemWalker.currentElement = data.target;
|
|
43
|
-
return treeItemWalker.nextElement();
|
|
44
|
-
case tokens_1.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
|
-
}
|
|
54
|
-
}
|
|
55
|
-
return [navigate, react_utilities_1.useMergedRefs(rootRef, rovingRootRef)];
|
|
56
|
-
}
|
|
57
|
-
exports.useNestedTreeNavigation = useNestedTreeNavigation;
|
|
58
|
-
function lastChildRecursive(walker) {
|
|
59
|
-
let lastElement = null;
|
|
60
|
-
let nextElement = null;
|
|
61
|
-
while (nextElement = walker.lastChild()) {
|
|
62
|
-
lastElement = nextElement;
|
|
63
|
-
}
|
|
64
|
-
return lastElement;
|
|
65
|
-
}
|
|
66
|
-
//# sourceMappingURL=useNestedTreeNavigation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useHTMLElementWalker_1","require","nextTypeAheadElement_1","tokens_1","treeItemFilter_1","useRovingTabIndexes_1","react_utilities_1","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","exports","walker","lastElement","lastChild"],"sources":["../src/packages/react-components/react-tree/src/hooks/useNestedTreeNavigation.ts"],"sourcesContent":["import { TreeNavigationData_unstable } from '../Tree';\nimport { HTMLElementWalker, 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';\n\nexport function useNestedTreeNavigation() {\n const [{ rove }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n const [walkerRef, rootRef] = useHTMLElementWalkerRef(treeItemFilter);\n\n const getNextElement = (data: TreeNavigationData_unstable) => {\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: TreeNavigationData_unstable) {\n const nextElement = getNextElement(data);\n if (nextElement) {\n rove(nextElement);\n }\n }\n return [navigate, useMergedRefs(rootRef, rovingRootRef)] as const;\n}\n\nfunction lastChildRecursive(walker: HTMLElementWalker) {\n let lastElement: HTMLElement | null = null;\n let nextElement: HTMLElement | null = null;\n while ((nextElement = walker.lastChild())) {\n lastElement = nextElement;\n }\n return lastElement;\n}\n"],"mappings":";;;;;;AACA,MAAAA,sBAAA,gBAAAC,OAAA;AACA,MAAAC,sBAAA,gBAAAD,OAAA;AACA,MAAAE,QAAA,gBAAAF,OAAA;AACA,MAAAG,gBAAA,gBAAAH,OAAA;AACA,MAAAI,qBAAA,gBAAAJ,OAAA;AACA,MAAAK,iBAAA,gBAAAL,OAAA;AAEA,SAAgBM,uBAAuBA,CAAA;EACrC,MAAM,CAAC;IAAEC;EAAI,CAAE,EAAEC,aAAa,CAAC,GAAGJ,qBAAA,CAAAK,iBAAiB,CAACN,gBAAA,CAAAO,cAAc,CAAC;EACnE,MAAM,CAACC,SAAS,EAAEC,OAAO,CAAC,GAAGb,sBAAA,CAAAc,uBAAuB,CAACV,gBAAA,CAAAO,cAAc,CAAC;EAEpE,MAAMI,cAAc,GAAIC,IAAiC,IAAI;IAC3D,IAAI,CAACJ,SAAS,CAACK,OAAO,EAAE;MACtB;;IAEF,MAAMC,cAAc,GAAGN,SAAS,CAACK,OAAO;IACxC,QAAQD,IAAI,CAACG,IAAI;MACf,KAAKhB,QAAA,CAAAiB,aAAa,CAACC,KAAK;QACtB,OAAOL,IAAI,CAACM,MAAM;MACpB,KAAKnB,QAAA,CAAAiB,aAAa,CAACG,SAAS;QAC1BL,cAAc,CAACM,cAAc,GAAGR,IAAI,CAACM,MAAM;QAC3C,OAAOpB,sBAAA,CAAAuB,oBAAoB,CAACP,cAAc,EAAEF,IAAI,CAACU,KAAK,CAACC,GAAG,CAAC;MAC7D,KAAKxB,QAAA,CAAAiB,aAAa,CAACQ,SAAS;QAC1BV,cAAc,CAACM,cAAc,GAAGR,IAAI,CAACM,MAAM;QAC3C,OAAOJ,cAAc,CAACW,aAAa,EAAE;MACvC,KAAK1B,QAAA,CAAAiB,aAAa,CAACU,UAAU;QAC3BZ,cAAc,CAACM,cAAc,GAAGR,IAAI,CAACM,MAAM;QAC3C,OAAOJ,cAAc,CAACa,UAAU,EAAE;MACpC,KAAK5B,QAAA,CAAAiB,aAAa,CAACY,GAAG;QACpBd,cAAc,CAACM,cAAc,GAAGN,cAAc,CAACe,IAAI;QACnD,OAAOC,kBAAkB,CAAChB,cAAc,CAAC;MAC3C,KAAKf,QAAA,CAAAiB,aAAa,CAACe,IAAI;QACrBjB,cAAc,CAACM,cAAc,GAAGN,cAAc,CAACe,IAAI;QACnD,OAAOf,cAAc,CAACa,UAAU,EAAE;MACpC,KAAK5B,QAAA,CAAAiB,aAAa,CAACgB,SAAS;QAC1BlB,cAAc,CAACM,cAAc,GAAGR,IAAI,CAACM,MAAM;QAC3C,OAAOJ,cAAc,CAACmB,WAAW,EAAE;MACrC,KAAKlC,QAAA,CAAAiB,aAAa,CAACkB,OAAO;QACxBpB,cAAc,CAACM,cAAc,GAAGR,IAAI,CAACM,MAAM;QAC3C,OAAOJ,cAAc,CAACqB,eAAe,EAAE;IAAC;EAE9C,CAAC;EACD,SAASC,QAAQA,CAACxB,IAAiC;IACjD,MAAMqB,WAAW,GAAGtB,cAAc,CAACC,IAAI,CAAC;IACxC,IAAIqB,WAAW,EAAE;MACf7B,IAAI,CAAC6B,WAAW,CAAC;;EAErB;EACA,OAAO,CAACG,QAAQ,EAAElC,iBAAA,CAAAmC,aAAa,CAAC5B,OAAO,EAAEJ,aAAa,CAAC,CAAU;AACnE;AA1CAiC,OAAA,CAAAnC,uBAAA,GAAAA,uBAAA;AA4CA,SAAS2B,kBAAkBA,CAACS,MAAyB;EACnD,IAAIC,WAAW,GAAuB,IAAI;EAC1C,IAAIP,WAAW,GAAuB,IAAI;EAC1C,OAAQA,WAAW,GAAGM,MAAM,CAACE,SAAS,EAAE,EAAG;IACzCD,WAAW,GAAGP,WAAW;;EAE3B,OAAOO,WAAW;AACpB"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useOpenItemsState = void 0;
|
|
7
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
8
|
-
const React = /*#__PURE__*/require("react");
|
|
9
|
-
const ImmutableSet_1 = /*#__PURE__*/require("../utils/ImmutableSet");
|
|
10
|
-
function useOpenItemsState(props) {
|
|
11
|
-
const [openItems, setOpenItems] = react_utilities_1.useControllableState({
|
|
12
|
-
state: React.useMemo(() => props.openItems && ImmutableSet_1.createImmutableSet(props.openItems), [props.openItems]),
|
|
13
|
-
defaultState: React.useMemo(() => props.defaultOpenItems && ImmutableSet_1.createImmutableSet(props.defaultOpenItems), [props.defaultOpenItems]),
|
|
14
|
-
initialState: ImmutableSet_1.emptyImmutableSet
|
|
15
|
-
});
|
|
16
|
-
const updateOpenItems = react_utilities_1.useEventCallback(data => setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)));
|
|
17
|
-
return [openItems, updateOpenItems];
|
|
18
|
-
}
|
|
19
|
-
exports.useOpenItemsState = useOpenItemsState;
|
|
20
|
-
function createNextOpenItems(data, previousOpenItems) {
|
|
21
|
-
const id = data.target.id;
|
|
22
|
-
const previousOpenItemsHasId = previousOpenItems.has(id);
|
|
23
|
-
if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
|
|
24
|
-
return previousOpenItems;
|
|
25
|
-
}
|
|
26
|
-
const nextOpenItems = ImmutableSet_1.createImmutableSet(previousOpenItems);
|
|
27
|
-
return data.open ? nextOpenItems.add(id) : nextOpenItems.delete(id);
|
|
28
|
-
}
|
|
29
|
-
//# sourceMappingURL=useOpenItemsState.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["react_utilities_1","require","React","ImmutableSet_1","useOpenItemsState","props","openItems","setOpenItems","useControllableState","state","useMemo","createImmutableSet","defaultState","defaultOpenItems","initialState","emptyImmutableSet","updateOpenItems","useEventCallback","data","currentOpenItems","createNextOpenItems","exports","previousOpenItems","id","target","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"sources":["../src/packages/react-components/react-tree/src/hooks/useOpenItemsState.ts"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { TreeItemId, TreeOpenChangeData, TreeProps } from '../Tree';\nimport { createImmutableSet, emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport function useOpenItemsState(props: Pick<TreeProps, 'openItems' | 'defaultOpenItems'>) {\n const [openItems, setOpenItems] = useControllableState({\n state: React.useMemo(() => props.openItems && createImmutableSet(props.openItems), [props.openItems]),\n defaultState: React.useMemo(\n () => props.defaultOpenItems && createImmutableSet(props.defaultOpenItems),\n [props.defaultOpenItems],\n ),\n initialState: emptyImmutableSet,\n });\n const updateOpenItems = useEventCallback((data: TreeOpenChangeData) =>\n setOpenItems(currentOpenItems => createNextOpenItems(data, currentOpenItems)),\n );\n return [openItems, updateOpenItems] as const;\n}\n\nfunction createNextOpenItems(\n data: TreeOpenChangeData,\n previousOpenItems: ImmutableSet<TreeItemId>,\n): ImmutableSet<TreeItemId> {\n const id = data.target.id;\n const previousOpenItemsHasId = previousOpenItems.has(id);\n if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n return previousOpenItems;\n }\n const nextOpenItems = createImmutableSet(previousOpenItems);\n return data.open ? nextOpenItems.add(id) : nextOpenItems.delete(id);\n}\n"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,KAAA,gBAAAD,OAAA;AAEA,MAAAE,cAAA,gBAAAF,OAAA;AAEA,SAAgBG,iBAAiBA,CAACC,KAAwD;EACxF,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGP,iBAAA,CAAAQ,oBAAoB,CAAC;IACrDC,KAAK,EAAEP,KAAK,CAACQ,OAAO,CAAC,MAAML,KAAK,CAACC,SAAS,IAAIH,cAAA,CAAAQ,kBAAkB,CAACN,KAAK,CAACC,SAAS,CAAC,EAAE,CAACD,KAAK,CAACC,SAAS,CAAC,CAAC;IACrGM,YAAY,EAAEV,KAAK,CAACQ,OAAO,CACzB,MAAML,KAAK,CAACQ,gBAAgB,IAAIV,cAAA,CAAAQ,kBAAkB,CAACN,KAAK,CAACQ,gBAAgB,CAAC,EAC1E,CAACR,KAAK,CAACQ,gBAAgB,CAAC,CACzB;IACDC,YAAY,EAAEX,cAAA,CAAAY;GACf,CAAC;EACF,MAAMC,eAAe,GAAGhB,iBAAA,CAAAiB,gBAAgB,CAAEC,IAAwB,IAChEX,YAAY,CAACY,gBAAgB,IAAIC,mBAAmB,CAACF,IAAI,EAAEC,gBAAgB,CAAC,CAAC,CAC9E;EACD,OAAO,CAACb,SAAS,EAAEU,eAAe,CAAU;AAC9C;AAbAK,OAAA,CAAAjB,iBAAA,GAAAA,iBAAA;AAeA,SAASgB,mBAAmBA,CAC1BF,IAAwB,EACxBI,iBAA2C;EAE3C,MAAMC,EAAE,GAAGL,IAAI,CAACM,MAAM,CAACD,EAAE;EACzB,MAAME,sBAAsB,GAAGH,iBAAiB,CAACI,GAAG,CAACH,EAAE,CAAC;EACxD,IAAIL,IAAI,CAACS,IAAI,GAAGF,sBAAsB,GAAG,CAACA,sBAAsB,EAAE;IAChE,OAAOH,iBAAiB;;EAE1B,MAAMM,aAAa,GAAGzB,cAAA,CAAAQ,kBAAkB,CAACW,iBAAiB,CAAC;EAC3D,OAAOJ,IAAI,CAACS,IAAI,GAAGC,aAAa,CAACC,GAAG,CAACN,EAAE,CAAC,GAAGK,aAAa,CAACE,MAAM,CAACP,EAAE,CAAC;AACrE"}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.flatTreeRootParentId = exports.createUnfilteredFlatTree = void 0;
|
|
7
|
-
/**
|
|
8
|
-
* creates a list of flat tree items
|
|
9
|
-
* and provides a map to access each item by id
|
|
10
|
-
*/
|
|
11
|
-
function createUnfilteredFlatTree(flatTreeItemProps) {
|
|
12
|
-
var _a;
|
|
13
|
-
const root = createRootFlatTreeItem();
|
|
14
|
-
const itemsPerId = new Map([[root.id, root]]);
|
|
15
|
-
const items = [];
|
|
16
|
-
for (let index = 0; index < flatTreeItemProps.length; index++) {
|
|
17
|
-
const {
|
|
18
|
-
parentId = exports.flatTreeRootParentId,
|
|
19
|
-
...treeItemProps
|
|
20
|
-
} = flatTreeItemProps[index];
|
|
21
|
-
const nextItemProps = flatTreeItemProps[index + 1];
|
|
22
|
-
const currentParent = itemsPerId.get(parentId);
|
|
23
|
-
if (!currentParent) {
|
|
24
|
-
if (process.env.NODE_ENV === 'development') {
|
|
25
|
-
// eslint-disable-next-line no-console
|
|
26
|
-
console.error(`useFlatTree: item ${flatTreeItemProps[index].id} not properly initialized, make sure provided items are organized`);
|
|
27
|
-
}
|
|
28
|
-
break;
|
|
29
|
-
}
|
|
30
|
-
const isLeaf = (nextItemProps === null || nextItemProps === void 0 ? void 0 : nextItemProps.parentId) !== treeItemProps.id;
|
|
31
|
-
const currentLevel = ((_a = currentParent.level) !== null && _a !== void 0 ? _a : 0) + 1;
|
|
32
|
-
const currentChildrenSize = ++currentParent.childrenSize;
|
|
33
|
-
const flatTreeItem = {
|
|
34
|
-
id: treeItemProps.id,
|
|
35
|
-
getTreeItemProps: () => ({
|
|
36
|
-
...treeItemProps,
|
|
37
|
-
'aria-level': currentLevel,
|
|
38
|
-
'aria-posinset': currentChildrenSize,
|
|
39
|
-
'aria-setsize': currentParent.childrenSize,
|
|
40
|
-
leaf: isLeaf
|
|
41
|
-
}),
|
|
42
|
-
level: currentLevel,
|
|
43
|
-
parentId,
|
|
44
|
-
childrenSize: 0,
|
|
45
|
-
index: -1
|
|
46
|
-
};
|
|
47
|
-
itemsPerId.set(flatTreeItem.id, flatTreeItem);
|
|
48
|
-
items.push(flatTreeItem);
|
|
49
|
-
}
|
|
50
|
-
return {
|
|
51
|
-
items,
|
|
52
|
-
itemsPerId
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
exports.createUnfilteredFlatTree = createUnfilteredFlatTree;
|
|
56
|
-
exports.flatTreeRootParentId = '__fuiFlatTreeRoot';
|
|
57
|
-
function createRootFlatTreeItem() {
|
|
58
|
-
return {
|
|
59
|
-
id: exports.flatTreeRootParentId,
|
|
60
|
-
getTreeItemProps: () => {
|
|
61
|
-
if (process.env.NODE_ENV === 'development') {
|
|
62
|
-
// eslint-disable-next-line no-console
|
|
63
|
-
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
64
|
-
}
|
|
65
|
-
return {
|
|
66
|
-
id: exports.flatTreeRootParentId,
|
|
67
|
-
'aria-setsize': -1,
|
|
68
|
-
'aria-level': -1,
|
|
69
|
-
'aria-posinset': -1,
|
|
70
|
-
leaf: true
|
|
71
|
-
};
|
|
72
|
-
},
|
|
73
|
-
childrenSize: 0,
|
|
74
|
-
get index() {
|
|
75
|
-
if (process.env.NODE_ENV === 'development') {
|
|
76
|
-
// eslint-disable-next-line no-console
|
|
77
|
-
console.error('useFlatTree: internal error, trying to access treeitem props from invalid root element');
|
|
78
|
-
}
|
|
79
|
-
return -1;
|
|
80
|
-
},
|
|
81
|
-
level: 0
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
//# sourceMappingURL=createUnfilteredFlatTree.js.map
|