framer-motion 12.7.4 → 12.7.5-alpha.1

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -1,42 +0,0 @@
-import { invariant } from 'motion-utils';
-import { isNumericalString } from '../../../utils/is-numerical-string.mjs';
-import { isCSSVariableToken } from './is-css-variable.mjs';
-
-/**
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
- *
- * ```
- * `var(--foo, #fff)` => [`--foo`, '#fff']
- * ```
- *
- * @param current
- */
-const splitCSSVariableRegex = 
-// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
-/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
-function parseCSSVariable(current) {
-    const match = splitCSSVariableRegex.exec(current);
-    if (!match)
-        return [,];
-    const [, token1, token2, fallback] = match;
-    return [`--${token1 ?? token2}`, fallback];
-}
-const maxDepth = 4;
-function getVariableValue(current, element, depth = 1) {
-    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
-    const [token, fallback] = parseCSSVariable(current);
-    // No CSS variable detected
-    if (!token)
-        return;
-    // Attempt to read this CSS variable off the element
-    const resolved = window.getComputedStyle(element).getPropertyValue(token);
-    if (resolved) {
-        const trimmed = resolved.trim();
-        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
-    }
-    return isCSSVariableToken(fallback)
-        ? getVariableValue(fallback, element, depth + 1)
-        : fallback;
-}
-
-export { getVariableValue, parseCSSVariable };

package/dist/es/render/dom/utils/is-css-variable.mjs

@@ -1,15 +0,0 @@
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = 
-/*@__PURE__*/ checkStringStartsWith("--");
-const startsAsVariableToken = 
-/*@__PURE__*/ checkStringStartsWith("var(--");
-const isCSSVariableToken = (value) => {
-    const startsWithToken = startsAsVariableToken(value);
-    if (!startsWithToken)
-        return false;
-    // Ensure any comments are stripped from the value as this can harm performance of the regex.
-    return singleCssVariableRegex.test(value.split("/*")[0].trim());
-};
-const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
-
-export { isCSSVariableName, isCSSVariableToken };

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,36 +0,0 @@
-import { number } from '../../../value/types/numbers/index.mjs';
-import { px } from '../../../value/types/numbers/units.mjs';
-import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
-import { parseValueFromTransform } from '../../html/utils/parse-transform.mjs';
-
-const isNumOrPxType = (v) => v === number || v === px;
-const transformKeys = new Set(["x", "y", "z"]);
-const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
-function removeNonTranslationalTransform(visualElement) {
-    const removedTransforms = [];
-    nonTranslationalTransformKeys.forEach((key) => {
-        const value = visualElement.getValue(key);
-        if (value !== undefined) {
-            removedTransforms.push([key, value.get()]);
-            value.set(key.startsWith("scale") ? 1 : 0);
-        }
-    });
-    return removedTransforms;
-}
-const positionalValues = {
-    // Dimensions
-    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
-    top: (_bbox, { top }) => parseFloat(top),
-    left: (_bbox, { left }) => parseFloat(left),
-    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
-    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
-    // Transform
-    x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
-    y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
-};
-// Alias translate longform names
-positionalValues.translateX = positionalValues.x;
-positionalValues.translateY = positionalValues.y;
-
-export { isNumOrPxType, positionalValues, removeNonTranslationalTransform };

package/dist/es/render/dom/value-types/animatable-none.mjs

@@ -1,15 +0,0 @@
-import { complex } from '../../../value/types/complex/index.mjs';
-import { filter } from '../../../value/types/complex/filter.mjs';
-import { getDefaultValueType } from './defaults.mjs';
-
-function getAnimatableNone(key, value) {
-    let defaultValueType = getDefaultValueType(key);
-    if (defaultValueType !== filter)
-        defaultValueType = complex;
-    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-    return defaultValueType.getAnimatableNone
-        ? defaultValueType.getAnimatableNone(value)
-        : undefined;
-}
-
-export { getAnimatableNone };

package/dist/es/render/dom/value-types/defaults.mjs

@@ -1,30 +0,0 @@
-import { color } from '../../../value/types/color/index.mjs';
-import { filter } from '../../../value/types/complex/filter.mjs';
-import { numberValueTypes } from './number.mjs';
-
-/**
- * A map of default value types for common values
- */
-const defaultValueTypes = {
-    ...numberValueTypes,
-    // Color props
-    color,
-    backgroundColor: color,
-    outlineColor: color,
-    fill: color,
-    stroke: color,
-    // Border props
-    borderColor: color,
-    borderTopColor: color,
-    borderRightColor: color,
-    borderBottomColor: color,
-    borderLeftColor: color,
-    filter,
-    WebkitFilter: filter,
-};
-/**
- * Gets the default ValueType for the provided value key
- */
-const getDefaultValueType = (key) => defaultValueTypes[key];
-
-export { defaultValueTypes, getDefaultValueType };

