framer-motion 9.0.3 → 9.0.4

package/dist/cjs/index.js

@@ -504,24 +504,26 @@ const translateAlias = {
     z: "translateZ",
     transformPerspective: "perspective",
 };
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const sortTransformProps = (a, b) => transformPropOrder.indexOf(a) - transformPropOrder.indexOf(b);
+const numTransforms = transformPropOrder.length;
 /**
  * Build a CSS transform style from individual x/y/scale etc properties.
  *
  * This outputs with a default order of transforms/scales/rotations, this can be customised by
  * providing a transformTemplate function.
  */
-function buildTransform({ transform, transformKeys, }, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
+function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
     // The transform string we're going to build into.
     let transformString = "";
-    // Transform keys into their default order - this will determine the output order.
-    transformKeys.sort(sortTransformProps);
-    // Loop over each transform and build them into transformString
-    for (const key of transformKeys) {
-        transformString += `${translateAlias[key] || key}(${transform[key]}) `;
+    /**
+     * Loop over all possible transforms in order, adding the ones that
+     * are present to the transform string.
+     */
+    for (let i = 0; i < numTransforms; i++) {
+        const key = transformPropOrder[i];
+        if (transform[key] !== undefined) {
+            const transformName = translateAlias[key] || key;
+            transformString += `${transformName}(${transform[key]}) `;
+        }
     }
     if (enableHardwareAcceleration && !transform.z) {
         transformString += "translateZ(0)";
@@ -673,8 +675,7 @@ const numberValueTypes = {
 };
 
 function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-    const { style, vars, transform, transformKeys, transformOrigin } = state;
-    transformKeys.length = 0;
+    const { style, vars, transform, transformOrigin } = state;
     // Track whether we encounter any transform or transformOrigin values.
     let hasTransform = false;
     let hasTransformOrigin = false;
@@ -702,7 +703,6 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             // If this is a transform, flag to enable further transform processing
             hasTransform = true;
             transform[key] = valueAsType;
-            transformKeys.push(key);
             // If we already know we have a non-default transform, early return
             if (!transformIsNone)
                 continue;
@@ -721,7 +721,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
     }
     if (!latestValues.transform) {
         if (hasTransform || transformTemplate) {
-            style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+            style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
         }
         else if (style.transform) {
             /**
@@ -744,7 +744,6 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
 const createHtmlRenderState = () => ({
     style: {},
     transform: {},
-    transformKeys: [],
     transformOrigin: {},
     vars: {},
 });
@@ -2016,7 +2015,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 = "9.0.3";
+        this.version = "9.0.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -7772,7 +7771,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "9.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.3 may not work as expected.`);
+                warnOnce(nextValue.version === "9.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/render/html/utils/build-styles.mjs

@@ -5,8 +5,7 @@ import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
 import { numberValueTypes } from '../../dom/value-types/number.mjs';
 
 function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-    const { style, vars, transform, transformKeys, transformOrigin } = state;
-    transformKeys.length = 0;
+    const { style, vars, transform, transformOrigin } = state;
     // Track whether we encounter any transform or transformOrigin values.
     let hasTransform = false;
     let hasTransformOrigin = false;
@@ -34,7 +33,6 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             // If this is a transform, flag to enable further transform processing
             hasTransform = true;
             transform[key] = valueAsType;
-            transformKeys.push(key);
             // If we already know we have a non-default transform, early return
             if (!transformIsNone)
                 continue;
@@ -53,7 +51,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
     }
     if (!latestValues.transform) {
         if (hasTransform || transformTemplate) {
-            style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+            style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
         }
         else if (style.transform) {
             /**

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

@@ -6,24 +6,26 @@ const translateAlias = {
     z: "translateZ",
     transformPerspective: "perspective",
 };
-/**
- * A function to use with Array.sort to sort transform keys by their default order.
- */
-const sortTransformProps = (a, b) => transformPropOrder.indexOf(a) - transformPropOrder.indexOf(b);
+const numTransforms = transformPropOrder.length;
 /**
  * Build a CSS transform style from individual x/y/scale etc properties.
  *
  * This outputs with a default order of transforms/scales/rotations, this can be customised by
  * providing a transformTemplate function.
  */
-function buildTransform({ transform, transformKeys, }, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
+function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
     // The transform string we're going to build into.
     let transformString = "";
-    // Transform keys into their default order - this will determine the output order.
-    transformKeys.sort(sortTransformProps);
-    // Loop over each transform and build them into transformString
-    for (const key of transformKeys) {
-        transformString += `${translateAlias[key] || key}(${transform[key]}) `;
+    /**
+     * Loop over all possible transforms in order, adding the ones that
+     * are present to the transform string.
+     */
+    for (let i = 0; i < numTransforms; i++) {
+        const key = transformPropOrder[i];
+        if (transform[key] !== undefined) {
+            const transformName = translateAlias[key] || key;
+            transformString += `${transformName}(${transform[key]}) `;
+        }
     }
     if (enableHardwareAcceleration && !transform.z) {
         transformString += "translateZ(0)";

package/dist/es/render/html/utils/create-render-state.mjs

@@ -1,7 +1,6 @@
 const createHtmlRenderState = () => ({
     style: {},
     transform: {},
-    transformKeys: [],
     transformOrigin: {},
     vars: {},
 });

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 === "9.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.3 may not work as expected.`);
+                warnOnce(nextValue.version === "9.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.4 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,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 = "9.0.3";
+        this.version = "9.0.4";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -502,24 +502,26 @@
         z: "translateZ",
         transformPerspective: "perspective",
     };
-    /**
-     * A function to use with Array.sort to sort transform keys by their default order.
-     */
-    const sortTransformProps = (a, b) => transformPropOrder.indexOf(a) - transformPropOrder.indexOf(b);
+    const numTransforms = transformPropOrder.length;
     /**
      * Build a CSS transform style from individual x/y/scale etc properties.
      *
      * This outputs with a default order of transforms/scales/rotations, this can be customised by
      * providing a transformTemplate function.
      */
-    function buildTransform({ transform, transformKeys, }, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
+    function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
         // The transform string we're going to build into.
         let transformString = "";
-        // Transform keys into their default order - this will determine the output order.
-        transformKeys.sort(sortTransformProps);
-        // Loop over each transform and build them into transformString
-        for (const key of transformKeys) {
-            transformString += `${translateAlias[key] || key}(${transform[key]}) `;
+        /**
+         * Loop over all possible transforms in order, adding the ones that
+         * are present to the transform string.
+         */
+        for (let i = 0; i < numTransforms; i++) {
+            const key = transformPropOrder[i];
+            if (transform[key] !== undefined) {
+                const transformName = translateAlias[key] || key;
+                transformString += `${transformName}(${transform[key]}) `;
+            }
         }
         if (enableHardwareAcceleration && !transform.z) {
             transformString += "translateZ(0)";
@@ -671,8 +673,7 @@
     };
 
     function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-        const { style, vars, transform, transformKeys, transformOrigin } = state;
-        transformKeys.length = 0;
+        const { style, vars, transform, transformOrigin } = state;
         // Track whether we encounter any transform or transformOrigin values.
         let hasTransform = false;
         let hasTransformOrigin = false;
@@ -700,7 +701,6 @@
                 // If this is a transform, flag to enable further transform processing
                 hasTransform = true;
                 transform[key] = valueAsType;
-                transformKeys.push(key);
                 // If we already know we have a non-default transform, early return
                 if (!transformIsNone)
                     continue;
@@ -719,7 +719,7 @@
         }
         if (!latestValues.transform) {
             if (hasTransform || transformTemplate) {
-                style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
+                style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
             }
             else if (style.transform) {
                 /**
@@ -742,7 +742,6 @@
     const createHtmlRenderState = () => ({
         style: {},
         transform: {},
-        transformKeys: [],
         transformOrigin: {},
         vars: {},
     });
@@ -2014,7 +2013,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 = "9.0.3";
+            this.version = "9.0.4";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -7785,7 +7784,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "9.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.3 may not work as expected.`);
+                    warnOnce(nextValue.version === "9.0.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {