feat(react-headless-components-preview): expose ToastTitle intent sta…

change/@fluentui-react-headless-components-preview-69fc269f-3430-4627-a4bf-8c12ae5f7f06.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "comment": "feat: expose ToastTitle intent state via data attribute",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com"
+}

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

@@ -34,9 +34,9 @@ import { ToastPosition } from '@fluentui/react-toast';
 import { ToastBaseProps as ToastProps } from '@fluentui/react-toast';
 import { ToastSlots } from '@fluentui/react-toast';
 import { ToastStatus } from '@fluentui/react-toast';
+import type { ToastTitleBaseState } from '@fluentui/react-toast';
 import { ToastTitleBaseProps as ToastTitleProps } from '@fluentui/react-toast';
 import { ToastTitleSlots } from '@fluentui/react-toast';
-import { ToastTitleBaseState as ToastTitleState } from '@fluentui/react-toast';
 import { useToastBodyBase_unstable as useToastBody } from '@fluentui/react-toast';
 import { useToastContainerContext } from '@fluentui/react-toast';
 import { useToastController } from '@fluentui/react-toast';
@@ -152,7 +152,12 @@ export { ToastTitleProps }
 
 export { ToastTitleSlots }
 
-export { ToastTitleState }
+// @public (undocumented)
+export type ToastTitleState = ToastTitleBaseState & {
+    media?: ToastTitleBaseState['media'] & {
+        'data-intent'?: ToastTitleBaseState['intent'];
+    };
+};
 
 // @public
 export const useToast: (props: ToastProps, ref: React_2.Ref<HTMLElement>) => ToastState;

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

@@ -2,15 +2,21 @@
 
 import * as React from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { ToastTitleProps } from './ToastTitle.types';
+import type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';
 import { useToastTitle } from './useToastTitle';
 import { renderToastTitle } from './renderToastTitle';
 
 /**
  * Represents the title of a toast, which is a brief summary or headline for the toast message.
  */
 export const ToastTitle: ForwardRefComponent<ToastTitleProps> = React.forwardRef((props, ref) => {
-  const state = useToastTitle(props, ref);
+  const state: ToastTitleState = useToastTitle(props, ref);
+
+  if (state.media) {
+    // eslint-disable-next-line react-hooks/immutability
+    state.media['data-intent'] = state.intent;
+  }
+
   return renderToastTitle(state);
 });
 

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

@@ -1,5 +1,11 @@
-export type {
-  ToastTitleBaseProps as ToastTitleProps,
-  ToastTitleBaseState as ToastTitleState,
-  ToastTitleSlots,
-} from '@fluentui/react-toast';
+import type { ToastTitleBaseState } from '@fluentui/react-toast';
+export type { ToastTitleBaseProps as ToastTitleProps, ToastTitleSlots } from '@fluentui/react-toast';
+
+export type ToastTitleState = ToastTitleBaseState & {
+  media?: ToastTitleBaseState['media'] & {
+    /**
+     * The intent of the toast, used for styling purposes.
+     */
+    'data-intent'?: ToastTitleBaseState['intent'];
+  };
+};