Release Toast as stable (#28399)

* Release Toast as stable

See title

* changefile

* update story imports

* ES5 compatible iteration

* forEach

* move out of preview

change/@fluentui-react-components-d1adc901-a211-49a5-a7fc-3edd21133ce9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Release Toast component",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-f79d60aa-588e-4ebb-a7e5-4d36bcc24dd9.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Initial release",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -563,6 +563,12 @@ import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
 import { renderTabList_unstable } from '@fluentui/react-tabs';
 import { renderText_unstable } from '@fluentui/react-text';
 import { renderTextarea_unstable } from '@fluentui/react-textarea';
+import { renderToast_unstable } from '@fluentui/react-toast';
+import { renderToastBody_unstable } from '@fluentui/react-toast';
+import { renderToaster_unstable } from '@fluentui/react-toast';
+import { renderToastFooter_unstable } from '@fluentui/react-toast';
+import { renderToastTitle_unstable } from '@fluentui/react-toast';
+import { renderToastTrigger_unstable } from '@fluentui/react-toast';
 import { renderToggleButton_unstable } from '@fluentui/react-button';
 import { renderToolbar_unstable } from '@fluentui/react-toolbar';
 import { renderToolbarGroup_unstable } from '@fluentui/react-toolbar';
@@ -747,6 +753,40 @@ import { Title2 } from '@fluentui/react-text';
 import { title2ClassNames } from '@fluentui/react-text';
 import { Title3 } from '@fluentui/react-text';
 import { title3ClassNames } from '@fluentui/react-text';
+import { Toast } from '@fluentui/react-toast';
+import { ToastBody } from '@fluentui/react-toast';
+import { toastBodyClassNames } from '@fluentui/react-toast';
+import { ToastBodyProps } from '@fluentui/react-toast';
+import { ToastBodySlots } from '@fluentui/react-toast';
+import { ToastBodyState } from '@fluentui/react-toast';
+import { Toaster } from '@fluentui/react-toast';
+import { toasterClassNames } from '@fluentui/react-toast';
+import { ToasterProps } from '@fluentui/react-toast';
+import { ToasterSlots } from '@fluentui/react-toast';
+import { ToasterState } from '@fluentui/react-toast';
+import { ToastFooter } from '@fluentui/react-toast';
+import { toastFooterClassNames } from '@fluentui/react-toast';
+import { ToastFooterProps } from '@fluentui/react-toast';
+import { ToastFooterSlots } from '@fluentui/react-toast';
+import { ToastFooterState } from '@fluentui/react-toast';
+import { ToastId } from '@fluentui/react-toast';
+import { ToastIntent } from '@fluentui/react-toast';
+import { ToastOffset } from '@fluentui/react-toast';
+import { ToastPoliteness } from '@fluentui/react-toast';
+import { ToastPosition } from '@fluentui/react-toast';
+import { ToastProps } from '@fluentui/react-toast';
+import { ToastSlots } from '@fluentui/react-toast';
+import { ToastState } from '@fluentui/react-toast';
+import { ToastStatus } from '@fluentui/react-toast';
+import { ToastTitle } from '@fluentui/react-toast';
+import { toastTitleClassNames } from '@fluentui/react-toast';
+import { ToastTitleProps } from '@fluentui/react-toast';
+import { ToastTitleSlots } from '@fluentui/react-toast';
+import { ToastTitleState } from '@fluentui/react-toast';
+import { ToastTrigger } from '@fluentui/react-toast';
+import { ToastTriggerChildProps } from '@fluentui/react-toast';
+import { ToastTriggerProps } from '@fluentui/react-toast';
+import { ToastTriggerState } from '@fluentui/react-toast';
 import { ToggleButton } from '@fluentui/react-button';
 import { toggleButtonClassNames } from '@fluentui/react-button';
 import { ToggleButtonProps } from '@fluentui/react-button';
@@ -1016,6 +1056,18 @@ import { useTextarea_unstable } from '@fluentui/react-textarea';
 import { useTextareaStyles_unstable } from '@fluentui/react-textarea';
 import { useTextStyles_unstable } from '@fluentui/react-text';
 import { useThemeClassName_unstable as useThemeClassName } from '@fluentui/react-shared-contexts';
+import { useToast_unstable } from '@fluentui/react-toast';
+import { useToastBody_unstable } from '@fluentui/react-toast';
+import { useToastBodyStyles_unstable } from '@fluentui/react-toast';
+import { useToastController } from '@fluentui/react-toast';
+import { useToaster_unstable } from '@fluentui/react-toast';
+import { useToasterStyles_unstable } from '@fluentui/react-toast';
+import { useToastFooter_unstable } from '@fluentui/react-toast';
+import { useToastFooterStyles_unstable } from '@fluentui/react-toast';
+import { useToastStyles_unstable } from '@fluentui/react-toast';
+import { useToastTitle_unstable } from '@fluentui/react-toast';
+import { useToastTitleStyles_unstable } from '@fluentui/react-toast';
+import { useToastTrigger_unstable } from '@fluentui/react-toast';
 import { useToggleButton_unstable } from '@fluentui/react-button';
 import { useToggleButtonStyles_unstable } from '@fluentui/react-button';
 import { useToggleState } from '@fluentui/react-button';
@@ -2156,6 +2208,18 @@ export { renderText_unstable }
 
 export { renderTextarea_unstable }
 
+export { renderToast_unstable }
+
+export { renderToastBody_unstable }
+
+export { renderToaster_unstable }
+
+export { renderToastFooter_unstable }
+
+export { renderToastTitle_unstable }
+
+export { renderToastTrigger_unstable }
+
 export { renderToggleButton_unstable }
 
 export { renderToolbar_unstable }
@@ -2524,6 +2588,74 @@ export { Title3 }
 
 export { title3ClassNames }
 
+export { Toast }
+
+export { ToastBody }
+
+export { toastBodyClassNames }
+
+export { ToastBodyProps }
+
+export { ToastBodySlots }
+
+export { ToastBodyState }
+
+export { Toaster }
+
+export { toasterClassNames }
+
+export { ToasterProps }
+
+export { ToasterSlots }
+
+export { ToasterState }
+
+export { ToastFooter }
+
+export { toastFooterClassNames }
+
+export { ToastFooterProps }
+
+export { ToastFooterSlots }
+
+export { ToastFooterState }
+
+export { ToastId }
+
+export { ToastIntent }
+
+export { ToastOffset }
+
+export { ToastPoliteness }
+
+export { ToastPosition }
+
+export { ToastProps }
+
+export { ToastSlots }
+
+export { ToastState }
+
+export { ToastStatus }
+
+export { ToastTitle }
+
+export { toastTitleClassNames }
+
+export { ToastTitleProps }
+
+export { ToastTitleSlots }
+
+export { ToastTitleState }
+
+export { ToastTrigger }
+
+export { ToastTriggerChildProps }
+
+export { ToastTriggerProps }
+
+export { ToastTriggerState }
+
 export { ToggleButton }
 
 export { toggleButtonClassNames }
@@ -3062,6 +3194,30 @@ export { useTextStyles_unstable }
 
 export { useThemeClassName }
 
+export { useToast_unstable }
+
+export { useToastBody_unstable }
+
+export { useToastBodyStyles_unstable }
+
+export { useToastController }
+
+export { useToaster_unstable }
+
+export { useToasterStyles_unstable }
+
+export { useToastFooter_unstable }
+
+export { useToastFooterStyles_unstable }
+
+export { useToastStyles_unstable }
+
+export { useToastTitle_unstable }
+
+export { useToastTitleStyles_unstable }
+
+export { useToastTrigger_unstable }
+
 export { useToggleButton_unstable }
 
 export { useToggleButtonStyles_unstable }

packages/react-components/react-components/package.json

@@ -69,6 +69,7 @@
     "@fluentui/react-tabster": "^9.9.1",
     "@fluentui/react-textarea": "^9.3.19",
     "@fluentui/react-theme": "^9.1.9",
+    "@fluentui/react-toast": "^9.0.0-alpha.0",
     "@fluentui/react-toolbar": "^9.1.21",
     "@fluentui/react-tooltip": "^9.2.20",
     "@fluentui/react-utilities": "^9.10.0",

packages/react-components/react-components/src/index.ts

@@ -1133,3 +1133,61 @@ export type {
   FieldSlots,
   FieldState,
 } from '@fluentui/react-field';
+
+export {
+  useToastController,
+  ToastTrigger,
+  useToastTrigger_unstable,
+  renderToastTrigger_unstable,
+  Toaster,
+  useToasterStyles_unstable,
+  useToaster_unstable,
+  renderToaster_unstable,
+  toasterClassNames,
+  Toast,
+  useToastStyles_unstable,
+  useToast_unstable,
+  renderToast_unstable,
+  ToastTitle,
+  useToastTitleStyles_unstable,
+  useToastTitle_unstable,
+  renderToastTitle_unstable,
+  toastTitleClassNames,
+  ToastBody,
+  useToastBodyStyles_unstable,
+  useToastBody_unstable,
+  renderToastBody_unstable,
+  toastBodyClassNames,
+  ToastFooter,
+  useToastFooterStyles_unstable,
+  useToastFooter_unstable,
+  renderToastFooter_unstable,
+  toastFooterClassNames,
+} from '@fluentui/react-toast';
+
+export type {
+  ToastPosition,
+  ToastId,
+  ToastOffset,
+  ToastPoliteness,
+  ToastStatus,
+  ToastIntent,
+  ToastTriggerChildProps,
+  ToastTriggerProps,
+  ToastTriggerState,
+  ToasterProps,
+  ToasterState,
+  ToasterSlots,
+  ToastProps,
+  ToastSlots,
+  ToastState,
+  ToastTitleProps,
+  ToastTitleSlots,
+  ToastTitleState,
+  ToastBodyProps,
+  ToastBodyState,
+  ToastBodySlots,
+  ToastFooterProps,
+  ToastFooterState,
+  ToastFooterSlots,
+} from '@fluentui/react-toast';

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

@@ -12,7 +12,9 @@ import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-context
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElementConstructor } from 'react';
 import * as React_2 from 'react';
