@fluentui/react-overflow 9.0.0-beta.9 → 9.0.0-rc.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 (40) hide show
  1. package/CHANGELOG.json +316 -1
  2. package/CHANGELOG.md +86 -2
  3. package/README.md +1 -1
  4. package/dist/index.d.ts +2 -9
  5. package/lib/components/Overflow.js +4 -2
  6. package/lib/components/Overflow.js.map +1 -1
  7. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  8. package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
  9. package/lib/components/OverflowItem/index.js.map +1 -1
  10. package/lib/constants.js.map +1 -1
  11. package/lib/index.js.map +1 -1
  12. package/lib/overflowContext.js +7 -6
  13. package/lib/overflowContext.js.map +1 -1
  14. package/lib/types.js.map +1 -1
  15. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  16. package/lib/useIsOverflowItemVisible.js.map +1 -1
  17. package/lib/useOverflowContainer.js +11 -2
  18. package/lib/useOverflowContainer.js.map +1 -1
  19. package/lib/useOverflowCount.js.map +1 -1
  20. package/lib/useOverflowItem.js.map +1 -1
  21. package/lib/useOverflowMenu.js +4 -16
  22. package/lib/useOverflowMenu.js.map +1 -1
  23. package/lib-commonjs/components/Overflow.js +4 -2
  24. package/lib-commonjs/components/Overflow.js.map +1 -1
  25. package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
  26. package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
  27. package/lib-commonjs/constants.js.map +1 -1
  28. package/lib-commonjs/index.js.map +1 -1
  29. package/lib-commonjs/overflowContext.js +7 -6
  30. package/lib-commonjs/overflowContext.js.map +1 -1
  31. package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
  32. package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
  33. package/lib-commonjs/useOverflowContainer.js +10 -1
  34. package/lib-commonjs/useOverflowContainer.js.map +1 -1
  35. package/lib-commonjs/useOverflowCount.js.map +1 -1
  36. package/lib-commonjs/useOverflowItem.js.map +1 -1
  37. package/lib-commonjs/useOverflowMenu.js +4 -17
  38. package/lib-commonjs/useOverflowMenu.js.map +1 -1
  39. package/package.json +24 -15
  40. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,7 +2,322 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 03 Aug 2022 16:00:19 GMT",
