@fluentui/react-tree 9.4.2 → 9.4.4
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 +157 -1
- package/CHANGELOG.md +41 -2
- package/lib/components/FlatTree/useFlatTree.js +8 -2
- package/lib/components/FlatTree/useFlatTree.js.map +1 -1
- package/lib/components/Tree/useTree.js +12 -3
- package/lib/components/Tree/useTree.js.map +1 -1
- package/lib/components/TreeItem/useTreeItem.js +1 -2
- package/lib/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib/hooks/useSubtree.js +2 -2
- package/lib/hooks/useSubtree.js.map +1 -1
- package/lib-commonjs/components/FlatTree/useFlatTree.js +8 -2
- package/lib-commonjs/components/FlatTree/useFlatTree.js.map +1 -1
- package/lib-commonjs/components/Tree/useTree.js +11 -2
- package/lib-commonjs/components/Tree/useTree.js.map +1 -1
- package/lib-commonjs/components/TreeItem/useTreeItem.js +8 -9
- package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
- package/lib-commonjs/hooks/useSubtree.js +1 -1
- package/lib-commonjs/hooks/useSubtree.js.map +1 -1
- package/package.json +11 -12
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,163 @@
|
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 11 Oct 2023 13:50:06 GMT",
|
|
6
|
+
"tag": "@fluentui/react-tree_v9.4.4",
|
|
7
|
+
"version": "9.4.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
12
|
+
"package": "@fluentui/react-tree",
|
|
13
|
+
"commit": "3beb206ba64c40d184d59de64931fb8de4f48961",
|
|
14
|
+
"comment": "chore: adds console error when mixing Tree and FlatTree components"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "bernardo.sunderhus@gmail.com",
|
|
18
|
+
"package": "@fluentui/react-tree",
|
|
19
|
+
"commit": "96b161d215b1a2e5b5d67464264e69c7c241f9fa",
|
|
20
|
+
"comment": "bugfix: Tree indentation broken due to wrongly consuming root context instead of subtree context"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "lingfan.gao@microsoft.com",
|
|
24
|
+
"package": "@fluentui/react-tree",
|
|
25
|
+
"commit": "97c3bc01d08b40f2fd0291fa193d95a621c9bdb8",
|
|
26
|
+
"comment": "refactor: consume virtual parent utilities from @fluentui/react-utilities"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-tree",
|
|
31
|
+
"comment": "Bump @fluentui/react-aria to v9.3.42",
|
|
32
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-tree",
|
|
37
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.39",
|
|
38
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-tree",
|
|
43
|
+
"comment": "Bump @fluentui/react-button to v9.3.48",
|
|
44
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-tree",
|
|
49
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.49",
|
|
50
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-tree",
|
|
55
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.40",
|
|
56
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-tree",
|
|
61
|
+
"comment": "Bump @fluentui/react-radio to v9.1.49",
|
|
62
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-tree",
|
|
67
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.6",
|
|
68
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"author": "beachball",
|
|
72
|
+
"package": "@fluentui/react-tree",
|
|
73
|
+
"comment": "Bump @fluentui/react-utilities to v9.15.0",
|
|
74
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"author": "beachball",
|
|
78
|
+
"package": "@fluentui/react-tree",
|
|
79
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.16",
|
|
80
|
+
"commit": "b4466a0b9d3568e8e1ee1d814db5c8449dfd65b8"
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"date": "Mon, 09 Oct 2023 20:45:44 GMT",
|
|
87
|
+
"tag": "@fluentui/react-tree_v9.4.3",
|
|
88
|
+
"version": "9.4.3",
|
|
89
|
+
"comments": {
|
|
90
|
+
"patch": [
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-tree",
|
|
94
|
+
"comment": "Bump @fluentui/react-aria to v9.3.41",
|
|
95
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-tree",
|
|
100
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.38",
|
|
101
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"author": "beachball",
|
|
105
|
+
"package": "@fluentui/react-tree",
|
|
106
|
+
"comment": "Bump @fluentui/react-button to v9.3.47",
|
|
107
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "beachball",
|
|
111
|
+
"package": "@fluentui/react-tree",
|
|
112
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.48",
|
|
113
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"author": "beachball",
|
|
117
|
+
"package": "@fluentui/react-tree",
|
|
118
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.39",
|
|
119
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"author": "beachball",
|
|
123
|
+
"package": "@fluentui/react-tree",
|
|
124
|
+
"comment": "Bump @fluentui/react-portal to v9.3.22",
|
|
125
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"author": "beachball",
|
|
129
|
+
"package": "@fluentui/react-tree",
|
|
130
|
+
"comment": "Bump @fluentui/react-radio to v9.1.48",
|
|
131
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
"author": "beachball",
|
|
135
|
+
"package": "@fluentui/react-tree",
|
|
136
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.10.0",
|
|
137
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"author": "beachball",
|
|
141
|
+
"package": "@fluentui/react-tree",
|
|
142
|
+
"comment": "Bump @fluentui/react-tabster to v9.13.5",
|
|
143
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"author": "beachball",
|
|
147
|
+
"package": "@fluentui/react-tree",
|
|
148
|
+
"comment": "Bump @fluentui/react-utilities to v9.14.2",
|
|
149
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
"author": "beachball",
|
|
153
|
+
"package": "@fluentui/react-tree",
|
|
154
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.15",
|
|
155
|
+
"commit": "d2196ea1ca001fbc22f38fcb258016f1df6c87e4"
|
|
156
|
+
}
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"date": "Thu, 05 Oct 2023 15:25:34 GMT",
|
|
6
162
|
"tag": "@fluentui/react-tree_v9.4.2",
|
|
7
163
|
"version": "9.4.2",
|
|
8
164
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,51 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tree
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 11 Oct 2023 13:50:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.4)
|
|
8
|
+
|
|
9
|
+
Wed, 11 Oct 2023 13:50:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.3..@fluentui/react-tree_v9.4.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: adds console error when mixing Tree and FlatTree components ([PR #29461](https://github.com/microsoft/fluentui/pull/29461) by bernardo.sunderhus@gmail.com)
|
|
15
|
+
- bugfix: Tree indentation broken due to wrongly consuming root context instead of subtree context ([PR #29459](https://github.com/microsoft/fluentui/pull/29459) by bernardo.sunderhus@gmail.com)
|
|
16
|
+
- refactor: consume virtual parent utilities from @fluentui/react-utilities ([PR #29286](https://github.com/microsoft/fluentui/pull/29286) by lingfan.gao@microsoft.com)
|
|
17
|
+
- Bump @fluentui/react-aria to v9.3.42 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
18
|
+
- Bump @fluentui/react-avatar to v9.5.39 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
19
|
+
- Bump @fluentui/react-button to v9.3.48 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
20
|
+
- Bump @fluentui/react-checkbox to v9.1.49 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
21
|
+
- Bump @fluentui/react-context-selector to v9.1.40 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
22
|
+
- Bump @fluentui/react-radio to v9.1.49 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
23
|
+
- Bump @fluentui/react-tabster to v9.13.6 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.15.0 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
25
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.16 ([PR #29262](https://github.com/microsoft/fluentui/pull/29262) by beachball)
|
|
26
|
+
|
|
27
|
+
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.3)
|
|
28
|
+
|
|
29
|
+
Mon, 09 Oct 2023 20:45:44 GMT
|
|
30
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.2..@fluentui/react-tree_v9.4.3)
|
|
31
|
+
|
|
32
|
+
### Patches
|
|
33
|
+
|
|
34
|
+
- Bump @fluentui/react-aria to v9.3.41 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
35
|
+
- Bump @fluentui/react-avatar to v9.5.38 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
36
|
+
- Bump @fluentui/react-button to v9.3.47 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
37
|
+
- Bump @fluentui/react-checkbox to v9.1.48 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
38
|
+
- Bump @fluentui/react-context-selector to v9.1.39 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
39
|
+
- Bump @fluentui/react-portal to v9.3.22 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
40
|
+
- Bump @fluentui/react-radio to v9.1.48 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
41
|
+
- Bump @fluentui/react-shared-contexts to v9.10.0 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
42
|
+
- Bump @fluentui/react-tabster to v9.13.5 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
43
|
+
- Bump @fluentui/react-utilities to v9.14.2 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
44
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.15 ([PR #29364](https://github.com/microsoft/fluentui/pull/29364) by beachball)
|
|
45
|
+
|
|
7
46
|
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.2)
|
|
8
47
|
|
|
9
|
-
Thu, 05 Oct 2023 15:
|
|
48
|
+
Thu, 05 Oct 2023 15:25:34 GMT
|
|
10
49
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.1..@fluentui/react-tree_v9.4.2)
|
|
11
50
|
|
|
12
51
|
### Patches
|
|
@@ -9,12 +9,13 @@ import { useTreeContext_unstable } from '../../contexts/treeContext';
|
|
|
9
9
|
import { useSubtree } from '../../hooks/useSubtree';
|
|
10
10
|
import { ImmutableSet } from '../../utils/ImmutableSet';
|
|
11
11
|
import { ImmutableMap } from '../../utils/ImmutableMap';
|
|
12
|
+
import { SubtreeContext } from '../../contexts/subtreeContext';
|
|
12
13
|
export const useFlatTree_unstable = (props, ref)=>{
|
|
13
|
-
const
|
|
14
|
+
const isRoot = React.useContext(SubtreeContext) === undefined;
|
|
14
15
|
// as level is static, this doesn't break rule of hooks
|
|
15
16
|
// and if this becomes an issue later on, this can be easily converted
|
|
16
17
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
17
|
-
return
|
|
18
|
+
return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
|
|
18
19
|
};
|
|
19
20
|
function useRootFlatTree(props, ref) {
|
|
20
21
|
const { navigate, initialize } = useFlatTreeNavigation();
|
|
@@ -50,6 +51,11 @@ function useSubFlatTree(props, ref) {
|
|
|
50
51
|
console.error(`@fluentui/react-tree [useFlatTree]:
|
|
51
52
|
Subtrees are not allowed in a FlatTree!
|
|
52
53
|
You cannot use a <FlatTree> component inside of another <FlatTree> component.`);
|
|
54
|
+
}
|
|
55
|
+
if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {
|
|
56
|
+
// eslint-disable-next-line no-console
|
|
57
|
+
console.error(`@fluentui/react-tree [useFlatTree]:
|
|
58
|
+
Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.`);
|
|
53
59
|
}
|
|
54
60
|
return {
|
|
55
61
|
...useSubtree(props, ref),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n props,\n ref,\n) => {\n const
|
|
1
|
+
{"version":3,"sources":["useFlatTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { FlatTreeProps, FlatTreeState } from './FlatTree.types';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { TreeNavigationData_unstable, TreeNavigationEvent_unstable } from '../Tree/Tree.types';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\n\nexport const useFlatTree_unstable: (props: FlatTreeProps, ref: React.Ref<HTMLElement>) => FlatTreeState = (\n props,\n ref,\n) => {\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\n\nfunction useRootFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n const { navigate, initialize } = useFlatTreeNavigation();\n const walkerRef = React.useRef<HTMLElementWalker>();\n const { targetDocument } = useFluent_unstable();\n\n const initializeWalker = React.useCallback(\n (root: HTMLElement | null) => {\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n },\n [initialize, targetDocument],\n );\n\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n props.onNavigation?.(event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n },\n );\n\n return {\n treeType: 'flat',\n ...useRootTree({ ...props, onNavigation: handleNavigation }, useMergedRefs(ref, initializeWalker)),\n };\n}\n\nfunction useSubFlatTree(props: FlatTreeProps, ref: React.Ref<HTMLElement>): FlatTreeState {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useFlatTree]:\n Subtrees are not allowed in a FlatTree!\n You cannot use a <FlatTree> component inside of another <FlatTree> component.\n `);\n }\n if (useTreeContext_unstable(ctx => ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useFlatTree]:\n Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.\n `);\n }\n return {\n ...useSubtree(props, ref),\n // ------ defaultTreeContextValue\n level: 0,\n contextType: 'root',\n treeType: 'nested',\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n // ------ defaultTreeContextValue\n open: false,\n components: { root: React.Fragment },\n root: slot.always(props, { elementType: React.Fragment }),\n };\n}\n\nfunction noop() {\n /* do nothing */\n}\n"],"names":["React","useRootTree","useFlatTreeNavigation","createHTMLElementWalker","useFluent_unstable","treeItemFilter","slot","useEventCallback","useMergedRefs","useTreeContext_unstable","useSubtree","ImmutableSet","ImmutableMap","SubtreeContext","useFlatTree_unstable","props","ref","isRoot","useContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleNavigation","event","data","onNavigation","isDefaultPrevented","treeType","process","env","NODE_ENV","console","error","ctx","level","contextType","selectionMode","openItems","empty","checkedItems","requestTreeResponse","noop","appearance","size","open","components","Fragment","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AAEtD,SAASC,qBAAqB,QAAQ,0BAA0B;AAChE,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAElF,SAASC,uBAAuB,QAAQ,6BAA6B;AACrE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D,OAAO,MAAMC,uBAA6F,CACxGC,OACAC;IAEA,MAAMC,SAASjB,MAAMkB,UAAU,CAACL,oBAAoBM;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,gBAAgBL,OAAOC,OAAOK,eAAeN,OAAOC;AACtE,EAAE;AAEF,SAASI,gBAAgBL,KAAoB,EAAEC,GAA2B;IACxE,MAAM,EAAEM,QAAQ,EAAEC,UAAU,EAAE,GAAGrB;IACjC,MAAMsB,YAAYxB,MAAMyB,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGtB;IAE3B,MAAMuB,mBAAmB3B,MAAM4B,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAG3B,wBAAwB0B,MAAMH,gBAAgBrB;YAClEkB,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBxB,iBACvB,CAACyB,OAAqCC;YACpClB;SAAAA,sBAAAA,MAAMmB,YAAY,cAAlBnB,0CAAAA,yBAAAA,OAAqBiB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMG,kBAAkB,IAAI;YACpDb,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLM,UAAU;QACV,GAAGnC,YAAY;YAAE,GAAGc,KAAK;YAAEmB,cAAcH;QAAiB,GAAGvB,cAAcQ,KAAKW,kBAAkB;IACpG;AACF;AAEA,SAASN,eAAeN,KAAoB,EAAEC,GAA2B;IACvE,IAAIqB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;;6EAIpC,CAAC;IACH;IACA,IAAIhC,wBAAwBiC,CAAAA,MAAOA,IAAIN,QAAQ,MAAM,YAAYC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACvG,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;8FAGpC,CAAC;IACH;IACA,OAAO;QACL,GAAG/B,WAAWK,OAAOC,IAAI;QACzB,iCAAiC;QACjC2B,OAAO;QACPC,aAAa;QACbR,UAAU;QACVS,eAAe;QACfC,WAAWnC,aAAaoC,KAAK;QAC7BC,cAAcpC,aAAamC,KAAK;QAChCE,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;QACNC,YAAY;YAAEzB,MAAM7B,MAAMuD,QAAQ;QAAC;QACnC1B,MAAMvB,KAAKkD,MAAM,CAACzC,OAAO;YAAE0C,aAAazD,MAAMuD,QAAQ;QAAC;IACzD;AACF;AAEA,SAASL;AACP,cAAc,GAChB"}
|
|
@@ -2,19 +2,20 @@ import * as React from 'react';
|
|
|
2
2
|
import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';
|
|
4
4
|
import { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';
|
|
5
|
-
import {
|
|
5
|
+
import { SubtreeContext } from '../../contexts/subtreeContext';
|
|
6
6
|
import { useRootTree } from '../../hooks/useRootTree';
|
|
7
7
|
import { useSubtree } from '../../hooks/useSubtree';
|
|
8
8
|
import { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';
|
|
9
9
|
import { treeItemFilter } from '../../utils/treeItemFilter';
|
|
10
10
|
import { useTreeNavigation } from './useTreeNavigation';
|
|
11
11
|
import { useFluent_unstable } from '@fluentui/react-shared-contexts';
|
|
12
|
+
import { useTreeContext_unstable } from '../../contexts/treeContext';
|
|
12
13
|
export const useTree_unstable = (props, ref)=>{
|
|
13
|
-
const
|
|
14
|
+
const isRoot = React.useContext(SubtreeContext) === undefined;
|
|
14
15
|
// as level is static, this doesn't break rule of hooks
|
|
15
16
|
// and if this becomes an issue later on, this can be easily converted
|
|
16
17
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
17
|
-
return
|
|
18
|
+
return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);
|
|
18
19
|
};
|
|
19
20
|
function useNestedRootTree(props, ref) {
|
|
20
21
|
const [openItems, setOpenItems] = useControllableOpenItems(props);
|
|
@@ -69,3 +70,11 @@ function useNestedRootTree(props, ref) {
|
|
|
69
70
|
}, useMergedRefs(ref, initializeWalker))
|
|
70
71
|
};
|
|
71
72
|
}
|
|
73
|
+
function useNestedSubtree(props, ref) {
|
|
74
|
+
if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {
|
|
75
|
+
// eslint-disable-next-line no-console
|
|
76
|
+
console.error(`@fluentui/react-tree [useTree]:
|
|
77
|
+
Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.`);
|
|
78
|
+
}
|
|
79
|
+
return useSubtree(props, ref);
|
|
80
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTree.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type {\n TreeCheckedChangeData,\n TreeCheckedChangeEvent,\n TreeNavigationData_unstable,\n TreeNavigationEvent_unstable,\n TreeOpenChangeData,\n TreeOpenChangeEvent,\n TreeProps,\n TreeState,\n} from './Tree.types';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { HTMLElementWalker, createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\n\nexport const useTree_unstable = (props: TreeProps, ref: React.Ref<HTMLElement>): TreeState => {\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\n\nfunction useNestedRootTree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const { navigate, initialize } = useTreeNavigation();\n const walkerRef = React.useRef<HTMLElementWalker>();\n const { targetDocument } = useFluent_unstable();\n\n const initializeWalker = React.useCallback(\n (root: HTMLElement | null) => {\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n },\n [initialize, targetDocument],\n );\n\n const handleOpenChange = useEventCallback((event: TreeOpenChangeEvent, data: TreeOpenChangeData) => {\n const nextOpenItems = createNextOpenItems(data, openItems);\n props.onOpenChange?.(event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable(),\n });\n setOpenItems(nextOpenItems);\n });\n\n const handleCheckedChange = useEventCallback((event: TreeCheckedChangeEvent, data: TreeCheckedChangeData) => {\n if (walkerRef.current) {\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n props.onCheckedChange?.(event, {\n ...data,\n checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable(),\n });\n }\n });\n const handleNavigation = useEventCallback(\n (event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable) => {\n props.onNavigation?.(event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n },\n );\n\n return {\n treeType: 'nested',\n ...useRootTree(\n {\n ...props,\n openItems,\n checkedItems,\n onOpenChange: handleOpenChange,\n onNavigation: handleNavigation,\n onCheckedChange: handleCheckedChange,\n },\n useMergedRefs(ref, initializeWalker),\n ),\n };\n}\n\nfunction useNestedSubtree(props: TreeProps, ref: React.Ref<HTMLElement>): TreeState {\n if (useTreeContext_unstable(ctx => ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(/* #__DE-INDENT__ */ `\n @fluentui/react-tree [useTree]:\n Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.\n `);\n }\n return useSubtree(props, ref);\n}\n"],"names":["React","useEventCallback","useMergedRefs","createNextOpenItems","useControllableOpenItems","createNextNestedCheckedItems","useNestedCheckedItems","SubtreeContext","useRootTree","useSubtree","createHTMLElementWalker","treeItemFilter","useTreeNavigation","useFluent_unstable","useTreeContext_unstable","useTree_unstable","props","ref","isRoot","useContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","checkedItems","navigate","initialize","walkerRef","useRef","targetDocument","initializeWalker","useCallback","root","current","handleOpenChange","event","data","nextOpenItems","onOpenChange","dangerouslyGetInternalSet_unstable","handleCheckedChange","nextCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","onNavigation","isDefaultPrevented","treeType","ctx","process","env","NODE_ENV","console","error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAW5E,SAASC,mBAAmB,EAAEC,wBAAwB,QAAQ,uCAAuC;AACrG,SAASC,4BAA4B,EAAEC,qBAAqB,QAAQ,sCAAsC;AAC1G,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAA4BC,uBAAuB,QAAQ,sCAAsC;AACjG,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,uBAAuB,QAAQ,6BAA6B;AAErE,OAAO,MAAMC,mBAAmB,CAACC,OAAkBC;IACjD,MAAMC,SAASlB,MAAMmB,UAAU,CAACZ,oBAAoBa;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOF,SAASG,kBAAkBL,OAAOC,OAAOK,iBAAiBN,OAAOC;AAC1E,EAAE;AAEF,SAASI,kBAAkBL,KAAgB,EAAEC,GAA2B;IACtE,MAAM,CAACM,WAAWC,aAAa,GAAGpB,yBAAyBY;IAC3D,MAAMS,eAAenB,sBAAsBU;IAC3C,MAAM,EAAEU,QAAQ,EAAEC,UAAU,EAAE,GAAGf;IACjC,MAAMgB,YAAY5B,MAAM6B,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGjB;IAE3B,MAAMkB,mBAAmB/B,MAAMgC,WAAW,CACxC,CAACC;QACC,IAAIA,QAAQH,gBAAgB;YAC1BF,UAAUM,OAAO,GAAGxB,wBAAwBuB,MAAMH,gBAAgBnB;YAClEgB,WAAWC,UAAUM,OAAO;QAC9B;IACF,GACA;QAACP;QAAYG;KAAe;IAG9B,MAAMK,mBAAmBlC,iBAAiB,CAACmC,OAA4BC;YAErErB;QADA,MAAMsB,gBAAgBnC,oBAAoBkC,MAAMd;SAChDP,sBAAAA,MAAMuB,YAAY,cAAlBvB,0CAAAA,yBAAAA,OAAqBoB,OAAO;YAC1B,GAAGC,IAAI;YACPd,WAAWe,cAAcE,kCAAkC;QAC7D;QACAhB,aAAac;IACf;IAEA,MAAMG,sBAAsBxC,iBAAiB,CAACmC,OAA+BC;QAC3E,IAAIT,UAAUM,OAAO,EAAE;gBAErBlB;YADA,MAAM0B,mBAAmBrC,6BAA6BgC,MAAMZ;aAC5DT,yBAAAA,MAAM2B,eAAe,cAArB3B,6CAAAA,4BAAAA,OAAwBoB,OAAO;gBAC7B,GAAGC,IAAI;gBACPZ,cAAciB,iBAAiBE,kCAAkC;YACnE;QACF;IACF;IACA,MAAMC,mBAAmB5C,iBACvB,CAACmC,OAAqCC;YACpCrB;SAAAA,sBAAAA,MAAM8B,YAAY,cAAlB9B,0CAAAA,yBAAAA,OAAqBoB,OAAOC;QAC5B,IAAIT,UAAUM,OAAO,IAAI,CAACE,MAAMW,kBAAkB,IAAI;YACpDrB,SAASW,MAAMT,UAAUM,OAAO;QAClC;IACF;IAGF,OAAO;QACLc,UAAU;QACV,GAAGxC,YACD;YACE,GAAGQ,KAAK;YACRO;YACAE;YACAc,cAAcJ;YACdW,cAAcD;YACdF,iBAAiBF;QACnB,GACAvC,cAAce,KAAKc,kBACpB;IACH;AACF;AAEA,SAAST,iBAAiBN,KAAgB,EAAEC,GAA2B;IACrE,IAAIH,wBAAwBmC,CAAAA,MAAOA,IAAID,QAAQ,MAAM,UAAUE,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACrG,sCAAsC;QACtCC,QAAQC,KAAK,CAAsB,CAAC;8FAGpC,CAAC;IACH;IACA,OAAO7C,WAAWO,OAAOC;AAC3B"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import * as ReactDOM from 'react-dom';
|
|
3
|
-
import { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
|
|
4
|
-
import { elementContains } from '@fluentui/react-portal';
|
|
3
|
+
import { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot, elementContains } from '@fluentui/react-utilities';
|
|
5
4
|
import { Space } from '@fluentui/keyboard-keys';
|
|
6
5
|
import { treeDataTypes } from '../../utils/tokens';
|
|
7
6
|
import { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const {\n onClick,\n onKeyDown,\n onMouseOver,\n onFocus,\n onMouseOut,\n onBlur,\n onChange,\n as = 'div',\n itemType = 'leaf',\n 'aria-level': level = contextLevel,\n ...rest\n } = props;\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n }, []);\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click,\n });\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate',\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open',\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue,\n });\n }\n });\n\n const setActionsVisibleIfNotFromSubtree = React.useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n }, []);\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n },\n [],\n );\n\n const handleMouseOver = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onMouseOver?.(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n\n const handleFocus = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n onFocus?.(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n\n const handleMouseOut = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onMouseOut?.(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n const handleBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(\n getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleMouseOver,\n onFocus: handleFocus,\n onMouseOut: handleMouseOut,\n onBlur: handleBlur,\n onChange: handleChange,\n } as const),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n - \"aria-setsize\": the number of siblings in this level of the tree.\n - \"aria-level\": the current level of the treeitem.\n - \"parentValue\": the \"value\" property of the parent item of this item.\n `);\n }\n }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","components","root","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport {\n getIntrinsicElementProps,\n useId,\n useMergedRefs,\n useEventCallback,\n slot,\n elementContains,\n} from '@fluentui/react-utilities';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n const {\n onClick,\n onKeyDown,\n onMouseOver,\n onFocus,\n onMouseOut,\n onBlur,\n onChange,\n as = 'div',\n itemType = 'leaf',\n 'aria-level': level = contextLevel,\n ...rest\n } = props;\n\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n setAsideVisible(actionsElement === null);\n }, []);\n\n const actionsRef = React.useRef<HTMLDivElement>(null);\n const expandIconRef = React.useRef<HTMLDivElement>(null);\n const layoutRef = React.useRef<HTMLDivElement>(null);\n const subtreeRef = React.useRef<HTMLDivElement>(null);\n const selectionRef = React.useRef<HTMLInputElement>(null);\n\n const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onClick?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n ReactDOM.unstable_batchedUpdates(() => {\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n } as const;\n props.onOpenChange?.(event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open',\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click,\n });\n });\n });\n\n const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch (event.key) {\n case Space:\n if (selectionMode !== 'none') {\n selectionRef.current?.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter: {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget,\n });\n case treeDataTypes.ArrowLeft: {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate',\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget,\n } as const;\n if (!open) {\n props.onOpenChange?.(event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open',\n });\n }\n const isTypeAheadCharacter =\n event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue,\n });\n }\n });\n\n const setActionsVisibleIfNotFromSubtree = React.useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n }, []);\n const setActionsInvisibleIfNotFromSubtree = React.useCallback(\n (event: React.MouseEvent<HTMLDivElement> | React.FocusEvent<HTMLDivElement>) => {\n const isTargetFromSubtree = Boolean(\n subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n );\n const isRelatedTargetFromActions = Boolean(\n actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n );\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n },\n [],\n );\n\n const handleMouseOver = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onMouseOver?.(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n\n const handleFocus = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n onFocus?.(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n\n const handleMouseOut = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n onMouseOut?.(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n const handleBlur = useEventCallback((event: React.FocusEvent<HTMLDivElement>) => {\n onBlur?.(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n\n const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked,\n });\n });\n\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div',\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(\n getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleMouseOver,\n onFocus: handleFocus,\n onMouseOut: handleMouseOut,\n onBlur: handleBlur,\n onChange: handleChange,\n } as const),\n { elementType: 'div' },\n ),\n };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n if (process.env.NODE_ENV !== 'production') {\n if (\n props['aria-posinset'] === undefined ||\n props['aria-setsize'] === undefined ||\n props['aria-level'] === undefined ||\n (props.parentValue === undefined && props['aria-level'] !== 1)\n ) {\n // eslint-disable-next-line no-console\n console.error(/** #__DE-INDENT__ */ `\n @fluentui/react-tree [${useTreeItem_unstable.name}]:\n A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n - \"aria-setsize\": the number of siblings in this level of the tree.\n - \"aria-level\": the current level of the treeitem.\n - \"parentValue\": the \"value\" property of the parent item of this item.\n `);\n }\n }\n}\n"],"names":["React","ReactDOM","getIntrinsicElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","components","root","always","tabIndex","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
package/lib/hooks/useSubtree.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
|
|
3
3
|
import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render a sub-level tree.
|
|
@@ -8,7 +8,7 @@ import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-u
|
|
|
8
8
|
* @param ref - reference to root HTMLElement of tree
|
|
9
9
|
*/ export function useSubtree(props, ref) {
|
|
10
10
|
const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);
|
|
11
|
-
const parentLevel =
|
|
11
|
+
const { level: parentLevel } = useSubtreeContext_unstable();
|
|
12
12
|
const open = useTreeItemContext_unstable((ctx)=>ctx.open);
|
|
13
13
|
return {
|
|
14
14
|
contextType: 'subtree',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue,
|
|
1
|
+
{"version":3,"sources":["useSubtree.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeProps, TreeState } from '../Tree';\nimport { SubtreeContextValue, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */\nexport function useSubtree(\n props: TreeProps,\n ref: React.Ref<HTMLElement>,\n): Omit<TreeState & SubtreeContextValue, 'treeType'> {\n const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);\n\n const { level: parentLevel } = useSubtreeContext_unstable();\n\n const open = useTreeItemContext_unstable(ctx => ctx.open);\n\n return {\n contextType: 'subtree',\n open,\n components: {\n root: 'div',\n },\n level: parentLevel + 1,\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n };\n}\n"],"names":["React","useSubtreeContext_unstable","useTreeItemContext_unstable","getIntrinsicElementProps","useMergedRefs","slot","useSubtree","props","ref","subtreeRef","ctx","level","parentLevel","open","contextType","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAA8BC,0BAA0B,EAAEC,2BAA2B,QAAQ,oBAAoB;AACjH,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F;;;;;CAKC,GACD,OAAO,SAASC,WACdC,KAAgB,EAChBC,GAA2B;IAE3B,MAAMC,aAAaP,4BAA4BQ,CAAAA,MAAOA,IAAID,UAAU;IAEpE,MAAM,EAAEE,OAAOC,WAAW,EAAE,GAAGX;IAE/B,MAAMY,OAAOX,4BAA4BQ,CAAAA,MAAOA,IAAIG,IAAI;IAExD,OAAO;QACLC,aAAa;QACbD;QACAE,YAAY;YACVC,MAAM;QACR;QACAL,OAAOC,cAAc;QACrBI,MAAMX,KAAKY,MAAM,CACfd,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKJ,cAAcI,KAAKC;YACxBS,MAAM;YACN,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF"}
|
|
@@ -20,12 +20,13 @@ const _treeContext = require("../../contexts/treeContext");
|
|
|
20
20
|
const _useSubtree = require("../../hooks/useSubtree");
|
|
21
21
|
const _ImmutableSet = require("../../utils/ImmutableSet");
|
|
22
22
|
const _ImmutableMap = require("../../utils/ImmutableMap");
|
|
23
|
+
const _subtreeContext = require("../../contexts/subtreeContext");
|
|
23
24
|
const useFlatTree_unstable = (props, ref)=>{
|
|
24
|
-
const
|
|
25
|
+
const isRoot = _react.useContext(_subtreeContext.SubtreeContext) === undefined;
|
|
25
26
|
// as level is static, this doesn't break rule of hooks
|
|
26
27
|
// and if this becomes an issue later on, this can be easily converted
|
|
27
28
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
28
|
-
return
|
|
29
|
+
return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);
|
|
29
30
|
};
|
|
30
31
|
function useRootFlatTree(props, ref) {
|
|
31
32
|
const { navigate, initialize } = (0, _useFlatTreeNavigation.useFlatTreeNavigation)();
|
|
@@ -61,6 +62,11 @@ function useSubFlatTree(props, ref) {
|
|
|
61
62
|
console.error(`@fluentui/react-tree [useFlatTree]:
|
|
62
63
|
Subtrees are not allowed in a FlatTree!
|
|
63
64
|
You cannot use a <FlatTree> component inside of another <FlatTree> component.`);
|
|
65
|
+
}
|
|
66
|
+
if ((0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {
|
|
67
|
+
// eslint-disable-next-line no-console
|
|
68
|
+
console.error(`@fluentui/react-tree [useFlatTree]:
|
|
69
|
+
Error: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.`);
|
|
64
70
|
}
|
|
65
71
|
return {
|
|
66
72
|
...(0, _useSubtree.useSubtree)(props, ref),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nexport const useFlatTree_unstable = (props, ref)=>{\n const
|
|
1
|
+
{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { ImmutableSet } from '../../utils/ImmutableSet';\nimport { ImmutableMap } from '../../utils/ImmutableMap';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nexport const useFlatTree_unstable = (props, ref)=>{\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useRootFlatTree(props, ref) : useSubFlatTree(props, ref);\n};\nfunction useRootFlatTree(props, ref) {\n const { navigate, initialize } = useFlatTreeNavigation();\n const walkerRef = React.useRef();\n const { targetDocument } = useFluent_unstable();\n const initializeWalker = React.useCallback((root)=>{\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n }, [\n initialize,\n targetDocument\n ]);\n const handleNavigation = useEventCallback((event, data)=>{\n var _props_onNavigation;\n (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n });\n return {\n treeType: 'flat',\n ...useRootTree({\n ...props,\n onNavigation: handleNavigation\n }, useMergedRefs(ref, initializeWalker))\n };\n}\nfunction useSubFlatTree(props, ref) {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [useFlatTree]:\nSubtrees are not allowed in a FlatTree!\nYou cannot use a <FlatTree> component inside of another <FlatTree> component.`);\n }\n if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'nested' && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [useFlatTree]:\nError: <FlatTree> component cannot be used inside of a nested <Tree> component and vice versa.`);\n }\n return {\n ...useSubtree(props, ref),\n // ------ defaultTreeContextValue\n level: 0,\n contextType: 'root',\n treeType: 'nested',\n selectionMode: 'none',\n openItems: ImmutableSet.empty,\n checkedItems: ImmutableMap.empty,\n requestTreeResponse: noop,\n appearance: 'subtle',\n size: 'medium',\n // ------ defaultTreeContextValue\n open: false,\n components: {\n root: React.Fragment\n },\n root: slot.always(props, {\n elementType: React.Fragment\n })\n };\n}\nfunction noop() {\n/* do nothing */ }\n"],"names":["useFlatTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useRootFlatTree","useSubFlatTree","navigate","initialize","useFlatTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleNavigation","useEventCallback","event","data","_props_onNavigation","onNavigation","call","isDefaultPrevented","treeType","useRootTree","useMergedRefs","process","env","NODE_ENV","console","error","useTreeContext_unstable","ctx","useSubtree","level","contextType","selectionMode","openItems","ImmutableSet","empty","checkedItems","ImmutableMap","requestTreeResponse","noop","appearance","size","open","components","Fragment","slot","always","elementType"],"mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACK;uCACU;yCACE;qCACL;gCACJ;gCACuB;6BACd;4BACb;8BACE;8BACA;gCACE;AACxB,MAAMA,uBAAuB,CAACC,OAAOC;IACxC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,gBAAgBP,OAAOC,OAAOO,eAAeR,OAAOC;AACxE;AACA,SAASM,gBAAgBP,KAAK,EAAEC,GAAG;IAC/B,MAAM,EAAEQ,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,4CAAqB;IACtD,MAAMC,YAAYT,OAAMU,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBb,OAAMc,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBF,UAAUO,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFX,WAAWE,UAAUO,OAAO;QAChC;IACJ,GAAG;QACCT;QACAI;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACHA,CAAAA,sBAAsB1B,MAAM2B,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBE,IAAI,CAAC5B,OAAOwB,OAAOC;QACxI,IAAIb,UAAUO,OAAO,IAAI,CAACK,MAAMK,kBAAkB,IAAI;YAClDpB,SAASgB,MAAMb,UAAUO,OAAO;QACpC;IACJ;IACA,OAAO;QACHW,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAG/B,KAAK;YACR2B,cAAcL;QAClB,GAAGU,IAAAA,6BAAa,EAAC/B,KAAKe,kBAAkB;IAC5C;AACJ;AACA,SAASR,eAAeR,KAAK,EAAEC,GAAG;IAC9B,IAAIgC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACxC,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;;6EAEsD,CAAC;IAC1E;IACA,IAAIC,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIT,QAAQ,MAAM,YAAYG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACrG,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;8FACuE,CAAC;IAC3F;IACA,OAAO;QACH,GAAGG,IAAAA,sBAAU,EAACxC,OAAOC,IAAI;QACzB,iCAAiC;QACjCwC,OAAO;QACPC,aAAa;QACbZ,UAAU;QACVa,eAAe;QACfC,WAAWC,0BAAY,CAACC,KAAK;QAC7BC,cAAcC,0BAAY,CAACF,KAAK;QAChCG,qBAAqBC;QACrBC,YAAY;QACZC,MAAM;QACN,iCAAiC;QACjCC,MAAM;QACNC,YAAY;YACRpC,MAAMf,OAAMoD,QAAQ;QACxB;QACArC,MAAMsC,oBAAI,CAACC,MAAM,CAACzD,OAAO;YACrB0D,aAAavD,OAAMoD,QAAQ;QAC/B;IACJ;AACJ;AACA,SAASL;AACT,cAAc,GAAG"}
|
|
@@ -20,12 +20,13 @@ const _createHTMLElementWalker = require("../../utils/createHTMLElementWalker");
|
|
|
20
20
|
const _treeItemFilter = require("../../utils/treeItemFilter");
|
|
21
21
|
const _useTreeNavigation = require("./useTreeNavigation");
|
|
22
22
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
23
|
+
const _treeContext = require("../../contexts/treeContext");
|
|
23
24
|
const useTree_unstable = (props, ref)=>{
|
|
24
|
-
const
|
|
25
|
+
const isRoot = _react.useContext(_subtreeContext.SubtreeContext) === undefined;
|
|
25
26
|
// as level is static, this doesn't break rule of hooks
|
|
26
27
|
// and if this becomes an issue later on, this can be easily converted
|
|
27
28
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
28
|
-
return
|
|
29
|
+
return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);
|
|
29
30
|
};
|
|
30
31
|
function useNestedRootTree(props, ref) {
|
|
31
32
|
const [openItems, setOpenItems] = (0, _useControllableOpenItems.useControllableOpenItems)(props);
|
|
@@ -80,3 +81,11 @@ function useNestedRootTree(props, ref) {
|
|
|
80
81
|
}, (0, _reactutilities.useMergedRefs)(ref, initializeWalker))
|
|
81
82
|
};
|
|
82
83
|
}
|
|
84
|
+
function useNestedSubtree(props, ref) {
|
|
85
|
+
if ((0, _treeContext.useTreeContext_unstable)((ctx)=>ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {
|
|
86
|
+
// eslint-disable-next-line no-console
|
|
87
|
+
console.error(`@fluentui/react-tree [useTree]:
|
|
88
|
+
Error: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.`);
|
|
89
|
+
}
|
|
90
|
+
return (0, _useSubtree.useSubtree)(props, ref);
|
|
91
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport {
|
|
1
|
+
{"version":3,"sources":["useTree.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { createNextOpenItems, useControllableOpenItems } from '../../hooks/useControllableOpenItems';\nimport { createNextNestedCheckedItems, useNestedCheckedItems } from './useNestedControllableCheckedItems';\nimport { SubtreeContext } from '../../contexts/subtreeContext';\nimport { useRootTree } from '../../hooks/useRootTree';\nimport { useSubtree } from '../../hooks/useSubtree';\nimport { createHTMLElementWalker } from '../../utils/createHTMLElementWalker';\nimport { treeItemFilter } from '../../utils/treeItemFilter';\nimport { useTreeNavigation } from './useTreeNavigation';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nexport const useTree_unstable = (props, ref)=>{\n const isRoot = React.useContext(SubtreeContext) === undefined;\n // as level is static, this doesn't break rule of hooks\n // and if this becomes an issue later on, this can be easily converted\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return isRoot ? useNestedRootTree(props, ref) : useNestedSubtree(props, ref);\n};\nfunction useNestedRootTree(props, ref) {\n const [openItems, setOpenItems] = useControllableOpenItems(props);\n const checkedItems = useNestedCheckedItems(props);\n const { navigate, initialize } = useTreeNavigation();\n const walkerRef = React.useRef();\n const { targetDocument } = useFluent_unstable();\n const initializeWalker = React.useCallback((root)=>{\n if (root && targetDocument) {\n walkerRef.current = createHTMLElementWalker(root, targetDocument, treeItemFilter);\n initialize(walkerRef.current);\n }\n }, [\n initialize,\n targetDocument\n ]);\n const handleOpenChange = useEventCallback((event, data)=>{\n var _props_onOpenChange;\n const nextOpenItems = createNextOpenItems(data, openItems);\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, {\n ...data,\n openItems: nextOpenItems.dangerouslyGetInternalSet_unstable()\n });\n setOpenItems(nextOpenItems);\n });\n const handleCheckedChange = useEventCallback((event, data)=>{\n if (walkerRef.current) {\n var _props_onCheckedChange;\n const nextCheckedItems = createNextNestedCheckedItems(data, checkedItems);\n (_props_onCheckedChange = props.onCheckedChange) === null || _props_onCheckedChange === void 0 ? void 0 : _props_onCheckedChange.call(props, event, {\n ...data,\n checkedItems: nextCheckedItems.dangerouslyGetInternalMap_unstable()\n });\n }\n });\n const handleNavigation = useEventCallback((event, data)=>{\n var _props_onNavigation;\n (_props_onNavigation = props.onNavigation) === null || _props_onNavigation === void 0 ? void 0 : _props_onNavigation.call(props, event, data);\n if (walkerRef.current && !event.isDefaultPrevented()) {\n navigate(data, walkerRef.current);\n }\n });\n return {\n treeType: 'nested',\n ...useRootTree({\n ...props,\n openItems,\n checkedItems,\n onOpenChange: handleOpenChange,\n onNavigation: handleNavigation,\n onCheckedChange: handleCheckedChange\n }, useMergedRefs(ref, initializeWalker))\n };\n}\nfunction useNestedSubtree(props, ref) {\n if (useTreeContext_unstable((ctx)=>ctx.treeType) === 'flat' && process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [useTree]:\nError: <Tree> component cannot be used inside of a nested <FlatTree> component and vice versa.`);\n }\n return useSubtree(props, ref);\n}\n"],"names":["useTree_unstable","props","ref","isRoot","React","useContext","SubtreeContext","undefined","useNestedRootTree","useNestedSubtree","openItems","setOpenItems","useControllableOpenItems","checkedItems","useNestedCheckedItems","navigate","initialize","useTreeNavigation","walkerRef","useRef","targetDocument","useFluent_unstable","initializeWalker","useCallback","root","current","createHTMLElementWalker","treeItemFilter","handleOpenChange","useEventCallback","event","data","_props_onOpenChange","nextOpenItems","createNextOpenItems","onOpenChange","call","dangerouslyGetInternalSet_unstable","handleCheckedChange","_props_onCheckedChange","nextCheckedItems","createNextNestedCheckedItems","onCheckedChange","dangerouslyGetInternalMap_unstable","handleNavigation","_props_onNavigation","onNavigation","isDefaultPrevented","treeType","useRootTree","useMergedRefs","useTreeContext_unstable","ctx","process","env","NODE_ENV","console","error","useSubtree"],"mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;gCACyB;0CACc;mDACM;gCACrC;6BACH;4BACD;yCACa;gCACT;mCACG;qCACC;6BACK;AACjC,MAAMA,mBAAmB,CAACC,OAAOC;IACpC,MAAMC,SAASC,OAAMC,UAAU,CAACC,8BAAc,MAAMC;IACpD,uDAAuD;IACvD,sEAAsE;IACtE,sDAAsD;IACtD,OAAOJ,SAASK,kBAAkBP,OAAOC,OAAOO,iBAAiBR,OAAOC;AAC5E;AACA,SAASM,kBAAkBP,KAAK,EAAEC,GAAG;IACjC,MAAM,CAACQ,WAAWC,aAAa,GAAGC,IAAAA,kDAAwB,EAACX;IAC3D,MAAMY,eAAeC,IAAAA,wDAAqB,EAACb;IAC3C,MAAM,EAAEc,QAAQ,EAAEC,UAAU,EAAE,GAAGC,IAAAA,oCAAiB;IAClD,MAAMC,YAAYd,OAAMe,MAAM;IAC9B,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAkB;IAC7C,MAAMC,mBAAmBlB,OAAMmB,WAAW,CAAC,CAACC;QACxC,IAAIA,QAAQJ,gBAAgB;YACxBF,UAAUO,OAAO,GAAGC,IAAAA,gDAAuB,EAACF,MAAMJ,gBAAgBO,8BAAc;YAChFX,WAAWE,UAAUO,OAAO;QAChC;IACJ,GAAG;QACCT;QACAI;KACH;IACD,MAAMQ,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIC;QACJ,MAAMC,gBAAgBC,IAAAA,6CAAmB,EAACH,MAAMrB;QAC/CsB,CAAAA,sBAAsB/B,MAAMkC,YAAY,AAAD,MAAO,QAAQH,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBI,IAAI,CAACnC,OAAO6B,OAAO;YACpI,GAAGC,IAAI;YACPrB,WAAWuB,cAAcI,kCAAkC;QAC/D;QACA1B,aAAasB;IACjB;IACA,MAAMK,sBAAsBT,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QACjD,IAAIb,UAAUO,OAAO,EAAE;YACnB,IAAIc;YACJ,MAAMC,mBAAmBC,IAAAA,+DAA4B,EAACV,MAAMlB;YAC3D0B,CAAAA,yBAAyBtC,MAAMyC,eAAe,AAAD,MAAO,QAAQH,2BAA2B,KAAK,IAAI,KAAK,IAAIA,uBAAuBH,IAAI,CAACnC,OAAO6B,OAAO;gBAChJ,GAAGC,IAAI;gBACPlB,cAAc2B,iBAAiBG,kCAAkC;YACrE;QACJ;IACJ;IACA,MAAMC,mBAAmBf,IAAAA,gCAAgB,EAAC,CAACC,OAAOC;QAC9C,IAAIc;QACHA,CAAAA,sBAAsB5C,MAAM6C,YAAY,AAAD,MAAO,QAAQD,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBT,IAAI,CAACnC,OAAO6B,OAAOC;QACxI,IAAIb,UAAUO,OAAO,IAAI,CAACK,MAAMiB,kBAAkB,IAAI;YAClDhC,SAASgB,MAAMb,UAAUO,OAAO;QACpC;IACJ;IACA,OAAO;QACHuB,UAAU;QACV,GAAGC,IAAAA,wBAAW,EAAC;YACX,GAAGhD,KAAK;YACRS;YACAG;YACAsB,cAAcP;YACdkB,cAAcF;YACdF,iBAAiBJ;QACrB,GAAGY,IAAAA,6BAAa,EAAChD,KAAKoB,kBAAkB;IAC5C;AACJ;AACA,SAASb,iBAAiBR,KAAK,EAAEC,GAAG;IAChC,IAAIiD,IAAAA,oCAAuB,EAAC,CAACC,MAAMA,IAAIJ,QAAQ,MAAM,UAAUK,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACnG,sCAAsC;QACtCC,QAAQC,KAAK,CAAC,CAAC;8FACuE,CAAC;IAC3F;IACA,OAAOC,IAAAA,sBAAU,EAACzD,OAAOC;AAC7B"}
|
|
@@ -12,7 +12,6 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _reactportal = require("@fluentui/react-portal");
|
|
16
15
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
17
16
|
const _tokens = require("../../utils/tokens");
|
|
18
17
|
const _contexts = require("../../contexts");
|
|
@@ -57,19 +56,19 @@ function useTreeItem_unstable(props, ref) {
|
|
|
57
56
|
if (event.isDefaultPrevented()) {
|
|
58
57
|
return;
|
|
59
58
|
}
|
|
60
|
-
const isEventFromActions = actionsRef.current && (0,
|
|
59
|
+
const isEventFromActions = actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.target);
|
|
61
60
|
if (isEventFromActions) {
|
|
62
61
|
return;
|
|
63
62
|
}
|
|
64
|
-
const isEventFromSubtree = subtreeRef.current && (0,
|
|
63
|
+
const isEventFromSubtree = subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target);
|
|
65
64
|
if (isEventFromSubtree) {
|
|
66
65
|
return;
|
|
67
66
|
}
|
|
68
|
-
const isEventFromSelection = selectionRef.current && (0,
|
|
67
|
+
const isEventFromSelection = selectionRef.current && (0, _reactutilities.elementContains)(selectionRef.current, event.target);
|
|
69
68
|
if (isEventFromSelection) {
|
|
70
69
|
return;
|
|
71
70
|
}
|
|
72
|
-
const isEventFromExpandIcon = expandIconRef.current && (0,
|
|
71
|
+
const isEventFromExpandIcon = expandIconRef.current && (0, _reactutilities.elementContains)(expandIconRef.current, event.target);
|
|
73
72
|
_reactdom.unstable_batchedUpdates(()=>{
|
|
74
73
|
var _props_onOpenChange;
|
|
75
74
|
const data = {
|
|
@@ -187,14 +186,14 @@ function useTreeItem_unstable(props, ref) {
|
|
|
187
186
|
}
|
|
188
187
|
});
|
|
189
188
|
const setActionsVisibleIfNotFromSubtree = _react.useCallback((event)=>{
|
|
190
|
-
const isTargetFromSubtree = Boolean(subtreeRef.current && (0,
|
|
189
|
+
const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
|
|
191
190
|
if (!isTargetFromSubtree) {
|
|
192
191
|
setActionsVisible(true);
|
|
193
192
|
}
|
|
194
193
|
}, []);
|
|
195
194
|
const setActionsInvisibleIfNotFromSubtree = _react.useCallback((event)=>{
|
|
196
|
-
const isTargetFromSubtree = Boolean(subtreeRef.current && (0,
|
|
197
|
-
const isRelatedTargetFromActions = Boolean(actionsRef.current && (0,
|
|
195
|
+
const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target));
|
|
196
|
+
const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactutilities.elementContains)(actionsRef.current, event.relatedTarget));
|
|
198
197
|
if (isRelatedTargetFromActions) {
|
|
199
198
|
return setActionsVisible(true);
|
|
200
199
|
}
|
|
@@ -223,7 +222,7 @@ function useTreeItem_unstable(props, ref) {
|
|
|
223
222
|
if (event.isDefaultPrevented()) {
|
|
224
223
|
return;
|
|
225
224
|
}
|
|
226
|
-
const isEventFromSubtree = subtreeRef.current && (0,
|
|
225
|
+
const isEventFromSubtree = subtreeRef.current && (0, _reactutilities.elementContains)(subtreeRef.current, event.target);
|
|
227
226
|
if (isEventFromSubtree) {
|
|
228
227
|
return;
|
|
229
228
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n var _props_value;\n const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable((ctx)=>{\n var _props_parentValue;\n return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n });\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n const handleActionsRef = React.useCallback((actionsElement)=>{\n setAsideVisible(actionsElement === null);\n }, []);\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const selectionRef = React.useRef(null);\n const open = useTreeContext_unstable((ctx)=>{\n var _props_open;\n return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n });\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const checked = useTreeContext_unstable((ctx)=>{\n var _ctx_checkedItems_get;\n return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n });\n const handleClick = useEventCallback((event)=>{\n onClick === null || onClick === void 0 ? void 0 : onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n ReactDOM.unstable_batchedUpdates(()=>{\n var _props_onOpenChange;\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n };\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open'\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click\n });\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch(event.key){\n case Space:\n if (selectionMode !== 'none') {\n var _selectionRef_current;\n (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter:\n {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget\n });\n case treeDataTypes.ArrowLeft:\n {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n if (open) {\n var _props_onOpenChange;\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate'\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n if (!open) {\n var _props_onOpenChange1;\n (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open'\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue\n });\n }\n });\n const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n }, []);\n const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n }, []);\n const handleMouseOver = useEventCallback((event)=>{\n onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n const handleFocus = useEventCallback((event)=>{\n onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n const handleMouseOut = useEventCallback((event)=>{\n onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n const handleBlur = useEventCallback((event)=>{\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n const handleChange = useEventCallback((event)=>{\n onChange === null || onChange === void 0 ? void 0 : onChange(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked\n });\n });\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div'\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? checked : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleMouseOver,\n onFocus: handleFocus,\n onMouseOut: handleMouseOut,\n onBlur: handleBlur,\n onChange: handleChange\n }), {\n elementType: 'div'\n })\n };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n if (process.env.NODE_ENV !== 'production') {\n if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n }\n }\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","useId","toString","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","useMergedRefs","components","root","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot, elementContains } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */ export function useTreeItem_unstable(props, ref) {\n var _props_value;\n const treeType = useTreeContext_unstable((ctx)=>ctx.treeType);\n if (treeType === 'flat') {\n warnIfNoProperPropsFlatTreeItem(props);\n }\n const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n const { level: contextLevel } = useSubtreeContext_unstable();\n const parentValue = useTreeItemContext_unstable((ctx)=>{\n var _props_parentValue;\n return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;\n });\n // note, if the value is not externally provided,\n // then selection and expansion will not work properly\n const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n const [isActionsVisible, setActionsVisible] = React.useState(false);\n const [isAsideVisible, setAsideVisible] = React.useState(true);\n const handleActionsRef = React.useCallback((actionsElement)=>{\n setAsideVisible(actionsElement === null);\n }, []);\n const actionsRef = React.useRef(null);\n const expandIconRef = React.useRef(null);\n const layoutRef = React.useRef(null);\n const subtreeRef = React.useRef(null);\n const selectionRef = React.useRef(null);\n const open = useTreeContext_unstable((ctx)=>{\n var _props_open;\n return (_props_open = props.open) !== null && _props_open !== void 0 ? _props_open : ctx.openItems.has(value);\n });\n const selectionMode = useTreeContext_unstable((ctx)=>ctx.selectionMode);\n const checked = useTreeContext_unstable((ctx)=>{\n var _ctx_checkedItems_get;\n return (_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false;\n });\n const handleClick = useEventCallback((event)=>{\n onClick === null || onClick === void 0 ? void 0 : onClick(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n if (isEventFromActions) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n const isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target);\n if (isEventFromSelection) {\n return;\n }\n const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n ReactDOM.unstable_batchedUpdates(()=>{\n var _props_onOpenChange;\n const data = {\n event,\n value,\n open: !open,\n target: event.currentTarget,\n type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n };\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n requestTreeResponse({\n ...data,\n itemType,\n requestType: 'open'\n });\n requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: 'navigate',\n type: treeDataTypes.Click\n });\n });\n });\n const handleKeyDown = useEventCallback((event)=>{\n onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n // Ignore keyboard events that do not originate from the current tree item.\n if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n return;\n }\n switch(event.key){\n case Space:\n if (selectionMode !== 'none') {\n var _selectionRef_current;\n (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();\n // Prevents the page from scrolling down when the spacebar is pressed\n event.preventDefault();\n }\n return;\n case treeDataTypes.Enter:\n {\n return event.currentTarget.click();\n }\n case treeDataTypes.End:\n case treeDataTypes.Home:\n case treeDataTypes.ArrowUp:\n case treeDataTypes.ArrowDown:\n return requestTreeResponse({\n requestType: 'navigate',\n event,\n value,\n itemType,\n parentValue,\n type: event.key,\n target: event.currentTarget\n });\n case treeDataTypes.ArrowLeft:\n {\n // do not navigate to parent if the item is on the top level\n if (level === 1 && !open) {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n if (open) {\n var _props_onOpenChange;\n (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'open' : 'navigate'\n });\n }\n case treeDataTypes.ArrowRight:\n // do not navigate or open if the item is a leaf\n if (itemType === 'leaf') {\n return;\n }\n const data = {\n value,\n event,\n open: !open,\n type: event.key,\n target: event.currentTarget\n };\n if (!open) {\n var _props_onOpenChange1;\n (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);\n }\n return requestTreeResponse({\n ...data,\n itemType,\n parentValue,\n requestType: open ? 'navigate' : 'open'\n });\n }\n const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n if (isTypeAheadCharacter) {\n requestTreeResponse({\n requestType: 'navigate',\n event,\n target: event.currentTarget,\n value,\n itemType,\n type: treeDataTypes.TypeAhead,\n parentValue\n });\n }\n });\n const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n if (!isTargetFromSubtree) {\n setActionsVisible(true);\n }\n }, []);\n const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{\n const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n if (isRelatedTargetFromActions) {\n return setActionsVisible(true);\n }\n if (!isTargetFromSubtree) {\n return setActionsVisible(false);\n }\n }, []);\n const handleMouseOver = useEventCallback((event)=>{\n onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n const handleFocus = useEventCallback((event)=>{\n onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);\n setActionsVisibleIfNotFromSubtree(event);\n });\n const handleMouseOut = useEventCallback((event)=>{\n onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n const handleBlur = useEventCallback((event)=>{\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n setActionsInvisibleIfNotFromSubtree(event);\n });\n const handleChange = useEventCallback((event)=>{\n onChange === null || onChange === void 0 ? void 0 : onChange(event);\n if (event.isDefaultPrevented()) {\n return;\n }\n const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n if (isEventFromSubtree) {\n return;\n }\n requestTreeResponse({\n requestType: 'selection',\n event,\n value,\n itemType,\n type: 'Change',\n target: event.currentTarget,\n checked: checked === 'mixed' ? true : !checked\n });\n });\n return {\n value,\n open,\n checked,\n subtreeRef,\n layoutRef,\n selectionRef,\n expandIconRef,\n actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n itemType,\n level,\n components: {\n root: 'div'\n },\n isAsideVisible,\n isActionsVisible,\n root: slot.always(getIntrinsicElementProps(as, {\n tabIndex: -1,\n [dataTreeItemValueAttrName]: value,\n ...rest,\n ref,\n role: 'treeitem',\n 'aria-level': level,\n 'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n // aria-selected is required according to WAI-ARIA spec\n // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n // Casting: when selectionMode is 'single', checked is a boolean\n 'aria-selected': selectionMode === 'single' ? checked : 'false',\n 'aria-expanded': itemType === 'branch' ? open : undefined,\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onMouseOver: handleMouseOver,\n onFocus: handleFocus,\n onMouseOut: handleMouseOut,\n onBlur: handleBlur,\n onChange: handleChange\n }), {\n elementType: 'div'\n })\n };\n}\nfunction warnIfNoProperPropsFlatTreeItem(props) {\n if (process.env.NODE_ENV !== 'production') {\n if (props['aria-posinset'] === undefined || props['aria-setsize'] === undefined || props['aria-level'] === undefined || props.parentValue === undefined && props['aria-level'] !== 1) {\n // eslint-disable-next-line no-console\n console.error(`@fluentui/react-tree [${useTreeItem_unstable.name}]:\nA flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\nand \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n- \"aria-posinset\": the position of this treeitem in the current level of the tree.\n- \"aria-setsize\": the number of siblings in this level of the tree.\n- \"aria-level\": the current level of the treeitem.\n- \"parentValue\": the \"value\" property of the parent item of this item.`);\n }\n }\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","treeType","useTreeContext_unstable","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","useSubtreeContext_unstable","parentValue","useTreeItemContext_unstable","_props_parentValue","value","useId","toString","onClick","onKeyDown","onMouseOver","onFocus","onMouseOut","onBlur","onChange","as","itemType","rest","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","_props_open","openItems","has","selectionMode","checked","_ctx_checkedItems_get","checkedItems","get","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","ReactDOM","unstable_batchedUpdates","_props_onOpenChange","data","currentTarget","type","treeDataTypes","ExpandIconClick","Click","onOpenChange","call","requestType","handleKeyDown","key","Space","_selectionRef_current","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","_props_onOpenChange1","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","setActionsVisibleIfNotFromSubtree","isTargetFromSubtree","Boolean","setActionsInvisibleIfNotFromSubtree","isRelatedTargetFromActions","relatedTarget","handleMouseOver","handleFocus","handleMouseOut","handleBlur","handleChange","useMergedRefs","components","root","slot","always","getIntrinsicElementProps","tabIndex","dataTreeItemValueAttrName","role","undefined","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ const _index = require("../contexts/index");
|
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
function useSubtree(props, ref) {
|
|
16
16
|
const subtreeRef = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.subtreeRef);
|
|
17
|
-
const parentLevel = (0, _index.
|
|
17
|
+
const { level: parentLevel } = (0, _index.useSubtreeContext_unstable)();
|
|
18
18
|
const open = (0, _index.useTreeItemContext_unstable)((ctx)=>ctx.open);
|
|
19
19
|
return {
|
|
20
20
|
contextType: 'subtree',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["useSubtree.js"],"sourcesContent":["import * as React from 'react';\nimport { useSubtreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render a sub-level tree.\n *\n * @param props - props from this instance of tree\n * @param ref - reference to root HTMLElement of tree\n */ export function useSubtree(props, ref) {\n const subtreeRef = useTreeItemContext_unstable((ctx)=>ctx.subtreeRef);\n const { level: parentLevel } = useSubtreeContext_unstable();\n const open = useTreeItemContext_unstable((ctx)=>ctx.open);\n return {\n contextType: 'subtree',\n open,\n components: {\n root: 'div'\n },\n level: parentLevel + 1,\n root: slot.always(getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, subtreeRef),\n role: 'group',\n ...props\n }), {\n elementType: 'div'\n })\n };\n}\n"],"names":["useSubtree","props","ref","subtreeRef","useTreeItemContext_unstable","ctx","level","parentLevel","useSubtreeContext_unstable","open","contextType","components","root","slot","always","getIntrinsicElementProps","useMergedRefs","role","elementType"],"mappings":";;;;+BAQoBA;;;eAAAA;;;;iEARG;uBACiD;gCACV;AAMnD,SAASA,WAAWC,KAAK,EAAEC,GAAG;IACrC,MAAMC,aAAaC,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAIF,UAAU;IACpE,MAAM,EAAEG,OAAOC,WAAW,EAAE,GAAGC,IAAAA,iCAA0B;IACzD,MAAMC,OAAOL,IAAAA,kCAA2B,EAAC,CAACC,MAAMA,IAAII,IAAI;IACxD,OAAO;QACHC,aAAa;QACbD;QACAE,YAAY;YACRC,MAAM;QACV;QACAN,OAAOC,cAAc;QACrBK,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5Fb,KAAKc,IAAAA,6BAAa,EAACd,KAAKC;YACxBc,MAAM;YACN,GAAGhB,KAAK;QACZ,IAAI;YACAiB,aAAa;QACjB;IACJ;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tree",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.4",
|
|
4
4
|
"description": "Tree component for Fluent UI React",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -37,19 +37,18 @@
|
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@fluentui/keyboard-keys": "^9.0.6",
|
|
40
|
-
"@fluentui/react-aria": "^9.3.
|
|
41
|
-
"@fluentui/react-avatar": "^9.5.
|
|
42
|
-
"@fluentui/react-button": "^9.3.
|
|
43
|
-
"@fluentui/react-checkbox": "^9.1.
|
|
44
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
40
|
+
"@fluentui/react-aria": "^9.3.42",
|
|
41
|
+
"@fluentui/react-avatar": "^9.5.39",
|
|
42
|
+
"@fluentui/react-button": "^9.3.48",
|
|
43
|
+
"@fluentui/react-checkbox": "^9.1.49",
|
|
44
|
+
"@fluentui/react-context-selector": "^9.1.40",
|
|
45
45
|
"@fluentui/react-icons": "^2.0.217",
|
|
46
|
-
"@fluentui/react-
|
|
47
|
-
"@fluentui/react-
|
|
48
|
-
"@fluentui/react-
|
|
49
|
-
"@fluentui/react-tabster": "^9.13.4",
|
|
46
|
+
"@fluentui/react-radio": "^9.1.49",
|
|
47
|
+
"@fluentui/react-shared-contexts": "^9.10.0",
|
|
48
|
+
"@fluentui/react-tabster": "^9.13.6",
|
|
50
49
|
"@fluentui/react-theme": "^9.1.14",
|
|
51
|
-
"@fluentui/react-utilities": "^9.
|
|
52
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
50
|
+
"@fluentui/react-utilities": "^9.15.0",
|
|
51
|
+
"@fluentui/react-jsx-runtime": "^9.0.16",
|
|
53
52
|
"@griffel/react": "^1.5.14",
|
|
54
53
|
"@swc/helpers": "^0.5.1"
|
|
55
54
|
},
|