@fluentui/react-tree 9.4.0 → 9.4.2

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.
Files changed (41) hide show
  1. package/CHANGELOG.json +170 -8
  2. package/CHANGELOG.md +49 -9
  3. package/dist/index.d.ts +8 -1
  4. package/lib/components/FlatTree/useFlatTreeStyles.styles.js +4 -12
  5. package/lib/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
  6. package/lib/components/Tree/Tree.types.js.map +1 -1
  7. package/lib/components/Tree/useTreeStyles.styles.js +5 -8
  8. package/lib/components/Tree/useTreeStyles.styles.js.map +1 -1
  9. package/lib/components/TreeItem/useTreeItem.js +33 -28
  10. package/lib/components/TreeItem/useTreeItem.js.map +1 -1
  11. package/lib/components/TreeItem/useTreeItemStyles.styles.js +10 -50
  12. package/lib/components/TreeItem/useTreeItemStyles.styles.js.map +1 -1
  13. package/lib/components/TreeItemLayout/useTreeItemLayout.js +6 -3
  14. package/lib/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  15. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +23 -117
  16. package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
  17. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +24 -141
  18. package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -1
  19. package/lib/hooks/useRootTree.js +6 -3
  20. package/lib/hooks/useRootTree.js.map +1 -1
  21. package/lib/hooks/useSubtree.js +5 -2
  22. package/lib/hooks/useSubtree.js.map +1 -1
  23. package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js +5 -15
  24. package/lib-commonjs/components/FlatTree/useFlatTreeStyles.styles.js.map +1 -1
  25. package/lib-commonjs/components/Tree/useTreeStyles.styles.js +5 -9
  26. package/lib-commonjs/components/Tree/useTreeStyles.styles.js.map +1 -1
  27. package/lib-commonjs/components/TreeItem/useTreeItem.js +32 -27
  28. package/lib-commonjs/components/TreeItem/useTreeItem.js.map +1 -1
  29. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js +15 -134
  30. package/lib-commonjs/components/TreeItem/useTreeItemStyles.styles.js.map +1 -1
  31. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js +5 -2
  32. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayout.js.map +1 -1
  33. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js +43 -232
  34. package/lib-commonjs/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map +1 -1
  35. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js +46 -281
  36. package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map +1 -1
  37. package/lib-commonjs/hooks/useRootTree.js +5 -2
  38. package/lib-commonjs/hooks/useRootTree.js.map +1 -1
  39. package/lib-commonjs/hooks/useSubtree.js +4 -1
  40. package/lib-commonjs/hooks/useSubtree.js.map +1 -1
  41. package/package.json +11 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,169 @@
2
2
  "name": "@fluentui/react-tree",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 02 Oct 2023 08:53:05 GMT",
