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

@@ -38,9 +38,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>;
 
@@ -154,6 +166,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>;
 
@@ -191,9 +209,15 @@ export type ToastTriggerState = {
 // @public
 export const useToast_unstable: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;
 
+// @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;
 
@@ -225,6 +249,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/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';

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

@@ -2,19 +2,16 @@
 
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import type { ToastProps, ToastState } from './Toast.types';
+import type { ToastBaseProps, ToastBaseState, ToastProps, ToastState } from './Toast.types';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 
 /**
- * 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.
+ * Create the base state required to render Toast, without design-only props.
  *
- * @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: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {
+export const useToastBase_unstable = (props: ToastBaseProps, ref: React.Ref<HTMLElement>): ToastBaseState => {
   const { intent } = useToastContainerContext();
 
   return {
@@ -31,7 +28,23 @@ export const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>
       }),
       { 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: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {
+  const state = useToastBase_unstable(props, ref);
+  return {
+    ...state,
+    backgroundAppearance: props.appearance,
+  };
+};

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

@@ -11,9 +11,19 @@ export type ToastBodySlots = {
  */
 export type ToastBodyProps = ComponentProps<ToastBodySlots> & {};
 
+/**
+ * ToastBody Props without design-only props.
+ */
+export type ToastBodyBaseProps = ToastBodyProps;
+
 /**
  * State used in rendering ToastBody
  */
 export type ToastBodyState = ComponentState<ToastBodySlots> & {
   backgroundAppearance: BackgroundAppearanceContextValue;
 };
+
+/**
+ * State used in rendering ToastBody, without design-only state.
+ */
+export type ToastBodyBaseState = Omit<ToastBodyState, 'backgroundAppearance'>;

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

@@ -1,5 +1,11 @@
 export { ToastBody } from './ToastBody';
-export type { ToastBodyProps, ToastBodySlots, ToastBodyState } from './ToastBody.types';
+export type {
+  ToastBodyBaseProps,
+  ToastBodyBaseState,
+  ToastBodyProps,
+  ToastBodySlots,
+  ToastBodyState,
+} from './ToastBody.types';
 export { renderToastBody_unstable } from './renderToastBody';
-export { useToastBody_unstable } from './useToastBody';
+export { useToastBodyBase_unstable, useToastBody_unstable } from './useToastBody';
 export { toastBodyClassNames, useToastBodyStyles_unstable } from './useToastBodyStyles.styles';

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

@@ -2,21 +2,20 @@
 
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
-import type { ToastBodyProps, ToastBodyState } from './ToastBody.types';
+import type { ToastBodyBaseProps, ToastBodyBaseState, ToastBodyProps, ToastBodyState } from './ToastBody.types';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 
 /**
- * Create the state required to render ToastBody.
- *
- * The returned state can be modified with hooks such as useToastBodyStyles_unstable,
- * before being passed to renderToastBody_unstable.
+ * 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 const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {
-  const backgroundAppearance = useBackgroundAppearance();
+export const useToastBodyBase_unstable = (
+  props: ToastBodyBaseProps,
+  ref: React.Ref<HTMLElement>,
+): ToastBodyBaseState => {
   const { bodyId } = useToastContainerContext();
   return {
     components: {
@@ -35,6 +34,22 @@ export const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTML
       }),
       { elementType: 'div' },
     ),
+  };
+};
+
+/**
+ * Create the state required to render ToastBody.
+ *
+ * The returned state can be modified with hooks such as useToastBodyStyles_unstable,
+ * before being passed to renderToastBody_unstable.
+ *
+ * @param props - props from this instance of ToastBody
+ * @param ref - reference to root HTMLElement of ToastBody
+ */
+export const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {
+  const backgroundAppearance = useBackgroundAppearance();
+  return {
+    ...useToastBodyBase_unstable(props, ref),
     backgroundAppearance,
   };
 };

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

@@ -13,10 +13,20 @@ export type ToastTitleSlots = {
  */
 export type ToastTitleProps = ComponentProps<ToastTitleSlots> & {};
 
+/**
+ * ToastTitle Props without design-only props.
+ */
+export type ToastTitleBaseProps = ToastTitleProps;
+
 /**
  * State used in rendering ToastTitle
  */
 export type ToastTitleState = ComponentState<ToastTitleSlots> &
   Pick<ToastContainerContextValue, 'intent'> & {
     backgroundAppearance: BackgroundAppearanceContextValue;
   };
+
+/**
+ * State used in rendering ToastTitle, without design-only state.
+ */
+export type ToastTitleBaseState = Omit<ToastTitleState, 'backgroundAppearance'>;

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

@@ -1,5 +1,11 @@
 export { ToastTitle } from './ToastTitle';
-export type { ToastTitleProps, ToastTitleSlots, ToastTitleState } from './ToastTitle.types';
+export type {
+  ToastTitleBaseProps,
+  ToastTitleBaseState,
+  ToastTitleProps,
+  ToastTitleSlots,
+  ToastTitleState,
+} from './ToastTitle.types';
 export { renderToastTitle_unstable } from './renderToastTitle';
-export { useToastTitle_unstable } from './useToastTitle';
+export { useToastTitleBase_unstable, useToastTitle_unstable } from './useToastTitle';
 export { toastTitleClassNames, useToastTitleStyles_unstable } from './useToastTitleStyles.styles';