framer-motion 7.0.3 → 7.1.2

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

@@ -4,12 +4,11 @@ import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 
-var svgMotionConfig = {
+const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onMount: function (props, instance, _a) {
-            var renderState = _a.renderState, latestValues = _a.latestValues;
+        onMount: (props, instance, { renderState, latestValues }) => {
             try {
                 renderState.dimensions =
                     typeof instance.getBBox ===

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

@@ -2,7 +2,7 @@
  * We keep these listed seperately as we use the lowercase tag names as part
  * of the runtime bundle to detect SVG components
  */
-var lowercaseSVGElements = [
+const lowercaseSVGElements = [
     "animate",
     "circle",
     "defs",

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

@@ -1,19 +1,18 @@
-import { __assign } from 'tslib';
 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';
 
 function useSVGProps(props, visualState) {
-    var visualProps = useMemo(function () {
-        var state = createSvgRenderState();
+    const visualProps = useMemo(() => {
+        const state = createSvgRenderState();
         buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
-        return __assign(__assign({}, state.attrs), { style: __assign({}, state.style) });
+        return Object.assign(Object.assign({}, state.attrs), { style: Object.assign({}, state.style) });
     }, [visualState]);
     if (props.style) {
-        var rawStyles = {};
+        const rawStyles = {};
         copyRawValuesOnly(rawStyles, props.style, props);
-        visualProps.style = __assign(__assign({}, rawStyles), visualProps.style);
+        visualProps.style = Object.assign(Object.assign({}, rawStyles), visualProps.style);
     }
     return visualProps;
 }

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

@@ -7,13 +7,13 @@ import { buildSVGPath } from './path.mjs';
  * Build SVG visual attrbutes, like cx and style.transform
  */
 function buildSVGAttrs(state, _a, options, transformTemplate) {
-    var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, 
+    var { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0 } = _a, 
     // This is object creation, which we try to avoid per-frame.
     latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
     buildHTMLStyles(state, latest, options, transformTemplate);
     state.attrs = state.style;
     state.style = {};
-    var attrs = state.attrs, style = state.style, dimensions = state.dimensions;
+    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.

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

@@ -1,7 +1,7 @@
 /**
  * A set of attribute names that are always read/written as camel case.
  */
-var camelCaseAttributes = new Set([
+const camelCaseAttributes = new Set([
     "baseFrequency",
     "diffuseConstant",
     "kernelMatrix",

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

@@ -1,6 +1,5 @@
-import { __assign } from 'tslib';
 import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';
 
-var createSvgRenderState = function () { return (__assign(__assign({}, createHtmlRenderState()), { attrs: {} })); };
+const createSvgRenderState = () => (Object.assign(Object.assign({}, createHtmlRenderState()), { attrs: {} }));
 
 export { createSvgRenderState };

package/dist/es/render/svg/utils/path.mjs

@@ -1,10 +1,10 @@
 import { px } from 'style-value-types';
 
-var dashKeys = {
+const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
 };
-var camelKeys = {
+const camelKeys = {
     offset: "strokeDashoffset",
     array: "strokeDasharray",
 };
@@ -15,21 +15,18 @@ var camelKeys = {
  *
  * This function is mutative to reduce per-frame GC.
  */
-function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
-    if (spacing === void 0) { spacing = 1; }
-    if (offset === void 0) { offset = 0; }
-    if (useDashCase === void 0) { useDashCase = true; }
+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.
-    var keys = useDashCase ? dashKeys : camelKeys;
+    const keys = useDashCase ? dashKeys : camelKeys;
     // Build the dash offset
     attrs[keys.offset] = px.transform(-offset);
     // Build the dash array
-    var pathLength = px.transform(length);
-    var pathSpacing = px.transform(spacing);
-    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
+    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
 export { buildSVGPath };

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

@@ -4,7 +4,7 @@ import { camelCaseAttributes } from './camel-case-attrs.mjs';
 
 function renderSVG(element, renderState, _styleProp, projection) {
     renderHTML(element, renderState, undefined, projection);
-    for (var key in renderState.attrs) {
+    for (const key in renderState.attrs) {
         element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
     }
 }

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

@@ -2,10 +2,10 @@ import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
 import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';
 
 function scrapeMotionValuesFromProps(props) {
-    var newValues = scrapeMotionValuesFromProps$1(props);
-    for (var key in props) {
+    const newValues = scrapeMotionValuesFromProps$1(props);
+    for (const key in props) {
         if (isMotionValue(props[key])) {
-            var targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
+            const targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key;
             newValues[targetKey] = props[key];
         }
     }

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

@@ -10,9 +10,9 @@ function calcOrigin(origin, offset, size) {
  * so we use the measured dimensions of the SVG to reconcile these.
  */
 function calcSVGTransformOrigin(dimensions, originX, originY) {
-    var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return "".concat(pxOriginX, " ").concat(pxOriginY);
+    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
 }
 
 export { calcSVGTransformOrigin };

package/dist/es/render/svg/visual-element.mjs

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { visualElement } from '../index.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { htmlConfig } from '../html/visual-element.mjs';
@@ -9,16 +8,19 @@ import { isTransformProp } from '../html/utils/transform.mjs';
 import { renderSVG } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 
-var svgVisualElement = visualElement(__assign(__assign({}, htmlConfig), { getBaseTarget: function (props, key) {
+const svgVisualElement = visualElement(Object.assign(Object.assign({}, htmlConfig), { getBaseTarget(props, key) {
         return props[key];
-    }, readValueFromInstance: function (domElement, key) {
+    },
+    readValueFromInstance(domElement, key) {
         var _a;
         if (isTransformProp(key)) {
             return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
         }
         key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
         return domElement.getAttribute(key);
-    }, scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, build: function (_element, renderState, latestValues, options, props) {
+    },
+    scrapeMotionValuesFromProps,
+    build(_element, renderState, latestValues, options, props) {
         buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
     }, render: renderSVG }));
 

package/dist/es/render/utils/animation-state.mjs

@@ -1,4 +1,4 @@
-import { __spreadArray, __read, __assign, __rest } from 'tslib';
+import { __rest } from 'tslib';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';
 import { shallowCompare } from '../../utils/shallow-compare.mjs';
@@ -6,7 +6,7 @@ import { animateVisualElement } from './animation.mjs';
 import { AnimationType } from './types.mjs';
 import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.mjs';
 
-var variantPriorityOrder = [
+const variantPriorityOrder = [
     AnimationType.Animate,
     AnimationType.InView,
     AnimationType.Focus,
@@ -15,36 +15,27 @@ var variantPriorityOrder = [
     AnimationType.Drag,
     AnimationType.Exit,
 ];
-var reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder), false).reverse();
-var numAnimationTypes = variantPriorityOrder.length;
+const reversePriorityOrder = [...variantPriorityOrder].reverse();
+const numAnimationTypes = variantPriorityOrder.length;
 function animateList(visualElement) {
-    return function (animations) {
-        return Promise.all(animations.map(function (_a) {
-            var animation = _a.animation, options = _a.options;
-            return animateVisualElement(visualElement, animation, options);
-        }));
-    };
+    return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options)));
 }
 function createAnimationState(visualElement) {
-    var animate = animateList(visualElement);
-    var state = createState();
-    var allAnimatedKeys = {};
-    var isInitialRender = true;
+    let animate = animateList(visualElement);
+    const state = createState();
+    let isInitialRender = true;
     /**
      * This function will be used to reduce the animation definitions for
      * each active animation type into an object of resolved values for it.
      */
-    var buildResolvedTypeValues = function (acc, definition) {
-        var resolved = resolveVariant(visualElement, definition);
+    const buildResolvedTypeValues = (acc, definition) => {
+        const resolved = resolveVariant(visualElement, definition);
         if (resolved) {
-            resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]);
-            acc = __assign(__assign(__assign({}, acc), target), transitionEnd);
+            const { transition, transitionEnd } = resolved, target = __rest(resolved, ["transition", "transitionEnd"]);
+            acc = Object.assign(Object.assign(Object.assign({}, acc), target), transitionEnd);
         }
         return acc;
     };
-    function isAnimated(key) {
-        return allAnimatedKeys[key] !== undefined;
-    }
     /**
      * This just allows us to inject mocked animation functions
      * @internal
@@ -64,39 +55,45 @@ function createAnimationState(visualElement) {
      */
     function animateChanges(options, changedActiveType) {
         var _a;
-        var props = visualElement.getProps();
-        var context = visualElement.getVariantContext(true) || {};
+        const props = visualElement.getProps();
+        const context = visualElement.getVariantContext(true) || {};
         /**
          * A list of animations that we'll build into as we iterate through the animation
          * types. This will get executed at the end of the function.
          */
-        var animations = [];
+        const animations = [];
         /**
          * Keep track of which values have been removed. Then, as we hit lower priority
          * animation types, we can check if they contain removed values and animate to that.
          */
-        var removedKeys = new Set();
+        const removedKeys = new Set();
         /**
          * A dictionary of all encountered keys. This is an object to let us build into and
          * copy it without iteration. Each time we hit an animation type we set its protected
          * keys - the keys its not allowed to animate - to the latest version of this object.
          */
-        var encounteredKeys = {};
+        let encounteredKeys = {};
         /**
          * If a variant has been removed at a given index, and this component is controlling
          * variant animations, we want to ensure lower-priority variants are forced to animate.
          */
-        var removedVariantIndex = Infinity;
-        var _loop_1 = function (i) {
-            var type = reversePriorityOrder[i];
-            var typeState = state[type];
-            var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
-            var propIsVariant = isVariantLabel(prop);
+        let removedVariantIndex = Infinity;
+        /**
+         * Iterate through all animation types in reverse priority order. For each, we want to
+         * detect which values it's handling and whether or not they've changed (and therefore
+         * need to be animated). If any values have been removed, we want to detect those in
+         * lower priority props and flag for animation.
+         */
+        for (let i = 0; i < numAnimationTypes; i++) {
+            const type = reversePriorityOrder[i];
+            const typeState = state[type];
+            const prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type];
+            const propIsVariant = isVariantLabel(prop);
             /**
              * If this type has *just* changed isActive status, set activeDelta
              * to that status. Otherwise set to null.
              */
-            var activeDelta = type === changedActiveType ? typeState.isActive : null;
+            const activeDelta = type === changedActiveType ? typeState.isActive : null;
             if (activeDelta === false)
                 removedVariantIndex = i;
             /**
@@ -105,7 +102,7 @@ function createAnimationState(visualElement) {
              *
              * TODO: Can probably change this to a !isControllingVariants check
              */
-            var isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
+            let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
             /**
              *
              */
@@ -118,7 +115,7 @@ function createAnimationState(visualElement) {
              * Set all encountered keys so far as the protected keys for this type. This will
              * be any key that has been animated or otherwise handled by active, higher-priortiy types.
              */
-            typeState.protectedKeys = __assign({}, encounteredKeys);
+            typeState.protectedKeys = Object.assign({}, encounteredKeys);
             // Check if we can skip analysing this prop early
             if (
             // If it isn't active and hasn't *just* been set as inactive
@@ -128,15 +125,15 @@ function createAnimationState(visualElement) {
                 // Or if the prop doesn't define an animation
                 isAnimationControls(prop) ||
                 typeof prop === "boolean") {
-                return "continue";
+                continue;
             }
             /**
              * As we go look through the values defined on this type, if we detect
              * a changed value or a value that was removed in a higher priority, we set
              * this to true and add this prop to the animation list.
              */
-            var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
-            var shouldAnimateType = variantDidChange ||
+            const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
+            let shouldAnimateType = variantDidChange ||
                 // If we're making this variant active, we want to always make it active
                 (type === changedActiveType &&
                     typeState.isActive &&
@@ -148,12 +145,12 @@ function createAnimationState(visualElement) {
              * As animations can be set as variant lists, variants or target objects, we
              * coerce everything to an array if it isn't one already
              */
-            var definitionList = Array.isArray(prop) ? prop : [prop];
+            const definitionList = Array.isArray(prop) ? prop : [prop];
             /**
              * Build an object of all the resolved values. We'll use this in the subsequent
              * animateChanges calls to determine whether a value has changed.
              */
-            var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
+            let resolvedValues = definitionList.reduce(buildResolvedTypeValues, {});
             if (activeDelta === false)
                 resolvedValues = {};
             /**
@@ -165,16 +162,16 @@ function createAnimationState(visualElement) {
              * 4. If it hasn't been removed in a higher priority but hasn't changed, and
              *    needs adding to the type's protectedKeys list.
              */
-            var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b;
-            var allKeys = __assign(__assign({}, prevResolvedValues), resolvedValues);
-            var markToAnimate = function (key) {
+            const { prevResolvedValues = {} } = typeState;
+            const allKeys = Object.assign(Object.assign({}, prevResolvedValues), resolvedValues);
+            const markToAnimate = (key) => {
                 shouldAnimateType = true;
                 removedKeys.delete(key);
                 typeState.needsAnimating[key] = true;
             };
-            for (var key in allKeys) {
-                var next = resolvedValues[key];
-                var prev = prevResolvedValues[key];
+            for (const key in allKeys) {
+                const next = resolvedValues[key];
+                const prev = prevResolvedValues[key];
                 // If we've already handled this we can just skip ahead
                 if (encounteredKeys.hasOwnProperty(key))
                     continue;
@@ -232,7 +229,7 @@ function createAnimationState(visualElement) {
              *
              */
             if (typeState.isActive) {
-                encounteredKeys = __assign(__assign({}, encounteredKeys), resolvedValues);
+                encounteredKeys = Object.assign(Object.assign({}, encounteredKeys), resolvedValues);
             }
             if (isInitialRender && visualElement.blockInitialAnimation) {
                 shouldAnimateType = false;
@@ -243,38 +240,28 @@ function createAnimationState(visualElement) {
              * by removed values?
              */
             if (shouldAnimateType && !isInherited) {
-                animations.push.apply(animations, __spreadArray([], __read(definitionList.map(function (animation) { return ({
+                animations.push(...definitionList.map((animation) => ({
                     animation: animation,
-                    options: __assign({ type: type }, options),
-                }); })), false));
+                    options: Object.assign({ type }, options),
+                })));
             }
-        };
-        /**
-         * Iterate through all animation types in reverse priority order. For each, we want to
-         * detect which values it's handling and whether or not they've changed (and therefore
-         * need to be animated). If any values have been removed, we want to detect those in
-         * lower priority props and flag for animation.
-         */
-        for (var i = 0; i < numAnimationTypes; i++) {
-            _loop_1(i);
         }
-        allAnimatedKeys = __assign({}, encounteredKeys);
         /**
          * If there are some removed value that haven't been dealt with,
          * we need to create a new animation that falls back either to the value
          * defined in the style prop, or the last read value.
          */
         if (removedKeys.size) {
-            var fallbackAnimation_1 = {};
-            removedKeys.forEach(function (key) {
-                var fallbackTarget = visualElement.getBaseTarget(key);
+            const fallbackAnimation = {};
+            removedKeys.forEach((key) => {
+                const fallbackTarget = visualElement.getBaseTarget(key);
                 if (fallbackTarget !== undefined) {
-                    fallbackAnimation_1[key] = fallbackTarget;
+                    fallbackAnimation[key] = fallbackTarget;
                 }
             });
-            animations.push({ animation: fallbackAnimation_1 });
+            animations.push({ animation: fallbackAnimation });
         }
-        var shouldAnimate = Boolean(animations.length);
+        let shouldAnimate = Boolean(animations.length);
         if (isInitialRender &&
             props.initial === false &&
             !visualElement.manuallyAnimateOnMount) {
@@ -292,20 +279,19 @@ function createAnimationState(visualElement) {
         if (state[type].isActive === isActive)
             return Promise.resolve();
         // Propagate active change to children
-        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
+        (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
         state[type].isActive = isActive;
-        var animations = animateChanges(options, type);
-        for (var key in state) {
+        const animations = animateChanges(options, type);
+        for (const key in state) {
             state[key].protectedKeys = {};
         }
         return animations;
     }
     return {
-        isAnimated: isAnimated,
-        animateChanges: animateChanges,
-        setActive: setActive,
-        setAnimateFunction: setAnimateFunction,
-        getState: function () { return state; },
+        animateChanges,
+        setActive,
+        setAnimateFunction,
+        getState: () => state,
     };
 }
 function checkVariantsDidChange(prev, next) {
@@ -317,26 +303,24 @@ function checkVariantsDidChange(prev, next) {
     }
     return false;
 }
-function createTypeState(isActive) {
-    if (isActive === void 0) { isActive = false; }
+function createTypeState(isActive = false) {
     return {
-        isActive: isActive,
+        isActive,
         protectedKeys: {},
         needsAnimating: {},
         prevResolvedValues: {},
     };
 }
 function createState() {
-    var _a;
-    return _a = {},
-        _a[AnimationType.Animate] = createTypeState(true),
-        _a[AnimationType.InView] = createTypeState(),
-        _a[AnimationType.Hover] = createTypeState(),
-        _a[AnimationType.Tap] = createTypeState(),
-        _a[AnimationType.Drag] = createTypeState(),
-        _a[AnimationType.Focus] = createTypeState(),
-        _a[AnimationType.Exit] = createTypeState(),
-        _a;
+    return {
+        [AnimationType.Animate]: createTypeState(true),
+        [AnimationType.InView]: createTypeState(),
+        [AnimationType.Hover]: createTypeState(),
+        [AnimationType.Tap]: createTypeState(),
+        [AnimationType.Drag]: createTypeState(),
+        [AnimationType.Focus]: createTypeState(),
+        [AnimationType.Exit]: createTypeState(),
+    };
 }
 
 export { checkVariantsDidChange, createAnimationState, variantPriorityOrder };