@react-aria/overlays 3.13.0 → 3.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,16 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.11.0",
-    "@react-aria/i18n": "^3.7.0",
-    "@react-aria/interactions": "^3.14.0",
-    "@react-aria/ssr": "^3.5.0",
-    "@react-aria/utils": "^3.15.0",
-    "@react-aria/visually-hidden": "^3.7.0",
-    "@react-stately/overlays": "^3.5.0",
-    "@react-types/button": "^3.7.1",
-    "@react-types/overlays": "^3.7.0",
-    "@react-types/shared": "^3.17.0",
+    "@react-aria/focus": "^3.12.0",
+    "@react-aria/i18n": "^3.7.1",
+    "@react-aria/interactions": "^3.15.0",
+    "@react-aria/ssr": "^3.6.0",
+    "@react-aria/utils": "^3.16.0",
+    "@react-aria/visually-hidden": "^3.8.0",
+    "@react-stately/overlays": "^3.5.1",
+    "@react-types/button": "^3.7.2",
+    "@react-types/overlays": "^3.7.1",
+    "@react-types/shared": "^3.18.0",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
+  "gitHead": "9d1ba9bd8ebcd63bf3495ade16d349bcb71795ce"
 }

package/src/calculatePosition.ts

@@ -11,6 +11,7 @@
  */
 
 import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
