feat(react-motion): add useMotion hook

[marcosmoura]

This PR implements the useMotion hook. This is part of the Component CSS Transitions/Animations on mount/unmount RFC efforts. A preview of the usage of this hook can be found in the feat: implement motion for Drawer PR.

This also creates a separate package to deal with motion related code. For now, we have only included one hook, but that can open up to have dedicated components to handle animations/transitions.

Context

Currently, there is a limitation in incorporating motion effects to components during their mounting or unmounting. This restricts the ability to apply CSS motion for components featuring an open/close behavior.
This hook effectively tracks CSS animations/transitions and returns the state of those animations/transitions.

Example

const [open, setOpen] = React.useState(false)
const motion = useMotion(open);

useMotion also accepts the same value it returns, in case useMotion was called somewhere else. This is extremely useful to avoid double calculation in case partners wants to override a default animation to a component:

const ExampleComponent = ({ open }: props) => {
  const motion = useMotion(open)

  // ...
}

const Override = () => {
  const [open, setOpen] = React.useState(false)
  const motion = useMotion(open);

  return <ExampleComponent open={motion} />
}

Return type

type MotionState<Element extends HTMLElement = HTMLElement> = {
  /**
   * Ref to the element.
   */
  ref: React.Ref<Element>;

  /**
   * Current state of the element.
   *
   * - `unmounted` - The element is not yet rendered or can be safely removed from the DOM.
   * - `entering` - The element is performing enter animation.
   * - `entered` - The element has finished enter animation.
   * - `idle` - The element is currently not animating, but rendered on screen.
   * - `exiting` - The element is performing exit animation.
   * - `exited` - The element has finished exit animation.
   */
  type: MotionType;

  /**
   * Indicates whether the component is currently rendered and visible.
   * Useful to apply CSS transitions only when the element is active.
   */
  active: boolean;

  /**
   * Indicates whether the component can be rendered.
   * This can be used to avoid rendering the component when it is not visible anymore.
   */
  canRender: boolean;
}

[fabricteam]

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
global-context createContext	510 B 330 B
global-context createContextSelector	537 B 342 B
priority-overflow createOverflowManager	4.162 kB 1.735 kB
react-accordion Accordion (including children components)	88.688 kB 26.917 kB
react-alert Alert	81.668 kB 21.964 kB
react-avatar Avatar	47.01 kB 14.502 kB
react-avatar AvatarGroup	16.116 kB 6.431 kB
react-avatar AvatarGroupItem	61.789 kB 18.912 kB
react-badge Badge	23.183 kB 7.254 kB
react-badge CounterBadge	24.084 kB 7.553 kB
react-badge PresenceBadge	22.14 kB 7.867 kB
react-button Button	36.91 kB 9.685 kB
react-button CompoundButton	44.259 kB 11.167 kB
react-button MenuButton	41.296 kB 10.933 kB
react-button SplitButton	49.331 kB 12.486 kB
react-button ToggleButton	53.956 kB 11.582 kB
react-card Card - All	88.334 kB 25.252 kB
react-card Card	83.177 kB 23.742 kB
react-card CardFooter	9.338 kB 3.932 kB
react-card CardHeader	11.589 kB 4.707 kB
react-card CardPreview	10.297 kB 4.317 kB
react-checkbox Checkbox	32.872 kB 10.652 kB
react-combobox Combobox (including child components)	87.101 kB 28.273 kB
react-combobox Dropdown (including child components)	85.555 kB 27.926 kB
react-components react-components: Button, FluentProvider & webLightTheme	66.446 kB 18.441 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	203.68 kB 57.903 kB
react-components react-components: FluentProvider & webLightTheme	37.787 kB 12.387 kB
react-datepicker-compat DatePicker Compat	207.356 kB 57.486 kB
react-dialog Dialog (including children components)	86.738 kB 26.341 kB
react-divider Divider	17.098 kB 6.303 kB
react-field Field	18.295 kB 6.978 kB
react-image Image	12.029 kB 4.783 kB
react-infobutton InfoButton	125.612 kB 39.404 kB
react-infobutton InfoLabel	129.283 kB 40.575 kB
react-input Input	23.237 kB 7.688 kB
react-jsx-runtime Classic Pragma	1.049 kB 531 B
react-jsx-runtime JSX Dev Runtime	2.752 kB 1.277 kB
react-jsx-runtime JSX Runtime	3.27 kB 1.519 kB
react-label Label	10.423 kB 4.31 kB
react-link Link	13.254 kB 5.397 kB
react-menu Menu (including children components)	135.721 kB 41.662 kB
react-menu Menu (including selectable components)	138.407 kB 42.17 kB
react-overflow hooks only	12.419 kB 4.687 kB
react-persona Persona	53.905 kB 16.371 kB
react-popover Popover	114.883 kB 36.034 kB
react-portal Portal	12.255 kB 4.504 kB
react-portal-compat PortalCompatProvider	6.48 kB 2.203 kB
react-positioning usePositioning	25.137 kB 9.109 kB
react-progress ProgressBar	13.718 kB 5.476 kB
react-provider FluentProvider	18.332 kB 6.817 kB
react-radio Radio	26.617 kB 8.601 kB
react-radio RadioGroup	11.622 kB 4.833 kB
react-select Select	24.599 kB 8.651 kB
react-slider Slider	34.134 kB 11.039 kB
react-spinbutton SpinButton	32.773 kB 10.216 kB
react-spinner Spinner	19.668 kB 7.024 kB
react-switch Switch	29.092 kB 9.217 kB
react-table DataGrid	152.991 kB 42.325 kB
react-table Table (Primitives only)	39.638 kB 12.129 kB
react-table Table as DataGrid	126.247 kB 33.617 kB
react-table Table (Selection only)	71.617 kB 18.915 kB
react-table Table (Sort only)	70.236 kB 18.516 kB
react-tags-preview InteractionTag	11.031 kB 4.528 kB
react-tags-preview Tag	28.65 kB 9.018 kB
react-tags-preview TagGroup	69.607 kB 20.482 kB
react-text Text - Default	13.043 kB 5.129 kB
react-text Text - Wrappers	16.215 kB 5.447 kB
react-textarea Textarea	27.302 kB 9.047 kB
react-theme Single theme token import	69 B 89 B
react-theme Teams: all themes	34.611 kB 7.295 kB
react-theme Teams: Light theme	19.282 kB 5.486 kB
react-toast Toast (including Toaster)	87.69 kB 26.037 kB
react-tooltip Tooltip	48.1 kB 16.875 kB
react-utilities SSRProvider	180 B 159 B

_{🤖 This report was generated against 2147e3d60a21ff7ded34b27a19f3d5313533e910}

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	660	620	5000
Button	mount	316	317	5000
Field	mount	1119	1095	5000
FluentProvider	mount	675	681	5000
FluentProviderWithTheme	mount	78	80	10
FluentProviderWithTheme	virtual-rerender	63	74	10
FluentProviderWithTheme	virtual-rerender-with-unmount	68	80	10
InfoButton	mount	13	12	5000
MakeStyles	mount	872	856	50000
Persona	mount	1728	1722	5000
SpinButton	mount	1367	1342	5000

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 83ef7e1:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 2147e3d60a21ff7ded34b27a19f3d5313533e910 (build)

[bsunderhus]

The CODEOWNERS file change seems to be unnecessary?! besides that LGTM 👍🏻