framer-motion 5.0.1 → 5.2.0

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -14,6 +14,8 @@ import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
 import { addDomEvent } from '../../events/use-dom-event.mjs';
 import { mix } from 'popmotion';
+import { percent } from 'style-value-types';
+import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 
 var elementDragControls = new WeakMap();
 /**
@@ -79,7 +81,19 @@ var VisualElementDragControls = /** @class */ (function () {
              * Record gesture origin
              */
             eachAxis(function (axis) {
-                _this.originPoint[axis] = _this.getAxisMotionValue(axis).get();
+                var _a, _b;
+                var current = _this.getAxisMotionValue(axis).get() || 0;
+                /**
+                 * If the MotionValue is a percentage value convert to px
+                 */
+                if (percent.test(current)) {
+                    var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                    if (measuredAxis) {
+                        var length_1 = calcLength(measuredAxis);
+                        current = length_1 * (parseFloat(current) / 100);
+                    }
+                }
+                _this.originPoint[axis] = current;
             });
             // Fire onDragStart event
             onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info);

package/dist/es/motion/utils/valid-prop.mjs

@@ -34,6 +34,7 @@ var validMotionProps = new Set([
     "dragListener",
     "dragConstraints",
     "dragDirectionLock",
+    "dragSnapToOrigin",
     "_dragX",
     "_dragY",
     "dragElastic",

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

@@ -78,13 +78,15 @@ function removeNonTranslationalTransform(visualElement) {
 }
 var positionalValues = {
     // Dimensions
-    width: function (_a) {
+    width: function (_a, _b) {
         var x = _a.x;
-        return x.max - x.min;
+        var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d;
+        return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight);
     },
-    height: function (_a) {
+    height: function (_a, _b) {
         var y = _a.y;
-        return y.max - y.min;
+        var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d;
+        return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom);
     },
     top: function (_bbox, _a) {
         var top = _a.top;
@@ -112,8 +114,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var originBbox = visualElement.measureViewportBox();
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
-    var display = elementComputedStyle.display, top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform;
-    var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform };
+    var display = elementComputedStyle.display;
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
@@ -126,7 +127,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         var value = visualElement.getValue(key);
-        setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
+        setAndResetVelocity(value, positionalValues[key](originBbox, elementComputedStyle));
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;
@@ -247,4 +248,4 @@ function unitConversion(visualElement, target, origin, transitionEnd) {
         : { target: target, transitionEnd: transitionEnd };
 }
 
-export { BoundingBoxDimension, unitConversion };
+export { BoundingBoxDimension, positionalValues, unitConversion };

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

@@ -26,17 +26,11 @@ var svgMotionConfig = {
                     height: 0,
                 };
             }
-            if (isPath(instance)) {
-                renderState.totalPathLength = instance.getTotalLength();
-            }
             buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
             // TODO: Replace with direct assignment
             renderSVG(instance, renderState);
         },
     }),
 };
-function isPath(element) {
-    return element.tagName === "path";
-}
 
 export { svgMotionConfig };

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

@@ -13,7 +13,7 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
     buildHTMLStyles(state, latest, options, transformTemplate);
     state.attrs = state.style;
     state.style = {};
-    var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;
+    var attrs = state.attrs, style = state.style, dimensions = state.dimensions;
     /**
      * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
      * and copy it into style.
@@ -33,9 +33,9 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
         attrs.x = attrX;
     if (attrY !== undefined)
         attrs.y = attrY;
-    // Build SVG path if one has been measured
-    if (totalPathLength !== undefined && pathLength !== undefined) {
-        buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
     }
 }
 

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

@@ -21,6 +21,7 @@ var camelCaseAttributes = new Set([
     "tableValues",
     "viewBox",
     "gradientTransform",
+    "pathLength",
 ]);
 
 export { camelCaseAttributes };

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

@@ -1,9 +1,5 @@
 import { px } from 'style-value-types';
 
-// Convert a progress 0-1 to a pixels value based on the provided length
-var progressToPixels = function (progress, length) {
-    return px.transform(progress * length);
-};
 var dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -19,18 +15,20 @@ var camelKeys = {
  *
  * This function is mutative to reduce per-frame GC.
  */
-function buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {
+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; }
+    // 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;
     // Build the dash offset
