@fluentui/react-popover 9.0.0-rc.4 → 9.0.0-rc.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +174 -1
- package/CHANGELOG.md +47 -2
- package/dist/react-popover.d.ts +15 -3
- package/lib/components/Popover/Popover.types.d.ts +6 -0
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +3 -3
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +40 -0
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.d.ts +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.d.ts +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +1 -6
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +1 -13
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +6 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +8 -1
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib/components/PopoverTrigger/usePopoverTrigger.js +2 -2
- package/lib/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib/popoverContext.d.ts +1 -1
- package/lib/popoverContext.js +1 -1
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/components/Popover/Popover.types.d.ts +6 -0
- package/lib-commonjs/components/Popover/renderPopover.js +3 -3
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +41 -0
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.d.ts +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.d.ts +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +1 -6
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +0 -13
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +6 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +9 -2
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js +2 -2
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js.map +1 -1
- package/lib-commonjs/popoverContext.d.ts +1 -1
- package/lib-commonjs/popoverContext.js +1 -1
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +18 -21
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,180 @@
|
|
|
2
2
|
"name": "@fluentui/react-popover",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 25 Apr 2022 09:31:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-popover_v9.0.0-rc.7",
|
|
7
|
+
"version": "9.0.0-rc.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-popover",
|
|
13
|
+
"comment": "Bump @fluentui/react-portal to v9.0.0-rc.7",
|
|
14
|
+
"commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-popover",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.7",
|
|
20
|
+
"commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 19 Apr 2022 19:16:47 GMT",
|
|
27
|
+
"tag": "@fluentui/react-popover_v9.0.0-rc.6",
|
|
28
|
+
"version": "9.0.0-rc.6",
|
|
29
|
+
"comments": {
|
|
30
|
+
"prerelease": [
|
|
31
|
+
{
|
|
32
|
+
"author": "seanmonahan@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-popover",
|
|
34
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
35
|
+
"comment": "Add static classnames to Popover"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "olfedias@microsoft.com",
|
|
39
|
+
"package": "@fluentui/react-popover",
|
|
40
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
41
|
+
"comment": "chore: Update Griffel to latest version"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-popover",
|
|
46
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.6",
|
|
47
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-popover",
|
|
52
|
+
"comment": "Bump @fluentui/react-portal to v9.0.0-rc.6",
|
|
53
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-popover",
|
|
58
|
+
"comment": "Bump @fluentui/react-positioning to v9.0.0-rc.6",
|
|
59
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-popover",
|
|
64
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
65
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-popover",
|
|
70
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
71
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-popover",
|
|
76
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
77
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-popover",
|
|
82
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
83
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-popover",
|
|
88
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
89
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
90
|
+
}
|
|
91
|
+
],
|
|
92
|
+
"none": [
|
|
93
|
+
{
|
|
94
|
+
"author": "lingfangao@hotmail.com",
|
|
95
|
+
"package": "@fluentui/react-popover",
|
|
96
|
+
"commit": "67dd475e49182d17dbf7d9195c5df9bce02b7b3c",
|
|
97
|
+
"comment": "chore: Update e2e tests to use cypress component testing"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"author": "elcraig@microsoft.com",
|
|
101
|
+
"package": "@fluentui/react-popover",
|
|
102
|
+
"commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
|
|
103
|
+
"comment": "Update React dev deps and hoist them to the repo root"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"author": "mgodbolt@microsoft.com",
|
|
107
|
+
"package": "@fluentui/react-popover",
|
|
108
|
+
"commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
|
|
109
|
+
"comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
|
|
110
|
+
}
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"date": "Fri, 04 Mar 2022 05:17:38 GMT",
|
|
116
|
+
"tag": "@fluentui/react-popover_v9.0.0-rc.5",
|
|
117
|
+
"version": "9.0.0-rc.5",
|
|
118
|
+
"comments": {
|
|
119
|
+
"prerelease": [
|
|
120
|
+
{
|
|
121
|
+
"author": "dzearing@microsoft.com",
|
|
122
|
+
"package": "@fluentui/react-popover",
|
|
123
|
+
"commit": "f2f1c0ea948cc3517eeb442c05433eb0918def29",
|
|
124
|
+
"comment": "Adding explicit export maps on all consumer packages for FUIR 8 and 9."
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"author": "lingfangao@hotmail.com",
|
|
128
|
+
"package": "@fluentui/react-popover",
|
|
129
|
+
"commit": "17a19427f5465577427f5c1c4ed61578a063f990",
|
|
130
|
+
"comment": "refactor: PopoverSurface should be rendered from the Popover component"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"author": "beachball",
|
|
134
|
+
"package": "@fluentui/react-popover",
|
|
135
|
+
"comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.5",
|
|
136
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
"author": "beachball",
|
|
140
|
+
"package": "@fluentui/react-popover",
|
|
141
|
+
"comment": "Bump @fluentui/react-portal to v9.0.0-rc.5",
|
|
142
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
143
|
+
},
|
|
144
|
+
{
|
|
145
|
+
"author": "beachball",
|
|
146
|
+
"package": "@fluentui/react-popover",
|
|
147
|
+
"comment": "Bump @fluentui/react-positioning to v9.0.0-rc.5",
|
|
148
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"author": "beachball",
|
|
152
|
+
"package": "@fluentui/react-popover",
|
|
153
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.4",
|
|
154
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
155
|
+
},
|
|
156
|
+
{
|
|
157
|
+
"author": "beachball",
|
|
158
|
+
"package": "@fluentui/react-popover",
|
|
159
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.5",
|
|
160
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"author": "beachball",
|
|
164
|
+
"package": "@fluentui/react-popover",
|
|
165
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.4",
|
|
166
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"author": "beachball",
|
|
170
|
+
"package": "@fluentui/react-popover",
|
|
171
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.5",
|
|
172
|
+
"commit": "1494f0b620f6d5aae7f0aef33fc9e8f6eb7f8749"
|
|
173
|
+
}
|
|
174
|
+
]
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
"date": "Tue, 01 Mar 2022 02:17:37 GMT",
|
|
6
179
|
"tag": "@fluentui/react-popover_v9.0.0-rc.4",
|
|
7
180
|
"version": "9.0.0-rc.4",
|
|
8
181
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,57 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-popover
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 25 Apr 2022 09:31:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.7)
|
|
8
|
+
|
|
9
|
+
Mon, 25 Apr 2022 09:31:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.6..@fluentui/react-popover_v9.0.0-rc.7)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-portal to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.6)
|
|
18
|
+
|
|
19
|
+
Tue, 19 Apr 2022 19:16:47 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.5..@fluentui/react-popover_v9.0.0-rc.6)
|
|
21
|
+
|
|
22
|
+
### Changes
|
|
23
|
+
|
|
24
|
+
- Add static classnames to Popover ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
25
|
+
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
26
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
27
|
+
- Bump @fluentui/react-portal to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
28
|
+
- Bump @fluentui/react-positioning to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
29
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
30
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
31
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
32
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
33
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
34
|
+
|
|
35
|
+
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.5)
|
|
36
|
+
|
|
37
|
+
Fri, 04 Mar 2022 05:17:38 GMT
|
|
38
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.4..@fluentui/react-popover_v9.0.0-rc.5)
|
|
39
|
+
|
|
40
|
+
### Changes
|
|
41
|
+
|
|
42
|
+
- Adding explicit export maps on all consumer packages for FUIR 8 and 9. ([PR #21508](https://github.com/microsoft/fluentui/pull/21508) by dzearing@microsoft.com)
|
|
43
|
+
- refactor: PopoverSurface should be rendered from the Popover component ([PR #21922](https://github.com/microsoft/fluentui/pull/21922) by lingfangao@hotmail.com)
|
|
44
|
+
- Bump @fluentui/react-context-selector to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
45
|
+
- Bump @fluentui/react-portal to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
46
|
+
- Bump @fluentui/react-positioning to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
47
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
48
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
49
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.4 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
50
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.5 ([PR #21947](https://github.com/microsoft/fluentui/pull/21947) by beachball)
|
|
51
|
+
|
|
7
52
|
## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-rc.4)
|
|
8
53
|
|
|
9
|
-
Tue, 01 Mar 2022 02:
|
|
54
|
+
Tue, 01 Mar 2022 02:17:37 GMT
|
|
10
55
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-rc.3..@fluentui/react-popover_v9.0.0-rc.4)
|
|
11
56
|
|
|
12
57
|
### Changes
|
package/dist/react-popover.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
|
|
|
11
11
|
import * as React_2 from 'react';
|
|
12
12
|
import { ReactElement } from 'react';
|
|
13
13
|
import type { Slot } from '@fluentui/react-utilities';
|
|
14
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
14
15
|
import type { usePopperMouseTarget } from '@fluentui/react-positioning';
|
|
15
16
|
|
|
16
17
|
export declare const arrowHeights: Record<PopoverSize, number>;
|
|
@@ -83,7 +84,7 @@ export declare const PopoverContext: Context<PopoverContextValue>;
|
|
|
83
84
|
/**
|
|
84
85
|
* Context shared between Popover and its children components
|
|
85
86
|
*/
|
|
86
|
-
export declare type PopoverContextValue = Pick<PopoverState, '
|
|
87
|
+
export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
|
|
87
88
|
|
|
88
89
|
/**
|
|
89
90
|
* Popover Props
|
|
@@ -109,6 +110,10 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
|
|
|
109
110
|
* Callback to open/close the Popover
|
|
110
111
|
*/
|
|
111
112
|
setOpen: (e: OpenPopoverEvents, open: boolean) => void;
|
|
113
|
+
/**
|
|
114
|
+
* Callback to toggle the open state of the Popover
|
|
115
|
+
*/
|
|
116
|
+
toggleOpen: (e: OpenPopoverEvents) => void;
|
|
112
117
|
/**
|
|
113
118
|
* Ref of the PopoverTrigger
|
|
114
119
|
*/
|
|
@@ -130,6 +135,8 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
|
|
|
130
135
|
*/
|
|
131
136
|
setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
|
|
132
137
|
size: NonNullable<PopoverProps['size']>;
|
|
138
|
+
popoverTrigger: React_2.ReactElement | undefined;
|
|
139
|
+
popoverSurface: React_2.ReactElement | undefined;
|
|
133
140
|
};
|
|
134
141
|
|
|
135
142
|
/**
|
|
@@ -137,8 +144,13 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
|
|
|
137
144
|
*/
|
|
138
145
|
export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
|
|
139
146
|
|
|
147
|
+
/**
|
|
148
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
149
|
+
*/
|
|
140
150
|
export declare const popoverSurfaceClassName = "fui-PopoverSurface";
|
|
141
151
|
|
|
152
|
+
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
|
|
153
|
+
|
|
142
154
|
/**
|
|
143
155
|
* PopoverSurface Props
|
|
144
156
|
*/
|
|
@@ -154,7 +166,7 @@ export declare type PopoverSurfaceSlots = {
|
|
|
154
166
|
/**
|
|
155
167
|
* PopoverSurface State
|
|
156
168
|
*/
|
|
157
|
-
export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, '
|
|
169
|
+
export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
|
|
158
170
|
/**
|
|
159
171
|
* CSS class for the arrow element
|
|
160
172
|
*/
|
|
@@ -194,7 +206,7 @@ export declare const renderPopover_unstable: (state: PopoverState) => JSX.Elemen
|
|
|
194
206
|
/**
|
|
195
207
|
* Render the final JSX of PopoverSurface
|
|
196
208
|
*/
|
|
197
|
-
export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element
|
|
209
|
+
export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;
|
|
198
210
|
|
|
199
211
|
/**
|
|
200
212
|
* Render the final JSX of PopoverTrigger
|
|
@@ -68,6 +68,10 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
|
|
|
68
68
|
* Callback to open/close the Popover
|
|
69
69
|
*/
|
|
70
70
|
setOpen: (e: OpenPopoverEvents, open: boolean) => void;
|
|
71
|
+
/**
|
|
72
|
+
* Callback to toggle the open state of the Popover
|
|
73
|
+
*/
|
|
74
|
+
toggleOpen: (e: OpenPopoverEvents) => void;
|
|
71
75
|
/**
|
|
72
76
|
* Ref of the PopoverTrigger
|
|
73
77
|
*/
|
|
@@ -89,6 +93,8 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
|
|
|
89
93
|
*/
|
|
90
94
|
setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
|
|
91
95
|
size: NonNullable<PopoverProps['size']>;
|
|
96
|
+
popoverTrigger: React.ReactElement | undefined;
|
|
97
|
+
popoverSurface: React.ReactElement | undefined;
|
|
92
98
|
};
|
|
93
99
|
/**
|
|
94
100
|
* Data attached to open/close events
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\ntype PopoverCommons = Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the opening of the Popover\n */\n open: boolean;\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n */\n defaultOpen?: boolean;\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n /**\n * Flag to open the Popover by hovering the trigger\n */\n openOnHover?: boolean;\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n */\n openOnContext?: boolean;\n /**\n * Do not display the arrow\n */\n noArrow?: boolean;\n /**\n * Determines popover padding and arrow size\n * @default medium\n */\n size?: PopoverSize;\n\n /**\n * A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n */\n appearance?: 'brand' | 'inverted';\n\n /**\n * Should trap focus\n */\n trapFocus?: boolean;\n\n /**\n * Configures the position of the Popover\n */\n positioning?: PositioningShorthand;\n};\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Partial<PopoverCommons> & {\n /**\n * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = PopoverCommons &\n Pick<PopoverProps, 'children'> & {\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n /**\n * Ref of the PopoverTrigger\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n /**\n * Ref of the PopoverSurface\n */\n contentRef: React.MutableRefObject<HTMLElement | null>;\n /**\n * Ref of the pointing arrow\n */\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PopperVirtualElement | undefined;\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n\n size: NonNullable<PopoverProps['size']>;\n };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\ntype PopoverCommons = Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the opening of the Popover\n */\n open: boolean;\n /**\n * Used to set the initial open state of the Popover in uncontrolled mode\n */\n defaultOpen?: boolean;\n /**\n * Call back when the component requests to change value\n * The `open` value is used as a hint when directly controlling the component\n */\n onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n /**\n * Flag to open the Popover by hovering the trigger\n */\n openOnHover?: boolean;\n /**\n * Flag to open the Popover as a context menu. Disables all other interactions\n */\n openOnContext?: boolean;\n /**\n * Do not display the arrow\n */\n noArrow?: boolean;\n /**\n * Determines popover padding and arrow size\n * @default medium\n */\n size?: PopoverSize;\n\n /**\n * A popover can appear styled with brand or inverted.\n * When not specified, the default style is used.\n */\n appearance?: 'brand' | 'inverted';\n\n /**\n * Should trap focus\n */\n trapFocus?: boolean;\n\n /**\n * Configures the position of the Popover\n */\n positioning?: PositioningShorthand;\n};\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Partial<PopoverCommons> & {\n /**\n * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n */\n children: [JSX.Element, JSX.Element] | JSX.Element;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = PopoverCommons &\n Pick<PopoverProps, 'children'> & {\n /**\n * Callback to open/close the Popover\n */\n setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n /**\n * Callback to toggle the open state of the Popover\n */\n toggleOpen: (e: OpenPopoverEvents) => void;\n /**\n * Ref of the PopoverTrigger\n */\n triggerRef: React.MutableRefObject<HTMLElement | null>;\n /**\n * Ref of the PopoverSurface\n */\n contentRef: React.MutableRefObject<HTMLElement | null>;\n /**\n * Ref of the pointing arrow\n */\n arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n /**\n * Anchors the popper to the mouse click for context events\n */\n contextTarget: PopperVirtualElement | undefined;\n /**\n * A callback to set the target of the popper to the mouse click for context events\n */\n setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n\n size: NonNullable<PopoverProps['size']>;\n\n popoverTrigger: React.ReactElement | undefined;\n\n popoverSurface: React.ReactElement | undefined;\n };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n | MouseEvent\n | TouchEvent\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n"]}
|
|
@@ -6,8 +6,8 @@ import { PopoverContext } from '../../popoverContext';
|
|
|
6
6
|
|
|
7
7
|
export const renderPopover_unstable = state => {
|
|
8
8
|
const {
|
|
9
|
-
open,
|
|
10
9
|
setOpen,
|
|
10
|
+
toggleOpen,
|
|
11
11
|
triggerRef,
|
|
12
12
|
contentRef,
|
|
13
13
|
openOnContext,
|
|
@@ -21,8 +21,8 @@ export const renderPopover_unstable = state => {
|
|
|
21
21
|
} = state;
|
|
22
22
|
return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
|
|
23
23
|
value: {
|
|
24
|
-
open,
|
|
25
24
|
setOpen,
|
|
25
|
+
toggleOpen,
|
|
26
26
|
triggerRef,
|
|
27
27
|
contentRef,
|
|
28
28
|
openOnHover,
|
|
@@ -34,6 +34,6 @@ export const renderPopover_unstable = state => {
|
|
|
34
34
|
appearance,
|
|
35
35
|
trapFocus
|
|
36
36
|
}
|
|
37
|
-
}, state.
|
|
37
|
+
}, state.popoverTrigger, state.open && state.popoverSurface);
|
|
38
38
|
};
|
|
39
39
|
//# sourceMappingURL=renderPopover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,
|
|
1
|
+
{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,OADI;AAEJ,IAAA,UAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,UAJI;AAKJ,IAAA,aALI;AAMJ,IAAA,WANI;AAOJ,IAAA,SAPI;AAQJ,IAAA,QARI;AASJ,IAAA,IATI;AAUJ,IAAA,OAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA;AAZI,MAaF,KAbJ;AAeA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,OADK;AAEL,MAAA,UAFK;AAGL,MAAA,UAHK;AAIL,MAAA,UAJK;AAKL,MAAA,WALK;AAML,MAAA,aANK;AAOL,MAAA,SAPK;AAQL,MAAA,QARK;AASL,MAAA,IATK;AAUL,MAAA,OAVK;AAWL,MAAA,UAXK;AAYL,MAAA;AAZK;AADe,GAAxB,EAgBG,KAAK,CAAC,cAhBT,EAiBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAjBvB,CADF;AAqBD,CArCM","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n const {\n setOpen,\n toggleOpen,\n triggerRef,\n contentRef,\n openOnContext,\n openOnHover,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n } = state;\n\n return (\n <PopoverContext.Provider\n value={{\n setOpen,\n toggleOpen,\n triggerRef,\n contentRef,\n openOnHover,\n openOnContext,\n mountNode,\n arrowRef,\n size,\n noArrow,\n appearance,\n trapFocus,\n }}\n >\n {state.popoverTrigger}\n {state.open && state.popoverSurface}\n </PopoverContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -3,6 +3,7 @@ import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollO
|
|
|
3
3
|
import { useFluent } from '@fluentui/react-shared-contexts';
|
|
4
4
|
import { usePopper, resolvePositioningShorthand, mergeArrowOffset, usePopperMouseTarget } from '@fluentui/react-positioning';
|
|
5
5
|
import { elementContains } from '@fluentui/react-portal';
|
|
6
|
+
import { useFocusFinders } from '@fluentui/react-tabster';
|
|
6
7
|
import { arrowHeights } from '../PopoverSurface/index';
|
|
7
8
|
/**
|
|
8
9
|
* Create the state required to render Popover.
|
|
@@ -21,7 +22,34 @@ export const usePopover_unstable = props => {
|
|
|
21
22
|
setContextTarget,
|
|
22
23
|
...props
|
|
23
24
|
};
|
|
25
|
+
const children = React.Children.toArray(props.children);
|
|
26
|
+
|
|
27
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
28
|
+
if (children.length === 0) {
|
|
29
|
+
// eslint-disable-next-line no-console
|
|
30
|
+
console.warn('Popover must contain at least one child');
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
if (children.length > 2) {
|
|
34
|
+
// eslint-disable-next-line no-console
|
|
35
|
+
console.warn('Popover must contain at most two children');
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
let popoverTrigger = undefined;
|
|
40
|
+
let popoverSurface = undefined;
|
|
41
|
+
|
|
42
|
+
if (children.length === 2) {
|
|
43
|
+
popoverTrigger = children[0];
|
|
44
|
+
popoverSurface = children[1];
|
|
45
|
+
} else if (children.length === 1) {
|
|
46
|
+
popoverSurface = children[0];
|
|
47
|
+
}
|
|
48
|
+
|
|
24
49
|
const [open, setOpen] = useOpenState(initialState);
|
|
50
|
+
const toggleOpen = React.useCallback(e => {
|
|
51
|
+
setOpen(e, !open);
|
|
52
|
+
}, [setOpen, open]);
|
|
25
53
|
const popperRefs = usePopoverRefs(initialState);
|
|
26
54
|
const {
|
|
27
55
|
targetDocument
|
|
@@ -41,10 +69,22 @@ export const usePopover_unstable = props => {
|
|
|
41
69
|
disabled: !open || !initialState.openOnContext // only close on scroll for context
|
|
42
70
|
|
|
43
71
|
});
|
|
72
|
+
const {
|
|
73
|
+
findFirstFocusable
|
|
74
|
+
} = useFocusFinders();
|
|
75
|
+
React.useEffect(() => {
|
|
76
|
+
if (open && popperRefs.contentRef.current) {
|
|
77
|
+
const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);
|
|
78
|
+
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
79
|
+
}
|
|
80
|
+
}, [findFirstFocusable, open, popperRefs.contentRef]);
|
|
44
81
|
return { ...initialState,
|
|
45
82
|
...popperRefs,
|
|
83
|
+
popoverTrigger,
|
|
84
|
+
popoverSurface,
|
|
46
85
|
open,
|
|
47
86
|
setOpen,
|
|
87
|
+
toggleOpen,
|
|
48
88
|
setContextTarget,
|
|
49
89
|
contextTarget
|
|
50
90
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,oBADF,EAEE,gBAFF,EAGE,iBAHF,EAIE,kBAJF,QAKO,2BALP;AAMA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SACE,SADF,EAEE,2BAFF,EAGE,gBAHF,EAIE,oBAJF,QAKO,6BALP;AAMA,SAAS,eAAT,QAAgC,wBAAhC;AACA,SAAS,YAAT,QAA6B,yBAA7B;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;AACvE,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,EAA9D;AACA,QAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,QADa;AAEnB,IAAA,aAFmB;AAGnB,IAAA,gBAHmB;AAInB,OAAG;AAJgB,GAArB;AAOA,QAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,YAAY,CAAC,YAAD,CAApC;AACA,QAAM,UAAU,GAAG,cAAc,CAAC,YAAD,CAAjC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,EAAA,iBAAiB,CAAC;AAChB,IAAA,QAAQ,EAAE,eADM;AAEhB,IAAA,OAAO,EAAE,cAFO;AAGhB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHP;AAIhB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJU;AAKhB,IAAA,QAAQ,EAAE,CAAC;AALK,GAAD,CAAjB;AAOA,EAAA,kBAAkB,CAAC;AACjB,IAAA,QAAQ,EAAE,eADO;AAEjB,IAAA,OAAO,EAAE,cAFQ;AAGjB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHN;AAIjB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJW;AAKjB,IAAA,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC,YAAY,CAAC,aALhB,CAK+B;;AAL/B,GAAD,CAAlB;AAQA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,UAFE;AAGL,IAAA,
|
|
1
|
+
{"version":3,"sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,oBADF,EAEE,gBAFF,EAGE,iBAHF,EAIE,kBAJF,QAKO,2BALP;AAMA,SAAS,SAAT,QAA0B,iCAA1B;AACA,SACE,SADF,EAEE,2BAFF,EAGE,gBAHF,EAIE,oBAJF,QAKO,6BALP;AAMA,SAAS,eAAT,QAAgC,wBAAhC;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,YAAT,QAA6B,yBAA7B;AAGA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;AACvE,QAAM,CAAC,aAAD,EAAgB,gBAAhB,IAAoC,oBAAoB,EAA9D;AACA,QAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,QADa;AAEnB,IAAA,aAFmB;AAGnB,IAAA,gBAHmB;AAInB,OAAG;AAJgB,GAArB;AAOA,QAAM,QAAQ,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,KAAK,CAAC,QAA7B,CAAjB;;AAEA,MAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AACzB;AACA,MAAA,OAAO,CAAC,IAAR,CAAa,yCAAb;AACD;;AAED,QAAI,QAAQ,CAAC,MAAT,GAAkB,CAAtB,EAAyB;AACvB;AACA,MAAA,OAAO,CAAC,IAAR,CAAa,2CAAb;AACD;AACF;;AAED,MAAI,cAAc,GAAmC,SAArD;AACA,MAAI,cAAc,GAAmC,SAArD;;AACA,MAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AACzB,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACA,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACD,GAHD,MAGO,IAAI,QAAQ,CAAC,MAAT,KAAoB,CAAxB,EAA2B;AAChC,IAAA,cAAc,GAAG,QAAQ,CAAC,CAAD,CAAzB;AACD;;AAED,QAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,YAAY,CAAC,YAAD,CAApC;AACA,QAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CACjB,CAAC,IAAG;AACF,IAAA,OAAO,CAAC,CAAD,EAAI,CAAC,IAAL,CAAP;AACD,GAHgB,EAIjB,CAAC,OAAD,EAAU,IAAV,CAJiB,CAAnB;AAOA,QAAM,UAAU,GAAG,cAAc,CAAC,YAAD,CAAjC;AAEA,QAAM;AAAE,IAAA;AAAF,MAAqB,SAAS,EAApC;AACA,EAAA,iBAAiB,CAAC;AAChB,IAAA,QAAQ,EAAE,eADM;AAEhB,IAAA,OAAO,EAAE,cAFO;AAGhB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHP;AAIhB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJU;AAKhB,IAAA,QAAQ,EAAE,CAAC;AALK,GAAD,CAAjB;AAOA,EAAA,kBAAkB,CAAC;AACjB,IAAA,QAAQ,EAAE,eADO;AAEjB,IAAA,OAAO,EAAE,cAFQ;AAGjB,IAAA,QAAQ,EAAE,EAAE,IAAI,OAAO,CAAC,EAAD,EAAK,KAAL,CAHN;AAIjB,IAAA,IAAI,EAAE,CAAC,UAAU,CAAC,UAAZ,EAAwB,UAAU,CAAC,UAAnC,CAJW;AAKjB,IAAA,QAAQ,EAAE,CAAC,IAAD,IAAS,CAAC,YAAY,CAAC,aALhB,CAK+B;;AAL/B,GAAD,CAAlB;AAQA,QAAM;AAAE,IAAA;AAAF,MAAyB,eAAe,EAA9C;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,IAAI,IAAI,UAAU,CAAC,UAAX,CAAsB,OAAlC,EAA2C;AACzC,YAAM,cAAc,GAAG,kBAAkB,CAAC,UAAU,CAAC,UAAX,CAAsB,OAAvB,CAAzC;AACA,MAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD;AACF,GALD,EAKG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,UAAU,CAAC,UAAtC,CALH;AAOA,SAAO,EACL,GAAG,YADE;AAEL,OAAG,UAFE;AAGL,IAAA,cAHK;AAIL,IAAA,cAJK;AAKL,IAAA,IALK;AAML,IAAA,OANK;AAOL,IAAA,UAPK;AAQL,IAAA,gBARK;AASL,IAAA;AATK,GAAP;AAWD,CA9EM;AAgFP;;AAEG;;AACH,SAAS,YAAT,CACE,KADF,EAC6G;AAE3G,QAAM,YAAY,GAAiC,gBAAgB,CAAC,CAAC,CAAD,EAAI,IAAJ,KAAY;AAAA,QAAA,EAAA;;AAAC,WAAA,CAAA,EAAA,GAAA,KAAK,CAAC,YAAN,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAA,IAAA,CAAlB,KAAkB,EAAG,CAAH,EAAM,IAAN,CAAlB;AAA6B,GAA3C,CAAnE;AAEA,QAAM,CAAC,IAAD,EAAO,YAAP,IAAuB,oBAAoB,CAAC;AAChD,IAAA,KAAK,EAAE,KAAK,CAAC,IADmC;AAEhD,IAAA,YAAY,EAAE,KAAK,CAAC,WAF4B;AAGhD,IAAA,YAAY,EAAE;AAHkC,GAAD,CAAjD;AAKA,EAAA,KAAK,CAAC,IAAN,GAAa,IAAI,KAAK,SAAT,GAAqB,IAArB,GAA4B,KAAK,CAAC,IAA/C;AACA,QAAM,gBAAgB,GAAG,KAAK,CAAC,gBAA/B;AAEA,QAAM,OAAO,GAAG,KAAK,CAAC,WAAN,CACd,CAAC,CAAD,EAAuB,UAAvB,KAA8C;AAC5C,QAAI,UAAU,IAAI,CAAC,CAAC,IAAF,KAAW,aAA7B,EAA4C;AAC1C,MAAA,gBAAgB,CAAC,CAAD,CAAhB;AACD;;AAED,QAAI,CAAC,UAAL,EAAiB;AACf,MAAA,gBAAgB,CAAC,SAAD,CAAhB;AACD;;AAED,IAAA,YAAY,CAAC,QAAQ,IAAG;AACtB;AACA;AACA,UAAI,QAAQ,KAAK,UAAjB,EAA6B;AAC3B,QAAA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM;AAAE,UAAA,IAAI,EAAE;AAAR,SAAN,CAAZ;AACD;;AAED,aAAO,UAAP;AACD,KARW,CAAZ;AASD,GAnBa,EAoBd,CAAC,YAAD,EAAe,YAAf,EAA6B,gBAA7B,CApBc,CAAhB;AAuBA,SAAO,CAAC,IAAD,EAAO,OAAP,CAAP;AACD;AAED;;AAEG;;;AACH,SAAS,cAAT,CACE,KADF,EACuH;AAErH,QAAM,aAAa,GAAG;AACpB,IAAA,QAAQ,EAAE,OADU;AAEpB,IAAA,KAAK,EAAE,QAFa;AAGpB,IAAA,MAAM,EAAE,KAAK,CAAC,aAAN,GAAsB,KAAK,CAAC,aAA5B,GAA4C,SAHhC;AAIpB,OAAG,2BAA2B,CAAC,KAAK,CAAC,WAAP;AAJV,GAAtB,CAFqH,CASrH;;AACA,MAAI,aAAa,CAAC,WAAlB,EAA+B;AAC7B,IAAA,KAAK,CAAC,OAAN,GAAgB,IAAhB;AACD;;AAED,MAAI,CAAC,KAAK,CAAC,OAAX,EAAoB;AAClB,IAAA,aAAa,CAAC,MAAd,GAAuB,gBAAgB,CAAC,aAAa,CAAC,MAAf,EAAuB,YAAY,CAAC,KAAK,CAAC,IAAP,CAAnC,CAAvC;AACD;;AAED,QAAM;AAAE,IAAA,SAAS,EAAE,UAAb;AAAyB,IAAA,YAAY,EAAE,UAAvC;AAAmD,IAAA;AAAnD,MAAgE,SAAS,CAAC,aAAD,CAA/E;AAEA,SAAO;AACL,IAAA,UADK;AAEL,IAAA,UAFK;AAGL,IAAA;AAHK,GAAP;AAKD","sourcesContent":["import * as React from 'react';\nimport {\n useControllableState,\n useEventCallback,\n useOnClickOutside,\n useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n usePopper,\n resolvePositioningShorthand,\n mergeArrowOffset,\n usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n const [contextTarget, setContextTarget] = usePopperMouseTarget();\n const initialState = {\n size: 'medium',\n contextTarget,\n setContextTarget,\n ...props,\n } as const;\n\n const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n if (process.env.NODE_ENV !== 'production') {\n if (children.length === 0) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at least one child');\n }\n\n if (children.length > 2) {\n // eslint-disable-next-line no-console\n console.warn('Popover must contain at most two children');\n }\n }\n\n let popoverTrigger: React.ReactElement | undefined = undefined;\n let popoverSurface: React.ReactElement | undefined = undefined;\n if (children.length === 2) {\n popoverTrigger = children[0];\n popoverSurface = children[1];\n } else if (children.length === 1) {\n popoverSurface = children[0];\n }\n\n const [open, setOpen] = useOpenState(initialState);\n const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n e => {\n setOpen(e, !open);\n },\n [setOpen, open],\n );\n\n const popperRefs = usePopoverRefs(initialState);\n\n const { targetDocument } = useFluent();\n useOnClickOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open,\n });\n useOnScrollOutside({\n contains: elementContains,\n element: targetDocument,\n callback: ev => setOpen(ev, false),\n refs: [popperRefs.triggerRef, popperRefs.contentRef],\n disabled: !open || !initialState.openOnContext, // only close on scroll for context\n });\n\n const { findFirstFocusable } = useFocusFinders();\n\n React.useEffect(() => {\n if (open && popperRefs.contentRef.current) {\n const firstFocusable = findFirstFocusable(popperRefs.contentRef.current);\n firstFocusable?.focus();\n }\n }, [findFirstFocusable, open, popperRefs.contentRef]);\n\n return {\n ...initialState,\n ...popperRefs,\n popoverTrigger,\n popoverSurface,\n open,\n setOpen,\n toggleOpen,\n setContextTarget,\n contextTarget,\n };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n const [open, setOpenState] = useControllableState({\n state: state.open,\n defaultState: state.defaultOpen,\n initialState: false,\n });\n state.open = open !== undefined ? open : state.open;\n const setContextTarget = state.setContextTarget;\n\n const setOpen = React.useCallback(\n (e: OpenPopoverEvents, shouldOpen: boolean) => {\n if (shouldOpen && e.type === 'contextmenu') {\n setContextTarget(e as React.MouseEvent);\n }\n\n if (!shouldOpen) {\n setContextTarget(undefined);\n }\n\n setOpenState(prevOpen => {\n // More than one event (mouse, focus, keyboard) can request the Popover to close\n // We assume the first event is the correct one\n if (prevOpen !== shouldOpen) {\n onOpenChange?.(e, { open: shouldOpen });\n }\n\n return shouldOpen;\n });\n },\n [setOpenState, onOpenChange, setContextTarget],\n );\n\n return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n state: Pick<PopoverState, 'size' | 'contextTarget'> & Pick<PopoverProps, 'positioning' | 'openOnContext' | 'noArrow'>,\n) {\n const popperOptions = {\n position: 'above' as const,\n align: 'center' as const,\n target: state.openOnContext ? state.contextTarget : undefined,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n // no reason to render arrow when covering the target\n if (popperOptions.coverTarget) {\n state.noArrow = true;\n }\n\n if (!state.noArrow) {\n popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n }\n\n const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n return {\n triggerRef,\n contentRef,\n arrowRef,\n } as const;\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -13,7 +13,7 @@ export declare type PopoverSurfaceSlots = {
|
|
|
13
13
|
/**
|
|
14
14
|
* PopoverSurface State
|
|
15
15
|
*/
|
|
16
|
-
export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, '
|
|
16
|
+
export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
|
|
17
17
|
/**
|
|
18
18
|
* CSS class for the arrow element
|
|
19
19
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, '
|
|
1
|
+
{"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * PopoverSurface State\n */\nexport type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &\n Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}
|
|
@@ -2,4 +2,4 @@ import type { PopoverSurfaceState } from './PopoverSurface.types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Render the final JSX of PopoverSurface
|
|
4
4
|
*/
|
|
5
|
-
export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element
|
|
5
|
+
export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;
|
|
@@ -9,12 +9,7 @@ export const renderPopoverSurface_unstable = state => {
|
|
|
9
9
|
const {
|
|
10
10
|
slots,
|
|
11
11
|
slotProps
|
|
12
|
-
} = getSlots(state);
|
|
13
|
-
|
|
14
|
-
if (!state.open) {
|
|
15
|
-
return null;
|
|
16
|
-
}
|
|
17
|
-
|
|
12
|
+
} = getSlots(state);
|
|
18
13
|
return /*#__PURE__*/React.createElement(Portal, {
|
|
19
14
|
mountNode: state.mountNode
|
|
20
15
|
}, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC
|
|
1
|
+
{"version":3,"sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,CAAC,KAAK,CAAC,OAAP,iBAAkB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADrB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface_unstable = (state: PopoverSurfaceState) => {\n const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state);\n\n return (\n <Portal mountNode={state.mountNode}>\n <slots.root {...slotProps.root}>\n {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {slotProps.root.children}\n </slots.root>\n </Portal>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
|
-
import {
|
|
2
|
+
import { useModalAttributes } from '@fluentui/react-tabster';
|
|
4
3
|
import { usePopoverContext_unstable } from '../../popoverContext';
|
|
5
4
|
/**
|
|
6
5
|
* Create the state required to render PopoverSurface.
|
|
@@ -14,7 +13,6 @@ import { usePopoverContext_unstable } from '../../popoverContext';
|
|
|
14
13
|
|
|
15
14
|
export const usePopoverSurface_unstable = (props, ref) => {
|
|
16
15
|
const contentRef = usePopoverContext_unstable(context => context.contentRef);
|
|
17
|
-
const open = usePopoverContext_unstable(context => context.open);
|
|
18
16
|
const openOnHover = usePopoverContext_unstable(context => context.openOnHover);
|
|
19
17
|
const setOpen = usePopoverContext_unstable(context => context.setOpen);
|
|
20
18
|
const mountNode = usePopoverContext_unstable(context => context.mountNode);
|
|
@@ -33,7 +31,6 @@ export const usePopoverSurface_unstable = (props, ref) => {
|
|
|
33
31
|
noArrow,
|
|
34
32
|
size,
|
|
35
33
|
arrowRef,
|
|
36
|
-
open,
|
|
37
34
|
mountNode,
|
|
38
35
|
components: {
|
|
39
36
|
root: 'div'
|
|
@@ -80,15 +77,6 @@ export const usePopoverSurface_unstable = (props, ref) => {
|
|
|
80
77
|
onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
|
|
81
78
|
};
|
|
82
79
|
|
|
83
|
-
const {
|
|
84
|
-
findFirstFocusable
|
|
85
|
-
} = useFocusFinders();
|
|
86
|
-
React.useEffect(() => {
|
|
87
|
-
if (state.open && contentRef.current) {
|
|
88
|
-
const firstFocusable = findFirstFocusable(contentRef.current);
|
|
89
|
-
firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
|
|
90
|
-
}
|
|
91
|
-
}, [contentRef, findFirstFocusable, state.open]);
|
|
92
80
|
return state;
|
|
93
81
|
};
|
|
94
82
|
//# sourceMappingURL=usePopoverSurface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,SAAS,kBAAT,QAAmC,yBAAnC;AACA,SAAS,0BAAT,QAA2C,sBAA3C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,UAAU,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,UAApB,CAA7C;AACA,QAAM,WAAW,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,WAApB,CAA9C;AACA,QAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,OAApB,CAA1C;AACA,QAAM,SAAS,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAA5C;AACA,QAAM,QAAQ,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,QAApB,CAA3C;AACA,QAAM,IAAI,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,IAApB,CAAvC;AACA,QAAM,OAAO,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,OAApB,CAA1C;AACA,QAAM,UAAU,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,UAApB,CAA7C;AACA,QAAM,SAAS,GAAG,0BAA0B,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAA5C;AACA,QAAM;AAAE,IAAA;AAAF,MAAsB,kBAAkB,CAAC;AAAE,IAAA;AAAF,GAAD,CAA9C;AAEA,QAAM,KAAK,GAAwB;AACjC,IAAA,UADiC;AAEjC,IAAA,OAFiC;AAGjC,IAAA,IAHiC;AAIjC,IAAA,QAJiC;AAKjC,IAAA,SALiC;AAMjC,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANqB;AASjC,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,UAAN,CADe;AAEjC,MAAA,IAAI,EAAE,SAAS,GAAG,QAAH,GAAc,eAFI;AAGjC,oBAAc,SAAS,GAAG,IAAH,GAAU,SAHA;AAIjC,SAAG,eAJ8B;AAKjC,SAAG;AAL8B,KAAR;AATM,GAAnC;AAkBA,QAAM;AACJ,IAAA,YAAY,EAAE,oBADV;AAEJ,IAAA,YAAY,EAAE,oBAFV;AAGJ,IAAA,SAAS,EAAE;AAHP,MAIF,KAAK,CAAC,IAJV;;AAKA,EAAA,KAAK,CAAC,IAAN,CAAW,YAAX,GAA2B,CAAD,IAAwC;AAChE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI,IAAJ,CAAP;AACD;;AAED,IAAA,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,CAApB;AACD,GAND;;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,YAAX,GAA2B,CAAD,IAAwC;AAChE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI,KAAJ,CAAP;AACD;;AAED,IAAA,oBAAoB,KAAA,IAApB,IAAA,oBAAoB,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAA,oBAAoB,CAAG,CAAH,CAApB;AACD,GAND;;AAQA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAwB,CAAD,IAA2C;WAAA,CAChE;AACA;;;AACA,QAAI,CAAC,CAAC,GAAF,KAAU,QAAV,KAAsB,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,QAAF,CAAW,CAAC,CAAC,MAAb,CAAxC,CAAJ,EAAoF;AAClF,MAAA,OAAO,CAAC,CAAD,EAAI,KAAJ,CAAP;AACD;;AAED,IAAA,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,CAAjB;AACD,GARD;;AAUA,SAAO,KAAP;AACD,CAjEM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext_unstable } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,\n * before being passed to renderPopoverSurface_unstable.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n */\nexport const usePopoverSurface_unstable = (\n props: PopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): PopoverSurfaceState => {\n const contentRef = usePopoverContext_unstable(context => context.contentRef);\n const openOnHover = usePopoverContext_unstable(context => context.openOnHover);\n const setOpen = usePopoverContext_unstable(context => context.setOpen);\n const mountNode = usePopoverContext_unstable(context => context.mountNode);\n const arrowRef = usePopoverContext_unstable(context => context.arrowRef);\n const size = usePopoverContext_unstable(context => context.size);\n const noArrow = usePopoverContext_unstable(context => context.noArrow);\n const appearance = usePopoverContext_unstable(context => context.appearance);\n const trapFocus = usePopoverContext_unstable(context => context.trapFocus);\n const { modalAttributes } = useModalAttributes({ trapFocus });\n\n const state: PopoverSurfaceState = {\n appearance,\n noArrow,\n size,\n arrowRef,\n mountNode,\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, contentRef),\n role: trapFocus ? 'dialog' : 'complementary',\n 'aria-modal': trapFocus ? true : undefined,\n ...modalAttributes,\n ...props,\n }),\n };\n\n const {\n onMouseEnter: onMouseEnterOriginal,\n onMouseLeave: onMouseLeaveOriginal,\n onKeyDown: onKeyDownOriginal,\n } = state.root;\n state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, true);\n }\n\n onMouseEnterOriginal?.(e);\n };\n\n state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n if (openOnHover) {\n setOpen(e, false);\n }\n\n onMouseLeaveOriginal?.(e);\n };\n\n state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // only close if the event happened inside the current popover\n // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n setOpen(e, false);\n }\n\n onKeyDownOriginal?.(e);\n };\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
import type { PopoverSize } from '../Popover/Popover.types';
|
|
2
|
-
import type { PopoverSurfaceState } from './PopoverSurface.types';
|
|
2
|
+
import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
|
|
3
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
4
|
+
/**
|
|
5
|
+
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
|
6
|
+
*/
|
|
3
7
|
export declare const popoverSurfaceClassName = "fui-PopoverSurface";
|
|
8
|
+
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
|
|
4
9
|
export declare const arrowHeights: Record<PopoverSize, number>;
|
|
5
10
|
/**
|
|
6
11
|
* Apply styling to the PopoverSurface slots based on the state
|