feat(react-toast): add base hooks/types and re-exports for headless composition

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

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add useToastBase_unstable, useToastTitleBase_unstable, and useToastBodyBase_unstable hooks",
+  "packageName": "@fluentui/react-toast",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -17,12 +17,39 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';
 
+// @public (undocumented)
+export type Announce = (message: string, options: AnnounceOptions) => void;
+
+// @public (undocumented)
+export type AnnounceOptions = {
+    politeness: AriaLivePoliteness;
+};
+
+// @public (undocumented)
+export type AriaLivePoliteness = 'polite' | 'assertive';
+
+// @public (undocumented)
+export interface DispatchToastOptions extends Partial<Omit<ToastOptions, 'toasterId'>> {
+    // (undocumented)
+    root?: RootSlot;
+}
+
+// @public (undocumented)
+export type LiveMessage = {
+    message: string;
+    createdAt: number;
+    politeness: AriaLivePoliteness;
+};
+
 // @public
 export const renderToast_unstable: (state: ToastState, contextValues: ToastContextValues) => JSXElement;
 
 // @public
 export const renderToastBody_unstable: (state: ToastBodyState) => JSXElement;
 
+// @public
+export const renderToastContainer_unstable: (state: ToastContainerState, contextValues: ToastContainerContextValues) => JSXElement;
+
 // @public
 export const renderToaster_unstable: (state: ToasterState) => JSXElement;
 
@@ -38,9 +65,21 @@ export const renderToastTrigger_unstable: (state: ToastTriggerState) => JSXEleme
 // @public
 export const Toast: ForwardRefComponent<ToastProps>;
 
+// @public
+export type ToastBaseProps = Omit<ToastProps, 'appearance'>;
+
+// @public
+export type ToastBaseState = Omit<ToastState, 'backgroundAppearance'>;
+
 // @public
 export const ToastBody: ForwardRefComponent<ToastBodyProps>;
 
+// @public
+export type ToastBodyBaseProps = ToastBodyProps;
+
+// @public
+export type ToastBodyBaseState = Omit<ToastBodyState, 'backgroundAppearance'>;
+
 // @public (undocumented)
 export const toastBodyClassNames: SlotClassNames<ToastBodySlots>;
 
@@ -58,12 +97,46 @@ export type ToastBodyState = ComponentState<ToastBodySlots> & {
     backgroundAppearance: BackgroundAppearanceContextValue;
 };
 
+// @public (undocumented)
+export interface ToastChangeData extends ToastOptions, Pick<ToastData, 'updateId'> {
+    // (undocumented)
+    status: ToastStatus;
+}
+
+// @public (undocumented)
+export type ToastChangeHandler = (event: null, data: ToastChangeData) => void;
+
 // @public (undocumented)
 export const toastClassNames: SlotClassNames<ToastSlots>;
 
 // @public (undocumented)
 export const toastContainerClassNames: SlotClassNames<ToastContainerSlots>;
 
+// @public (undocumented)
+export const ToastContainerContextProvider: React_2.Provider<ToastContainerContextValue | undefined>;
+
+// @public (undocumented)
+export type ToastContainerContextValue = {
+    close: () => void;
+    intent: ToastIntent | undefined;
+    bodyId: string;
+    titleId: string;
+};
+
+// @public
+export type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> & ToastData & {
+    visible: boolean;
+    announce: Announce;
+    intent: ToastIntent | undefined;
+    tryRestoreFocus: () => void;
+};
+
+// @public (undocumented)
+export type ToastContainerSlots = {
+    root: NonNullable<Slot<'div'>>;
+    timer: NonNullable<Slot<TimerProps>>;
+};
+
 // @public
 export type ToastContainerState = ComponentState<ToastContainerSlots> & Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> & Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {
     transitionTimeout: number;
@@ -76,18 +149,49 @@ export type ToastContainerState = ComponentState<ToastContainerSlots> & Pick<Toa
     }) => void;
 };
 