+import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';
@@ -32,6 +34,9 @@ export const renderToastFooter_unstable: (state: ToastFooterState) => JSX.Elemen
 // @public
 export const renderToastTitle_unstable: (state: ToastTitleState) => JSX.Element;
 
+// @public
+export const renderToastTrigger_unstable: (state: ToastTriggerState) => ReactElement<any, string | JSXElementConstructor<any>> | null;
+
 // @public
 export const Toast: ForwardRefComponent<ToastProps>;
 
@@ -208,6 +213,9 @@ export const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref<H
 // @public
 export const useToastTitleStyles_unstable: (state: ToastTitleState) => ToastTitleState;
 
+// @public
+export const useToastTrigger_unstable: (props: ToastTriggerProps) => ToastTriggerState;
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-toast/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-toast",
   "version": "9.0.0-alpha.0",
-  "private": true,
   "description": "Toast component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -57,8 +56,7 @@
   "beachball": {
     "disallowedChangeTypes": [
       "major",
-      "minor",
-      "patch"
+      "prerelease"
     ]
   },
   "exports": {

packages/react-components/react-toast/src/index.ts

@@ -1,7 +1,7 @@
 export { useToastController } from './state';
 export type { ToastPosition, ToastId, ToastOffset, ToastPoliteness, ToastStatus, ToastIntent } from './state';
 
-export { ToastTrigger } from './ToastTrigger';
+export { ToastTrigger, useToastTrigger_unstable, renderToastTrigger_unstable } from './ToastTrigger';
 export type { ToastTriggerChildProps, ToastTriggerProps, ToastTriggerState } from './ToastTrigger';
 export {
   Toaster,

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

@@ -38,17 +38,17 @@ export function useToaster<TElement extends HTMLElement = HTMLDivElement>(option
   }, []);
 
   const pauseAllToasts = React.useCallback(() => {
-    for (const toastId of toaster.visibleToasts) {
+    toaster.visibleToasts.forEach(toastId => {
       const toast = toaster.toasts.get(toastId);
       toast?.imperativeRef.current?.pause();
-    }
+    });
   }, [toaster]);
 
   const playAllToasts = React.useCallback(() => {
-    for (const toastId of toaster.visibleToasts) {
+    toaster.visibleToasts.forEach(toastId => {
       const toast = toaster.toasts.get(toastId);
       toast?.imperativeRef.current?.play();
-    }
+    });
   }, [toaster]);
 
   const getMostRecentVisibleToast = React.useCallback(() => {

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

@@ -1,6 +1,16 @@
 import * as React from 'react';
-import { Toaster, useToastController, ToastTitle, Toast, ToastTrigger } from '@fluentui/react-toast';
-import { useId, Button, Link, SpinButton, Field } from '@fluentui/react-components';
+import {
+  useId,
+  Button,
+  Link,
+  SpinButton,
+  Field,
+  Toaster,
+  useToastController,
+  ToastTitle,
+  Toast,
+  ToastTrigger,
+} from '@fluentui/react-components';
 
 export const CustomTimeout = () => {
   const [timeout, setDismissTimeout] = React.useState(1000);

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

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { Toaster, useToastController, Toast, ToastTitle, ToastBody, ToastFooter } from '@fluentui/react-toast';
-import { useId, Link, Button } from '@fluentui/react-components';
+import {
+  useId,
+  Link,
+  Button,
+  Toaster,
+  useToastController,
+  Toast,
+  ToastTitle,
+  ToastBody,
+  ToastFooter,
+} from '@fluentui/react-components';
 
 export const Default = () => {
   const toasterId = useId('toaster');