@fluentui/react-positioning 0.0.0-nightly0025eeb82020211108.1 → 0.0.0-nightly003de9a95220220111.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.
Files changed (66) hide show
  1. package/CHANGELOG.json +126 -8
  2. package/CHANGELOG.md +37 -7
  3. package/dist/react-positioning.d.ts +67 -0
  4. package/lib/createArrowStyles.d.ts +64 -0
  5. package/lib/createArrowStyles.js +87 -0
  6. package/lib/createArrowStyles.js.map +1 -0
  7. package/lib/createVirtualElementFromClick.js +17 -15
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/index.d.ts +2 -1
  10. package/lib/index.js +2 -1
  11. package/lib/index.js.map +1 -1
  12. package/lib/usePopper.js +362 -312
  13. package/lib/usePopper.js.map +1 -1
  14. package/lib/usePopperMouseTarget.js +28 -22
  15. package/lib/usePopperMouseTarget.js.map +1 -1
  16. package/lib/utils/getBasePlacement.js +1 -1
  17. package/lib/utils/getBasePlacement.js.map +1 -1
  18. package/lib/utils/getBoundary.js +15 -10
  19. package/lib/utils/getBoundary.js.map +1 -1
  20. package/lib/utils/getReactFiberFromNode.js +39 -35
  21. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  22. package/lib/utils/getScrollParent.js +46 -32
  23. package/lib/utils/getScrollParent.js.map +1 -1
  24. package/lib/utils/mergeArrowOffset.js +29 -24
  25. package/lib/utils/mergeArrowOffset.js.map +1 -1
  26. package/lib/utils/positioningHelper.d.ts +2 -2
  27. package/lib/utils/positioningHelper.js +38 -30
  28. package/lib/utils/positioningHelper.js.map +1 -1
  29. package/lib/utils/resolvePositioningShorthand.js +57 -19
  30. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  31. package/lib/utils/useCallbackRef.js +35 -29
  32. package/lib/utils/useCallbackRef.js.map +1 -1
  33. package/lib-commonjs/createArrowStyles.d.ts +64 -0
  34. package/lib-commonjs/createArrowStyles.js +100 -0
  35. package/lib-commonjs/createArrowStyles.js.map +1 -0
  36. package/lib-commonjs/createVirtualElementFromClick.js +23 -16
  37. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  38. package/lib-commonjs/index.d.ts +2 -1
  39. package/lib-commonjs/index.js +28 -6
  40. package/lib-commonjs/index.js.map +1 -1
  41. package/lib-commonjs/types.js +4 -1
  42. package/lib-commonjs/types.js.map +1 -1
  43. package/lib-commonjs/usePopper.js +376 -316
  44. package/lib-commonjs/usePopper.js.map +1 -1
  45. package/lib-commonjs/usePopperMouseTarget.js +38 -25
  46. package/lib-commonjs/usePopperMouseTarget.js.map +1 -1
  47. package/lib-commonjs/utils/getBasePlacement.js +7 -2
  48. package/lib-commonjs/utils/getBasePlacement.js.map +1 -1
  49. package/lib-commonjs/utils/getBoundary.js +23 -12
  50. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  51. package/lib-commonjs/utils/getReactFiberFromNode.js +44 -36
  52. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  53. package/lib-commonjs/utils/getScrollParent.js +53 -33
  54. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  55. package/lib-commonjs/utils/index.js +14 -2
  56. package/lib-commonjs/utils/index.js.map +1 -1
  57. package/lib-commonjs/utils/mergeArrowOffset.js +35 -25
  58. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  59. package/lib-commonjs/utils/positioningHelper.d.ts +2 -2
  60. package/lib-commonjs/utils/positioningHelper.js +46 -31
  61. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  62. package/lib-commonjs/utils/resolvePositioningShorthand.js +65 -22
  63. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  64. package/lib-commonjs/utils/useCallbackRef.js +45 -32
  65. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  66. package/package.json +8 -8
package/CHANGELOG.json CHANGED
@@ -2,17 +2,127 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Mon, 08 Nov 2021 04:16:58 GMT",
6
- "tag": "@fluentui/react-positioning_v0.0.0-nightly0025eeb82020211108.1",
7
- "version": "0.0.0-nightly0025eeb82020211108.1",
5
+ "date": "Tue, 11 Jan 2022 04:18:38 GMT",
6
+ "tag": "@fluentui/react-positioning_v0.0.0-nightly003de9a95220220111.1",
7
+ "version": "0.0.0-nightly003de9a95220220111.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
11
11
  "author": "email not defined",