5
+ "date": "Mon, 05 Dec 2022 18:25:23 GMT",
6
+ "tag": "@fluentui/react-overflow_v9.0.0-rc.2",
7
+ "version": "9.0.0-rc.2",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-overflow",
13
+ "commit": "690571f25f33d5c2c63e9773e035d164a6dbeba7",
14
+ "comment": "fix: Remove cypress test line causing intermittent CI failures."
15
+ }
16
+ ],
17
+ "prerelease": [
18
+ {
19
+ "author": "beachball",
20
+ "package": "@fluentui/react-overflow",
21
+ "comment": "Bump @fluentui/react-theme to v9.1.3",
22
+ "commit": "4c29542a51bf068e171690cc8e59c14489883912"
23
+ }
24
+ ]
25
+ }
26
+ },
27
+ {
28
+ "date": "Thu, 17 Nov 2022 23:05:42 GMT",
29
+ "tag": "@fluentui/react-overflow_v9.0.0-rc.1",
30
+ "version": "9.0.0-rc.1",
31
+ "comments": {
32
+ "none": [
33
+ {
34
+ "author": "martinhochel@microsoft.com",
35
+ "package": "@fluentui/react-overflow",
36
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
37
+ "comment": "chore: update package scaffold"
38
+ }
39
+ ],
40
+ "prerelease": [
41
+ {
42
+ "author": "lingfangao@hotmail.com",
43
+ "package": "@fluentui/react-overflow",
44
+ "commit": "80075557d5f685b21d145de3b538af5e80534feb",
45
+ "comment": "feat: Bump to RC"
46
+ },
47
+ {
48
+ "author": "beachball",
49
+ "package": "@fluentui/react-overflow",
50
+ "comment": "Bump @fluentui/priority-overflow to v9.0.0-rc.1",
51
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
52
+ },
53
+ {
54
+ "author": "beachball",
55
+ "package": "@fluentui/react-overflow",
56
+ "comment": "Bump @fluentui/react-context-selector to v9.1.2",
57
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
58
+ },
59
+ {
60
+ "author": "beachball",
61
+ "package": "@fluentui/react-overflow",
62
+ "comment": "Bump @fluentui/react-utilities to v9.2.2",
63
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
64
+ }
65
+ ]
66
+ }
67
+ },
68
+ {
69
+ "date": "Fri, 11 Nov 2022 14:58:08 GMT",
70
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.14",
71
+ "version": "9.0.0-beta.14",
72
+ "comments": {
73
+ "none": [
74
+ {
75
+ "author": "tristan.watanabe@gmail.com",
76
+ "package": "@fluentui/react-overflow",
77
+ "commit": "43d8356d0ede055caedd64bc73a7658efe884616",
78
+ "comment": "chore: Migrate to new package structure."
79
+ }
80
+ ],
81
+ "prerelease": [
82
+ {
83
+ "author": "martinhochel@microsoft.com",
84
+ "package": "@fluentui/react-overflow",
85
+ "commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
86
+ "comment": "fix: create valid export maps"
87
+ },
88
+ {
89
+ "author": "beachball",
90
+ "package": "@fluentui/react-overflow",
91
+ "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.4",
92
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
93
+ },
94
+ {
95
+ "author": "beachball",
96
+ "package": "@fluentui/react-overflow",
97
+ "comment": "Bump @fluentui/react-context-selector to v9.1.1",
98
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
99
+ },
100
+ {
101
+ "author": "beachball",
102
+ "package": "@fluentui/react-overflow",
103
+ "comment": "Bump @fluentui/react-theme to v9.1.2",
104
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
105
+ },
106
+ {
107
+ "author": "beachball",
108
+ "package": "@fluentui/react-overflow",
109
+ "comment": "Bump @fluentui/react-utilities to v9.2.1",
110
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
111
+ }
112
+ ]
113
+ }
114
+ },
115
+ {
116
+ "date": "Wed, 02 Nov 2022 11:57:55 GMT",
117
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.13",
118
+ "version": "9.0.0-beta.13",
119
+ "comments": {
120
+ "prerelease": [
121
+ {
122
+ "author": "olfedias@microsoft.com",
123
+ "package": "@fluentui/react-overflow",
124
+ "commit": "c619ba066f11a8654e95375314824ba6b81b003e",
125
+ "comment": "chore: Update Griffel to latest version"
126
+ },
127
+ {
128
+ "author": "beachball",
129
+ "package": "@fluentui/react-overflow",
130
+ "comment": "Bump @fluentui/react-context-selector to v9.1.0",
131
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
132
+ },
133
+ {
134
+ "author": "beachball",
135
+ "package": "@fluentui/react-overflow",
136
+ "comment": "Bump @fluentui/react-utilities to v9.2.0",
137
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
138
+ }
139
+ ]
140
+ }
141
+ },
142
+ {
143
+ "date": "Tue, 25 Oct 2022 00:35:33 GMT",
144
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.12",
145
+ "version": "9.0.0-beta.12",
146
+ "comments": {
147
+ "none": [
148
+ {
149
+ "author": "miroslav.stastny@microsoft.com",
150
+ "package": "@fluentui/react-overflow",
151
+ "commit": "6ced976a8d0e6a0e2e207da8fe0eb810e2bd19bc",
152
+ "comment": "Update package readme"
153
+ }
154
+ ]
155
+ }
156
+ },
157
+ {
158
+ "date": "Thu, 20 Oct 2022 08:39:38 GMT",
159
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.12",
160
+ "version": "9.0.0-beta.12",
161
+ "comments": {
162
+ "prerelease": [
163
+ {
164
+ "author": "olfedias@microsoft.com",
165
+ "package": "@fluentui/react-overflow",
166
+ "commit": "06865dada128321804646582f564ee86d835d174",
167
+ "comment": "chore: Update Griffel to latest version"
168
+ },
169
+ {
170
+ "author": "mgodbolt@microsoft.com",
171
+ "package": "@fluentui/react-overflow",
172
+ "commit": "17096b3137d9d3e7c7443ddc3ce0738b2910a334",
173
+ "comment": "chore: Bump peer deps to support React 18"
174
+ },
175
+ {
176
+ "author": "beachball",
177
+ "package": "@fluentui/react-overflow",
178
+ "comment": "Bump @fluentui/react-context-selector to v9.0.5",
179
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
180
+ },
181
+ {
182
+ "author": "beachball",
183
+ "package": "@fluentui/react-overflow",
184
+ "comment": "Bump @fluentui/react-theme to v9.1.1",
185
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
186
+ },
187
+ {
188
+ "author": "beachball",
189
+ "package": "@fluentui/react-overflow",
190
+ "comment": "Bump @fluentui/react-utilities to v9.1.2",
191
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
192
+ }
193
+ ],
194
+ "none": [
195
+ {
196
+ "author": "lingfangao@hotmail.com",
197
+ "package": "@fluentui/react-overflow",
198
+ "commit": "099d9f0f3d9e033ebb3bb450f31cf3e5765ec8f0",
199
+ "comment": "Remove it.only from unit tests"
200
+ }
201
+ ]
202
+ }
203
+ },
204
+ {
205
+ "date": "Thu, 13 Oct 2022 11:02:54 GMT",
206
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.11",
207
+ "version": "9.0.0-beta.11",
208
+ "comments": {
209
+ "prerelease": [
210
+ {
211
+ "author": "lingfangao@hotmail.com",
212
+ "package": "@fluentui/react-overflow",
213
+ "commit": "6440417cb5db157acfb33d9f2c93de9bf7493791",
214
+ "comment": "fix: useOverflowMenu should register overflow menu"
215
+ },
216
+ {
217
+ "author": "olfedias@microsoft.com",
218
+ "package": "@fluentui/react-overflow",
219
+ "commit": "1a527d440e0497ef8046b3ce240492241e7a04ac",
220
+ "comment": "chore: Update Griffel to latest version"
221
+ },
222
+ {
223
+ "author": "beachball",
224
+ "package": "@fluentui/react-overflow",
225
+ "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.3",
226
+ "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
227
+ },
228
+ {
229
+ "author": "beachball",
230
+ "package": "@fluentui/react-overflow",
231
+ "comment": "Bump @fluentui/react-context-selector to v9.0.4",
232
+ "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
233
+ },
234
+ {
235
+ "author": "beachball",
236
+ "package": "@fluentui/react-overflow",
237
+ "comment": "Bump @fluentui/react-utilities to v9.1.1",
238
+ "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
239
+ }
240
+ ],
241
+ "none": [
242
+ {
243
+ "author": "lingfangao@hotmail.com",
244
+ "package": "@fluentui/react-overflow",
245
+ "commit": "d59683655d4d2a3775df4a2b41a09504cddd72ad",
246
+ "comment": "chore: Add browser e2e tests"
247
+ }
248
+ ]
249
+ }
250
+ },
251
+ {
252
+ "date": "Mon, 03 Oct 2022 22:24:38 GMT",
253
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.10",
254
+ "version": "9.0.0-beta.10",
255
+ "comments": {
256
+ "none": [
257
+ {
258
+ "author": "bernardo.sunderhus@gmail.com",
259
+ "package": "@fluentui/react-overflow",
260
+ "commit": "fa59098280d8187ce9a62a568525694a56782e45",
261
+ "comment": "chore: update package scaffold"
262
+ }
263
+ ]
264
+ }
265
+ },
266
+ {
267
+ "date": "Thu, 15 Sep 2022 09:49:10 GMT",
268
+ "tag": "@fluentui/react-overflow_v9.0.0-beta.10",
269
+ "version": "9.0.0-beta.10",
270
+ "comments": {
271
+ "prerelease": [
272
+ {
273
+ "author": "lingfangao@hotmail.com",
274
+ "package": "@fluentui/react-overflow",
275
+ "commit": "a0cfab0e5f74e3a3bfa9c269fff574295042d7f2",
276
+ "comment": "chore: fix no-context-default-value lint violations"
277
+ },
278
+ {
279
+ "author": "olfedias@microsoft.com",
280
+ "package": "@fluentui/react-overflow",
281
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
282
+ "comment": "chore: Update Griffel to latest version"
283
+ },
284
+ {
285
+ "author": "beachball",
286
+ "package": "@fluentui/react-overflow",
287
+ "comment": "Bump @fluentui/react-context-selector to v9.0.3",
288
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
289
+ },
290
+ {
291
+ "author": "beachball",
292
+ "package": "@fluentui/react-overflow",
293
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
294
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
295
+ },
296
+ {
297
+ "author": "beachball",
298
+ "package": "@fluentui/react-overflow",
299
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
300
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
301
+ }
302
+ ],
303
+ "none": [
304
+ {
305
+ "author": "martinhochel@microsoft.com",
306
+ "package": "@fluentui/react-overflow",
307
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
308
+ "comment": "chore: update package scaffold"
309
+ },
310
+ {
311
+ "author": "martinhochel@microsoft.com",
312
+ "package": "@fluentui/react-overflow",
313
+ "commit": "16aa65dcae8f75c6a221225fd0eb43800650ac66",
314
+ "comment": "docs: re-generate api.md files"
315
+ }
316
+ ]
317
+ }
318
+ },
319
+ {
320
+ "date": "Wed, 03 Aug 2022 16:03:52 GMT",
6
321
  "tag": "@fluentui/react-overflow_v9.0.0-beta.9",
7
322
  "version": "9.0.0-beta.9",
8
323
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,96 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Wed, 03 Aug 2022 16:00:19 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 05 Dec 2022 18:25:23 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.2)
8
+
9
+ Mon, 05 Dec 2022 18:25:23 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-rc.1..@fluentui/react-overflow_v9.0.0-rc.2)
11
+
12
+ ### Changes
13
+
14
+ - Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
15
+
16
+ ## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-rc.1)
17
+
18
+ Thu, 17 Nov 2022 23:05:42 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.14..@fluentui/react-overflow_v9.0.0-rc.1)
20
+
21
+ ### Changes
22
+
23
+ - feat: Bump to RC ([PR #25659](https://github.com/microsoft/fluentui/pull/25659) by lingfangao@hotmail.com)
24
+ - Bump @fluentui/priority-overflow to v9.0.0-rc.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
25
+ - Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
27
+
28
+ ## [9.0.0-beta.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.14)
29
+
30
+ Fri, 11 Nov 2022 14:58:08 GMT
31
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.13..@fluentui/react-overflow_v9.0.0-beta.14)
32
+
33
+ ### Changes
34
+
35
+ - fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
36
+ - Bump @fluentui/priority-overflow to v9.0.0-beta.4 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
37
+ - Bump @fluentui/react-context-selector to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
38
+ - Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
39
+ - Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
40
+
41
+ ## [9.0.0-beta.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.13)
42
+
43
+ Wed, 02 Nov 2022 11:57:55 GMT
44
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.12..@fluentui/react-overflow_v9.0.0-beta.13)
45
+
46
+ ### Changes
47
+
48
+ - chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
49
+ - Bump @fluentui/react-context-selector to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
50
+ - Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
51
+
52
+ ## [9.0.0-beta.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.12)
53
+
54
+ Thu, 20 Oct 2022 08:39:38 GMT
55
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.11..@fluentui/react-overflow_v9.0.0-beta.12)
56
+
57
+ ### Changes
58
+
59
+ - chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
60
+ - chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
61
+ - Bump @fluentui/react-context-selector to v9.0.5 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
62
+ - Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
63
+ - Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
64
+
65
+ ## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.11)
66
+
67
+ Thu, 13 Oct 2022 11:02:54 GMT
68
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.10..@fluentui/react-overflow_v9.0.0-beta.11)
69
+
70
+ ### Changes
71
+
72
+ - fix: useOverflowMenu should register overflow menu ([PR #25091](https://github.com/microsoft/fluentui/pull/25091) by lingfangao@hotmail.com)
73
+ - chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com)
74
+ - Bump @fluentui/priority-overflow to v9.0.0-beta.3 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
75
+ - Bump @fluentui/react-context-selector to v9.0.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
76
+ - Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
77
+
78
+ ## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.10)
79
+
80
+ Thu, 15 Sep 2022 09:49:10 GMT
81
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.9..@fluentui/react-overflow_v9.0.0-beta.10)
82
+
83
+ ### Changes
84
+
85
+ - chore: fix no-context-default-value lint violations ([PR #24276](https://github.com/microsoft/fluentui/pull/24276) by lingfangao@hotmail.com)
86
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
87
+ - Bump @fluentui/react-context-selector to v9.0.3 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
88
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
89
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
90
+
7
91
  ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.9)
8
92
 
9
- Wed, 03 Aug 2022 16:00:19 GMT
93
+ Wed, 03 Aug 2022 16:03:52 GMT
10
94
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.8..@fluentui/react-overflow_v9.0.0-beta.9)
11
95
 
