@fluentui/react-positioning 0.0.0-nightly65dd5f749420211213.1 → 0.0.0-nightly695230dc7220220301.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +133 -14
- package/CHANGELOG.md +46 -9
- package/dist/react-positioning.d.ts +95 -45
- package/lib/createArrowStyles.d.ts +46 -9
- package/lib/createArrowStyles.js +42 -28
- package/lib/createArrowStyles.js.map +1 -1
- package/lib/createVirtualElementFromClick.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/isIntersectingModifier.d.ts +4 -0
- package/lib/isIntersectingModifier.js +26 -0
- package/lib/isIntersectingModifier.js.map +1 -0
- 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 +42 -35
- package/lib/usePopper.js.map +1 -1
- package/lib/usePopperMouseTarget.js.map +1 -1
- package/lib/utils/getBasePlacement.js.map +1 -1
- package/lib/utils/getBoundary.js.map +1 -1
- package/lib/utils/getReactFiberFromNode.js.map +1 -1
- package/lib/utils/getScrollParent.js.map +1 -1
- package/lib/utils/index.js.map +1 -1
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib/utils/useCallbackRef.js.map +1 -1
- package/lib-commonjs/createArrowStyles.d.ts +46 -9
- package/lib-commonjs/createArrowStyles.js +46 -29
- package/lib-commonjs/createArrowStyles.js.map +1 -1
- package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/isIntersectingModifier.d.ts +4 -0
- package/lib-commonjs/isIntersectingModifier.js +34 -0
- package/lib-commonjs/isIntersectingModifier.js.map +1 -0
- package/lib-commonjs/types.d.ts +28 -7
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePopper.d.ts +2 -14
- package/lib-commonjs/usePopper.js +44 -36
- package/lib-commonjs/usePopper.js.map +1 -1
- package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
- package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
- package/lib-commonjs/utils/getBoundary.js.map +1 -1
- package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
- package/lib-commonjs/utils/getScrollParent.js.map +1 -1
- package/lib-commonjs/utils/index.js.map +1 -1
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
- package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,23 +2,128 @@
|
|
|
2
2
|
"name": "@fluentui/react-positioning",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-positioning_v0.0.0-
|
|
7
|
-
"version": "0.0.0-
|
|
5
|
+
"date": "Tue, 01 Mar 2022 04:15:00 GMT",
|
|
6
|
+
"tag": "@fluentui/react-positioning_v0.0.0-nightly695230dc7220220301.1",
|
|
7
|
+
"version": "0.0.0-nightly695230dc7220220301.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
11
11
|
"author": "email not defined",
|
|
12
12
|
"package": "@fluentui/react-positioning",
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "be1864c428aedd3bb265318a6cb6cf161ded2472",
|
|
14
14
|
"comment": "Release nightly v9"
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-positioning",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly695230dc7220220301.1",
|
|
20
|
+
"commit": "be1864c428aedd3bb265318a6cb6cf161ded2472"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-positioning",
|
|
25
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly695230dc7220220301.1",
|
|
26
|
+
"commit": "be1864c428aedd3bb265318a6cb6cf161ded2472"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-positioning",
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly695230dc7220220301.1",
|
|
32
|
+
"commit": "be1864c428aedd3bb265318a6cb6cf161ded2472"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Tue, 01 Mar 2022 02:17:38 GMT",
|
|
39
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.4",
|
|
40
|
+
"version": "9.0.0-rc.4",
|
|
41
|
+
"comments": {
|
|
42
|
+
"prerelease": [
|
|
43
|
+
{
|
|
44
|
+
"author": "olfedias@microsoft.com",
|
|
45
|
+
"package": "@fluentui/react-positioning",
|
|
46
|
+
"commit": "def76fff08777fcd5492f47824b943bab22d4515",
|
|
47
|
+
"comment": "feat: add isIntersectingModifier to usePopper"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "olfedias@microsoft.com",
|
|
51
|
+
"package": "@fluentui/react-positioning",
|
|
52
|
+
"commit": "084d7408855f3e52b67cbca172da1acef9dcb98f",
|
|
53
|
+
"comment": "fix: Add react-theme as dependency"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-positioning",
|
|
58
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
|
|
59
|
+
"commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
|
|
60
|
+
}
|
|
61
|
+
]
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"date": "Fri, 18 Feb 2022 13:35:33 GMT",
|
|
66
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.3",
|
|
67
|
+
"version": "9.0.0-rc.3",
|
|
68
|
+
"comments": {
|
|
69
|
+
"prerelease": [
|
|
70
|
+
{
|
|
71
|
+
"author": "lingfangao@hotmail.com",
|
|
72
|
+
"package": "@fluentui/react-positioning",
|
|
73
|
+
"commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
|
|
74
|
+
"comment": "fix: Source maps contain original source code"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"author": "beachball",
|
|
78
|
+
"package": "@fluentui/react-positioning",
|
|
79
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.3",
|
|
80
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"author": "beachball",
|
|
84
|
+
"package": "@fluentui/react-positioning",
|
|
85
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
|
|
86
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"date": "Thu, 10 Feb 2022 08:50:40 GMT",
|
|
93
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.1",
|
|
94
|
+
"version": "9.0.0-rc.1",
|
|
95
|
+
"comments": {
|
|
96
|
+
"prerelease": [
|
|
16
97
|
{
|
|
17
98
|
"author": "olfedias@microsoft.com",
|
|
18
99
|
"package": "@fluentui/react-positioning",
|
|
19
100
|
"commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
|
|
20
101
|
"comment": "use new types from makeStyles core"
|
|
21
102
|
},
|
|
103
|
+
{
|
|
104
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
105
|
+
"package": "@fluentui/react-positioning",
|
|
106
|
+
"commit": "db6526ee2d04991e4473174969e3795299b52f9e",
|
|
107
|
+
"comment": "Replacing use of functions in makeStyles with direct use of tokens."
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
"author": "behowell@microsoft.com",
|
|
111
|
+
"package": "@fluentui/react-positioning",
|
|
112
|
+
"commit": "2e34c026a354af1bbfe6a5ead1ade41348d5488f",
|
|
113
|
+
"comment": "Fix tooltip arrow's high contrast border in RTL"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"author": "olfedias@microsoft.com",
|
|
117
|
+
"package": "@fluentui/react-positioning",
|
|
118
|
+
"commit": "523b5785eafd28cf56b677af40274cefe5d42dcb",
|
|
119
|
+
"comment": "use Griffel packages"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"author": "lingfangao@hotmail.com",
|
|
123
|
+
"package": "@fluentui/react-positioning",
|
|
124
|
+
"commit": "a548a59bd94f9c4b656da3bdd149db7ac2de726f",
|
|
125
|
+
"comment": "feat: Imperative `setTarget` for `usePopper` and `positioning`"
|
|
126
|
+
},
|
|
22
127
|
{
|
|
23
128
|
"author": "bsunderhus@microsoft.com",
|
|
24
129
|
"package": "@fluentui/react-positioning",
|
|
@@ -32,28 +137,42 @@
|
|
|
32
137
|
"comment": "update styles to not use CSS shorthands"
|
|
33
138
|
},
|
|
34
139
|
{
|
|
35
|
-
"author": "
|
|
140
|
+
"author": "lingfangao@hotmail.com",
|
|
36
141
|
"package": "@fluentui/react-positioning",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
142
|
+
"commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
|
|
143
|
+
"comment": "Bump Fluent UI packages to 9.0.0-rc"
|
|
39
144
|
},
|
|
40
145
|
{
|
|
41
|
-
"author": "
|
|
146
|
+
"author": "behowell@microsoft.com",
|
|
42
147
|
"package": "@fluentui/react-positioning",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
148
|
+
"commit": "09804275c7f346db54c33d4ff347bffc33676014",
|
|
149
|
+
"comment": "Fix popover arrow styling"
|
|
45
150
|
},
|
|
46
151
|
{
|
|
47
152
|
"author": "beachball",
|
|
48
153
|
"package": "@fluentui/react-positioning",
|
|
49
|
-
"comment": "Bump @fluentui/react-
|
|
50
|
-
"commit": "
|
|
154
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.1",
|
|
155
|
+
"commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
|
|
51
156
|
},
|
|
52
157
|
{
|
|
53
158
|
"author": "beachball",
|
|
54
159
|
"package": "@fluentui/react-positioning",
|
|
55
|
-
"comment": "Bump @fluentui/
|
|
56
|
-
"commit": "
|
|
160
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
|
|
161
|
+
"commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
|
|
162
|
+
}
|
|
163
|
+
],
|
|
164
|
+
"none": [
|
|
165
|
+
{
|
|
166
|
+
"author": "olfedias@microsoft.com",
|
|
167
|
+
"package": "@fluentui/react-positioning",
|
|
168
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
|
169
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"author": "martinhochel@microsoft.com",
|
|
173
|
+
"package": "@fluentui/react-positioning",
|
|
174
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
|
175
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
|
57
176
|
}
|
|
58
177
|
]
|
|
59
178
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,61 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 01 Mar 2022 04:15:00 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-
|
|
7
|
+
## [0.0.0-nightly695230dc7220220301.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly695230dc7220220301.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-
|
|
9
|
+
Tue, 01 Mar 2022 04:15:00 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.4..@fluentui/react-positioning_v0.0.0-nightly695230dc7220220301.1)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by email not defined)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly695230dc7220220301.1 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by beachball)
|
|
16
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly695230dc7220220301.1 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly695230dc7220220301.1 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.4)
|
|
20
|
+
|
|
21
|
+
Tue, 01 Mar 2022 02:17:38 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.3..@fluentui/react-positioning_v9.0.0-rc.4)
|
|
23
|
+
|
|
24
|
+
### Changes
|
|
25
|
+
|
|
26
|
+
- feat: add isIntersectingModifier to usePopper ([PR #21855](https://github.com/microsoft/fluentui/pull/21855) by olfedias@microsoft.com)
|
|
27
|
+
- fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
|
|
28
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) by beachball)
|
|
29
|
+
|
|
30
|
+
## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.3)
|
|
31
|
+
|
|
32
|
+
Fri, 18 Feb 2022 13:35:33 GMT
|
|
33
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.1..@fluentui/react-positioning_v9.0.0-rc.3)
|
|
34
|
+
|
|
35
|
+
### Changes
|
|
36
|
+
|
|
37
|
+
- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
|
|
38
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
39
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
40
|
+
|
|
41
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.1)
|
|
42
|
+
|
|
43
|
+
Thu, 10 Feb 2022 08:50:40 GMT
|
|
44
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v9.0.0-rc.1)
|
|
11
45
|
|
|
12
46
|
### Changes
|
|
13
47
|
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/77618a4c1c41ffdcf3d5d21ea90d20af614da6f1) by email not defined)
|
|
15
48
|
- use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
|
|
49
|
+
- 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)
|
|
50
|
+
- Fix tooltip arrow's high contrast border in RTL ([PR #21354](https://github.com/microsoft/fluentui/pull/21354) by behowell@microsoft.com)
|
|
51
|
+
- use Griffel packages ([PR #21421](https://github.com/microsoft/fluentui/pull/21421) by olfedias@microsoft.com)
|
|
52
|
+
- feat: Imperative `setTarget` for `usePopper` and `positioning` ([PR #21632](https://github.com/microsoft/fluentui/pull/21632) by lingfangao@hotmail.com)
|
|
16
53
|
- Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
|
|
17
54
|
- update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
|
|
18
|
-
- Bump
|
|
19
|
-
-
|
|
20
|
-
- Bump @fluentui/react-
|
|
21
|
-
- Bump @fluentui/
|
|
55
|
+
- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
|
|
56
|
+
- Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
|
|
57
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
|
58
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
|
22
59
|
|
|
23
60
|
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
|
|
24
61
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { GriffelStyle } from '@griffel/react';
|
|
2
2
|
import * as PopperJs from '@popperjs/core';
|
|
3
3
|
import * as React_2 from 'react';
|
|
4
|
-
import type { Theme } from '@fluentui/react-theme';
|
|
5
4
|
|
|
6
5
|
export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
|
|
7
6
|
|
|
@@ -9,31 +8,71 @@ export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-alw
|
|
|
9
8
|
|
|
10
9
|
export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
|
|
11
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
|
+
|
|
12
22
|
/**
|
|
13
23
|
* Helper that creates a makeStyles rule for an arrow element.
|
|
14
24
|
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
|
15
25
|
*
|
|
16
26
|
* ```ts
|
|
17
27
|
* makeStyles({
|
|
18
|
-
* arrowWithSize: createArrowStyles(
|
|
28
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
|
19
29
|
*
|
|
20
|
-
* arrowWithoutSize: createArrowStyles(),
|
|
21
|
-
* mediumArrow:
|
|
22
|
-
* smallArrow:
|
|
30
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
|
31
|
+
* mediumArrow: createArrowHeightStyles(4),
|
|
32
|
+
* smallArrow: createArrowHeightStyles(2),
|
|
23
33
|
* })
|
|
24
34
|
* ...
|
|
25
35
|
*
|
|
26
|
-
* state.arrowWithSize.className = styles.arrowWithSize
|
|
36
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
|
27
37
|
* state.arrowWithoutSize.className = mergeClasses(
|
|
28
38
|
* styles.arrowWithoutSize,
|
|
29
39
|
* state.smallArrow && styles.smallArrow,
|
|
30
40
|
* state.mediumArrow && styles.mediumArrow,
|
|
31
41
|
* )
|
|
32
42
|
* ```
|
|
33
|
-
*
|
|
34
|
-
* @param size - dimensions of the square arrow element in pixels.
|
|
35
43
|
*/
|
|
36
|
-
export declare function createArrowStyles(
|
|
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
|
+
};
|
|
37
76
|
|
|
38
77
|
/**
|
|
39
78
|
* Creates a virtual element based on the position of a click event
|
|
@@ -61,42 +100,13 @@ export declare type OffsetFunctionParam = {
|
|
|
61
100
|
placement: PopperJs.Placement;
|
|
62
101
|
};
|
|
63
102
|
|
|
64
|
-
declare interface PopperOptions
|
|
65
|
-
/**
|
|
66
|
-
* If false, delays Popper's creation.
|
|
67
|
-
* @default true
|
|
68
|
-
*/
|
|
69
|
-
enabled?: boolean;
|
|
70
|
-
onStateUpdate?: (state: Partial<PopperJs.State>) => void;
|
|
71
|
-
/**
|
|
72
|
-
* Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
|
|
73
|
-
* @default false
|
|
74
|
-
*/
|
|
75
|
-
positionFixed?: boolean;
|
|
76
|
-
/**
|
|
77
|
-
* When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
|
|
78
|
-
* "all" enables this behavior for all axis.
|
|
79
|
-
*/
|
|
80
|
-
unstable_disableTether?: boolean | 'all';
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export declare type PopperRefHandle = {
|
|
84
|
-
updatePosition: () => void;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
export declare type PopperVirtualElement = PopperJs.VirtualElement;
|
|
88
|
-
|
|
89
|
-
export declare type Position = 'above' | 'below' | 'before' | 'after';
|
|
90
|
-
|
|
91
|
-
export declare interface PositioningProps {
|
|
103
|
+
export declare interface PopperOptions {
|
|
92
104
|
/** Alignment for the component. Only has an effect if used with the @see position option */
|
|
93
105
|
align?: Alignment;
|
|
94
106
|
/** The element which will define the boundaries of the popper position for the flip behavior. */
|
|
95
107
|
flipBoundary?: Boundary;
|
|
96
108
|
/** The element which will define the boundaries of the popper position for the overflow behavior. */
|
|
97
109
|
overflowBoundary?: Boundary;
|
|
98
|
-
/** An imperative handle to Popper methods. */
|
|
99
|
-
popperRef?: React_2.Ref<PopperRefHandle>;
|
|
100
110
|
/**
|
|
101
111
|
* Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
|
|
102
112
|
* and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
|
|
@@ -104,6 +114,11 @@ export declare interface PositioningProps {
|
|
|
104
114
|
* then provided value for 'align' will be ignored and 'center' will be used instead.
|
|
105
115
|
*/
|
|
106
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;
|
|
107
122
|
/**
|
|
108
123
|
* Lets you displace a popper element from its reference element.
|
|
109
124
|
* This can be useful if you need to apply some margin between them or if you need to fine tune the
|
|
@@ -123,10 +138,6 @@ export declare interface PositioningProps {
|
|
|
123
138
|
* `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
|
|
124
139
|
*/
|
|
125
140
|
autoSize?: AutoSize;
|
|
126
|
-
/**
|
|
127
|
-
* Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
|
|
128
|
-
*/
|
|
129
|
-
target?: HTMLElement | PopperVirtualElement | null;
|
|
130
141
|
/**
|
|
131
142
|
* Modifies position and alignment to cover the target
|
|
132
143
|
*/
|
|
@@ -136,6 +147,37 @@ export declare interface PositioningProps {
|
|
|
136
147
|
* `position` props, regardless of the size of the component, the reference element or the viewport.
|
|
137
148
|
*/
|
|
138
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;
|
|
139
181
|
}
|
|
140
182
|
|
|
141
183
|
export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
|
|
@@ -152,7 +194,7 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
|
|
|
152
194
|
* - contains a specific to React fix related to initial positioning when containers have components with managed focus
|
|
153
195
|
* to avoid focus jumps
|
|
154
196
|
*/
|
|
155
|
-
export declare function usePopper(options?:
|
|
197
|
+
export declare function usePopper(options?: UsePopperOptions): {
|
|
156
198
|
targetRef: React_2.MutableRefObject<any>;
|
|
157
199
|
containerRef: React_2.MutableRefObject<any>;
|
|
158
200
|
arrowRef: React_2.MutableRefObject<any>;
|
|
@@ -168,4 +210,12 @@ export declare function usePopper(options?: PopperOptions): {
|
|
|
168
210
|
*/
|
|
169
211
|
export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
|
|
170
212
|
|
|
213
|
+
declare interface UsePopperOptions extends PositioningProps {
|
|
214
|
+
/**
|
|
215
|
+
* If false, delays Popper's creation.
|
|
216
|
+
* @default true
|
|
217
|
+
*/
|
|
218
|
+
enabled?: boolean;
|
|
219
|
+
}
|
|
220
|
+
|
|
171
221
|
export { }
|
|
@@ -1,27 +1,64 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
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
|
+
};
|
|
3
32
|
/**
|
|
4
33
|
* Helper that creates a makeStyles rule for an arrow element.
|
|
5
34
|
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
|
6
35
|
*
|
|
7
36
|
* ```ts
|
|
8
37
|
* makeStyles({
|
|
9
|
-
* arrowWithSize: createArrowStyles(
|
|
38
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
|
10
39
|
*
|
|
11
|
-
* arrowWithoutSize: createArrowStyles(),
|
|
12
|
-
* mediumArrow:
|
|
13
|
-
* smallArrow:
|
|
40
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
|
41
|
+
* mediumArrow: createArrowHeightStyles(4),
|
|
42
|
+
* smallArrow: createArrowHeightStyles(2),
|
|
14
43
|
* })
|
|
15
44
|
* ...
|
|
16
45
|
*
|
|
17
|
-
* state.arrowWithSize.className = styles.arrowWithSize
|
|
46
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
|
18
47
|
* state.arrowWithoutSize.className = mergeClasses(
|
|
19
48
|
* styles.arrowWithoutSize,
|
|
20
49
|
* state.smallArrow && styles.smallArrow,
|
|
21
50
|
* state.mediumArrow && styles.mediumArrow,
|
|
22
51
|
* )
|
|
23
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.
|
|
24
57
|
*
|
|
25
|
-
*
|
|
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.
|
|
26
60
|
*/
|
|
27
|
-
export declare function
|
|
61
|
+
export declare function createArrowHeightStyles(arrowHeight: number): {
|
|
62
|
+
width: string;
|
|
63
|
+
height: string;
|
|
64
|
+
};
|
package/lib/createArrowStyles.js
CHANGED
|
@@ -1,73 +1,87 @@
|
|
|
1
|
-
import { shorthands } from '@
|
|
1
|
+
import { shorthands } from '@griffel/react';
|
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
|
2
3
|
/**
|
|
3
4
|
* Helper that creates a makeStyles rule for an arrow element.
|
|
4
5
|
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
|
5
6
|
*
|
|
6
7
|
* ```ts
|
|
7
8
|
* makeStyles({
|
|
8
|
-
* arrowWithSize: createArrowStyles(
|
|
9
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
|
9
10
|
*
|
|
10
|
-
* arrowWithoutSize: createArrowStyles(),
|
|
11
|
-
* mediumArrow:
|
|
12
|
-
* smallArrow:
|
|
11
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
|
12
|
+
* mediumArrow: createArrowHeightStyles(4),
|
|
13
|
+
* smallArrow: createArrowHeightStyles(2),
|
|
13
14
|
* })
|
|
14
15
|
* ...
|
|
15
16
|
*
|
|
16
|
-
* state.arrowWithSize.className = styles.arrowWithSize
|
|
17
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
|
17
18
|
* state.arrowWithoutSize.className = mergeClasses(
|
|
18
19
|
* styles.arrowWithoutSize,
|
|
19
20
|
* state.smallArrow && styles.smallArrow,
|
|
20
21
|
* state.mediumArrow && styles.mediumArrow,
|
|
21
22
|
* )
|
|
22
23
|
* ```
|
|
23
|
-
*
|
|
24
|
-
* @param size - dimensions of the square arrow element in pixels.
|
|
25
24
|
*/
|
|
26
25
|
|
|
27
|
-
export function createArrowStyles(
|
|
28
|
-
|
|
26
|
+
export function createArrowStyles(options) {
|
|
27
|
+
const {
|
|
28
|
+
arrowHeight,
|
|
29
|
+
borderWidth = '1px',
|
|
30
|
+
borderStyle = 'solid',
|
|
31
|
+
borderColor = tokens.colorTransparentStroke
|
|
32
|
+
} = options;
|
|
33
|
+
return {
|
|
29
34
|
position: 'absolute',
|
|
30
35
|
backgroundColor: 'inherit',
|
|
31
36
|
visibility: 'hidden',
|
|
32
37
|
zIndex: -1,
|
|
33
|
-
...(
|
|
34
|
-
aspectRatio: '1',
|
|
35
|
-
width: `${size}px`
|
|
36
|
-
}),
|
|
38
|
+
...(arrowHeight && createArrowHeightStyles(arrowHeight)),
|
|
37
39
|
':before': {
|
|
38
40
|
content: '""',
|
|
39
|
-
|
|
41
|
+
visibility: 'visible',
|
|
40
42
|
position: 'absolute',
|
|
43
|
+
boxSizing: 'border-box',
|
|
41
44
|
width: 'inherit',
|
|
42
45
|
height: 'inherit',
|
|
43
46
|
backgroundColor: 'inherit',
|
|
44
|
-
|
|
45
|
-
|
|
47
|
+
...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
|
|
48
|
+
...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
|
|
49
|
+
borderBottomRightRadius: tokens.borderRadiusSmall,
|
|
46
50
|
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
|
47
51
|
},
|
|
48
|
-
':global([data-popper-placement])': {
|
|
49
|
-
':before': { // Special border for High Contrast mode
|
|
50
|
-
...shorthands.borderRight('1px', 'solid', 'transparent'),
|
|
51
|
-
...shorthands.borderBottom('1px', 'solid', 'transparent')
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
52
|
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
|
55
53
|
':global([data-popper-placement^="top"])': {
|
|
56
|
-
bottom:
|
|
54
|
+
bottom: `-${borderWidth}`,
|
|
57
55
|
'--angle': '0'
|
|
58
56
|
},
|
|
59
57
|
':global([data-popper-placement^="right"])': {
|
|
60
|
-
left:
|
|
58
|
+
left: `-${borderWidth} /* @noflip */`,
|
|
61
59
|
'--angle': '90deg'
|
|
62
60
|
},
|
|
63
61
|
':global([data-popper-placement^="bottom"])': {
|
|
64
|
-
top:
|
|
62
|
+
top: `-${borderWidth}`,
|
|
65
63
|
'--angle': '180deg'
|
|
66
64
|
},
|
|
67
65
|
':global([data-popper-placement^="left"])': {
|
|
68
|
-
right:
|
|
66
|
+
right: `-${borderWidth} /* @noflip */`,
|
|
69
67
|
'--angle': '270deg'
|
|
70
68
|
}
|
|
71
|
-
}
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Creates CSS styles to size the arrow created by createArrowStyles to the given height.
|
|
73
|
+
*
|
|
74
|
+
* Use this when you need to create classes for several different arrow sizes. If you only need a
|
|
75
|
+
* constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
|
|
76
|
+
*/
|
|
77
|
+
|
|
78
|
+
export function createArrowHeightStyles(arrowHeight) {
|
|
79
|
+
// The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
|
|
80
|
+
// Multiply the triangle's height by sqrt(2) to get length of its edges.
|
|
81
|
+
const edgeLength = `${1.414 * arrowHeight}px`;
|
|
82
|
+
return {
|
|
83
|
+
width: edgeLength,
|
|
84
|
+
height: edgeLength
|
|
85
|
+
};
|
|
72
86
|
}
|
|
73
87
|
//# sourceMappingURL=createArrowStyles.js.map
|