- {iconComponent}
-
- {message && (
-
+
+
+ {iconComponent}
+
+
+
+
+
+ {closable && (
+
+
+
)}
-
-
- {action && (
-
- {action.label}
-
- )}
- {closable && (
-
-
-
- )}
-
+
diff --git a/packages/frappe-ui-react/src/components/toast/toastProvider.tsx b/packages/frappe-ui-react/src/components/toast/toastProvider.tsx
index f8b7d16a..b5645dba 100644
--- a/packages/frappe-ui-react/src/components/toast/toastProvider.tsx
+++ b/packages/frappe-ui-react/src/components/toast/toastProvider.tsx
@@ -1,58 +1,72 @@
-import React, { ReactNode, useCallback, useMemo, useState } from "react";
-import { ToastProvider, ToastViewport } from "@radix-ui/react-toast";
+import React, { ReactNode, useCallback, useMemo } from "react";
+import { Toast, type ToastObject } from "@base-ui/react/toast";
import DOMPurify from "dompurify";
import LoadingIndicator from "../loadingIndicator";
-import { ToastProps, ToastOptions, ToastPromiseOptions } from "./types";
-import { ToastContext } from "./context";
+import type {
+ ToastDataInternal,
+ ToastOptions,
+ ToastPromiseOptions,
+} from "./types";
+import { ToastAPI, ToastContext } from "./context";
import ToastComponent from "./toast";
interface ToastsProviderProps {
children: ReactNode;
}
+
+// Simple counter for generating unique toast IDs.
let toastIdCounter = 0;
-const ToastsProvider: React.FC
= ({ children }) => {
- const [toasts, setToasts] = useState([]);
- const create = useCallback((options: ToastOptions): string => {
- const id = `toast-${toastIdCounter++}`;
- const durationInMs =
- options.duration != null ? options.duration * 1000 : 5000;
+const ToastsProvider: React.FC = ({ children }) => {
+ const toastManager = Toast.createToastManager();
- const sanitizedMessage = DOMPurify.sanitize(options.message, {
- ALLOWED_TAGS: ["a", "em", "strong", "i", "b", "u"],
- });
+ return (
+
+ {children}
+
+ );
+};
- const toastItem: ToastProps = {
- id: options?.id || id,
- open: true,
- message: sanitizedMessage,
- type: options.type || "info",
- duration: durationInMs,
- action: options.action,
- icon: options.icon,
- closable: options.closable ?? true,
- onOpenChange: () => null,
- };
+const ToastContextProvider: React.FC = ({ children }) => {
+ const toastManager = Toast.useToastManager();
- setToasts((prev) => [...prev, toastItem]);
- return toastItem.id;
- }, []);
+ const create = useCallback(
+ (options: ToastOptions): string => {
+ const id = `toast-${toastIdCounter++}`;
+ const durationInMs =
+ options.closable === false
+ ? 0
+ : options.duration
+ ? options.duration * 1000
+ : 5000;
- const remove = useCallback((id: string) => {
- setToasts((prev) => prev.filter((t) => t.id !== id));
- }, []);
+ const sanitizedMessage = DOMPurify.sanitize(options.message, {
+ ALLOWED_TAGS: ["a", "em", "strong", "i", "b", "u"],
+ });
- const removeAll = useCallback(() => {
- setToasts([]);
- }, []);
+ return toastManager.add({
+ id: options?.id || id,
+ timeout: durationInMs,
+ description: ,
+ type: options.type || "info",
+ actionProps: {
+ children: options.action?.label,
+ onClick: options.action?.onClick,
+ },
+ data: {
+ icon: options.icon,
+ closable: options.closable,
+ },
+ });
+ },
+ [toastManager]
+ );
- const updateToastInState = useCallback(
- (id: string, updates: Partial>) => {
- setToasts((prev) =>
- prev.map((t) => (t.id === id ? { ...t, ...updates, open: true } : t))
- );
+ const remove = useCallback(
+ (id: string) => {
+ toastManager.close(id);
},
- []
+ [toastManager]
);
const promise = useCallback(
@@ -60,53 +74,49 @@ const ToastsProvider: React.FC = ({ children }) => {
promiseToResolve: Promise,
options: ToastPromiseOptions
): Promise => {
- const loadingDurationInSeconds = options.duration ?? 0;
- const toastId = create({
- message: options.loading,
- type: "info",
- icon: ,
- duration: loadingDurationInSeconds,
- closable: false,
- });
-
- try {
- const data = await promiseToResolve;
- const successMessage =
- typeof options.success === "function"
- ? options.success(data)
- : options.success;
- const successToastDurationInSeconds =
- options.successDuration ?? options.duration ?? 5;
-
- updateToastInState(toastId, {
- message: successMessage,
+ return toastManager.promise(promiseToResolve, {
+ loading: {
+ description: options.loading,
+ type: "info",
+ timeout: 0,
+ data: {
+ icon: ,
+ closable: false,
+ },
+ },
+ success: (data) => ({
+ description:
+ typeof options.success === "function"
+ ? options.success(data)
+ : options.success,
type: "success",
- duration: successToastDurationInSeconds * 1000,
- icon: undefined,
- closable: true,
- });
- return data;
- } catch (error) {
- const errorMessage =
- typeof options.error === "function"
- ? options.error(error as TError)
- : options.error;
- const errorToastDurationInSeconds =
- options.errorDuration ?? options.duration ?? 5;
-
- updateToastInState(toastId, {
- message: errorMessage,
+ timeout: (options.successDuration ?? options.duration ?? 5) * 1000,
+ data: {
+ icon: undefined,
+ },
+ }),
+ error: (error) => ({
+ description:
+ typeof options.error === "function"
+ ? options.error(error as TError)
+ : options.error,
type: "error",
- duration: errorToastDurationInSeconds * 1000,
- icon: undefined,
- closable: true,
- });
- throw error;
- }
+ timeout: (options.errorDuration ?? options.duration ?? 5) * 1000,
+ data: {
+ icon: undefined,
+ },
+ }),
+ });
},
- [create, updateToastInState]
+ [toastManager]
);
+ const removeAll = useCallback(() => {
+ toastManager.toasts.forEach((toast: ToastObject) =>
+ toastManager.close(toast.id)
+ );
+ }, [toastManager]);
+
const success = useCallback(
(message: string, options: Omit = {}) =>
create({ message, type: "success", ...options }),
@@ -128,7 +138,7 @@ const ToastsProvider: React.FC = ({ children }) => {
[create]
);
- const api = useMemo(
+ const api: ToastAPI = useMemo(
() => ({
create,
remove,
@@ -141,23 +151,18 @@ const ToastsProvider: React.FC = ({ children }) => {
}),
[create, remove, removeAll, promise, success, error, warning, info]
);
+
return (
-
-
- {children}
- {toasts.map((t) => (
- {
- if (!isOpen) {
- remove(t.id);
- }
- }}
- />
- ))}
-
-
-
+
+ {children}
+
+
+ {toastManager.toasts.map((toast: ToastObject) => (
+
+ ))}
+
+
+
);
};
diff --git a/packages/frappe-ui-react/src/components/toast/types.ts b/packages/frappe-ui-react/src/components/toast/types.ts
index 06173d02..564eb81a 100644
--- a/packages/frappe-ui-react/src/components/toast/types.ts
+++ b/packages/frappe-ui-react/src/components/toast/types.ts
@@ -1,3 +1,4 @@
+import type { ToastObject } from "@base-ui/react";
import type { ReactNode } from "react";
export interface ToastActionProps {
@@ -7,15 +8,7 @@ export interface ToastActionProps {
}
export interface ToastProps {
- open: boolean;
- onOpenChange: (open: boolean) => void;
- message: string;
- type?: ToastType;
- icon?: ReactNode;
- closable?: boolean;
- duration?: number;
- action?: ToastActionProps;
- id: string;
+ toast: ToastObject;
}
export type ToastType = "success" | "warning" | "error" | "info";
@@ -26,8 +19,14 @@ export interface ToastActionProps {
altText?: string;
}
-export interface ToastOptions
- extends Omit, "open" | "message"> {
+export interface ToastOptions {
+ onOpenChange?: (open: boolean) => void;
+ type?: ToastType;
+ icon?: ReactNode;
+ closable?: boolean;
+ duration?: number;
+ action?: ToastActionProps;
+ id?: string;
message: string;
}
@@ -39,3 +38,8 @@ export interface ToastPromiseOptions {
errorDuration?: number;
duration?: number;
}
+
+export interface ToastDataInternal {
+ icon?: ReactNode;
+ closable?: boolean;
+}
diff --git a/packages/frappe-ui-react/src/components/tooltip/tests/tooltip.tsx b/packages/frappe-ui-react/src/components/tooltip/tests/tooltip.tsx
new file mode 100644
index 00000000..cd0ed544
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/tooltip/tests/tooltip.tsx
@@ -0,0 +1,242 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import userEvent from "@testing-library/user-event";
+
+import Tooltip from "../tooltip";
+import { Button } from "../../button";
+
+describe("Tooltip", () => {
+ describe("Basic Rendering", () => {
+ it("renders children without tooltip initially", () => {
+ render(
+
+
+
+ );
+
+ expect(screen.getByText("Hover me")).toBeInTheDocument();
+ expect(screen.queryByText("Tooltip text")).not.toBeInTheDocument();
+ });
+
+ it("shows tooltip on hover", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ const trigger = screen.getByText("Hover me");
+ await user.hover(trigger);
+
+ expect(await screen.findByText("Tooltip text")).toBeInTheDocument();
+ });
+
+ it("hides tooltip on mouse leave", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ const trigger = screen.getByText("Hover me");
+ await user.hover(trigger);
+
+ expect(await screen.findByText("Tooltip text")).toBeInTheDocument();
+
+ await user.unhover(trigger);
+
+ await waitFor(() => {
+ expect(screen.queryByText("Tooltip text")).not.toBeInTheDocument();
+ });
+ });
+ });
+
+ describe("Text Prop", () => {
+ it("renders tooltip with text content", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ await user.hover(screen.getByText("Trigger"));
+
+ expect(
+ await screen.findByText("This is tooltip text")
+ ).toBeInTheDocument();
+ });
+
+ it("renders empty tooltip when text is empty string", async () => {
+ const user = userEvent.setup();
+
+ render(
+
+
+
+ );
+
+ await user.hover(screen.getByText("Trigger"));
+
+ await waitFor(() => {
+ expect(screen.queryByTestId("tooltip-popup")).not.toBeInTheDocument();
+ });
+ });
+ });
+
+ describe("Body Prop", () => {
+ it("renders custom body content", async () => {
+ const user = userEvent.setup();
+
+ render(
+ Custom content