framer-motion 5.3.2 → 5.4.0-beta.2

package/dist/framer-motion.cjs.js

@@ -20,14 +20,12 @@ function _interopNamespace(e) {
                 var d = Object.getOwnPropertyDescriptor(e, k);
                 Object.defineProperty(n, k, d.get ? d : {
                     enumerable: true,
-                    get: function () {
-                        return e[k];
-                    }
+                    get: function () { return e[k]; }
                 });
             }
         });
     }
-    n['default'] = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
@@ -438,7 +436,7 @@ var MotionValue = /** @class */ (function () {
             if (_this.lastUpdated !== timestamp) {
                 _this.timeDelta = delta;
                 _this.lastUpdated = timestamp;
-                sync__default['default'].postRender(_this.scheduleVelocityCheck);
+                sync__default["default"].postRender(_this.scheduleVelocityCheck);
             }
             // Update update subscribers
             if (_this.prev !== _this.current) {
@@ -461,7 +459,7 @@ var MotionValue = /** @class */ (function () {
          *
          * @internal
          */
-        this.scheduleVelocityCheck = function () { return sync__default['default'].postRender(_this.velocityCheck); };
+        this.scheduleVelocityCheck = function () { return sync__default["default"].postRender(_this.velocityCheck); };
         /**
          * Updates `prev` with `current` if the value hasn't been updated this frame.
          * This ensures velocity calculations return `0`.
@@ -713,7 +711,7 @@ var easingDefinitionToFunction = function (definition) {
     }
     else if (typeof definition === "string") {
         // Else lookup from table
-        heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        heyListen.invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
         return easingLookup[definition];
     }
     return definition;
@@ -1025,7 +1023,7 @@ function getAnimation(key, value, target, transition, onComplete) {
         target = getZeroUnit(origin);
     }
     var isOriginAnimatable = isAnimatable(key, origin);
-    heyListen.warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
+    heyListen.warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property."));
     function start() {
         var options = {
             from: origin,
@@ -1161,7 +1159,7 @@ function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnl
      * Mix border radius
      */
     for (var i = 0; i < numBorders; i++) {
-        var borderLabel = "border" + borders[i] + "Radius";
+        var borderLabel = "border".concat(borders[i], "Radius");
         var followRadius = getRadius(follow, borderLabel);
         var leadRadius = getRadius(lead, borderLabel);
         if (followRadius === undefined && leadRadius === undefined)
@@ -1618,17 +1616,17 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     var xTranslate = delta.x.translate / treeScale.x;
     var yTranslate = delta.y.translate / treeScale.y;
-    var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+    var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
     if (latestTransform) {
         var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
         if (rotate)
-            transform += "rotate(" + rotate + "deg) ";
+            transform += "rotate(".concat(rotate, "deg) ");
         if (rotateX)
-            transform += "rotateX(" + rotateX + "deg) ";
+            transform += "rotateX(".concat(rotateX, "deg) ");
         if (rotateY)
-            transform += "rotateY(" + rotateY + "deg) ";
+            transform += "rotateY(".concat(rotateY, "deg) ");
     }
-    transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+    transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
     return transform === identityProjection ? "none" : transform;
 }
 
@@ -2059,7 +2057,7 @@ function createProjectionNode(_a) {
             this.sharedNodes.forEach(removeLeadSnapshots);
         };
         ProjectionNode.prototype.scheduleUpdateProjection = function () {
-            sync__default['default'].preRender(this.updateProjection, false, true);
+            sync__default["default"].preRender(this.updateProjection, false, true);
         };
         ProjectionNode.prototype.scheduleCheckAfterUnmount = function () {
             var _this = this;
@@ -2068,7 +2066,7 @@ function createProjectionNode(_a) {
              * we manually call didUpdate to give a chance to the siblings to animate.
              * Otherwise, cleanup all snapshots to prevents future nodes from reusing them.
              */
-            sync__default['default'].postRender(function () {
+            sync__default["default"].postRender(function () {
                 if (_this.isLayoutDirty) {
                     _this.root.didUpdate();
                 }
@@ -2468,7 +2466,7 @@ function createProjectionNode(_a) {
              * where the target is the same as when the animation started, so we can
              * calculate the relative positions correctly for instant transitions.
              */
-            this.pendingAnimation = sync__default['default'].update(function () {
+            this.pendingAnimation = sync__default["default"].update(function () {
                 globalProjectionState.hasAnimatedSinceResize = true;
                 _this.currentAnimation = animate(0, animationTarget, tslib.__assign(tslib.__assign({}, options), { onUpdate: function (latest) {
                         var _a;
@@ -2659,7 +2657,7 @@ function createProjectionNode(_a) {
                 styles.transform = transformTemplate(valuesToRender, styles.transform);
             }
             var _g = this.projectionDelta, x = _g.x, y = _g.y;
-            styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+            styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
             if (lead.animationValues) {
                 /**
                  * If the lead component is animating, assign this either the entering/leaving
@@ -2865,7 +2863,7 @@ function mountNodeEarly(node, id) {
         }
     }
     var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-    var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+    var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
     if (element)
         node.mount(element, true);
 }
@@ -2948,7 +2946,7 @@ var VisualElementHandler = /** @class */ (function (_super) {
         return this.props.children;
     };
     return VisualElementHandler;
-}(React__default['default'].Component));
+}(React__default["default"].Component));
 
 /**
  * Create a `motion` component.
@@ -3014,7 +3012,7 @@ function createMotionComponent(_a) {
          */
         return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: tslib.__assign(tslib.__assign({}, config), props) },
             features,
-            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic))));
+            React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
     }
     return React.forwardRef(MotionComponent);
 }
@@ -3046,6 +3044,9 @@ function createMotionProxy(createConfig) {
         if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
         return createMotionComponent(createConfig(Component, customMotionComponentConfig));
     }
+    if (typeof Proxy === "undefined") {
+        return custom;
+    }
     /**
      * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
      * Rather than generating them anew every render.
@@ -3162,7 +3163,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
     var numTransformKeys = transformKeys.length;
     for (var i = 0; i < numTransformKeys; i++) {
         var key = transformKeys[i];
-        transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+        transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
         if (key === "z")
             transformHasZ = true;
     }
@@ -3188,7 +3189,7 @@ function buildTransform(_a, _b, transformIsDefault, transformTemplate) {
  */
 function buildTransformOrigin(_a) {
     var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
-    return originX + " " + originY + " " + originZ;
+    return "".concat(originX, " ").concat(originY, " ").concat(originZ);
 }
 
 /**
@@ -3322,7 +3323,7 @@ function useHTMLProps(props, visualState, isStatic) {
         style.touchAction =
             props.drag === true
                 ? "none"
-                : "pan-" + (props.drag === "x" ? "y" : "x");
+                : "pan-".concat(props.drag === "x" ? "y" : "x");
     }
     htmlProps.style = style;
     return htmlProps;
@@ -3437,7 +3438,9 @@ function filterProps(props, isDom, forwardMotionProps) {
     for (var key in props) {
         if (shouldForward(key) ||
             (forwardMotionProps === true && isValidMotionProp(key)) ||
-            (!isDom && !isValidMotionProp(key))) {
+            (!isDom && !isValidMotionProp(key)) ||
+            // If trying to use native HTML drag events, forward drag listeners
+            (props["draggable"] && key.startsWith("onDrag"))) {
             filteredProps[key] = props[key];
         }
     }
@@ -3456,7 +3459,7 @@ function calcOrigin$1(origin, offset, size) {
 function calcSVGTransformOrigin(dimensions, originX, originY) {
     var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
     var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return pxOriginX + " " + pxOriginY;
+    return "".concat(pxOriginX, " ").concat(pxOriginY);
 }
 
 var dashKeys = {
@@ -3488,7 +3491,7 @@ function buildSVGPath(attrs, length, spacing, offset, useDashCase) {
     // Build the dash array
     var pathLength = styleValueTypes.px.transform(length);
     var pathSpacing = styleValueTypes.px.transform(spacing);
-    attrs[keys.array] = pathLength + " " + pathSpacing;
+    attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
 }
 
 /**
@@ -5012,7 +5015,7 @@ var PanSession = /** @class */ (function () {
                 return;
             }
             // Throttle mouse move event to once per frame
-            sync__default['default'].update(_this.updatePoint, true);
+            sync__default["default"].update(_this.updatePoint, true);
         };
         this.handlePointerUp = function (event, info) {
             _this.end();
@@ -5917,7 +5920,7 @@ var visualElement = function (_a) {
         function bindToMotionValue(key, value) {
             var removeOnChange = value.onChange(function (latestValue) {
                 latestValues[key] = latestValue;
-                props.onUpdate && sync__default['default'].update(update, false, true);
+                props.onUpdate && sync__default["default"].update(update, false, true);
             });
             var removeOnRenderRequest = value.onRenderRequest(element.scheduleRender);
             valueSubscriptions.set(key, function () {
@@ -6176,7 +6179,7 @@ var visualElement = function (_a) {
              * Schedule a render on the next animation frame.
              */
             scheduleRender: function () {
-                sync__default['default'].render(render, false, true);
+                sync__default["default"].render(render, false, true);
             }, 
             /**
              * Synchronously fire render. It's prefered that we batch renders but
@@ -6258,7 +6261,7 @@ function parseCSSVariable(current) {
 var maxDepth = 4;
 function getVariableValue(current, element, depth) {
     if (depth === void 0) { depth = 1; }
-    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+    heyListen.invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
     var _a = tslib.__read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
     // No CSS variable detected
     if (!token)
@@ -6285,7 +6288,7 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
     var _b;
     var target = tslib.__rest(_a, []);
     var element = visualElement.getInstance();
-    if (!(element instanceof HTMLElement))
+    if (!(element instanceof Element))
         return { target: target, transitionEnd: transitionEnd };
     // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
     // only if they change but I think this reads clearer and this isn't a performance-critical path.
@@ -6732,7 +6735,7 @@ var correctBorderRadius = {
          */
         var x = pixelsToPercent(latest, node.target.x);
         var y = pixelsToPercent(latest, node.target.y);
-        return x + "% " + y + "%";
+        return "".concat(x, "% ").concat(y, "%");
     },
 };
 
@@ -6850,7 +6853,7 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
                  * it's in charge of the exit animation and therefore should
                  * be in charge of the safe to remove. Otherwise we call it here.
                  */
-                sync__default['default'].postRender(function () {
+                sync__default["default"].postRender(function () {
                     var _a;
                     if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) {
                         _this.safeToRemove();
@@ -6888,11 +6891,11 @@ var MeasureLayoutWithContext = /** @class */ (function (_super) {
         return null;
     };
     return MeasureLayoutWithContext;
-}(React__default['default'].Component));
+}(React__default["default"].Component));
 function MeasureLayout(props) {
     var _a = tslib.__read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
     var layoutGroup = React.useContext(LayoutGroupContext);
-    return (React__default['default'].createElement(MeasureLayoutWithContext, tslib.__assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+    return (React__default["default"].createElement(MeasureLayoutWithContext, tslib.__assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
 }
 var defaultScaleCorrectors = {
     borderRadius: tslib.__assign(tslib.__assign({}, correctBorderRadius), { applyTo: [
@@ -6990,7 +6993,7 @@ function useForceUpdate() {
      * Defer this to the end of the next animation frame in case there are multiple
      * synchronous calls.
      */
-    var deferredForceRender = React.useCallback(function () { return sync__default['default'].postRender(forceRender); }, [forceRender]);
+    var deferredForceRender = React.useCallback(function () { return sync__default["default"].postRender(forceRender); }, [forceRender]);
     return [deferredForceRender, forcedRenderCount];
 }
 
@@ -7064,7 +7067,7 @@ function updateChildLookup(children, allChildren) {
         var key = getChildKey(child);
         if (process.env.NODE_ENV !== "production" && seenChildren) {
             if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             }
             seenChildren.add(key);
         }
@@ -7265,7 +7268,7 @@ var LayoutGroup = function (_a) {
 var id = 0;
 var AnimateSharedLayout = function (_a) {
     var children = _a.children;
-    return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+    return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
 };
 
 /**
@@ -7524,7 +7527,7 @@ function useCombineMotionValues(values, combineValues) {
      * Subscribe to all motion values found within the template. Whenever any of them change,
      * schedule an update.
      */
-    useMultiOnChange(values, function () { return sync__default['default'].update(updateValue, false, true); });
+    useMultiOnChange(values, function () { return sync__default["default"].update(updateValue, false, true); });
     return value;
 }
 
@@ -7565,7 +7568,7 @@ function ReorderItem(_a, externalRef) {
     };
     var zIndex = useTransform([point.x, point.y], function (_a) {
         var _b = tslib.__read(_a, 2), latestX = _b[0], latestY = _b[1];
-        return latestX || latestY ? 1 : 0;
+        return latestX || latestY ? 1 : "unset";
     });
     var layout = React.useRef(null);
     heyListen.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
@@ -8146,8 +8149,8 @@ function useInstantTransition() {
         /**
          * Unblock after two animation frames, otherwise this will unblock too soon.
          */
-        sync__default['default'].postRender(function () {
-            return sync__default['default'].postRender(function () { return (instantAnimationState.current = false); });
+        sync__default["default"].postRender(function () {
+            return sync__default["default"].postRender(function () { return (instantAnimationState.current = false); });
         });
     }, [forcedRenderCount]);
     return function (callback) {

package/dist/framer-motion.dev.js

@@ -2,7 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Motion = {}, global.React));
-}(this, (function (exports, React) { 'use strict';
+})(this, (function (exports, React) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,14 +15,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -1944,7 +1942,7 @@
         }
         else if (typeof definition === "string") {
             // Else lookup from table
-            invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+            invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'"));
             return easingLookup[definition];
         }
         return definition;
@@ -2256,7 +2254,7 @@
             target = getZeroUnit(origin);
         }
         var isOriginAnimatable = isAnimatable(key, origin);
-        warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
+        warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property."));
         function start() {
             var options = {
                 from: origin,
@@ -2392,7 +2390,7 @@
          * Mix border radius
          */
         for (var i = 0; i < numBorders; i++) {
-            var borderLabel = "border" + borders[i] + "Radius";
+            var borderLabel = "border".concat(borders[i], "Radius");
             var followRadius = getRadius(follow, borderLabel);
             var leadRadius = getRadius(lead, borderLabel);
             if (followRadius === undefined && leadRadius === undefined)
@@ -2849,17 +2847,17 @@
          */
         var xTranslate = delta.x.translate / treeScale.x;
         var yTranslate = delta.y.translate / treeScale.y;
-        var transform = "translate3d(" + xTranslate + "px, " + yTranslate + "px, 0) ";
+        var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) ");
         if (latestTransform) {
             var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY;
             if (rotate)
-                transform += "rotate(" + rotate + "deg) ";
+                transform += "rotate(".concat(rotate, "deg) ");
             if (rotateX)
-                transform += "rotateX(" + rotateX + "deg) ";
+                transform += "rotateX(".concat(rotateX, "deg) ");
             if (rotateY)
-                transform += "rotateY(" + rotateY + "deg) ";
+                transform += "rotateY(".concat(rotateY, "deg) ");
         }
-        transform += "scale(" + delta.x.scale + ", " + delta.y.scale + ")";
+        transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")");
         return transform === identityProjection ? "none" : transform;
     }
 
@@ -3890,7 +3888,7 @@
                     styles.transform = transformTemplate(valuesToRender, styles.transform);
                 }
                 var _g = this.projectionDelta, x = _g.x, y = _g.y;
-                styles.transformOrigin = x.origin * 100 + "% " + y.origin * 100 + "% 0";
+                styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0");
                 if (lead.animationValues) {
                     /**
                      * If the lead component is animating, assign this either the entering/leaving
@@ -4096,7 +4094,7 @@
             }
         }
         var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document;
-        var element = searchElement.querySelector("[data-projection-id=\"" + id + "\"]");
+        var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]"));
         if (element)
             node.mount(element, true);
     }
@@ -4179,7 +4177,7 @@
             return this.props.children;
         };
         return VisualElementHandler;
-    }(React__default['default'].Component));
+    }(React__default["default"].Component));
 
     /**
      * Create a `motion` component.
@@ -4245,7 +4243,7 @@
              */
             return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: __assign(__assign({}, config), props) },
                 features,
-                React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic))));
+                React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
         }
         return React.forwardRef(MotionComponent);
     }
@@ -4277,6 +4275,9 @@
             if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; }
             return createMotionComponent(createConfig(Component, customMotionComponentConfig));
         }
+        if (typeof Proxy === "undefined") {
+            return custom;
+        }
         /**
          * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.
          * Rather than generating them anew every render.
@@ -4393,7 +4394,7 @@
         var numTransformKeys = transformKeys.length;
         for (var i = 0; i < numTransformKeys; i++) {
             var key = transformKeys[i];
-            transformString += (translateAlias[key] || key) + "(" + transform[key] + ") ";
+            transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") ");
             if (key === "z")
                 transformHasZ = true;
         }
@@ -4419,7 +4420,7 @@
      */
     function buildTransformOrigin(_a) {
         var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d;
-        return originX + " " + originY + " " + originZ;
+        return "".concat(originX, " ").concat(originY, " ").concat(originZ);
     }
 
     /**
@@ -4553,7 +4554,7 @@
             style.touchAction =
                 props.drag === true
                     ? "none"
-                    : "pan-" + (props.drag === "x" ? "y" : "x");
+                    : "pan-".concat(props.drag === "x" ? "y" : "x");
         }
         htmlProps.style = style;
         return htmlProps;
@@ -4668,7 +4669,9 @@
         for (var key in props) {
             if (shouldForward(key) ||
                 (forwardMotionProps === true && isValidMotionProp(key)) ||
-                (!isDom && !isValidMotionProp(key))) {
+                (!isDom && !isValidMotionProp(key)) ||
+                // If trying to use native HTML drag events, forward drag listeners
+                (props["draggable"] && key.startsWith("onDrag"))) {
                 filteredProps[key] = props[key];
             }
         }
@@ -4687,7 +4690,7 @@
     function calcSVGTransformOrigin(dimensions, originX, originY) {
         var pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
         var pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-        return pxOriginX + " " + pxOriginY;
+        return "".concat(pxOriginX, " ").concat(pxOriginY);
     }
 
     var dashKeys = {
@@ -4719,7 +4722,7 @@
         // Build the dash array
         var pathLength = px.transform(length);
         var pathSpacing = px.transform(spacing);
-        attrs[keys.array] = pathLength + " " + pathSpacing;
+        attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing);
     }
 
     /**
@@ -7489,7 +7492,7 @@
     var maxDepth = 4;
     function getVariableValue(current, element, depth) {
         if (depth === void 0) { depth = 1; }
-        invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"" + current + "\". This may indicate a circular fallback dependency.");
+        invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency."));
         var _a = __read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1];
         // No CSS variable detected
         if (!token)
@@ -7516,7 +7519,7 @@
         var _b;
         var target = __rest(_a, []);
         var element = visualElement.getInstance();
-        if (!(element instanceof HTMLElement))
+        if (!(element instanceof Element))
             return { target: target, transitionEnd: transitionEnd };
         // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
         // only if they change but I think this reads clearer and this isn't a performance-critical path.
@@ -7963,7 +7966,7 @@
              */
             var x = pixelsToPercent(latest, node.target.x);
             var y = pixelsToPercent(latest, node.target.y);
-            return x + "% " + y + "%";
+            return "".concat(x, "% ").concat(y, "%");
         },
     };
 
@@ -8119,11 +8122,11 @@
             return null;
         };
         return MeasureLayoutWithContext;
-    }(React__default['default'].Component));
+    }(React__default["default"].Component));
     function MeasureLayout(props) {
         var _a = __read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1];
         var layoutGroup = React.useContext(LayoutGroupContext);
-        return (React__default['default'].createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+        return (React__default["default"].createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
     }
     var defaultScaleCorrectors = {
         borderRadius: __assign(__assign({}, correctBorderRadius), { applyTo: [
@@ -8295,7 +8298,7 @@
             var key = getChildKey(child);
             if (seenChildren) {
                 if (seenChildren.has(key)) {
-                    console.warn("Children of AnimatePresence require unique keys. \"" + key + "\" is a duplicate.");
+                    console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
                 }
                 seenChildren.add(key);
             }
@@ -8495,7 +8498,7 @@
     var id = 0;
     var AnimateSharedLayout = function (_a) {
         var children = _a.children;
-        return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-" + id++; }) }, children));
+        return (React__namespace.createElement(LayoutGroup, { id: useConstant(function () { return "asl-".concat(id++); }) }, children));
     };
 
     /**
@@ -8795,7 +8798,7 @@
         };
         var zIndex = useTransform([point.x, point.y], function (_a) {
             var _b = __read(_a, 2), latestX = _b[0], latestY = _b[1];
-            return latestX || latestY ? 1 : 0;
+            return latestX || latestY ? 1 : "unset";
         });
         var layout = React.useRef(null);
         invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
@@ -9547,4 +9550,4 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));