@fluentui/react-positioning 9.0.0-nightly.b5b7401007.0 → 9.0.0-rc.3
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +204 -12
- package/CHANGELOG.md +61 -8
- package/dist/react-positioning.d.ts +113 -35
- package/lib/createArrowStyles.d.ts +64 -0
- package/lib/createArrowStyles.js +87 -0
- package/lib/createArrowStyles.js.map +1 -0
- package/lib/createVirtualElementFromClick.js +17 -15
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib/types.d.ts +28 -7
- package/lib/types.js.map +1 -1
- package/lib/usePopper.d.ts +2 -14
- package/lib/usePopper.js +368 -319
- package/lib/usePopper.js.map +1 -1
- package/lib/usePopperMouseTarget.js +28 -22
- package/lib/usePopperMouseTarget.js.map +1 -1
- package/lib/utils/getBasePlacement.js +1 -1
- package/lib/utils/getBasePlacement.js.map +1 -1
- package/lib/utils/getBoundary.js +15 -10
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.d.ts +0 -1
- package/lib/utils/getReactFiberFromNode.js +39 -35
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js +46 -32
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js +30 -25
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/positioningHelper.d.ts +2 -2
- package/lib/utils/positioningHelper.js +42 -34
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +58 -20
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/useCallbackRef.js +35 -29
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/createArrowStyles.d.ts +64 -0
- package/lib-commonjs/createArrowStyles.js +100 -0
- package/lib-commonjs/createArrowStyles.js.map +1 -0
- package/lib-commonjs/createVirtualElementFromClick.js +23 -16
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +28 -6
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/types.d.ts +28 -7
- package/lib-commonjs/types.js +4 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePopper.d.ts +2 -14
- package/lib-commonjs/usePopper.js +383 -324
- package/lib-commonjs/usePopper.js.map +1 -1
- package/lib-commonjs/usePopperMouseTarget.js +38 -25
- package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/getBasePlacement.js +7 -2
- package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js +23 -12
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js +53 -33
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/index.js +14 -2
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js +36 -26
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
- package/lib-commonjs/utils/positioningHelper.js +50 -35
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +66 -23
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js +45 -32
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/package.json +7 -8
package/CHANGELOG.json
CHANGED
@@ -2,34 +2,226 @@
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
6
|
-
"tag": "@fluentui/react-positioning_v9.0.0-
|
7
|
-
"version": "9.0.0-
|
5
|
+
"date": "Fri, 18 Feb 2022 13:33:48 GMT",
|
6
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.3",
|
7
|
+
"version": "9.0.0-rc.3",
|
8
8
|
"comments": {
|
9
9
|
"prerelease": [
|
10
10
|
{
|
11
|
-
"author": "
|
11
|
+
"author": "lingfangao@hotmail.com",
|
12
|
+
"package": "@fluentui/react-positioning",
|
13
|
+
"commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
|
14
|
+
"comment": "fix: Source maps contain original source code"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-positioning",
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.3",
|
20
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-positioning",
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
|
26
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
27
|
+
}
|
28
|
+
]
|
29
|
+
}
|
30
|
+
},
|
31
|
+
{
|
32
|
+
"date": "Thu, 10 Feb 2022 08:50:40 GMT",
|
33
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.1",
|
34
|
+
"version": "9.0.0-rc.1",
|
35
|
+
"comments": {
|
36
|
+
"prerelease": [
|
37
|
+
{
|
38
|
+
"author": "olfedias@microsoft.com",
|
39
|
+
"package": "@fluentui/react-positioning",
|
40
|
+
"commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
|
41
|
+
"comment": "use new types from makeStyles core"
|
42
|
+
},
|
43
|
+
{
|
44
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
45
|
+
"package": "@fluentui/react-positioning",
|
46
|
+
"commit": "db6526ee2d04991e4473174969e3795299b52f9e",
|
47
|
+
"comment": "Replacing use of functions in makeStyles with direct use of tokens."
|
48
|
+
},
|
49
|
+
{
|
50
|
+
"author": "behowell@microsoft.com",
|
51
|
+
"package": "@fluentui/react-positioning",
|
52
|
+
"commit": "2e34c026a354af1bbfe6a5ead1ade41348d5488f",
|
53
|
+
"comment": "Fix tooltip arrow's high contrast border in RTL"
|
54
|
+
},
|
55
|
+
{
|
56
|
+
"author": "olfedias@microsoft.com",
|
57
|
+
"package": "@fluentui/react-positioning",
|
58
|
+
"commit": "523b5785eafd28cf56b677af40274cefe5d42dcb",
|
59
|
+
"comment": "use Griffel packages"
|
60
|
+
},
|
61
|
+
{
|
62
|
+
"author": "lingfangao@hotmail.com",
|
63
|
+
"package": "@fluentui/react-positioning",
|
64
|
+
"commit": "a548a59bd94f9c4b656da3bdd149db7ac2de726f",
|
65
|
+
"comment": "feat: Imperative `setTarget` for `usePopper` and `positioning`"
|
66
|
+
},
|
67
|
+
{
|
68
|
+
"author": "bsunderhus@microsoft.com",
|
69
|
+
"package": "@fluentui/react-positioning",
|
70
|
+
"commit": "e382ad22539fc97bb283ca4ed856e126c7477e89",
|
71
|
+
"comment": "Adds @noflip annotation to data-popper-placement styles"
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "olfedias@microsoft.com",
|
75
|
+
"package": "@fluentui/react-positioning",
|
76
|
+
"commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
|
77
|
+
"comment": "update styles to not use CSS shorthands"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "lingfangao@hotmail.com",
|
81
|
+
"package": "@fluentui/react-positioning",
|
82
|
+
"commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
|
83
|
+
"comment": "Bump Fluent UI packages to 9.0.0-rc"
|
84
|
+
},
|
85
|
+
{
|
86
|
+
"author": "behowell@microsoft.com",
|
87
|
+
"package": "@fluentui/react-positioning",
|
88
|
+
"commit": "09804275c7f346db54c33d4ff347bffc33676014",
|
89
|
+
"comment": "Fix popover arrow styling"
|
90
|
+
},
|
91
|
+
{
|
92
|
+
"author": "beachball",
|
93
|
+
"package": "@fluentui/react-positioning",
|
94
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.1",
|
95
|
+
"commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
|
96
|
+
},
|
97
|
+
{
|
98
|
+
"author": "beachball",
|
99
|
+
"package": "@fluentui/react-positioning",
|
100
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
|
101
|
+
"commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
|
102
|
+
}
|
103
|
+
],
|
104
|
+
"none": [
|
105
|
+
{
|
106
|
+
"author": "olfedias@microsoft.com",
|
12
107
|
"package": "@fluentui/react-positioning",
|
13
|
-
"
|
14
|
-
"
|
108
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
109
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
15
110
|
},
|
111
|
+
{
|
112
|
+
"author": "martinhochel@microsoft.com",
|
113
|
+
"package": "@fluentui/react-positioning",
|
114
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
115
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
116
|
+
}
|
117
|
+
]
|
118
|
+
}
|
119
|
+
},
|
120
|
+
{
|
121
|
+
"date": "Thu, 25 Nov 2021 08:34:15 GMT",
|
122
|
+
"tag": "@fluentui/react-positioning_v9.0.0-beta.4",
|
123
|
+
"version": "9.0.0-beta.4",
|
124
|
+
"comments": {
|
125
|
+
"none": [
|
126
|
+
{
|
127
|
+
"author": "lingfangao@hotmail.com",
|
128
|
+
"package": "@fluentui/react-positioning",
|
129
|
+
"commit": "718e63006d8d07d24efab9c32942041963d78dc7",
|
130
|
+
"comment": "Migrate package to use solution style ts-configs"
|
131
|
+
}
|
132
|
+
],
|
133
|
+
"prerelease": [
|
134
|
+
{
|
135
|
+
"author": "lingfangao@hotmail.com",
|
136
|
+
"package": "@fluentui/react-positioning",
|
137
|
+
"commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
|
138
|
+
"comment": "Add utility function to create styles for an arrow element"
|
139
|
+
},
|
140
|
+
{
|
141
|
+
"author": "beachball",
|
142
|
+
"package": "@fluentui/react-positioning",
|
143
|
+
"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
|
144
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
145
|
+
},
|
146
|
+
{
|
147
|
+
"author": "beachball",
|
148
|
+
"package": "@fluentui/react-positioning",
|
149
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
|
150
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
151
|
+
},
|
152
|
+
{
|
153
|
+
"author": "beachball",
|
154
|
+
"package": "@fluentui/react-positioning",
|
155
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
|
156
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
157
|
+
},
|
158
|
+
{
|
159
|
+
"author": "beachball",
|
160
|
+
"package": "@fluentui/react-positioning",
|
161
|
+
"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
|
162
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
163
|
+
}
|
164
|
+
]
|
165
|
+
}
|
166
|
+
},
|
167
|
+
{
|
168
|
+
"date": "Fri, 12 Nov 2021 13:25:30 GMT",
|
169
|
+
"tag": "@fluentui/react-positioning_v9.0.0-beta.3",
|
170
|
+
"version": "9.0.0-beta.3",
|
171
|
+
"comments": {
|
172
|
+
"prerelease": [
|
173
|
+
{
|
174
|
+
"author": "gcox@microsoft.com",
|
175
|
+
"package": "@fluentui/react-positioning",
|
176
|
+
"commit": "c9bd5b5a02ae94a8239ce1b56cac2f0d0dbd3586",
|
177
|
+
"comment": "Updated beta and RC components to ES2019"
|
178
|
+
},
|
179
|
+
{
|
180
|
+
"author": "beachball",
|
181
|
+
"package": "@fluentui/react-positioning",
|
182
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.3",
|
183
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
184
|
+
},
|
185
|
+
{
|
186
|
+
"author": "beachball",
|
187
|
+
"package": "@fluentui/react-positioning",
|
188
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.3",
|
189
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
190
|
+
}
|
191
|
+
],
|
192
|
+
"none": [
|
193
|
+
{
|
194
|
+
"author": "lingfangao@hotmail.com",
|
195
|
+
"package": "@fluentui/react-positioning",
|
196
|
+
"commit": "00f70581480b536e723fb69edf0ae617beac4807",
|
197
|
+
"comment": "Remove beta release tag"
|
198
|
+
}
|
199
|
+
]
|
200
|
+
}
|
201
|
+
},
|
202
|
+
{
|
203
|
+
"date": "Wed, 27 Oct 2021 12:14:21 GMT",
|
204
|
+
"tag": "@fluentui/react-positioning_v9.0.0-beta.2",
|
205
|
+
"version": "9.0.0-beta.2",
|
206
|
+
"comments": {
|
207
|
+
"prerelease": [
|
16
208
|
{
|
17
209
|
"author": "peter@draxler.ml",
|
18
210
|
"package": "@fluentui/react-positioning",
|
19
|
-
"
|
20
|
-
"
|
211
|
+
"commit": "f6db7c8d6b7db0902775e7857b62b745be35b59a",
|
212
|
+
"comment": "added styling of documentation"
|
21
213
|
},
|
22
214
|
{
|
23
215
|
"author": "beachball",
|
24
216
|
"package": "@fluentui/react-positioning",
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-
|
26
|
-
"commit": "
|
217
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.2",
|
218
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
27
219
|
},
|
28
220
|
{
|
29
221
|
"author": "beachball",
|
30
222
|
"package": "@fluentui/react-positioning",
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v9.0.0-
|
32
|
-
"commit": "
|
223
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.2",
|
224
|
+
"commit": "0f8f1ae7c2d908e51e29dd342d79e041f86fac08"
|
33
225
|
}
|
34
226
|
]
|
35
227
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,20 +1,73 @@
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Fri, 18 Feb 2022 13:33:48 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [9.0.0-
|
7
|
+
## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.3)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-
|
9
|
+
Fri, 18 Feb 2022 13:33:48 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.1..@fluentui/react-positioning_v9.0.0-rc.3)
|
11
11
|
|
12
12
|
### Changes
|
13
13
|
|
14
|
-
-
|
15
|
-
-
|
16
|
-
- Bump @fluentui/react-
|
17
|
-
|
14
|
+
- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
16
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
17
|
+
|
18
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.1)
|
19
|
+
|
20
|
+
Thu, 10 Feb 2022 08:50:40 GMT
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v9.0.0-rc.1)
|
22
|
+
|
23
|
+
### Changes
|
24
|
+
|
25
|
+
- use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
|
26
|
+
- Replacing use of functions in makeStyles with direct use of tokens. ([PR #21051](https://github.com/microsoft/fluentui/pull/21051) by Humberto.Morimoto@microsoft.com)
|
27
|
+
- Fix tooltip arrow's high contrast border in RTL ([PR #21354](https://github.com/microsoft/fluentui/pull/21354) by behowell@microsoft.com)
|
28
|
+
- use Griffel packages ([PR #21421](https://github.com/microsoft/fluentui/pull/21421) by olfedias@microsoft.com)
|
29
|
+
- feat: Imperative `setTarget` for `usePopper` and `positioning` ([PR #21632](https://github.com/microsoft/fluentui/pull/21632) by lingfangao@hotmail.com)
|
30
|
+
- Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
|
31
|
+
- update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
|
32
|
+
- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
|
33
|
+
- Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
|
34
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
35
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
36
|
+
|
37
|
+
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
|
38
|
+
|
39
|
+
Thu, 25 Nov 2021 08:34:15 GMT
|
40
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v9.0.0-beta.4)
|
41
|
+
|
42
|
+
### Changes
|
43
|
+
|
44
|
+
- Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by lingfangao@hotmail.com)
|
45
|
+
- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
46
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
47
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
48
|
+
- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
49
|
+
|
50
|
+
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)
|
51
|
+
|
52
|
+
Fri, 12 Nov 2021 13:25:30 GMT
|
53
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v9.0.0-beta.3)
|
54
|
+
|
55
|
+
### Changes
|
56
|
+
|
57
|
+
- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
|
58
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
59
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
60
|
+
|
61
|
+
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.2)
|
62
|
+
|
63
|
+
Wed, 27 Oct 2021 12:14:21 GMT
|
64
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.1..@fluentui/react-positioning_v9.0.0-beta.2)
|
65
|
+
|
66
|
+
### Changes
|
67
|
+
|
68
|
+
- added styling of documentation ([PR #20193](https://github.com/microsoft/fluentui/pull/20193) by peter@draxler.ml)
|
69
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
70
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.2 ([PR #20353](https://github.com/microsoft/fluentui/pull/20353) by beachball)
|
18
71
|
|
19
72
|
## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.1)
|
20
73
|
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import type { GriffelStyle } from '@griffel/react';
|
1
2
|
import * as PopperJs from '@popperjs/core';
|
2
3
|
import * as React_2 from 'react';
|
3
4
|
|
@@ -7,6 +8,72 @@ export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-alw
|
|
7
8
|
|
8
9
|
export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
|
9
10
|
|
11
|
+
/**
|
12
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
13
|
+
*
|
14
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
15
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
16
|
+
*/
|
17
|
+
export declare function createArrowHeightStyles(arrowHeight: number): {
|
18
|
+
width: string;
|
19
|
+
height: string;
|
20
|
+
};
|
21
|
+
|
22
|
+
/**
|
23
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
24
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
25
|
+
*
|
26
|
+
* ```ts
|
27
|
+
* makeStyles({
|
28
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
29
|
+
*
|
30
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
31
|
+
* mediumArrow: createArrowHeightStyles(4),
|
32
|
+
* smallArrow: createArrowHeightStyles(2),
|
33
|
+
* })
|
34
|
+
* ...
|
35
|
+
*
|
36
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
37
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
38
|
+
* styles.arrowWithoutSize,
|
39
|
+
* state.smallArrow && styles.smallArrow,
|
40
|
+
* state.mediumArrow && styles.mediumArrow,
|
41
|
+
* )
|
42
|
+
* ```
|
43
|
+
*/
|
44
|
+
export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
|
45
|
+
|
46
|
+
/**
|
47
|
+
* Options parameter for the createArrowStyles function
|
48
|
+
*/
|
49
|
+
export declare type CreateArrowStylesOptions = {
|
50
|
+
/**
|
51
|
+
* The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
|
52
|
+
*
|
53
|
+
* This can be undefined to leave out the arrow size styles. You must then add styles created by
|
54
|
+
* createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
|
55
|
+
*/
|
56
|
+
arrowHeight: number | undefined;
|
57
|
+
/**
|
58
|
+
* The borderWidth of the arrow. Should be the same borderWidth as the parent element.
|
59
|
+
*
|
60
|
+
* @defaultvalue 1px
|
61
|
+
*/
|
62
|
+
borderWidth?: GriffelStyle['borderBottomWidth'];
|
63
|
+
/**
|
64
|
+
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
65
|
+
*
|
66
|
+
* @defaultvalue solid
|
67
|
+
*/
|
68
|
+
borderStyle?: GriffelStyle['borderBottomStyle'];
|
69
|
+
/**
|
70
|
+
* The borderColor of the arrow. Should be the same borderColor as the parent element.
|
71
|
+
*
|
72
|
+
* @defaultvalue tokens.colorTransparentStroke
|
73
|
+
*/
|
74
|
+
borderColor?: GriffelStyle['borderBottomColor'];
|
75
|
+
};
|
76
|
+
|
10
77
|
/**
|
11
78
|
* Creates a virtual element based on the position of a click event
|
12
79
|
* Can be used as a target for popper in scenarios such as context menus
|
@@ -33,42 +100,13 @@ export declare type OffsetFunctionParam = {
|
|
33
100
|
placement: PopperJs.Placement;
|
34
101
|
};
|
35
102
|
|
36
|
-
declare interface PopperOptions
|
37
|
-
/**
|
38
|
-
* If false, delays Popper's creation.
|
39
|
-
* @default true
|
40
|
-
*/
|
41
|
-
enabled?: boolean;
|
42
|
-
onStateUpdate?: (state: Partial<PopperJs.State>) => void;
|
43
|
-
/**
|
44
|
-
* Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
|
45
|
-
* @default false
|
46
|
-
*/
|
47
|
-
positionFixed?: boolean;
|
48
|
-
/**
|
49
|
-
* When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
|
50
|
-
* "all" enables this behavior for all axis.
|
51
|
-
*/
|
52
|
-
unstable_disableTether?: boolean | 'all';
|
53
|
-
}
|
54
|
-
|
55
|
-
export declare type PopperRefHandle = {
|
56
|
-
updatePosition: () => void;
|
57
|
-
};
|
58
|
-
|
59
|
-
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
60
|
-
|
61
|
-
export declare type Position = 'above' | 'below' | 'before' | 'after';
|
62
|
-
|
63
|
-
export declare interface PositioningProps {
|
103
|
+
export declare interface PopperOptions {
|
64
104
|
/** Alignment for the component. Only has an effect if used with the @see position option */
|
65
105
|
align?: Alignment;
|
66
106
|
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
67
107
|
flipBoundary?: Boundary;
|
68
108
|
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
69
109
|
overflowBoundary?: Boundary;
|
70
|
-
/** An imperative handle to Popper methods. */
|
71
|
-
popperRef?: React_2.Ref<PopperRefHandle>;
|
72
110
|
/**
|
73
111
|
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
74
112
|
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
@@ -76,6 +114,11 @@ export declare interface PositioningProps {
|
|
76
114
|
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
77
115
|
*/
|
78
116
|
position?: Position;
|
117
|
+
/**
|
118
|
+
* Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
|
119
|
+
* @default false
|
120
|
+
*/
|
121
|
+
positionFixed?: boolean;
|
79
122
|
/**
|
80
123
|
* Lets you displace a popper element from its reference element.
|
81
124
|
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
@@ -95,10 +138,6 @@ export declare interface PositioningProps {
|
|
95
138
|
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
96
139
|
*/
|
97
140
|
autoSize?: AutoSize;
|
98
|
-
/**
|
99
|
-
* Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
|
100
|
-
*/
|
101
|
-
target?: HTMLElement | PopperVirtualElement | null;
|
102
141
|
/**
|
103
142
|
* Modifies position and alignment to cover the target
|
104
143
|
*/
|
@@ -108,6 +147,37 @@ export declare interface PositioningProps {
|
|
108
147
|
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
109
148
|
*/
|
110
149
|
pinned?: boolean;
|
150
|
+
/**
|
151
|
+
* When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
|
152
|
+
* "all" enables this behavior for all axis.
|
153
|
+
*/
|
154
|
+
unstable_disableTether?: boolean | 'all';
|
155
|
+
}
|
156
|
+
|
157
|
+
export declare type PopperRefHandle = {
|
158
|
+
/**
|
159
|
+
* Updates the position of the popper imperatively.
|
160
|
+
* Useful when the position of the target changes from other factors than scrolling of window resize.
|
161
|
+
*/
|
162
|
+
updatePosition: () => void;
|
163
|
+
/**
|
164
|
+
* Sets the target and updates positioning imperatively.
|
165
|
+
* Useful for avoiding double renders with the target option.
|
166
|
+
*/
|
167
|
+
setTarget: (target: HTMLElement) => void;
|
168
|
+
};
|
169
|
+
|
170
|
+
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
171
|
+
|
172
|
+
export declare type Position = 'above' | 'below' | 'before' | 'after';
|
173
|
+
|
174
|
+
export declare interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
|
175
|
+
/** An imperative handle to Popper methods. */
|
176
|
+
popperRef?: React_2.Ref<PopperRefHandle>;
|
177
|
+
/**
|
178
|
+
* Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
|
179
|
+
*/
|
180
|
+
target?: HTMLElement | PopperVirtualElement | null;
|
111
181
|
}
|
112
182
|
|
113
183
|
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
@@ -124,7 +194,7 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
|
|
124
194
|
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
125
195
|
* to avoid focus jumps
|
126
196
|
*/
|
127
|
-
export declare function usePopper(options?:
|
197
|
+
export declare function usePopper(options?: UsePopperOptions): {
|
128
198
|
targetRef: React_2.MutableRefObject<any>;
|
129
199
|
containerRef: React_2.MutableRefObject<any>;
|
130
200
|
arrowRef: React_2.MutableRefObject<any>;
|
@@ -140,4 +210,12 @@ export declare function usePopper(options?: PopperOptions): {
|
|
140
210
|
*/
|
141
211
|
export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
|
142
212
|
|
213
|
+
declare interface UsePopperOptions extends PositioningProps {
|
214
|
+
/**
|
215
|
+
* If false, delays Popper's creation.
|
216
|
+
* @default true
|
217
|
+
*/
|
218
|
+
enabled?: boolean;
|
219
|
+
}
|
220
|
+
|
143
221
|
export { }
|
@@ -0,0 +1,64 @@
|
|
1
|
+
import type { GriffelStyle } from '@griffel/react';
|
2
|
+
/**
|
3
|
+
* Options parameter for the createArrowStyles function
|
4
|
+
*/
|
5
|
+
export declare type CreateArrowStylesOptions = {
|
6
|
+
/**
|
7
|
+
* The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.
|
8
|
+
*
|
9
|
+
* This can be undefined to leave out the arrow size styles. You must then add styles created by
|
10
|
+
* createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.
|
11
|
+
*/
|
12
|
+
arrowHeight: number | undefined;
|
13
|
+
/**
|
14
|
+
* The borderWidth of the arrow. Should be the same borderWidth as the parent element.
|
15
|
+
*
|
16
|
+
* @defaultvalue 1px
|
17
|
+
*/
|
18
|
+
borderWidth?: GriffelStyle['borderBottomWidth'];
|
19
|
+
/**
|
20
|
+
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
21
|
+
*
|
22
|
+
* @defaultvalue solid
|
23
|
+
*/
|
24
|
+
borderStyle?: GriffelStyle['borderBottomStyle'];
|
25
|
+
/**
|
26
|
+
* The borderColor of the arrow. Should be the same borderColor as the parent element.
|
27
|
+
*
|
28
|
+
* @defaultvalue tokens.colorTransparentStroke
|
29
|
+
*/
|
30
|
+
borderColor?: GriffelStyle['borderBottomColor'];
|
31
|
+
};
|
32
|
+
/**
|
33
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
34
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
35
|
+
*
|
36
|
+
* ```ts
|
37
|
+
* makeStyles({
|
38
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
39
|
+
*
|
40
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
41
|
+
* mediumArrow: createArrowHeightStyles(4),
|
42
|
+
* smallArrow: createArrowHeightStyles(2),
|
43
|
+
* })
|
44
|
+
* ...
|
45
|
+
*
|
46
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
47
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
48
|
+
* styles.arrowWithoutSize,
|
49
|
+
* state.smallArrow && styles.smallArrow,
|
50
|
+
* state.mediumArrow && styles.mediumArrow,
|
51
|
+
* )
|
52
|
+
* ```
|
53
|
+
*/
|
54
|
+
export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
|
55
|
+
/**
|
56
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
57
|
+
*
|
58
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
59
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
60
|
+
*/
|
61
|
+
export declare function createArrowHeightStyles(arrowHeight: number): {
|
62
|
+
width: string;
|
63
|
+
height: string;
|
64
|
+
};
|