feat(react-motion): add MotionRefForwarder helper

[robertpenner]

Extracts the duplicated MotionRefForwarder component and useMotionForwardedRef hook from react-dialog and react-message-bar into a shared export from @fluentui/react-motion.

Changes

• react-motion: Added MotionRefForwarder and useMotionForwardedRef as @internal exports. Added displayName and JSDoc comments. Added unit tests covering ref objects, callback refs, and absent context.
• react-dialog: Replaced local MotionRefForwarder.tsx with import from @fluentui/react-motion. Deleted the duplicate file.
• react-message-bar: Same as react-dialog — replaced local copy with the shared import and deleted the duplicate file.

Motivation

Both react-dialog and react-message-bar had identical MotionRefForwarder implementations. This component forwards a motion ref through React context so that motion wrappers can pass their ref down to the actual surface element. Since the pattern is inherently tied to the motion system, @fluentui/react-motion is the natural home.

No new dependency edges are introduced — both consumer packages already depend on @fluentui/react-motion. The exports are marked @internal and do not affect the public API surface of any package.

Testing

• Added 3 unit tests for MotionRefForwarder in react-motion:
  • Ref object forwarding via context (createRef)
  • Callback ref forwarding
  • useMotionForwardedRef returns undefined when not wrapped in MotionRefForwarder
• Ran existing test suites for all three affected packages — all pass with no changes needed:
  • react-motion: 75 tests, 19 suites
  • react-dialog: 122 tests, 8 suites
  • react-message-bar: 105 tests, 5 suites

Future Work

• This shared MotionRefForwarder will be used by react-popover to support surface motion (the feat/popover-motion branch), which is the primary motivation for extracting it.
• Other components that need to forward a motion ref through a wrapper could adopt this pattern instead of creating their own context.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.291 MB 322.985 kB	1.291 MB 322.99 kB	-53 B 5 B
react-dialog Dialog (including children components)	102.078 kB 30.379 kB	102.12 kB 30.394 kB	42 B 15 B
react-message-bar MessageBar (all components)	23.264 kB 8.58 kB	23.37 kB 8.615 kB	106 B 35 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	103.471 kB 31.341 kB
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.33 kB 68.535 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-motion @fluentui/react-motion - createMotionComponent()	4.156 kB 1.818 kB
react-motion @fluentui/react-motion - createPresenceComponent()	5.908 kB 2.442 kB
react-motion @fluentui/react-motion - PresenceGroup	1.727 kB 823 B
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-timepicker-compat TimePicker	108.174 kB 35.695 kB
react-toast Toast (including Toaster)	102.56 kB 30.608 kB
react-tree FlatTree	147.635 kB 42.134 kB
react-tree PersonaFlatTree	149.463 kB 42.517 kB
react-tree PersonaTree	145.523 kB 41.338 kB
react-tree Tree	143.701 kB 40.972 kB

_{🤖 This report was generated against cbf0ef209ac4a8398a2b3ab65cf866761725f782}

[github-actions]

Pull request demo site: URL