Replace polyfill with useAnchoredPosition (#7725)

Co-authored-by: TylerJDev <26746305+TylerJDev@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

Author: TylerJDev

.changeset/eight-eagles-deny.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+AnchoredOverlay: Remove polyfill for CSS Anchor Positioning, use primer/behaviors as fallback. Ensure overlays take available space.

.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Fullscreen-Variant-light-css-anchor-positioning-linux.png

@@ -78,7 +78,6 @@
     "@github/relative-time-element": "^5.0.0",
     "@github/tab-container-element": "^4.8.2",
     "@lit-labs/react": "1.2.1",
-    "@oddbird/css-anchor-positioning": "^0.9.0",
     "@oddbird/popover-polyfill": "^0.5.2",
     "@primer/behaviors": "^1.10.2",
     "@primer/live-region-element": "^0.7.1",

.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Multiple-Overlays-External-anchor-2-light-css-anchor-positioning-linux.png

@@ -27,31 +27,56 @@
     margin: 0;
     padding: 0;
     border: 0;
-    max-height: none;
     max-width: none;
   }
 
   &[data-side='outside-bottom'] {
     /* stylelint-disable primer/spacing */
     top: calc(anchor(bottom) + var(--base-size-4));
     left: anchor(left);
+
+    &[data-align='left'] {
+      left: auto;
+      right: calc(anchor(right) - var(--anchored-overlay-anchor-offset-left));
+    }
   }
 
   &[data-side='outside-top'] {
     margin-bottom: var(--base-size-4);
     bottom: anchor(top);
     left: anchor(left);
+
+    &[data-align='left'] {
+      left: auto;
+      right: anchor(right);
+    }
   }
 
   &[data-side='outside-left'] {
     right: anchor(left);
     top: anchor(top);
     margin-right: var(--base-size-4);
+    position-try-fallbacks: flip-inline, flip-block, flip-start, --outside-left-to-bottom;
   }
 
   &[data-side='outside-right'] {
     left: anchor(right);
     top: anchor(top);
     margin-left: var(--base-size-4);
+    position-try-fallbacks: flip-inline, flip-block, flip-start, --outside-right-to-bottom;
   }
 }
+
+@position-try --outside-left-to-bottom {
+  right: anchor(right);
+  top: calc(anchor(bottom) + var(--base-size-4));
+  margin: 0;
+  width: auto;
+}
+
+@position-try --outside-right-to-bottom {
+  left: anchor(left);
+  top: calc(anchor(bottom) + var(--base-size-4));
+  margin: 0;
+  width: auto;
+}

.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Overlay-Props-Overrides-light-css-anchor-positioning-linux.png

@@ -16,6 +16,7 @@ import {XIcon} from '@primer/octicons-react'
 import classes from './AnchoredOverlay.module.css'
 import {clsx} from 'clsx'
 import {useFeatureFlag} from '../FeatureFlags'