package/dist/es/render/dom/value-types/dimensions.mjs

@@ -1,15 +0,0 @@
-import { number } from '../../../value/types/numbers/index.mjs';
-import { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';
-import { testValueType } from './test.mjs';
-import { auto } from './type-auto.mjs';
-
-/**
- * A list of value types commonly used for dimensions
- */
-const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
-/**
- * Tests a dimensional value against the list of dimension ValueTypes
- */
-const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
-
-export { dimensionValueTypes, findDimensionValueType };

package/dist/es/render/dom/value-types/find.mjs

@@ -1,15 +0,0 @@
-import { color } from '../../../value/types/color/index.mjs';
-import { complex } from '../../../value/types/complex/index.mjs';
-import { dimensionValueTypes } from './dimensions.mjs';
-import { testValueType } from './test.mjs';
-
-/**
- * A list of all ValueTypes
- */
-const valueTypes = [...dimensionValueTypes, color, complex];
-/**
- * Tests a value against the list of ValueTypes
- */
-const findValueType = (v) => valueTypes.find(testValueType(v));
-
-export { findValueType };

package/dist/es/render/dom/value-types/get-as-type.mjs

@@ -1,10 +0,0 @@
-/**
- * Provided a value and a ValueType, returns the value as that value type.
- */
-const getValueAsType = (value, type) => {
-    return type && typeof value === "number"
-        ? type.transform(value)
-        : value;
-};
-
-export { getValueAsType };

package/dist/es/render/dom/value-types/number-browser.mjs

@@ -1,41 +0,0 @@
-import { px } from '../../../value/types/numbers/units.mjs';
-
-const browserNumberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Misc
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-};
-
-export { browserNumberValueTypes };

package/dist/es/render/dom/value-types/number.mjs

@@ -1,18 +0,0 @@
-import { alpha } from '../../../value/types/numbers/index.mjs';
-import { px } from '../../../value/types/numbers/units.mjs';
-import { browserNumberValueTypes } from './number-browser.mjs';
-import { transformValueTypes } from './transform.mjs';
-import { int } from './type-int.mjs';
-
-const numberValueTypes = {
-    ...browserNumberValueTypes,
-    ...transformValueTypes,
-    zIndex: int,
-    size: px,
-    // SVG
-    fillOpacity: alpha,
-    strokeOpacity: alpha,
-    numOctaves: int,
-};
-
-export { numberValueTypes };

package/dist/es/render/dom/value-types/test.mjs

@@ -1,6 +0,0 @@
-/**
- * Tests a provided value against a ValueType
- */
-const testValueType = (v) => (type) => type.test(v);
-
-export { testValueType };

package/dist/es/render/dom/value-types/transform.mjs

@@ -1,31 +0,0 @@
-import { scale, alpha } from '../../../value/types/numbers/index.mjs';
-import { degrees, px, progressPercentage } from '../../../value/types/numbers/units.mjs';
-
-const transformValueTypes = {
-    rotate: degrees,
-    rotateX: degrees,
-    rotateY: degrees,
-    rotateZ: degrees,
-    scale,
-    scaleX: scale,
-    scaleY: scale,
-    scaleZ: scale,
-    skew: degrees,
-    skewX: degrees,
-    skewY: degrees,
-    distance: px,
-    translateX: px,
-    translateY: px,
-    translateZ: px,
-    x: px,
-    y: px,
-    z: px,
-    perspective: px,
-    transformPerspective: px,
-    opacity: alpha,
-    originX: progressPercentage,
-    originY: progressPercentage,
-    originZ: px,
-};
-
-export { transformValueTypes };

package/dist/es/render/dom/value-types/type-auto.mjs

@@ -1,9 +0,0 @@
-/**
- * ValueType for "auto"
- */
-const auto = {
-    test: (v) => v === "auto",
-    parse: (v) => v,
-};
-
-export { auto };

package/dist/es/render/dom/value-types/type-int.mjs

@@ -1,8 +0,0 @@
-import { number } from '../../../value/types/numbers/index.mjs';
-
-const int = {
-    ...number,
-    transform: Math.round,
-};
-
-export { int };

package/dist/es/render/html/utils/keys-position.mjs

@@ -1,13 +0,0 @@
-import { transformPropOrder } from './keys-transform.mjs';
-
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    ...transformPropOrder,
-]);
-
-export { positionalKeys };

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

