@fluentui/react-toast 9.7.17 → 9.8.0

package/CHANGELOG.md

@@ -1,23 +1,47 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Thu, 23 Apr 2026 11:59:36 GMT and should not be manually modified.
+This log was last generated on Wed, 27 May 2026 11:18:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.8.0)
+
+Wed, 27 May 2026 11:18:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.7.18..@fluentui/react-toast_v9.8.0)
+
+### Minor changes
+
+- feat: export toast base hooks and types ([PR #35914](https://github.com/microsoft/fluentui/pull/35914) by dmytrokirpa@microsoft.com)
+
+## [9.7.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.7.18)
+
+Tue, 26 May 2026 09:39:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.7.17..@fluentui/react-toast_v9.7.18)
+
+### Patches
+
+- Bump @fluentui/react-aria to v9.17.12 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion to v9.16.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.5 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-portal to v9.8.13 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.7.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.7.17)
 
-Thu, 23 Apr 2026 11:59:36 GMT 
+Thu, 23 Apr 2026 14:21:09 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.7.16..@fluentui/react-toast_v9.7.17)
 
 ### Patches
 
-- Bump @fluentui/react-aria to v9.17.11 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion to v9.15.0 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-portal to v9.8.12 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-aria to v9.17.11 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion to v9.15.0 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.4 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-portal to v9.8.12 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.7.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.7.16)
 

package/dist/index.d.ts

@@ -11,19 +11,13 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';
 
-declare type Announce = (message: string, options: AnnounceOptions) => void;
-
-declare type AnnounceOptions = {
-    politeness: AriaLivePoliteness;
-};
-
 declare type AriaLivePoliteness = 'polite' | 'assertive';
 
 /**
  * AriaLive Props
  */
 declare type AriaLiveProps = ComponentProps<Partial<AriaLiveSlots>> & {
-    announceRef: React_2.Ref<Announce>;
+    announceRef: React_2.Ref<ToastAnnounce>;
     children?: React_2.ReactNode;
 };
 
@@ -36,10 +30,6 @@ declare interface CommonToastDetail {
     toasterId?: ToasterId;
 }
 
-declare interface DispatchToastOptions extends Partial<Omit<ToastOptions, 'toasterId'>> {
-    root?: RootSlot;
-}
-
 /**
  * Render the final JSX of Toast
  */
