fix(motion): make createPresenceComponentVariant support motion groups (#33996)

Author: robertpenner

change/@fluentui-react-motion-fea25e01-77ef-434c-a942-f907bdc4a2a5.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix(motion): make createPresenceComponentVariant support motion arrays",
+  "packageName": "@fluentui/react-motion",
+  "email": "robertpenner@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-motion/library/etc/react-motion.api.md

@@ -24,8 +24,8 @@ export function createMotionComponent<MotionParams extends Record<string, Motion
 // @public (undocumented)
 export function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;
 
-// @public (undocumented)
-export function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, override: PresenceOverride): PresenceComponent<MotionParams>;
+// @public
+export function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, variantParams: Partial<MotionParams>): PresenceComponent<MotionParams>;
 
 // @public (undocumented)
 export const curves: {

packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 
 import type { PresenceMotionFn } from '../types';
 import { createPresenceComponent } from './createPresenceComponent';
-import { overridePresenceMotion, createPresenceComponentVariant } from './createPresenceComponentVariant';
+import { createPresenceComponentVariant } from './createPresenceComponentVariant';
 
 jest.mock('./createPresenceComponent', () => {
   const module = jest.requireActual('./createPresenceComponent');
@@ -14,79 +14,36 @@ jest.mock('./createPresenceComponent', () => {
   };
 });
 
-const PRESENCE_MOTION: PresenceMotionFn<{ direction: 'start' | 'end' }> = () => ({
-  enter: { keyframes: [], duration: 1000, easing: 'linear' },
-  exit: { keyframes: [], duration: 1000, easing: 'linear' },
+const PRESENCE_MOTION: PresenceMotionFn<{ outOpacity?: number; duration?: number; easing?: string }> = ({
+  outOpacity = 0,
+  duration = 1000,
+  easing = 'linear',
+}) => ({
+  enter: [{ keyframes: [{ opacity: outOpacity }, { opacity: 1 }], duration, easing }],
+  exit: [{ keyframes: [{ opacity: 1 }, { opacity: outOpacity }], duration, easing }],
 });
-const PRESENCE_COMPONENT = createPresenceComponent<{ direction: 'start' | 'end' }>(PRESENCE_MOTION);
+const PRESENCE_COMPONENT = createPresenceComponent(PRESENCE_MOTION);
 
 const MOTION_PARAMS = {
   element: document.createElement('div'),
-  direction: 'start' as const,
 };
 
-describe('overridePresenceMotion', () => {
-  it('overrides "all"', () => {
-    expect(
-      overridePresenceMotion(PRESENCE_MOTION, { all: { duration: 500, easing: 'ease-in-out' } })(MOTION_PARAMS),
-    ).toEqual({
-      enter: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
-      exit: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
-    });
-  });
-
-  it('overrides "enter"', () => {
-    expect(
-      overridePresenceMotion(PRESENCE_MOTION, { enter: { duration: 500, easing: 'ease-in-out' } })(MOTION_PARAMS),
-    ).toEqual({
-      enter: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
-      exit: {
-        keyframes: [],
-        duration: 1000,
-        easing: 'linear',
-      },
-    });
-  });
-
-  it('overrides "exit"', () => {
-    expect(
-      overridePresenceMotion(PRESENCE_MOTION, { exit: { duration: 500, easing: 'ease-in-out' } })(MOTION_PARAMS),
-    ).toEqual({
-      enter: {
-        keyframes: [],
-        duration: 1000,
-        easing: 'linear',
-      },
-      exit: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
-    });
-  });
-});
-
 describe('createPresenceComponentVariant', () => {
-  it('appends override to the original motion', () => {
+  it('overrides motion parameters used within motion atom arrays', () => {
+    // variant params overriding the default motion params
+    const outOpacity = 0.3;
+    const duration = 500;
+    const easing = 'ease-in-out';
+
     const PresenceVariant = createPresenceComponentVariant(PRESENCE_COMPONENT, {
-      all: { duration: 500, easing: 'ease-in-out' },
+      outOpacity,
+      duration,
+      easing,
     });
     const overrideFn = (createPresenceComponent as jest.Mock).mock.calls[0][0];
 
     const { getByText } = render(
-      <PresenceVariant direction="start" visible>
+      <PresenceVariant visible>
         <div>Hello world!</div>
       </PresenceVariant>,
     );
@@ -99,16 +56,20 @@ describe('createPresenceComponentVariant', () => {
 
     expect(overrideFn).toBeInstanceOf(Function);
     expect(overrideFn(MOTION_PARAMS)).toEqual({
-      enter: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
-      exit: {
-        duration: 500,
-        easing: 'ease-in-out',
-        keyframes: [],
-      },
+      enter: [
+        {
+          duration,
+          easing,
+          keyframes: [{ opacity: outOpacity }, { opacity: 1 }],
+        },
+      ],
+      exit: [
+        {
+          duration,
+          easing,
+          keyframes: [{ opacity: 1 }, { opacity: outOpacity }],
+        },
+      ],
     });
   });
 });

packages/react-components/react-motion/library/src/factories/createPresenceComponentVariant.ts

@@ -1,55 +1,37 @@
-import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';
+import type { MotionParam, PresenceMotionFn } from '../types';
 import { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';
 
 /**
  * @internal
- */
-type PresenceOverrideFields = {
-  duration: KeyframeEffectOptions['duration'];
-  easing: KeyframeEffectOptions['easing'];
-};
-
-/**
- * @internal
- *
- * Override properties for presence transitions.
- *
- * @example <caption>Override duration for all transitions</caption>
- * ```
- * const override: PresenceOverride = {
- *  all: { duration: 1000 },
- * };
- * ```
  *
- * @example <caption>Override easing for exit transition</caption>
- * ```
- * const override: PresenceOverride = {
- *  exit: { easing: 'ease-out' },
- * };
- * ```
+ * Create a variant function that wraps a presence function to customize it.
+ * The new presence function has the supplied variant params as defaults,
+ * but these can still be overridden by runtime params when the new function is called.
  */
-type PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;
+export function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(
+  presenceFn: PresenceMotionFn<MotionParams>,
+  variantParams: Partial<MotionParams>,
+): typeof presenceFn {
+  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });
+  return variantFn;
+}
 
 /**
- * @internal
+ * Create a new presence component based on another presence component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createPresenceComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new presence component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
  */
-export function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(
-  presenceMotion: PresenceMotionFn<MotionParams>,
-  override: PresenceOverride,
-): PresenceMotionFn<MotionParams> {
-  return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {
-    const { enter, exit } = presenceMotion(...args);
-
-    return {
-      enter: { ...enter, ...override.all, ...override.enter },
-      exit: { ...exit, ...override.all, ...override.exit },
-    };
-  };
-}
-
 export function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(
   component: PresenceComponent<MotionParams>,
-  override: PresenceOverride,
+  variantParams: Partial<MotionParams>,
 ): PresenceComponent<MotionParams> {
-  return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));
+  const originalFn = component[MOTION_DEFINITION];
+  // The variant params become new defaults, but they can still be be overridden by runtime params.
+  const variantFn = createPresenceFnVariant(originalFn, variantParams);
+  return createPresenceComponent(variantFn);
 }