5
+ "date": "Thu, 05 Oct 2023 15:18:00 GMT",
6
+ "tag": "@fluentui/react-tree_v9.4.2",
7
+ "version": "9.4.2",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "bernardo.sunderhus@gmail.com",
12
+ "package": "@fluentui/react-tree",
13
+ "commit": "86dd76990e3da5af1f2b6b04a3aec46141d5a653",
14
+ "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps"
15
+ },
16
+ {
17
+ "author": "bernardo.sunderhus@gmail.com",
18
+ "package": "@fluentui/react-tree",
19
+ "commit": "f9ef593dd07abb0341e7be09f60cb841d577135d",
20
+ "comment": "bugfix: ensure TreeItem emits events properly"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-tree",
25
+ "comment": "Bump @fluentui/react-aria to v9.3.40",
26
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-tree",
31
+ "comment": "Bump @fluentui/react-avatar to v9.5.37",
32
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-tree",
37
+ "comment": "Bump @fluentui/react-button to v9.3.46",
38
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-tree",
43
+ "comment": "Bump @fluentui/react-checkbox to v9.1.47",
44
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-tree",
49
+ "comment": "Bump @fluentui/react-context-selector to v9.1.38",
50
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-tree",
55
+ "comment": "Bump @fluentui/react-portal to v9.3.21",
56
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-tree",
61
+ "comment": "Bump @fluentui/react-radio to v9.1.47",
62
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-tree",
67
+ "comment": "Bump @fluentui/react-tabster to v9.13.4",
68
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
69
+ },
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui/react-tree",
73
+ "comment": "Bump @fluentui/react-utilities to v9.14.1",
74
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
75
+ },
76
+ {
77
+ "author": "beachball",
78
+ "package": "@fluentui/react-tree",
79
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.14",
80
+ "commit": "690590449dc3d65cd40b2b06a990fd920180919d"
81
+ }
82
+ ]
83
+ }
84
+ },
85
+ {
86
+ "date": "Wed, 04 Oct 2023 08:45:47 GMT",
87
+ "tag": "@fluentui/react-tree_v9.4.1",
88
+ "version": "9.4.1",
89
+ "comments": {
90
+ "patch": [
91
+ {
92
+ "author": "bernardo.sunderhus@gmail.com",
93
+ "package": "@fluentui/react-tree",
94
+ "commit": "eb4533eee19eba7b7177e9938e5c5fd642f0e691",
95
+ "comment": "chore: replace makeStyles with makeResetStyles"
96
+ },
97
+ {
98
+ "author": "bernardo.sunderhus@gmail.com",
99
+ "package": "@fluentui/react-tree",
100
+ "commit": "3b210c90f667620c54a8b85b99bf33888afa1f57",
101
+ "comment": "chore: delegate focus outline to layout components"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-tree",
106
+ "comment": "Bump @fluentui/react-aria to v9.3.39",
107
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-tree",
112
+ "comment": "Bump @fluentui/react-avatar to v9.5.36",
113
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui/react-tree",
118
+ "comment": "Bump @fluentui/react-button to v9.3.45",
119
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
120
+ },
121
+ {
122
+ "author": "beachball",
123
+ "package": "@fluentui/react-tree",
124
+ "comment": "Bump @fluentui/react-checkbox to v9.1.46",
125
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
126
+ },
127
+ {
128
+ "author": "beachball",
129
+ "package": "@fluentui/react-tree",
130
+ "comment": "Bump @fluentui/react-context-selector to v9.1.37",
131
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
132
+ },
133
+ {
134
+ "author": "beachball",
135
+ "package": "@fluentui/react-tree",
136
+ "comment": "Bump @fluentui/react-portal to v9.3.20",
137
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
138
+ },
139
+ {
140
+ "author": "beachball",
141
+ "package": "@fluentui/react-tree",
142
+ "comment": "Bump @fluentui/react-radio to v9.1.46",
143
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
144
+ },
145
+ {
146
+ "author": "beachball",
147
+ "package": "@fluentui/react-tree",
148
+ "comment": "Bump @fluentui/react-tabster to v9.13.3",
149
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
150
+ },
151
+ {
152
+ "author": "beachball",
153
+ "package": "@fluentui/react-tree",
154
+ "comment": "Bump @fluentui/react-utilities to v9.14.0",
155
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
156
+ },
157
+ {
158
+ "author": "beachball",
159
+ "package": "@fluentui/react-tree",
160
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.13",
161
+ "commit": "67b6cc6534e684ed32704dc6c0faee632bb840dc"
162
+ }
163
+ ]
164
+ }
165
+ },
166
+ {
167
+ "date": "Mon, 02 Oct 2023 08:56:05 GMT",
6
168
  "tag": "@fluentui/react-tree_v9.4.0",
7
169
  "version": "9.4.0",
8
170
  "comments": {
@@ -17,43 +179,43 @@
17
179
  "author": "beachball",
18
180
  "package": "@fluentui/react-tree",
19
181
  "comment": "Bump @fluentui/react-avatar to v9.5.35",
20
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
182
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
21
183
  },
22
184
  {
23
185
  "author": "beachball",
24
186
  "package": "@fluentui/react-tree",
25
187
  "comment": "Bump @fluentui/react-button to v9.3.44",
26
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
188
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
27
189
  },
28
190
  {
29
191
  "author": "beachball",
30
192
  "package": "@fluentui/react-tree",
31
193
  "comment": "Bump @fluentui/react-checkbox to v9.1.45",
32
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
194
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
33
195
  },
34
196
  {
35
197
  "author": "beachball",
36
198
  "package": "@fluentui/react-tree",
37
199
  "comment": "Bump @fluentui/react-portal to v9.3.19",
38
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
200
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
39
201
  },
40
202
  {
41
203
  "author": "beachball",
42
204
  "package": "@fluentui/react-tree",
43
205
  "comment": "Bump @fluentui/react-radio to v9.1.45",
44
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
206
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
45
207
  },
46
208
  {
47
209
  "author": "beachball",
48
210
  "package": "@fluentui/react-tree",
49
211
  "comment": "Bump @fluentui/react-shared-contexts to v9.9.2",
50
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
212
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
51
213
  },
52
214
  {
53
215
  "author": "beachball",
54
216
  "package": "@fluentui/react-tree",
55
217
  "comment": "Bump @fluentui/react-tabster to v9.13.2",
56
- "commit": "18ddec93bdb85a009bc1392058c52b2ea336340e"
218
+ "commit": "da9a08817e5de95639e2dd7aa6d6709d47faa7f4"
57
219
  }
58
220
  ]
