@react-aria/overlays 3.20.0 → 3.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +254 -53
- package/dist/main.js +252 -51
- package/dist/main.js.map +1 -1
- package/dist/module.js +254 -53
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/calculatePosition.ts +85 -24
- package/src/useOverlayPosition.ts +31 -4
- package/dist/ar-AE.main.js +0 -6
- package/dist/ar-AE.main.js.map +0 -1
- package/dist/ar-AE.mjs +0 -8
- package/dist/ar-AE.module.js +0 -8
- package/dist/ar-AE.module.js.map +0 -1
- package/dist/bg-BG.main.js +0 -6
- package/dist/bg-BG.main.js.map +0 -1
- package/dist/bg-BG.mjs +0 -8
- package/dist/bg-BG.module.js +0 -8
- package/dist/bg-BG.module.js.map +0 -1
- package/dist/cs-CZ.main.js +0 -6
- package/dist/cs-CZ.main.js.map +0 -1
- package/dist/cs-CZ.mjs +0 -8
- package/dist/cs-CZ.module.js +0 -8
- package/dist/cs-CZ.module.js.map +0 -1
- package/dist/da-DK.main.js +0 -6
- package/dist/da-DK.main.js.map +0 -1
- package/dist/da-DK.mjs +0 -8
- package/dist/da-DK.module.js +0 -8
- package/dist/da-DK.module.js.map +0 -1
- package/dist/de-DE.main.js +0 -6
- package/dist/de-DE.main.js.map +0 -1
- package/dist/de-DE.mjs +0 -8
- package/dist/de-DE.module.js +0 -8
- package/dist/de-DE.module.js.map +0 -1
- package/dist/el-GR.main.js +0 -6
- package/dist/el-GR.main.js.map +0 -1
- package/dist/el-GR.mjs +0 -8
- package/dist/el-GR.module.js +0 -8
- package/dist/el-GR.module.js.map +0 -1
- package/dist/en-US.main.js +0 -6
- package/dist/en-US.main.js.map +0 -1
- package/dist/en-US.mjs +0 -8
- package/dist/en-US.module.js +0 -8
- package/dist/en-US.module.js.map +0 -1
- package/dist/es-ES.main.js +0 -6
- package/dist/es-ES.main.js.map +0 -1
- package/dist/es-ES.mjs +0 -8
- package/dist/es-ES.module.js +0 -8
- package/dist/es-ES.module.js.map +0 -1
- package/dist/et-EE.main.js +0 -6
- package/dist/et-EE.main.js.map +0 -1
- package/dist/et-EE.mjs +0 -8
- package/dist/et-EE.module.js +0 -8
- package/dist/et-EE.module.js.map +0 -1
- package/dist/fi-FI.main.js +0 -6
- package/dist/fi-FI.main.js.map +0 -1
- package/dist/fi-FI.mjs +0 -8
- package/dist/fi-FI.module.js +0 -8
- package/dist/fi-FI.module.js.map +0 -1
- package/dist/fr-FR.main.js +0 -6
- package/dist/fr-FR.main.js.map +0 -1
- package/dist/fr-FR.mjs +0 -8
- package/dist/fr-FR.module.js +0 -8
- package/dist/fr-FR.module.js.map +0 -1
- package/dist/he-IL.main.js +0 -6
- package/dist/he-IL.main.js.map +0 -1
- package/dist/he-IL.mjs +0 -8
- package/dist/he-IL.module.js +0 -8
- package/dist/he-IL.module.js.map +0 -1
- package/dist/hr-HR.main.js +0 -6
- package/dist/hr-HR.main.js.map +0 -1
- package/dist/hr-HR.mjs +0 -8
- package/dist/hr-HR.module.js +0 -8
- package/dist/hr-HR.module.js.map +0 -1
- package/dist/hu-HU.main.js +0 -6
- package/dist/hu-HU.main.js.map +0 -1
- package/dist/hu-HU.mjs +0 -8
- package/dist/hu-HU.module.js +0 -8
- package/dist/hu-HU.module.js.map +0 -1
- package/dist/it-IT.main.js +0 -6
- package/dist/it-IT.main.js.map +0 -1
- package/dist/it-IT.mjs +0 -8
- package/dist/it-IT.module.js +0 -8
- package/dist/it-IT.module.js.map +0 -1
- package/dist/ja-JP.main.js +0 -6
- package/dist/ja-JP.main.js.map +0 -1
- package/dist/ja-JP.mjs +0 -8
- package/dist/ja-JP.module.js +0 -8
- package/dist/ja-JP.module.js.map +0 -1
- package/dist/ko-KR.main.js +0 -6
- package/dist/ko-KR.main.js.map +0 -1
- package/dist/ko-KR.mjs +0 -8
- package/dist/ko-KR.module.js +0 -8
- package/dist/ko-KR.module.js.map +0 -1
- package/dist/lt-LT.main.js +0 -6
- package/dist/lt-LT.main.js.map +0 -1
- package/dist/lt-LT.mjs +0 -8
- package/dist/lt-LT.module.js +0 -8
- package/dist/lt-LT.module.js.map +0 -1
- package/dist/lv-LV.main.js +0 -6
- package/dist/lv-LV.main.js.map +0 -1
- package/dist/lv-LV.mjs +0 -8
- package/dist/lv-LV.module.js +0 -8
- package/dist/lv-LV.module.js.map +0 -1
- package/dist/nb-NO.main.js +0 -6
- package/dist/nb-NO.main.js.map +0 -1
- package/dist/nb-NO.mjs +0 -8
- package/dist/nb-NO.module.js +0 -8
- package/dist/nb-NO.module.js.map +0 -1
- package/dist/nl-NL.main.js +0 -6
- package/dist/nl-NL.main.js.map +0 -1
- package/dist/nl-NL.mjs +0 -8
- package/dist/nl-NL.module.js +0 -8
- package/dist/nl-NL.module.js.map +0 -1
- package/dist/pl-PL.main.js +0 -6
- package/dist/pl-PL.main.js.map +0 -1
- package/dist/pl-PL.mjs +0 -8
- package/dist/pl-PL.module.js +0 -8
- package/dist/pl-PL.module.js.map +0 -1
- package/dist/pt-BR.main.js +0 -6
- package/dist/pt-BR.main.js.map +0 -1
- package/dist/pt-BR.mjs +0 -8
- package/dist/pt-BR.module.js +0 -8
- package/dist/pt-BR.module.js.map +0 -1
- package/dist/pt-PT.main.js +0 -6
- package/dist/pt-PT.main.js.map +0 -1
- package/dist/pt-PT.mjs +0 -8
- package/dist/pt-PT.module.js +0 -8
- package/dist/pt-PT.module.js.map +0 -1
- package/dist/ro-RO.main.js +0 -6
- package/dist/ro-RO.main.js.map +0 -1
- package/dist/ro-RO.mjs +0 -8
- package/dist/ro-RO.module.js +0 -8
- package/dist/ro-RO.module.js.map +0 -1
- package/dist/ru-RU.main.js +0 -6
- package/dist/ru-RU.main.js.map +0 -1
- package/dist/ru-RU.mjs +0 -8
- package/dist/ru-RU.module.js +0 -8
- package/dist/ru-RU.module.js.map +0 -1
- package/dist/sk-SK.main.js +0 -6
- package/dist/sk-SK.main.js.map +0 -1
- package/dist/sk-SK.mjs +0 -8
- package/dist/sk-SK.module.js +0 -8
- package/dist/sk-SK.module.js.map +0 -1
- package/dist/sl-SI.main.js +0 -6
- package/dist/sl-SI.main.js.map +0 -1
- package/dist/sl-SI.mjs +0 -8
- package/dist/sl-SI.module.js +0 -8
- package/dist/sl-SI.module.js.map +0 -1
- package/dist/sr-SP.main.js +0 -6
- package/dist/sr-SP.main.js.map +0 -1
- package/dist/sr-SP.mjs +0 -8
- package/dist/sr-SP.module.js +0 -8
- package/dist/sr-SP.module.js.map +0 -1
- package/dist/sv-SE.main.js +0 -6
- package/dist/sv-SE.main.js.map +0 -1
- package/dist/sv-SE.mjs +0 -8
- package/dist/sv-SE.module.js +0 -8
- package/dist/sv-SE.module.js.map +0 -1
- package/dist/tr-TR.main.js +0 -6
- package/dist/tr-TR.main.js.map +0 -1
- package/dist/tr-TR.mjs +0 -8
- package/dist/tr-TR.module.js +0 -8
- package/dist/tr-TR.module.js.map +0 -1
- package/dist/uk-UA.main.js +0 -6
- package/dist/uk-UA.main.js.map +0 -1
- package/dist/uk-UA.mjs +0 -8
- package/dist/uk-UA.module.js +0 -8
- package/dist/uk-UA.module.js.map +0 -1
- package/dist/zh-CN.main.js +0 -6
- package/dist/zh-CN.main.js.map +0 -1
- package/dist/zh-CN.mjs +0 -8
- package/dist/zh-CN.module.js +0 -8
- package/dist/zh-CN.module.js.map +0 -1
- package/dist/zh-TW.main.js +0 -6
- package/dist/zh-TW.main.js.map +0 -1
- package/dist/zh-TW.mjs +0 -8
- package/dist/zh-TW.module.js +0 -8
- package/dist/zh-TW.module.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/overlays",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.21.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/focus": "^3.16.
|
|
26
|
-
"@react-aria/i18n": "^3.10.
|
|
27
|
-
"@react-aria/interactions": "^3.
|
|
25
|
+
"@react-aria/focus": "^3.16.1",
|
|
26
|
+
"@react-aria/i18n": "^3.10.1",
|
|
27
|
+
"@react-aria/interactions": "^3.21.0",
|
|
28
28
|
"@react-aria/ssr": "^3.9.1",
|
|
29
|
-
"@react-aria/utils": "^3.23.
|
|
30
|
-
"@react-aria/visually-hidden": "^3.8.
|
|
29
|
+
"@react-aria/utils": "^3.23.1",
|
|
30
|
+
"@react-aria/visually-hidden": "^3.8.9",
|
|
31
31
|
"@react-stately/overlays": "^3.6.4",
|
|
32
32
|
"@react-types/button": "^3.9.1",
|
|
33
33
|
"@react-types/overlays": "^3.8.4",
|
|
@@ -41,5 +41,5 @@
|
|
|
41
41
|
"publishConfig": {
|
|
42
42
|
"access": "public"
|
|
43
43
|
},
|
|
44
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "f040ff62678e6a31375b96c05396df0bae660350"
|
|
45
45
|
}
|
package/src/calculatePosition.ts
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
|
|
14
|
-
import {clamp} from '@react-aria/utils';
|
|
14
|
+
import {clamp, isWebKit} from '@react-aria/utils';
|
|
15
15
|
|
|
16
16
|
interface Position {
|
|
17
17
|
top?: number,
|
|
@@ -61,6 +61,8 @@ interface PositionOpts {
|
|
|
61
61
|
arrowBoundaryOffset?: number
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
type HeightGrowthDirection = 'top' | 'bottom';
|
|
65
|
+
|
|
64
66
|
export interface PositionResult {
|
|
65
67
|
position?: Position,
|
|
66
68
|
arrowOffsetLeft?: number,
|
|
@@ -106,6 +108,7 @@ let visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
|
106
108
|
function getContainerDimensions(containerNode: Element): Dimensions {
|
|
107
109
|
let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
|
|
108
110
|
let scroll: Position = {};
|
|
111
|
+
let isPinchZoomedIn = visualViewport?.scale > 1;
|
|
109
112
|
|
|
110
113
|
if (containerNode.tagName === 'BODY') {
|
|
111
114
|
let documentElement = document.documentElement;
|
|
@@ -113,9 +116,16 @@ function getContainerDimensions(containerNode: Element): Dimensions {
|
|
|
113
116
|
totalHeight = documentElement.clientHeight;
|
|
114
117
|
width = visualViewport?.width ?? totalWidth;
|
|
115
118
|
height = visualViewport?.height ?? totalHeight;
|
|
116
|
-
|
|
117
119
|
scroll.top = documentElement.scrollTop || containerNode.scrollTop;
|
|
118
120
|
scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
|
|
121
|
+
|
|
122
|
+
// The goal of the below is to get a top/left value that represents the top/left of the visual viewport with
|
|
123
|
+
// respect to the layout viewport origin. This combined with the scrollTop/scrollLeft will allow us to calculate
|
|
124
|
+
// coordinates/values with respect to the visual viewport or with respect to the layout viewport.
|
|
125
|
+
if (visualViewport) {
|
|
126
|
+
top = visualViewport.offsetTop;
|
|
127
|
+
left = visualViewport.offsetLeft;
|
|
128
|
+
}
|
|
119
129
|
} else {
|
|
120
130
|
({width, height, top, left} = getOffset(containerNode));
|
|
121
131
|
scroll.top = containerNode.scrollTop;
|
|
@@ -124,6 +134,17 @@ function getContainerDimensions(containerNode: Element): Dimensions {
|
|
|
124
134
|
totalHeight = height;
|
|
125
135
|
}
|
|
126
136
|
|
|
137
|
+
if (isWebKit() && (containerNode.tagName === 'BODY' || containerNode.tagName === 'HTML') && isPinchZoomedIn) {
|
|
138
|
+
// Safari will report a non-zero scrollTop/Left for the non-scrolling body/HTML element when pinch zoomed in unlike other browsers.
|
|
139
|
+
// Set to zero for parity calculations so we get consistent positioning of overlays across all browsers.
|
|
140
|
+
// Also switch to visualViewport.pageTop/pageLeft so that we still accomodate for scroll positioning for body/HTML elements that are actually scrollable
|
|
141
|
+
// before pinch zoom happens
|
|
142
|
+
scroll.top = 0;
|
|
143
|
+
scroll.left = 0;
|
|
144
|
+
top = visualViewport.pageTop;
|
|
145
|
+
left = visualViewport.pageLeft;
|
|
146
|
+
}
|
|
147
|
+
|
|
127
148
|
return {width, height, totalWidth, totalHeight, scroll, top, left};
|
|
128
149
|
}
|
|
129
150
|
|
|
@@ -136,6 +157,7 @@ function getScroll(node: Element): Offset {
|
|
|
136
157
|
};
|
|
137
158
|
}
|
|
138
159
|
|
|
160
|
+
// Determines the amount of space required when moving the overlay to ensure it remains in the boundary
|
|
139
161
|
function getDelta(
|
|
140
162
|
axis: Axis,
|
|
141
163
|
offset: number,
|
|
@@ -149,17 +171,25 @@ function getDelta(
|
|
|
149
171
|
// is portaled somewhere other than the body and has an ancestor with
|
|
150
172
|
// position: relative/absolute, it will be different.
|
|
151
173
|
containerDimensions: Dimensions,
|
|
152
|
-
padding: number
|
|
174
|
+
padding: number,
|
|
175
|
+
containerOffsetWithBoundary: Offset
|
|
153
176
|
) {
|
|
154
177
|
let containerScroll = containerDimensions.scroll[axis];
|
|
155
|
-
|
|
156
|
-
let
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
178
|
+
// The height/width of the boundary. Matches the axis along which we are adjusting the overlay position
|
|
179
|
+
let boundarySize = boundaryDimensions[AXIS_SIZE[axis]];
|
|
180
|
+
// Calculate the edges of the boundary (accomodating for the boundary padding) and the edges of the overlay.
|
|
181
|
+
// Note that these values are with respect to the visual viewport (aka 0,0 is the top left of the viewport)
|
|
182
|
+
let boundaryStartEdge = boundaryDimensions.scroll[AXIS[axis]] + padding;
|
|
183
|
+
let boundaryEndEdge = boundarySize + boundaryDimensions.scroll[AXIS[axis]] - padding;
|
|
184
|
+
let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
|
|
185
|
+
let endEdgeOffset = offset - containerScroll + size + containerOffsetWithBoundary[axis] - boundaryDimensions[AXIS[axis]];
|
|
186
|
+
|
|
187
|
+
// If any of the overlay edges falls outside of the boundary, shift the overlay the required amount to align one of the overlay's
|
|
188
|
+
// edges with the closest boundary edge.
|
|
189
|
+
if (startEdgeOffset < boundaryStartEdge) {
|
|
190
|
+
return boundaryStartEdge - startEdgeOffset;
|
|
191
|
+
} else if (endEdgeOffset > boundaryEndEdge) {
|
|
192
|
+
return Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset);
|
|
163
193
|
} else {
|
|
164
194
|
return 0;
|
|
165
195
|
}
|
|
@@ -222,7 +252,7 @@ function computePosition(
|
|
|
222
252
|
}/* else {
|
|
223
253
|
the overlay top should match the button top
|
|
224
254
|
} */
|
|
225
|
-
|
|
255
|
+
|
|
226
256
|
position[crossAxis] += crossOffset;
|
|
227
257
|
|
|
228
258
|
// overlay top overlapping arrow with button bottom
|
|
@@ -242,7 +272,6 @@ function computePosition(
|
|
|
242
272
|
} else {
|
|
243
273
|
position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
|
|
244
274
|
}
|
|
245
|
-
|
|
246
275
|
return position;
|
|
247
276
|
}
|
|
248
277
|
|
|
@@ -250,23 +279,30 @@ function getMaxHeight(
|
|
|
250
279
|
position: Position,
|
|
251
280
|
boundaryDimensions: Dimensions,
|
|
252
281
|
containerOffsetWithBoundary: Offset,
|
|
253
|
-
|
|
282
|
+
isContainerPositioned: boolean,
|
|
254
283
|
margins: Position,
|
|
255
|
-
padding: number
|
|
284
|
+
padding: number,
|
|
285
|
+
overlayHeight: number,
|
|
286
|
+
heightGrowthDirection: HeightGrowthDirection
|
|
256
287
|
) {
|
|
257
|
-
|
|
288
|
+
const containerHeight = (isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[TOTAL_SIZE.height]);
|
|
289
|
+
// For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method
|
|
290
|
+
// used in computePosition.
|
|
291
|
+
let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight);
|
|
292
|
+
let maxHeight = heightGrowthDirection !== 'top' ?
|
|
258
293
|
// We want the distance between the top of the overlay to the bottom of the boundary
|
|
259
|
-
|
|
294
|
+
Math.max(0,
|
|
260
295
|
(boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the bottom of the boundary
|
|
261
|
-
-
|
|
296
|
+
- overlayTop // this is the top of the overlay
|
|
262
297
|
- (margins.top + margins.bottom + padding) // save additional space for margin and padding
|
|
263
298
|
)
|
|
264
|
-
// We want the distance between the
|
|
299
|
+
// We want the distance between the bottom of the overlay to the top of the boundary
|
|
265
300
|
: Math.max(0,
|
|
266
|
-
(
|
|
301
|
+
(overlayTop + overlayHeight) // this is the bottom of the overlay
|
|
267
302
|
- (boundaryDimensions.top + boundaryDimensions.scroll.top) // this is the top of the boundary
|
|
268
303
|
- (margins.top + margins.bottom + padding) // save additional space for margin and padding
|
|
269
304
|
);
|
|
305
|
+
return Math.min(boundaryDimensions.height - (padding * 2), maxHeight);
|
|
270
306
|
}
|
|
271
307
|
|
|
272
308
|
function getAvailableSpace(
|
|
@@ -337,16 +373,34 @@ export function calculatePositionInternal(
|
|
|
337
373
|
}
|
|
338
374
|
}
|
|
339
375
|
|
|
340
|
-
|
|
376
|
+
// Determine the direction the height of the overlay can grow so that we can choose how to calculate the max height
|
|
377
|
+
let heightGrowthDirection: HeightGrowthDirection = 'bottom';
|
|
378
|
+
if (placementInfo.axis === 'top') {
|
|
379
|
+
if (placementInfo.placement === 'top') {
|
|
380
|
+
heightGrowthDirection = 'top';
|
|
381
|
+
} else if (placementInfo.placement === 'bottom') {
|
|
382
|
+
heightGrowthDirection = 'bottom';
|
|
383
|
+
}
|
|
384
|
+
} else if (placementInfo.crossAxis === 'top') {
|
|
385
|
+
if (placementInfo.crossPlacement === 'top') {
|
|
386
|
+
heightGrowthDirection = 'bottom';
|
|
387
|
+
} else if (placementInfo.crossPlacement === 'bottom') {
|
|
388
|
+
heightGrowthDirection = 'top';
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
|
|
341
393
|
position[crossAxis] += delta;
|
|
342
394
|
|
|
343
395
|
let maxHeight = getMaxHeight(
|
|
344
396
|
position,
|
|
345
397
|
boundaryDimensions,
|
|
346
398
|
containerOffsetWithBoundary,
|
|
347
|
-
|
|
399
|
+
isContainerPositioned,
|
|
348
400
|
margins,
|
|
349
|
-
padding
|
|
401
|
+
padding,
|
|
402
|
+
overlaySize.height,
|
|
403
|
+
heightGrowthDirection
|
|
350
404
|
);
|
|
351
405
|
|
|
352
406
|
if (userSetMaxHeight && userSetMaxHeight < maxHeight) {
|
|
@@ -356,7 +410,7 @@ export function calculatePositionInternal(
|
|
|
356
410
|
overlaySize.height = Math.min(overlaySize.height, maxHeight);
|
|
357
411
|
|
|
358
412
|
position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
|
|
359
|
-
delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
|
|
413
|
+
delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
|
|
360
414
|
position[crossAxis] += delta;
|
|
361
415
|
|
|
362
416
|
let arrowPosition: Position = {};
|
|
@@ -425,7 +479,14 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
|
|
|
425
479
|
let scrollSize = getScroll(scrollNode);
|
|
426
480
|
let boundaryDimensions = getContainerDimensions(boundaryElement);
|
|
427
481
|
let containerDimensions = getContainerDimensions(container);
|
|
482
|
+
// If the container is the HTML element wrapping the body element, the retrieved scrollTop/scrollLeft will be equal to the
|
|
483
|
+
// body element's scroll. Set the container's scroll values to 0 since the overlay's edge position value in getDelta don't then need to be further offset
|
|
484
|
+
// by the container scroll since they are essentially the same containing element and thus in the same coordinate system
|
|
428
485
|
let containerOffsetWithBoundary: Offset = boundaryElement.tagName === 'BODY' ? getOffset(container) : getPosition(container, boundaryElement);
|
|
486
|
+
if (container.tagName === 'HTML' && boundaryElement.tagName === 'BODY') {
|
|
487
|
+
containerDimensions.scroll.top = 0;
|
|
488
|
+
containerDimensions.scroll.left = 0;
|
|
489
|
+
}
|
|
429
490
|
|
|
430
491
|
return calculatePositionInternal(
|
|
431
492
|
placement,
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {calculatePosition, PositionResult} from './calculatePosition';
|
|
14
14
|
import {DOMAttributes} from '@react-types/shared';
|
|
15
15
|
import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
|
|
16
|
-
import {RefObject, useCallback, useRef, useState} from 'react';
|
|
16
|
+
import {RefObject, useCallback, useEffect, useRef, useState} from 'react';
|
|
17
17
|
import {useCloseOnScroll} from './useCloseOnScroll';
|
|
18
18
|
import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
|
|
19
19
|
import {useLocale} from '@react-aria/i18n';
|
|
@@ -124,11 +124,31 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
|
|
|
124
124
|
arrowSize
|
|
125
125
|
];
|
|
126
126
|
|
|
127
|
+
// Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might
|
|
128
|
+
// just be a non-realistic use case
|
|
129
|
+
// Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles
|
|
130
|
+
let lastScale = useRef(visualViewport?.scale);
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
if (isOpen) {
|
|
133
|
+
lastScale.current = visualViewport?.scale;
|
|
134
|
+
}
|
|
135
|
+
}, [isOpen]);
|
|
136
|
+
|
|
127
137
|
let updatePosition = useCallback(() => {
|
|
128
138
|
if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {
|
|
129
139
|
return;
|
|
130
140
|
}
|
|
131
141
|
|
|
142
|
+
if (visualViewport?.scale !== lastScale.current) {
|
|
143
|
+
return;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
// Always reset the overlay's previous max height if not defined by the user so that we can compensate for
|
|
147
|
+
// RAC collections populating after a second render and properly set a correct max height + positioning when it populates.
|
|
148
|
+
if (!maxHeight && overlayRef.current) {
|
|
149
|
+
(overlayRef.current as HTMLElement).style.maxHeight = 'none';
|
|
150
|
+
}
|
|
151
|
+
|
|
132
152
|
let position = calculatePosition({
|
|
133
153
|
placement: translateRTL(placement, direction),
|
|
134
154
|
overlayNode: overlayRef.current,
|
|
@@ -183,12 +203,19 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
|
|
|
183
203
|
updatePosition();
|
|
184
204
|
};
|
|
185
205
|
|
|
186
|
-
|
|
187
|
-
|
|
206
|
+
// Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)
|
|
207
|
+
// We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.
|
|
208
|
+
let onScroll = () => {
|
|
209
|
+
if (isResizing.current) {
|
|
210
|
+
onResize();
|
|
211
|
+
}
|
|
212
|
+
};
|
|
188
213
|
|
|
214
|
+
visualViewport?.addEventListener('resize', onResize);
|
|
215
|
+
visualViewport?.addEventListener('scroll', onScroll);
|
|
189
216
|
return () => {
|
|
190
217
|
visualViewport?.removeEventListener('resize', onResize);
|
|
191
|
-
visualViewport?.removeEventListener('scroll',
|
|
218
|
+
visualViewport?.removeEventListener('scroll', onScroll);
|
|
192
219
|
};
|
|
193
220
|
}, [updatePosition]);
|
|
194
221
|
|
package/dist/ar-AE.main.js
DELETED
package/dist/ar-AE.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,mCAAK,CAAC;AACtC","sources":["packages/@react-aria/overlays/intl/ar-AE.json"],"sourcesContent":["{\n \"dismiss\": \"تجاهل\"\n}\n"],"names":[],"version":3,"file":"ar-AE.main.js.map"}
|
package/dist/ar-AE.mjs
DELETED
package/dist/ar-AE.module.js
DELETED
package/dist/ar-AE.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,mCAAK,CAAC;AACtC","sources":["packages/@react-aria/overlays/intl/ar-AE.json"],"sourcesContent":["{\n \"dismiss\": \"تجاهل\"\n}\n"],"names":[],"version":3,"file":"ar-AE.module.js.map"}
|
package/dist/bg-BG.main.js
DELETED
package/dist/bg-BG.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,sEAAU,CAAC;AAC3C","sources":["packages/@react-aria/overlays/intl/bg-BG.json"],"sourcesContent":["{\n \"dismiss\": \"Отхвърляне\"\n}\n"],"names":[],"version":3,"file":"bg-BG.main.js.map"}
|
package/dist/bg-BG.mjs
DELETED
package/dist/bg-BG.module.js
DELETED
package/dist/bg-BG.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,sEAAU,CAAC;AAC3C","sources":["packages/@react-aria/overlays/intl/bg-BG.json"],"sourcesContent":["{\n \"dismiss\": \"Отхвърляне\"\n}\n"],"names":[],"version":3,"file":"bg-BG.module.js.map"}
|
package/dist/cs-CZ.main.js
DELETED
package/dist/cs-CZ.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,SAAS,CAAC;AAC1C","sources":["packages/@react-aria/overlays/intl/cs-CZ.json"],"sourcesContent":["{\n \"dismiss\": \"Odstranit\"\n}\n"],"names":[],"version":3,"file":"cs-CZ.main.js.map"}
|
package/dist/cs-CZ.mjs
DELETED
package/dist/cs-CZ.module.js
DELETED
package/dist/cs-CZ.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,SAAS,CAAC;AAC1C","sources":["packages/@react-aria/overlays/intl/cs-CZ.json"],"sourcesContent":["{\n \"dismiss\": \"Odstranit\"\n}\n"],"names":[],"version":3,"file":"cs-CZ.module.js.map"}
|
package/dist/da-DK.main.js
DELETED
package/dist/da-DK.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,GAAG,CAAC;AACpC","sources":["packages/@react-aria/overlays/intl/da-DK.json"],"sourcesContent":["{\n \"dismiss\": \"Luk\"\n}\n"],"names":[],"version":3,"file":"da-DK.main.js.map"}
|
package/dist/da-DK.mjs
DELETED
package/dist/da-DK.module.js
DELETED
package/dist/da-DK.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,GAAG,CAAC;AACpC","sources":["packages/@react-aria/overlays/intl/da-DK.json"],"sourcesContent":["{\n \"dismiss\": \"Luk\"\n}\n"],"names":[],"version":3,"file":"da-DK.module.js.map"}
|
package/dist/de-DE.main.js
DELETED
package/dist/de-DE.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,YAAS,CAAC;AAC1C","sources":["packages/@react-aria/overlays/intl/de-DE.json"],"sourcesContent":["{\n \"dismiss\": \"Schließen\"\n}\n"],"names":[],"version":3,"file":"de-DE.main.js.map"}
|
package/dist/de-DE.mjs
DELETED
package/dist/de-DE.module.js
DELETED
package/dist/de-DE.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,YAAS,CAAC;AAC1C","sources":["packages/@react-aria/overlays/intl/de-DE.json"],"sourcesContent":["{\n \"dismiss\": \"Schließen\"\n}\n"],"names":[],"version":3,"file":"de-DE.module.js.map"}
|
package/dist/el-GR.main.js
DELETED
package/dist/el-GR.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,wDAAQ,CAAC;AACzC","sources":["packages/@react-aria/overlays/intl/el-GR.json"],"sourcesContent":["{\n \"dismiss\": \"Απόρριψη\"\n}\n"],"names":[],"version":3,"file":"el-GR.main.js.map"}
|
package/dist/el-GR.mjs
DELETED
package/dist/el-GR.module.js
DELETED
package/dist/el-GR.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,wDAAQ,CAAC;AACzC","sources":["packages/@react-aria/overlays/intl/el-GR.json"],"sourcesContent":["{\n \"dismiss\": \"Απόρριψη\"\n}\n"],"names":[],"version":3,"file":"el-GR.module.js.map"}
|
package/dist/en-US.main.js
DELETED
package/dist/en-US.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,OAAO,CAAC;AACxC","sources":["packages/@react-aria/overlays/intl/en-US.json"],"sourcesContent":["{\n \"dismiss\": \"Dismiss\"\n}\n"],"names":[],"version":3,"file":"en-US.main.js.map"}
|
package/dist/en-US.mjs
DELETED
package/dist/en-US.module.js
DELETED
package/dist/en-US.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,OAAO,CAAC;AACxC","sources":["packages/@react-aria/overlays/intl/en-US.json"],"sourcesContent":["{\n \"dismiss\": \"Dismiss\"\n}\n"],"names":[],"version":3,"file":"en-US.module.js.map"}
|
package/dist/es-ES.main.js
DELETED
package/dist/es-ES.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,SAAS,CAAC;AAC1C","sources":["packages/@react-aria/overlays/intl/es-ES.json"],"sourcesContent":["{\n \"dismiss\": \"Descartar\"\n}\n"],"names":[],"version":3,"file":"es-ES.main.js.map"}
|
package/dist/es-ES.mjs
DELETED
package/dist/es-ES.module.js
DELETED
package/dist/es-ES.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,SAAS,CAAC;AAC1C","sources":["packages/@react-aria/overlays/intl/es-ES.json"],"sourcesContent":["{\n \"dismiss\": \"Descartar\"\n}\n"],"names":[],"version":3,"file":"es-ES.module.js.map"}
|
package/dist/et-EE.main.js
DELETED
package/dist/et-EE.main.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":"AAAA,iBAAiB;IAAG,WAAW,CAAC,SAAM,CAAC;AACvC","sources":["packages/@react-aria/overlays/intl/et-EE.json"],"sourcesContent":["{\n \"dismiss\": \"Lõpeta\"\n}\n"],"names":[],"version":3,"file":"et-EE.main.js.map"}
|
package/dist/et-EE.mjs
DELETED
package/dist/et-EE.module.js
DELETED
package/dist/et-EE.module.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"mappings":";AAAA,4BAAiB;IAAG,WAAW,CAAC,SAAM,CAAC;AACvC","sources":["packages/@react-aria/overlays/intl/et-EE.json"],"sourcesContent":["{\n \"dismiss\": \"Lõpeta\"\n}\n"],"names":[],"version":3,"file":"et-EE.module.js.map"}
|