-    attrs[keys.offset] = progressToPixels(-offset, totalLength);
+    attrs[keys.offset] = px.transform(-offset);
     // Build the dash array
-    var pathLength = progressToPixels(length, totalLength);
-    var pathSpacing = progressToPixels(spacing, totalLength);
+    var pathLength = px.transform(length);
+    var pathSpacing = px.transform(spacing);
     attrs[keys.array] = pathLength + " " + pathSpacing;
 }
 

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

@@ -8,10 +8,10 @@ import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.mjs'
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
     AnimationType.Drag,
-    AnimationType.Focus,
     AnimationType.Exit,
 ];
 var reversePriorityOrder = __spreadArray([], __read(variantPriorityOrder), false).reverse();

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

@@ -30,12 +30,28 @@ function resolveVariantFromProps(props, definition, custom, currentValues, curre
     var _a;
     if (currentValues === void 0) { currentValues = {}; }
     if (currentVelocity === void 0) { currentVelocity = {}; }
+    /**
+     * If the variant definition is a function, resolve.
+     */
+    if (typeof definition === "function") {
+        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    }
+    /**
+     * If the variant definition is a variant label, or
+     * the function returned a variant label, resolve.
+     */
     if (typeof definition === "string") {
         definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
     }
-    return typeof definition === "function"
-        ? definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)
-        : definition;
+    /**
+     * At this point we've resolved both functions and variant labels,
+     * but the resolved variant label might itself have been a function.
+     * If so, resolve. This can only have returned a valid target object.
+     */
+    if (typeof definition === "function") {
+        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    }
+    return definition;
 }
 function resolveVariant(visualElement, definition, custom) {
     var props = visualElement.getProps();

package/dist/framer-motion.cjs.js

@@ -230,12 +230,28 @@ function resolveVariantFromProps(props, definition, custom, currentValues, curre
     var _a;
     if (currentValues === void 0) { currentValues = {}; }
     if (currentVelocity === void 0) { currentVelocity = {}; }
+    /**
+     * If the variant definition is a function, resolve.
+     */
+    if (typeof definition === "function") {
+        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    }
+    /**
+     * If the variant definition is a variant label, or
+     * the function returned a variant label, resolve.
+     */
     if (typeof definition === "string") {
         definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
     }
-    return typeof definition === "function"
-        ? definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity)
-        : definition;
+    /**
+     * At this point we've resolved both functions and variant labels,
+     * but the resolved variant label might itself have been a function.
+     * If so, resolve. This can only have returned a valid target object.
+     */
+    if (typeof definition === "function") {
+        definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    }
+    return definition;
 }
 function resolveVariant(visualElement, definition, custom) {
     var props = visualElement.getProps();
@@ -3332,6 +3348,7 @@ var validMotionProps = new Set([
     "dragListener",
     "dragConstraints",
     "dragDirectionLock",
+    "dragSnapToOrigin",
     "_dragX",
     "_dragY",
     "dragElastic",
@@ -3421,10 +3438,6 @@ function calcSVGTransformOrigin(dimensions, originX, originY) {
     return pxOriginX + " " + pxOriginY;
 }
 
-// Convert a progress 0-1 to a pixels value based on the provided length
-var progressToPixels = function (progress, length) {
-    return styleValueTypes.px.transform(progress * length);
-};
 var dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -3440,18 +3453,20 @@ var camelKeys = {
  *
  * This function is mutative to reduce per-frame GC.
  */
-function buildSVGPath(attrs, totalLength, length, spacing, offset, useDashCase) {
+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; }
+    // 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;
     // Build the dash offset
-    attrs[keys.offset] = progressToPixels(-offset, totalLength);
+    attrs[keys.offset] = styleValueTypes.px.transform(-offset);
     // Build the dash array
-    var pathLength = progressToPixels(length, totalLength);
-    var pathSpacing = progressToPixels(spacing, totalLength);
+    var pathLength = styleValueTypes.px.transform(length);
+    var pathSpacing = styleValueTypes.px.transform(spacing);
     attrs[keys.array] = pathLength + " " + pathSpacing;
 }
 
@@ -3465,7 +3480,7 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
     buildHTMLStyles(state, latest, options, transformTemplate);
     state.attrs = state.style;
     state.style = {};
-    var attrs = state.attrs, style = state.style, dimensions = state.dimensions, totalPathLength = state.totalPathLength;
+    var attrs = state.attrs, style = state.style, dimensions = state.dimensions;
     /**
      * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
      * and copy it into style.
@@ -3485,9 +3500,9 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
         attrs.x = attrX;
     if (attrY !== undefined)
         attrs.y = attrY;
-    // Build SVG path if one has been measured
-    if (totalPathLength !== undefined && pathLength !== undefined) {
-        buildSVGPath(attrs, totalPathLength, pathLength, pathSpacing, pathOffset, false);
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
     }
 }
 
@@ -3566,6 +3581,7 @@ var camelCaseAttributes = new Set([
     "tableValues",
     "viewBox",
     "gradientTransform",
+    "pathLength",
 ]);
 
 function renderSVG(element, renderState) {
@@ -3677,18 +3693,12 @@ var svgMotionConfig = {
                     height: 0,
                 };
             }
-            if (isPath(instance)) {
-                renderState.totalPathLength = instance.getTotalLength();
-            }
             buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate);
             // TODO: Replace with direct assignment
             renderSVG(instance, renderState);
         },
     }),
 };
-function isPath(element) {
-    return element.tagName === "path";
-}
 
 var htmlMotionConfig = {
     useVisualState: makeUseVisualState({
@@ -4397,10 +4407,10 @@ function shouldBlockAnimation(_a, key) {
 
 var variantPriorityOrder = [
     AnimationType.Animate,
+    AnimationType.Focus,
     AnimationType.Hover,
     AnimationType.Tap,
     AnimationType.Drag,
-    AnimationType.Focus,
     AnimationType.Exit,
 ];
 var reversePriorityOrder = tslib.__spreadArray([], tslib.__read(variantPriorityOrder), false).reverse();
@@ -5129,7 +5139,19 @@ var VisualElementDragControls = /** @class */ (function () {
              * Record gesture origin
              */
             eachAxis(function (axis) {
-                _this.originPoint[axis] = _this.getAxisMotionValue(axis).get();
+                var _a, _b;
+                var current = _this.getAxisMotionValue(axis).get() || 0;
+                /**
+                 * If the MotionValue is a percentage value convert to px
+                 */
+                if (styleValueTypes.percent.test(current)) {
+                    var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                    if (measuredAxis) {
+                        var length_1 = calcLength(measuredAxis);
+                        current = length_1 * (parseFloat(current) / 100);
+                    }
+                }
+                _this.originPoint[axis] = current;
             });
             // Fire onDragStart event
             onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info);
@@ -6173,13 +6195,15 @@ function removeNonTranslationalTransform(visualElement) {
 }
 var positionalValues = {
     // Dimensions
-    width: function (_a) {
+    width: function (_a, _b) {
         var x = _a.x;
-        return x.max - x.min;
+        var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d;
+        return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight);
     },
-    height: function (_a) {
+    height: function (_a, _b) {
         var y = _a.y;
-        return y.max - y.min;
+        var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d;
+        return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom);
     },
     top: function (_bbox, _a) {
         var top = _a.top;
@@ -6207,8 +6231,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
     var originBbox = visualElement.measureViewportBox();
     var element = visualElement.getInstance();
     var elementComputedStyle = getComputedStyle(element);
-    var display = elementComputedStyle.display, top = elementComputedStyle.top, left = elementComputedStyle.left, bottom = elementComputedStyle.bottom, right = elementComputedStyle.right, transform = elementComputedStyle.transform;
-    var originComputedStyle = { top: top, left: left, bottom: bottom, right: right, transform: transform };
+    var display = elementComputedStyle.display;
     // If the element is currently set to display: "none", make it visible before
     // measuring the target bounding box
     if (display === "none") {
@@ -6221,7 +6244,7 @@ var convertChangedValueTypes = function (target, visualElement, changedKeys) {
         // Restore styles to their **calculated computed style**, not their actual
         // originally set style. This allows us to animate between equivalent pixel units.
         var value = visualElement.getValue(key);
-        setAndResetVelocity(value, positionalValues[key](originBbox, originComputedStyle));
+        setAndResetVelocity(value, positionalValues[key](originBbox, elementComputedStyle));
         target[key] = positionalValues[key](targetBbox, elementComputedStyle);
     });
     return target;