framer-motion 11.0.3 → 11.0.5

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-18f65389.js');
+var indexLegacy = require('./index-legacy-2f239609.js');
 
 
 

package/dist/cjs/{index-legacy-18f65389.js → index-legacy-2f239609.js}

@@ -329,8 +329,9 @@ function buildTransform(transform, { enableHardwareAcceleration = true, allowTra
 
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
 const isCSSVariableName = checkStringStartsWith("--");
-const isCSSVariableToken = checkStringStartsWith("var(--");
-const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g;
+const startsAsVariableToken = checkStringStartsWith("var(--");
+const isCSSVariableToken = (key) => startsAsVariableToken(key) && singleCssVariableRegex.test(key);
+const singleCssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)$/i;
 
 /**
  * Provided a value and a ValueType, returns the value as that value type.
@@ -341,7 +342,13 @@ const getValueAsType = (value, type) => {
         : value;
 };
 
-const clamp = (min, max, v) => Math.min(Math.max(v, min), max);
+const clamp = (min, max, v) => {
+    if (v > max)
+        return max;
+    if (v < min)
+        return min;
+    return v;
+};
 
 const number = {
     test: (v) => typeof v === "number",
@@ -948,6 +955,89 @@ const easingDefinitionToFunction = (definition) => {
     return definition;
 };
 
+/*
+  Progress within given range
+
+  Given a lower limit and an upper limit, we return the progress
+  (expressed as a number 0-1) represented by the given value, and
+  limit that progress to within 0-1.
+
+  @param [number]: Lower limit
+  @param [number]: Upper limit
+  @param [number]: Value to find progress within given range
+  @return [number]: Progress of value within range as expressed 0-1
+*/
+const progress = (from, to, value) => {
+    const toFromDifference = to - from;
+    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+
+/*
+  Value in range from progress
+
+  Given a lower limit and an upper limit, we return the value within
+  that range as expressed by progress (usually a number from 0 to 1)
+
+  So progress = 0.5 would change
+
+  from -------- to
+
+  to
+
+  from ---- to
+
+  E.g. from = 10, to = 20, progress = 0.5 => 15
+
+  @param [number]: Lower limit of range
+  @param [number]: Upper limit of range
+  @param [number]: The progress between lower and upper limits expressed 0-1
+  @return [number]: Value as calculated from progress within range (not limited within range)
+*/
+const mixNumber$1 = (from, to, progress) => {
+    return from + (to - from) * progress;
+};
+
+// Adapted from https://gist.github.com/mjackson/5311256
+function hueToRgb(p, q, t) {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+}
+function hslaToRgba({ hue, saturation, lightness, alpha }) {
+    hue /= 360;
+    saturation /= 100;
+    lightness /= 100;
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (!saturation) {
+        red = green = blue = lightness;
+    }
+    else {
+        const q = lightness < 0.5
+            ? lightness * (1 + saturation)
+            : lightness + saturation - lightness * saturation;
+        const p = 2 * lightness - q;
+        red = hueToRgb(p, q, hue + 1 / 3);
+        green = hueToRgb(p, q, hue);
+        blue = hueToRgb(p, q, hue - 1 / 3);
+    }
+    return {
+        red: Math.round(red * 255),
+        green: Math.round(green * 255),
+        blue: Math.round(blue * 255),
+        alpha,
+    };
+}
+
 /**
  * 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
@@ -1039,98 +1129,13 @@ const hsla = {
     },
 };
 
-const color = {
-    test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
-    parse: (v) => {
-        if (rgba.test(v)) {
-            return rgba.parse(v);
-        }
-        else if (hsla.test(v)) {
-            return hsla.parse(v);
-        }
-        else {
-            return hex.parse(v);
-        }
-    },
-    transform: (v) => {
-        return isString(v)
-            ? v
-            : v.hasOwnProperty("red")
-                ? rgba.transform(v)
-                : hsla.transform(v);
-    },
-};
-
-/*
-  Value in range from progress
-
-  Given a lower limit and an upper limit, we return the value within
-  that range as expressed by progress (usually a number from 0 to 1)
-
-  So progress = 0.5 would change
-
-  from -------- to
-
-  to
-
-  from ---- to
-
-  E.g. from = 10, to = 20, progress = 0.5 => 15
-
-  @param [number]: Lower limit of range
-  @param [number]: Upper limit of range
-  @param [number]: The progress between lower and upper limits expressed 0-1
-  @return [number]: Value as calculated from progress within range (not limited within range)
-*/
-const mix = (from, to, progress) => -progress * from + progress * to + from;
-
-// Adapted from https://gist.github.com/mjackson/5311256
-function hueToRgb(p, q, t) {
-    if (t < 0)
-        t += 1;
-    if (t > 1)
-        t -= 1;
-    if (t < 1 / 6)
-        return p + (q - p) * 6 * t;
-    if (t < 1 / 2)
-        return q;
-    if (t < 2 / 3)
-        return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-}
-function hslaToRgba({ hue, saturation, lightness, alpha }) {
-    hue /= 360;
-    saturation /= 100;
-    lightness /= 100;
-    let red = 0;
-    let green = 0;
-    let blue = 0;
-    if (!saturation) {
-        red = green = blue = lightness;
-    }
-    else {
-        const q = lightness < 0.5
-            ? lightness * (1 + saturation)
-            : lightness + saturation - lightness * saturation;
-        const p = 2 * lightness - q;
-        red = hueToRgb(p, q, hue + 1 / 3);
-        green = hueToRgb(p, q, hue);
-        blue = hueToRgb(p, q, hue - 1 / 3);
-    }
-    return {
-        red: Math.round(red * 255),
-        green: Math.round(green * 255),
-        blue: Math.round(blue * 255),
-        alpha,
-    };
-}
-
 // Linear color space blending
 // Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
 // Demonstrated http://codepen.io/osublake/pen/xGVVaN
 const mixLinearColor = (from, to, v) => {
     const fromExpo = from * from;
-    return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo));
+    const expo = v * (to * to - fromExpo) + fromExpo;
+    return expo < 0 ? 0 : Math.sqrt(expo);
 };
 const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
