feat(react-headless-components-preview): add headless Toast component family

change/@fluentui-react-headless-components-preview-86a2a1c9-dfd8-4e9e-8286-6567597a6749.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add headless Toast, ToastTitle, ToastBody, ToastFooter, ToastContainer, and Toaster components using the Popover API",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-base-hooks.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add useToastBase_unstable, useToastTitleBase_unstable, and useToastBodyBase_unstable hooks; export useToaster, ToastData, ToasterId, ToastImperativeRef, ToastChangeData, ToastChangeHandler, DispatchToastOptions, UpdateToastOptions from public API",
+  "packageName": "@fluentui/react-toast",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js

@@ -29,6 +29,7 @@ import * as Spinner from '@fluentui/react-headless-components-preview/spinner';
 import * as Switch from '@fluentui/react-headless-components-preview/switch';
 import * as TabList from '@fluentui/react-headless-components-preview/tab-list';
 import * as Textarea from '@fluentui/react-headless-components-preview/textarea';
+import * as Toast from '@fluentui/react-headless-components-preview/toast';
 import * as ToggleButton from '@fluentui/react-headless-components-preview/toggle-button';
 import * as Toolbar from '@fluentui/react-headless-components-preview/toolbar';
 import * as Tooltip from '@fluentui/react-headless-components-preview/tooltip';