59
221
  }
package/CHANGELOG.md CHANGED
@@ -1,24 +1,64 @@
1
1
  # Change Log - @fluentui/react-tree
2
2
 
3
- This log was last generated on Mon, 02 Oct 2023 08:53:05 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 05 Oct 2023 15:18:00 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.2)
8
+
9
+ Thu, 05 Oct 2023 15:18:00 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.1..@fluentui/react-tree_v9.4.2)
11
+
12
+ ### Patches
13
+
14
+ - chore: migrate from getNativeElementProps to getIntrinsicElementProps ([PR #29387](https://github.com/microsoft/fluentui/pull/29387) by bernardo.sunderhus@gmail.com)
15
+ - bugfix: ensure TreeItem emits events properly ([PR #29390](https://github.com/microsoft/fluentui/pull/29390) by bernardo.sunderhus@gmail.com)
16
+ - Bump @fluentui/react-aria to v9.3.40 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
17
+ - Bump @fluentui/react-avatar to v9.5.37 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
18
+ - Bump @fluentui/react-button to v9.3.46 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
19
+ - Bump @fluentui/react-checkbox to v9.1.47 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
20
+ - Bump @fluentui/react-context-selector to v9.1.38 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
21
+ - Bump @fluentui/react-portal to v9.3.21 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
22
+ - Bump @fluentui/react-radio to v9.1.47 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
23
+ - Bump @fluentui/react-tabster to v9.13.4 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
24
+ - Bump @fluentui/react-utilities to v9.14.1 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
25
+ - Bump @fluentui/react-jsx-runtime to v9.0.14 ([PR #29412](https://github.com/microsoft/fluentui/pull/29412) by beachball)
26
+
27
+ ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.1)
28
+
29
+ Wed, 04 Oct 2023 08:45:47 GMT
30
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.4.0..@fluentui/react-tree_v9.4.1)
31
+
32
+ ### Patches
33
+
34
+ - chore: replace makeStyles with makeResetStyles ([PR #29338](https://github.com/microsoft/fluentui/pull/29338) by bernardo.sunderhus@gmail.com)
35
+ - chore: delegate focus outline to layout components ([PR #29293](https://github.com/microsoft/fluentui/pull/29293) by bernardo.sunderhus@gmail.com)
36
+ - Bump @fluentui/react-aria to v9.3.39 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
37
+ - Bump @fluentui/react-avatar to v9.5.36 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
38
+ - Bump @fluentui/react-button to v9.3.45 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
39
+ - Bump @fluentui/react-checkbox to v9.1.46 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
40
+ - Bump @fluentui/react-context-selector to v9.1.37 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
41
+ - Bump @fluentui/react-portal to v9.3.20 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
42
+ - Bump @fluentui/react-radio to v9.1.46 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
43
+ - Bump @fluentui/react-tabster to v9.13.3 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
44
+ - Bump @fluentui/react-utilities to v9.14.0 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
45
+ - Bump @fluentui/react-jsx-runtime to v9.0.13 ([commit](https://github.com/microsoft/fluentui/commit/67b6cc6534e684ed32704dc6c0faee632bb840dc) by beachball)
46
+
7
47
  ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.4.0)
8
48
 
9
- Mon, 02 Oct 2023 08:53:05 GMT
49
+ Mon, 02 Oct 2023 08:56:05 GMT
10
50
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tree_v9.3.1..@fluentui/react-tree_v9.4.0)
11
51
 
12
52
  ### Minor changes
13
53
 
14
54
  - feat: creates SubtreeContext ([PR #29194](https://github.com/microsoft/fluentui/pull/29194) by bernardo.sunderhus@gmail.com)
15
- - Bump @fluentui/react-avatar to v9.5.35 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
16
- - Bump @fluentui/react-button to v9.3.44 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
17
- - Bump @fluentui/react-checkbox to v9.1.45 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
18
- - Bump @fluentui/react-portal to v9.3.19 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
19
- - Bump @fluentui/react-radio to v9.1.45 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
20
- - Bump @fluentui/react-shared-contexts to v9.9.2 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
21
- - Bump @fluentui/react-tabster to v9.13.2 ([PR #29351](https://github.com/microsoft/fluentui/pull/29351) by beachball)
55
+ - Bump @fluentui/react-avatar to v9.5.35 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
56
+ - Bump @fluentui/react-button to v9.3.44 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
57
+ - Bump @fluentui/react-checkbox to v9.1.45 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
58
+ - Bump @fluentui/react-portal to v9.3.19 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
59
+ - Bump @fluentui/react-radio to v9.1.45 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
60
+ - Bump @fluentui/react-shared-contexts to v9.9.2 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
61
+ - Bump @fluentui/react-tabster to v9.13.2 ([PR #29301](https://github.com/microsoft/fluentui/pull/29301) by beachball)
22
62
 
23
63
  ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tree_v9.3.1)
24
64
 
package/dist/index.d.ts CHANGED
@@ -714,7 +714,14 @@ export declare type TreeOpenChangeData = {
714
714
  } | {
715
715
  event: React_2.MouseEvent<HTMLElement>;
716
716
  type: 'Click';
717
- } | {
717
+ }
718
+ /**
719
+ * @deprecated
720
+ * Use `type: 'Click'` instead of Enter,
721
+ * an enter press will trigger a click event, which will trigger an open change,
722
+ * so there is no need to have a separate type for it.
723
+ */
724
+ | {
718
725
  event: React_2.KeyboardEvent<HTMLElement>;
719
726
  type: typeof Enter;
720
727
  } | {
@@ -1,20 +1,12 @@
1
- import { __styles, mergeClasses } from '@griffel/react';
1
+ import { __resetStyles, mergeClasses } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  export const flatTreeClassNames = {
4
4
  root: 'fui-FlatTree'
5
5
  };
6
- const useStyles = /*#__PURE__*/__styles({
7
- root: {
8
- mc9l5x: "f22iagw",
9
- Beiy3e4: "f1vx9l62",
10
- Belr9w4: "f1j0q4x9"
11
- }
12
- }, {
13
- d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
14
- });
6
+ const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
15
7
  export const useFlatTreeStyles_unstable = state => {
16
- const styles = useStyles();
17
- state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);
8
+ const baseStyles = useBaseStyles();
9
+ state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);
18
10
  return state;
19
11
  };
20
12
  //# sourceMappingURL=useFlatTreeStyles.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","tokens","flatTreeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","d","useFlatTreeStyles_unstable","state","styles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n }\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAMjB,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACP,IAAI,CAACS,SAAS,GAAGZ,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEQ,MAAM,CAACR,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACS,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","mergeClasses","tokens","flatTreeClassNames","root","useBaseStyles","useFlatTreeStyles_unstable","state","baseStyles","className"],"sources":["useFlatTreeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const flatTreeClassNames = {\n root: 'fui-FlatTree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nexport const useFlatTreeStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n state.root.className = mergeClasses(flatTreeClassNames.root, baseStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGL,aAAA,qGAIrB,CAAC;AACF,OAAO,MAAMM,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,UAAU,GAAGH,aAAa,CAAC,CAAC;EAClCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n target: HTMLElement;\n value: TreeItemValue;\n parentValue: TreeItemValue | undefined;\n} & (\n | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n open: boolean;\n openItems: Set<TreeItemValue>;\n value: TreeItemValue;\n target: HTMLElement;\n} & (\n | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n value: TreeItemValue;\n checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n target: HTMLElement;\n event: React.ChangeEvent<HTMLElement>;\n type: 'Change';\n} & (\n | {\n selectionMode: 'multiselect';\n checked: MultiSelectValue;\n }\n | {\n selectionMode: 'single';\n checked: SingleSelectValue;\n }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n /**\n * A tree item can have various appearances:\n * - 'subtle' (default): The default tree item styles.\n * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n * - 'transparent': Removes background color.\n * @default 'subtle'\n */\n appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n /**\n * Size of the tree item.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n /**\n * This refers to a list of ids of opened tree items.\n * Controls the state of the open tree items.\n * These property is ignored for subtrees.\n */\n openItems?: Iterable<TreeItemValue>;\n /**\n * This refers to a list of ids of default opened items.\n * This property is ignored for subtrees.\n */\n defaultOpenItems?: Iterable<TreeItemValue>;\n /**\n * Callback fired when the component changes value from open state.\n * These property is ignored for subtrees.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event.\n */\n onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n /**\n * Callback fired when navigation happens inside the component.\n * These property is ignored for subtrees.\n *\n * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n */\n onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n /**\n * This refers to the selection mode of the tree.\n * - undefined: No selection can be done.\n * - 'single': Only one tree item can be selected, radio buttons are rendered.\n * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n *\n * @default undefined\n */\n selectionMode?: SelectionMode;\n /**\n * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n * Controls the state of the checked tree items.\n * These property is ignored for subtrees.\n */\n checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n /**\n * Callback fired when the component changes value from checked state.\n * These property is ignored for subtrees.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n * such as checked value and type of interaction that created the event.\n */\n onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WAsJ6C"}
1
+ {"version":3,"sources":["Tree.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, SelectionMode, Slot } from '@fluentui/react-utilities';\nimport type { TreeContextValue, SubtreeContextValue } from '../../contexts';\nimport type { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport type { TreeItemValue } from '../TreeItem/TreeItem.types';\nimport { CheckboxProps } from '@fluentui/react-checkbox';\nimport { RadioProps } from '@fluentui/react-radio';\n\ntype MultiSelectValue = NonNullable<CheckboxProps['checked']>;\ntype SingleSelectValue = NonNullable<RadioProps['checked']>;\nexport type TreeSelectionValue = MultiSelectValue | SingleSelectValue;\n\nexport type TreeSlots = {\n root: Slot<'div'>;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationData_unstable = {\n target: HTMLElement;\n value: TreeItemValue;\n parentValue: TreeItemValue | undefined;\n} & (\n | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n | { event: React.KeyboardEvent<HTMLElement>; type: 'TypeAhead' }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowUp }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowDown }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof Home }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof End }\n);\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type TreeNavigationEvent_unstable = TreeNavigationData_unstable['event'];\n\nexport type TreeOpenChangeData = {\n open: boolean;\n openItems: Set<TreeItemValue>;\n value: TreeItemValue;\n target: HTMLElement;\n} & (\n | { event: React.MouseEvent<HTMLElement>; type: 'ExpandIconClick' }\n | { event: React.MouseEvent<HTMLElement>; type: 'Click' }\n /**\n * @deprecated\n * Use `type: 'Click'` instead of Enter,\n * an enter press will trigger a click event, which will trigger an open change,\n * so there is no need to have a separate type for it.\n */\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof Enter }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowRight }\n | { event: React.KeyboardEvent<HTMLElement>; type: typeof ArrowLeft }\n);\n\nexport type TreeOpenChangeEvent = TreeOpenChangeData['event'];\n\nexport type TreeCheckedChangeData = {\n value: TreeItemValue;\n checkedItems: Map<TreeItemValue, TreeSelectionValue>;\n target: HTMLElement;\n event: React.ChangeEvent<HTMLElement>;\n type: 'Change';\n} & (\n | {\n selectionMode: 'multiselect';\n checked: MultiSelectValue;\n }\n | {\n selectionMode: 'single';\n checked: SingleSelectValue;\n }\n);\n\nexport type TreeCheckedChangeEvent = TreeCheckedChangeData['event'];\n\nexport type TreeContextValues = {\n tree: TreeContextValue | SubtreeContextValue;\n};\n\nexport type TreeProps = ComponentProps<TreeSlots> & {\n /**\n * A tree item can have various appearances:\n * - 'subtle' (default): The default tree item styles.\n * - 'subtle-alpha': Minimizes emphasis on hovered or focused states.\n * - 'transparent': Removes background color.\n * @default 'subtle'\n */\n appearance?: 'subtle' | 'subtle-alpha' | 'transparent';\n /**\n * Size of the tree item.\n * @default 'medium'\n */\n size?: 'small' | 'medium';\n /**\n * This refers to a list of ids of opened tree items.\n * Controls the state of the open tree items.\n * These property is ignored for subtrees.\n */\n openItems?: Iterable<TreeItemValue>;\n /**\n * This refers to a list of ids of default opened items.\n * This property is ignored for subtrees.\n */\n defaultOpenItems?: Iterable<TreeItemValue>;\n /**\n * Callback fired when the component changes value from open state.\n * These property is ignored for subtrees.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event.\n */\n onOpenChange?(event: TreeOpenChangeEvent, data: TreeOpenChangeData): void;\n\n /**\n * Callback fired when navigation happens inside the component.\n * These property is ignored for subtrees.\n *\n * FIXME: This method is not ideal, as navigation should be handled internally by tabster.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n */\n onNavigation?(event: TreeNavigationEvent_unstable, data: TreeNavigationData_unstable): void;\n\n /**\n * This refers to the selection mode of the tree.\n * - undefined: No selection can be done.\n * - 'single': Only one tree item can be selected, radio buttons are rendered.\n * - 'multiselect': Multiple tree items can be selected, checkboxes are rendered.\n *\n * @default undefined\n */\n selectionMode?: SelectionMode;\n /**\n * This refers to a list of ids of checked tree items, or a list of tuples of ids and checked state.\n * Controls the state of the checked tree items.\n * These property is ignored for subtrees.\n */\n checkedItems?: Iterable<TreeItemValue | [TreeItemValue, TreeSelectionValue]>;\n /**\n * Callback fired when the component changes value from checked state.\n * These property is ignored for subtrees.\n *\n * @param event - a React's Synthetic event\n * @param data - A data object with relevant information,\n * such as checked value and type of interaction that created the event.\n */\n onCheckedChange?(event: TreeCheckedChangeEvent, data: TreeCheckedChangeData): void;\n};\n\n/**\n * State used in rendering Tree\n */\nexport type TreeState = ComponentState<TreeSlots> & {\n open: boolean;\n} & (TreeContextValue | SubtreeContextValue);\n"],"names":[],"mappings":"AAAA,WA4J6C"}
@@ -1,24 +1,21 @@
1
- import { __styles, mergeClasses } from '@griffel/react';
1
+ import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  export const treeClassNames = {
4
4
  root: 'fui-Tree'
5
5
  };
6
+ const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
6
7
  const useStyles = /*#__PURE__*/__styles({
7
- root: {
8
- mc9l5x: "f22iagw",
9
- Beiy3e4: "f1vx9l62",
10
- Belr9w4: "f1j0q4x9"
11
- },
12
8
  subtree: {
13
9
  z8tnut: "fclwglc"
14
10
  }
15
11
  }, {
16
- d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
12
+ d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
17
13
  });
18
14
  export const useTreeStyles_unstable = state => {
15
+ const baseStyles = useBaseStyles();
19
16
  const styles = useStyles();
20
17
  const isSubTree = state.level > 1;
21
- state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
18
+ state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
22
19
  return state;
23
20
  };
24
21
  //# sourceMappingURL=useTreeStyles.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n },\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n const styles = useStyles();\n const isSubTree = state.level > 1;\n state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEW,SAAS,IAAID,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACT,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}
1
+ {"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n subtree: {\n paddingTop: tokens.spacingVerticalXXS\n }\n});\nexport const useTreeStyles_unstable = (state)=>{\n const baseStyles = useBaseStyles();\n const styles = useStyles();\n const isSubTree = state.level > 1;\n state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGN,aAAA,qGAIrB,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;EACjCJ,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;EACvH,OAAOL,KAAK;AAChB,CAAC"}
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import * as ReactDOM from 'react-dom';
3
- import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
3
+ import { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
4
4
  import { elementContains } from '@fluentui/react-portal';
5
5
  import { Space } from '@fluentui/keyboard-keys';
6
6
  import { treeDataTypes } from '../../utils/tokens';
@@ -29,7 +29,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
29
29
  // note, if the value is not externally provided,
30
30
  // then selection and expansion will not work properly
31
31
  const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
32
- const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
32
+ const { onClick, onKeyDown, onMouseOver, onFocus, onMouseOut, onBlur, onChange, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;
33
33
  const [isActionsVisible, setActionsVisible] = React.useState(false);
34
34
  const [isAsideVisible, setAsideVisible] = React.useState(true);
35
35
  const handleActionsRef = React.useCallback((actionsElement)=>{
@@ -102,25 +102,13 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
102
102
  if (selectionMode !== 'none') {
103
103
  var _selectionRef_current;
104
104
  (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
105
+ // Prevents the page from scrolling down when the spacebar is pressed
105
106
  event.preventDefault();
106
107
  }
107
108
  return;
108
109
  case treeDataTypes.Enter:
109
110
  {
110
- var _props_onOpenChange;
111
- const data = {
112
- value,
113
- event,
114
- open: !open,
115
- type: event.key,
116
- target: event.currentTarget
117
- };
118
- (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
119
- return requestTreeResponse({
120
- ...data,
121
- itemType,
122
- requestType: 'open'
123
- });
111
+ return event.currentTarget.click();
124
112
  }
125
113
  case treeDataTypes.End:
126
114
  case treeDataTypes.Home:
@@ -149,8 +137,8 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
149
137
  target: event.currentTarget
150
138
  };
151
139
  if (open) {
152
- var _props_onOpenChange1;
153
- (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
140
+ var _props_onOpenChange;
141
+ (_props_onOpenChange = props.onOpenChange) === null || _props_onOpenChange === void 0 ? void 0 : _props_onOpenChange.call(props, event, data);
154
142
  }
155
143
  return requestTreeResponse({
156
144
  ...data,
@@ -172,8 +160,8 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
172
160
  target: event.currentTarget
173
161
  };
174
162
  if (!open) {
175
- var _props_onOpenChange2;
176
- (_props_onOpenChange2 = props.onOpenChange) === null || _props_onOpenChange2 === void 0 ? void 0 : _props_onOpenChange2.call(props, event, data);
163
+ var _props_onOpenChange1;
164
+ (_props_onOpenChange1 = props.onOpenChange) === null || _props_onOpenChange1 === void 0 ? void 0 : _props_onOpenChange1.call(props, event, data);
177
165
  }
178
166
  return requestTreeResponse({
179
167
  ...data,
@@ -195,13 +183,13 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
195
183
  });
196
184
  }
197
185
  });
198
- const handleActionsVisible = useEventCallback((event)=>{
186
+ const setActionsVisibleIfNotFromSubtree = React.useCallback((event)=>{
199
187
  const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
200
188
  if (!isTargetFromSubtree) {
201
189
  setActionsVisible(true);
202
190
  }
203
- });
204
- const handleActionsInvisible = useEventCallback((event)=>{
191
+ }, []);
192
+ const setActionsInvisibleIfNotFromSubtree = React.useCallback((event)=>{
205
193
  const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));
206
194
  const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));
207
195
  if (isRelatedTargetFromActions) {
@@ -210,8 +198,25 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
210
198
  if (!isTargetFromSubtree) {
211
199
  return setActionsVisible(false);
212
200
  }
201
+ }, []);
202
+ const handleMouseOver = useEventCallback((event)=>{
203
+ onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(event);
204
+ setActionsVisibleIfNotFromSubtree(event);
205
+ });
206
+ const handleFocus = useEventCallback((event)=>{
207
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
208
+ setActionsVisibleIfNotFromSubtree(event);
209
+ });
210
+ const handleMouseOut = useEventCallback((event)=>{
211
+ onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(event);
212
+ setActionsInvisibleIfNotFromSubtree(event);
213
+ });
214
+ const handleBlur = useEventCallback((event)=>{
215
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
216
+ setActionsInvisibleIfNotFromSubtree(event);
213
217
  });
214
218
  const handleChange = useEventCallback((event)=>{
219
+ onChange === null || onChange === void 0 ? void 0 : onChange(event);
215
220
  if (event.isDefaultPrevented()) {
216
221
  return;
217
222
  }
@@ -245,7 +250,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
245
250
  },
246
251
  isAsideVisible,
247
252
  isActionsVisible,
248
- root: slot.always(getNativeElementProps(as, {
253
+ root: slot.always(getIntrinsicElementProps(as, {
249
254
  tabIndex: -1,
250
255
  [dataTreeItemValueAttrName]: value,
251
256
  ...rest,
@@ -260,10 +265,10 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
260
265
  'aria-expanded': itemType === 'branch' ? open : undefined,
261
266
  onClick: handleClick,
262
267
  onKeyDown: handleKeyDown,
263
- onMouseOver: handleActionsVisible,
264
- onFocus: handleActionsVisible,
265
- onMouseOut: handleActionsInvisible,
266
- onBlur: handleActionsInvisible,
268
+ onMouseOver: handleMouseOver,
269
+ onFocus: handleFocus,
270
+ onMouseOut: handleMouseOut,
271
+ onBlur: handleBlur,
267
272
  onChange: handleChange
268
273
  }), {
269
274
  elementType: 'div'