+// @public (undocumented)
+export interface ToastData<TData = object> extends ToastOptions<TData> {
+    close: () => void;
+    // (undocumented)
+    imperativeRef: React_2.RefObject<ToastImperativeRef | null>;
+    order: number;
+    remove: () => void;
+    updateId: number;
+}
+
 // @public
 export const Toaster: React_2.FC<ToasterProps>;
 
 // @public (undocumented)
 export const toasterClassNames: SlotClassNames<ToasterSlots>;
 
+// @public (undocumented)
+export type ToasterId = string;
+
+// @public (undocumented)
+export interface ToasterOptions extends Pick<ToastOptions, 'position' | 'timeout' | 'pauseOnWindowBlur' | 'pauseOnHover' | 'priority'> {
+    // (undocumented)
+    limit?: number;
+    // (undocumented)
+    offset?: ToastOffset;
+    // (undocumented)
+    shortcuts?: ToasterShortcuts;
+    // (undocumented)
+    toasterId?: ToasterId;
+}
+
 // @public
 export type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> & Partial<ToasterOptions> & Pick<PortalProps, 'mountNode'> & {
     announce?: Announce;
     inline?: boolean;
 };
 
+// @public (undocumented)
+export interface ToasterShortcuts {
+    // (undocumented)
+    focus: (e: KeyboardEvent) => boolean;
+}
+
 // @public (undocumented)
 export type ToasterSlots = {
     root: Slot<'div'>;
@@ -120,6 +224,13 @@ export type ToastFooterState = ComponentState<ToastFooterSlots>;
 // @public (undocumented)
 export type ToastId = string;
 
+// @public (undocumented)
+export type ToastImperativeRef = {
+    focus: () => void;
+    play: () => void;
+    pause: () => void;
+};
+
 // @public (undocumented)
 export type ToastIntent = 'info' | 'success' | 'error' | 'warning';
 
@@ -154,6 +265,12 @@ export type ToastStatus = 'queued' | 'visible' | 'dismissed' | 'unmounted';
 // @public
 export const ToastTitle: ForwardRefComponent<ToastTitleProps>;
 
+// @public
+export type ToastTitleBaseProps = ToastTitleProps;
+
+// @public
+export type ToastTitleBaseState = Omit<ToastTitleState, 'backgroundAppearance'>;
+
 // @public (undocumented)
 export const toastTitleClassNames: SlotClassNames<ToastTitleSlots>;
 
@@ -188,15 +305,42 @@ export type ToastTriggerState = {
     children: React_2.ReactElement | null;
 };
 
+// @public (undocumented)
+export interface UpdateToastOptions extends UpdateToastEventDetail {
+    // (undocumented)
+    root?: RootSlot;
+}
+
 // @public
 export const useToast_unstable: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;
 
+// @public
+export function useToastAnnounce(announce: Announce): {
+    announceToast: Announce;
+    toasterRef: React_2.RefCallback<HTMLDivElement>;
+};
+
+// @public
+export const useToastBase_unstable: (props: ToastBaseProps, ref: React_2.Ref<HTMLElement>) => ToastBaseState;
+
 // @public
 export const useToastBody_unstable: (props: ToastBodyProps, ref: React_2.Ref<HTMLElement>) => ToastBodyState;
 
+// @public
+export const useToastBodyBase_unstable: (props: ToastBodyBaseProps, ref: React_2.Ref<HTMLElement>) => ToastBodyBaseState;
+
 // @public
 export const useToastBodyStyles_unstable: (state: ToastBodyState) => ToastBodyState;
 
+// @public
+export const useToastContainer_unstable: (props: ToastContainerProps, ref: React_2.Ref<HTMLElement>) => ToastContainerState;
+
+// @public (undocumented)
+export const useToastContainerContext: () => ToastContainerContextValue;
+
+// @public (undocumented)
+export function useToastContainerContextValues_unstable(state: ToastContainerState): ToastContainerContextValues;
+
 // @public (undocumented)
 export function useToastController(toasterId?: ToasterId): {
     dispatchToast: (content: React_2.ReactNode, options?: DispatchToastOptions) => void;
@@ -207,6 +351,16 @@ export function useToastController(toasterId?: ToasterId): {
     playToast: (toastId: ToastId) => void;
 };
 
+// @public (undocumented)
+export 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;
+};
+
 // @public
 export const useToaster_unstable: (props: ToasterProps) => ToasterState;
 
@@ -225,6 +379,9 @@ export const useToastStyles_unstable: (state: ToastState) => ToastState;
 // @public
 export const useToastTitle_unstable: (props: ToastTitleProps, ref: React_2.Ref<HTMLElement>) => ToastTitleState;
 
+// @public
+export const useToastTitleBase_unstable: (props: ToastTitleBaseProps, ref: React_2.Ref<HTMLElement>) => ToastTitleBaseState;
+
 // @public
 export const useToastTitleStyles_unstable: (state: ToastTitleState) => ToastTitleState;
 

packages/react-components/react-toast/library/src/Toast.ts

@@ -1,8 +1,16 @@
-export type { ToastContextValues, ToastProps, ToastSlots, ToastState } from './components/Toast/index';
+export type {
+  ToastBaseProps,
+  ToastBaseState,
+  ToastContextValues,
+  ToastProps,
+  ToastSlots,
+  ToastState,
+} from './components/Toast/index';
 export {
   Toast,
   renderToast_unstable,
   toastClassNames,
   useToastStyles_unstable,
+  useToastBase_unstable,
   useToast_unstable,
 } from './components/Toast/index';

packages/react-components/react-toast/library/src/ToastBody.ts

@@ -1,8 +1,15 @@
-export type { ToastBodyProps, ToastBodySlots, ToastBodyState } from './components/ToastBody/index';
+export type {
+  ToastBodyBaseProps,
+  ToastBodyBaseState,
+  ToastBodyProps,
+  ToastBodySlots,
+  ToastBodyState,
+} from './components/ToastBody/index';
 export {
   ToastBody,
   renderToastBody_unstable,
   toastBodyClassNames,
   useToastBodyStyles_unstable,
+  useToastBodyBase_unstable,
   useToastBody_unstable,
 } from './components/ToastBody/index';

packages/react-components/react-toast/library/src/ToastTitle.ts

@@ -1,8 +1,15 @@
-export type { ToastTitleProps, ToastTitleSlots, ToastTitleState } from './components/ToastTitle/index';
+export type {
+  ToastTitleBaseProps,
+  ToastTitleBaseState,
+  ToastTitleProps,
+  ToastTitleSlots,
+  ToastTitleState,
+} from './components/ToastTitle/index';
 export {
   ToastTitle,
   renderToastTitle_unstable,
   toastTitleClassNames,
   useToastTitleStyles_unstable,
+  useToastTitleBase_unstable,
   useToastTitle_unstable,
 } from './components/ToastTitle/index';

packages/react-components/react-toast/library/src/Toaster.ts

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

packages/react-components/react-toast/library/src/components/Toast/Toast.types.ts

@@ -17,10 +17,20 @@ export type ToastProps = ComponentProps<ToastSlots> & {
   appearance?: BackgroundAppearanceContextValue;
 };
 
+/**
+ * Toast Props without design-only props.
+ */
+export type ToastBaseProps = Omit<ToastProps, 'appearance'>;
+
 /**
  * State used in rendering Toast
  */
 export type ToastState = ComponentState<ToastSlots> & {
   backgroundAppearance: BackgroundAppearanceContextValue;
   intent?: ToastIntent | undefined;
 };
+
+/**
+ * State used in rendering Toast, without design-only state.
+ */
+export type ToastBaseState = Omit<ToastState, 'backgroundAppearance'>;

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

@@ -1,5 +1,12 @@
 export { Toast } from './Toast';
-export type { ToastContextValues, ToastProps, ToastSlots, ToastState } from './Toast.types';
+export type {
+  ToastBaseProps,
+  ToastBaseState,
+  ToastContextValues,
+  ToastProps,
+  ToastSlots,
+  ToastState,
+} from './Toast.types';
 export { renderToast_unstable } from './renderToast';
-export { useToast_unstable } from './useToast';
+export { useToastBase_unstable, useToast_unstable } from './useToast';
 export { toastClassNames, useToastStyles_unstable } from './useToastStyles.styles';