framer-motion 7.2.1 → 7.3.2

package/dist/cjs/index.js

@@ -286,6 +286,8 @@ class VisualElementHandler extends React__default["default"].Component {
  */
 const SwitchLayoutGroupContext = React.createContext({});
 
+const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
 /**
  * Create a `motion` component.
  *
@@ -349,7 +351,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
             features,
             React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
     }
-    return React.forwardRef(MotionComponent);
+    const ForwardRefComponent = React.forwardRef(MotionComponent);
+    ForwardRefComponent[motionComponentSymbol] = Component;
+    return ForwardRefComponent;
 }
 function useLayoutId({ layoutId }) {
     const layoutGroupId = React.useContext(LayoutGroupContext).id;
@@ -483,6 +487,7 @@ const transformPropOrder = [
     "rotate",
     "rotateX",
     "rotateY",
+    "rotateZ",
     "skew",
     "skewX",
     "skewY",
@@ -2235,7 +2240,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.2.1";
+        this.version = "7.3.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4211,7 +4216,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.1 may not work as expected.`);
+                warnOnce(nextValue.version === "7.3.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5563,6 +5568,12 @@ function boxEquals(a, b) {
         a.y.min === b.y.min &&
         a.y.max === b.y.max);
 }
+function aspectRatio(box) {
+    return calcLength(box.x) / calcLength(box.y);
+}
+function isCloseTo(a, b, max = 0.01) {
+    return popmotion.distance(a, b) <= max;
+}
 
 class NodeStack {
     constructor() {
@@ -6528,9 +6539,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.completeAnimation();
         }
         applyTransformsToTarget() {
-            const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+            const lead = this.getLead();
+            let { targetWithTransforms, target, layout, latestValues } = lead;
             if (!targetWithTransforms || !target || !layout)
                 return;
+            /**
+             * If we're only animating position, and this element isn't the lead element,
+             * then instead of projecting into the lead box we instead want to calculate
+             * a new target that aligns the two boxes but maintains the layout shape.
+             */
+            if (this !== lead &&
+                this.layout &&
+                layout &&
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                target = this.target || createBox();
+                const xLength = calcLength(this.layout.actual.x);
+                target.x.min = lead.target.x.min;
+                target.x.max = target.x.min + xLength;
+                const yLength = calcLength(this.layout.actual.y);
+                target.y.min = lead.target.y.min;
+                target.y.max = target.y.min + yLength;
+            }
             copyBoxInto(targetWithTransforms, target);
             /**
              * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -6762,9 +6791,10 @@ function notifyLayoutUpdate(node) {
         snapshot &&
         node.hasListeners("didUpdate")) {
         const { actual: layout, measured: measuredLayout } = node.layout;
+        const { animationType } = node.options;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
-        if (node.options.animationType === "size") {
+        if (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -6774,7 +6804,7 @@ function notifyLayoutUpdate(node) {
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (node.options.animationType === "position") {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -6907,6 +6937,11 @@ function roundBox(box) {
     roundAxis(box.x);
     roundAxis(box.y);
 }
+function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+    return (animationType === "position" ||
+        (animationType === "preserve-aspect" &&
+            !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+}
 
 const DocumentProjectionNode = createProjectionNode({
     attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
@@ -8168,6 +8203,28 @@ function useDragControls() {
     return useConstant(createDragControls);
 }
 
+/**
+ * Checks if a component is a `motion` component.
+ */
+function isMotionComponent(component) {
+    return (component !== null &&
+        typeof component === "object" &&
+        motionComponentSymbol in component);
+}
+
+/**
+ * Unwraps a `motion` component and returns either a string for `motion.div` or
+ * the React component for `motion(Component)`.
+ *
+ * If the component is not a `motion` component it returns undefined.
+ */
+function unwrapMotionComponent(component) {
+    if (isMotionComponent(component)) {
+        return component[motionComponentSymbol];
+    }
+    return undefined;
+}
+
 function useInstantLayoutTransition() {
     return startTransition;
 }
@@ -8330,6 +8387,7 @@ exports.domMax = domMax;
 exports.filterProps = filterProps;
 exports.isBrowser = isBrowser;
 exports.isDragActive = isDragActive;
+exports.isMotionComponent = isMotionComponent;
 exports.isMotionValue = isMotionValue;
 exports.isValidMotionProp = isValidMotionProp;
 exports.m = m;
@@ -8338,6 +8396,7 @@ exports.motion = motion;
 exports.motionValue = motionValue;
 exports.resolveMotionValue = resolveMotionValue;
 exports.transform = transform;
+exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimation = useAnimation;
 exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;

package/dist/es/index.mjs

@@ -35,6 +35,8 @@ export { useInView } from './utils/use-in-view.mjs';
 export { DragControls, useDragControls } from './gestures/drag/use-drag-controls.mjs';
 export { useDomEvent } from './events/use-dom-event.mjs';
 export { createMotionComponent } from './motion/index.mjs';
+export { isMotionComponent } from './motion/utils/is-motion-component.mjs';
+export { unwrapMotionComponent } from './motion/utils/unwrap-motion-component.mjs';
 export { visualElement } from './render/index.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { useInstantTransition } from './utils/use-instant-transition.mjs';

package/dist/es/motion/index.mjs

@@ -13,6 +13,7 @@ import { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';
 import { VisualElementHandler } from './utils/VisualElementHandler.mjs';
 import { LazyContext } from '../context/LazyContext.mjs';
 import { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';
+import { motionComponentSymbol } from './utils/symbol.mjs';
 
 /**
  * Create a `motion` component.
@@ -77,7 +78,9 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
             features,
             React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
     }
-    return forwardRef(MotionComponent);
+    const ForwardRefComponent = forwardRef(MotionComponent);
+    ForwardRefComponent[motionComponentSymbol] = Component;
+    return ForwardRefComponent;
 }
 function useLayoutId({ layoutId }) {
     const layoutGroupId = useContext(LayoutGroupContext).id;

package/dist/es/motion/utils/is-motion-component.mjs

@@ -0,0 +1,12 @@
+import { motionComponentSymbol } from './symbol.mjs';
+
+/**
+ * Checks if a component is a `motion` component.
+ */
+function isMotionComponent(component) {
+    return (component !== null &&
+        typeof component === "object" &&
+        motionComponentSymbol in component);
+}
+
+export { isMotionComponent };

package/dist/es/motion/utils/symbol.mjs

@@ -0,0 +1,3 @@
+const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
+export { motionComponentSymbol };

package/dist/es/motion/utils/unwrap-motion-component.mjs

@@ -0,0 +1,17 @@
+import { isMotionComponent } from './is-motion-component.mjs';
+import { motionComponentSymbol } from './symbol.mjs';
+
+/**
+ * Unwraps a `motion` component and returns either a string for `motion.div` or
+ * the React component for `motion(Component)`.
+ *
+ * If the component is not a `motion` component it returns undefined.
+ */
+function unwrapMotionComponent(component) {
+    if (isMotionComponent(component)) {
+        return component[motionComponentSymbol];
+    }
+    return undefined;
+}
+
+export { unwrapMotionComponent };

package/dist/es/projection/geometry/utils.mjs

@@ -1,3 +1,6 @@
+import { distance } from 'popmotion';
+import { calcLength } from './delta-calc.mjs';
+
 function isAxisDeltaZero(delta) {
     return delta.translate === 0 && delta.scale === 1;
 }
@@ -10,5 +13,11 @@ function boxEquals(a, b) {
         a.y.min === b.y.min &&
         a.y.max === b.y.max);
 }
+function aspectRatio(box) {
+    return calcLength(box.x) / calcLength(box.y);
+}
+function isCloseTo(a, b, max = 0.01) {
+    return distance(a, b) <= max;
+}
 
-export { boxEquals, isDeltaZero };
+export { aspectRatio, boxEquals, isCloseTo, isDeltaZero };

package/dist/es/projection/node/create-projection-node.mjs

@@ -9,7 +9,7 @@ import { calcRelativePosition, calcRelativeBox, calcBoxDelta, calcLength } from
 import { removeBoxTransforms } from '../geometry/delta-remove.mjs';
 import { createBox, createDelta } from '../geometry/models.mjs';
 import { getValueTransition } from '../../animation/utils/transitions.mjs';
-import { boxEquals, isDeltaZero } from '../geometry/utils.mjs';
+import { boxEquals, isDeltaZero, isCloseTo, aspectRatio } from '../geometry/utils.mjs';
 import { NodeStack } from '../shared/stack.mjs';
 import { scaleCorrectors } from '../styles/scale-correction.mjs';
 import { buildProjectionTransform } from '../styles/transform.mjs';
@@ -818,9 +818,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.completeAnimation();
         }
         applyTransformsToTarget() {
-            const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+            const lead = this.getLead();
+            let { targetWithTransforms, target, layout, latestValues } = lead;
             if (!targetWithTransforms || !target || !layout)
                 return;
+            /**
+             * If we're only animating position, and this element isn't the lead element,
+             * then instead of projecting into the lead box we instead want to calculate
+             * a new target that aligns the two boxes but maintains the layout shape.
+             */
+            if (this !== lead &&
+                this.layout &&
+                layout &&
+                shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                target = this.target || createBox();
+                const xLength = calcLength(this.layout.actual.x);
+                target.x.min = lead.target.x.min;
+                target.x.max = target.x.min + xLength;
+                const yLength = calcLength(this.layout.actual.y);
+                target.y.min = lead.target.y.min;
+                target.y.max = target.y.min + yLength;
+            }
             copyBoxInto(targetWithTransforms, target);
             /**
              * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -1052,9 +1070,10 @@ function notifyLayoutUpdate(node) {
         snapshot &&
         node.hasListeners("didUpdate")) {
         const { actual: layout, measured: measuredLayout } = node.layout;
+        const { animationType } = node.options;
         // TODO Maybe we want to also resize the layout snapshot so we don't trigger
         // animations for instance if layout="size" and an element has only changed position
-        if (node.options.animationType === "size") {
+        if (animationType === "size") {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -1064,7 +1083,7 @@ function notifyLayoutUpdate(node) {
                 axisSnapshot.max = axisSnapshot.min + length;
             });
         }
-        else if (node.options.animationType === "position") {
+        else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
             eachAxis((axis) => {
                 const axisSnapshot = snapshot.isShared
                     ? snapshot.measured[axis]
@@ -1197,5 +1216,10 @@ function roundBox(box) {
     roundAxis(box.x);
     roundAxis(box.y);
 }
+function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+    return (animationType === "position" ||
+        (animationType === "preserve-aspect" &&
+            !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+}
 
 export { createProjectionNode, mixAxis, mixAxisDelta, mixBox };

package/dist/es/render/html/utils/transform.mjs

@@ -15,6 +15,7 @@ const transformPropOrder = [
     "rotate",
     "rotateX",
     "rotateY",
+    "rotateZ",
     "skew",
     "skewX",
     "skewY",

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.1 may not work as expected.`);
+                warnOnce(nextValue.version === "7.3.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -24,7 +24,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.2.1";
+        this.version = "7.3.2";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -280,6 +280,8 @@
      */
     const SwitchLayoutGroupContext = React.createContext({});
 
+    const motionComponentSymbol = Symbol.for("motionComponentSymbol");
+
     /**
      * Create a `motion` component.
      *
@@ -343,7 +345,9 @@
                 features,
                 React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
         }
-        return React.forwardRef(MotionComponent);
+        const ForwardRefComponent = React.forwardRef(MotionComponent);
+        ForwardRefComponent[motionComponentSymbol] = Component;
+        return ForwardRefComponent;
     }
     function useLayoutId({ layoutId }) {
         const layoutGroupId = React.useContext(LayoutGroupContext).id;
@@ -477,6 +481,7 @@
         "rotate",
         "rotateX",
         "rotateY",
+        "rotateZ",
         "skew",
         "skewX",
         "skewY",
@@ -3403,7 +3408,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "7.2.1";
+            this.version = "7.3.2";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5379,7 +5384,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.2.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.1 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.3.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.2 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6731,6 +6736,12 @@
             a.y.min === b.y.min &&
             a.y.max === b.y.max);
     }
+    function aspectRatio(box) {
+        return calcLength(box.x) / calcLength(box.y);
+    }
+    function isCloseTo(a, b, max = 0.01) {
+        return distance(a, b) <= max;
+    }
 
     class NodeStack {
         constructor() {
@@ -7696,9 +7707,27 @@
                 this.completeAnimation();
             }
             applyTransformsToTarget() {
-                const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+                const lead = this.getLead();
+                let { targetWithTransforms, target, layout, latestValues } = lead;
                 if (!targetWithTransforms || !target || !layout)
                     return;
+                /**
+                 * If we're only animating position, and this element isn't the lead element,
+                 * then instead of projecting into the lead box we instead want to calculate
+                 * a new target that aligns the two boxes but maintains the layout shape.
+                 */
+                if (this !== lead &&
+                    this.layout &&
+                    layout &&
+                    shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                    target = this.target || createBox();
+                    const xLength = calcLength(this.layout.actual.x);
+                    target.x.min = lead.target.x.min;
+                    target.x.max = target.x.min + xLength;
+                    const yLength = calcLength(this.layout.actual.y);
+                    target.y.min = lead.target.y.min;
+                    target.y.max = target.y.min + yLength;
+                }
                 copyBoxInto(targetWithTransforms, target);
                 /**
                  * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -7930,9 +7959,10 @@
             snapshot &&
             node.hasListeners("didUpdate")) {
             const { actual: layout, measured: measuredLayout } = node.layout;
+            const { animationType } = node.options;
             // TODO Maybe we want to also resize the layout snapshot so we don't trigger
             // animations for instance if layout="size" and an element has only changed position
-            if (node.options.animationType === "size") {
+            if (animationType === "size") {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
@@ -7942,7 +7972,7 @@
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
-            else if (node.options.animationType === "position") {
+            else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
@@ -8075,6 +8105,11 @@
         roundAxis(box.x);
         roundAxis(box.y);
     }
+    function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+        return (animationType === "position" ||
+            (animationType === "preserve-aspect" &&
+                !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+    }
 
     const DocumentProjectionNode = createProjectionNode({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
@@ -9917,6 +9952,28 @@
         return useConstant(createDragControls);
     }
 
+    /**
+     * Checks if a component is a `motion` component.
+     */
+    function isMotionComponent(component) {
+        return (component !== null &&
+            typeof component === "object" &&
+            motionComponentSymbol in component);
+    }
+
+    /**
+     * Unwraps a `motion` component and returns either a string for `motion.div` or
+     * the React component for `motion(Component)`.
+     *
+     * If the component is not a `motion` component it returns undefined.
+     */
+    function unwrapMotionComponent(component) {
+        if (isMotionComponent(component)) {
+            return component[motionComponentSymbol];
+        }
+        return undefined;
+    }
+
     function useInstantLayoutTransition() {
         return startTransition;
     }
@@ -10079,6 +10136,7 @@
     exports.filterProps = filterProps;
     exports.isBrowser = isBrowser;
     exports.isDragActive = isDragActive;
+    exports.isMotionComponent = isMotionComponent;
     exports.isMotionValue = isMotionValue;
     exports.isValidMotionProp = isValidMotionProp;
     exports.m = m;
@@ -10087,6 +10145,7 @@
     exports.motionValue = motionValue;
     exports.resolveMotionValue = resolveMotionValue;
     exports.transform = transform;
+    exports.unwrapMotionComponent = unwrapMotionComponent;
     exports.useAnimation = useAnimation;
     exports.useAnimationControls = useAnimationControls;
     exports.useAnimationFrame = useAnimationFrame;