Skip to content

feat(react-headless-components-preview): add Popover & positioning#36006

Open
mainframev wants to merge 6 commits intomicrosoft:masterfrom
mainframev:feat/headless-popover-v2
Open

feat(react-headless-components-preview): add Popover & positioning#36006
mainframev wants to merge 6 commits intomicrosoft:masterfrom
mainframev:feat/headless-popover-v2

Conversation

@mainframev
Copy link
Copy Markdown
Contributor

@mainframev mainframev commented Apr 20, 2026

Adds a headless Popover (Popover, PopoverTrigger, PopoverSurface) to the @fluentui/react-headless-components-preview package, positioned via the native CSS Anchor Positioning API instead of floating-ui

Feature with v9 @fluentui/react-popover

v9 feature Status
open / defaultOpen / onOpenChange
openOnHover + mouseLeaveDelay
openOnContext (right-click, cursor-anchored)
withArrow (+ consumer-owned arrow CSS via [data-placement])
trapFocus + aria-modal / role="dialog" ✅ (via useFocusScope)
disableAutoFocus
closeOnScroll, closeOnIframeFocus
inline (skip top-layer)
mountNode (portal target)
Nested popovers (per-instance Escape / dismiss)
positioning.position + positioning.align
positioning.offset (number or { mainAxis, crossAxis })
positioning.coverTarget
positioning.fallbackPositions
positioning.autoSize (true / 'width' / 'height')
positioning.overflowBoundary
positioning.matchTargetSize: 'width'
positioning.strategy: 'absolute' | 'fixed'
positioning.pinned
positioning.target (custom anchor)
positioning.positioningRef (imperative setTarget)
flipBoundary
arrowPadding TBA
shiftToCoverTarget
onPositioningEnd ➖ Native API has no "settle" event
disableUpdateOnResize ➖ Native anchor positioning + targeted usage is always-on
useTransform ➖ Native anchor positioning doesn't use transform, no conceptual equivalent

Related Issue(s)

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@mainframev mainframev force-pushed the feat/headless-popover-v2 branch from 22f36ba to e9fef9d Compare April 20, 2026 01:46
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 20, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-headless-components-preview
react-headless-components-preview: entire library
69.676 kB
20.575 kB
87.717 kB
26.402 kB
18.041 kB
5.827 kB

🤖 This report was generated against 85ba749380bcc7df6e1257ee636fa1192c58744f

@mainframev mainframev force-pushed the feat/headless-popover-v2 branch 12 times, most recently from 58218ca to c32d139 Compare April 22, 2026 10:30
@mainframev mainframev changed the title WIP: feat(react-headless-components-preview): add Popover & positioning feat(react-headless-components-preview): add Popover & positioning Apr 22, 2026
@mainframev mainframev marked this pull request as ready for review April 22, 2026 10:42
@mainframev mainframev requested review from a team as code owners April 22, 2026 10:42
@mainframev mainframev requested a review from dmytrokirpa April 22, 2026 10:47
@mainframev mainframev force-pushed the feat/headless-popover-v2 branch from c32d139 to 4774cce Compare April 22, 2026 12:21
@mainframev mainframev requested a review from a team as a code owner April 22, 2026 12:21
@mainframev mainframev force-pushed the feat/headless-popover-v2 branch 2 times, most recently from 60d79ff to 30490b7 Compare April 22, 2026 13:18
`useDialogContextValues copy.ts` was an editor artifact that slipped into the
feature commit. Removing it leaves `useDialogContextValues.ts` untouched.
@mainframev mainframev force-pushed the feat/headless-popover-v2 branch from 30490b7 to f4a8375 Compare April 22, 2026 13:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant