diff --git a/change/@fluentui-react-message-bar-b83be573-581c-4db1-ae97-4e375b123a7d.json b/change/@fluentui-react-message-bar-b83be573-581c-4db1-ae97-4e375b123a7d.json new file mode 100644 index 00000000000000..1fc1a906bdeeb2 --- /dev/null +++ b/change/@fluentui-react-message-bar-b83be573-581c-4db1-ae97-4e375b123a7d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Keep motion ref handling out of the headless MessageBar base hook.", + "packageName": "@fluentui/react-message-bar", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts index 4d590ac4b81421..d8ce711361943a 100644 --- a/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts +++ b/packages/react-components/react-message-bar/library/src/components/MessageBar/useMessageBar.ts @@ -27,7 +27,6 @@ export const useMessageBarBase_unstable = ( // eslint-disable-next-line @typescript-eslint/no-deprecated const { className: transitionClassName, nodeRef } = useMessageBarTransitionContext(); - const motionRef = useMotionForwardedRef(); const actionsRef = React.useRef(null); const bodyRef = React.useRef(null); @@ -50,7 +49,7 @@ export const useMessageBarBase_unstable = ( }, root: slot.always( getIntrinsicElementProps('div', { - ref: useMergedRefs(ref, reflowRef, nodeRef, motionRef), + ref: useMergedRefs(ref, reflowRef, nodeRef), role: 'group', 'aria-labelledby': titleId, ...props, @@ -86,7 +85,8 @@ export const useMessageBarBase_unstable = ( export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref): MessageBarState => { const { shape = 'rounded', ...baseProps } = props; - const state = useMessageBarBase_unstable(baseProps, ref); + const motionRef = useMotionForwardedRef(); + const state = useMessageBarBase_unstable(baseProps, useMergedRefs(ref, motionRef)); return { ...state,