feat(react): add popover component

[mihar-22]

Refs #220
Depends on #652

Summary

React compound components for the popover, following the Popover.Root / Popover.Trigger / Popover.Popup pattern.

API Surface

Usage

<Popover.Root side="top" openOnHover>
  <Popover.Trigger>Settings</Popover.Trigger>
  <Popover.Popup>
    <Popover.Arrow />
    {/* content */}
  </Popover.Popup>
</Popover.Root>

Components

Component	Element	Description
Popover.Root	—	State provider. Accepts all popover props.
Popover.Trigger	<button>	Toggle button. Receives ARIA attrs and anchor styles.
Popover.Popup	<div>	Floating content. Positioned via CSS Anchor or JS fallback.
Popover.Arrow	<div>	Decorative arrow, hidden from assistive tech.

Root Props

Prop	Type	Default	Description
side	'top' | 'bottom' | 'left' | 'right'	'bottom'	Placement side
align	'start' | 'center' | 'end'	'center'	Cross-axis alignment
modal	boolean | 'trap-focus'	false	Modal behavior
open	boolean	—	Controlled open state
defaultOpen	boolean	false	Initial open state
onOpenChange	(open, details) => void	—	Called with { reason } on state change
openOnHover	boolean	false	Open on hover
delay	number	300	Hover open delay (ms)
closeDelay	number	300	Hover close delay (ms)
closeOnEscape	boolean	true	Close on Escape
closeOnOutsideClick	boolean	true	Close on outside click

Part Props

Trigger, Popup, and Arrow accept:

• render — render prop for custom elements (render={<a />})
• className — static or state-aware (className={(state) => ...})
• style — static or state-aware
• ref — forwarded ref

Context

usePopoverContext() returns { state, popover, core, anchorName, popupId } for advanced use cases.

Implementation details

• Focus events remapped: onFocusIn/onFocusOut from core → React's onFocus/onBlur
• useId() output sanitized for valid CSS <dashed-ident> (strips colons)
• Positioning returns camelCase keys — used directly as CSSProperties, no conversion needed
• Manual fallback includes RAF-throttled scroll/resize listeners with cleanup

Testing

pnpm -F @videojs/react test

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
vjs-10-demo-react	Ignored	Preview	Feb 28, 2026 8:35am

[Copilot]

Pull request overview

Adds a new React Popover compound component API (Popover.Root / Popover.Trigger / Popover.Popup / Popover.Arrow) built on top of the existing @videojs/core popover core + DOM handle, providing positioning via CSS Anchor Positioning with a JS measurement fallback.

Changes:

• Introduces PopoverRoot to wire PopoverCore + createPopover() interaction state into a React context.
• Adds compound parts (Trigger, Popup, Arrow) that consume context, apply ARIA/data attrs, and integrate positioning/interaction props.
• Exposes the new Popover namespace from the React package entrypoint.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/ui/popover/popover-context.tsx	Adds context + hook for sharing core/popover/state/ids across parts.
packages/react/src/ui/popover/popover-root.tsx	Implements root state provider bridging PopoverCore and createPopover() into React.
packages/react/src/ui/popover/popover-trigger.tsx	Implements trigger part, applying trigger ARIA and anchor-name styling.
packages/react/src/ui/popover/popover-popup.tsx	Implements popup part with CSS-anchor positioning and JS fallback with scroll/resize tracking.
packages/react/src/ui/popover/popover-arrow.tsx	Implements decorative arrow part with state data attrs + aria-hidden.
packages/react/src/ui/popover/index.parts.ts	Defines the public compound-part exports (Root/Trigger/Popup/Arrow).
packages/react/src/ui/popover/index.ts	Exports the Popover namespace for consumer imports.
packages/react/src/index.ts	Re-exports Popover from the package root API.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.