@@ -50,6 +40,11 @@ export declare const renderToast_unstable: (state: ToastState, contextValues: To
  */
 export declare const renderToastBody_unstable: (state: ToastBodyState) => JSXElement;
 
+/**
+ * Render the final JSX of ToastContainer
+ */
+export declare const renderToastContainer_unstable: (state: ToastContainerState, contextValues: ToastContainerContextValues) => JSXElement;
+
 /**
  * Render the final JSX of Toaster
  */
@@ -72,8 +67,6 @@ export declare const renderToastTitle_unstable: (state: ToastTitleState) => JSXE
  */
 export declare const renderToastTrigger_unstable: (state: ToastTriggerState) => JSXElement | null;
 
-declare type RootSlot = Slot<'div'>;
-
 declare type TimerProps = {
     running: boolean;
     timeout: number;
@@ -86,32 +79,37 @@ declare type TimerProps = {
  */
 export declare const Toast: ForwardRefComponent<ToastProps>;
 
-declare interface Toast_2<TData = object> extends ToastOptions<TData> {
-    /**
-     * Determines the visiblity of a toast
-     */
-    close: () => void;
-    /**
-     * Removes a toast completely
-     */
-    remove: () => void;
-    /**
-     * A number used to track updates immutably
-     */
-    updateId: number;
-    /**
-     * Used to determine default priority when the user does not set one
-     * Simple counter of toasts dispatched.
-     */
-    order: number;
-    imperativeRef: React_2.RefObject<ToastImperativeRef | null>;
-}
+export declare type ToastAnnounce = (message: string, options: ToastAnnounceOptions) => void;
+
+export declare type ToastAnnounceOptions = {
+    politeness: AriaLivePoliteness;
+};
+
+/**
+ * Toast Props without design-only props.
+ */
+export declare type ToastBaseProps = Omit<ToastProps, 'appearance'>;
+
+/**
+ * State used in rendering Toast, without design-only state.
+ */
+export declare type ToastBaseState = Omit<ToastState, 'backgroundAppearance'>;
 
 /**
  * ToastBody component
  */
 export declare const ToastBody: ForwardRefComponent<ToastBodyProps>;
 
+/**
+ * ToastBody Props without design-only props.
+ */
+export declare type ToastBodyBaseProps = ToastBodyProps;
+
+/**
+ * State used in rendering ToastBody, without design-only state.
+ */
+export declare type ToastBodyBaseState = Omit<ToastBodyState, 'backgroundAppearance'>;
+
 export declare const toastBodyClassNames: SlotClassNames<ToastBodySlots>;
 
 /**
@@ -131,34 +129,40 @@ export declare type ToastBodyState = ComponentState<ToastBodySlots> & {
     backgroundAppearance: BackgroundAppearanceContextValue;
 };
 
-declare interface ToastChangeData extends ToastOptions, Pick<Toast_2, 'updateId'> {
+export declare interface ToastChangeData extends ToastOptions, Pick<ToastData, 'updateId'> {
     status: ToastStatus;
 }
 
-declare type ToastChangeHandler = (event: null, data: ToastChangeData) => void;
+export declare type ToastChangeHandler = (event: null, data: ToastChangeData) => void;
 
 export declare const toastClassNames: SlotClassNames<ToastSlots>;
 
 export declare const toastContainerClassNames: SlotClassNames<ToastContainerSlots>;
 
-declare type ToastContainerContextValue = {
+export declare const ToastContainerContextProvider: React_2.Provider<ToastContainerContextValue | undefined>;
+
+export declare type ToastContainerContextValue = {
     close: () => void;
     intent: ToastIntent | undefined;
     bodyId: string;
     titleId: string;
 };
 
+declare type ToastContainerContextValues = {
+    toast: ToastContainerContextValue;
+};
+
 /**
  * ToastContainer Props
  */
-declare type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> & Toast_2 & {
+export declare type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> & ToastData & {
     visible: boolean;
-    announce: Announce;
+    announce: ToastAnnounce;
     intent: ToastIntent | undefined;
     tryRestoreFocus: () => void;
 };
 
-declare type ToastContainerSlots = {
+export declare type ToastContainerSlots = {
     root: NonNullable<Slot<'div'>>;
     timer: NonNullable<Slot<TimerProps>>;
 };
@@ -190,6 +194,31 @@ declare type ToastContextValues = {
     backgroundAppearance: BackgroundAppearanceContextValue;
 };
 
+export declare interface ToastData<TData = object> extends ToastOptions<TData> {
+    /**
+     * Determines the visiblity of a toast
+     */
+    close: () => void;
+    /**
+     * Removes a toast completely
+     */
+    remove: () => void;
+    /**
+     * A number used to track updates immutably
+     */
+    updateId: number;
+    /**
+     * Used to determine default priority when the user does not set one
+     * Simple counter of toasts dispatched.
+     */
+    order: number;
+    imperativeRef: React_2.RefObject<ToastImperativeRef | null>;
+}
+
+export declare interface ToastDispatchOptions extends Partial<Omit<ToastOptions, 'toasterId'>> {
+    root?: Slot<'div'>;
+}
+
 /**
  * Toaster component - renders a collection of toasts dispatched imperatively
  */
@@ -197,9 +226,9 @@ export declare const Toaster: React_2.FC<ToasterProps>;
 
 export declare const toasterClassNames: SlotClassNames<ToasterSlots>;
 
-declare type ToasterId = string;
+export declare type ToasterId = string;
 
-declare interface ToasterOptions extends Pick<ToastOptions, 'position' | 'timeout' | 'pauseOnWindowBlur' | 'pauseOnHover' | 'priority'> {
+export declare interface ToasterOptions extends Pick<ToastOptions, 'position' | 'timeout' | 'pauseOnWindowBlur' | 'pauseOnHover' | 'priority'> {
     offset?: ToastOffset;
     toasterId?: ToasterId;
     limit?: number;
@@ -213,11 +242,11 @@ export declare type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'
     /**
      * User override API for aria-live narration for toasts
      */
-    announce?: Announce;
+    announce?: ToastAnnounce;
     inline?: boolean;
 };
 
-declare interface ToasterShortcuts {
+export declare interface ToasterShortcuts {
     focus: (e: KeyboardEvent) => boolean;
 }
 
@@ -270,7 +299,7 @@ export declare type ToastFooterState = ComponentState<ToastFooterSlots>;
 
 export declare type ToastId = string;
 
-declare type ToastImperativeRef = {
+export declare type ToastImperativeRef = {
     /**
      * Focuses the Toast.
      * If there are no focusable elements in the Toast, the Toast itself is focused.
@@ -288,6 +317,12 @@ declare type ToastImperativeRef = {
 
 export declare type ToastIntent = 'info' | 'success' | 'error' | 'warning';
 
+export declare type ToastLiveMessage = {
+    message: string;
+    createdAt: number;
+    politeness: AriaLivePoliteness;
+};
+
 export declare type ToastOffset = Partial<Record<ToastPosition, ToastOffsetObject>> | ToastOffsetObject;
 
 declare interface ToastOffsetObject {
@@ -295,7 +330,7 @@ declare interface ToastOffsetObject {
     vertical?: number;
 }
 
-declare interface ToastOptions<TData = object> {
+export declare interface ToastOptions<TData = object> {
     /**
      * Uniquely identifies a toast, used for update and dismiss operations
      */
@@ -382,6 +417,16 @@ export declare type ToastStatus = 'queued' | 'visible' | 'dismissed' | 'unmounte
  */
 export declare const ToastTitle: ForwardRefComponent<ToastTitleProps>;
 
+/**
+ * ToastTitle Props without design-only props.
+ */
+export declare type ToastTitleBaseProps = ToastTitleProps;
+
+/**
+ * State used in rendering ToastTitle, without design-only state.
+ */
+export declare type ToastTitleBaseState = Omit<ToastTitleState, 'backgroundAppearance'>;
+
 export declare const toastTitleClassNames: SlotClassNames<ToastTitleSlots>;
 
 /**
@@ -424,12 +469,12 @@ export declare type ToastTriggerState = {
     children: React_2.ReactElement | null;
 };
 
-declare interface UpdateToastEventDetail extends Partial<ToastOptions>, CommonToastDetail {
+export declare interface ToastUpdateEventDetail extends Partial<ToastOptions>, CommonToastDetail {
     toastId: ToastId;
 }
 
-declare interface UpdateToastOptions extends UpdateToastEventDetail {
-    root?: RootSlot;
+export declare interface ToastUpdateOptions extends ToastUpdateEventDetail {
+    root?: Slot<'div'>;
 }
 
 /**
@@ -443,6 +488,26 @@ declare interface UpdateToastOptions extends UpdateToastEventDetail {
  */
 export declare const useToast_unstable: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;
 
+/**
+ * Wraps an aria live announcement function.
+ * Aria live announcements can be detrimental once the user is already navigating
+ * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.
+ * @param announce - The aria live announcement function to wrap
+ * @returns A function to announce a toast and a ref to attach to the toaster element
+ */
+export declare function useToastAnnounce(announce: ToastAnnounce): {
+    announceToast: ToastAnnounce;
+    toasterRef: React_2.RefCallback<HTMLDivElement>;
+};
+
+/**
+ * Create the base state required to render Toast, without design-only props.
+ *
+ * @param props - props from this instance of Toast (without appearance)
+ * @param ref - reference to root HTMLElement of Toast
+ */
+export declare const useToastBase_unstable: (props: ToastBaseProps, ref: React_2.Ref<HTMLElement>) => ToastBaseState;
+
 /**
  * Create the state required to render ToastBody.
  *
@@ -454,24 +519,56 @@ export declare const useToast_unstable: (props: ToastProps, ref: React_2.Ref<HTM
  */
 export declare const useToastBody_unstable: (props: ToastBodyProps, ref: React_2.Ref<HTMLElement>) => ToastBodyState;
 
+/**
+ * Create the base state required to render ToastBody, without design-only props.
+ *
+ * @param props - props from this instance of ToastBody
+ * @param ref - reference to root HTMLElement of ToastBody
+ */
+export declare const useToastBodyBase_unstable: (props: ToastBodyBaseProps, ref: React_2.Ref<HTMLElement>) => ToastBodyBaseState;
+
 /**
  * Apply styling to the ToastBody slots based on the state
  */
 export declare const useToastBodyStyles_unstable: (state: ToastBodyState) => ToastBodyState;
 
+/**
+ * Create the state required to render ToastContainer.
+ *
+ * The returned state can be modified with hooks such as useToastContainerStyles_unstable,
+ * before being passed to renderToastContainer_unstable.
+ *
+ * @param props - props from this instance of ToastContainer
+ * @param ref - reference to root HTMLElement of ToastContainer
+ */
+export declare const useToastContainer_unstable: (props: ToastContainerProps, ref: React_2.Ref<HTMLElement>) => ToastContainerState;
+
+export declare const useToastContainerContext: () => ToastContainerContextValue;
+
+export declare function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues;
+
 /**
  * @param toasterId - If an id is provided all imperative methods control that specific toaster
  * @returns Imperative methods to control toasts
  */
 export declare function useToastController(toasterId?: ToasterId): {
-    dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions) => void;
+    dispatchToast: (content: React_2.ReactNode, options?: ToastDispatchOptions) => void;
     dismissToast: (toastId: ToastId) => void;
     dismissAllToasts: () => void;
-    updateToast: (options: UpdateToastOptions) => void;
+    updateToast: (options: ToastUpdateOptions) => void;
     pauseToast: (toastId: ToastId) => void;
     playToast: (toastId: ToastId) => void;
 };
 
+export declare function useToaster<TElement extends HTMLElement = HTMLDivElement>(options?: Partial<ToasterOptions>): {
+    isToastVisible: (toastId: ToastId) => boolean;
+    toastsToRender: Map<ToastPosition, ToastData[]>;
+    pauseAllToasts: () => void;
+    playAllToasts: () => void;
+    tryRestoreFocus: () => void;
+    closeAllToasts: () => void;
+};
+
 /**
  * Create the state required to render Toaster.
  *
@@ -516,6 +613,14 @@ export declare const useToastStyles_unstable: (state: ToastState) => ToastState;
  */
 export declare const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref<HTMLElement>) => ToastTitleState;
 
+/**
+ * Create the base state required to render ToastTitle, without design-only props.
+ *
+ * @param props - props from this instance of ToastTitle
+ * @param ref - reference to root HTMLElement of ToastTitle
+ */
+export declare const useToastTitleBase_unstable: (props: ToastTitleBaseProps, ref: React_2.Ref<HTMLElement>) => ToastTitleBaseState;
+
 /**
  * Apply styling to the ToastTitle slots based on the state
  */

package/lib/Toast.js

@@ -1 +1 @@
-export { Toast, renderToast_unstable, toastClassNames, useToastStyles_unstable, useToast_unstable } from './components/Toast/index';
+export { Toast, renderToast_unstable, toastClassNames, useToastStyles_unstable, useToastBase_unstable, useToast_unstable } from './components/Toast/index';

package/lib/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Toast.ts"],"sourcesContent":["export type { ToastContextValues, ToastProps, ToastSlots, ToastState } from './components/Toast/index';\nexport {\n  Toast,\n  renderToast_unstable,\n  toastClassNames,\n  useToastStyles_unstable,\n  useToast_unstable,\n} from './components/Toast/index';\n"],"names":["Toast","renderToast_unstable","toastClassNames","useToastStyles_unstable","useToast_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,oBAAoB,EACpBC,eAAe,EACfC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Toast.ts"],"sourcesContent":["export type {\n  ToastBaseProps,\n  ToastBaseState,\n  ToastContextValues,\n  ToastProps,\n  ToastSlots,\n  ToastState,\n} from './components/Toast/index';\nexport {\n  Toast,\n  renderToast_unstable,\n  toastClassNames,\n  useToastStyles_unstable,\n  useToastBase_unstable,\n  useToast_unstable,\n} from './components/Toast/index';\n"],"names":["Toast","renderToast_unstable","toastClassNames","useToastStyles_unstable","useToastBase_unstable","useToast_unstable"],"mappings":"AAQA,SACEA,KAAK,EACLC,oBAAoB,EACpBC,eAAe,EACfC,uBAAuB,EACvBC,qBAAqB,EACrBC,iBAAiB,QACZ,2BAA2B"}

package/lib/ToastBody.js

@@ -1 +1 @@
-export { ToastBody, renderToastBody_unstable, toastBodyClassNames, useToastBodyStyles_unstable, useToastBody_unstable } from './components/ToastBody/index';
+export { ToastBody, renderToastBody_unstable, toastBodyClassNames, useToastBodyStyles_unstable, useToastBodyBase_unstable, useToastBody_unstable } from './components/ToastBody/index';

package/lib/ToastBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToastBody.ts"],"sourcesContent":["export type { ToastBodyProps, ToastBodySlots, ToastBodyState } from './components/ToastBody/index';\nexport {\n  ToastBody,\n  renderToastBody_unstable,\n  toastBodyClassNames,\n  useToastBodyStyles_unstable,\n  useToastBody_unstable,\n} from './components/ToastBody/index';\n"],"names":["ToastBody","renderToastBody_unstable","toastBodyClassNames","useToastBodyStyles_unstable","useToastBody_unstable"],"mappings":"AACA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,qBAAqB,QAChB,+BAA+B"}
+{"version":3,"sources":["../src/ToastBody.ts"],"sourcesContent":["export type {\n  ToastBodyBaseProps,\n  ToastBodyBaseState,\n  ToastBodyProps,\n  ToastBodySlots,\n  ToastBodyState,\n} from './components/ToastBody/index';\nexport {\n  ToastBody,\n  renderToastBody_unstable,\n  toastBodyClassNames,\n  useToastBodyStyles_unstable,\n  useToastBodyBase_unstable,\n  useToastBody_unstable,\n} from './components/ToastBody/index';\n"],"names":["ToastBody","renderToastBody_unstable","toastBodyClassNames","useToastBodyStyles_unstable","useToastBodyBase_unstable","useToastBody_unstable"],"mappings":"AAOA,SACEA,SAAS,EACTC,wBAAwB,EACxBC,mBAAmB,EACnBC,2BAA2B,EAC3BC,yBAAyB,EACzBC,qBAAqB,QAChB,+BAA+B"}

package/lib/ToastTitle.js

@@ -1 +1 @@
-export { ToastTitle, renderToastTitle_unstable, toastTitleClassNames, useToastTitleStyles_unstable, useToastTitle_unstable } from './components/ToastTitle/index';
+export { ToastTitle, renderToastTitle_unstable, toastTitleClassNames, useToastTitleStyles_unstable, useToastTitleBase_unstable, useToastTitle_unstable } from './components/ToastTitle/index';

package/lib/ToastTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToastTitle.ts"],"sourcesContent":["export type { ToastTitleProps, ToastTitleSlots, ToastTitleState } from './components/ToastTitle/index';\nexport {\n  ToastTitle,\n  renderToastTitle_unstable,\n  toastTitleClassNames,\n  useToastTitleStyles_unstable,\n  useToastTitle_unstable,\n} from './components/ToastTitle/index';\n"],"names":["ToastTitle","renderToastTitle_unstable","toastTitleClassNames","useToastTitleStyles_unstable","useToastTitle_unstable"],"mappings":"AACA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,sBAAsB,QACjB,gCAAgC"}
+{"version":3,"sources":["../src/ToastTitle.ts"],"sourcesContent":["export type {\n  ToastTitleBaseProps,\n  ToastTitleBaseState,\n  ToastTitleProps,\n  ToastTitleSlots,\n  ToastTitleState,\n} from './components/ToastTitle/index';\nexport {\n  ToastTitle,\n  renderToastTitle_unstable,\n  toastTitleClassNames,\n  useToastTitleStyles_unstable,\n  useToastTitleBase_unstable,\n  useToastTitle_unstable,\n} from './components/ToastTitle/index';\n"],"names":["ToastTitle","renderToastTitle_unstable","toastTitleClassNames","useToastTitleStyles_unstable","useToastTitleBase_unstable","useToastTitle_unstable"],"mappings":"AAOA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,oBAAoB,EACpBC,4BAA4B,EAC5BC,0BAA0B,EAC1BC,sBAAsB,QACjB,gCAAgC"}

package/lib/Toaster.js

@@ -1 +1 @@
-export { Toaster, renderToaster_unstable, toasterClassNames, useToasterStyles_unstable, useToaster_unstable } from './components/Toaster/index';
+export { Toaster, renderToaster_unstable, toasterClassNames, useToasterStyles_unstable, useToaster_unstable, useToastAnnounce } from './components/Toaster/index';

package/lib/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Toaster.ts"],"sourcesContent":["export type { ToasterProps, ToasterSlots, ToasterSlotsInternal, ToasterState } from './components/Toaster/index';\nexport {\n  Toaster,\n  renderToaster_unstable,\n  toasterClassNames,\n  useToasterStyles_unstable,\n  useToaster_unstable,\n} from './components/Toaster/index';\n"],"names":["Toaster","renderToaster_unstable","toasterClassNames","useToasterStyles_unstable","useToaster_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/Toaster.ts"],"sourcesContent":["export type { ToasterProps, ToasterSlots, ToasterSlotsInternal, ToasterState } from './components/Toaster/index';\nexport {\n  Toaster,\n  renderToaster_unstable,\n  toasterClassNames,\n  useToasterStyles_unstable,\n  useToaster_unstable,\n  useToastAnnounce,\n} from './components/Toaster/index';\n"],"names":["Toaster","renderToaster_unstable","toasterClassNames","useToasterStyles_unstable","useToaster_unstable","useToastAnnounce"],"mappings":"AACA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,gBAAgB,QACX,6BAA6B"}

package/lib/components/AriaLive/useAriaLiveStyles.styles.js

@@ -16,7 +16,9 @@ export const useAriaLiveStyles_unstable = state => {
   'use no memo';
 
   const visuallyHidden = useResetStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);
   return state;
 };

package/lib/components/AriaLive/useAriaLiveStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n    assertive: 'fui-AriaLive__assertive',\n    polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n    'use no memo';\n    const visuallyHidden = useResetStyles();\n    state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n    state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC9D,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,SAAS,EAAE,yBAAyB;EACpCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGJ,aAAA,6IAQ1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGH,cAAc,CAAC,CAAC;EACvCE,KAAK,CAACJ,SAAS,CAACM,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;EACjHF,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n    assertive: 'fui-AriaLive__assertive',\n    polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n    'use no memo';\n    const visuallyHidden = useResetStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC9D,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,SAAS,EAAE,yBAAyB;EACpCC,MAAM,EAAE;AACZ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGJ,aAAA,6IAQ1B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGH,cAAc,CAAC,CAAC;EACvC;EACAE,KAAK,CAACJ,SAAS,CAACM,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;EACjH;EACAF,KAAK,CAACH,MAAM,CAACK,SAAS,GAAGT,YAAY,CAACQ,cAAc,EAAEN,kBAAkB,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js

@@ -20,7 +20,9 @@ export const ariaLiveClassNames = {
  */ export const useAriaLiveStyles_unstable = (state)=>{
     'use no memo';
     const visuallyHidden = useResetStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);
     return state;
 };

package/lib/components/AriaLive/useAriaLiveStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n  assertive: 'fui-AriaLive__assertive',\n  polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  clip: 'rect(0px, 0px, 0px, 0px)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: '0px',\n  width: '1px',\n  position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n  'use no memo';\n\n  const visuallyHidden = useResetStyles();\n  state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n  state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","clip","height","margin","overflow","padding","width","position","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,qBAAoD;IAC/DC,WAAW;IACXC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBJ,gBAAgB;IACrCK,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBV;IACvBS,MAAMX,SAAS,CAACa,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBC,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChHF,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBE,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n  assertive: 'fui-AriaLive__assertive',\n  polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  clip: 'rect(0px, 0px, 0px, 0px)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: '0px',\n  width: '1px',\n  position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n  'use no memo';\n\n  const visuallyHidden = useResetStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n  // eslint-disable-next-line react-hooks/immutability\n  state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","clip","height","margin","overflow","padding","width","position","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA;AAEA,SAASA,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AAI/D,OAAO,MAAMC,qBAAoD;IAC/DC,WAAW;IACXC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBJ,gBAAgB;IACrCK,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBV;IACvB,oDAAoD;IACpDS,MAAMX,SAAS,CAACa,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBC,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChH,oDAAoD;IACpDF,MAAMV,MAAM,CAACY,SAAS,GAAGhB,aAAae,gBAAgBb,mBAAmBE,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT,EAAE"}

package/lib/components/Toast/Toast.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering Toast
+ * State used in rendering Toast, without design-only state.
  */ export { };

package/lib/components/Toast/Toast.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toast/Toast.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport type { ToastIntent } from '../../state/types';\n\nexport type ToastSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToastContextValues = {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n};\n\n/**\n * Toast Props\n */\nexport type ToastProps = ComponentProps<ToastSlots> & {\n  appearance?: BackgroundAppearanceContextValue;\n};\n\n/**\n * State used in rendering Toast\n */\nexport type ToastState = ComponentState<ToastSlots> & {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n  intent?: ToastIntent | undefined;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAGE"}
+{"version":3,"sources":["../src/components/Toast/Toast.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\nimport type { ToastIntent } from '../../state/types';\n\nexport type ToastSlots = {\n  root: Slot<'div'>;\n};\n\nexport type ToastContextValues = {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n};\n\n/**\n * Toast Props\n */\nexport type ToastProps = ComponentProps<ToastSlots> & {\n  appearance?: BackgroundAppearanceContextValue;\n};\n\n/**\n * Toast Props without design-only props.\n */\nexport type ToastBaseProps = Omit<ToastProps, 'appearance'>;\n\n/**\n * State used in rendering Toast\n */\nexport type ToastState = ComponentState<ToastSlots> & {\n  backgroundAppearance: BackgroundAppearanceContextValue;\n  intent?: ToastIntent | undefined;\n};\n\n/**\n * State used in rendering Toast, without design-only state.\n */\nexport type ToastBaseState = Omit<ToastState, 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAgCA;;CAEC,GACD,WAAsE"}

package/lib/components/Toast/index.js

@@ -1,4 +1,4 @@
 export { Toast } from './Toast';
 export { renderToast_unstable } from './renderToast';
-export { useToast_unstable } from './useToast';
+export { useToastBase_unstable, useToast_unstable } from './useToast';
 export { toastClassNames, useToastStyles_unstable } from './useToastStyles.styles';

package/lib/components/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toast/index.ts"],"sourcesContent":["export { Toast } from './Toast';\nexport type { ToastContextValues, ToastProps, ToastSlots, ToastState } from './Toast.types';\nexport { renderToast_unstable } from './renderToast';\nexport { useToast_unstable } from './useToast';\nexport { toastClassNames, useToastStyles_unstable } from './useToastStyles.styles';\n"],"names":["Toast","renderToast_unstable","useToast_unstable","toastClassNames","useToastStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Toast/index.ts"],"sourcesContent":["export { Toast } from './Toast';\nexport type {\n  ToastBaseProps,\n  ToastBaseState,\n  ToastContextValues,\n  ToastProps,\n  ToastSlots,\n  ToastState,\n} from './Toast.types';\nexport { renderToast_unstable } from './renderToast';\nexport { useToastBase_unstable, useToast_unstable } from './useToast';\nexport { toastClassNames, useToastStyles_unstable } from './useToastStyles.styles';\n"],"names":["Toast","renderToast_unstable","useToastBase_unstable","useToast_unstable","toastClassNames","useToastStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAShC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,qBAAqB,EAAEC,iBAAiB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Toast/useToast.js

@@ -2,14 +2,11 @@
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 /**
- * Create the state required to render Toast.
+ * Create the base state required to render Toast, without design-only props.
  *
- * The returned state can be modified with hooks such as useToastStyles_unstable,
- * before being passed to renderToast_unstable.
- *
- * @param props - props from this instance of Toast
+ * @param props - props from this instance of Toast (without appearance)
  * @param ref - reference to root HTMLElement of Toast
- */ export const useToast_unstable = (props, ref)=>{
+ */ export const useToastBase_unstable = (props, ref)=>{
     const { intent } = useToastContainerContext();
     return {
         components: {
@@ -24,7 +21,21 @@ import { useToastContainerContext } from '../../contexts/toastContainerContext';
         }), {
             elementType: 'div'
         }),
-        backgroundAppearance: props.appearance,
         intent
     };
 };
+/**
+ * Create the state required to render Toast.
+ *
+ * The returned state can be modified with hooks such as useToastStyles_unstable,
+ * before being passed to renderToast_unstable.
+ *
+ * @param props - props from this instance of Toast
+ * @param ref - reference to root HTMLElement of Toast
+ */ export const useToast_unstable = (props, ref)=>{
+    const state = useToastBase_unstable(props, ref);
+    return {
+        ...state,
+        backgroundAppearance: props.appearance
+    };
+};

package/lib/components/Toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Toast/useToast.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  const { intent } = useToastContainerContext();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance: props.appearance,\n    intent,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useToastContainerContext","useToast_unstable","props","ref","intent","components","root","always","elementType","backgroundAppearance","appearance"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,MAAM,EAAE,GAAGJ;IAEnB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBC,sBAAsBP,MAAMQ,UAAU;QACtCN;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Toast/useToast.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBaseProps, ToastBaseState, ToastProps, ToastState } from './Toast.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\n\n/**\n * Create the base state required to render Toast, without design-only props.\n *\n * @param props - props from this instance of Toast (without appearance)\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToastBase_unstable = (props: ToastBaseProps, ref: React.Ref<HTMLElement>): ToastBaseState => {\n  const { intent } = useToastContainerContext();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    intent,\n  };\n};\n\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  const state = useToastBase_unstable(props, ref);\n  return {\n    ...state,\n    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","useToastContainerContext","useToastBase_unstable","props","ref","intent","components","root","always","elementType","useToast_unstable","state","backgroundAppearance","appearance"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,wBAAwB,QAAQ,uCAAuC;AAEhF;;;;;CAKC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,MAAM,EAAE,GAAGJ;IAEnB,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAM;QAEvBJ;IACF;AACF,EAAE;AAEF;;;;;;;;CAQC,GACD,OAAO,MAAMK,oBAAoB,CAACP,OAAmBC;IACnD,MAAMO,QAAQT,sBAAsBC,OAAOC;IAC3C,OAAO;QACL,GAAGO,KAAK;QACRC,sBAAsBT,MAAMU,UAAU;IACxC;AACF,EAAE"}

package/lib/components/Toast/useToastStyles.styles.js

@@ -22,6 +22,7 @@ export const useToastStyles_unstable = state => {
 
   const rootBaseClassName = useRootBaseClassName();
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);
   return state;
 };

package/lib/components/Toast/useToastStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n    root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto',\n    padding: '12px',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: '20px',\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,4XAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n    root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto',\n    padding: '12px',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: '20px',\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,4XAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACb,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B;EACAM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}