Skip to content

Make popover in AnchoredOverlay opt-in #7766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TylerJDev wants to merge 7 commits into
base: main
Choose a base branch
from
+85 −9
Open

Make popover in AnchoredOverlay opt-in #7766

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c0d75b6
Make popover in `AnchoredOverlay` opt-in
TylerJDev Apr 17, 2026
aa8b979
Merge branch 'main' into tylerjdev/make-popover-opt-in
TylerJDev Apr 17, 2026
f68e82b
Some clean up
TylerJDev Apr 17, 2026
6770095
Add changeset
TylerJDev Apr 17, 2026
d9716f0
Update packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
TylerJDev Apr 20, 2026
f7596e9
Change prop name; add test
TylerJDev Apr 20, 2026
73d3763
Merge branch 'main' into tylerjdev/make-popover-opt-in
TylerJDev Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hot-phones-sing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---
Comment thread
TylerJDev marked this conversation as resolved.

AnchoredOverlay: (Behind feature flag) Make popover API usage opt-in
28 changes: 19 additions & 9 deletions packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,10 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
* Props to be spread on the close button in the overlay.
*/
closeButtonProps?: Partial<IconButtonProps>
/**
* When enabled (and CSS anchor positioning feature flag is on), uses the Popover API
Comment thread
TylerJDev marked this conversation as resolved.
Outdated
*/
usePopover?: boolean
Comment thread
TylerJDev marked this conversation as resolved.
Outdated
}

export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
Expand Down Expand Up @@ -162,10 +166,13 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
onPositionChange,
displayCloseButton = true,
closeButtonProps = defaultCloseButtonProps,
usePopover = false,
}) => {
const cssAnchorPositioningFlag = useFeatureFlag('primer_react_css_anchor_positioning')
const supportsNativeCSSAnchorPositioning = useRef(false)
const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning.current
// Only use Popover API when both CSS anchor positioning is enabled AND usePopover is true
const shouldUsePopover = cssAnchorPositioning && usePopover
const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
const [overlayRef, updateOverlayRef] = useRenderForcingRef<HTMLDivElement>()
const anchorId = useId(externalAnchorId)
Expand Down Expand Up @@ -282,14 +289,17 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
currentOverlay.style.setProperty(`--anchored-overlay-anchor-offset-${result.horizontal}`, `${offset || 0}px`)
}

try {
if (!currentOverlay.matches(':popover-open')) {
currentOverlay.showPopover()
// Only call showPopover when usePopover is enabled
if (shouldUsePopover) {
try {
if (!currentOverlay.matches(':popover-open')) {
currentOverlay.showPopover()
}
} catch {
// Ignore if popover is already showing or not supported
}
} catch {
// Ignore if popover is already showing or not supported
}
}, [cssAnchorPositioning, open, overlayElement, id, overlayRef, anchorRef, width])
}, [cssAnchorPositioning, shouldUsePopover, open, overlayElement, id, overlayRef, anchorRef, width])

const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton
const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby']
Expand All @@ -308,7 +318,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
tabIndex: 0,
onClick: onAnchorClick,
onKeyDown: onAnchorKeyDown,
...(cssAnchorPositioning ? {popoverTarget: popoverId} : {}),
...(shouldUsePopover ? {popoverTarget: popoverId} : {}),
})}
{open ? (
<Overlay
Expand All @@ -328,9 +338,9 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
preventOverflow={preventOverflow}
data-component="AnchoredOverlay"
_PrivateDisablePortal={_PrivateDisablePortal}
{...(cssAnchorPositioning ? {popover: 'manual'} : {})}
{...(shouldUsePopover ? {popover: 'manual'} : {})}
{...restOverlayProps}
{...(cssAnchorPositioning ? {id: popoverId} : {})}
{...(shouldUsePopover ? {id: popoverId} : {})}
ref={node => {
if (overlayProps?.ref) {
assignRef(overlayProps.ref, node)
Expand Down
Loading