@@ -65,6 +66,7 @@ console.log({
   Switch,
   TabList,
   Textarea,
+  Toast,
   ToggleButton,
   Toolbar,
   Tooltip,

packages/react-components/react-headless-components-preview/library/etc/toast.api.md

@@ -0,0 +1,236 @@
+## API Report File for "@fluentui/react-headless-components-preview"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import { DispatchToastOptions } from '@fluentui/react-toast';
+import type { EventHandler } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import { ToastBodyBaseProps } from '@fluentui/react-toast';
+import { ToastBodyBaseState } from '@fluentui/react-toast';
+import { ToastBodySlots } from '@fluentui/react-toast';
+import { ToastChangeData } from '@fluentui/react-toast';
+import { ToastChangeHandler } from '@fluentui/react-toast';
+import type { ToastData } from '@fluentui/react-toast';
+import { ToasterId } 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 { ToastImperativeRef } from '@fluentui/react-toast';
+import type { ToastIntent } from '@fluentui/react-toast';
+import { ToastPoliteness } from '@fluentui/react-toast';
+import { ToastPosition } from '@fluentui/react-toast';
+import { ToastStatus } from '@fluentui/react-toast';
+import { ToastTitleBaseProps } from '@fluentui/react-toast';
+import { ToastTitleBaseState } from '@fluentui/react-toast';
+import { ToastTitleSlots } from '@fluentui/react-toast';
+import { UpdateToastOptions } from '@fluentui/react-toast';
+import { useToastController } from '@fluentui/react-toast';
+
+export { DispatchToastOptions }
+
+// @public (undocumented)
+export const renderToast: (state: ToastState, contextValues: ToastContextValues) => JSXElement;
+
+// @public (undocumented)
+export const renderToastBody: (state: ToastBodyBaseState) => JSXElement;
+
+// @public (undocumented)
+export const renderToastContainer: (state: ToastContainerState, contextValues: ToastContextValues) => JSXElement;
+
+// @public (undocumented)
+export const renderToaster: (state: ToasterState) => JSXElement;
+
+// @public (undocumented)
+export const renderToastFooter: (state: ToastFooterState) => JSXElement;
+
+// @public (undocumented)
+export const renderToastTitle: (state: ToastTitleBaseState) => JSXElement;
+
+// @public (undocumented)
+export const Toast: ForwardRefComponent<ToastProps>;
+
+// @public (undocumented)
+export const ToastBody: ForwardRefComponent<ToastBodyBaseProps>;
+
+export { ToastBodyBaseProps }
+
+export { ToastBodyBaseState }
+
+export { ToastBodySlots }
+
+export { ToastChangeData }
+
+export { ToastChangeHandler }
+
+// @public (undocumented)
+export const ToastContainer: ForwardRefComponent<ToastContainerProps>;
+
+// @public
+export type ToastContainerProps = Omit<ComponentProps<ToastContainerSlots>, 'content'> & ToastData & {
+    visible: boolean;
+    children?: React_2.ReactNode;
+    tryRestoreFocus: () => void;
+};
+
+// @public (undocumented)
+export type ToastContainerSlots = {
+    root: Slot<'div'>;
+};
+
+// @public (undocumented)
+export type ToastContainerState = ComponentState<ToastContainerSlots> & {
+    intent: ToastIntent | undefined;
+    bodyId: string;
+    titleId: string;
+    close: () => void;
+};
+
+// @public (undocumented)
+export const ToastContext: React_2.Context<ToastContextValue | undefined>;
+
+// @public (undocumented)
+type ToastContextValue = {
+    open: boolean;
+    intent: ToastIntent | undefined;
+    bodyId: string;
+    titleId: string;
+    requestOpenChange: (data: ToastOpenChangeData) => void;
+};
+export { ToastContextValue as ToastContainerContextValue }
+export { ToastContextValue }
+
+// @public (undocumented)
+type ToastContextValues = {
+    toast: ToastContextValue;
+};
+export { ToastContextValues as ToastContainerContextValues }
+export { ToastContextValues }
+
+// @public
+export const Toaster: ForwardRefComponent<ToasterProps>;
+
+export { ToasterId }
+
+// @public
+export type ToasterProps = {
+    toasterId?: ToasterId;
+};
+
+// @public (undocumented)
+export type ToasterState = {
+    toastsToRender: Map<ToastPosition, ToastData[]>;
+    isToastVisible: (toastId: ToastId) => boolean;
+    tryRestoreFocus: () => void;
+    getStackTransform: (position: ToastPosition, stackIndex: number) => string;
+};
+
+// @public (undocumented)
+export const ToastFooter: ForwardRefComponent<ToastFooterProps>;
+
+export { ToastFooterProps }
+
+export { ToastFooterSlots }
+
+export { ToastFooterState }
+
+export { ToastId }
+
+export { ToastImperativeRef }
+
+export { ToastIntent }
+
+// @public (undocumented)
+export type ToastOpenChangeData = {
+    type: 'dismissClick';
+    open: false;
+    event: React_2.MouseEvent;
+} | {
+    type: 'timeout';
+    open: false;
+    event: null;
+} | {
+    type: 'triggerClick';
+    open: boolean;
+    event: React_2.MouseEvent;
+};
+
+export { ToastPoliteness }
+
+export { ToastPosition }
+
+// @public (undocumented)
+export type ToastProps = ComponentProps<ToastSlots> & {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: EventHandler<ToastOpenChangeData>;
+    intent?: ToastIntent;
+    timeout?: number;
+};
+
+// @public (undocumented)
+export type ToastSlots = {
+    root: Slot<'div'>;
+};
+
+// @public (undocumented)
+export type ToastState = ComponentState<ToastSlots> & {
+    open: boolean;
+    intent: ToastIntent | undefined;
+    bodyId: string;
+    titleId: string;
+    requestOpenChange: ToastContextValue['requestOpenChange'];
+};
+
+export { ToastStatus }
+
+// @public (undocumented)
+export const ToastTitle: ForwardRefComponent<ToastTitleBaseProps>;
+
+export { ToastTitleBaseProps }
+
+export { ToastTitleBaseState }
+
+export { ToastTitleSlots }
+
+export { UpdateToastOptions }
+
+// @public (undocumented)
+export const useToast: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;
+
+// @public (undocumented)
+export const useToastBody: (props: ToastBodyBaseProps, ref: React_2.Ref<HTMLElement>) => ToastBodyBaseState;
+
+// @public (undocumented)
+export const useToastContainer: (props: ToastContainerProps, ref: React_2.Ref<HTMLElement>) => ToastContainerState;
+
+// @public (undocumented)
+export const useToastContainerContextValues: (state: ToastContainerState) => ToastContextValues;
+
+// @public (undocumented)
+export const useToastContext: () => ToastContextValue;
+
+// @public (undocumented)
+export const useToastContextValues: (state: ToastState) => ToastContextValues;
+
+export { useToastController }
+
+// @public (undocumented)
+export const useToaster: ({ toasterId }: ToasterProps, _ref: React_2.Ref<HTMLElement>) => ToasterState;
+
+// @public (undocumented)
+export const useToastFooter: (props: ToastFooterProps, ref: React_2.Ref<HTMLElement>) => ToastFooterState;
+
+// @public (undocumented)
+export const useToastTitle: (props: ToastTitleBaseProps, ref: React_2.Ref<HTMLElement>) => ToastTitleBaseState;
+
+// (No @packageDocumentation comment for this package)
+
+```

packages/react-components/react-headless-components-preview/library/package.json

@@ -58,6 +58,7 @@
     "@fluentui/react-tags": "^9.8.1",
     "@fluentui/react-textarea": "^9.7.2",
     "@fluentui/react-toolbar": "^9.8.0",
+    "@fluentui/react-toast": "^9.7.17",
     "@fluentui/react-tooltip": "^9.10.1",
     "@fluentui/react-utilities": "^9.26.3",
     "@swc/helpers": "^0.5.1"
@@ -261,6 +262,12 @@
       "import": "./lib/textarea.js",
       "require": "./lib-commonjs/textarea.js"
     },
+    "./toast": {
+      "types": "./dist/toast.d.ts",
+      "node": "./lib-commonjs/toast.js",
+      "import": "./lib/toast.js",
+      "require": "./lib-commonjs/toast.js"
+    },
     "./toggle-button": {
       "types": "./dist/toggle-button.d.ts",
       "node": "./lib-commonjs/toggle-button.js",

packages/react-components/react-headless-components-preview/library/src/components/Toast/Toast.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ToastProps } from './Toast.types';
+import { useToast } from './useToast';
+import { useToastContextValues } from './useToastContextValues';
+import { renderToast } from './renderToast';
+
+export const Toast: ForwardRefComponent<ToastProps> = React.forwardRef((props, ref) => {
+  const state = useToast(props, ref);
+  const contextValues = useToastContextValues(state);
+  return renderToast(state, contextValues);
+});
+Toast.displayName = 'Toast';

packages/react-components/react-headless-components-preview/library/src/components/Toast/Toast.types.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps, ComponentState, EventHandler, Slot } from '@fluentui/react-utilities';
+import type { ToastContextValue, ToastIntent, ToastOpenChangeData } from './toastContext';
+
+export type { ToastIntent, ToastOpenChangeData };
+
+export type ToastSlots = {
+  root: Slot<'div'>;
+};
+
+export type ToastProps = ComponentProps<ToastSlots> & {
+  /** Whether the toast is currently visible. Use with `onOpenChange` for controlled mode. */
+  open?: boolean;
+  /** Initial open state for uncontrolled usage. */
+  defaultOpen?: boolean;
+  /** Called when the toast should open or close. */
+  onOpenChange?: EventHandler<ToastOpenChangeData>;
+  /** Semantic intent — affects accessible role and default icon in ToastTitle. */
+  intent?: ToastIntent;
+  /**
+   * Auto-dismiss timeout in milliseconds.
+   * Negative value disables auto-dismiss (default: -1).
+   */
+  timeout?: number;
+};
+
+export type ToastState = ComponentState<ToastSlots> & {
+  open: boolean;
+  intent: ToastIntent | undefined;
+  bodyId: string;
+  titleId: string;
+  requestOpenChange: ToastContextValue['requestOpenChange'];
+};
+
+export type ToastContextValues = {
+  toast: ToastContextValue;
+};

packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastBody/ToastBody.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { ToastBodyBaseProps } from './ToastBody.types';
+import { useToastBody } from './useToastBody';
+import { renderToastBody } from './renderToastBody';
+
+export const ToastBody: ForwardRefComponent<ToastBodyBaseProps> = React.forwardRef((props, ref) => {
+  const state = useToastBody(props, ref);
+  return renderToastBody(state);
+});
+ToastBody.displayName = 'ToastBody';

packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastBody/ToastBody.types.ts

@@ -0,0 +1 @@
+export type { ToastBodyBaseProps, ToastBodyBaseState, ToastBodySlots } from '@fluentui/react-toast';

packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastBody/index.ts

@@ -0,0 +1,4 @@
+export { ToastBody } from './ToastBody';
+export { renderToastBody } from './renderToastBody';
+export { useToastBody } from './useToastBody';
+export type { ToastBodyBaseProps, ToastBodyBaseState, ToastBodySlots } from './ToastBody.types';

packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastBody/renderToastBody.ts

@@ -0,0 +1,8 @@
+import { renderToastBody_unstable } from '@fluentui/react-toast';
+import type { ToastBodyBaseState, ToastBodyState } from '@fluentui/react-toast';
+import type { JSXElement } from '@fluentui/react-utilities';
+
+// Cast strips the style-only `backgroundAppearance` field; renderToastBody_unstable
+// does not use it in its render path (only the style hook reads it).
+export const renderToastBody = (state: ToastBodyBaseState): JSXElement =>
+  renderToastBody_unstable(state as ToastBodyState);

packages/react-components/react-headless-components-preview/library/src/components/Toast/ToastBody/useToastBody.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import type * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import type { ToastBodyBaseProps, ToastBodyBaseState } from '@fluentui/react-toast';
+import { useToastContext } from '../toastContext';
+
+export const useToastBody = (props: ToastBodyBaseProps, ref: React.Ref<HTMLElement>): ToastBodyBaseState => {
+  const { bodyId } = useToastContext();
+
+  return {
+    components: { root: 'div', subtitle: 'div' },
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        // FIXME: ref typed as HTMLElement upstream; cast to correct type
+        ref: ref as React.Ref<HTMLDivElement>,
+        id: bodyId,
+        ...props,
+      }),
+      { elementType: 'div' },
+    ),
+    subtitle: slot.optional(props.subtitle, { elementType: 'div' }),
+  };
+};