feat: useToastController should handle toasterId (#27902)

toasterId can no longer be used from the individual control functions
such as `dispatchToast`.

Instead, the useToastController should be called with the correct
toasterId to return controls for a specific toaster. This should promote
modular use of the API and encapsulate toaster behaviour better.

Author: ling1726

packages/react-components/react-toast/etc/react-toast.api.md

@@ -19,10 +19,10 @@ export type ToastOffset = Partial<Record<ToastPosition, ToastOffsetObject>> | To
 export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 // @public (undocumented)
-export function useToastController(): {
-    dispatchToast: (content: React_2.ReactNode, options?: Partial<ToastOptions> | undefined) => void;
-    dismissToast: (toastId: ToastId, toasterId?: string | undefined) => void;
-    dismissAllToasts: (toasterId?: string | undefined) => void;
+export function useToastController(toasterId?: ToasterId): {
+    dispatchToast: (content: React_2.ReactNode, options?: Partial<Omit<ToastOptions, "toasterId">> | undefined) => void;
+    dismissToast: (toastId: ToastId) => void;
+    dismissAllToasts: () => void;
     updateToast: (options: UpdateToastEventDetail) => void;
 };
 

packages/react-components/react-toast/src/state/useToastController.ts

@@ -10,7 +10,7 @@ import { ToastId, ToastOptions, ToasterId, UpdateToastEventDetail } from './type
 
 const noop = () => undefined;
 
-export function useToastController() {
+export function useToastController(toasterId?: ToasterId) {
   const { targetDocument } = useFluent();
 
   return React.useMemo(() => {
@@ -24,18 +24,18 @@ export function useToastController() {
     }
 
     return {
-      dispatchToast: (content: React.ReactNode, options?: Partial<ToastOptions>) => {
+      dispatchToast: (content: React.ReactNode, options?: Partial<Omit<ToastOptions, 'toasterId'>>) => {
         dispatchToastVanilla(content, options, targetDocument);
       },
-      dismissToast: (toastId: ToastId, toasterId?: ToasterId) => {
+      dismissToast: (toastId: ToastId) => {
         dismissToastVanilla(toastId, toasterId, targetDocument);
       },
-      dismissAllToasts: (toasterId?: ToasterId) => {
+      dismissAllToasts: () => {
         dismissAllToastsVanilla(toasterId, targetDocument);
       },
       updateToast: (options: UpdateToastEventDetail) => {
         updateToastVanilla(options, targetDocument);
       },
     };
-  }, [targetDocument]);
+  }, [targetDocument, toasterId]);
 }

packages/react-components/react-toast/stories/Toast/CustomTimeout.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const CustomTimeout = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = () => dispatchToast('This is a toast', { timeout: 1000, toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('This is a toast', { timeout: 1000 });
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/Default.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const Default = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = () => dispatchToast('This is a toast', { toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('This is a toast');
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/DefaultToastOptions.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const DefaultToastOptions = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = () => dispatchToast('This is a toast', { toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('This is a toast');
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/DismissAll.stories.tsx

@@ -4,9 +4,9 @@ import { useId } from '@fluentui/react-components';
 
 export const DismissAll = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast, dismissAllToasts } = useToastController();
-  const notify = () => dispatchToast('This is a toast', { toasterId });
-  const dismissAll = () => dismissAllToasts(toasterId);
+  const { dispatchToast, dismissAllToasts } = useToastController(toasterId);
+  const notify = () => dispatchToast('This is a toast');
+  const dismissAll = () => dismissAllToasts();
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/DismissToast.stories.tsx

@@ -5,9 +5,9 @@ import { useId } from '@fluentui/react-components';
 export const DismissToast = () => {
   const toasterId = useId('toaster');
   const toastId = useId('example');
-  const { dispatchToast, dismissToast } = useToastController();
-  const notify = () => dispatchToast('This is a toast', { toastId, toasterId });
-  const dismiss = () => dismissToast(toastId, toasterId);
+  const { dispatchToast, dismissToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('This is a toast', { toastId });
+  const dismiss = () => dismissToast(toastId);
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/MultipleToasters.stories.tsx

@@ -5,9 +5,10 @@ import { useId } from '@fluentui/react-components';
 export const MultipeToasters = () => {
   const first = useId('toaster-1');
   const second = useId('toaster-2');
-  const { dispatchToast } = useToastController();
-  const notifyFirst = () => dispatchToast('Toaster first', { toasterId: first });
-  const notifySecond = () => dispatchToast('Toaster second', { toasterId: second });
+  const { dispatchToast: dispatchFirstToast } = useToastController(first);
+  const { dispatchToast: dispatchSecondToast } = useToastController(second);
+  const notifyFirst = () => dispatchFirstToast('Toaster first');
+  const notifySecond = () => dispatchSecondToast('Toaster second');
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/Offset.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const Offset = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = (position: ToastPosition) => dispatchToast('This is a toast', { position, toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = (position: ToastPosition) => dispatchToast('This is a toast', { position });
   const [horizontal, setHorizontal] = React.useState(10);
   const [vertical, setVertical] = React.useState(10);
 

packages/react-components/react-toast/stories/Toast/PauseOnHover.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const PauseOnHover = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = () => dispatchToast('Hover me!', { pauseOnHover: true, toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('Hover me!', { pauseOnHover: true });
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/PauseOnWindowBlur.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const PauseOnWindowBlur = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = () => dispatchToast('Click on another window!', { pauseOnWindowBlur: true, toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('Click on another window!', { pauseOnWindowBlur: true });
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/ToastPositions.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const ToastPositions = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = (position: ToastPosition) => dispatchToast('This is a toast', { position, toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = (position: ToastPosition) => dispatchToast('This is a toast', { position });
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/ToasterLimit.stories.tsx

@@ -4,8 +4,8 @@ import { useId } from '@fluentui/react-components';
 
 export const ToasterLimit = () => {
   const toasterId = useId('toaster');
-  const { dispatchToast } = useToastController();
-  const notify = () => dispatchToast('This is a toast', { toasterId });
+  const { dispatchToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('This is a toast');
 
   return (
     <>

packages/react-components/react-toast/stories/Toast/UpdateToast.stories.tsx

@@ -5,9 +5,9 @@ import { useId } from '@fluentui/react-components';
 export const UpdateToast = () => {
   const toasterId = useId('toaster');
   const toastId = useId('example');
-  const { dispatchToast, updateToast } = useToastController();
-  const notify = () => dispatchToast('This toast never closes', { toastId, timeout: -1, toasterId });
-  const update = () => updateToast({ content: 'This toast will close soon', toastId, timeout: 1000, toasterId });
+  const { dispatchToast, updateToast } = useToastController(toasterId);
+  const notify = () => dispatchToast('This toast never closes', { toastId, timeout: -1 });
+  const update = () => updateToast({ content: 'This toast will close soon', toastId, timeout: 1000 });
 
   return (
     <>