12
12
  "package": "@fluentui/react-positioning",
13
- "commit": "e827ff6b79e47c8702651bbdc55176c0f505f4e9",
13
+ "commit": "60c7bd46e2d01b8e309739827125609a2621d863",
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": "bsunderhus@microsoft.com",
30
+ "package": "@fluentui/react-positioning",
31
+ "commit": "e382ad22539fc97bb283ca4ed856e126c7477e89",
32
+ "comment": "Adds @noflip annotation to data-popper-placement styles"
33
+ },
34
+ {
35
+ "author": "olfedias@microsoft.com",
36
+ "package": "@fluentui/react-positioning",
37
+ "commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
38
+ "comment": "update styles to not use CSS shorthands"
39
+ },
40
+ {
41
+ "author": "behowell@microsoft.com",
42
+ "package": "@fluentui/react-positioning",
43
+ "commit": "09804275c7f346db54c33d4ff347bffc33676014",
44
+ "comment": "Fix popover arrow styling"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-positioning",
49
+ "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly003de9a95220220111.1",
50
+ "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-positioning",
55
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly003de9a95220220111.1",
56
+ "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-positioning",
61
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly003de9a95220220111.1",
62
+ "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
63
+ },
64
+ {
65
+ "author": "beachball",
66
+ "package": "@fluentui/react-positioning",
67
+ "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly003de9a95220220111.1",
68
+ "commit": "60c7bd46e2d01b8e309739827125609a2621d863"
69
+ }
70
+ ]
71
+ }
72
+ },
73
+ {
74
+ "date": "Thu, 25 Nov 2021 08:34:15 GMT",
75
+ "tag": "@fluentui/react-positioning_v9.0.0-beta.4",
76
+ "version": "9.0.0-beta.4",
77
+ "comments": {
78
+ "none": [
79
+ {
80
+ "author": "lingfangao@hotmail.com",
81
+ "package": "@fluentui/react-positioning",
82
+ "commit": "718e63006d8d07d24efab9c32942041963d78dc7",
83
+ "comment": "Migrate package to use solution style ts-configs"
84
+ }
85
+ ],
86
+ "prerelease": [
87
+ {
88
+ "author": "lingfangao@hotmail.com",
89
+ "package": "@fluentui/react-positioning",
90
+ "commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
91
+ "comment": "Add utility function to create styles for an arrow element"
92
+ },
93
+ {
94
+ "author": "beachball",
95
+ "package": "@fluentui/react-positioning",
96
+ "comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
97
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
98
+ },
99
+ {
100
+ "author": "beachball",
101
+ "package": "@fluentui/react-positioning",
102
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
103
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
104
+ },
105
+ {
106
+ "author": "beachball",
107
+ "package": "@fluentui/react-positioning",
108
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
109
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
110
+ },
111
+ {
112
+ "author": "beachball",
113
+ "package": "@fluentui/react-positioning",
114
+ "comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
115
+ "commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
116
+ }
117
+ ]
118
+ }
119
+ },
120
+ {
121
+ "date": "Fri, 12 Nov 2021 13:25:30 GMT",
122
+ "tag": "@fluentui/react-positioning_v9.0.0-beta.3",
123
+ "version": "9.0.0-beta.3",
124
+ "comments": {
125
+ "prerelease": [
16
126
  {
17
127
  "author": "gcox@microsoft.com",
18
128
  "package": "@fluentui/react-positioning",
@@ -22,14 +132,22 @@
22
132
  {
23
133
  "author": "beachball",
24
134
  "package": "@fluentui/react-positioning",
25
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly0025eeb82020211108.1",
26
- "commit": "e827ff6b79e47c8702651bbdc55176c0f505f4e9"
135
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.3",
136
+ "commit": "742342e52c65066f779232e4e1302fedf0dd460d"
27
137
  },
28
138
  {
29
139
  "author": "beachball",
30
140
  "package": "@fluentui/react-positioning",
31
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly0025eeb82020211108.1",
32
- "commit": "e827ff6b79e47c8702651bbdc55176c0f505f4e9"
141
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-beta.3",
142
+ "commit": "742342e52c65066f779232e4e1302fedf0dd460d"
143
+ }
144
+ ],
145
+ "none": [
146
+ {
147
+ "author": "lingfangao@hotmail.com",
148
+ "package": "@fluentui/react-positioning",
149
+ "commit": "00f70581480b536e723fb69edf0ae617beac4807",
150
+ "comment": "Remove beta release tag"
33
151
  }
34
152
  ]
35
153
  }
package/CHANGELOG.md CHANGED
@@ -1,20 +1,50 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Mon, 08 Nov 2021 04:16:58 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 11 Jan 2022 04:18:38 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly0025eeb82020211108.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly0025eeb82020211108.1)
7
+ ## [0.0.0-nightly003de9a95220220111.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly003de9a95220220111.1)
8
8
 
9
- Mon, 08 Nov 2021 04:16:58 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v0.0.0-nightly0025eeb82020211108.1)
9
+ Tue, 11 Jan 2022 04:18:38 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightly003de9a95220220111.1)
11
+
12
+ ### Changes
13
+
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) 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
+ - Adds @noflip annotation to data-popper-placement styles ([PR #20845](https://github.com/microsoft/fluentui/pull/20845) by bsunderhus@microsoft.com)
18
+ - update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
19
+ - Fix popover arrow styling ([PR #21086](https://github.com/microsoft/fluentui/pull/21086) by behowell@microsoft.com)
20
+ - Bump @fluentui/react-make-styles to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
21
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
22
+ - Bump @fluentui/react-utilities to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
23
+ - Bump @fluentui/babel-make-styles to v0.0.0-nightly003de9a95220220111.1 ([commit](https://github.com/microsoft/fluentui/commit/60c7bd46e2d01b8e309739827125609a2621d863) by beachball)
24
+
25
+ ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)
26
+
27
+ Thu, 25 Nov 2021 08:34:15 GMT
28
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v9.0.0-beta.4)
29
+
30
+ ### Changes
31
+
32
+ - Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by lingfangao@hotmail.com)
33
+ - Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
34
+ - Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
35
+ - Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
36
+ - Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
37
+
38
+ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)
39
+
40
+ Fri, 12 Nov 2021 13:25:30 GMT
41
+ [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
42
 
12
43
  ### Changes
13
44
 
14
- - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/e827ff6b79e47c8702651bbdc55176c0f505f4e9) by email not defined)
15
45
  - 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 v0.0.0-nightly0025eeb82020211108.1 ([commit](https://github.com/microsoft/fluentui/commit/e827ff6b79e47c8702651bbdc55176c0f505f4e9) by beachball)
17
- - Bump @fluentui/react-utilities to v0.0.0-nightly0025eeb82020211108.1 ([commit](https://github.com/microsoft/fluentui/commit/e827ff6b79e47c8702651bbdc55176c0f505f4e9) by beachball)
46
+ - Bump @fluentui/react-shared-contexts to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
47
+ - Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
18
48
 
19
49
  ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.2)
20
50
 
@@ -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, borderStyle, borderColor),
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,CAAuB,WAAvB,EAAoC,WAApC,EAAiD,WAAjD,CARM;AAST,SAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CATM;AAUT,MAAA,uBAAuB,EAAE,MAAM,CAAC,iBAVvB;AAWT,MAAA,SAAS,EAAE;AAXF,KARN;AAsBL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KAvBtC;AA2BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA3BxC;AA+BL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KA/BzC;AAmCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAnCvC,GAAP;AAwCD;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
- const left = nativeEvent.clientX;
7
- const top = nativeEvent.clientY;
8
- const right = left + 1;
9
- const bottom = top + 1;
10
- function getBoundingClientRect() {
11
- return {
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
- getBoundingClientRect,
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,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,6BAA6B,CAAC,WAAuB;IACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;IACjC,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;IAChC,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;IACvB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;IAEvB,SAAS,qBAAqB;QAC5B,OAAO;YACL,IAAI;YACJ,GAAG;YACH,KAAK;YACL,MAAM;YAEN,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC;IAED,OAAO;QACL,qBAAqB;KACtB,CAAC;AACJ,CAAC"}
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,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,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"}