Renders a fixed-position overlay of live notification popups, automatically filtering, limiting, and positioning toast-style alerts that have not yet been read or settled. ## Key Components ### Types & Interfaces - **`NotificationPopupsPosition`** — Union type for popup placement: `'top-right'`, `'top-left'`, `'bottom-right'`, `'bottom-left'` - **`NotificationPopupsProps`** — Component props interface ### Props | Prop | Type | Default | Description | |---|---|---|---| | `className` | `string` | — | Additional CSS classes | | `liveDurationMs` | `number` | `4000` | How long a notification stays "live" in ms | | `maxVisible` | `number` | `4` | Maximum simultaneous popups | | `position` | `NotificationPopupsPosition` | `'top-right'` | Screen corner placement | | `hideWhenDrawerOpen` | `boolean` | `true` | Hides popups when notification drawer is open | | `renderTile` | `RenderNotificationTile` | — | Custom tile renderer (overrides context renderer) | ### `NotificationPopups` (main export) Consumes `useOptionalNotifications` context and renders filtered, time-bounded notifications as accessible popup tiles. Supports both custom (`renderTile`) and default (`NotificationTile`) rendering. Handles click and keyboard (`Enter`/`Space`) activation, delegating to `notification.onClick`, or opening the drawer and settling the notification. ## Usage Example ```typescript import { NotificationPopups } from './notification-popups' // Basic usage — top-right corner, 4s live window // Custom position and duration // Custom tile renderer ( )} /> ``` > **Note:** `NotificationPopups` returns `null` if rendered outside a `NotificationsProvider`, `showPopups` is false, or no unread/unsettled notifications exist within the live window.