@react-aria/overlays 3.17.0 → 3.18.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.
Files changed (9) hide show
  1. package/dist/import.mjs +49 -44
  2. package/dist/main.js +48 -43
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +49 -44
  5. package/dist/module.js.map +1 -1
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +11 -11
  8. package/src/Overlay.tsx +13 -12
  9. package/src/calculatePosition.ts +17 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-aria/overlays",
3
- "version": "3.17.0",
3
+ "version": "3.18.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -22,16 +22,16 @@
22
22
  "url": "https://github.com/adobe/react-spectrum"
23
23
  },
24
24
  "dependencies": {
25
- "@react-aria/focus": "^3.14.1",
26
- "@react-aria/i18n": "^3.8.2",
27
- "@react-aria/interactions": "^3.18.0",
25
+ "@react-aria/focus": "^3.14.2",
26
+ "@react-aria/i18n": "^3.8.3",
27
+ "@react-aria/interactions": "^3.19.0",
28
28
  "@react-aria/ssr": "^3.8.0",
29
- "@react-aria/utils": "^3.20.0",
30
- "@react-aria/visually-hidden": "^3.8.4",
31
- "@react-stately/overlays": "^3.6.2",
32
- "@react-types/button": "^3.8.0",
33
- "@react-types/overlays": "^3.8.2",
34
- "@react-types/shared": "^3.20.0",
29
+ "@react-aria/utils": "^3.21.0",
30
+ "@react-aria/visually-hidden": "^3.8.5",
31
+ "@react-stately/overlays": "^3.6.3",
32
+ "@react-types/button": "^3.9.0",
33
+ "@react-types/overlays": "^3.8.3",
34
+ "@react-types/shared": "^3.21.0",
35
35
  "@swc/helpers": "^0.5.0"
36
36
  },
37
37
  "peerDependencies": {
@@ -41,5 +41,5 @@
41
41
  "publishConfig": {
42
42
  "access": "public"
43
43
  },
44
- "gitHead": "54fbaa67cc56867506811819fef765546d403253"
44
+ "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
45
45
  }
package/src/Overlay.tsx CHANGED
@@ -10,6 +10,7 @@
10
10
  * governing permissions and limitations under the License.
11
11
  */
12
12
 
13
+ import {ClearPressResponder} from '@react-aria/interactions';
13
14
  import {FocusScope} from '@react-aria/focus';
14
15
  import React, {ReactNode, useContext, useMemo, useState} from 'react';
15
16
  import ReactDOM from 'react-dom';
@@ -53,23 +54,23 @@ export function Overlay(props: OverlayProps) {
53
54
  return null;
54
55
  }
55
56
 
56
- let contents;
57
+ let contents = props.children;
57
58
  if (!props.disableFocusManagement) {
58
59
  contents = (
59
- <OverlayContext.Provider value={contextValue}>
60
- <FocusScope restoreFocus contain={contain && !isExiting}>
61
- {props.children}
62
- </FocusScope>
63
- </OverlayContext.Provider>
64
- );
65
- } else {
66
- contents = (
67
- <OverlayContext.Provider value={contextValue}>
68
- {props.children}
69
- </OverlayContext.Provider>
60
+ <FocusScope restoreFocus contain={contain && !isExiting}>
61
+ {contents}
62
+ </FocusScope>
70
63
  );
71
64
  }
72
65
 
66
+ contents = (
67
+ <OverlayContext.Provider value={contextValue}>
68
+ <ClearPressResponder>
69
+ {contents}
70
+ </ClearPressResponder>
71
+ </OverlayContext.Provider>
72
+ );
73
+
73
74
  return ReactDOM.createPortal(contents, portalContainer);
74
75
  }
75
76
 
package/src/calculatePosition.ts CHANGED
@@ -140,21 +140,26 @@ function getDelta(
140
140
  axis: Axis,
141
141
  offset: number,
142
142
  size: number,
143
+ // The dimensions of the boundary element that the popover is
144
+ // positioned within (most of the time this is the <body>).
145
+ boundaryDimensions: Dimensions,
146
+ // The dimensions of the containing block element that the popover is
147
+ // positioned relative to (e.g. parent with position: relative).
148
+ // Usually this is the same as the boundary element, but if the popover
149
+ // is portaled somewhere other than the body and has an ancestor with
150
+ // position: relative/absolute, it will be different.
143
151
  containerDimensions: Dimensions,
144
152
  padding: number
145
153
  ) {
146
- let root = document.scrollingElement || document.documentElement;
147
- let isScrollPrevented = window.getComputedStyle(root).overflow === 'hidden';
148
- let containerScroll = isScrollPrevented ? 0 : containerDimensions.scroll[axis];
149
- let containerHeight = containerDimensions[AXIS_SIZE[axis]];
150
-
154
+ let containerScroll = containerDimensions.scroll[axis];
155
+ let boundaryHeight = boundaryDimensions[AXIS_SIZE[axis]];
151
156
  let startEdgeOffset = offset - padding - containerScroll;
152
157
  let endEdgeOffset = offset + padding - containerScroll + size;
153
158
 
154
159
  if (startEdgeOffset < 0) {
155
160
  return -startEdgeOffset;
156
- } else if (endEdgeOffset > containerHeight) {
157
- return Math.max(containerHeight - endEdgeOffset, -startEdgeOffset);
161
+ } else if (endEdgeOffset > boundaryHeight) {
162
+ return Math.max(boundaryHeight - endEdgeOffset, -startEdgeOffset);
158
163
  } else {
159
164
  return 0;
160
165
  }
@@ -289,6 +294,7 @@ export function calculatePositionInternal(
289
294
  padding: number,
290
295
  flip: boolean,
291
296
  boundaryDimensions: Dimensions,
297
+ containerDimensions: Dimensions,
292
298
  containerOffsetWithBoundary: Offset,
293
299
  offset: number,
294
300
  crossOffset: number,
@@ -331,7 +337,7 @@ export function calculatePositionInternal(
331
337
  }
332
338
  }
333
339
 
334
- let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
340
+ let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
335
341
  position[crossAxis] += delta;
336
342
 
337
343
  let maxHeight = getMaxHeight(
@@ -350,7 +356,7 @@ export function calculatePositionInternal(
350
356
  overlaySize.height = Math.min(overlaySize.height, maxHeight);
351
357
 
352
358
  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
353
- delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
359
+ delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
354
360
  position[crossAxis] += delta;
355
361
 
356
362
  let arrowPosition: Position = {};
@@ -418,6 +424,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
418
424
 
419
425
  let scrollSize = getScroll(scrollNode);
420
426
  let boundaryDimensions = getContainerDimensions(boundaryElement);
427
+ let containerDimensions = getContainerDimensions(container);
421
428
  let containerOffsetWithBoundary: Offset = boundaryElement.tagName === 'BODY' ? getOffset(container) : getPosition(container, boundaryElement);
422
429
 
423
430
  return calculatePositionInternal(
@@ -429,6 +436,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
429
436
  padding,
430
437
  shouldFlip,
431
438
  boundaryDimensions,
439
+ containerDimensions,
432
440
  containerOffsetWithBoundary,
433
441
  offset,
434
442
  crossOffset,