OverlayProvider

OverlayProvider defines how EnterUI coordinates overlay stack state, including registration order, top-overlay checks, and close delegation without replacing focus traps owned by overlay primitives.

#Default usage

<OverlayProvider>
  <Card>
    <CardHeader>
      <CardTitle>Overlay manager ready</CardTitle>
      <CardDescription>Dialogs, sheets, popovers, and command menus can register with the same stack.</CardDescription>
    </CardHeader>
  </Card>
</OverlayProvider>

#Import

import { OverlayProvider, useOverlayManager } from "@froggdesign/enter-ui-react";

#Patterns

Use registerOverlay when a custom overlay opens and call the returned cleanup when it closes. Higher priority overlays are treated as above lower priority overlays.

const manager = useOverlayManager();

React.useEffect(() => {
  if (!open) return;
  return manager.registerOverlay({
    id: "settings-dialog",
    type: "dialog",
    priority: 10,
    close: () => setOpen(false),
  });
}, [manager, open]);

#Accessibility

OverlayProvider does not create DOM focus traps, portals, or inert behavior. It tracks overlay order only, so Radix Dialog, Sheet, Popover, and related primitives keep owning keyboard focus and screen reader semantics.

#API

• OverlayProvider: provides overlay stack state.
• useOverlayManager(): returns registerOverlay, unregisterOverlay, isTopOverlay, getOverlayIndex, closeTopOverlay, and overlays.
• registerOverlay(overlay): accepts { id, type, priority, close, metadata } and returns a cleanup function.

#Styling

OverlayProvider is a coordination utility and does not render visible UI. Overlay components should keep using their own .eui-* classes and FroggDesign tokens.