motion 10.17.1 → 11.11.12

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

@@ -0,0 +1,65 @@
+import { buildTransform } from './build-transform.mjs';
+import { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';
+import { transformProps } from './transform.mjs';
+import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
+import { numberValueTypes } from '../../dom/value-types/number.mjs';
+
+function buildHTMLStyles(state, latestValues, transformTemplate) {
+    const { style, vars, transformOrigin } = state;
+    // Track whether we encounter any transform or transformOrigin values.
+    let hasTransform = false;
+    let hasTransformOrigin = false;
+    /**
+     * Loop over all our latest animated values and decide whether to handle them
+     * as a style or CSS variable.
+     *
+     * Transforms and transform origins are kept separately for further processing.
+     */
+    for (const key in latestValues) {
+        const value = latestValues[key];
+        if (transformProps.has(key)) {
+            // If this is a transform, flag to enable further transform processing
+            hasTransform = true;
+            continue;
+        }
+        else if (isCSSVariableName(key)) {
+            vars[key] = value;
+            continue;
+        }
+        else {
+            // Convert the value to its default value type, ie 0 -> "0px"
+            const valueAsType = getValueAsType(value, numberValueTypes[key]);
+            if (key.startsWith("origin")) {
+                // If this is a transform origin, flag and enable further transform-origin processing
+                hasTransformOrigin = true;
+                transformOrigin[key] =
+                    valueAsType;
+            }
+            else {
+                style[key] = valueAsType;
+            }
+        }
+    }
+    if (!latestValues.transform) {
+        if (hasTransform || transformTemplate) {
+            style.transform = buildTransform(latestValues, state.transform, transformTemplate);
+        }
+        else if (style.transform) {
+            /**
+             * If we have previously created a transform but currently don't have any,
+             * reset transform style to none.
+             */
+            style.transform = "none";
+        }
+    }
+    /**
+     * Build a transformOrigin style. Uses the same defaults as the browser for
+     * undefined origins.
+     */
+    if (hasTransformOrigin) {
+        const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
+        style.transformOrigin = `${originX} ${originY} ${originZ}`;
+    }
+}
+
+export { buildHTMLStyles };

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

@@ -0,0 +1,62 @@
+import { transformPropOrder } from './transform.mjs';
+import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
+import { numberValueTypes } from '../../dom/value-types/number.mjs';
+
+const translateAlias = {
+    x: "translateX",
+    y: "translateY",
+    z: "translateZ",
+    transformPerspective: "perspective",
+};
+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(latestValues, transform, transformTemplate) {
+    // The transform string we're going to build into.
+    let transformString = "";
+    let transformIsDefault = true;
+    /**
+     * 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];
+        const value = latestValues[key];
+        if (value === undefined)
+            continue;
+        let valueIsDefault = true;
+        if (typeof value === "number") {
+            valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
+        }
+        else {
+            valueIsDefault = parseFloat(value) === 0;
+        }
+        if (!valueIsDefault || transformTemplate) {
+            const valueAsType = getValueAsType(value, numberValueTypes[key]);
+            if (!valueIsDefault) {
+                transformIsDefault = false;
+                const transformName = translateAlias[key] || key;
+                transformString += `${transformName}(${valueAsType}) `;
+            }
+            if (transformTemplate) {
+                transform[key] = valueAsType;
+            }
+        }
+    }
+    transformString = transformString.trim();
+    // If we have a custom `transform` template, pass our transform values and
+    // generated transformString to that before returning
+    if (transformTemplate) {
+        transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
+    }
+    else if (transformIsDefault) {
+        transformString = "none";
+    }
+    return transformString;
+}
+
+export { buildTransform };

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

@@ -0,0 +1,8 @@
+const createHtmlRenderState = () => ({
+    style: {},
+    transform: {},
+    transformOrigin: {},
+    vars: {},
+});
+
+export { createHtmlRenderState };

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

@@ -0,0 +1,30 @@
+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/framer-motion/dist/es/render/html/utils/render.mjs

@@ -0,0 +1,9 @@
+function renderHTML(element, { style, vars }, styleProp, projection) {
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (const key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
+export { renderHTML };

package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs

@@ -0,0 +1,20 @@
+import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';
+import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
+
+function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+    var _a;
+    const { style } = props;
+    const newValues = {};
+    for (const key in style) {
+        if (isMotionValue(style[key]) ||
+            (prevProps.style &&
+                isMotionValue(prevProps.style[key])) ||
+            isForcedMotionValue(key, props) ||
+            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+            newValues[key] = style[key];
+        }
+    }
+    return newValues;
+}
+
+export { scrapeMotionValuesFromProps };

package/dist/es/framer-motion/dist/es/render/html/utils/transform.mjs

@@ -0,0 +1,28 @@
+/**
+ * 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/framer-motion/dist/es/render/object/ObjectVisualElement.mjs

@@ -0,0 +1,41 @@
+import { createBox } from '../../projection/geometry/models.mjs';
+import { VisualElement } from '../VisualElement.mjs';
+
+function isObjectKey(key, object) {
+    return key in object;
+}
+class ObjectVisualElement extends VisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "object";
+    }
+    readValueFromInstance(instance, key) {
+        if (isObjectKey(key, instance)) {
+            const value = instance[key];
+            if (typeof value === "string" || typeof value === "number") {
+                return value;
+            }
+        }
+        return undefined;
+    }
+    getBaseTargetFromProps() {
+        return undefined;
+    }
+    removeValueFromRenderState(key, renderState) {
+        delete renderState.output[key];
+    }
+    measureInstanceViewportBox() {
+        return createBox();
+    }
+    build(renderState, latestValues) {
+        Object.assign(renderState.output, latestValues);
+    }
+    renderInstance(instance, { output }) {
+        Object.assign(instance, output);
+    }
+    sortInstanceNodePosition() {
+        return 0;
+    }
+}
+
+export { ObjectVisualElement };

package/dist/es/framer-motion/dist/es/render/store.mjs

@@ -0,0 +1,3 @@
+const visualElementStore = new WeakMap();
+
+export { visualElementStore };

package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -0,0 +1,45 @@
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
+import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
+import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
+import { transformProps } from '../html/utils/transform.mjs';
+import { renderSVG } from './utils/render.mjs';
+import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { isSVGTag } from './utils/is-svg-tag.mjs';
+
+class SVGVisualElement extends DOMVisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "svg";
+        this.isSVGTag = false;
+        this.measureInstanceViewportBox = createBox;
+    }
+    getBaseTargetFromProps(props, key) {
+        return props[key];
+    }
+    readValueFromInstance(instance, key) {
+        if (transformProps.has(key)) {
+            const defaultType = getDefaultValueType(key);
+            return defaultType ? defaultType.default || 0 : 0;
+        }
+        key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+        return instance.getAttribute(key);
+    }
+    scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+        return scrapeMotionValuesFromProps(props, prevProps, visualElement);
+    }
+    build(renderState, latestValues, props) {
+        buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
+    }
+    renderInstance(instance, renderState, styleProp, projection) {
+        renderSVG(instance, renderState, styleProp, projection);
+    }
+    mount(instance) {
+        this.isSVGTag = isSVGTag(instance.tagName);
+        super.mount(instance);
+    }
+}
+
+export { SVGVisualElement };

package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs

@@ -0,0 +1,40 @@
+import { renderSVG } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
+import { createSvgRenderState } from './utils/create-render-state.mjs';
+import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { isSVGTag } from './utils/is-svg-tag.mjs';
+import { frame } from '../../frameloop/frame.mjs';
+
+const svgMotionConfig = {
+    useVisualState: makeUseVisualState({
+        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        createRenderState: createSvgRenderState,
+        onMount: (props, instance, { renderState, latestValues }) => {
+            frame.read(() => {
+                try {
+                    renderState.dimensions =
+                        typeof instance.getBBox ===
+                            "function"
+                            ? instance.getBBox()
+                            : instance.getBoundingClientRect();
+                }
+                catch (e) {
+                    // Most likely trying to measure an unrendered element under Firefox
+                    renderState.dimensions = {
+                        x: 0,
+                        y: 0,
+                        width: 0,
+                        height: 0,
+                    };
+                }
+            });
+            frame.render(() => {
+                buildSVGAttrs(renderState, latestValues, isSVGTag(instance.tagName), props.transformTemplate);
+                renderSVG(instance, renderState);
+            });
+        },
+    }),
+};
+
+export { svgMotionConfig };

package/dist/es/framer-motion/dist/es/render/svg/lowercase-elements.mjs

@@ -0,0 +1,33 @@
+/**
+ * We keep these listed separately as we use the lowercase tag names as part
+ * of the runtime bundle to detect SVG components
+ */
+const lowercaseSVGElements = [
+    "animate",
+    "circle",
+    "defs",
+    "desc",
+    "ellipse",
+    "g",
+    "image",
+    "line",
+    "filter",
+    "marker",
+    "mask",
+    "metadata",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "rect",
+    "stop",
+    "switch",
+    "symbol",
+    "svg",
+    "text",
+    "tspan",
+    "use",
+    "view",
+];
+
+export { lowercaseSVGElements };

package/dist/es/framer-motion/dist/es/render/svg/use-props.mjs

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { copyRawValuesOnly } from '../html/use-props.mjs';
+import { buildSVGAttrs } from './utils/build-attrs.mjs';
+import { createSvgRenderState } from './utils/create-render-state.mjs';
+import { isSVGTag } from './utils/is-svg-tag.mjs';
+
+function useSVGProps(props, visualState, _isStatic, Component) {
+    const visualProps = useMemo(() => {
+        const state = createSvgRenderState();
+        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate);
+        return {
+            ...state.attrs,
+            style: { ...state.style },
+        };
+    }, [visualState]);
+    if (props.style) {
+        const rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+    return visualProps;
+}
+
+export { useSVGProps };

package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs

@@ -0,0 +1,52 @@
+import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
+import { calcSVGTransformOrigin } from './transform-origin.mjs';
+import { buildSVGPath } from './path.mjs';
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+// This is object creation, which we try to avoid per-frame.
+...latest }, isSVGTag, transformTemplate) {
+    buildHTMLStyles(state, latest, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
+    state.attrs = state.style;
+    state.style = {};
+    const { attrs, style, dimensions } = state;
+    /**
+     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
+     * and copy it into style.
+     */
+    if (attrs.transform) {
+        if (dimensions)
+            style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    // Parse transformOrigin
+    if (dimensions &&
+        (originX !== undefined || originY !== undefined || style.transform)) {
+        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    }
+    // Render attrX/attrY/attrScale as attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    if (attrScale !== undefined)
+        attrs.scale = attrScale;
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+export { buildSVGAttrs };

package/dist/es/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs

@@ -0,0 +1,30 @@
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+]);
+
+export { camelCaseAttributes };

package/dist/es/framer-motion/dist/es/render/svg/utils/create-render-state.mjs

@@ -0,0 +1,8 @@
+import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';
+
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
+export { createSvgRenderState };

package/dist/es/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs

@@ -0,0 +1,3 @@
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+export { isSVGTag };

package/dist/es/framer-motion/dist/es/render/svg/utils/path.mjs

@@ -0,0 +1,32 @@
+import { px } from '../../../value/types/numbers/units.mjs';
+
+const dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+const camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    const keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = px.transform(-offset);
+    // Build the dash array
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
+    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
+}
+
+export { buildSVGPath };