@@ -1,28 +0,0 @@
-/**
- * Generate a list of every possible transform key.
- */
-const transformPropOrder = [
-    "transformPerspective",
-    "x",
-    "y",
-    "z",
-    "translateX",
-    "translateY",
-    "translateZ",
-    "scale",
-    "scaleX",
-    "scaleY",
-    "rotate",
-    "rotateX",
-    "rotateY",
-    "rotateZ",
-    "skew",
-    "skewX",
-    "skewY",
-];
-/**
- * A quick lookup for transform props.
- */
-const transformProps = new Set(transformPropOrder);
-
-export { transformPropOrder, transformProps };

package/dist/es/render/html/utils/make-none-animatable.mjs

@@ -1,30 +0,0 @@
-import { analyseComplexValue } from '../../../value/types/complex/index.mjs';
-import { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';
-
-/**
- * If we encounter keyframes like "none" or "0" and we also have keyframes like
- * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
- * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
- * zero equivalents, i.e. "#fff0" or "0px 0px".
- */
-const invalidTemplates = new Set(["auto", "none", "0"]);
-function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
-    let i = 0;
-    let animatableTemplate = undefined;
-    while (i < unresolvedKeyframes.length && !animatableTemplate) {
-        const keyframe = unresolvedKeyframes[i];
-        if (typeof keyframe === "string" &&
-            !invalidTemplates.has(keyframe) &&
-            analyseComplexValue(keyframe).values.length) {
-            animatableTemplate = unresolvedKeyframes[i];
-        }
-        i++;
-    }
-    if (animatableTemplate && name) {
-        for (const noneIndex of noneKeyframeIndexes) {
-            unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
-        }
-    }
-}
-
-export { makeNoneKeyframesAnimatable };

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

@@ -1,83 +0,0 @@
-const radToDeg = (rad) => (rad * 180) / Math.PI;
-const rotate = (v) => {
-    const angle = radToDeg(Math.atan2(v[1], v[0]));
-    return rebaseAngle(angle);
-};
-const matrix2dParsers = {
-    x: 4,
-    y: 5,
-    translateX: 4,
-    translateY: 5,
-    scaleX: 0,
-    scaleY: 3,
-    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
-    rotate,
-    rotateZ: rotate,
-    skewX: (v) => radToDeg(Math.atan(v[1])),
-    skewY: (v) => radToDeg(Math.atan(v[2])),
-    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
-};
-const rebaseAngle = (angle) => {
-    angle = angle % 360;
-    if (angle < 0)
-        angle += 360;
-    return angle;
-};
-const rotateZ = rotate;
-const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
-const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
-const matrix3dParsers = {
-    x: 12,
-    y: 13,
-    z: 14,
-    translateX: 12,
-    translateY: 13,
-    translateZ: 14,
-    scaleX,
-    scaleY,
-    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
-    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
-    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
-    rotateZ,
-    rotate: rotateZ,
-    skewX: (v) => radToDeg(Math.atan(v[4])),
-    skewY: (v) => radToDeg(Math.atan(v[1])),
-    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
-};
-function defaultTransformValue(name) {
-    return name.includes("scale") ? 1 : 0;
-}
-function parseValueFromTransform(transform, name) {
-    if (!transform || transform === "none") {
-        return defaultTransformValue(name);
-    }
-    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
-    let parsers;
-    let match;
-    if (matrix3dMatch) {
-        parsers = matrix3dParsers;
-        match = matrix3dMatch;
-    }
-    else {
-        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
-        parsers = matrix2dParsers;
-        match = matrix2dMatch;
-    }
-    if (!match) {
-        return defaultTransformValue(name);
-    }
-    const valueParser = parsers[name];
-    const values = match[1].split(",").map(convertTransformToNumber);
-    return typeof valueParser === "function"
-        ? valueParser(values)
-        : values[valueParser];
-}
-const readTransformValue = (instance, name) => {
-    const { transform = "none" } = getComputedStyle(instance);
-    return parseValueFromTransform(transform, name);
-};
-function convertTransformToNumber(value) {
-    return parseFloat(value.trim());
-}
-
-export { parseValueFromTransform, readTransformValue };

package/dist/es/render/utils/KeyframesResolver.mjs

