breaking(react-motions): AtomMotionFn & PresenceMotionFn have an obje…

…ct as param
microsoft · May 29, 2024 · 8802ba1 · 8802ba1
1 parent 07d1911
commit 8802ba1
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 11 deletions.
diff --git a/change/@fluentui-react-motions-preview-f7e0f94c-24bd-4fa0-bae2-886019aac40f.json b/change/@fluentui-react-motions-preview-f7e0f94c-24bd-4fa0-bae2-886019aac40f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "breaking: AtomMotionFn & PresenceMotionFn have an object as param",
+  "packageName": "@fluentui/react-motions-preview",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md b/packages/react-components/react-motions-preview/etc/react-motions-preview.api.md
@@ -12,7 +12,9 @@ export type AtomMotion = {
 } & KeyframeEffectOptions;
 
 // @public (undocumented)
-export type AtomMotionFn = (element: HTMLElement) => AtomMotion;
+export type AtomMotionFn = (params: {
+    element: HTMLElement;
+}) => AtomMotion;
 
 // @public
 export function createMotionComponent(motion: AtomMotion | AtomMotionFn): React_2.FC<MotionComponentProps>;
@@ -95,7 +97,9 @@ export type PresenceMotion = {
 };
 
 // @public (undocumented)
-export type PresenceMotionFn = (element: HTMLElement) => PresenceMotion;
+export type PresenceMotionFn = (params: {
+    element: HTMLElement;
+}) => PresenceMotion;
 
 // (No @packageDocumentation comment for this package)
 

diff --git a/packages/react-components/react-motions-preview/src/factories/createMotionComponent.test.tsx b/packages/react-components/react-motions-preview/src/factories/createMotionComponent.test.tsx
@@ -59,7 +59,7 @@ describe('createMotionComponent', () => {
     );
 
     expect(fnMotion).toHaveBeenCalledTimes(1);
-    expect(fnMotion).toHaveBeenCalledWith({ animate: animateMock } /* mock of html element */);
+    expect(fnMotion).toHaveBeenCalledWith({ element: { animate: animateMock } /* mock of html element */ });
 
     expect(animateMock).toHaveBeenCalledTimes(1);
   });

diff --git a/packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts b/packages/react-components/react-motions-preview/src/factories/createMotionComponent.ts
@@ -34,7 +34,7 @@ export function createMotionComponent(motion: AtomMotion | AtomMotionFn) {
       const element = elementRef.current;
 
       if (element) {
-        const definition = typeof motion === 'function' ? motion(element) : motion;
+        const definition = typeof motion === 'function' ? motion({ element }) : motion;
         const { keyframes, ...options } = definition;
 
         const animation = animate(element, keyframes, {

diff --git a/...ges/react-components/react-motions-preview/src/factories/createPresenceComponent.test.tsx b/...ges/react-components/react-motions-preview/src/factories/createPresenceComponent.test.tsx
@@ -236,7 +236,7 @@ describe('createPresenceComponent', () => {
       );
 
       expect(fnMotion).toHaveBeenCalledTimes(1);
-      expect(fnMotion).toHaveBeenCalledWith({ animate: animateMock } /* mock of html element */);
+      expect(fnMotion).toHaveBeenCalledWith({ element: { animate: animateMock } /* mock of html element */ });
 
       expect(animateMock).toHaveBeenCalledWith(exitKeyframes, options);
     });

diff --git a/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.ts b/packages/react-components/react-motions-preview/src/factories/createPresenceComponent.ts
@@ -83,7 +83,7 @@ export function createPresenceComponent(motion: PresenceMotion | PresenceMotionF
           return;
         }
 
-        const presenceDefinition = typeof motion === 'function' ? motion(elementRef.current) : motion;
+        const presenceDefinition = typeof motion === 'function' ? motion({ element: elementRef.current }) : motion;
         const { keyframes, ...options } = visible ? presenceDefinition.enter : presenceDefinition.exit;
 
         const animation = animate(elementRef.current, keyframes, {

diff --git a/packages/react-components/react-motions-preview/src/types.ts b/packages/react-components/react-motions-preview/src/types.ts
@@ -5,8 +5,8 @@ export type PresenceMotion = {
   exit: AtomMotion;
 };
 
-export type AtomMotionFn = (element: HTMLElement) => AtomMotion;
-export type PresenceMotionFn = (element: HTMLElement) => PresenceMotion;
+export type AtomMotionFn = (params: { element: HTMLElement }) => AtomMotion;
+export type PresenceMotionFn = (params: { element: HTMLElement }) => PresenceMotion;
 
 export type MotionImperativeRef = {
   /** Sets the playback rate of the animation, where 1 is normal speed. */

diff --git a/...eact-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.md b/...eact-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.md
@@ -1,7 +1,7 @@
-Atoms and presence definitions can be also defined as functions that accept an animated element as an argument. This allows to define more complex animations that depend on the animated element's properties, for example:
+Atoms and presence definitions can be also defined as functions that have `params` as argument (includes an animated element). This allows to define more complex animations that depend on the animated element's properties, for example:
 
 ```ts
-const Grow = createMotionComponent(element => ({
+const Grow = createMotionComponent(({ element }) => ({
   duration: 300,
   keyframes: [
     { opacity: 0, maxHeight: `${element.scrollHeight / 2}px` },

diff --git a/...ponents/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx b/...ponents/react-motions-preview/stories/CreatePresenceComponent/MotionFunctions.stories.tsx
@@ -41,7 +41,7 @@ const useClasses = makeStyles({
   description: { margin: '5px' },
 });
 
-const collapseMotion: PresenceMotionFn = element => {
+const collapseMotion: PresenceMotionFn = ({ element }) => {
   const duration = 500;
   const keyframes = [
     { opacity: 0, maxHeight: '0px', overflow: 'hidden' },