fix: Toaster should merge user onKeyDown handler (#34982)

Author: ling1726

change/@fluentui-react-toast-9e344401-110b-45ba-b662-d3cf788d8705.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Toaster should merge user onKeyDown handler",
+  "packageName": "@fluentui/react-toast",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-toast/library/src/components/Toast/Toast.cy.tsx

@@ -434,7 +434,7 @@ describe('Toast', () => {
           <button id="make" onClick={makeToast}>
             Make toast
           </button>
-          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+          <Toaster onKeyDown={() => console.log('test')} shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
         </>
       );
     };
@@ -661,7 +661,7 @@ describe('Toast', () => {
           <button id="make" onClick={makeToast}>
             Make toast
           </button>
-          <Toaster shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
+          <Toaster onKeyDown={() => console.log('foo')} shortcuts={{ focus: e => e.ctrlKey && e.key === 'm' }} />
         </>
       );
     };

packages/react-components/react-toast/library/src/components/Toaster/useToaster.tsx

@@ -32,9 +32,12 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => {
   const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);
   const { dir } = useFluent();
 
-  const rootProps = slot.always(getIntrinsicElementProps<ExtractSlotProps<Slot<'div'>>>('div', rest), {
-    elementType: 'div',
-  });
+  const { onKeyDown: onKeyDownProp, ...rootProps } = slot.always(
+    getIntrinsicElementProps<ExtractSlotProps<Slot<'div'>>>('div', rest),
+    {
+      elementType: 'div',
+    },
+  );
   const focusableGroupAttr = useFocusableGroup({
     tabBehavior: 'limited-trap-focus',
     ignoreDefaultKeydown: { Escape: true },
@@ -44,7 +47,7 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => {
       e.preventDefault();
       closeAllToasts();
     }
-    props.onKeyDown?.(e);
+    onKeyDownProp?.(e);
   });
   const usePositionSlot = (toastPosition: ToastPosition) => {
     const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);