framer-motion 11.8.0 → 11.10.0

package/dist/cjs/{client-entry.js → client.js}

@@ -159,14 +159,6 @@ const getDefaultTransition = (valueKey, { keyframes }) => {
     return ease;
 };
 
-/**
- * Decide whether a transition is defined on a given Transition.
- * This filters out orchestration options and returns true
- * if any options are left.
- */
-function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-    return !!Object.keys(transition).length;
-}
 function getValueTransition(transition, key) {
     return (transition[key] ||
         transition["default"] ||
@@ -444,8 +436,10 @@ if (process.env.NODE_ENV !== "production") {
 const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
 
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = checkStringStartsWith("--");
-const startsAsVariableToken = checkStringStartsWith("var(--");
+const isCSSVariableName = 
+/*@__PURE__*/ checkStringStartsWith("--");
+const startsAsVariableToken = 
+/*@__PURE__*/ checkStringStartsWith("var(--");
 const isCSSVariableToken = (value) => {
     const startsWithToken = startsAsVariableToken(value);
     if (!startsWithToken)
@@ -514,25 +508,8 @@ const scale = {
     default: 1,
 };
 
-/**
- * TODO: When we move from string as a source of truth to data models
- * everything in this folder should probably be referred to as models vs types
- */
-// If this number is a decimal, make it just five decimal places
-// to avoid exponents
-const sanitize = (v) => Math.round(v * 100000) / 100000;
-const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
-const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
-const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
-function isString(v) {
-    return typeof v === "string";
-}
-function isNullish(v) {
-    return v == null;
-}
-
 const createUnitType = (unit) => ({
-    test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
     parse: parseFloat,
     transform: (v) => `${v}${unit}`,
 });
@@ -789,18 +766,32 @@ class KeyframeResolver {
     }
 }
 
+// If this number is a decimal, make it just five decimal places
+// to avoid exponents
+const sanitize = (v) => Math.round(v * 100000) / 100000;
+
+const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
+
+function isNullish(v) {
+    return v == null;
+}
+
+const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
+
 /**
  * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,
  * but false if a number or multiple colors
  */
 const isColorString = (type, testProp) => (v) => {
-    return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) ||
+    return Boolean((typeof v === "string" &&
+        singleColorRegex.test(v) &&
+        v.startsWith(type)) ||
         (testProp &&
             !isNullish(v) &&
             Object.prototype.hasOwnProperty.call(v, testProp)));
 };
 const splitColor = (aName, bName, cName) => (v) => {
-    if (!isString(v))
+    if (typeof v !== "string")
         return v;
     const [a, b, c, alpha] = v.match(floatRegex);
     return {
@@ -896,7 +887,7 @@ const color = {
         }
     },
     transform: (v) => {
-        return isString(v)
+        return typeof v === "string"
             ? v
             : v.hasOwnProperty("red")
                 ? rgba.transform(v)
@@ -904,10 +895,12 @@ const color = {
     },
 };
 
+const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
+
 function test(v) {
     var _a, _b;
     return (isNaN(v) &&
-        isString(v) &&
+        typeof v === "string" &&
         (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
             (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
             0);
@@ -1016,12 +1009,7 @@ const filter = {
     },
 };
 
-const int = {
-    ...number,
-    transform: Math.round,
-};
-
-const numberValueTypes = {
+const browserNumberValueTypes = {
     // Border props
     borderWidth: px,
     borderTopWidth: px,
@@ -1039,7 +1027,6 @@ const numberValueTypes = {
     maxWidth: px,
     height: px,
     maxHeight: px,
-    size: px,
     top: px,
     right: px,
     bottom: px,
@@ -1055,7 +1042,12 @@ const numberValueTypes = {
     marginRight: px,
     marginBottom: px,
     marginLeft: px,
-    // Transform props
+    // Misc
+    backgroundPositionX: px,
+    backgroundPositionY: px,
+};
+
+const transformValueTypes = {
     rotate: degrees,
     rotateX: degrees,
     rotateY: degrees,
@@ -1080,10 +1072,18 @@ const numberValueTypes = {
     originX: progressPercentage,
     originY: progressPercentage,
     originZ: px,
-    // Misc
+};
+
+const int = {
+    ...number,
+    transform: Math.round,
+};
+
+const numberValueTypes = {
+    ...browserNumberValueTypes,
+    ...transformValueTypes,
     zIndex: int,
-    backgroundPositionX: px,
-    backgroundPositionY: px,
+    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -1272,15 +1272,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
     }
 }
 
-function memo(callback) {
-    let result;
-    return () => {
-        if (result === undefined)
-            result = callback();
-        return result;
-    };
-}
-
 function isGenerator(type) {
     return typeof type === "function";
 }
@@ -2616,6 +2607,15 @@ const generateLinearEasing = (easing, duration // as milliseconds
     return `linear(${points.substring(0, points.length - 2)})`;
 };
 
+function memo(callback) {
+    let result;
+    return () => {
+        if (result === undefined)
+            result = callback();
+        return result;
+    };
+}
+
 /**
  * Add the ability for test suites to manually set support flags
  * to better test more environments.
@@ -2640,6 +2640,7 @@ const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
     }
     return true;
 }, "linearEasing");
+
 function isWaapiSupportedEasing(easing) {
     return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
         !easing ||
@@ -2679,7 +2680,7 @@ function mapEasingToNativeEasing(easing, duration) {
     }
 }
 
-function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) {
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease, times, } = {}) {
     const keyframeOptions = { [valueName]: keyframes };
     if (times)
         keyframeOptions.offset = times;
@@ -2699,7 +2700,13 @@ function animateStyle(element, valueName, keyframes, { delay = 0, duration = 300
     });
 }
 
+function attachTimeline(animation, timeline) {
+    animation.timeline = timeline;
+    animation.onfinish = null;
+}
+
 const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+
 /**
  * 10ms is chosen here as it strikes a balance between smooth
  * results (more than one keyframe per frame at 60fps) and
@@ -2806,12 +2813,12 @@ class AcceleratedAnimation extends BaseAnimation {
             ease = pregeneratedAnimation.ease;
             type = "keyframes";
         }
-        const animation = animateStyle(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
+        const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
         // Override the browser calculated startTime with one synchronised to other JS
         // and WAAPI animations starting this event loop.
         animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
         if (this.pendingTimeline) {
-            animation.timeline = this.pendingTimeline;
+            attachTimeline(animation, this.pendingTimeline);
             this.pendingTimeline = undefined;
         }
         else {
@@ -2904,8 +2911,7 @@ class AcceleratedAnimation extends BaseAnimation {
             if (!resolved)
                 return noop;
             const { animation } = resolved;
-            animation.timeline = timeline;
-            animation.onfinish = null;
+            attachTimeline(animation, timeline);
         }
         return noop;
     }
@@ -3001,21 +3007,6 @@ class AcceleratedAnimation extends BaseAnimation {
     }
 }
 
-function observeTimeline(update, timeline) {
-    let prevProgress;
-    const onFrame = () => {
-        const { currentTime } = timeline;
-        const percentage = currentTime === null ? 0 : currentTime.value;
-        const progress = percentage / 100;
-        if (prevProgress !== progress) {
-            update(progress);
-        }
-        prevProgress = progress;
-    };
-    frame.update(onFrame, true);
-    return () => cancelFrame(onFrame);
-}
-
 const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
 
 class GroupPlaybackControls {
@@ -3038,22 +3029,18 @@ class GroupPlaybackControls {
             this.animations[i][propName] = newValue;
         }
     }
-    attachTimeline(timeline) {
-        const cancelAll = this.animations.map((animation) => {
+    attachTimeline(timeline, fallback) {
+        const subscriptions = this.animations.map((animation) => {
             if (supportsScrollTimeline() && animation.attachTimeline) {
-                animation.attachTimeline(timeline);
+                return animation.attachTimeline(timeline);
             }
             else {
-                animation.pause();
-                return observeTimeline((progress) => {
-                    animation.time = animation.duration * progress;
-                }, timeline);
+                return fallback(animation);
             }
         });
         return () => {
-            cancelAll.forEach((cancelTimeline, i) => {
-                if (cancelTimeline)
-                    cancelTimeline();
+            subscriptions.forEach((cancel, i) => {
+                cancel && cancel();
                 this.animations[i].stop();
             });
         };
@@ -3097,6 +3084,15 @@ class GroupPlaybackControls {
     }
 }
 
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
+    return !!Object.keys(transition).length;
+}
+
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
     const valueTransition = getValueTransition(transition, name) || {};
     /**
@@ -3283,7 +3279,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 = "11.8.0";
+        this.version = "11.10.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3596,6 +3592,12 @@ function getOptimisedAppearId(visualElement) {
     return visualElement.props[optimizedAppearDataAttribute];
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+function isWillChangeMotionValue(value) {
+    return Boolean(isMotionValue(value) && value.add);
+}
+
 function getWillChangeName(name) {
     if (transformProps.has(name)) {
         return "transform";
@@ -3605,49 +3607,18 @@ function getWillChangeName(name) {
     }
 }
 
-class WillChangeMotionValue extends MotionValue {
-    constructor() {
-        super(...arguments);
-        this.values = [];
-    }
-    add(name) {
-        const styleName = getWillChangeName(name);
-        if (styleName) {
-            addUniqueItem(this.values, styleName);
-            this.update();
-        }
-    }
-    update() {
-        this.set(this.values.length ? this.values.join(", ") : "auto");
-    }
-}
-
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-function isWillChangeMotionValue(value) {
-    return Boolean(isMotionValue(value) && value.add);
-}
-
 function addValueToWillChange(visualElement, key) {
     var _a;
     if (!visualElement.applyWillChange)
         return;
-    let willChange = visualElement.getValue("willChange");
-    /**
-     * If we haven't created a willChange MotionValue, and the we haven't been
-     * manually provided one, create one.
-     */
-    if (!willChange && !((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange)) {
-        willChange = new WillChangeMotionValue("auto");
-        visualElement.addValue("willChange", willChange);
-    }
-    /**
-     * It could be that a user has set willChange to a regular MotionValue,
-     * in which case we can't add the value to it.
-     */
+    const willChange = visualElement.getValue("willChange");
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key);
     }
+    else if (!((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange) &&
+        getWillChangeName(key)) {
+        visualElement.setStaticValue("willChange", "transform");
+    }
 }
 
 /**
@@ -5906,7 +5877,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.8.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.10.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.10.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9350,12 +9321,6 @@ const makeUseVisualState = (config) => (props, isStatic) => {
     const make = () => makeState(config, props, context, presenceContext, isStatic);
     return isStatic ? make() : useConstant(make);
 };
-function addWillChange(willChange, name) {
-    const memberName = getWillChangeName(name);
-    if (memberName) {
-        addUniqueItem(willChange, memberName);
-    }
-}
 function forEachDefinition(props, definition, callback) {
     const list = Array.isArray(definition) ? definition : [definition];
     for (let i = 0; i < list.length; i++) {
@@ -9369,8 +9334,7 @@ function forEachDefinition(props, definition, callback) {
 function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
     var _a;
     const values = {};
-    const willChange = [];
-    const applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
+    let applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === undefined;
     const motionValues = scrapeMotionValues(props, {});
     for (const key in motionValues) {
         values[key] = resolveMotionValue(motionValues[key]);
@@ -9422,13 +9386,14 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
         if (animate && initial !== false && !isAnimationControls(animate)) {
             forEachDefinition(props, animate, (target) => {
                 for (const key in target) {
-                    addWillChange(willChange, key);
+                    const willChangeName = getWillChangeName(key);
+                    if (willChangeName) {
+                        values.willChange = "transform";
+                        return;
+                    }
                 }
             });
         }
-        if (willChange.length) {
-            values.willChange = willChange.join(",");
-        }
     }
     return values;
 }