@fluentui/react-positioning 9.0.0-rc.8 → 9.0.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 (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/"}