12
96
  ### Changes
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # @fluentui/react-overflow
2
2
 
3
- **React Priority Overflow components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
3
+ **React Priority Overflow components for [Fluent UI React](https://react.fluentui.dev)**
4
4
 
5
5
  These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
package/dist/index.d.ts CHANGED
@@ -22,6 +22,7 @@ declare interface OverflowContextValue {
22
22
  groupVisibility: Record<string, OverflowGroupState>;
23
23
  hasOverflow: boolean;
24
24
  registerItem: (item: OverflowItemEntry) => () => void;
25
+ registerOverflowMenu: (el: HTMLElement) => () => void;
25
26
  updateOverflow: (padding?: number) => void;
26
27
  }
27
28
 
@@ -83,19 +84,11 @@ export declare const useOverflowContainer: <TElement extends HTMLElement>(update
83
84
  /**
84
85
  * @internal
85
86
  */
86
- export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> {
87
+ export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {
87
88
  /**
88
89
  * Ref to apply to the container that will overflow
89
90
  */
90
91
  containerRef: React_2.RefObject<TElement>;
91
- /**
92
- * Registers and overflow item
93
- */
94
- registerItem: OverflowContextValue['registerItem'];
95
- /**
96
- * Imperative function to trigger overflow update
97
- */
98
- updateOverflow: OverflowContextValue['updateOverflow'];
99
92
  }
100
93
 
101
94
  /**
@@ -48,7 +48,8 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
48
48
  const {
49
49
  containerRef,
50
50
  registerItem,
51
- updateOverflow
51
+ updateOverflow,
52
+ registerOverflowMenu
52
53
  } = useOverflowContainer(update, {
53
54
  overflowDirection,
54
55
  overflowAxis,
@@ -66,7 +67,8 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
66
67
  groupVisibility,
67
68
  hasOverflow,
68
69
  registerItem,
69
- updateOverflow
70
+ updateOverflow,
71
+ registerOverflowMenu
70
72
  }
71
73
  }, clonedChild);
72
74
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AAEA,SAAS,eAAT,QAAgC,oBAAhC;AACA,SAAS,yBAAT,EAAoC,oBAApC,QAAgE,yBAAhE;AACA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,cAArD;;AAEA,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B;EAA9B,IAAiD,oBAAoB,CAAC,MAAD,EAAS;IAClF,iBADkF;IAElF,YAFkF;IAGlF,OAHkF;IAIlF,cAJkF;IAKlF,sBAAsB,EAAE;EAL0D,CAAT,CAA3E;EAQA,MAAM,WAAW,GAAG,2BAA2B,CAAC,QAAD,EAAW;IACxD,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf,CADsC;IAExD,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,MAAM,CAAC,gBAA7B,EAA+C,QAAQ,CAAC,KAAT,CAAe,SAA9D;EAFiC,CAAX,CAA/C;EAKA,oBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL;IALK;EADgB,CAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAjB","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& > [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\n data.visibleItems.forEach(x => (newState[x.id] = true));\n data.invisibleItems.forEach(x => (newState[x.id] = false));\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n\n const { containerRef, registerItem, updateOverflow } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AAEA,SAAS,eAAT,QAAgC,oBAAhC;AACA,SAAS,yBAAT,EAAoC,oBAApC,QAAgE,yBAAhE;AACA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,cAArD;;AAEA,MAAM,SAAS,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B,cAA9B;IAA8C;EAA9C,IAAuE,oBAAoB,CAAC,MAAD,EAAS;IACxG,iBADwG;IAExG,YAFwG;IAGxG,OAHwG;IAIxG,cAJwG;IAKxG,sBAAsB,EAAE;EALgF,CAAT,CAAjG;EAQA,MAAM,WAAW,GAAG,2BAA2B,CAAC,QAAD,EAAW;IACxD,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf,CADsC;IAExD,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,MAAM,CAAC,gBAA7B,EAA+C,QAAQ,CAAC,KAAT,CAAe,SAA9D;EAFiC,CAAX,CAA/C;EAKA,oBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL,cALK;MAML;IANK;EADgB,CAAzB,EAUG,WAVH,CADF;AAcD,CAjDuB,CAAjB","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& > [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\n data.visibleItems.forEach(x => (newState[x.id] = true));\n data.invisibleItems.forEach(x => (newState[x.id] = false));\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAGA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,eAAe,CAAC,EAAD,EAAK,QAAL,EAAe,OAAf,CAApC;EACA,OAAO,2BAA2B,CAAC,QAAD,EAAW;IAC3C,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf;EADyB,CAAX,CAAlC;AAGD,CAP2B,CAArB","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAGA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAAG,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,eAAe,CAAC,EAAD,EAAK,QAAL,EAAe,OAAf,CAApC;EACA,OAAO,2BAA2B,CAAC,QAAD,EAAW;IAC3C,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf;EADyB,CAAX,CAAlC;AAGD,CAP2B,CAArB","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"OverflowItem.types.js","sourceRoot":"../src/","sources":["components/OverflowItem/OverflowItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"]}
1
+ {"version":3,"file":"OverflowItem.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/OverflowItem/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/components/OverflowItem/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AACnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AACvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"]}
1
+ {"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AACnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AACvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"]}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}
@@ -1,11 +1,12 @@
1
- import { createContext, useContextSelector } from '@fluentui/react-context-selector'; // eslint-disable-next-line @fluentui/no-context-default-value
2
-
3
- export const OverflowContext = /*#__PURE__*/createContext({
1
+ import { createContext, useContextSelector } from '@fluentui/react-context-selector';
2
+ export const OverflowContext = /*#__PURE__*/createContext(undefined);
3
+ const overflowContextDefaultValue = {
4
4
  itemVisibility: {},
5
5
  groupVisibility: {},
6
6
  hasOverflow: false,
7
7
  registerItem: () => () => null,
8
- updateOverflow: () => null
9
- });
10
- export const useOverflowContext = selector => useContextSelector(OverflowContext, selector);
8
+ updateOverflow: () => null,
9
+ registerOverflowMenu: () => () => null
10
+ };
11
+ export const useOverflowContext = selector => useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
11
12
  //# sourceMappingURL=overflowContext.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":"AACA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE,C,CAUA;;AACA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;EACjE,cAAc,EAAE,EADiD;EAEjE,eAAe,EAAE,EAFgD;EAGjE,WAAW,EAAE,KAHoD;EAIjE,YAAY,EAAE,MAAM,MAAM,IAJuC;EAKjE,cAAc,EAAE,MAAM;AAL2C,CAAvB,CAArC;AAQP,OAAO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const OverflowContext = createContext<OverflowContextValue>({\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":"AACA,SAA0B,aAA1B,EAAyC,kBAAzC,QAA4E,kCAA5E;AAWA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAC1C,SAD0C,CAArC;AAIP,MAAM,2BAA2B,GAAyB;EACxD,cAAc,EAAE,EADwC;EAExD,eAAe,EAAE,EAFuC;EAGxD,WAAW,EAAE,KAH2C;EAIxD,YAAY,EAAE,MAAM,MAAM,IAJ8B;EAKxD,cAAc,EAAE,MAAM,IALkC;EAMxD,oBAAoB,EAAE,MAAM,MAAM;AANsB,CAA1D;AASA,OAAO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,kBAAkB,CAAC,eAAD,EAAkB,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAjE,CADb","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
package/lib/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n /**\n * Registers and overflow item\n */\n registerItem: OverflowContextValue['registerItem'];\n /**\n * Imperative function to trigger overflow update\n */\n updateOverflow: OverflowContextValue['updateOverflow'];\n}\n"]}
1
+ {"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-overflow/src/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,yBAAV,CAAoC,EAApC,EAA8C;EAClD,OAAO,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAAR,CAAzB;AACD","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,yBAAV,CAAoC,EAApC,EAA8C;EAClD,OAAO,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAAR,CAAzB;AACD","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,wBAAV,CAAmC,EAAnC,EAA6C;EACjD,OAAO,CAAC,CAAC,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAAR,CAA3B;AACD","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,wBAAV,CAAmC,EAAnC,EAA6C;EACjD,OAAO,CAAC,CAAC,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAAR,CAA3B;AACD","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { createOverflowManager } from '@fluentui/priority-overflow';
3
3
  import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
4
- import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';
4
+ import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
5
5
  /**
6
6
  * @internal
7
7
  * @param update - Callback when overflow state changes
@@ -52,10 +52,19 @@ export const useOverflowContainer = (update, options) => {
52
52
  const updateOverflow = React.useCallback(() => {
53
53
  overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
54
54
  }, [overflowManager]);
55
+ const registerOverflowMenu = React.useCallback(el => {
56
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
57
+ el.setAttribute(DATA_OVERFLOW_MENU, '');
58
+ return () => {
59
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
60
+ el.removeAttribute(DATA_OVERFLOW_MENU);
61
+ };
62
+ }, [overflowManager]);
55
63
  return {
56
64
  containerRef,
57
65
  registerItem,
58
- updateOverflow
66
+ updateOverflow,
67
+ registerOverflowMenu
59
68
  };
60
69
  };
61
70
  export const updateVisibilityAttribute = ({
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,MAC9B,kBAAkB,CAAC,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARiB,CADb","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,MAC9B,kBAAkB,CAAC,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARiB,CADb","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;EAWA,OAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;EAWA,OAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"sourceRoot":"../src/"}
@@ -2,30 +2,18 @@ import * as React from 'react';
2
2
  import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
3
3
  import { useOverflowContext } from './overflowContext';
4
4
  import { useOverflowCount } from './useOverflowCount';
5
- import { DATA_OVERFLOW_MENU } from './constants';
6
5
  export function useOverflowMenu(id) {
7
6
  const elementId = useId('overflow-menu', id);
8
7
  const overflowCount = useOverflowCount();
9
- const registerItem = useOverflowContext(v => v.registerItem);
8
+ const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);
10
9
  const updateOverflow = useOverflowContext(v => v.updateOverflow);
11
10
  const ref = React.useRef(null);
12
11
  const isOverflowing = overflowCount > 0;
13
12
  useIsomorphicLayoutEffect(() => {
14
- const element = ref.current;
15
-
16
- if (element) {
17
- const deregisterItem = registerItem({
18
- element,
19
- id: elementId,
20
- priority: Infinity
21
- });
22
- element.setAttribute(DATA_OVERFLOW_MENU, '');
23
- return () => {
24
- deregisterItem();
25
- element === null || element === void 0 ? void 0 : element.removeAttribute(DATA_OVERFLOW_MENU);
26
- };
13
+ if (ref.current) {
14
+ return registerOverflowMenu(ref.current);
27
15
  }
28
- }, [registerItem, isOverflowing, elementId]);
16
+ }, [registerOverflowMenu, isOverflowing, elementId]);
29
17
  useIsomorphicLayoutEffect(() => {
30
18
  if (isOverflowing) {
31
19
  updateOverflow();
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AAEA,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAmE;EACvE,MAAM,SAAS,GAAG,KAAK,CAAC,eAAD,EAAkB,EAAlB,CAAvB;EACA,MAAM,aAAa,GAAG,gBAAgB,EAAtC;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EACA,MAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAR,CAAzC;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;IACA,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,YAAY,CAAC;QAClC,OADkC;QAElC,EAAE,EAAE,SAF8B;QAGlC,QAAQ,EAAE;MAHwB,CAAD,CAAnC;MAKA,OAAO,CAAC,YAAR,CAAqB,kBAArB,EAAyC,EAAzC;MAEA,OAAO,MAAK;QACV,cAAc;QACd,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,kBAAzB,CAAA;MACD,CAHD;IAID;EACF,CAfwB,EAetB,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfsB,CAAzB;EAiBA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJwB,EAItB,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJsB,CAAzB;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerItem = useOverflowContext(v => v.registerItem);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n const element = ref.current;\n if (element) {\n const deregisterItem = registerItem({\n element,\n id: elementId,\n priority: Infinity,\n });\n element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n deregisterItem();\n element?.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }\n }, [registerItem, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAEA,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAmE;EACvE,MAAM,SAAS,GAAG,KAAK,CAAC,eAAD,EAAkB,EAAlB,CAAvB;EACA,MAAM,aAAa,GAAG,gBAAgB,EAAtC;EACA,MAAM,oBAAoB,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,oBAAR,CAA/C;EACA,MAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAR,CAAzC;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAL,CAA3B;IACD;EACF,CAJwB,EAItB,CAAC,oBAAD,EAAuB,aAAvB,EAAsC,SAAtC,CAJsB,CAAzB;EAMA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJwB,EAItB,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJsB,CAAzB;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}
@@ -60,7 +60,8 @@ exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
60
60
  const {
61
61
  containerRef,
62
62
  registerItem,
63
- updateOverflow
63
+ updateOverflow,
64
+ registerOverflowMenu
64
65
  } = useOverflowContainer_1.useOverflowContainer(update, {
65
66
  overflowDirection,
66
67
  overflowAxis,
@@ -78,7 +79,8 @@ exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
78
79
  groupVisibility,
79
80
  hasOverflow,
80
81
  registerItem,
81
- updateOverflow
82
+ updateOverflow,
83
+ registerOverflowMenu
82
84
  }
83
85
  }, clonedChild);
84
86
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAEA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAAW,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B;EAA9B,IAAiD,sBAAA,CAAA,oBAAA,CAAqB,MAArB,EAA6B;IAClF,iBADkF;IAElF,YAFkF;IAGlF,OAHkF;IAIlF,cAJkF;IAKlF,sBAAsB,EAAE,sBAAA,CAAA;EAL0D,CAA7B,CAAvD;EAQA,MAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IACxD,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B,CADmD;IAExD,SAAS,EAAE,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,YAApB,EAAkC,MAAM,CAAC,gBAAzC,EAA2D,QAAQ,CAAC,KAAT,CAAe,SAA1E;EAF6C,CAAtC,CAApB;EAKA,OACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL;IALK;EADgB,CAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAX","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& > [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\n data.visibleItems.forEach(x => (newState[x.id] = true));\n data.invisibleItems.forEach(x => (newState[x.id] = false));\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n\n const { containerRef, registerItem, updateOverflow } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/components/Overflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAEA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAAW,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;EACrE,MAAM,MAAM,GAAG,SAAS,EAAxB;EAEA,MAAM;IAAE,QAAF;IAAY,cAAZ;IAA4B,YAAY,GAAG,YAA3C;IAAyD,iBAAzD;IAA4E;EAA5E,IAAwF,KAA9F;EAEA,MAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;EACA,MAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;EACA,MAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;EACA;;EACA,MAAM,MAAM,GAAqB,IAAI,IAAG;IACtC,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;IACA,iBAAiB,CAAC,MAAK;MACrB,MAAM,QAAQ,GAA4B,EAA1C;MACA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;MACA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;MACA,OAAO,QAAP;IACD,CALgB,CAAjB;IAMA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;EACD,CATD;;EAWA,MAAM;IAAE,YAAF;IAAgB,YAAhB;IAA8B,cAA9B;IAA8C;EAA9C,IAAuE,sBAAA,CAAA,oBAAA,CAAqB,MAArB,EAA6B;IACxG,iBADwG;IAExG,YAFwG;IAGxG,OAHwG;IAIxG,cAJwG;IAKxG,sBAAsB,EAAE,sBAAA,CAAA;EALgF,CAA7B,CAA7E;EAQA,MAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IACxD,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B,CADmD;IAExD,SAAS,EAAE,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,YAApB,EAAkC,MAAM,CAAC,gBAAzC,EAA2D,QAAQ,CAAC,KAAT,CAAe,SAA1E;EAF6C,CAAtC,CAApB;EAKA,OACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;IACvB,KAAK,EAAE;MACL,cADK;MAEL,eAFK;MAGL,WAHK;MAIL,YAJK;MAKL,cALK;MAML;IANK;EADgB,CAAzB,EAUG,WAVH,CADF;AAcD,CAjDuB,CAAX","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0,\n },\n },\n\n overflowingItems: {\n [`& > [${DATA_OVERFLOWING}]`]: {\n display: 'none',\n },\n },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\n data.visibleItems.forEach(x => (newState[x.id] = true));\n data.invisibleItems.forEach(x => (newState[x.id] = false));\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,iBAAA,CAAA,eAAA,CAAgB,EAAhB,EAAoB,QAApB,EAA8B,OAA9B,CAArB;EACA,OAAO,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IAC3C,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B;EADsC,CAAtC,CAAP;AAGD,CAP2B,CAAf","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;EAC7E,MAAM;IAAE,EAAF;IAAM,OAAN;IAAe,QAAf;IAAyB;EAAzB,IAAsC,KAA5C;EAEA,MAAM,YAAY,GAAG,iBAAA,CAAA,eAAA,CAAgB,EAAhB,EAAoB,QAApB,EAA8B,OAA9B,CAArB;EACA,OAAO,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;IAC3C,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B;EADsC,CAAtC,CAAP;AAGD,CAP2B,CAAf","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/OverflowItem/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/components/OverflowItem/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,gBAAA,GAAmB,kBAAnB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,gBAAA,GAAmB,kBAAnB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,0BAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AACT,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,kBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAGT,IAAA,cAAA,gBAAA,OAAA,CAAA,wCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,0BAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AACT,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,kBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAGT,IAAA,cAAA,gBAAA,OAAA,CAAA,wCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"sourceRoot":"../src/"}
@@ -5,18 +5,19 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.useOverflowContext = exports.OverflowContext = void 0;
7
7
 
8
- const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector"); // eslint-disable-next-line @fluentui/no-context-default-value
8
+ const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
9
9
 
10
-
11
- exports.OverflowContext = /*#__PURE__*/react_context_selector_1.createContext({
10
+ exports.OverflowContext = /*#__PURE__*/react_context_selector_1.createContext(undefined);
11
+ const overflowContextDefaultValue = {
12
12
  itemVisibility: {},
13
13
  groupVisibility: {},
14
14
  hasOverflow: false,
15
15
  registerItem: () => () => null,
16
- updateOverflow: () => null
17
- });
16
+ updateOverflow: () => null,
17
+ registerOverflowMenu: () => () => null
18
+ };
18
19
 
19
- const useOverflowContext = selector => react_context_selector_1.useContextSelector(exports.OverflowContext, selector);
20
+ const useOverflowContext = selector => react_context_selector_1.useContextSelector(exports.OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));
20
21
 
21
22
  exports.useOverflowContext = useOverflowContext;
22
23
  //# sourceMappingURL=overflowContext.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA,C,CAUA;;;AACa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAAoC;EACjE,cAAc,EAAE,EADiD;EAEjE,eAAe,EAAE,EAFgD;EAGjE,WAAW,EAAE,KAHoD;EAIjE,YAAY,EAAE,MAAM,MAAM,IAJuC;EAKjE,cAAc,EAAE,MAAM;AAL2C,CAApC,CAAlB;;AAQN,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const OverflowContext = createContext<OverflowContextValue>({\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/overflowContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAWa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAC7B,SAD6B,CAAlB;AAIb,MAAM,2BAA2B,GAAyB;EACxD,cAAc,EAAE,EADwC;EAExD,eAAe,EAAE,EAFuC;EAGxD,WAAW,EAAE,KAH2C;EAIxD,YAAY,EAAE,MAAM,MAAM,IAJ8B;EAKxD,cAAc,EAAE,MAAM,IALkC;EAMxD,oBAAoB,EAAE,MAAM,MAAM;AANsB,CAA1D;;AASO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAnF,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n};\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,yBAAhB,CAA0C,EAA1C,EAAoD;EAClD,OAAO,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAA1B,CAAP;AACD;;AAFD,OAAA,CAAA,yBAAA,GAAA,yBAAA","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,yBAAhB,CAA0C,EAA1C,EAAoD;EAClD,OAAO,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAA1B,CAAP;AACD;;AAFD,OAAA,CAAA,yBAAA,GAAA,yBAAA","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,wBAAhB,CAAyC,EAAzC,EAAmD;EACjD,OAAO,CAAC,CAAC,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAA1B,CAAT;AACD;;AAFD,OAAA,CAAA,wBAAA,GAAA,wBAAA","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,wBAAhB,CAAyC,EAAzC,EAAmD;EACjD,OAAO,CAAC,CAAC,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAA1B,CAAT;AACD;;AAFD,OAAA,CAAA,wBAAA,GAAA,wBAAA","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}
@@ -63,10 +63,19 @@ const useOverflowContainer = (update, options) => {
63
63
  const updateOverflow = React.useCallback(() => {
64
64
  overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
65
65
  }, [overflowManager]);
66
+ const registerOverflowMenu = React.useCallback(el => {
67
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
68
+ el.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
69
+ return () => {
70
+ overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
71
+ el.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
72
+ };
73
+ }, [overflowManager]);
66
74
  return {
67
75
  containerRef,
68
76
  registerItem,
69
- updateOverflow
77
+ updateOverflow,
78
+ registerOverflowMenu
70
79
  };
71
80
  };
72
81
 
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n const registerOverflowMenu = React.useCallback(\n (el: HTMLElement) => {\n overflowManager?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n overflowManager?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n },\n [overflowManager],\n );\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAG,MAC9B,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARD,CADK;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAG,MAC9B,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAG;EACrB,OAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;IACpE,IAAI,CAAC,OAAL,EAAc;MACZ,GAAG;IACJ;;IAED,OAAO,GAAP;EACD,CANM,EAMJ,CANI,CAAP;AAOD,CARD,CADK;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;EAWA,OAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;EAWA,OAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"sourceRoot":"../src/"}
@@ -13,31 +13,18 @@ const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
13
13
 
14
14
  const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
15
15
 
16
- const constants_1 = /*#__PURE__*/require("./constants");
17
-
18
16
  function useOverflowMenu(id) {
19
17
  const elementId = react_utilities_1.useId('overflow-menu', id);
20
18
  const overflowCount = useOverflowCount_1.useOverflowCount();
21
- const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
19
+ const registerOverflowMenu = overflowContext_1.useOverflowContext(v => v.registerOverflowMenu);
22
20
  const updateOverflow = overflowContext_1.useOverflowContext(v => v.updateOverflow);
23
21
  const ref = React.useRef(null);
24
22
  const isOverflowing = overflowCount > 0;
25
23
  react_utilities_1.useIsomorphicLayoutEffect(() => {
26
- const element = ref.current;
27
-
28
- if (element) {
29
- const deregisterItem = registerItem({
30
- element,
31
- id: elementId,
32
- priority: Infinity
33
- });
34
- element.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
35
- return () => {
36
- deregisterItem();
37
- element === null || element === void 0 ? void 0 : element.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
38
- };
24
+ if (ref.current) {
25
+ return registerOverflowMenu(ref.current);
39
26
  }
40
- }, [registerItem, isOverflowing, elementId]);
27
+ }, [registerOverflowMenu, isOverflowing, elementId]);
41
28
  react_utilities_1.useIsomorphicLayoutEffect(() => {
42
29
  if (isOverflowing) {
43
30
  updateOverflow();
@@ -1 +1 @@
1
- {"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAEA,SAAgB,eAAhB,CAA8D,EAA9D,EAAyE;EACvE,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,EAAvB,CAAlB;EACA,MAAM,aAAa,GAAG,kBAAA,CAAA,gBAAA,EAAtB;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EACA,MAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,cAA1B,CAAvB;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,MAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;IACA,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,YAAY,CAAC;QAClC,OADkC;QAElC,EAAE,EAAE,SAF8B;QAGlC,QAAQ,EAAE;MAHwB,CAAD,CAAnC;MAKA,OAAO,CAAC,YAAR,CAAqB,WAAA,CAAA,kBAArB,EAAyC,EAAzC;MAEA,OAAO,MAAK;QACV,cAAc;QACd,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,WAAA,CAAA,kBAAzB,CAAA;MACD,CAHD;IAID;EACF,CAfD,EAeG,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfH;EAiBA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJD,EAIG,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJH;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD;;AAhCD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerItem = useOverflowContext(v => v.registerItem);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n const element = ref.current;\n if (element) {\n const deregisterItem = registerItem({\n element,\n id: elementId,\n priority: Infinity,\n });\n element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n deregisterItem();\n element?.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }\n }, [registerItem, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAEA,SAAgB,eAAhB,CAA8D,EAA9D,EAAyE;EACvE,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,EAAvB,CAAlB;EACA,MAAM,aAAa,GAAG,kBAAA,CAAA,gBAAA,EAAtB;EACA,MAAM,oBAAoB,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,oBAA1B,CAA7B;EACA,MAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,cAA1B,CAAvB;EACA,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAL,CAA3B;IACD;EACF,CAJD,EAIG,CAAC,oBAAD,EAAuB,aAAvB,EAAsC,SAAtC,CAJH;EAMA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,aAAJ,EAAmB;MACjB,cAAc;IACf;EACF,CAJD,EAIG,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJH;EAMA,OAAO;IAAE,GAAF;IAAO,aAAP;IAAsB;EAAtB,CAAP;AACD;;AArBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "9.0.0-beta.9",
3
+ "version": "9.0.0-rc.2",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "dist/index.d.ts",
7
+ "typings": "./dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -16,32 +16,33 @@
16
16
  "bundle-size": "bundle-size measure",
17
17
  "clean": "just-scripts clean",
18
18
  "code-style": "just-scripts code-style",
19
+ "e2e": "cypress run --component",
20
+ "e2e:local": "cypress open --component",
19
21
  "just": "just-scripts",
20
22
  "lint": "just-scripts lint",
21
23
  "start": "yarn storybook",
22
24
  "test": "jest --passWithNoTests",
23
- "docs": "api-extractor run --config=config/api-extractor.local.json --local",
24
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-overflow/src && yarn docs",
25
- "storybook": "node ../../../scripts/storybook/runner",
26
- "type-check": "tsc -b tsconfig.json"
25
+ "storybook": "start-storybook",
26
+ "type-check": "tsc -b tsconfig.json",
27
+ "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
27
28
  },
28
29
  "devDependencies": {
29
30
  "@fluentui/eslint-plugin": "*",
30
31
  "@fluentui/scripts": "^1.0.0"
31
32
  },
32
33
  "dependencies": {
33
- "@fluentui/priority-overflow": "^9.0.0-beta.2",
34
- "@fluentui/react-context-selector": "^9.0.2",
35
- "@fluentui/react-theme": "^9.0.0",
36
- "@fluentui/react-utilities": "^9.0.2",
37
- "@griffel/react": "^1.2.3",
34
+ "@fluentui/priority-overflow": "^9.0.0-rc.1",
35
+ "@fluentui/react-context-selector": "^9.1.2",
36
+ "@fluentui/react-theme": "^9.1.3",
37
+ "@fluentui/react-utilities": "^9.2.2",
38
+ "@griffel/react": "^1.4.2",
38
39
  "tslib": "^2.1.0"
39
40
  },
40
41
  "peerDependencies": {
41
- "@types/react": ">=16.8.0 <18.0.0",
42
- "@types/react-dom": ">=16.8.0 <18.0.0",
43
- "react": ">=16.8.0 <18.0.0",
44
- "react-dom": ">=16.8.0 <18.0.0",
42
+ "@types/react": ">=16.8.0 <19.0.0",
43
+ "@types/react-dom": ">=16.8.0 <19.0.0",
44
+ "react": ">=16.8.0 <19.0.0",
45
+ "react-dom": ">=16.8.0 <19.0.0",
45
46
  "scheduler": "^0.19.0 || ^0.20.0"
46
47
  },
47
48
  "beachball": {
@@ -50,5 +51,13 @@
50
51
  "minor",
51
52
  "patch"
52
53
  ]
54
+ },
55
+ "exports": {
56
+ ".": {
57
+ "types": "./dist/index.d.ts",
58
+ "import": "./lib/index.js",
59
+ "require": "./lib-commonjs/index.js"
60
+ },
61
+ "./package.json": "./package.json"
53
62
  }
54
63
  }
@@ -1,11 +0,0 @@
1
- // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2
- // It should be published with your NPM package. It should not be tracked by Git.
3
- {
4
- "tsdocVersion": "0.12",
5
- "toolPackages": [
6
- {
7
- "packageName": "@microsoft/api-extractor",
8
- "packageVersion": "7.18.1"
9
- }
10
- ]
11
- }