@fluentui/react-positioning 9.0.0-rc.8 → 9.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. package/CHANGELOG.json +201 -1
  2. package/CHANGELOG.md +77 -2
  3. package/dist/index.d.ts +78 -46
  4. package/{lib → dist}/tsdoc-metadata.json +0 -0
  5. package/lib/createArrowStyles.js +3 -1
  6. package/lib/createArrowStyles.js.map +1 -1
  7. package/lib/createVirtualElementFromClick.js +2 -0
  8. package/lib/createVirtualElementFromClick.js.map +1 -1
  9. package/lib/index.js +2 -2
  10. package/lib/index.js.map +1 -1
  11. package/lib/isIntersectingModifier.js.map +1 -1
  12. package/lib/types.js.map +1 -1
  13. package/lib/{usePopper.js → usePositioning.js} +10 -8
  14. package/lib/usePositioning.js.map +1 -0
  15. package/lib/{usePopperMouseTarget.js → usePositioningMouseTarget.js} +4 -3
  16. package/lib/usePositioningMouseTarget.js.map +1 -0
  17. package/lib/utils/fromPopperPlacement.js +40 -0
  18. package/lib/utils/fromPopperPlacement.js.map +1 -0
  19. package/lib/utils/getBoundary.js.map +1 -1
  20. package/lib/utils/getPopperOffset.js +44 -0
  21. package/lib/utils/getPopperOffset.js.map +1 -0
  22. package/lib/utils/getReactFiberFromNode.js.map +1 -1
  23. package/lib/utils/getScrollParent.js.map +1 -1
  24. package/lib/utils/index.js +1 -1
  25. package/lib/utils/index.js.map +1 -1
  26. package/lib/utils/mergeArrowOffset.js +24 -22
  27. package/lib/utils/mergeArrowOffset.js.map +1 -1
  28. package/lib/utils/parsePopperPlacement.js +14 -0
  29. package/lib/utils/parsePopperPlacement.js.map +1 -0
  30. package/lib/utils/positioningHelper.js.map +1 -1
  31. package/lib/utils/resolvePositioningShorthand.js.map +1 -1
  32. package/lib/utils/useCallbackRef.js.map +1 -1
  33. package/lib-commonjs/createArrowStyles.js +3 -1
  34. package/lib-commonjs/createArrowStyles.js.map +1 -1
  35. package/lib-commonjs/createVirtualElementFromClick.js +2 -0
  36. package/lib-commonjs/createVirtualElementFromClick.js.map +1 -1
  37. package/lib-commonjs/index.js +7 -7
  38. package/lib-commonjs/index.js.map +1 -1
  39. package/lib-commonjs/isIntersectingModifier.js.map +1 -1
  40. package/lib-commonjs/{usePopper.js → usePositioning.js} +13 -10
  41. package/lib-commonjs/usePositioning.js.map +1 -0
  42. package/lib-commonjs/{usePopperMouseTarget.js → usePositioningMouseTarget.js} +6 -5
  43. package/lib-commonjs/usePositioningMouseTarget.js.map +1 -0
  44. package/lib-commonjs/utils/fromPopperPlacement.js +50 -0
  45. package/lib-commonjs/utils/fromPopperPlacement.js.map +1 -0
  46. package/lib-commonjs/utils/getBoundary.js.map +1 -1
  47. package/lib-commonjs/utils/getPopperOffset.js +54 -0
  48. package/lib-commonjs/utils/getPopperOffset.js.map +1 -0
  49. package/lib-commonjs/utils/getReactFiberFromNode.js.map +1 -1
  50. package/lib-commonjs/utils/getScrollParent.js.map +1 -1
  51. package/lib-commonjs/utils/index.js +2 -2
  52. package/lib-commonjs/utils/index.js.map +1 -1
  53. package/lib-commonjs/utils/mergeArrowOffset.js +24 -22
  54. package/lib-commonjs/utils/mergeArrowOffset.js.map +1 -1
  55. package/lib-commonjs/utils/parsePopperPlacement.js +23 -0
  56. package/lib-commonjs/utils/parsePopperPlacement.js.map +1 -0
  57. package/lib-commonjs/utils/positioningHelper.js.map +1 -1
  58. package/lib-commonjs/utils/resolvePositioningShorthand.js.map +1 -1
  59. package/lib-commonjs/utils/useCallbackRef.js.map +1 -1
  60. package/package.json +7 -9
  61. package/lib/createArrowStyles.d.ts +0 -64
  62. package/lib/createVirtualElementFromClick.d.ts +0 -6
  63. package/lib/index.d.ts +0 -7
  64. package/lib/isIntersectingModifier.d.ts +0 -4
  65. package/lib/types.d.ts +0 -89
  66. package/lib/usePopper.d.ts +0 -23
  67. package/lib/usePopper.js.map +0 -1
  68. package/lib/usePopperMouseTarget.d.ts +0 -11
  69. package/lib/usePopperMouseTarget.js.map +0 -1
  70. package/lib/utils/getBasePlacement.d.ts +0 -8
  71. package/lib/utils/getBasePlacement.js +0 -10
  72. package/lib/utils/getBasePlacement.js.map +0 -1
  73. package/lib/utils/getBoundary.d.ts +0 -6
  74. package/lib/utils/getReactFiberFromNode.d.ts +0 -108
  75. package/lib/utils/getScrollParent.d.ts +0 -12
  76. package/lib/utils/index.d.ts +0 -8
  77. package/lib/utils/mergeArrowOffset.d.ts +0 -10
  78. package/lib/utils/positioningHelper.d.ts +0 -7
  79. package/lib/utils/resolvePositioningShorthand.d.ts +0 -2
  80. package/lib/utils/useCallbackRef.d.ts +0 -19
  81. package/lib-commonjs/createArrowStyles.d.ts +0 -64
  82. package/lib-commonjs/createVirtualElementFromClick.d.ts +0 -6
  83. package/lib-commonjs/index.d.ts +0 -7
  84. package/lib-commonjs/isIntersectingModifier.d.ts +0 -4
  85. package/lib-commonjs/types.d.ts +0 -89
  86. package/lib-commonjs/usePopper.d.ts +0 -23
  87. package/lib-commonjs/usePopper.js.map +0 -1
  88. package/lib-commonjs/usePopperMouseTarget.d.ts +0 -11
  89. package/lib-commonjs/usePopperMouseTarget.js.map +0 -1
  90. package/lib-commonjs/utils/getBasePlacement.d.ts +0 -8
  91. package/lib-commonjs/utils/getBasePlacement.js +0 -19
  92. package/lib-commonjs/utils/getBasePlacement.js.map +0 -1
  93. package/lib-commonjs/utils/getBoundary.d.ts +0 -6
  94. package/lib-commonjs/utils/getReactFiberFromNode.d.ts +0 -108
  95. package/lib-commonjs/utils/getScrollParent.d.ts +0 -12
  96. package/lib-commonjs/utils/index.d.ts +0 -8
  97. package/lib-commonjs/utils/mergeArrowOffset.d.ts +0 -10
  98. package/lib-commonjs/utils/positioningHelper.d.ts +0 -7
  99. package/lib-commonjs/utils/resolvePositioningShorthand.d.ts +0 -2
  100. package/lib-commonjs/utils/useCallbackRef.d.ts +0 -19
package/CHANGELOG.json CHANGED
@@ -2,7 +2,207 @@
2
2
  "name": "@fluentui/react-positioning",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 05 May 2022 18:24:32 GMT",
5
+ "date": "Tue, 28 Jun 2022 17:37:51 GMT",
6
+ "tag": "@fluentui/react-positioning_v9.0.1",
7
+ "version": "9.0.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-positioning",
13
+ "commit": "3deda1fbbfb6ac2b1ad150d4dc6343f1f7fda85b",
14
+ "comment": "fix: Use caret dependency range for Griffel"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Tue, 28 Jun 2022 15:13:51 GMT",
21
+ "tag": "@fluentui/react-positioning_v9.0.0",
22
+ "version": "9.0.0",
23
+ "comments": {
24
+ "prerelease": [
25
+ {
26
+ "author": "lingfangao@hotmail.com",
27
+ "package": "@fluentui/react-positioning",
28
+ "commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
29
+ "comment": "Update 9.0.0-rc dependencies to use caret range"
30
+ },
31
+ {
32
+ "author": "lingfangao@hotmail.com",
33
+ "package": "@fluentui/react-positioning",
34
+ "commit": "2da4428ae7d6e464c538b7ed10e425ce0e531144",
35
+ "comment": "chore: Mark teams-prg owned APIs with @internal"
36
+ },
37
+ {
38
+ "author": "Humberto.Morimoto@microsoft.com",
39
+ "package": "@fluentui/react-positioning",
40
+ "commit": "09f58dcbef2306875046261dc0b7821283ccc287",
41
+ "comment": "chore: Using ::before and ::after instead of :before and :after."
42
+ },
43
+ {
44
+ "author": "lingfangao@hotmail.com",
45
+ "package": "@fluentui/react-positioning",
46
+ "commit": "675acea49c97f10837ddee9b8c4350ca27750125",
47
+ "comment": "Bump Griffel dependencies"
48
+ }
49
+ ],
50
+ "patch": [
51
+ {
52
+ "author": "lingfangao@hotmail.com",
53
+ "package": "@fluentui/react-positioning",
54
+ "commit": "c7b1348bdad7aa883c29bfbc96ef2a32e6ebc7dd",
55
+ "comment": "feat: Initial 9.0.0 release"
56
+ },
57
+ {
58
+ "author": "beachball",
59
+ "package": "@fluentui/react-positioning",
60
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0",
61
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-positioning",
66
+ "comment": "Bump @fluentui/react-theme to v9.0.0",
67
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-positioning",
72
+ "comment": "Bump @fluentui/react-utilities to v9.0.0",
73
+ "commit": "ba6c5d651559b91c815429c9a9357c4d5a390f3e"
74
+ }
75
+ ]
76
+ }
77
+ },
78
+ {
79
+ "date": "Thu, 23 Jun 2022 14:25:31 GMT",
80
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.12",
81
+ "version": "9.0.0-rc.12",
82
+ "comments": {
83
+ "prerelease": [
84
+ {
85
+ "author": "beachball",
86
+ "package": "@fluentui/react-positioning",
87
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.11",
88
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
89
+ },
90
+ {
91
+ "author": "beachball",
92
+ "package": "@fluentui/react-positioning",
93
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
94
+ "commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
95
+ }
96
+ ]
97
+ }
98
+ },
99
+ {
100
+ "date": "Tue, 31 May 2022 21:28:42 GMT",
101
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.11",
102
+ "version": "9.0.0-rc.11",
103
+ "comments": {
104
+ "prerelease": [
105
+ {
106
+ "author": "bernardo.sunderhus@gmail.com",
107
+ "package": "@fluentui/react-positioning",
108
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
109
+ "comment": "updates import to react-shared-components"
110
+ },
111
+ {
112
+ "author": "olfedias@microsoft.com",
113
+ "package": "@fluentui/react-positioning",
114
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
115
+ "comment": "chore: Update Griffel to latest version"
116
+ },
117
+ {
118
+ "author": "beachball",
119
+ "package": "@fluentui/react-positioning",
120
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
121
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
122
+ },
123
+ {
124
+ "author": "beachball",
125
+ "package": "@fluentui/react-positioning",
126
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
127
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
128
+ }
129
+ ]
130
+ }
131
+ },
132
+ {
133
+ "date": "Mon, 23 May 2022 18:56:47 GMT",
134
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.10",
135
+ "version": "9.0.0-rc.10",
136
+ "comments": {
137
+ "prerelease": [
138
+ {
139
+ "author": "lingfangao@hotmail.com",
140
+ "package": "@fluentui/react-positioning",
141
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
142
+ "comment": "BREAKING CHANGE: Encapsulate Popper API"
143
+ },
144
+ {
145
+ "author": "beachball",
146
+ "package": "@fluentui/react-positioning",
147
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
148
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
149
+ },
150
+ {
151
+ "author": "beachball",
152
+ "package": "@fluentui/react-positioning",
153
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
154
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
155
+ }
156
+ ]
157
+ }
158
+ },
159
+ {
160
+ "date": "Mon, 23 May 2022 12:13:34 GMT",
161
+ "tag": "@fluentui/react-positioning_v9.0.0-rc.9",
162
+ "version": "9.0.0-rc.9",
163
+ "comments": {
164
+ "prerelease": [
165
+ {
166
+ "author": "martinhochel@microsoft.com",
167
+ "package": "@fluentui/react-positioning",
168
+ "commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
169
+ "comment": "feat: ship rolluped only dts"
170
+ },
171
+ {
172
+ "author": "olfedias@microsoft.com",
173
+ "package": "@fluentui/react-positioning",
174
+ "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
175
+ "comment": "chore: Update Griffel to latest version"
176
+ },
177
+ {
178
+ "author": "olfedias@microsoft.com",
179
+ "package": "@fluentui/react-positioning",
180
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
181
+ "comment": "chore: Update Griffel to latest version"
182
+ },
183
+ {
184
+ "author": "beachball",
185
+ "package": "@fluentui/react-positioning",
186
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.8",
187
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
188
+ },
189
+ {
190
+ "author": "beachball",
191
+ "package": "@fluentui/react-positioning",
192
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
193
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
194
+ },
195
+ {
196
+ "author": "beachball",
197
+ "package": "@fluentui/react-positioning",
198
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
199
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
200
+ }
201
+ ]
202
+ }
203
+ },
204
+ {
205
+ "date": "Thu, 05 May 2022 18:26:25 GMT",
6
206
  "tag": "@fluentui/react-positioning_v9.0.0-rc.8",
7
207
  "version": "9.0.0-rc.8",
8
208
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,87 @@
1
1
  # Change Log - @fluentui/react-positioning
2
2
 
3
- This log was last generated on Thu, 05 May 2022 18:24:32 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 28 Jun 2022 17:37:51 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.1)
8
+
9
+ Tue, 28 Jun 2022 17:37:51 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0..@fluentui/react-positioning_v9.0.1)
11
+
12
+ ### Patches
13
+
14
+ - fix: Use caret dependency range for Griffel ([PR #23754](https://github.com/microsoft/fluentui/pull/23754) by lingfangao@hotmail.com)
15
+
16
+ ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0)
17
+
18
+ Tue, 28 Jun 2022 15:13:51 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.12..@fluentui/react-positioning_v9.0.0)
20
+
21
+ ### Patches
22
+
23
+ - feat: Initial 9.0.0 release ([PR #23733](https://github.com/microsoft/fluentui/pull/23733) by lingfangao@hotmail.com)
24
+ - Bump @fluentui/react-shared-contexts to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
25
+ - Bump @fluentui/react-theme to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.0.0 ([commit](https://github.com/microsoft/fluentui/commit/ba6c5d651559b91c815429c9a9357c4d5a390f3e) by beachball)
27
+
28
+ ### Changes
29
+
30
+ - Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
31
+ - chore: Mark teams-prg owned APIs with @internal ([PR #23689](https://github.com/microsoft/fluentui/pull/23689) by lingfangao@hotmail.com)
32
+ - chore: Using ::before and ::after instead of :before and :after. ([PR #23469](https://github.com/microsoft/fluentui/pull/23469) by Humberto.Morimoto@microsoft.com)
33
+ - Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
34
+
35
+ ## [9.0.0-rc.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.12)
36
+
37
+ Thu, 23 Jun 2022 14:25:31 GMT
38
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.11..@fluentui/react-positioning_v9.0.0-rc.12)
39
+
40
+ ### Changes
41
+
42
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.11 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
43
+ - Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
44
+
45
+ ## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.11)
46
+
47
+ Tue, 31 May 2022 21:28:42 GMT
48
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.10..@fluentui/react-positioning_v9.0.0-rc.11)
49
+
50
+ ### Changes
51
+
52
+ - updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
53
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
54
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
55
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
56
+
57
+ ## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.10)
58
+
59
+ Mon, 23 May 2022 18:56:47 GMT
60
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.9..@fluentui/react-positioning_v9.0.0-rc.10)
61
+
62
+ ### Changes
63
+
64
+ - BREAKING CHANGE: Encapsulate Popper API ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by lingfangao@hotmail.com)
65
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
66
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
67
+
68
+ ## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.9)
69
+
70
+ Mon, 23 May 2022 12:13:34 GMT
71
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.8..@fluentui/react-positioning_v9.0.0-rc.9)
72
+
73
+ ### Changes
74
+
75
+ - feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
76
+ - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
77
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
78
+ - Bump @fluentui/react-shared-contexts to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
79
+ - Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
80
+ - Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
81
+
7
82
  ## [9.0.0-rc.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.8)
8
83
 
9
- Thu, 05 May 2022 18:24:32 GMT
84
+ Thu, 05 May 2022 18:26:25 GMT
10
85
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.7..@fluentui/react-positioning_v9.0.0-rc.8)
11
86
 
12
87
  ### Changes
package/dist/index.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import type { GriffelStyle } from '@griffel/react';
2
- import * as PopperJs from '@popperjs/core';
3
2
  import * as React_2 from 'react';
4
3
 
5
4
  export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
6
5
 
7
6
  export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
8
7
 
9
- export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
8
+ export declare type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
10
9
 
11
10
  /**
11
+ * @internal
12
12
  * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
13
13
  *
14
14
  * Use this when you need to create classes for several different arrow sizes. If you only need a
@@ -20,6 +20,7 @@ export declare function createArrowHeightStyles(arrowHeight: number): {
20
20
  };
21
21
 
22
22
  /**
23
+ * @internal
23
24
  * Helper that creates a makeStyles rule for an arrow element.
24
25
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
25
26
  *
@@ -44,6 +45,7 @@ export declare function createArrowHeightStyles(arrowHeight: number): {
44
45
  export declare function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle;
45
46
 
46
47
  /**
48
+ * @internal
47
49
  * Options parameter for the createArrowStyles function
48
50
  */
49
51
  export declare type CreateArrowStylesOptions = {
@@ -78,9 +80,10 @@ export declare type CreateArrowStylesOptions = {
78
80
  * Creates a virtual element based on the position of a click event
79
81
  * Can be used as a target for popper in scenarios such as context menus
80
82
  */
81
- export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
83
+ export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement;
82
84
 
83
85
  /**
86
+ * @internal
84
87
  * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
85
88
  * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
86
89
  *
@@ -90,22 +93,45 @@ export declare function createVirtualElementFromClick(nativeEvent: MouseEvent):
90
93
  */
91
94
  export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
92
95
 
93
- export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
96
+ export declare type Offset = OffsetFunction | OffsetObject | OffsetShorthand;
94
97
 
95
- export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
98
+ export declare type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
96
99
 
97
100
  export declare type OffsetFunctionParam = {
98
- popper: PopperJs.Rect;
99
- reference: PopperJs.Rect;
100
- placement: PopperJs.Placement;
101
+ positionedRect: Rect;
102
+ targetRect: Rect;
103
+ position: Position;
104
+ alignment?: Alignment;
101
105
  };
102
106
 
103
- export declare interface PopperOptions {
107
+ export declare type OffsetObject = {
108
+ crossAxis?: number;
109
+ mainAxis: number;
110
+ };
111
+
112
+ export declare type OffsetShorthand = number;
113
+
114
+ export declare type Position = 'above' | 'below' | 'before' | 'after';
115
+
116
+ export declare type PositioningImperativeRef = {
117
+ /**
118
+ * Updates the position imperatively.
119
+ * Useful when the position of the target changes from other factors than scrolling of window resize.
120
+ */
121
+ updatePosition: () => void;
122
+ /**
123
+ * Sets the target and updates positioning imperatively.
124
+ * Useful for avoiding double renders with the target option.
125
+ */
126
+ setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
127
+ };
128
+
129
+ declare interface PositioningOptions {
104
130
  /** Alignment for the component. Only has an effect if used with the @see position option */
105
131
  align?: Alignment;
106
- /** The element which will define the boundaries of the popper position for the flip behavior. */
132
+ /** The element which will define the boundaries of the positioned element for the flip behavior. */
107
133
  flipBoundary?: Boundary;
108
- /** The element which will define the boundaries of the popper position for the overflow behavior. */
134
+ /** The element which will define the boundaries of the positioned element for the overflow behavior. */
109
135
  overflowBoundary?: Boundary;
110
136
  /**
111
137
  * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
@@ -115,12 +141,12 @@ export declare interface PopperOptions {
115
141
  */
116
142
  position?: Position;
117
143
  /**
118
- * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
144
+ * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
119
145
  * @default false
120
146
  */
121
147
  positionFixed?: boolean;
122
148
  /**
123
- * Lets you displace a popper element from its reference element.
149
+ * Lets you displace a positioned element from its reference element.
124
150
  * This can be useful if you need to apply some margin between them or if you need to fine tune the
125
151
  * position according to some custom logic.
126
152
  */
@@ -131,7 +157,7 @@ export declare interface PopperOptions {
131
157
  */
132
158
  arrowPadding?: number;
133
159
  /**
134
- * Applies max-height and max-width on popper to fit it within the available space in viewport.
160
+ * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.
135
161
  * true enables this for both width and height when overflow happens.
136
162
  * 'always' applies `max-height`/`max-width` regardless of overflow.
137
163
  * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
@@ -148,45 +174,58 @@ export declare interface PopperOptions {
148
174
  */
149
175
  pinned?: boolean;
150
176
  /**
151
- * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
177
+ * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
152
178
  * "all" enables this behavior for all axis.
153
179
  */
154
180
  unstable_disableTether?: boolean | 'all';
155
181
  }
156
182
 
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 | PopperVirtualElement) => 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'> {
183
+ export declare interface PositioningProps extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {
175
184
  /** An imperative handle to Popper methods. */
176
- popperRef?: React_2.Ref<PopperRefHandle>;
185
+ positioningRef?: React_2.Ref<PositioningImperativeRef>;
177
186
  /**
178
- * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
187
+ * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
179
188
  */
180
- target?: HTMLElement | PopperVirtualElement | null;
189
+ target?: HTMLElement | PositioningVirtualElement | null;
181
190
  }
182
191
 
183
192
  export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
184
193
 
185
194
  export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
186
195
 
196
+ export declare type PositioningVirtualElement = {
197
+ getBoundingClientRect: () => {
198
+ x: number;
199
+ y: number;
200
+ top: number;
201
+ left: number;
202
+ bottom: number;
203
+ right: number;
204
+ width: number;
205
+ height: number;
206
+ };
207
+ contextElement?: Element;
208
+ };
209
+
210
+ declare type Rect = {
211
+ width: number;
212
+ height: number;
213
+ x: number;
214
+ y: number;
215
+ };
216
+
187
217
  export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
188
218
 
219
+ declare interface UsePopperOptions extends PositioningProps {
220
+ /**
221
+ * If false, delays Popper's creation.
222
+ * @default true
223
+ */
224
+ enabled?: boolean;
225
+ }
226
+
189
227
  /**
228
+ * @internal
190
229
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
191
230
  * package:
192
231
  * - style attributes are applied directly on DOM to avoid re-renders
@@ -194,13 +233,14 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
194
233
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
195
234
  * to avoid focus jumps
196
235
  */
197
- export declare function usePopper(options?: UsePopperOptions): {
236
+ export declare function usePositioning(options?: UsePopperOptions): {
198
237
  targetRef: React_2.MutableRefObject<any>;
199
238
  containerRef: React_2.MutableRefObject<any>;
200
239
  arrowRef: React_2.MutableRefObject<any>;
201
240
  };
202
241
 
203
242
  /**
243
+ * @internal
204
244
  * A state hook that manages a popper virtual element from mouseevents.
205
245
  * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
206
246
  * React synthetic events are not persisted by this hook
@@ -208,14 +248,6 @@ export declare function usePopper(options?: UsePopperOptions): {
208
248
  * @param initialState - initializes a user provided state similare to useState
209
249
  * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
210
250
  */
211
- export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
212
-
213
- declare interface UsePopperOptions extends PositioningProps {
214
- /**
215
- * If false, delays Popper's creation.
216
- * @default true
217
- */
218
- enabled?: boolean;
219
- }
251
+ export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
220
252
 
221
253
  export { }
File without changes
@@ -1,6 +1,7 @@
1
1
  import { shorthands } from '@griffel/react';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  /**
4
+ * @internal
4
5
  * Helper that creates a makeStyles rule for an arrow element.
5
6
  * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
6
7
  *
@@ -36,7 +37,7 @@ export function createArrowStyles(options) {
36
37
  visibility: 'hidden',
37
38
  zIndex: -1,
38
39
  ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
39
- ':before': {
40
+ '::before': {
40
41
  content: '""',
41
42
  visibility: 'visible',
42
43
  position: 'absolute',
@@ -69,6 +70,7 @@ export function createArrowStyles(options) {
69
70
  };
70
71
  }
71
72
  /**
73
+ * @internal
72
74
  * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
73
75
  *
74
76
  * Use this when you need to create classes for several different arrow sizes. If you only need a
@@ -1 +1 @@
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/"}
1
+ {"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAsCA;;;;;;;;;;;;;;;;;;;;;;AAsBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;EACjE,MAAM;IACJ,WADI;IAEJ,WAAW,GAAG,KAFV;IAGJ,WAAW,GAAG,OAHV;IAIJ,WAAW,GAAG,MAAM,CAAC;EAJjB,IAKF,OALJ;EAOA,OAAO;IACL,QAAQ,EAAE,UADL;IAEL,eAAe,EAAE,SAFZ;IAGL,UAAU,EAAE,QAHP;IAIL,MAAM,EAAE,CAAC,CAJJ;IAML,IAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;IAQL,YAAY;MACV,OAAO,EAAE,IADC;MAEV,UAAU,EAAE,SAFF;MAGV,QAAQ,EAAE,UAHA;MAIV,SAAS,EAAE,YAJD;MAKV,KAAK,EAAE,SALG;MAMV,MAAM,EAAE,SANE;MAOV,eAAe,EAAE,SAPP;MAQV,GAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARO;MAaV,GAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbO;MAcV,uBAAuB,EAAE,MAAM,CAAC,iBAdtB;MAeV,SAAS,EAAE;IAfD,CARP;IA0BL;IACA,2CAA2C;MACzC,MAAM,EAAE,IAAI,WAAW,EADkB;MAEzC,WAAW;IAF8B,CA3BtC;IA+BL,6CAA6C;MAC3C,IAAI,EAAE,IAAI,WAAW,gBADsB;MAE3C,WAAW;IAFgC,CA/BxC;IAmCL,8CAA8C;MAC5C,GAAG,EAAE,IAAI,WAAW,EADwB;MAE5C,WAAW;IAFiC,CAnCzC;IAuCL,4CAA4C;MAC1C,KAAK,EAAE,IAAI,WAAW,gBADoB;MAE1C,WAAW;IAF+B;EAvCvC,CAAP;AA4CD;AAED;;;;;;AAMG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;EACzD;EACA;EACA,MAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;EACA,OAAO;IAAE,KAAK,EAAE,UAAT;IAAqB,MAAM,EAAE;EAA7B,CAAP;AACD","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\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 * @internal\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 * @internal\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/"}
@@ -14,6 +14,8 @@ export function createVirtualElementFromClick(nativeEvent) {
14
14
  top,
15
15
  right,
16
16
  bottom,
17
+ x: left,
18
+ y: top,
17
19
  height: 1,
18
20
  width: 1
19
21
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["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","sourcesContent":["import type { PopperVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect(): ClientRect {\n return {\n left,\n top,\n right,\n bottom,\n\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;EACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;EACA,MAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;EACA,MAAM,KAAK,GAAG,IAAI,GAAG,CAArB;EACA,MAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;EAEA,SAAS,qBAAT,GAA8B;IAC5B,OAAO;MACL,IADK;MAEL,GAFK;MAGL,KAHK;MAIL,MAJK;MAKL,CAAC,EAAE,IALE;MAML,CAAC,EAAE,GANE;MAOL,MAAM,EAAE,CAPH;MAQL,KAAK,EAAE;IARF,CAAP;EAUD;;EAED,OAAO;IACL;EADK,CAAP;AAGD","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n const left = nativeEvent.clientX;\n const top = nativeEvent.clientY;\n const right = left + 1;\n const bottom = top + 1;\n\n function getBoundingClientRect() {\n return {\n left,\n top,\n right,\n bottom,\n x: left,\n y: top,\n height: 1,\n width: 1,\n };\n }\n\n return {\n getBoundingClientRect,\n };\n}\n"],"sourceRoot":"../src/"}
package/lib/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export { createVirtualElementFromClick } from './createVirtualElementFromClick';
2
2
  export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
3
- export { usePopper } from './usePopper';
4
- export { usePopperMouseTarget } from './usePopperMouseTarget';
3
+ export { usePositioning } from './usePositioning';
4
+ export { usePositioningMouseTarget } from './usePositioningMouseTarget';
5
5
  export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
6
6
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePopper } from './usePopper';\nexport { usePopperMouseTarget } from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n PopperOptions,\n PopperRefHandle,\n PopperVirtualElement,\n Position,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n} from './types';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n Alignment,\n AutoSize,\n Boundary,\n Offset,\n OffsetFunction,\n OffsetFunctionParam,\n OffsetObject,\n OffsetShorthand,\n Position,\n PositioningImperativeRef,\n PositioningProps,\n PositioningShorthand,\n PositioningShorthandValue,\n PositioningVirtualElement,\n} from './types';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAAyC,gBAAzC;AAEA,OAAO,MAAM,sBAAsB,GAA2B;AAC5D,EAAA,IAAI,EAAE,0BADsD;AAE5D,EAAA,OAAO,EAAE,IAFmD;AAG5D,EAAA,KAAK,EAAE,MAHqD;AAI5D,EAAA,QAAQ,EAAE,CAAC,iBAAD,CAJkD;AAK5D,EAAA,EAAE,EAAE,CAAC;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAD,KAAoB;AACtB,UAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;AACA,UAAM,iBAAiB,GAAG,cAAc,CAAC,KAAD,EAAQ;AAAE,MAAA,WAAW,EAAE;AAAf,KAAR,CAAxC;AAEA,UAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;AACA,UAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;AAEA,UAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;AAEA,IAAA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;AAC1B,MAAA;AAD0B,KAA5B;AAGA,IAAA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;AAExB,qCAA+B;AAFP,KAA1B;AAID;AArB2D,CAAvD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n name: 'is-intersecting-modifier',\n enabled: true,\n phase: 'main',\n requires: ['preventOverflow'],\n fn: ({ state, name }) => {\n const popperRect = state.rects.popper;\n const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n state.modifiersData[name] = {\n isIntersecting,\n };\n state.attributes.popper = {\n ...state.attributes.popper,\n 'data-popper-is-intersecting': isIntersecting,\n };\n },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAAyC,gBAAzC;AAEA,OAAO,MAAM,sBAAsB,GAA2B;EAC5D,IAAI,EAAE,0BADsD;EAE5D,OAAO,EAAE,IAFmD;EAG5D,KAAK,EAAE,MAHqD;EAI5D,QAAQ,EAAE,CAAC,iBAAD,CAJkD;EAK5D,EAAE,EAAE,CAAC;IAAE,KAAF;IAAS;EAAT,CAAD,KAAoB;IACtB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;IACA,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAD,EAAQ;MAAE,WAAW,EAAE;IAAf,CAAR,CAAxC;IAEA,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;IACA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;IAEA,MAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;IAEA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;MAC1B;IAD0B,CAA5B;IAGA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;MAExB,+BAA+B;IAFP,CAA1B;EAID;AArB2D,CAAvD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n name: 'is-intersecting-modifier',\n enabled: true,\n phase: 'main',\n requires: ['preventOverflow'],\n fn: ({ state, name }) => {\n const popperRect = state.rects.popper;\n const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n state.modifiersData[name] = {\n isIntersecting,\n };\n state.attributes.popper = {\n ...state.attributes.popper,\n 'data-popper-is-intersecting': isIntersecting,\n };\n },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}