feat(react-headless-components-preview): add Popover & positioning#36006
Merged
mainframev merged 29 commits intomicrosoft:masterfrom May 1, 2026
Merged
feat(react-headless-components-preview): add Popover & positioning#36006mainframev merged 29 commits intomicrosoft:masterfrom
mainframev merged 29 commits intomicrosoft:masterfrom
Conversation
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
f26ae3e to
22f36ba
Compare
|
Pull request demo site: URL |
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
22f36ba to
e9fef9d
Compare
📊 Bundle size report✅ No changes found |
mainframev
force-pushed
the
feat/headless-popover-v2
branch
12 times, most recently
from
58218ca to
c32d139
Compare
mainframev
changed the title
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
c32d139 to
4774cce
Compare
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
4774cce to
0022e71
Compare
…n spec-pure CSS anchor positioning
…and unsupported positioning props
…ation-1 strip-down
…assertions to toHaveStyle
Adds a PopoverAuto component that renders its surface with `popover="auto"` instead of `popover="manual"`, so light dismiss (Escape, click-outside, popover-stack peer dismissal) is handled by the browser rather than React. Implementation: - Extracts a shared internal hook `useInternalPopover(props, popoverType)` in usePopover.ts. Both the existing `usePopover` (manual) and a new `usePopoverAuto` are thin wrappers that fix the popoverType. - Sets the `popover` attribute to the actual mode value when calling `showPopover()`. - In auto mode: disables `useOnClickOutside` / `useOnScrollOutside` and attaches a `toggle` event listener on the surface to mirror the browser's open/closed state into React and fire onOpenChange. - Plumbs `popoverType` through PopoverContextValue so PopoverSurface can skip its own Escape handler in auto mode (the browser owns it). - Exports `PopoverAuto` and `usePopoverAuto` from the popover subpath. - Updates the Nested Storybook story to use PopoverAuto, where browser popover-stack semantics keep ancestor surfaces open when a descendant popover opens, and dismiss the ancestor chain on outside interaction. Tests, type-check, lint, and api-report all pass.
…om usePopover/usePopoverAuto
…er the auto Popover surface (re)mounts
…ingle auto-mode component
mainframev
force-pushed
the
feat/headless-popover-v2
branch
from
83ac8d8 to
7ac897e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-popoveropen/defaultOpen/onOpenChangeopenOnHover+mouseLeaveDelayopenOnContext(right-click, cursor-anchored)withArrow(+ consumer-owned arrow CSS via[data-placement])trapFocus+aria-modal/role="dialog"disableAutoFocuscloseOnScrollcloseOnIframeFocuspositioning.position+positioning.alignpositioning.offset(number or{ mainAxis, crossAxis })positioning.coverTargetpositioning.fallbackPositionspositioning.autoSize(true/'width'/'height')positioning.overflowBoundarypositioning.overflowBoundaryPaddingpositioning.overflowBoundaryRectpositioning.matchTargetSize: 'width'positioning.strategy: 'absolute' | 'fixed'positioning.pinnedpositioning.target(custom anchor)positioning.positioningRef(imperativesetTarget)flipBoundaryarrowPaddingshiftToCoverTargetonPositioningEnddisableUpdateOnResizeuseTransformRelated Issue(s)