Add data-crossplacement

Author: OliverJAsh

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -68,7 +68,8 @@ export interface PositionResult {
   arrowOffsetLeft?: number,
   arrowOffsetTop?: number,
   maxHeight: number,
-  placement: PlacementAxis
+  placement: PlacementAxis,
+  crossPlacement: PlacementAxis
 }
 
 const AXIS = {
@@ -441,7 +442,8 @@ export function calculatePositionInternal(
     maxHeight: maxHeight,
     arrowOffsetLeft: arrowPosition.left,
     arrowOffsetTop: arrowPosition.top,
-    placement: placementInfo.placement
+    placement: placementInfo.placement,
+    crossPlacement: placementInfo.crossPlacement
   };
 }
 

packages/@react-aria/overlays/src/useOverlayPosition.ts

@@ -68,6 +68,8 @@ export interface PositionAria {
   arrowProps: DOMAttributes,
   /** Placement of the overlay with respect to the overlay trigger. */
   placement: PlacementAxis | null,
+  /** Cross placement of the overlay with respect to the overlay trigger. */
+  crossPlacement: PlacementAxis | null,
   /** Updates the position of the overlay. */
   updatePosition(): void
 }
@@ -287,6 +289,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       }
     },
     placement: position?.placement ?? null,
+    crossPlacement: position?.crossPlacement ?? null,
     arrowProps: {
       'aria-hidden': 'true',
       role: 'presentation',

packages/@react-aria/overlays/src/usePopover.ts

@@ -69,7 +69,9 @@ export interface PopoverAria {
   /** Props to apply to the underlay element, if any. */
   underlayProps: DOMAttributes,
   /** Placement of the popover with respect to the trigger. */
-  placement: PlacementAxis | null
+  placement: PlacementAxis | null,
+  /** Cross placement of the popover with respect to the trigger. */
+  crossPlacement: PlacementAxis | null
 }
 
 /**
@@ -101,7 +103,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     groupRef ?? popoverRef
   );
 
-  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
+  let {overlayProps: positionProps, arrowProps, placement, crossPlacement} = useOverlayPosition({
     ...otherProps,
     targetRef: triggerRef,
     overlayRef: popoverRef,
@@ -127,6 +129,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     popoverProps: mergeProps(overlayProps, positionProps),
     arrowProps,
     underlayProps,
-    placement
+    placement,
+    crossPlacement
   };
 }

packages/react-aria-components/src/Popover.tsx

@@ -151,7 +151,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
     }
   }, [state.isOpen, arrowRef]);
 
-  let {popoverProps, underlayProps, arrowProps, placement} = usePopover({
+  let {popoverProps, underlayProps, arrowProps, placement, crossPlacement} = usePopover({
     ...props,
     offset: props.offset ?? 8,
     arrowSize: arrowWidth,
@@ -205,6 +205,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, ...props}: Po
       dir={props.dir}
       data-trigger={props.trigger}
       data-placement={placement}
+      data-crossplacement={crossPlacement}
       data-entering={isEntering || undefined}
       data-exiting={isExiting || undefined}>
       {!props.isNonModal && <DismissButton onDismiss={state.close} />}