@fluentui/react-positioning 0.0.0-nightlyf3ce1fbe1d20211110.1 → 0.0.0-nightlyf6116328d620220124.1
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +146 -8
- package/CHANGELOG.md +38 -7
- package/dist/react-positioning.d.ts +67 -0
- 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/usePopper.js +362 -312
- 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.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/mergeArrowOffset.js +29 -24
- package/lib/utils/mergeArrowOffset.js.map +1 -1
- package/lib/utils/positioningHelper.d.ts +2 -2
- package/lib/utils/positioningHelper.js +38 -30
- package/lib/utils/positioningHelper.js.map +1 -1
- package/lib/utils/resolvePositioningShorthand.js +57 -19
- 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.js +4 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/usePopper.js +376 -316
- 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.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 +35 -25
- package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
- package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
- package/lib-commonjs/utils/positioningHelper.js +46 -31
- package/lib-commonjs/utils/positioningHelper.js.map +1 -1
- package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
- 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 +9 -9
package/CHANGELOG.json
CHANGED
@@ -2,17 +2,147 @@
|
|
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": "Mon, 24 Jan 2022 04:14:08 GMT",
|
6
|
+
"tag": "@fluentui/react-positioning_v0.0.0-nightlyf6116328d620220124.1",
|
7
|
+
"version": "0.0.0-nightlyf6116328d620220124.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": "7e40e770b133f0e9b5a0ba356e78ea25a8647941",
|
14
14
|
"comment": "Release nightly v9"
|
15
15
|
},
|
16
|
+
{
|
17
|
+
"author": "olfedias@microsoft.com",
|
18
|
+
"package": "@fluentui/react-positioning",
|
19
|
+
"commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
|
20
|
+
"comment": "use new types from makeStyles core"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
24
|
+
"package": "@fluentui/react-positioning",
|
25
|
+
"commit": "db6526ee2d04991e4473174969e3795299b52f9e",
|
26
|
+
"comment": "Replacing use of functions in makeStyles with direct use of tokens."
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "behowell@microsoft.com",
|
30
|
+
"package": "@fluentui/react-positioning",
|
31
|
+
"commit": "2e34c026a354af1bbfe6a5ead1ade41348d5488f",
|
32
|
+
"comment": "Fix tooltip arrow's high contrast border in RTL"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "bsunderhus@microsoft.com",
|
36
|
+
"package": "@fluentui/react-positioning",
|
37
|
+
"commit": "e382ad22539fc97bb283ca4ed856e126c7477e89",
|
38
|
+
"comment": "Adds @noflip annotation to data-popper-placement styles"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "olfedias@microsoft.com",
|
42
|
+
"package": "@fluentui/react-positioning",
|
43
|
+
"commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
|
44
|
+
"comment": "update styles to not use CSS shorthands"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "behowell@microsoft.com",
|
48
|
+
"package": "@fluentui/react-positioning",
|
49
|
+
"commit": "09804275c7f346db54c33d4ff347bffc33676014",
|
50
|
+
"comment": "Fix popover arrow styling"
|
51
|
+
},
|
52
|
+
{
|
53
|
+
"author": "beachball",
|
54
|
+
"package": "@fluentui/react-positioning",
|
55
|
+
"comment": "Bump @fluentui/react-make-styles to v0.0.0-nightlyf6116328d620220124.1",
|
56
|
+
"commit": "7e40e770b133f0e9b5a0ba356e78ea25a8647941"
|
57
|
+
},
|
58
|
+
{
|
59
|
+
"author": "beachball",
|
60
|
+
"package": "@fluentui/react-positioning",
|
61
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlyf6116328d620220124.1",
|
62
|
+
"commit": "7e40e770b133f0e9b5a0ba356e78ea25a8647941"
|
63
|
+
},
|
64
|
+
{
|
65
|
+
"author": "beachball",
|
66
|
+
"package": "@fluentui/react-positioning",
|
67
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightlyf6116328d620220124.1",
|
68
|
+
"commit": "7e40e770b133f0e9b5a0ba356e78ea25a8647941"
|
69
|
+
},
|
70
|
+
{
|
71
|
+
"author": "beachball",
|
72
|
+
"package": "@fluentui/react-positioning",
|
73
|
+
"comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightlyf6116328d620220124.1",
|
74
|
+
"commit": "7e40e770b133f0e9b5a0ba356e78ea25a8647941"
|
75
|
+
}
|
76
|
+
],
|
77
|
+
"none": [
|
78
|
+
{
|
79
|
+
"author": "olfedias@microsoft.com",
|
80
|
+
"package": "@fluentui/react-positioning",
|
81
|
+
"commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
|
82
|
+
"comment": "remove inline-style-expand-shorthand from tsconfigs"
|
83
|
+
},
|
84
|
+
{
|
85
|
+
"author": "martinhochel@microsoft.com",
|
86
|
+
"package": "@fluentui/react-positioning",
|
87
|
+
"commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
|
88
|
+
"comment": "chore: use storybook runner for all vNext packages"
|
89
|
+
}
|
90
|
+
]
|
91
|
+
}
|
92
|
+
},
|
93
|
+
{
|
94
|
+
"date": "Thu, 25 Nov 2021 08:34:15 GMT",
|
95
|
+
"tag": "@fluentui/react-positioning_v9.0.0-beta.4",
|
96
|
+
"version": "9.0.0-beta.4",
|
97
|
+
"comments": {
|
98
|
+
"none": [
|
99
|
+
{
|
100
|
+
"author": "lingfangao@hotmail.com",
|
101
|
+
"package": "@fluentui/react-positioning",
|
102
|
+
"commit": "718e63006d8d07d24efab9c32942041963d78dc7",
|
103
|
+
"comment": "Migrate package to use solution style ts-configs"
|
104
|
+
}
|
105
|
+
],
|
106
|
+
"prerelease": [
|
107
|
+
{
|
108
|
+
"author": "lingfangao@hotmail.com",
|
109
|
+
"package": "@fluentui/react-positioning",
|
110
|
+
"commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
|
111
|
+
"comment": "Add utility function to create styles for an arrow element"
|
112
|
+
},
|
113
|
+
{
|
114
|
+
"author": "beachball",
|
115
|
+
"package": "@fluentui/react-positioning",
|
116
|
+
"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
|
117
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
118
|
+
},
|
119
|
+
{
|
120
|
+
"author": "beachball",
|
121
|
+
"package": "@fluentui/react-positioning",
|
122
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
|
123
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
124
|
+
},
|
125
|
+
{
|
126
|
+
"author": "beachball",
|
127
|
+
"package": "@fluentui/react-positioning",
|
128
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
|
129
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
130
|
+
},
|
131
|
+
{
|
132
|
+
"author": "beachball",
|
133
|
+
"package": "@fluentui/react-positioning",
|
134
|
+
"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
|
135
|
+
"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
|
136
|
+
}
|
137
|
+
]
|
138
|
+
}
|
139
|
+
},
|
140
|
+
{
|
141
|
+
"date": "Fri, 12 Nov 2021 13:25:30 GMT",
|
142
|
+
"tag": "@fluentui/react-positioning_v9.0.0-beta.3",
|
143
|
+
"version": "9.0.0-beta.3",
|
144
|
+
"comments": {
|
145
|
+
"prerelease": [
|
16
146
|
{
|
17
147
|
"author": "gcox@microsoft.com",
|
18
148
|
"package": "@fluentui/react-positioning",
|
@@ -22,14 +152,22 @@
|
|
22
152
|
{
|
23
153
|
"author": "beachball",
|
24
154
|
"package": "@fluentui/react-positioning",
|
25
|
-
"comment": "Bump @fluentui/react-shared-contexts to
|
26
|
-
"commit": "
|
155
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.3",
|
156
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
27
157
|
},
|
28
158
|
{
|
29
159
|
"author": "beachball",
|
30
160
|
"package": "@fluentui/react-positioning",
|
31
|
-
"comment": "Bump @fluentui/react-utilities to
|
32
|
-
"commit": "
|
161
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.3",
|
162
|
+
"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
|
163
|
+
}
|
164
|
+
],
|
165
|
+
"none": [
|
166
|
+
{
|
167
|
+
"author": "lingfangao@hotmail.com",
|
168
|
+
"package": "@fluentui/react-positioning",
|
169
|
+
"commit": "00f70581480b536e723fb69edf0ae617beac4807",
|
170
|
+
"comment": "Remove beta release tag"
|
33
171
|
}
|
34
172
|
]
|
35
173
|
}
|
package/CHANGELOG.md
CHANGED
@@ -1,20 +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 Mon, 24 Jan 2022 04:14:08 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
-
## [0.0.0-
|
7
|
+
## [0.0.0-nightlyf6116328d620220124.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightlyf6116328d620220124.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.
|
9
|
+
Mon, 24 Jan 2022 04:14:08 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightlyf6116328d620220124.1)
|
11
|
+
|
12
|
+
### Changes
|
13
|
+
|
14
|
+
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/7e40e770b133f0e9b5a0ba356e78ea25a8647941) by email not defined)
|
15
|
+
- use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
|
16
|
+
- 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)
|
17
|
+
- Fix tooltip arrow's high contrast border in RTL ([PR #21354](https://github.com/microsoft/fluentui/pull/21354) by behowell@microsoft.com)
|
18
|
+
- Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
|
19
|
+
- update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
|
20
|
+
- Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
|
21
|
+
- Bump @fluentui/react-make-styles to v0.0.0-nightlyf6116328d620220124.1 ([commit](https://github.com/microsoft/fluentui/commit/7e40e770b133f0e9b5a0ba356e78ea25a8647941) by beachball)
|
22
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightlyf6116328d620220124.1 ([commit](https://github.com/microsoft/fluentui/commit/7e40e770b133f0e9b5a0ba356e78ea25a8647941) by beachball)
|
23
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightlyf6116328d620220124.1 ([commit](https://github.com/microsoft/fluentui/commit/7e40e770b133f0e9b5a0ba356e78ea25a8647941) by beachball)
|
24
|
+
- Bump @fluentui/babel-make-styles to v0.0.0-nightlyf6116328d620220124.1 ([commit](https://github.com/microsoft/fluentui/commit/7e40e770b133f0e9b5a0ba356e78ea25a8647941) by beachball)
|
25
|
+
|
26
|
+
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
|
27
|
+
|
28
|
+
Thu, 25 Nov 2021 08:34:15 GMT
|
29
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v9.0.0-beta.4)
|
30
|
+
|
31
|
+
### Changes
|
32
|
+
|
33
|
+
- Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by lingfangao@hotmail.com)
|
34
|
+
- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
35
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
36
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
37
|
+
- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
|
38
|
+
|
39
|
+
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)
|
40
|
+
|
41
|
+
Fri, 12 Nov 2021 13:25:30 GMT
|
42
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v9.0.0-beta.3)
|
11
43
|
|
12
44
|
### Changes
|
13
45
|
|
14
|
-
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/c7a7f2302f3cfcbc6cd026f4d0ee4d5a2810371a) by email not defined)
|
15
46
|
- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
|
16
|
-
- Bump @fluentui/react-shared-contexts to
|
17
|
-
- Bump @fluentui/react-utilities to
|
47
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
48
|
+
- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
|
18
49
|
|
19
50
|
## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.2)
|
20
51
|
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import type { MakeStylesStyle } from '@fluentui/react-make-styles';
|
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): MakeStylesStyle;
|
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?: MakeStylesStyle['borderBottomWidth'];
|
63
|
+
/**
|
64
|
+
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
65
|
+
*
|
66
|
+
* @defaultvalue solid
|
67
|
+
*/
|
68
|
+
borderStyle?: MakeStylesStyle['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?: MakeStylesStyle['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
|
@@ -0,0 +1,64 @@
|
|
1
|
+
import type { MakeStylesStyle } from '@fluentui/react-make-styles';
|
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?: MakeStylesStyle['borderBottomWidth'];
|
19
|
+
/**
|
20
|
+
* The borderStyle for the arrow. Should be the same borderStyle as the parent element.
|
21
|
+
*
|
22
|
+
* @defaultvalue solid
|
23
|
+
*/
|
24
|
+
borderStyle?: MakeStylesStyle['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?: MakeStylesStyle['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): MakeStylesStyle;
|
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
|
+
};
|
@@ -0,0 +1,87 @@
|
|
1
|
+
import { shorthands } from '@fluentui/react-make-styles';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
/**
|
4
|
+
* Helper that creates a makeStyles rule for an arrow element.
|
5
|
+
* For runtime arrow size toggling simply create extra classnames to apply to the arrow element
|
6
|
+
*
|
7
|
+
* ```ts
|
8
|
+
* makeStyles({
|
9
|
+
* arrowWithSize: createArrowStyles({ arrowHeight: 6 }),
|
10
|
+
*
|
11
|
+
* arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
|
12
|
+
* mediumArrow: createArrowHeightStyles(4),
|
13
|
+
* smallArrow: createArrowHeightStyles(2),
|
14
|
+
* })
|
15
|
+
* ...
|
16
|
+
*
|
17
|
+
* state.arrowWithSize.className = styles.arrowWithSize;
|
18
|
+
* state.arrowWithoutSize.className = mergeClasses(
|
19
|
+
* styles.arrowWithoutSize,
|
20
|
+
* state.smallArrow && styles.smallArrow,
|
21
|
+
* state.mediumArrow && styles.mediumArrow,
|
22
|
+
* )
|
23
|
+
* ```
|
24
|
+
*/
|
25
|
+
|
26
|
+
export function createArrowStyles(options) {
|
27
|
+
const {
|
28
|
+
arrowHeight,
|
29
|
+
borderWidth = '1px',
|
30
|
+
borderStyle = 'solid',
|
31
|
+
borderColor = tokens.colorTransparentStroke
|
32
|
+
} = options;
|
33
|
+
return {
|
34
|
+
position: 'absolute',
|
35
|
+
backgroundColor: 'inherit',
|
36
|
+
visibility: 'hidden',
|
37
|
+
zIndex: -1,
|
38
|
+
...(arrowHeight && createArrowHeightStyles(arrowHeight)),
|
39
|
+
':before': {
|
40
|
+
content: '""',
|
41
|
+
visibility: 'visible',
|
42
|
+
position: 'absolute',
|
43
|
+
boxSizing: 'border-box',
|
44
|
+
width: 'inherit',
|
45
|
+
height: 'inherit',
|
46
|
+
backgroundColor: 'inherit',
|
47
|
+
...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
|
48
|
+
...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
|
49
|
+
borderBottomRightRadius: tokens.borderRadiusSmall,
|
50
|
+
transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
|
51
|
+
},
|
52
|
+
// Popper sets data-popper-placement on the root element, which is used to align the arrow
|
53
|
+
':global([data-popper-placement^="top"])': {
|
54
|
+
bottom: `-${borderWidth}`,
|
55
|
+
'--angle': '0'
|
56
|
+
},
|
57
|
+
':global([data-popper-placement^="right"])': {
|
58
|
+
left: `-${borderWidth} /* @noflip */`,
|
59
|
+
'--angle': '90deg'
|
60
|
+
},
|
61
|
+
':global([data-popper-placement^="bottom"])': {
|
62
|
+
top: `-${borderWidth}`,
|
63
|
+
'--angle': '180deg'
|
64
|
+
},
|
65
|
+
':global([data-popper-placement^="left"])': {
|
66
|
+
right: `-${borderWidth} /* @noflip */`,
|
67
|
+
'--angle': '270deg'
|
68
|
+
}
|
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
|
+
};
|
86
|
+
}
|
87
|
+
//# sourceMappingURL=createArrowStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,6BAA3B;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","sourceRoot":""}
|
@@ -3,22 +3,24 @@
|
|
3
3
|
* Can be used as a target for popper in scenarios such as context menus
|
4
4
|
*/
|
5
5
|
export function createVirtualElementFromClick(nativeEvent) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
left,
|
13
|
-
top,
|
14
|
-
right,
|
15
|
-
bottom,
|
16
|
-
height: 1,
|
17
|
-
width: 1,
|
18
|
-
};
|
19
|
-
}
|
6
|
+
const left = nativeEvent.clientX;
|
7
|
+
const top = nativeEvent.clientY;
|
8
|
+
const right = left + 1;
|
9
|
+
const bottom = top + 1;
|
10
|
+
|
11
|
+
function getBoundingClientRect() {
|
20
12
|
return {
|
21
|
-
|
13
|
+
left,
|
14
|
+
top,
|
15
|
+
right,
|
16
|
+
bottom,
|
17
|
+
height: 1,
|
18
|
+
width: 1
|
22
19
|
};
|
20
|
+
}
|
21
|
+
|
22
|
+
return {
|
23
|
+
getBoundingClientRect
|
24
|
+
};
|
23
25
|
}
|
24
26
|
//# sourceMappingURL=createVirtualElementFromClick.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD","sourceRoot":""}
|
package/lib/index.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
export * from './usePopper';
|
2
1
|
export * from './createVirtualElementFromClick';
|
2
|
+
export * from './createArrowStyles';
|
3
|
+
export * from './usePopper';
|
3
4
|
export * from './usePopperMouseTarget';
|
4
5
|
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
|
5
6
|
export * from './types';
|
package/lib/index.js
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
-
export * from './usePopper';
|
2
1
|
export * from './createVirtualElementFromClick';
|
2
|
+
export * from './createArrowStyles';
|
3
|
+
export * from './usePopper';
|
3
4
|
export * from './usePopperMouseTarget';
|
4
5
|
export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
|
5
6
|
export * from './types';
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC"}
|