feat: add react-popover package

[dmytrokirpa]

Add experimental @fluentui-contrib/react-popover package

Summary

This PR introduces a new experimental Popover component that reimagines the FluentUI React v9 Popover using modern web platform APIs. The component maintains API compatibility with the standard Popover while leveraging native browser capabilities for improved performance and reduced bundle size.

Motivation

Modern browsers have introduced powerful native APIs for common UI patterns that were previously only achievable with JavaScript libraries. This experimental package explores what a future Popover implementation could look like by replacing third-party dependencies with platform primitives:

Popover API replaces custom popover management logic
CSS Anchor Positioning replaces floating-ui for positioning
Focusgroup API replaces react-tabster for keyboard navigation

Key Features

✨ Native popover behavior - Uses the browser's built-in Popover API for better performance and accessibility
✨ CSS-native positioning - Anchor positioning with automatic fallbacks when popover would overflow viewport
✨ Zero-dependency positioning - No floating-ui required, reducing bundle size
✨ API compatibility - Drop-in replacement for standard FluentUI Popover (same props, same patterns)
✨ Modern CSS techniques - Uses anchor-size() with margin-based centering for reliable positioning that works with position-try-fallbacks

Technical Highlights

CSS Anchor Positioning Implementation

The positioning system uses modern CSS features with proper fallback handling:

/* Centering with anchor-size() instead of transforms */
left: anchor(center);
margin-left: calc(-1 * anchor-size(self-inline) / 2);

/* Automatic fallbacks */
position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

This approach avoids the common pitfall of using transform: translateX(-50%) which doesn't work correctly with position-try-fallbacks because transforms are applied after fallback calculations.

Browser Support

Caution

This is an experimental package with limited browser support. It requires:

• Popover API
• CSS Anchor Positioning
• Focusgroup API

Only use this component when targeting modern browsers. For production applications requiring broad compatibility, continue using the standard @fluentui/react-popover.

API Example

import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui-contrib/react-popover';
import { Button } from '@fluentui/react-components';

function Example() {
  return (
    <Popover positioning="below">
      <PopoverTrigger>
        <Button>Open Popover</Button>
      </PopoverTrigger>
      <PopoverSurface>
        <div>Popover content</div>
      </PopoverSurface>
    </Popover>
  );
}

Component Structure:

Popover - Root component managing state
PopoverTrigger - Wraps the trigger element
PopoverSurface - The popover content surface with positioning

Supported Positions

All standard FluentUI positioning options are supported:

above, above-start, above-end
below, below-start, below-end
before, before-top, before-bottom
after, after-top, after-bottom

Future Considerations

This experimental package serves as a proof-of-concept for how FluentUI components might evolve as web platform APIs mature. Feedback and real-world testing will help inform whether these approaches should be adopted in the main library.