@@ -1152,11 +1157,33 @@ const mixColor = (from, to) => {
         blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
         blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
         blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-        blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v);
+        blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
         return rgba.transform(blended);
     };
 };
 
+const color = {
+    test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+    parse: (v) => {
+        if (rgba.test(v)) {
+            return rgba.parse(v);
+        }
+        else if (hsla.test(v)) {
+            return hsla.parse(v);
+        }
+        else {
+            return hex.parse(v);
+        }
+    },
+    transform: (v) => {
+        return isString(v)
+            ? v
+            : v.hasOwnProperty("red")
+                ? rgba.transform(v)
+                : hsla.transform(v);
+    },
+};
+
 function test(v) {
     var _a, _b;
     return (isNaN(v) &&
@@ -1165,65 +1192,65 @@ function test(v) {
             (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
             0);
 }
-const cssVarTokeniser = {
-    regex: cssVariableRegex,
-    countKey: "Vars",
-    token: "${v}",
-    parse: noop,
-};
-const colorTokeniser = {
-    regex: colorRegex,
-    countKey: "Colors",
-    token: "${c}",
-    parse: color.parse,
-};
-const numberTokeniser = {
-    regex: floatRegex,
-    countKey: "Numbers",
-    token: "${n}",
-    parse: number.parse,
-};
-function tokenise(info, { regex, countKey, token, parse }) {
-    const matches = info.tokenised.match(regex);
-    if (!matches)
-        return;
-    info["num" + countKey] = matches.length;
-    info.tokenised = info.tokenised.replace(regex, token);
-    info.values.push(...matches.map(parse));
-}
+const NUMBER_TOKEN = "number";
+const COLOR_TOKEN = "color";
+const VAR_TOKEN = "var";
+const VAR_FUNCTION_TOKEN = "var(";
+const SPLIT_TOKEN = "${}";
+const complexRegex = /(var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\))|(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))|((-)?([\d]*\.?[\d])+)/gi;
 function analyseComplexValue(value) {
     const originalValue = value.toString();
-    const info = {
-        value: originalValue,
-        tokenised: originalValue,
-        values: [],
-        numVars: 0,
-        numColors: 0,
-        numNumbers: 0,
+    const matchedValues = originalValue.match(complexRegex) || [];
+    const values = [];
+    const indexes = {
+        color: [],
+        number: [],
+        var: [],
     };
-    if (info.value.includes("var(--"))
-        tokenise(info, cssVarTokeniser);
-    tokenise(info, colorTokeniser);
-    tokenise(info, numberTokeniser);
-    return info;
+    const types = [];
+    for (let i = 0; i < matchedValues.length; i++) {
+        const parsedValue = matchedValues[i];
+        if (color.test(parsedValue)) {
+            indexes.color.push(i);
+            types.push(COLOR_TOKEN);
+            values.push(color.parse(parsedValue));
+        }
+        else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {
+            indexes.var.push(i);
+            types.push(VAR_TOKEN);
+            values.push(parsedValue);
+        }
+        else {
+            indexes.number.push(i);
+            types.push(NUMBER_TOKEN);
+            values.push(parseFloat(parsedValue));
+        }
+    }
+    const tokenised = originalValue.replace(complexRegex, SPLIT_TOKEN);
+    const split = tokenised.split(SPLIT_TOKEN);
+    return { values, split, indexes, types };
 }
 function parseComplexValue(v) {
     return analyseComplexValue(v).values;
 }
 function createTransformer(source) {
-    const { values, numColors, numVars, tokenised } = analyseComplexValue(source);
-    const numValues = values.length;
+    const { split, types } = analyseComplexValue(source);
+    const numSections = split.length;
     return (v) => {
-        let output = tokenised;
-        for (let i = 0; i < numValues; i++) {
-            if (i < numVars) {
-                output = output.replace(cssVarTokeniser.token, v[i]);
-            }
-            else if (i < numVars + numColors) {
-                output = output.replace(colorTokeniser.token, color.transform(v[i]));
-            }
-            else {
-                output = output.replace(numberTokeniser.token, sanitize(v[i]));
+        let output = "";
+        for (let i = 0; i < numSections; i++) {
+            output += split[i];
+            if (v[i] !== undefined) {
+                const type = types[i];
+                if (type === NUMBER_TOKEN) {
+                    output += sanitize(v[i]);
+                }
+                else if (type === COLOR_TOKEN) {
+                    output += color.transform(v[i]);
+                }
+                else {
+                    output += v[i];
+                }
             }
         }
         return output;
@@ -1242,37 +1269,48 @@ const complex = {
     getAnimatableNone: getAnimatableNone$1,
 };
 
-const mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`;
-function getMixer$1(origin, target) {
-    if (typeof origin === "number") {
-        return (v) => mix(origin, target, v);
+function mixImmediate(a, b) {
+    return (p) => (p > 0 ? b : a);
+}
+function mixNumber(a, b) {
+    return (p) => mixNumber$1(a, b, p);
+}
+function getMixer$1(a) {
+    if (typeof a === "number") {
+        return mixNumber;
     }
-    else if (color.test(origin)) {
-        return mixColor(origin, target);
+    else if (typeof a === "string") {
+        return isCSSVariableToken(a)
+            ? mixImmediate
+            : color.test(a)
+                ? mixColor
+                : mixComplex;
     }
-    else {
-        return origin.startsWith("var(")
-            ? mixImmediate(origin, target)
-            : mixComplex(origin, target);
+    else if (Array.isArray(a)) {
+        return mixArray;
     }
+    else if (typeof a === "object") {
+        return color.test(a) ? mixColor : mixObject;
+    }
+    return mixImmediate;
 }
-const mixArray = (from, to) => {
-    const output = [...from];
+function mixArray(a, b) {
+    const output = [...a];
     const numValues = output.length;
-    const blendValue = from.map((fromThis, i) => getMixer$1(fromThis, to[i]));
-    return (v) => {
+    const blendValue = a.map((v, i) => getMixer$1(v)(v, b[i]));
+    return (p) => {
         for (let i = 0; i < numValues; i++) {
-            output[i] = blendValue[i](v);
+            output[i] = blendValue[i](p);
         }
         return output;
     };
-};
-const mixObject = (origin, target) => {
-    const output = { ...origin, ...target };
+}
+function mixObject(a, b) {
+    const output = { ...a, ...b };
     const blendValue = {};
     for (const key in output) {
-        if (origin[key] !== undefined && target[key] !== undefined) {
-            blendValue[key] = getMixer$1(origin[key], target[key]);
+        if (a[key] !== undefined && b[key] !== undefined) {
+            blendValue[key] = getMixer$1(a[key])(a[key], b[key]);
         }
     }
     return (v) => {
@@ -1281,16 +1319,29 @@ const mixObject = (origin, target) => {
         }
         return output;
     };
-};
+}
+function matchOrder(origin, target) {
+    var _a;
+    const orderedOrigin = [];
+    const pointers = { color: 0, var: 0, number: 0 };
+    for (let i = 0; i < target.values.length; i++) {
+        const type = target.types[i];
+        const originIndex = origin.indexes[type][pointers[type]];
+        const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+        orderedOrigin[i] = originValue;
+        pointers[type]++;
+    }
+    return orderedOrigin;
+}
 const mixComplex = (origin, target) => {
     const template = complex.createTransformer(target);
     const originStats = analyseComplexValue(origin);
     const targetStats = analyseComplexValue(target);
-    const canInterpolate = originStats.numVars === targetStats.numVars &&
-        originStats.numColors === targetStats.numColors &&
-        originStats.numNumbers >= targetStats.numNumbers;
+    const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&
+        originStats.indexes.color.length === targetStats.indexes.color.length &&
+        originStats.indexes.number.length >= targetStats.indexes.number.length;
     if (canInterpolate) {
-        return pipe(mixArray(originStats.values, targetStats.values), template);
+        return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
     }
     else {
         exports.warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
@@ -1298,42 +1349,19 @@ const mixComplex = (origin, target) => {
     }
 };
 
-/*
-  Progress within given range
-
-  Given a lower limit and an upper limit, we return the progress
-  (expressed as a number 0-1) represented by the given value, and
-  limit that progress to within 0-1.
-
-  @param [number]: Lower limit
-  @param [number]: Upper limit
-  @param [number]: Value to find progress within given range
-  @return [number]: Progress of value within range as expressed 0-1
-*/
-const progress = (from, to, value) => {
-    const toFromDifference = to - from;
-    return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-};
-
-const mixNumber = (from, to) => (p) => mix(from, to, p);
-function detectMixerFactory(v) {
-    if (typeof v === "number") {
-        return mixNumber;
-    }
-    else if (typeof v === "string") {
-        return color.test(v) ? mixColor : mixComplex;
-    }
-    else if (Array.isArray(v)) {
-        return mixArray;
+function mix(from, to, p) {
+    if (typeof from === "number" &&
+        typeof to === "number" &&
+        typeof p === "number") {
+        return mixNumber$1(from, to, p);
     }
-    else if (typeof v === "object") {
-        return mixObject;
-    }
-    return mixNumber;
+    const mixer = getMixer$1(from);
+    return mixer(from, to);
 }
+
 function createMixers(output, ease, customMixer) {
     const mixers = [];
-    const mixerFactory = customMixer || detectMixerFactory(output[0]);
+    const mixerFactory = customMixer || mix;
     const numMixers = output.length - 1;
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
@@ -1400,7 +1428,7 @@ function fillOffset(offset, remaining) {
     const min = offset[offset.length - 1];
     for (let i = 1; i <= remaining; i++) {
         const offsetProgress = progress(0, remaining, i);
-        offset.push(mix(min, 1, offsetProgress));
+        offset.push(mixNumber$1(min, 1, offsetProgress));
     }
 }
 
@@ -1829,6 +1857,7 @@ const types = {
     keyframes: keyframes,
     spring,
 };
+const percentToProgress = (percent) => percent / 100;
 /**
  * Animate a single value on the main thread.
  *
@@ -1864,9 +1893,7 @@ function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, ke
         if (process.env.NODE_ENV !== "production") {
             exports.invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
         }
-        mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, {
-            clamp: false,
-        });
+        mapNumbersToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
         keyframes$1 = [0, 100];
     }
     const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
@@ -2131,7 +2158,6 @@ const acceleratedValues = new Set([
     "clipPath",
     "filter",
     "transform",
-    "backgroundColor",
 ]);
 /**
  * 10ms is chosen here as it strikes a balance between smooth
@@ -2750,7 +2776,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.0.3";
+        this.version = "11.0.5";
         /**
          * 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
@@ -3449,7 +3475,7 @@ function translateAxis(axis, distance) {
  */
 function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
     const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5;
-    const originPoint = mix(axis.min, axis.max, axisOrigin);
+    const originPoint = mixNumber$1(axis.min, axis.max, axisOrigin);
     // Apply the axis delta to the final axis
     applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
 }
@@ -3978,7 +4004,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.0.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.3 may not work as expected.`);
+                warnOnce(nextValue.version === "11.0.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.5 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4713,7 +4739,7 @@ function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
     for (let i = 0; i < keyframes.length; i++) {
         sequence.push({
             value: keyframes[i],
-            at: mix(startTime, endTime, offset[i]),
+            at: mixNumber$1(startTime, endTime, offset[i]),
             easing: getEasingForSegment(easing, i),
         });
     }
@@ -5681,6 +5707,7 @@ exports.measurePageBox = measurePageBox;
 exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
+exports.mixNumber = mixNumber$1;
 exports.motionValue = motionValue;
 exports.moveItem = moveItem;
 exports.noop = noop;