@fluentui/react-positioning 0.0.0-nightly442708a36520211209.1 → 0.0.0-nightly49d3df438d20220225.1
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 +112 -14
- package/CHANGELOG.md +36 -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/types.d.ts +28 -7
- package/lib/types.js.map +1 -1
- package/lib/usePopper.d.ts +2 -14
- package/lib/usePopper.js +40 -34
- 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.d.ts +2 -2
- 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/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 +41 -35
- 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.d.ts +2 -2
- 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,107 @@
|
|
|
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": "Fri, 25 Feb 2022 04:15:11 GMT",
|
|
6
|
+
"tag": "@fluentui/react-positioning_v0.0.0-nightly49d3df438d20220225.1",
|
|
7
|
+
"version": "0.0.0-nightly49d3df438d20220225.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": "fa42aa937219511d0560d7d5deffb23bea6637e1",
|
|
14
14
|
"comment": "Release nightly v9"
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-positioning",
|
|
19
|
+
"commit": "084d7408855f3e52b67cbca172da1acef9dcb98f",
|
|
20
|
+
"comment": "fix: Add react-theme as dependency"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-positioning",
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly49d3df438d20220225.1",
|
|
26
|
+
"commit": "fa42aa937219511d0560d7d5deffb23bea6637e1"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-positioning",
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly49d3df438d20220225.1",
|
|
32
|
+
"commit": "fa42aa937219511d0560d7d5deffb23bea6637e1"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-positioning",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly49d3df438d20220225.1",
|
|
38
|
+
"commit": "fa42aa937219511d0560d7d5deffb23bea6637e1"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Fri, 18 Feb 2022 13:35:33 GMT",
|
|
45
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.3",
|
|
46
|
+
"version": "9.0.0-rc.3",
|
|
47
|
+
"comments": {
|
|
48
|
+
"prerelease": [
|
|
49
|
+
{
|
|
50
|
+
"author": "lingfangao@hotmail.com",
|
|
51
|
+
"package": "@fluentui/react-positioning",
|
|
52
|
+
"commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
|
|
53
|
+
"comment": "fix: Source maps contain original source code"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-positioning",
|
|
58
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.3",
|
|
59
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-positioning",
|
|
64
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
|
|
65
|
+
"commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"date": "Thu, 10 Feb 2022 08:50:40 GMT",
|
|
72
|
+
"tag": "@fluentui/react-positioning_v9.0.0-rc.1",
|
|
73
|
+
"version": "9.0.0-rc.1",
|
|
74
|
+
"comments": {
|
|
75
|
+
"prerelease": [
|
|
16
76
|
{
|
|
17
77
|
"author": "olfedias@microsoft.com",
|
|
18
78
|
"package": "@fluentui/react-positioning",
|
|
19
79
|
"commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
|
|
20
80
|
"comment": "use new types from makeStyles core"
|
|
21
81
|
},
|
|
82
|
+
{
|
|
83
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
84
|
+
"package": "@fluentui/react-positioning",
|
|
85
|
+
"commit": "db6526ee2d04991e4473174969e3795299b52f9e",
|
|
86
|
+
"comment": "Replacing use of functions in makeStyles with direct use of tokens."
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"author": "behowell@microsoft.com",
|
|
90
|
+
"package": "@fluentui/react-positioning",
|
|
91
|
+
"commit": "2e34c026a354af1bbfe6a5ead1ade41348d5488f",
|
|
92
|
+
"comment": "Fix tooltip arrow's high contrast border in RTL"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"author": "olfedias@microsoft.com",
|
|
96
|
+
"package": "@fluentui/react-positioning",
|
|
97
|
+
"commit": "523b5785eafd28cf56b677af40274cefe5d42dcb",
|
|
98
|
+
"comment": "use Griffel packages"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"author": "lingfangao@hotmail.com",
|
|
102
|
+
"package": "@fluentui/react-positioning",
|
|
103
|
+
"commit": "a548a59bd94f9c4b656da3bdd149db7ac2de726f",
|
|
104
|
+
"comment": "feat: Imperative `setTarget` for `usePopper` and `positioning`"
|
|
105
|
+
},
|
|
22
106
|
{
|
|
23
107
|
"author": "bsunderhus@microsoft.com",
|
|
24
108
|
"package": "@fluentui/react-positioning",
|
|
@@ -32,28 +116,42 @@
|
|
|
32
116
|
"comment": "update styles to not use CSS shorthands"
|
|
33
117
|
},
|
|
34
118
|
{
|
|
35
|
-
"author": "
|
|
119
|
+
"author": "lingfangao@hotmail.com",
|
|
36
120
|
"package": "@fluentui/react-positioning",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
121
|
+
"commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
|
|
122
|
+
"comment": "Bump Fluent UI packages to 9.0.0-rc"
|
|
39
123
|
},
|
|
40
124
|
{
|
|
41
|
-
"author": "
|
|
125
|
+
"author": "behowell@microsoft.com",
|
|
42
126
|
"package": "@fluentui/react-positioning",
|
|
43
|
-
"
|
|
44
|
-
"
|
|
127
|
+
"commit": "09804275c7f346db54c33d4ff347bffc33676014",
|
|
128
|
+
"comment": "Fix popover arrow styling"
|
|
45
129
|
},
|
|
46
130
|
{
|
|
47
131
|
"author": "beachball",
|
|
48
132
|
"package": "@fluentui/react-positioning",
|
|
49
|
-
"comment": "Bump @fluentui/react-
|
|
50
|
-
"commit": "
|
|
133
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.1",
|
|
134
|
+
"commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
|
|
51
135
|
},
|
|
52
136
|
{
|
|
53
137
|
"author": "beachball",
|
|
54
138
|
"package": "@fluentui/react-positioning",
|
|
55
|
-
"comment": "Bump @fluentui/
|
|
56
|
-
"commit": "
|
|
139
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
|
|
140
|
+
"commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
|
|
141
|
+
}
|
|
142
|
+
],
|
|
143
|
+
"none": [
|
|
144
|
+
{
|
|
145
|
+
"author": "olfedias@microsoft.com",
|
|
146
|
+
"package": "@fluentui/react-positioning",
|
|
147
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
|
148
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"author": "martinhochel@microsoft.com",
|
|
152
|
+
"package": "@fluentui/react-positioning",
|
|
153
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
|
154
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
|
57
155
|
}
|
|
58
156
|
]
|
|
59
157
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,51 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-positioning
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 25 Feb 2022 04:15:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-
|
|
7
|
+
## [0.0.0-nightly49d3df438d20220225.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly49d3df438d20220225.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-
|
|
9
|
+
Fri, 25 Feb 2022 04:15:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.3..@fluentui/react-positioning_v0.0.0-nightly49d3df438d20220225.1)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/fa42aa937219511d0560d7d5deffb23bea6637e1) by email not defined)
|
|
15
|
+
- fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly49d3df438d20220225.1 ([commit](https://github.com/microsoft/fluentui/commit/fa42aa937219511d0560d7d5deffb23bea6637e1) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly49d3df438d20220225.1 ([commit](https://github.com/microsoft/fluentui/commit/fa42aa937219511d0560d7d5deffb23bea6637e1) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly49d3df438d20220225.1 ([commit](https://github.com/microsoft/fluentui/commit/fa42aa937219511d0560d7d5deffb23bea6637e1) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.3)
|
|
21
|
+
|
|
22
|
+
Fri, 18 Feb 2022 13:35:33 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.1..@fluentui/react-positioning_v9.0.0-rc.3)
|
|
24
|
+
|
|
25
|
+
### Changes
|
|
26
|
+
|
|
27
|
+
- fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com)
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball)
|
|
30
|
+
|
|
31
|
+
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.1)
|
|
32
|
+
|
|
33
|
+
Thu, 10 Feb 2022 08:50:40 GMT
|
|
34
|
+
[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
35
|
|
|
12
36
|
### Changes
|
|
13
37
|
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/20c96796031556594c49a5171b45f4ed191b06d9) by email not defined)
|
|
15
38
|
- use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
|
|
39
|
+
- 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)
|
|
40
|
+
- Fix tooltip arrow's high contrast border in RTL ([PR #21354](https://github.com/microsoft/fluentui/pull/21354) by behowell@microsoft.com)
|
|
41
|
+
- use Griffel packages ([PR #21421](https://github.com/microsoft/fluentui/pull/21421) by olfedias@microsoft.com)
|
|
42
|
+
- feat: Imperative `setTarget` for `usePopper` and `positioning` ([PR #21632](https://github.com/microsoft/fluentui/pull/21632) by lingfangao@hotmail.com)
|
|
16
43
|
- Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
|
|
17
44
|
- 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/
|
|
45
|
+
- Bump Fluent UI packages to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com)
|
|
46
|
+
- Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
|
|
47
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
|
48
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball)
|
|
22
49
|
|
|
23
50
|
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
|
|
24
51
|
|
|
@@ -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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,MAAM,CAAC;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;AAaT,SAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;AAcT,MAAA,uBAAuB,EAAE,MAAM,CAAC,iBAdvB;AAeT,MAAA,SAAS,EAAE;AAfF,KARN;AA0BL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KA3BtC;AA+BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA/BxC;AAmCL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KAnCzC;AAuCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAvCvC,GAAP;AA4CD;AAED;;;;;AAKG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n /**\n * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n *\n * This can be undefined to leave out the arrow size styles. You must then add styles created by\n * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n */\n arrowHeight: number | undefined;\n\n /**\n * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n *\n * @defaultvalue 1px\n */\n borderWidth?: GriffelStyle['borderBottomWidth'];\n\n /**\n * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n *\n * @defaultvalue solid\n */\n borderStyle?: GriffelStyle['borderBottomStyle'];\n\n /**\n * The borderColor of the arrow. Should be the same borderColor as the parent element.\n *\n * @defaultvalue tokens.colorTransparentStroke\n */\n borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n * makeStyles({\n * arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n * arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n * mediumArrow: createArrowHeightStyles(4),\n * smallArrow: createArrowHeightStyles(2),\n * })\n * ...\n *\n * state.arrowWithSize.className = styles.arrowWithSize;\n * state.arrowWithoutSize.className = mergeClasses(\n * styles.arrowWithoutSize,\n * state.smallArrow && styles.smallArrow,\n * state.mediumArrow && styles.mediumArrow,\n * )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n const {\n arrowHeight,\n borderWidth = '1px',\n borderStyle = 'solid',\n borderColor = tokens.colorTransparentStroke,\n } = options;\n\n return {\n position: 'absolute',\n backgroundColor: 'inherit',\n visibility: 'hidden',\n zIndex: -1,\n\n ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n ':before': {\n content: '\"\"',\n visibility: 'visible',\n position: 'absolute',\n boxSizing: 'border-box',\n width: 'inherit',\n height: 'inherit',\n backgroundColor: 'inherit',\n ...shorthands.borderRight(\n `${borderWidth} /* @noflip */`,\n `${borderStyle} /* @noflip */`,\n `${borderColor} /* @noflip */`,\n ),\n ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n borderBottomRightRadius: tokens.borderRadiusSmall,\n transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n },\n\n // Popper sets data-popper-placement on the root element, which is used to align the arrow\n ':global([data-popper-placement^=\"top\"])': {\n bottom: `-${borderWidth}`,\n '--angle': '0',\n },\n ':global([data-popper-placement^=\"right\"])': {\n left: `-${borderWidth} /* @noflip */`,\n '--angle': '90deg',\n },\n ':global([data-popper-placement^=\"bottom\"])': {\n top: `-${borderWidth}`,\n '--angle': '180deg',\n },\n ':global([data-popper-placement^=\"left\"])': {\n right: `-${borderWidth} /* @noflip */`,\n '--angle': '270deg',\n },\n };\n}\n\n/**\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n // Multiply the triangle's height by sqrt(2) to get length of its edges.\n const edgeLength = `${1.414 * arrowHeight}px`;\n return { width: edgeLength, height: edgeLength };\n}\n"],"sourceRoot":"../src/"}
|