+import {widthMap} from '../Overlay/Overlay'
 
 interface AnchoredOverlayPropsWithAnchor {
   /**
@@ -125,17 +126,6 @@ export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
   (AnchoredOverlayPropsWithAnchor | AnchoredOverlayPropsWithoutAnchor) &
   Partial<Pick<PositionSettings, 'align' | 'side' | 'anchorOffset' | 'alignmentOffset' | 'displayInViewport'>>
 
-const applyAnchorPositioningPolyfill = async () => {
-  if (typeof window !== 'undefined' && !('anchorName' in document.documentElement.style)) {
-    try {
-      await import('@oddbird/css-anchor-positioning')
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.warn('Failed to load CSS anchor positioning polyfill:', e)
-    }
-  }
-}
-
 const defaultVariant = {
   regular: 'anchored',
   narrow: 'anchored',
@@ -173,7 +163,9 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   displayCloseButton = true,
   closeButtonProps = defaultCloseButtonProps,
 }) => {
-  const cssAnchorPositioning = useFeatureFlag('primer_react_css_anchor_positioning')
+  const cssAnchorPositioningFlag = useFeatureFlag('primer_react_css_anchor_positioning')
+  const supportsNativeCSSAnchorPositioning = useRef(false)
+  const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning.current
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
   const anchorId = useId(externalAnchorId)
@@ -232,19 +224,14 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
     [overlayRef.current],
   )
 
-  const hasLoadedAnchorPositioningPolyfill = useRef(false)
-
   useEffect(() => {
+    supportsNativeCSSAnchorPositioning.current = 'anchorName' in document.documentElement.style
+
     // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
     if (!open && overlayRef.current) {
       updateOverlayRef(null)
     }
-
-    if (cssAnchorPositioning && !hasLoadedAnchorPositioningPolyfill.current) {
-      applyAnchorPositioningPolyfill()
-      hasLoadedAnchorPositioningPolyfill.current = true
-    }
-  }, [open, overlayRef, updateOverlayRef, cssAnchorPositioning])
+  }, [open, overlayRef, updateOverlayRef])
 
   useFocusZone({
     containerRef: overlayRef,
@@ -282,14 +269,27 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
 
     if (!cssAnchorPositioning || !open || !currentOverlay) return
     currentOverlay.style.setProperty('position-anchor', `--anchored-overlay-anchor-${id}`)
+
+    const anchorElement = anchorRef.current
+    if (anchorElement) {
+      const overlayWidth = width ? parseInt(widthMap[width]) : null
+      const result = getDefaultPosition(anchorElement, overlayWidth)
+
+      currentOverlay.setAttribute('data-align', result.horizontal)
+
+      // Apply offset only when viewport is too narrow
+      const offset = result.horizontal === 'left' ? result.leftOffset : result.rightOffset
+      currentOverlay.style.setProperty(`--anchored-overlay-anchor-offset-${result.horizontal}`, `${offset || 0}px`)
+    }
+
     try {
       if (!currentOverlay.matches(':popover-open')) {
         currentOverlay.showPopover()
       }
     } catch {
       // Ignore if popover is already showing or not supported
     }
-  }, [cssAnchorPositioning, open, overlayElement, id, overlayRef])
+  }, [cssAnchorPositioning, open, overlayElement, id, overlayRef, anchorRef, width])
 
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby']
@@ -365,6 +365,31 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   )
 }
 
+function getDefaultPosition(
+  anchorElement: HTMLElement,
+  overlayWidth: number | null,
+): {horizontal: 'left' | 'right'; leftOffset?: number; rightOffset?: number} {
+  const rect = anchorElement.getBoundingClientRect()
+  const vw = window.innerWidth
+  const viewportMargin = 8
+  const spaceLeft = rect.left
+  const spaceRight = vw - rect.right
+  const horizontal: 'left' | 'right' = spaceLeft > spaceRight ? 'left' : 'right'
+
+  // If there's no explicit overlay width, or either side has enough space
+  // to contain the overlay, let CSS position-try-fallbacks handle positioning
+  if (!overlayWidth || spaceLeft >= overlayWidth + viewportMargin || spaceRight >= overlayWidth + viewportMargin) {
+    return {horizontal}
+  }
+
+  // If the viewport is too narrow to fit the overlay on either side, calculate offsets to prevent overflow
+  // leftOffset is how much to shift the overlay to the right, rightOffset is how much to shift the overlay to the left
+  const leftOffset = Math.max(0, overlayWidth - rect.right + viewportMargin)
+  const rightOffset = Math.max(0, rect.left + overlayWidth - vw + viewportMargin)
+
+  return {horizontal, leftOffset, rightOffset}
+}
+
 function assignRef<T>(
   ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined,
   value: T | null,

.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/AnchoredOverlay-Width-light-css-anchor-positioning-linux.png

@@ -200,7 +200,8 @@
     visibility: hidden;
   }
 
-  &:where([data-responsive='fullscreen']) {
+  &:where([data-responsive='fullscreen']),
+  &[data-responsive='fullscreen'][data-anchor-position='true'] {
     @media screen and (--viewportRange-narrow) {
       position: fixed;
       top: 0;

packages/react/package.json

@@ -33,8 +33,7 @@ export const heightMap = {
   'fit-content': 'fit-content',
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-useless-assignment
-const widthMap = {
+export const widthMap = {
   small: '256px',
   medium: '320px',
   large: '480px',