framer-motion 7.0.3 → 7.1.2

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

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { invariant } from 'hey-listen';
 import { PanSession } from '../PanSession.mjs';
 import { getGlobalLock } from './utils/lock.mjs';
@@ -17,13 +16,13 @@ import { mix } from 'popmotion';
 import { percent } from 'style-value-types';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 
-var elementDragControls = new WeakMap();
+const elementDragControls = new WeakMap();
 /**
  *
  */
 // let latestPointerEvent: AnyPointerEvent
-var VisualElementDragControls = /** @class */ (function () {
-    function VisualElementDragControls(visualElement) {
+class VisualElementDragControls {
+    constructor(visualElement) {
         // This is a reference to the global drag gesture lock, ensuring only one component
         // can "capture" the drag of one or both axes.
         // TODO: Look into moving this into pansession?
@@ -42,116 +41,112 @@ var VisualElementDragControls = /** @class */ (function () {
         this.elastic = createBox();
         this.visualElement = visualElement;
     }
-    VisualElementDragControls.prototype.start = function (originEvent, _a) {
-        var _this = this;
-        var _b = _a === void 0 ? {} : _a, _c = _b.snapToCursor, snapToCursor = _c === void 0 ? false : _c;
+    start(originEvent, { snapToCursor = false } = {}) {
         /**
          * Don't start dragging if this component is exiting
          */
         if (this.visualElement.isPresent === false)
             return;
-        var onSessionStart = function (event) {
+        const onSessionStart = (event) => {
             // Stop any animations on both axis values immediately. This allows the user to throw and catch
             // the component.
-            _this.stopAnimation();
+            this.stopAnimation();
             if (snapToCursor) {
-                _this.snapToCursor(extractEventInfo(event, "page").point);
+                this.snapToCursor(extractEventInfo(event, "page").point);
             }
         };
-        var onStart = function (event, info) {
+        const onStart = (event, info) => {
             var _a;
             // Attempt to grab the global drag gesture lock - maybe make this part of PanSession
-            var _b = _this.getProps(), drag = _b.drag, dragPropagation = _b.dragPropagation, onDragStart = _b.onDragStart;
+            const { drag, dragPropagation, onDragStart } = this.getProps();
             if (drag && !dragPropagation) {
-                if (_this.openGlobalLock)
-                    _this.openGlobalLock();
-                _this.openGlobalLock = getGlobalLock(drag);
+                if (this.openGlobalLock)
+                    this.openGlobalLock();
+                this.openGlobalLock = getGlobalLock(drag);
                 // If we don 't have the lock, don't start dragging
-                if (!_this.openGlobalLock)
+                if (!this.openGlobalLock)
                     return;
             }
-            _this.isDragging = true;
-            _this.currentDirection = null;
-            _this.resolveConstraints();
-            if (_this.visualElement.projection) {
-                _this.visualElement.projection.isAnimationBlocked = true;
-                _this.visualElement.projection.target = undefined;
+            this.isDragging = true;
+            this.currentDirection = null;
+            this.resolveConstraints();
+            if (this.visualElement.projection) {
+                this.visualElement.projection.isAnimationBlocked = true;
+                this.visualElement.projection.target = undefined;
             }
             /**
              * Record gesture origin
              */
-            eachAxis(function (axis) {
+            eachAxis((axis) => {
                 var _a, _b;
-                var current = _this.getAxisMotionValue(axis).get() || 0;
+                let 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];
+                    const 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);
+                        const length = calcLength(measuredAxis);
+                        current = length * (parseFloat(current) / 100);
                     }
                 }
-                _this.originPoint[axis] = current;
+                this.originPoint[axis] = current;
             });
             // Fire onDragStart event
             onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info);
-            (_a = _this.visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Drag, true);
+            (_a = this.visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Drag, true);
         };
-        var onMove = function (event, info) {
+        const onMove = (event, info) => {
             // latestPointerEvent = event
-            var _a = _this.getProps(), dragPropagation = _a.dragPropagation, dragDirectionLock = _a.dragDirectionLock, onDirectionLock = _a.onDirectionLock, onDrag = _a.onDrag;
+            const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
             // If we didn't successfully receive the gesture lock, early return.
-            if (!dragPropagation && !_this.openGlobalLock)
+            if (!dragPropagation && !this.openGlobalLock)
                 return;
-            var offset = info.offset;
+            const { offset } = info;
             // Attempt to detect drag direction if directionLock is true
-            if (dragDirectionLock && _this.currentDirection === null) {
-                _this.currentDirection = getCurrentDirection(offset);
+            if (dragDirectionLock && this.currentDirection === null) {
+                this.currentDirection = getCurrentDirection(offset);
                 // If we've successfully set a direction, notify listener
-                if (_this.currentDirection !== null) {
-                    onDirectionLock === null || onDirectionLock === void 0 ? void 0 : onDirectionLock(_this.currentDirection);
+                if (this.currentDirection !== null) {
+                    onDirectionLock === null || onDirectionLock === void 0 ? void 0 : onDirectionLock(this.currentDirection);
                 }
                 return;
             }
             // Update each point with the latest position
-            _this.updateAxis("x", info.point, offset);
-            _this.updateAxis("y", info.point, offset);
+            this.updateAxis("x", info.point, offset);
+            this.updateAxis("y", info.point, offset);
             /**
              * Ideally we would leave the renderer to fire naturally at the end of
              * this frame but if the element is about to change layout as the result
              * of a re-render we want to ensure the browser can read the latest
              * bounding box to ensure the pointer and element don't fall out of sync.
              */
-            _this.visualElement.syncRender();
+            this.visualElement.syncRender();
             /**
              * This must fire after the syncRender call as it might trigger a state
              * change which itself might trigger a layout update.
              */
             onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, info);
         };
-        var onSessionEnd = function (event, info) {
-            return _this.stop(event, info);
-        };
+        const onSessionEnd = (event, info) => this.stop(event, info);
         this.panSession = new PanSession(originEvent, {
-            onSessionStart: onSessionStart,
-            onStart: onStart,
-            onMove: onMove,
-            onSessionEnd: onSessionEnd,
+            onSessionStart,
+            onStart,
+            onMove,
+            onSessionEnd,
         }, { transformPagePoint: this.visualElement.getTransformPagePoint() });
-    };
-    VisualElementDragControls.prototype.stop = function (event, info) {
-        var isDragging = this.isDragging;
+    }
+    stop(event, info) {
+        const isDragging = this.isDragging;
         this.cancel();
         if (!isDragging)
             return;
-        var velocity = info.velocity;
+        const { velocity } = info;
         this.startAnimation(velocity);
-        var onDragEnd = this.getProps().onDragEnd;
+        const { onDragEnd } = this.getProps();
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, info);
-    };
-    VisualElementDragControls.prototype.cancel = function () {
+    }
+    cancel() {
         var _a, _b;
         this.isDragging = false;
         if (this.visualElement.projection) {
@@ -159,31 +154,30 @@ var VisualElementDragControls = /** @class */ (function () {
         }
         (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end();
         this.panSession = undefined;
-        var dragPropagation = this.getProps().dragPropagation;
+        const { dragPropagation } = this.getProps();
         if (!dragPropagation && this.openGlobalLock) {
             this.openGlobalLock();
             this.openGlobalLock = null;
         }
         (_b = this.visualElement.animationState) === null || _b === void 0 ? void 0 : _b.setActive(AnimationType.Drag, false);
-    };
-    VisualElementDragControls.prototype.updateAxis = function (axis, _point, offset) {
-        var drag = this.getProps().drag;
+    }
+    updateAxis(axis, _point, offset) {
+        const { drag } = this.getProps();
         // If we're not dragging this axis, do an early return.
         if (!offset || !shouldDrag(axis, drag, this.currentDirection))
             return;
-        var axisValue = this.getAxisMotionValue(axis);
-        var next = this.originPoint[axis] + offset[axis];
+        const axisValue = this.getAxisMotionValue(axis);
+        let next = this.originPoint[axis] + offset[axis];
         // Apply constraints
         if (this.constraints && this.constraints[axis]) {
             next = applyConstraints(next, this.constraints[axis], this.elastic[axis]);
         }
         axisValue.set(next);
-    };
-    VisualElementDragControls.prototype.resolveConstraints = function () {
-        var _this = this;
-        var _a = this.getProps(), dragConstraints = _a.dragConstraints, dragElastic = _a.dragElastic;
-        var layout = (this.visualElement.projection || {}).layout;
-        var prevConstraints = this.constraints;
+    }
+    resolveConstraints() {
+        const { dragConstraints, dragElastic } = this.getProps();
+        const { layout } = this.visualElement.projection || {};
+        const prevConstraints = this.constraints;
         if (dragConstraints && isRefObject(dragConstraints)) {
             if (!this.constraints) {
                 this.constraints = this.resolveRefConstraints();
@@ -206,48 +200,47 @@ var VisualElementDragControls = /** @class */ (function () {
             layout &&
             this.constraints &&
             !this.hasMutatedConstraints) {
-            eachAxis(function (axis) {
-                if (_this.getAxisMotionValue(axis)) {
-                    _this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], _this.constraints[axis]);
+            eachAxis((axis) => {
+                if (this.getAxisMotionValue(axis)) {
+                    this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], this.constraints[axis]);
                 }
             });
         }
-    };
-    VisualElementDragControls.prototype.resolveRefConstraints = function () {
-        var _a = this.getProps(), constraints = _a.dragConstraints, onMeasureDragConstraints = _a.onMeasureDragConstraints;
+    }
+    resolveRefConstraints() {
+        const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
         if (!constraints || !isRefObject(constraints))
             return false;
-        var constraintsElement = constraints.current;
+        const constraintsElement = constraints.current;
         invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.");
-        var projection = this.visualElement.projection;
+        const { projection } = this.visualElement;
         // TODO
         if (!projection || !projection.layout)
             return false;
-        var constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
-        var measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
+        const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
+        let measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
         /**
          * If there's an onMeasureDragConstraints listener we call it and
          * if different constraints are returned, set constraints to that
          */
         if (onMeasureDragConstraints) {
-            var userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
+            const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints));
             this.hasMutatedConstraints = !!userConstraints;
             if (userConstraints) {
                 measuredConstraints = convertBoundingBoxToBox(userConstraints);
             }
         }
         return measuredConstraints;
-    };
-    VisualElementDragControls.prototype.startAnimation = function (velocity) {
-        var _this = this;
-        var _a = this.getProps(), drag = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition, dragSnapToOrigin = _a.dragSnapToOrigin, onDragTransitionEnd = _a.onDragTransitionEnd;
-        var constraints = this.constraints || {};
-        var momentumAnimations = eachAxis(function (axis) {
+    }
+    startAnimation(velocity) {
+        const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps();
+        const constraints = this.constraints || {};
+        const momentumAnimations = eachAxis((axis) => {
             var _a;
-            if (!shouldDrag(axis, drag, _this.currentDirection)) {
+            if (!shouldDrag(axis, drag, this.currentDirection)) {
                 return;
             }
-            var transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {};
+            let transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {};
             if (dragSnapToOrigin)
                 transition = { min: 0, max: 0 };
             /**
@@ -256,64 +249,62 @@ var VisualElementDragControls = /** @class */ (function () {
              * We could do something here where we affect the `bounceStiffness` and `bounceDamping`
              * using the value of `dragElastic`.
              */
-            var bounceStiffness = dragElastic ? 200 : 1000000;
-            var bounceDamping = dragElastic ? 40 : 10000000;
-            var inertia = __assign(__assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness, bounceDamping: bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+            const bounceStiffness = dragElastic ? 200 : 1000000;
+            const bounceDamping = dragElastic ? 40 : 10000000;
+            const inertia = Object.assign(Object.assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness,
+                bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
             // If we're not animating on an externally-provided `MotionValue` we can use the
             // component's animation controls which will handle interactions with whileHover (etc),
             // otherwise we just have to animate the `MotionValue` itself.
-            return _this.startAxisValueAnimation(axis, inertia);
+            return this.startAxisValueAnimation(axis, inertia);
         });
         // Run all animations and then resolve the new drag constraints.
         return Promise.all(momentumAnimations).then(onDragTransitionEnd);
-    };
-    VisualElementDragControls.prototype.startAxisValueAnimation = function (axis, transition) {
-        var axisValue = this.getAxisMotionValue(axis);
+    }
+    startAxisValueAnimation(axis, transition) {
+        const axisValue = this.getAxisMotionValue(axis);
         return startAnimation(axis, axisValue, 0, transition);
-    };
-    VisualElementDragControls.prototype.stopAnimation = function () {
-        var _this = this;
-        eachAxis(function (axis) { return _this.getAxisMotionValue(axis).stop(); });
-    };
+    }
+    stopAnimation() {
+        eachAxis((axis) => this.getAxisMotionValue(axis).stop());
+    }
     /**
      * Drag works differently depending on which props are provided.
      *
      * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
      * - Otherwise, we apply the delta to the x/y motion values.
      */
-    VisualElementDragControls.prototype.getAxisMotionValue = function (axis) {
+    getAxisMotionValue(axis) {
         var _a, _b;
-        var dragKey = "_drag" + axis.toUpperCase();
-        var externalMotionValue = this.visualElement.getProps()[dragKey];
+        const dragKey = "_drag" + axis.toUpperCase();
+        const externalMotionValue = this.visualElement.getProps()[dragKey];
         return externalMotionValue
             ? externalMotionValue
             : this.visualElement.getValue(axis, (_b = (_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) !== null && _b !== void 0 ? _b : 0);
-    };
-    VisualElementDragControls.prototype.snapToCursor = function (point) {
-        var _this = this;
-        eachAxis(function (axis) {
-            var drag = _this.getProps().drag;
+    }
+    snapToCursor(point) {
+        eachAxis((axis) => {
+            const { drag } = this.getProps();
             // If we're not dragging this axis, do an early return.
-            if (!shouldDrag(axis, drag, _this.currentDirection))
+            if (!shouldDrag(axis, drag, this.currentDirection))
                 return;
-            var projection = _this.visualElement.projection;
-            var axisValue = _this.getAxisMotionValue(axis);
+            const { projection } = this.visualElement;
+            const axisValue = this.getAxisMotionValue(axis);
             if (projection && projection.layout) {
-                var _a = projection.layout.actual[axis], min = _a.min, max = _a.max;
+                const { min, max } = projection.layout.actual[axis];
                 axisValue.set(point[axis] - mix(min, max, 0.5));
             }
         });
-    };
+    }
     /**
      * When the viewport resizes we want to check if the measured constraints
      * have changed and, if so, reposition the element within those new constraints
      * relative to where it was before the resize.
      */
-    VisualElementDragControls.prototype.scalePositionWithinConstraints = function () {
-        var _this = this;
+    scalePositionWithinConstraints() {
         var _a;
-        var _b = this.getProps(), drag = _b.drag, dragConstraints = _b.dragConstraints;
-        var projection = this.visualElement.projection;
+        const { drag, dragConstraints } = this.getProps();
+        const { projection } = this.visualElement;
         if (!isRefObject(dragConstraints) || !projection || !this.constraints)
             return;
         /**
@@ -325,18 +316,18 @@ var VisualElementDragControls = /** @class */ (function () {
          * Record the relative position of the dragged element relative to the
          * constraints box and save as a progress value.
          */
-        var boxProgress = { x: 0, y: 0 };
-        eachAxis(function (axis) {
-            var axisValue = _this.getAxisMotionValue(axis);
+        const boxProgress = { x: 0, y: 0 };
+        eachAxis((axis) => {
+            const axisValue = this.getAxisMotionValue(axis);
             if (axisValue) {
-                var latest = axisValue.get();
-                boxProgress[axis] = calcOrigin({ min: latest, max: latest }, _this.constraints[axis]);
+                const latest = axisValue.get();
+                boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
             }
         });
         /**
          * Update the layout of this element and resolve the latest drag constraints
          */
-        var transformTemplate = this.visualElement.getProps().transformTemplate;
+        const { transformTemplate } = this.visualElement.getProps();
         this.visualElement.getInstance().style.transform = transformTemplate
             ? transformTemplate({}, "")
             : "none";
@@ -347,37 +338,36 @@ var VisualElementDragControls = /** @class */ (function () {
          * For each axis, calculate the current progress of the layout axis
          * within the new constraints.
          */
-        eachAxis(function (axis) {
+        eachAxis((axis) => {
             if (!shouldDrag(axis, drag, null))
                 return;
             /**
              * Calculate a new transform based on the previous box progress
              */
-            var axisValue = _this.getAxisMotionValue(axis);
-            var _a = _this.constraints[axis], min = _a.min, max = _a.max;
+            const axisValue = this.getAxisMotionValue(axis);
+            const { min, max } = this.constraints[axis];
             axisValue.set(mix(min, max, boxProgress[axis]));
         });
-    };
-    VisualElementDragControls.prototype.addListeners = function () {
-        var _this = this;
+    }
+    addListeners() {
         var _a;
         elementDragControls.set(this.visualElement, this);
-        var element = this.visualElement.getInstance();
+        const element = this.visualElement.getInstance();
         /**
          * Attach a pointerdown event listener on this DOM element to initiate drag tracking.
          */
-        var stopPointerListener = addPointerEvent(element, "pointerdown", function (event) {
-            var _a = _this.getProps(), drag = _a.drag, _b = _a.dragListener, dragListener = _b === void 0 ? true : _b;
-            drag && dragListener && _this.start(event);
+        const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
+            const { drag, dragListener = true } = this.getProps();
+            drag && dragListener && this.start(event);
         });
-        var measureDragConstraints = function () {
-            var dragConstraints = _this.getProps().dragConstraints;
+        const measureDragConstraints = () => {
+            const { dragConstraints } = this.getProps();
             if (isRefObject(dragConstraints)) {
-                _this.constraints = _this.resolveRefConstraints();
+                this.constraints = this.resolveRefConstraints();
             }
         };
-        var projection = this.visualElement.projection;
-        var stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
+        const { projection } = this.visualElement;
+        const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints);
         if (projection && !projection.layout) {
             (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll();
             projection.updateLayout();
@@ -387,40 +377,41 @@ var VisualElementDragControls = /** @class */ (function () {
          * Attach a window resize listener to scale the draggable target within its defined
          * constraints as the window resizes.
          */
-        var stopResizeListener = addDomEvent(window, "resize", function () {
-            return _this.scalePositionWithinConstraints();
-        });
+        const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints());
         /**
          * If the element's layout changes, calculate the delta and apply that to
          * the drag gesture's origin point.
          */
-        var stopLayoutUpdateListener = projection.addEventListener("didUpdate", (function (_a) {
-            var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged;
-            if (_this.isDragging && hasLayoutChanged) {
-                eachAxis(function (axis) {
-                    var motionValue = _this.getAxisMotionValue(axis);
+        const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => {
+            if (this.isDragging && hasLayoutChanged) {
+                eachAxis((axis) => {
+                    const motionValue = this.getAxisMotionValue(axis);
                     if (!motionValue)
                         return;
-                    _this.originPoint[axis] += delta[axis].translate;
+                    this.originPoint[axis] += delta[axis].translate;
                     motionValue.set(motionValue.get() + delta[axis].translate);
                 });
-                _this.visualElement.syncRender();
+                this.visualElement.syncRender();
             }
         }));
-        return function () {
+        return () => {
             stopResizeListener();
             stopPointerListener();
             stopMeasureLayoutListener();
             stopLayoutUpdateListener === null || stopLayoutUpdateListener === void 0 ? void 0 : stopLayoutUpdateListener();
         };
-    };
-    VisualElementDragControls.prototype.getProps = function () {
-        var props = this.visualElement.getProps();
-        var _a = props.drag, drag = _a === void 0 ? false : _a, _b = props.dragDirectionLock, dragDirectionLock = _b === void 0 ? false : _b, _c = props.dragPropagation, dragPropagation = _c === void 0 ? false : _c, _d = props.dragConstraints, dragConstraints = _d === void 0 ? false : _d, _e = props.dragElastic, dragElastic = _e === void 0 ? defaultElastic : _e, _f = props.dragMomentum, dragMomentum = _f === void 0 ? true : _f;
-        return __assign(__assign({}, props), { drag: drag, dragDirectionLock: dragDirectionLock, dragPropagation: dragPropagation, dragConstraints: dragConstraints, dragElastic: dragElastic, dragMomentum: dragMomentum });
-    };
-    return VisualElementDragControls;
-}());
+    }
+    getProps() {
+        const props = this.visualElement.getProps();
+        const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
+        return Object.assign(Object.assign({}, props), { drag,
+            dragDirectionLock,
+            dragPropagation,
+            dragConstraints,
+            dragElastic,
+            dragMomentum });
+    }
+}
 function shouldDrag(direction, drag, currentDirection) {
     return ((drag === true || drag === direction) &&
         (currentDirection === null || currentDirection === direction));
@@ -432,9 +423,8 @@ function shouldDrag(direction, drag, currentDirection) {
  * @param offset - The x/y offset from origin.
  * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction.
  */
-function getCurrentDirection(offset, lockThreshold) {
-    if (lockThreshold === void 0) { lockThreshold = 10; }
-    var direction = null;
+function getCurrentDirection(offset, lockThreshold = 10) {
+    let direction = null;
     if (Math.abs(offset.y) > lockThreshold) {
         direction = "y";
     }

package/dist/es/gestures/drag/use-drag-controls.mjs

@@ -20,8 +20,8 @@ import { useConstant } from '../../utils/use-constant.mjs';
  *
  * @public
  */
-var DragControls = /** @class */ (function () {
-    function DragControls() {
+class DragControls {
+    constructor() {
         this.componentControls = new Set();
     }
     /**
@@ -29,11 +29,10 @@ var DragControls = /** @class */ (function () {
      *
      * @internal
      */
-    DragControls.prototype.subscribe = function (controls) {
-        var _this = this;
+    subscribe(controls) {
         this.componentControls.add(controls);
-        return function () { return _this.componentControls.delete(controls); };
-    };
+        return () => this.componentControls.delete(controls);
+    }
     /**
      * Start a drag gesture on every `motion` component that has this set of drag controls
      * passed into it via the `dragControls` prop.
@@ -49,14 +48,13 @@ var DragControls = /** @class */ (function () {
      *
      * @public
      */
-    DragControls.prototype.start = function (event, options) {
-        this.componentControls.forEach(function (controls) {
+    start(event, options) {
+        this.componentControls.forEach((controls) => {
             controls.start(event.nativeEvent || event, options);
         });
-    };
-    return DragControls;
-}());
-var createDragControls = function () { return new DragControls(); };
+    }
+}
+const createDragControls = () => new DragControls();
 /**
  * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
  * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we

package/dist/es/gestures/drag/use-drag.mjs

@@ -8,13 +8,13 @@ import { useConstant } from '../../utils/use-constant.mjs';
  * @internal
  */
 function useDrag(props) {
-    var groupDragControls = props.dragControls, visualElement = props.visualElement;
-    var dragControls = useConstant(function () { return new VisualElementDragControls(visualElement); });
+    const { dragControls: groupDragControls, visualElement } = props;
+    const dragControls = useConstant(() => new VisualElementDragControls(visualElement));
     // If we've been provided a DragControls for manual control over the drag gesture,
     // subscribe this component to it on mount.
-    useEffect(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls, groupDragControls]);
+    useEffect(() => groupDragControls && groupDragControls.subscribe(dragControls), [dragControls, groupDragControls]);
     // Apply the event listeners to the element
-    useEffect(function () { return dragControls.addListeners(); }, [dragControls]);
+    useEffect(() => dragControls.addListeners(), [dragControls]);
 }
 
 export { useDrag };