+import {clamp} from '@react-aria/utils';
 
 interface Position {
   top?: number,
@@ -22,6 +23,8 @@ interface Position {
 interface Dimensions {
   width: number,
   height: number,
+  totalWidth: number,
+  totalHeight: number,
   top: number,
   left: number,
   scroll: Position
@@ -44,6 +47,7 @@ interface Offset {
 }
 
 interface PositionOpts {
+  arrowSize: number,
   placement: Placement,
   targetNode: Element,
   overlayNode: Element,
@@ -53,7 +57,8 @@ interface PositionOpts {
   boundaryElement: Element,
   offset: number,
   crossOffset: number,
-  maxHeight?: number
+  maxHeight?: number,
+  arrowBoundaryOffset?: number
 }
 
 export interface PositionResult {
@@ -88,19 +93,26 @@ const AXIS_SIZE = {
   left: 'width'
 };
 
+const TOTAL_SIZE = {
+  width: 'totalWidth',
+  height: 'totalHeight'
+};
+
 const PARSED_PLACEMENT_CACHE = {};
 
 // @ts-ignore
 let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
 function getContainerDimensions(containerNode: Element): Dimensions {
-  let width = 0, height = 0, top = 0, left = 0;
+  let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
   let scroll: Position = {};
 
   if (containerNode.tagName === 'BODY') {
     let documentElement = document.documentElement;
-    width = visualViewport?.width ?? documentElement.clientWidth;
-    height = visualViewport?.height ?? documentElement.clientHeight;
+    totalWidth = documentElement.clientWidth;
+    totalHeight = documentElement.clientHeight;
+    width = visualViewport?.width ?? totalWidth;
+    height = visualViewport?.height ?? totalHeight;
 
     scroll.top = documentElement.scrollTop || containerNode.scrollTop;
     scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
@@ -108,9 +120,11 @@ function getContainerDimensions(containerNode: Element): Dimensions {
     ({width, height, top, left} = getOffset(containerNode));
     scroll.top = containerNode.scrollTop;
     scroll.left = containerNode.scrollLeft;
+    totalWidth = width;
+    totalHeight = height;
   }
 
-  return {width, height, scroll, top, left};
+  return {width, height, totalWidth, totalHeight, scroll, top, left};
 }
 
 function getScroll(node: Element): Offset {
@@ -181,7 +195,9 @@ function computePosition(
   offset: number,
   crossOffset: number,
   containerOffsetWithBoundary: Offset,
-  isContainerPositioned: boolean
+  isContainerPositioned: boolean,
+  arrowSize: number,
+  arrowBoundaryOffset: number
 ) {
   let {placement, crossPlacement, axis, crossAxis, size, crossSize} = placementInfo;
   let position: Position = {};
@@ -202,13 +218,11 @@ function computePosition(
   // add the crossOffset from props
   position[crossAxis] += crossOffset;
 
-  // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
-  let minViablePosition = childOffset[crossAxis] + (childOffset[crossSize] / 2) - overlaySize[crossSize];
-  // this is button position of center, aligns top of overlay with button center
-  let maxViablePosition = childOffset[crossAxis] + (childOffset[crossSize] / 2);
-
-  // clamp it into the range of the min/max positions
-  position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition);
+  // overlay top overlapping arrow with button bottom
+  const minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset;
+  // overlay bottom overlapping arrow with button top
+  const maxPosition = childOffset[crossAxis] + childOffset[crossSize] - arrowSize - arrowBoundaryOffset;
+  position[crossAxis] = clamp(position[crossAxis], minPosition, maxPosition);
 
   // Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
   if (placement === axis) {
@@ -216,7 +230,7 @@ function computePosition(
     // height, as `bottom` will be relative to this height.  But if the container is static,
     // then it can only be the `document.body`, and `bottom` will be relative to _its_
     // container, which should be as large as boundaryDimensions.
-    const containerHeight = (isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[size]);
+    const containerHeight = (isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[TOTAL_SIZE[size]]);
     position[FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
   } else {
     position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
@@ -277,11 +291,13 @@ export function calculatePositionInternal(
   offset: number,
   crossOffset: number,
   isContainerPositioned: boolean,
-  userSetMaxHeight?: number
+  userSetMaxHeight: number | undefined,
+  arrowSize: number,
+  arrowBoundaryOffset: number
 ): PositionResult {
   let placementInfo = parsePlacement(placementInput);
   let {size, crossAxis, crossSize, placement, crossPlacement} = placementInfo;
-  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
   let normalizedOffset = offset;
   let space = getAvailableSpace(
     boundaryDimensions,
@@ -295,7 +311,7 @@ export function calculatePositionInternal(
   // Check if the scroll size of the overlay is greater than the available space to determine if we need to flip
   if (flip && scrollSize[size] > space) {
     let flippedPlacementInfo = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}` as Placement);
-    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
     let flippedSpace = getAvailableSpace(
       boundaryDimensions,
       containerOffsetWithBoundary,
@@ -331,12 +347,27 @@ export function calculatePositionInternal(
 
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
 
-  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
   delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
   position[crossAxis] += delta;
 
   let arrowPosition: Position = {};
-  arrowPosition[crossAxis] = (childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2);
+
+  // All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
+  // Prefer the arrow being in the center of the trigger/overlay anchor element
+  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - overlaySize[crossAxis];
+
+  // Min/Max position limits for the arrow with respect to the overlay
+  const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
+  const arrowMaxPosition = overlaySize[crossSize] - (arrowSize / 2) - arrowBoundaryOffset;
+
+  // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
+  const arrowOverlappingChildMinEdge = childOffset[crossAxis] - overlaySize[crossAxis] + (arrowSize / 2);
+  const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - overlaySize[crossAxis] - (arrowSize / 2);
+
+  // Clamp the arrow positioning so that it always is within the bounds of the anchor and the overlay
+  const arrowPositionOverlappingChild = clamp(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
+  arrowPosition[crossAxis] = clamp(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
 
   return {
     position,
@@ -361,16 +392,18 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     boundaryElement,
     offset,
     crossOffset,
-    maxHeight
+    maxHeight,
+    arrowSize,
+    arrowBoundaryOffset = 0
   } = opts;
 
-  let container = ((overlayNode instanceof HTMLElement && overlayNode.offsetParent) || document.body) as Element;
-  let isBodyContainer = container.tagName === 'BODY';
+  let container = overlayNode instanceof HTMLElement ? getContainingBlock(overlayNode) : document.documentElement;
+  let isViewportContainer = container === document.documentElement;
   const containerPositionStyle = window.getComputedStyle(container).position;
   let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';
-  let childOffset: Offset = isBodyContainer ? getOffset(targetNode) : getPosition(targetNode, container);
+  let childOffset: Offset = isViewportContainer ? getOffset(targetNode) : getPosition(targetNode, container);
 
-  if (!isBodyContainer) {
+  if (!isViewportContainer) {
     let {marginTop, marginLeft} = window.getComputedStyle(targetNode);
     childOffset.top += parseInt(marginTop, 10) || 0;
     childOffset.left += parseInt(marginLeft, 10) || 0;
@@ -398,7 +431,9 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     offset,
     crossOffset,
     isContainerPositioned,
-    maxHeight
+    maxHeight,
+    arrowSize,
+    arrowBoundaryOffset
   );
 }
 
@@ -433,3 +468,54 @@ function getPosition(node: Element, parent: Element): Offset {
   offset.left -= parseInt(style.marginLeft, 10) || 0;
   return offset;
 }
+
+// Returns the containing block of an element, which is the element that
+// this element will be positioned relative to.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
+function getContainingBlock(node: HTMLElement): Element {
+  // The offsetParent of an element in most cases equals the containing block.
+  // https://w3c.github.io/csswg-drafts/cssom-view/#dom-htmlelement-offsetparent
+  let offsetParent = node.offsetParent;
+
+  // The offsetParent algorithm terminates at the document body,
+  // even if the body is not a containing block. Double check that
+  // and use the documentElement if so.
+  if (
+    offsetParent &&
+    offsetParent === document.body &&
+    window.getComputedStyle(offsetParent).position === 'static' &&
+    !isContainingBlock(offsetParent)
+  ) {
+    offsetParent = document.documentElement;
+  }
+
+  // TODO(later): handle table elements?
+
+  // The offsetParent can be null if the element has position: fixed, or a few other cases.
+  // We have to walk up the tree manually in this case because fixed positioned elements
+  // are still positioned relative to their containing block, which is not always the viewport.
+  if (offsetParent == null) {
+    offsetParent = node.parentElement;
+    while (offsetParent && !isContainingBlock(offsetParent)) {
+      offsetParent = offsetParent.parentElement;
+    }
+  }
+
+  // Fall back to the viewport.
+  return offsetParent || document.documentElement;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+function isContainingBlock(node: Element): boolean {
+  let style = window.getComputedStyle(node);
+  return (
+    style.transform !== 'none' ||
+    /transform|perspective/.test(style.willChange) ||
+    style.filter !== 'none' ||
+    style.contain === 'paint' ||
+    // @ts-ignore
+    ('backdropFilter' in style && style.backdropFilter !== 'none') ||
+    // @ts-ignore
+    ('WebkitBackdropFilter' in style && style.WebkitBackdropFilter !== 'none')
+  );
+}

package/src/index.ts

@@ -28,3 +28,4 @@ export type {DismissButtonProps} from './DismissButton';
 export type {AriaPopoverProps, PopoverAria} from './usePopover';
 export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';
 export type {OverlayProps} from './Overlay';
+export type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';

package/src/useOverlayPosition.ts

@@ -19,6 +19,11 @@ import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 
 export interface AriaPositionProps extends PositionProps {
+  /**
+   * Cross size of the overlay arrow in pixels.
+   * @default 0
+   */
+  arrowSize?: number,
   /**
    * Element that that serves as the positioning boundary.
    * @default document.body
@@ -48,7 +53,12 @@ export interface AriaPositionProps extends PositionProps {
    * The maxHeight specified for the overlay element.
    * By default, it will take all space up to the current viewport height.
    */
-  maxHeight?: number
+  maxHeight?: number,
+  /**
+   * The minimum distance the arrow's edge should be from the edge of the overlay element.
+   * @default 0
+   */
+  arrowBoundaryOffset?: number
 }
 
 export interface PositionAria {
@@ -72,6 +82,7 @@ let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   let {direction} = useLocale();
   let {
+    arrowSize = 0,
     targetRef,
     overlayRef,
     scrollRef = overlayRef,
@@ -84,7 +95,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     shouldUpdatePosition = true,
     isOpen = true,
     onClose,
-    maxHeight
+    maxHeight,
+    arrowBoundaryOffset = 0
   } = props;
   let [position, setPosition] = useState<PositionResult>({
     position: {},
@@ -107,7 +119,9 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     crossOffset,
     isOpen,
     direction,
-    maxHeight
+    maxHeight,
+    arrowBoundaryOffset,
+    arrowSize
   ];
 
   let updatePosition = useCallback(() => {
@@ -125,7 +139,9 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       boundaryElement,
       offset,
       crossOffset,
-      maxHeight
+      maxHeight,
+      arrowSize,
+      arrowBoundaryOffset
     });
 
     // Modify overlay styles directly so positioning happens immediately without the need of a second render
@@ -168,9 +184,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     };
 
     visualViewport?.addEventListener('resize', onResize);
+    visualViewport?.addEventListener('scroll', onResize);
 
     return () => {
       visualViewport?.removeEventListener('resize', onResize);
+      visualViewport?.removeEventListener('scroll', onResize);
     };
   }, [updatePosition]);
 

package/src/useOverlayTrigger.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMProps} from '@react-types/shared';
 import {onCloseMap} from './useCloseOnScroll';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {RefObject, useEffect} from 'react';
@@ -27,7 +27,7 @@ export interface OverlayTriggerAria {
   triggerProps: AriaButtonProps,
 
   /** Props for the overlay container element. */
-  overlayProps: DOMAttributes
+  overlayProps: DOMProps
 }
 
 /**