@@ -1,163 +0,0 @@
-import { frame } from 'motion-dom';
-import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';
-
-const toResolve = new Set();
-let isScheduled = false;
-let anyNeedsMeasurement = false;
-function measureAllKeyframes() {
-    if (anyNeedsMeasurement) {
-        const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
-        const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
-        const transformsToRestore = new Map();
-        /**
-         * Write pass
-         * If we're measuring elements we want to remove bounding box-changing transforms.
-         */
-        elementsToMeasure.forEach((element) => {
-            const removedTransforms = removeNonTranslationalTransform(element);
-            if (!removedTransforms.length)
-                return;
-            transformsToRestore.set(element, removedTransforms);
-            element.render();
-        });
-        // Read
-        resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
-        // Write
-        elementsToMeasure.forEach((element) => {
-            element.render();
-            const restore = transformsToRestore.get(element);
-            if (restore) {
-                restore.forEach(([key, value]) => {
-                    element.getValue(key)?.set(value);
-                });
-            }
-        });
-        // Read
-        resolversToMeasure.forEach((resolver) => resolver.measureEndState());
-        // Write
-        resolversToMeasure.forEach((resolver) => {
-            if (resolver.suspendedScrollY !== undefined) {
-                window.scrollTo(0, resolver.suspendedScrollY);
-            }
-        });
-    }
-    anyNeedsMeasurement = false;
-    isScheduled = false;
-    toResolve.forEach((resolver) => resolver.complete());
-    toResolve.clear();
-}
-function readAllKeyframes() {
-    toResolve.forEach((resolver) => {
-        resolver.readKeyframes();
-        if (resolver.needsMeasurement) {
-            anyNeedsMeasurement = true;
-        }
-    });
-}
-function flushKeyframeResolvers() {
-    readAllKeyframes();
-    measureAllKeyframes();
-}
-class KeyframeResolver {
-    constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
-        /**
-         * Track whether this resolver has completed. Once complete, it never
-         * needs to attempt keyframe resolution again.
-         */
-        this.isComplete = false;
-        /**
-         * Track whether this resolver is async. If it is, it'll be added to the
-         * resolver queue and flushed in the next frame. Resolvers that aren't going
-         * to trigger read/write thrashing don't need to be async.
-         */
-        this.isAsync = false;
-        /**
-         * Track whether this resolver needs to perform a measurement
-         * to resolve its keyframes.
-         */
-        this.needsMeasurement = false;
-        /**
-         * Track whether this resolver is currently scheduled to resolve
-         * to allow it to be cancelled and resumed externally.
-         */
-        this.isScheduled = false;
-        this.unresolvedKeyframes = [...unresolvedKeyframes];
-        this.onComplete = onComplete;
-        this.name = name;
-        this.motionValue = motionValue;
-        this.element = element;
-        this.isAsync = isAsync;
-    }
-    scheduleResolve() {
-        this.isScheduled = true;
-        if (this.isAsync) {
-            toResolve.add(this);
-            if (!isScheduled) {
-                isScheduled = true;
-                frame.read(readAllKeyframes);
-                frame.resolveKeyframes(measureAllKeyframes);
-            }
-        }
-        else {
-            this.readKeyframes();
-            this.complete();
-        }
-    }
-    readKeyframes() {
-        const { unresolvedKeyframes, name, element, motionValue } = this;
-        /**
-         * If a keyframe is null, we hydrate it either by reading it from
-         * the instance, or propagating from previous keyframes.
-         */
-        for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (unresolvedKeyframes[i] === null) {
-                /**
-                 * If the first keyframe is null, we need to find its value by sampling the element
-                 */
-                if (i === 0) {
-                    const currentValue = motionValue?.get();
-                    const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-                    if (currentValue !== undefined) {
-                        unresolvedKeyframes[0] = currentValue;
-                    }
-                    else if (element && name) {
-                        const valueAsRead = element.readValue(name, finalKeyframe);
-                        if (valueAsRead !== undefined && valueAsRead !== null) {
-                            unresolvedKeyframes[0] = valueAsRead;
-                        }
-                    }
-                    if (unresolvedKeyframes[0] === undefined) {
-                        unresolvedKeyframes[0] = finalKeyframe;
-                    }
-                    if (motionValue && currentValue === undefined) {
-                        motionValue.set(unresolvedKeyframes[0]);
-                    }
-                }
-                else {
-                    unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
-                }
-            }
-        }
-    }
-    setFinalKeyframe() { }
-    measureInitialState() { }
-    renderEndStyles() { }
-    measureEndState() { }
-    complete() {
-        this.isComplete = true;
-        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
-        toResolve.delete(this);
-    }
-    cancel() {
-        if (!this.isComplete) {
-            this.isScheduled = false;
-            toResolve.delete(this);
-        }
-    }
-    resume() {
-        if (!this.isComplete)
-            this.scheduleResolve();
-    }
-}
-
-export { KeyframeResolver, flushKeyframeResolvers };

package/dist/es/utils/clamp.mjs

@@ -1,9 +0,0 @@
-const clamp = (min, max, v) => {
-    if (v > max)
-        return max;
-    if (v < min)
-        return min;
-    return v;
-};
-
-export { clamp };