feat: [toast, popover] add anchored toasts and popover arrow by ravisuhag · Pull Request #950 · raystack/apsara

ravisuhag · 2026-10-08T00:10:13Z

Summary

Add anchored toasts. toastManager.add({ title: 'Copied', positionerProps: { anchor: el } }) shows the toast next to el with an arrow. Toasts without an anchor stay in the corner stack as before.
Add showArrow to Popover.Content (off by default). The arrow uses Tooltip's arrow styles, which move to shared/arrow so Tooltip, Popover, and Toast share one copy.
Add data-slots toast-anchored-viewport, toast-positioner, toast-arrow, and popover-arrow, with tests and docs.
Why it's like this: Toast moved to Base UI in Mar 2026 (feat: migrate Toast to Base UI #671) and only the corner toasts were ported. Base UI needs anchored toasts in a separate provider. Each Apsara manager now holds a second, internal Base UI manager, and Toast.Provider renders a second provider for it. add routes by positionerProps.anchor, and close and update go to both. This keeps one toastManager and one useToastManager(), and uses Base UI's own positionerProps option. The hook's toasts list holds stacked toasts only. Popover's Base UI port only ported the panel it had, which never had an arrow.
Breaking: no. toastManager, useToastManager(), and createToastManager() keep their signatures and behavior for toasts without an anchor.
I have followed the pull request section of the contributing guide.

vercel · 2026-10-08T00:10:19Z

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

Project	Deployment	Actions	Updated
apsara	Ready	Preview	Oct 26, 2026 7:48pm UTC

coderabbitai · 2026-10-08T00:10:24Z

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 23 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: fbf4018d-9c15-4434-8950-6c7d08443b02

Commits

Reviewing files that changed from the base of the PR and between 898d17e and 1a3fdd3.

Files selected for processing: 20

apps/www/src/content/docs/components/popover/demo.ts
apps/www/src/content/docs/components/popover/index.mdx
apps/www/src/content/docs/components/popover/props.ts
apps/www/src/content/docs/components/toast/demo.ts
apps/www/src/content/docs/components/toast/index.mdx
apps/www/src/content/docs/components/toast/props.ts
packages/react/components/popover/__tests__/data-slots.test.tsx
packages/react/components/popover/popover.module.css
packages/react/components/popover/popover.tsx
packages/react/components/toast/__tests__/data-slots.test.tsx
packages/react/components/toast/__tests__/toast.test.tsx
packages/react/components/toast/toast-manager.ts
packages/react/components/toast/toast-provider.tsx
packages/react/components/toast/toast-root.tsx
packages/react/components/toast/toast.module.css
packages/react/components/tooltip/tooltip-content.tsx
packages/react/components/tooltip/tooltip.module.css
packages/react/shared/arrow/arrow.module.css
packages/react/shared/arrow/arrow.tsx
packages/react/shared/arrow/index.ts

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: 6d0748bc-e2a5-46f5-9b5e-98705fc09e5f

Commits

Reviewing files that changed from the base of the PR and between f16644d and 898d17e.

Files selected for processing: 20

apps/www/src/content/docs/components/popover/demo.ts
apps/www/src/content/docs/components/popover/index.mdx
apps/www/src/content/docs/components/popover/props.ts
apps/www/src/content/docs/components/toast/demo.ts
apps/www/src/content/docs/components/toast/index.mdx
apps/www/src/content/docs/components/toast/props.ts
packages/react/components/popover/__tests__/data-slots.test.tsx
packages/react/components/popover/popover.module.css
packages/react/components/popover/popover.tsx
packages/react/components/toast/__tests__/data-slots.test.tsx
packages/react/components/toast/__tests__/toast.test.tsx
packages/react/components/toast/toast-manager.ts
packages/react/components/toast/toast-provider.tsx
packages/react/components/toast/toast-root.tsx
packages/react/components/toast/toast.module.css
packages/react/components/tooltip/tooltip-content.tsx
packages/react/components/tooltip/tooltip.module.css
packages/react/shared/arrow/arrow.module.css
packages/react/shared/arrow/arrow.tsx
packages/react/shared/arrow/index.ts

Files with no reviewable changes: 1

packages/react/components/tooltip/tooltip.module.css

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

PopoverContent now supports an optional arrow, with a conditional default side offset. Toast managers route anchored toasts to a separate store and viewport while retaining shared manager operations. Tooltip, Popover, and anchored toasts use shared arrow rendering and styles. Documentation, demos, and tests cover the new behavior.

