From 0b2dd4e10ec46c5398f93a77e3c41fdec5c87539 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 16 Oct 2026 08:40:24 +0000 Subject: [PATCH 1/5] fix(apollo-vertex): follow the shell theme in Toaster Toaster asked next-themes for the theme, so an app that only mounts the shell theme provider stayed on system. Read resolvedTheme from the shell hook and drop the next-themes dependency. --- .../content/docs/components/sonner.mdx | 8 +- .../notifications/notification-examples.tsx | 107 +++++++++--------- packages/apollo-vertex/package.json | 1 - packages/apollo-vertex/registry.json | 3 +- .../registry/sonner/sonner.test.tsx | 75 ++++++++++++ .../apollo-vertex/registry/sonner/sonner.tsx | 11 +- pnpm-lock.yaml | 3 - 7 files changed, 140 insertions(+), 68 deletions(-) create mode 100644 packages/apollo-vertex/registry/sonner/sonner.test.tsx diff --git a/apps/apollo-vertex/content/docs/components/sonner.mdx b/apps/apollo-vertex/content/docs/components/sonner.mdx index 88aaf3620f..ab4a380f69 100644 --- a/apps/apollo-vertex/content/docs/components/sonner.mdx +++ b/apps/apollo-vertex/content/docs/components/sonner.mdx @@ -19,14 +19,14 @@ Add the `` component once to your root route. Status colors, icons, c ```tsx import { createRootRoute, Outlet } from "@tanstack/react-router" -import { Toaster } from "@uipath/apollo-vertex" +import { ThemeProvider, Toaster } from "@uipath/apollo-vertex" export const Route = createRootRoute({ component: () => ( - <> + - + ), }) ``` @@ -66,7 +66,7 @@ toast.error("Upload failed", { | `position` | `ToasterProps["position"]` | `"top-center"` | Position of the toast stack on screen | | `duration` | `number` | `5000` | Auto-dismiss delay in milliseconds | | `closeButton` | `boolean` | `true` | Show a close button on each toast | -| `theme` | `"light" \| "dark" \| "system"` | `"system"` | Color theme. Defaults to the current app theme via `next-themes` | +| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme` | Color theme. Follows the shell theme provider. Pass `theme` to override. | | `toastOptions` | `ToasterProps["toastOptions"]` | — | Global options applied to all toasts (classNames, style, etc.) | ## Toast function options diff --git a/apps/apollo-vertex/content/docs/guidelines/notifications/notification-examples.tsx b/apps/apollo-vertex/content/docs/guidelines/notifications/notification-examples.tsx index 936d8df888..05021079e9 100644 --- a/apps/apollo-vertex/content/docs/guidelines/notifications/notification-examples.tsx +++ b/apps/apollo-vertex/content/docs/guidelines/notifications/notification-examples.tsx @@ -13,62 +13,65 @@ import { Alert, AlertDescription, AlertTitle } from "@/registry/alert/alert"; import { Badge } from "@/registry/badge/badge"; import { Button } from "@/registry/button/button"; import { Toaster } from "@/registry/sonner/sonner"; +import { ShellThemeProvider } from "../../../../templates/shell/ShellThemeProvider"; export function SonnerExamples() { return ( -
- -
- - - - + +
+ +
+ + + + +
+

+ Click each button to trigger a toast at the top-center of the screen. + Toasts auto-dismiss after 5 seconds. +

-

- Click each button to trigger a toast at the top-center of the screen. - Toasts auto-dismiss after 5 seconds. -

-
+ ); } diff --git a/packages/apollo-vertex/package.json b/packages/apollo-vertex/package.json index 52def91279..62fa2115d6 100644 --- a/packages/apollo-vertex/package.json +++ b/packages/apollo-vertex/package.json @@ -85,7 +85,6 @@ "input-otp": "^1.4.2", "lucide-react": "^0.577.0", "luxon": "^3.7.1", - "next-themes": "^0.4.6", "react-day-picker": "^9.13.0", "react-joyride": "^3.0.2", "react-resizable-panels": "^4.7.3", diff --git a/packages/apollo-vertex/registry.json b/packages/apollo-vertex/registry.json index f211814906..9b06396052 100644 --- a/packages/apollo-vertex/registry.json +++ b/packages/apollo-vertex/registry.json @@ -2704,7 +2704,8 @@ "type": "registry:ui", "title": "Sonner", "description": "An opinionated toast component for React.", - "dependencies": ["sonner", "next-themes"], + "dependencies": ["sonner"], + "registryDependencies": ["@uipath/shell"], "cssVars": { "theme": { "color-info": "var(--info)", diff --git a/packages/apollo-vertex/registry/sonner/sonner.test.tsx b/packages/apollo-vertex/registry/sonner/sonner.test.tsx new file mode 100644 index 0000000000..4424c0eec4 --- /dev/null +++ b/packages/apollo-vertex/registry/sonner/sonner.test.tsx @@ -0,0 +1,75 @@ +import { cleanup, fireEvent, render } from "@testing-library/react"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { THEME_STORAGE_KEY } from "@/registry/shell/shell-constants"; +import { ThemeProvider, useTheme } from "@/registry/shell/shell-theme-provider"; + +import { Toaster } from "./sonner"; + +vi.mock("sonner", () => ({ + Toaster: ({ theme }: { theme?: string }) => ( +
+ ), +})); + +const darkLabel = "use dark"; + +function installMatchMedia(matches: boolean) { + Object.defineProperty(window, "matchMedia", { + writable: true, + configurable: true, + value: () => ({ + matches, + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + }), + }); +} + +function ThemeToggle() { + const { setTheme } = useTheme(); + return ( + + ); +} + +describe("Toaster", () => { + beforeEach(() => { + installMatchMedia(false); + localStorage.clear(); + }); + + afterEach(() => { + cleanup(); + localStorage.clear(); + }); + + it("passes the shell resolved theme to Sonner", () => { + const { getByRole, getByTestId } = render( + + + + , + ); + + expect(getByTestId("sonner").dataset.theme).toBe("light"); + + fireEvent.click(getByRole("button", { name: darkLabel })); + + expect(getByTestId("sonner").dataset.theme).toBe("dark"); + }); + + it("resolves a system shell theme to light or dark", () => { + installMatchMedia(true); + localStorage.setItem(THEME_STORAGE_KEY, "system"); + + const { getByTestId } = render( + + + , + ); + + expect(getByTestId("sonner").dataset.theme).toBe("dark"); + }); +}); diff --git a/packages/apollo-vertex/registry/sonner/sonner.tsx b/packages/apollo-vertex/registry/sonner/sonner.tsx index 0f4e7af995..1dd8cd82c1 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.tsx @@ -7,9 +7,10 @@ import { OctagonXIcon, TriangleAlertIcon, } from "lucide-react"; -import { useTheme } from "next-themes"; import { Toaster as Sonner, type ToasterProps } from "sonner"; +import { useTheme } from "@/registry/shell/shell-theme-provider"; + // Shared icon alignment: top-align icons with the first line of toast text. const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5"; @@ -36,15 +37,11 @@ export const apolloToastClassNames: NonNullable< }; const Toaster = ({ ...props }: ToasterProps) => { - const { theme = "system" } = useTheme(); + const { resolvedTheme } = useTheme(); return ( Date: Fri, 16 Oct 2026 08:50:53 +0000 Subject: [PATCH 2/5] fix(apollo-vertex): default Toaster to system without a theme provider useTheme throws outside ThemeProvider, so a standalone Toaster crashed before an explicit theme reached Sonner. Keep the shell resolved theme when a provider is mounted, and honor a theme prop either way. --- .../content/docs/components/sonner.mdx | 2 +- .../registry/sonner/sonner.test.tsx | 12 +++++++++++ .../apollo-vertex/registry/sonner/sonner.tsx | 21 ++++++++++++++++--- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/apps/apollo-vertex/content/docs/components/sonner.mdx b/apps/apollo-vertex/content/docs/components/sonner.mdx index ab4a380f69..5009a0721b 100644 --- a/apps/apollo-vertex/content/docs/components/sonner.mdx +++ b/apps/apollo-vertex/content/docs/components/sonner.mdx @@ -66,7 +66,7 @@ toast.error("Upload failed", { | `position` | `ToasterProps["position"]` | `"top-center"` | Position of the toast stack on screen | | `duration` | `number` | `5000` | Auto-dismiss delay in milliseconds | | `closeButton` | `boolean` | `true` | Show a close button on each toast | -| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme` | Color theme. Follows the shell theme provider. Pass `theme` to override. | +| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme`, or `"system"` | Color theme. Follows the shell theme when a provider is mounted. Pass `theme` to override. | | `toastOptions` | `ToasterProps["toastOptions"]` | — | Global options applied to all toasts (classNames, style, etc.) | ## Toast function options diff --git a/packages/apollo-vertex/registry/sonner/sonner.test.tsx b/packages/apollo-vertex/registry/sonner/sonner.test.tsx index 4424c0eec4..90eae23e73 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.test.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.test.tsx @@ -60,6 +60,18 @@ describe("Toaster", () => { expect(getByTestId("sonner").dataset.theme).toBe("dark"); }); + it("defaults to system when no shell theme provider is mounted", () => { + const { getByTestId } = render(); + + expect(getByTestId("sonner").dataset.theme).toBe("system"); + }); + + it("honors an explicit theme without a shell theme provider", () => { + const { getByTestId } = render(); + + expect(getByTestId("sonner").dataset.theme).toBe("dark"); + }); + it("resolves a system shell theme to light or dark", () => { installMatchMedia(true); localStorage.setItem(THEME_STORAGE_KEY, "system"); diff --git a/packages/apollo-vertex/registry/sonner/sonner.tsx b/packages/apollo-vertex/registry/sonner/sonner.tsx index 1dd8cd82c1..cd6697864a 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.tsx @@ -11,6 +11,21 @@ import { Toaster as Sonner, type ToasterProps } from "sonner"; import { useTheme } from "@/registry/shell/shell-theme-provider"; +const missingThemeProvider = "useTheme must be used within a ThemeProvider"; + +function useShellResolvedTheme(): "light" | "dark" | null { + try { + // useTheme calls useContext before it throws, so this catch does not skip a hook. + // oxlint-disable-next-line eslint-plugin-react-hooks(rules-of-hooks) + return useTheme().resolvedTheme; + } catch (error) { + if (error instanceof Error && error.message === missingThemeProvider) { + return null; + } + throw error; + } +} + // Shared icon alignment: top-align icons with the first line of toast text. const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5"; @@ -36,12 +51,12 @@ export const apolloToastClassNames: NonNullable< "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm", }; -const Toaster = ({ ...props }: ToasterProps) => { - const { resolvedTheme } = useTheme(); +const Toaster = ({ theme, ...props }: ToasterProps) => { + const resolvedTheme = useShellResolvedTheme(); return ( Date: Fri, 16 Oct 2026 09:19:43 +0000 Subject: [PATCH 3/5] fix(apollo-vertex): let useTheme run without a ThemeProvider The missing-provider check belongs on useTheme. Toaster calls it directly and still uses system when nothing is mounted. --- .../registry/shell/shell-theme-provider.tsx | 14 +++++++++++--- .../registry/sonner/sonner.test.tsx | 15 ++++++++++++++- .../apollo-vertex/registry/sonner/sonner.tsx | 17 +---------------- 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx b/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx index d312ab0f1f..a9a9aed5ea 100644 --- a/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx +++ b/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx @@ -167,12 +167,20 @@ export function ThemeProvider({ ); } +function setThemeWithoutProvider(_theme: Theme) { + // No ThemeProvider is mounted, so there is no theme to update. +} + export const useTheme = () => { const context = useContext(ThemeProviderContext); - if (context == null) { - throw new Error("useTheme must be used within a ThemeProvider"); + if (context != null) { + return context; } - return context; + return { + theme: "system" as const, + resolvedTheme: null, + setTheme: setThemeWithoutProvider, + }; }; diff --git a/packages/apollo-vertex/registry/sonner/sonner.test.tsx b/packages/apollo-vertex/registry/sonner/sonner.test.tsx index 90eae23e73..c65d78d625 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.test.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.test.tsx @@ -34,6 +34,13 @@ function ThemeToggle() { ); } +function ResolvedThemeProbe() { + const { resolvedTheme } = useTheme(); + return ( +
+ ); +} + describe("Toaster", () => { beforeEach(() => { installMatchMedia(false); @@ -61,8 +68,14 @@ describe("Toaster", () => { }); it("defaults to system when no shell theme provider is mounted", () => { - const { getByTestId } = render(); + const { getByTestId } = render( + <> + + + , + ); + expect(getByTestId("resolved-theme").dataset.theme).toBe("missing"); expect(getByTestId("sonner").dataset.theme).toBe("system"); }); diff --git a/packages/apollo-vertex/registry/sonner/sonner.tsx b/packages/apollo-vertex/registry/sonner/sonner.tsx index cd6697864a..70db8ed365 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.tsx @@ -11,21 +11,6 @@ import { Toaster as Sonner, type ToasterProps } from "sonner"; import { useTheme } from "@/registry/shell/shell-theme-provider"; -const missingThemeProvider = "useTheme must be used within a ThemeProvider"; - -function useShellResolvedTheme(): "light" | "dark" | null { - try { - // useTheme calls useContext before it throws, so this catch does not skip a hook. - // oxlint-disable-next-line eslint-plugin-react-hooks(rules-of-hooks) - return useTheme().resolvedTheme; - } catch (error) { - if (error instanceof Error && error.message === missingThemeProvider) { - return null; - } - throw error; - } -} - // Shared icon alignment: top-align icons with the first line of toast text. const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5"; @@ -52,7 +37,7 @@ export const apolloToastClassNames: NonNullable< }; const Toaster = ({ theme, ...props }: ToasterProps) => { - const resolvedTheme = useShellResolvedTheme(); + const { resolvedTheme } = useTheme(); return ( Date: Fri, 16 Oct 2026 09:26:39 +0000 Subject: [PATCH 4/5] fix(apollo-vertex): keep useTheme resolvedTheme light or dark A null resolvedTheme widened the public hook result. With no provider, useTheme still returns ThemeProviderState and resolves system the same way the provider does. --- .../content/docs/components/sonner.mdx | 2 +- .../registry/shell/shell-theme-provider.tsx | 35 ++++++++++++------- .../registry/sonner/sonner.test.tsx | 23 ++++++++---- .../apollo-vertex/registry/sonner/sonner.tsx | 2 +- 4 files changed, 40 insertions(+), 22 deletions(-) diff --git a/apps/apollo-vertex/content/docs/components/sonner.mdx b/apps/apollo-vertex/content/docs/components/sonner.mdx index 5009a0721b..69b16deb35 100644 --- a/apps/apollo-vertex/content/docs/components/sonner.mdx +++ b/apps/apollo-vertex/content/docs/components/sonner.mdx @@ -66,7 +66,7 @@ toast.error("Upload failed", { | `position` | `ToasterProps["position"]` | `"top-center"` | Position of the toast stack on screen | | `duration` | `number` | `5000` | Auto-dismiss delay in milliseconds | | `closeButton` | `boolean` | `true` | Show a close button on each toast | -| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme`, or `"system"` | Color theme. Follows the shell theme when a provider is mounted. Pass `theme` to override. | +| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme` | Color theme. Follows the shell resolved theme, including a system preference when no provider is mounted. Pass `theme` to override. | | `toastOptions` | `ToasterProps["toastOptions"]` | — | Global options applied to all toasts (classNames, style, etc.) | ## Toast function options diff --git a/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx b/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx index a9a9aed5ea..ecef162870 100644 --- a/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx +++ b/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx @@ -72,6 +72,22 @@ function isValidTheme(value: string | null): value is Theme { return value === "light" || value === "dark" || value === "system"; } +function useSystemDark() { + return useSyncExternalStore( + (cb) => { + const mq = window.matchMedia("(prefers-color-scheme: dark)"); + mq.addEventListener("change", cb); + return () => mq.removeEventListener("change", cb); + }, + () => window.matchMedia("(prefers-color-scheme: dark)").matches, + () => false, + ); +} + +function resolveSystemTheme(systemDark: boolean): "light" | "dark" { + return systemDark ? "dark" : "light"; +} + function applyThemeClass(resolved: "light" | "dark") { const root = window.document.documentElement; root.classList.remove("light", "dark"); @@ -117,18 +133,10 @@ export function ThemeProvider({ return isValidTheme(stored) ? stored : defaultTheme; }); - const systemDark = useSyncExternalStore( - (cb) => { - const mq = window.matchMedia("(prefers-color-scheme: dark)"); - mq.addEventListener("change", cb); - return () => mq.removeEventListener("change", cb); - }, - () => window.matchMedia("(prefers-color-scheme: dark)").matches, - () => false, - ); + const systemDark = useSystemDark(); const resolvedTheme = - theme === "system" ? (systemDark ? "dark" : "light") : theme; + theme === "system" ? resolveSystemTheme(systemDark) : theme; const setTheme = (newTheme: Theme) => { localStorage.setItem(storageKey, newTheme); @@ -171,16 +179,17 @@ function setThemeWithoutProvider(_theme: Theme) { // No ThemeProvider is mounted, so there is no theme to update. } -export const useTheme = () => { +export const useTheme = (): ThemeProviderState => { const context = useContext(ThemeProviderContext); + const systemDark = useSystemDark(); if (context != null) { return context; } return { - theme: "system" as const, - resolvedTheme: null, + theme: "system", + resolvedTheme: resolveSystemTheme(systemDark), setTheme: setThemeWithoutProvider, }; }; diff --git a/packages/apollo-vertex/registry/sonner/sonner.test.tsx b/packages/apollo-vertex/registry/sonner/sonner.test.tsx index c65d78d625..578eccbe42 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.test.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.test.tsx @@ -36,9 +36,7 @@ function ThemeToggle() { function ResolvedThemeProbe() { const { resolvedTheme } = useTheme(); - return ( -
- ); + return
; } describe("Toaster", () => { @@ -67,16 +65,27 @@ describe("Toaster", () => { expect(getByTestId("sonner").dataset.theme).toBe("dark"); }); - it("defaults to system when no shell theme provider is mounted", () => { - const { getByTestId } = render( + it("resolves the system preference when no shell theme provider is mounted", () => { + const { getByTestId, rerender } = render( <> , ); - expect(getByTestId("resolved-theme").dataset.theme).toBe("missing"); - expect(getByTestId("sonner").dataset.theme).toBe("system"); + expect(getByTestId("resolved-theme").dataset.theme).toBe("light"); + expect(getByTestId("sonner").dataset.theme).toBe("light"); + + installMatchMedia(true); + rerender( + <> + + + , + ); + + expect(getByTestId("resolved-theme").dataset.theme).toBe("dark"); + expect(getByTestId("sonner").dataset.theme).toBe("dark"); }); it("honors an explicit theme without a shell theme provider", () => { diff --git a/packages/apollo-vertex/registry/sonner/sonner.tsx b/packages/apollo-vertex/registry/sonner/sonner.tsx index 70db8ed365..e8b7c110b4 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.tsx @@ -41,7 +41,7 @@ const Toaster = ({ theme, ...props }: ToasterProps) => { return ( Date: Fri, 16 Oct 2026 10:09:11 +0000 Subject: [PATCH 5/5] fix(apollo-vertex): make Toaster follow the shell theme only useTheme throws again outside ThemeProvider. Toaster always passes resolvedTheme and drops a theme prop so it cannot override the provider. --- .../content/docs/components/sonner.mdx | 2 +- .../registry/shell/shell-theme-provider.tsx | 17 +++------ .../registry/sonner/sonner.test.tsx | 36 +------------------ .../apollo-vertex/registry/sonner/sonner.tsx | 4 +-- 4 files changed, 8 insertions(+), 51 deletions(-) diff --git a/apps/apollo-vertex/content/docs/components/sonner.mdx b/apps/apollo-vertex/content/docs/components/sonner.mdx index 69b16deb35..db2ab19ff4 100644 --- a/apps/apollo-vertex/content/docs/components/sonner.mdx +++ b/apps/apollo-vertex/content/docs/components/sonner.mdx @@ -66,7 +66,7 @@ toast.error("Upload failed", { | `position` | `ToasterProps["position"]` | `"top-center"` | Position of the toast stack on screen | | `duration` | `number` | `5000` | Auto-dismiss delay in milliseconds | | `closeButton` | `boolean` | `true` | Show a close button on each toast | -| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme` | Color theme. Follows the shell resolved theme, including a system preference when no provider is mounted. Pass `theme` to override. | +| `theme` | `"light" \| "dark" \| "system"` | shell `resolvedTheme` | Ignored. The toaster always uses the shell resolved theme from `ThemeProvider`. | | `toastOptions` | `ToasterProps["toastOptions"]` | — | Global options applied to all toasts (classNames, style, etc.) | ## Toast function options diff --git a/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx b/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx index ecef162870..ecbca6168d 100644 --- a/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx +++ b/packages/apollo-vertex/registry/shell/shell-theme-provider.tsx @@ -175,21 +175,12 @@ export function ThemeProvider({ ); } -function setThemeWithoutProvider(_theme: Theme) { - // No ThemeProvider is mounted, so there is no theme to update. -} - -export const useTheme = (): ThemeProviderState => { +export const useTheme = () => { const context = useContext(ThemeProviderContext); - const systemDark = useSystemDark(); - if (context != null) { - return context; + if (context == null) { + throw new Error("useTheme must be used within a ThemeProvider"); } - return { - theme: "system", - resolvedTheme: resolveSystemTheme(systemDark), - setTheme: setThemeWithoutProvider, - }; + return context; }; diff --git a/packages/apollo-vertex/registry/sonner/sonner.test.tsx b/packages/apollo-vertex/registry/sonner/sonner.test.tsx index 578eccbe42..edc0eeeb58 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.test.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.test.tsx @@ -34,11 +34,6 @@ function ThemeToggle() { ); } -function ResolvedThemeProbe() { - const { resolvedTheme } = useTheme(); - return
; -} - describe("Toaster", () => { beforeEach(() => { installMatchMedia(false); @@ -65,42 +60,13 @@ describe("Toaster", () => { expect(getByTestId("sonner").dataset.theme).toBe("dark"); }); - it("resolves the system preference when no shell theme provider is mounted", () => { - const { getByTestId, rerender } = render( - <> - - - , - ); - - expect(getByTestId("resolved-theme").dataset.theme).toBe("light"); - expect(getByTestId("sonner").dataset.theme).toBe("light"); - - installMatchMedia(true); - rerender( - <> - - - , - ); - - expect(getByTestId("resolved-theme").dataset.theme).toBe("dark"); - expect(getByTestId("sonner").dataset.theme).toBe("dark"); - }); - - it("honors an explicit theme without a shell theme provider", () => { - const { getByTestId } = render(); - - expect(getByTestId("sonner").dataset.theme).toBe("dark"); - }); - it("resolves a system shell theme to light or dark", () => { installMatchMedia(true); localStorage.setItem(THEME_STORAGE_KEY, "system"); const { getByTestId } = render( - + , ); diff --git a/packages/apollo-vertex/registry/sonner/sonner.tsx b/packages/apollo-vertex/registry/sonner/sonner.tsx index e8b7c110b4..2a73a7c22f 100644 --- a/packages/apollo-vertex/registry/sonner/sonner.tsx +++ b/packages/apollo-vertex/registry/sonner/sonner.tsx @@ -36,12 +36,12 @@ export const apolloToastClassNames: NonNullable< "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm", }; -const Toaster = ({ theme, ...props }: ToasterProps) => { +const Toaster = ({ theme: _theme, ...props }: ToasterProps) => { const { resolvedTheme } = useTheme(); return (