Merge branch 'feat/use-motion-presence-hook' into feat/drawer-motion

* feat/use-motion-presence-hook: (34 commits)
  fix: improve typings and documentation
  fix: use correct boolean values
  fix: remove outdated changefile
  feat: use boolean instead of function
  fix: add type to improve useMemo
  fix: remove leftover property
  docs: add title to example
  docs: move stories to public site
  fix: remove unused imports
  fix: join two related hooks in one file to be easier to test
  fix: add missing change file
  feat: make package public
  fix: upgrade stories to use latest changes to hook
  feat: create useMotion hook accepting either a boolean or motion state
  docs: add documentatio for the hook
  feat: add motion docs to public site
  fix: mismatch dependencies
  fix: add missing changefile
  feat: expose useAnimationFrame hook
  fix: remove old changefile
  ...

apps/public-docsite-v9/package.json

@@ -36,6 +36,7 @@
     "@fluentui/react-storybook-addon-codesandbox": "*",
     "@fluentui/theme-designer": "*",
     "@fluentui/react-search-preview": "*",
+    "@fluentui/react-motion-preview": "*",
     "@griffel/react": "^1.5.14",
     "react": "17.0.2",
     "react-dom": "17.0.2",

apps/public-docsite-v9/src/Utilities/Motion/useMotion/MotionExample.stories.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+
+import { useMotion } from '@fluentui/react-motion-preview';
+import { Button, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    rowGap: '24px',
+  },
+
+  rectangle: {
+    ...shorthands.borderRadius('8px'),
+
+    width: '200px',
+    height: '150px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: tokens.colorBrandBackground2,
+    opacity: 0,
+    transform: 'translate3D(0, 0, 0) scale(0.25)',
+    transitionDuration: `${tokens.durationNormal}, ${tokens.durationNormal}, ${tokens.durationUltraSlow}`,
+    transitionDelay: `${tokens.durationFast}, 0, ${tokens.durationSlow}`,
+    transitionProperty: 'opacity, transform, background-color',
+    willChange: 'opacity, transform, background-color',
+    color: '#fff',
+  },
+
+  visible: {
+    opacity: 1,
+    transform: 'translate3D(0, 0, 0) scale(1)',
+    backgroundColor: tokens.colorBrandBackground,
+  },
+});
+
+export const MotionExample = () => {
+  const styles = useStyles();
+
+  const [open, setOpen] = React.useState(false);
+  const motion = useMotion<HTMLDivElement>(open);
+
+  return (
+    <div className={styles.root}>
+      <Button appearance="primary" onClick={() => setOpen(!open)}>
+        Toggle
+      </Button>
+
+      {motion.canRender && (
+        <div ref={motion.ref} className={mergeClasses(styles.rectangle, motion.active && styles.visible)}>
+          Lorem ipsum
+        </div>
+      )}
+    </div>
+  );
+};

apps/public-docsite-v9/src/Utilities/Motion/useMotion/index.stories.mdx

@@ -0,0 +1,83 @@
+import { Title, Subtitle, Meta, Description } from '@storybook/addon-docs';
+
+import { MotionExample } from './MotionExample.stories';
+
+<Title>useMotion</Title>
+
+<Meta title="Utilities/Motion/useMotion" />
+
+<Description>
+  A tracker hook, that monitors the state of animations and transitions for a particular element. This hook does not
+  directly create animations but instead synchronizes with CSS properties to determine the rendering status, visibility,
+  entering, leaving, and ongoing animation of a component. If any CSS changes or properties are overridden, this hook
+  will automatically adjust and stay synchronized.
+</Description>
+
+<Subtitle>Usage</Subtitle>
+
+```tsx
+import * as React from 'react';
+
+import { useMotion } from '@fluentui/react-motion-preview';
+import { Button, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    rowGap: '24px',
+  },
+
+  rectangle: {
+    ...shorthands.borderRadius('8px'),
+
+    width: '200px',
+    height: '150px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: tokens.colorBrandBackground2,
+    opacity: 0,
+    transform: 'translate3D(0, 0, 0) scale(0.25)',
+    transitionDuration: `${tokens.durationNormal}, ${tokens.durationNormal}, ${tokens.durationUltraSlow}`,
+    transitionDelay: `${tokens.durationFast}, 0, ${tokens.durationSlow}`,
+    transitionProperty: 'opacity, transform, background-color',
+    willChange: 'opacity, transform, background-color',
+    color: '#fff',
+  },
+
+  visible: {
+    opacity: 1,
+    transform: 'translate3D(0, 0, 0) scale(1)',
+    backgroundColor: tokens.colorBrandBackground,
+  },
+});
+
+export const MotionExample = () => {
+  const styles = useStyles();
+
+  const [open, setOpen] = React.useState(false);
+  const motion = useMotion<HTMLDivElement>(open);
+
+  return (
+    <div className={styles.root}>
+      <Button appearance="primary" onClick={() => setOpen(!open)}>
+        Toggle
+      </Button>
+
+      {motion.canRender() && (
+        <div ref={motion.ref} className={mergeClasses(styles.rectangle, motion.isActive() && styles.visible)}>
+          Lorem ipsum
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+<Subtitle>Example</Subtitle>
+
+<MotionExample />

change/@fluentui-react-motion-preview-a0e15534-5b7d-4fb8-a6dd-f28e388add2a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: create react-motion-preview package with useMotion hook",
+  "packageName": "@fluentui/react-motion-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion-preview/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-motion-preview",
   "version": "0.0.0",
-  "private": true,
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",