package/dist/es/framer-motion/dist/es/render/svg/utils/render.mjs

@@ -0,0 +1,12 @@
+import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';
+import { renderHTML } from '../../html/utils/render.mjs';
+import { camelCaseAttributes } from './camel-case-attrs.mjs';
+
+function renderSVG(element, renderState, _styleProp, projection) {
+    renderHTML(element, renderState, undefined, projection);
+    for (const key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
+export { renderSVG };

package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs

@@ -0,0 +1,19 @@
+import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
+import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';
+import { transformPropOrder } from '../../html/utils/transform.mjs';
+
+function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+    const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+    for (const key in props) {
+        if (isMotionValue(props[key]) ||
+            isMotionValue(prevProps[key])) {
+            const targetKey = transformPropOrder.indexOf(key) !== -1
+                ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
+                : key;
+            newValues[targetKey] = props[key];
+        }
+    }
+    return newValues;
+}
+
+export { scrapeMotionValuesFromProps };

package/dist/es/framer-motion/dist/es/render/svg/utils/transform-origin.mjs

@@ -0,0 +1,18 @@
+import { px } from '../../../value/types/numbers/units.mjs';
+
+function calcOrigin(origin, offset, size) {
+    return typeof origin === "string"
+        ? origin
+        : px.transform(offset + size * origin);
+}
+/**
+ * The SVG transform origin defaults are different to CSS and is less intuitive,
+ * so we use the measured dimensions of the SVG to reconcile these.
+ */
+function calcSVGTransformOrigin(dimensions, originX, originY) {
+    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
+}
+
+export { calcSVGTransformOrigin };