Sequence Diagram(s)

sequenceDiagram
  participant Application
  participant useToastManager
  participant toast-manager
  participant anchored_store
  participant ToastProvider
  participant AnchoredToasts
  participant AnchoredToastRoot
  Application->>useToastManager: add with positionerProps.anchor
  useToastManager->>toast-manager: pass add options
  toast-manager->>anchored_store: add anchored toast
  ToastProvider->>AnchoredToasts: render anchored notifications
  AnchoredToasts->>AnchoredToastRoot: render toast
  AnchoredToastRoot->>Positioner: place toast relative to anchor

Priority: Pending latest changes

Merge Risk: Minimal · up to 898d1

No actionable issue identified; the change is ready for normal merge checks.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 20 functions across 14 files. (5 skipped:…	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title names the two main changes: anchored toasts (toast) and a popover arrow (popover). Both appear in the changeset: anchored toast routing and rendering, and Popover.Content showArrow. The titl…
Description check		The description summarizes the changeset. It covers the anchored toast API using positionerProps.anchor, the showArrow option on Popover.Content, the shared arrow styles moved to shared/arrow, the new…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title names the two main changes: anchored toasts (toast) and a popover arrow (popover). Both appear in the changeset: anchored toast routing and rendering, and Popover.Content showArrow. The title follows the conventional commit format and is specific enough for a teammate to understand the primary change.

Full details: Description check

Explanation

The description summarizes the changeset. It covers the anchored toast API using positionerProps.anchor, the showArrow option on Popover.Content, the shared arrow styles moved to shared/arrow, the new data slots with tests and docs, and the rationale for a second internal Base UI manager. It also states that the change is not breaking. This matches the changes in the raw summary.

Full details: Docstring Coverage

Explanation

Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 20 functions across 14 files. (5 skipped: 5 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-10-08T00:11:15Z

Open in StackBlitz

pnpm add https://pkg.pr.new/@raystack/apsara@950

commit: 1a3fdd3

- Build the manager and hook methods with one wrap function. The hook finds the anchored manager through the stacked store, so ToastManagerContext is removed. - Render the anchored provider first, so hook adds in mount effects reach it. - Drop positionerProps from stacked toasts, so anchor: null keeps swipe. - Label the anchored viewport "Anchored notifications", so there is one "Notifications" region. - Hide anchored toasts over the limit or with a hidden anchor, and show newer ones on top. - Document the routing rules and fix the Popover sideOffset playground default.

- Keep the anchored Base UI manager on the toast manager under a symbol key, and put the manager in ToastManagerContext. - useToastManager reads the context instead of a WeakMap link that Toast.Provider wrote during render. - StackedToasts no longer has to render before children.

vercel Bot deployed to Preview October 8, 2026 00:13

View deployment

ravisuhag requested a review from rohanchkrabrty October 8, 2026 00:57

feat: [toast, popover] add anchored toasts and popover arrow

7261fdc

ravisuhag force-pushed the feat/anchored-toast-popover-arrow branch from fe3b858 to 7261fdc Compare October 13, 2026 07:35

vercel Bot deployed to Preview October 13, 2026 08:01

View deployment

rohanchkrabrty mentioned this pull request Oct 18, 2026

feat: [select, sidebar, drawer] forward positioner props, unify side #977

Open

1 task done

vercel Bot deployed to Preview October 26, 2026 19:11

View deployment

Merge branch 'main' into feat/anchored-toast-popover-arrow

35bcc5f

vercel Bot deployed to Preview October 26, 2026 19:18

View deployment

vercel Bot deployed to Preview October 26, 2026 19:48

View deployment

Navigation Menu

Repository navigation

feat: [toast, popover] add anchored toasts and popover arrow - #950

feat: [toast, popover] add anchored toasts and popover arrow#950
ravisuhag wants to merge 4 commits into
mainfrom
feat/anchored-toast-popover-arrow

ravisuhag commented Oct 8, 2026

Uh oh!

vercel Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 8, 2026 •

edited

Loading

Review limit reached

Sequence Diagram(s)

Uh oh!

pkg-pr-new Bot commented Oct 8, 2026 •

edited

Loading

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ravisuhag commented Oct 8, 2026

Summary

Uh oh!

vercel Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Sequence Diagram(s)

Uh oh!

pkg-pr-new Bot commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Oct 8, 2026 •

edited

Loading

coderabbitai Bot commented Oct 8, 2026 •

edited

Loading

pkg-pr-new Bot commented Oct 8, 2026 •

edited

Loading