react-ui-animate 1.2.1 → 1.4.1

package/dist/index.js

@@ -3,6 +3,38 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reMotion = require('@raidipesh78/re-motion');
 var React = require('react');
 
+/**
+ * interpolate function maps input range to output range
+ * @param value - number | TransitionValue
+ * @param inputRange - Array<number>
+ * @param outputRange - Array<string | number>
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+function interpolate(value, inputRange, outputRange, extrapolateConfig) {
+    if (typeof value === "object" && reMotion.isSubscriber(value)) {
+        return reMotion.interpolateTransitionValue(value, inputRange, outputRange, extrapolateConfig);
+    }
+    else if (typeof value === "number") {
+        return reMotion.interpolateNumbers(value, inputRange, outputRange, extrapolateConfig);
+    }
+    else {
+        throw new Error("Error! " + typeof value + " cannot be interpolated");
+    }
+}
+/**
+ * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
+ * sorthand function to interpolate input range [0, 1]
+ * @param value - number | TransitionValue
+ * @param minOutput - number | string
+ * @param maxOutput - number | string
+ * @param extrapolateConfig - "clamp" | "identity" | "extend"
+ * @returns - number | TransitionValue
+ */
+function bInterpolate(value, minOutput, maxOutput, extrapolateConfig) {
+    return interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
+}
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -17,6 +49,20 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -29,104 +75,39 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-function __spreadArrays() {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-}
-
-/**
- * bin(booleanValue)
- * returns 1 if booleanValue == true and 0 if booleanValue == false
- */
-function bin(bool) {
-    return bool ? 1 : 0;
-}
-/**
- * mix(progress, a, b)
- * linear interpolation between a and b
- */
-function mix(perc, val1, val2) {
-    return val1 * (1 - perc) + val2 * perc;
-}
-/**
- * clamp(value, min, max)
- * clamps value for min and max bounds
- */
-function clamp(value, lowerbound, upperbound) {
-    return Math.min(Math.max(value, lowerbound), upperbound);
-}
-function rubber2(distanceFromEdge, constant) {
-    return Math.pow(distanceFromEdge, constant * 5);
-}
-function rubber(distanceFromEdge, dimension, constant) {
-    if (dimension === 0 || Math.abs(dimension) === Infinity)
-        return rubber2(distanceFromEdge, constant);
-    return ((distanceFromEdge * dimension * constant) /
-        (dimension + constant * distanceFromEdge));
-}
-/**
- * rubberClamp(value, min, max, constant?)
- * constant is optional : default 0.15
- * clamps the value for min and max value and
- * extends beyond min and max values with constant
- * factor to create elastic rubber band effect
- */
-function rubberClamp(value, lowerbound, upperbound, constant) {
-    if (constant === void 0) { constant = 0.15; }
-    if (constant === 0)
-        return clamp(value, lowerbound, upperbound);
-    if (value < lowerbound) {
-        return (-rubber(lowerbound - value, upperbound - lowerbound, constant) +
-            lowerbound);
-    }
-    if (value > upperbound) {
-        return (+rubber(value - upperbound, upperbound - lowerbound, constant) +
-            upperbound);
-    }
-    return value;
-}
-/**
- * snapTo(value, velocity, snapPoints[])
- * Calculates the final snapPoint according to given current value,
- * velocity and snapPoints array
- */
-function snapTo(value, velocity, snapPoints) {
-    var finalValue = value + velocity * 0.2;
-    var getDiff = function (point) { return Math.abs(point - finalValue); };
-    var deltas = snapPoints.map(getDiff);
-    var minDelta = Math.min.apply(Math, deltas);
-    return snapPoints.reduce(function (acc, point) {
-        if (getDiff(point) === minDelta) {
-            return point;
-        }
-        else {
-            return acc;
+function __values(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
         }
-    });
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 }
-/**
- * move(array, moveIndex, toIndex)
- * move array item from moveIndex to toIndex without array modification
- */
-function move(array, moveIndex, toIndex) {
-    var item = array[moveIndex];
-    var length = array.length;
-    var diff = moveIndex - toIndex;
-    if (diff > 0) {
-        return __spreadArrays(array.slice(0, toIndex), [
-            item
-        ], array.slice(toIndex, moveIndex), array.slice(moveIndex + 1, length));
+
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-    else if (diff < 0) {
-        var targetIndex = toIndex + 1;
-        return __spreadArrays(array.slice(0, moveIndex), array.slice(moveIndex + 1, targetIndex), [
-            item
-        ], array.slice(targetIndex, length));
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
     }
-    return array;
+    return ar;
+}
+
+function __spread() {
+    for (var ar = [], i = 0; i < arguments.length; i++)
+        ar = ar.concat(__read(arguments[i]));
+    return ar;
 }
 
 var getInitialConfig = function (animationType) {
@@ -153,28 +134,25 @@ var getValue = function (value) {
     if (typeof value === "number" || typeof value === "string") {
         return value;
     }
-    else if (typeof value === "boolean") {
-        return bin(value);
-    }
     else {
-        throw new Error("Invalid Value! Animated value only accepts string, boolean or number.");
+        throw new Error("Invalid Value! Animated value only accepts string or number.");
     }
 };
 /**
  * useAnimatedValue for animated transitions
  */
-var useAnimatedValue = function (initialValue, config) {
+function useAnimatedValue(initialValue, config) {
     var _a;
     var _isInitial = React.useRef(true);
     var _initialValue = getValue(initialValue);
     var animationType = (_a = config === null || config === void 0 ? void 0 : config.animationType) !== null && _a !== void 0 ? _a : "ease"; // Defines default animation
     var onAnimationEnd = config === null || config === void 0 ? void 0 : config.onAnimationEnd;
     var listener = config === null || config === void 0 ? void 0 : config.listener;
-    var _b = reMotion.useTransition(_initialValue, __assign(__assign(__assign({}, getInitialConfig(animationType)), config), { onRest: function (result) {
+    var _b = __read(reMotion.useTransition(_initialValue, __assign(__assign(__assign({}, getInitialConfig(animationType)), config), { onRest: function (result) {
             onAnimationEnd && onAnimationEnd(result);
         }, onChange: function (value) {
             listener && listener(value);
-        } })), animation = _b[0], setAnimation = _b[1];
+        } })), 2), animation = _b[0], setAnimation = _b[1];
     // doesn't fire on initial render
     React.useEffect(function () {
         if (!_isInitial.current) {
@@ -209,7 +187,7 @@ var useAnimatedValue = function (initialValue, config) {
             throw new Error("You cannot access any other property from animation node.");
         },
     });
-};
+}
 
 /**
  * useMountedValue handles mounting and unmounting of a component
@@ -217,12 +195,12 @@ var useAnimatedValue = function (initialValue, config) {
  * @param config - useTransitionConfig
  * @returns mountedValueFunction with a callback with argument ( animationNode, mounted )
  */
-var useMountedValue = function (state, config) {
+function useMountedValue(state, config) {
     var _a, _b, _c, _d, _e, _f;
-    var _g = React.useState(true), initial = _g[0], setInitial = _g[1];
-    var _h = React.useState(state), mounted = _h[0], setMounted = _h[1];
+    var _g = __read(React.useState(true), 2), initial = _g[0], setInitial = _g[1];
+    var _h = __read(React.useState(state), 2), mounted = _h[0], setMounted = _h[1];
     var _j = React.useRef(config).current, from = _j.from, enter = _j.enter, exit = _j.exit, _config = _j.config;
-    var _k = reMotion.useTransition(from, _config), animation = _k[0], setAnimation = _k[1];
+    var _k = __read(reMotion.useTransition(from, _config), 2), animation = _k[0], setAnimation = _k[1];
     var enterDuration = (_b = (_a = config.config) === null || _a === void 0 ? void 0 : _a.enterDuration) !== null && _b !== void 0 ? _b : (_c = config.config) === null || _c === void 0 ? void 0 : _c.duration;
     var exitDuration = (_e = (_d = config.config) === null || _d === void 0 ? void 0 : _d.exitDuration) !== null && _e !== void 0 ? _e : (_f = config.config) === null || _f === void 0 ? void 0 : _f.exitDuration;
     React.useEffect(function () {
@@ -253,38 +231,6 @@ var useMountedValue = function (state, config) {
     return function (callback) {
         return callback({ value: animation }, mounted);
     };
-};
-
-/**
- * interpolate function maps input range to output range
- * @param value - number | TransitionValue
- * @param inputRange - Array<number>
- * @param outputRange - Array<string | number>
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-function interpolate(value, inputRange, outputRange, extrapolateConfig) {
-    if (typeof value === "object" && reMotion.isSubscriber(value)) {
-        return reMotion.interpolateTransitionValue(value, inputRange, outputRange, extrapolateConfig);
-    }
-    else if (typeof value === "number") {
-        return reMotion.interpolateNumbers(value, inputRange, outputRange, extrapolateConfig);
-    }
-    else {
-        throw new Error("Error! " + typeof value + " cannot be interpolated");
-    }
-}
-/**
- * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
- * sorthand function to interpolate input range [0, 1]
- * @param value - number | TransitionValue
- * @param minOutput - number | string
- * @param maxOutput - number | string
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-function bInterpolate(value, minOutput, maxOutput, extrapolateConfig) {
-    return interpolate(value, [0, 1], [minOutput, maxOutput], extrapolateConfig);
 }
 
 /**
@@ -318,7 +264,7 @@ var ScrollableBlock = function (props) {
     React.useEffect(function () {
         var _scrollableBlock = scrollableBlockRef.current;
         var observer = new IntersectionObserver(function (_a) {
-            var entry = _a[0];
+            var _b = __read(_a, 1), entry = _b[0];
             var isIntersecting = entry.isIntersecting;
             if (isIntersecting) {
                 animation.value = 1;
@@ -341,144 +287,658 @@ var ScrollableBlock = function (props) {
         };
     }, []);
     return React.createElement("div", { ref: scrollableBlockRef }, children && children(animation));
+};
+/**
+ * MountedBlock handles mounting and unmounting of a component
+ * @props - state: boolean, config: InnerUseMountedValueConfig
+ * @children -  (animation: { value: TransitionValue }) => React.ReactNode
+ */
+var MountedBlock = function (_a) {
+    var state = _a.state, children = _a.children, config = _a.config;
+    var open = useMountedValue(state, { from: 0, enter: 1, exit: 0, config: config });
+    return React.createElement(React.Fragment, null, open(function (animation, mounted) { return mounted && children(animation); }));
 };
 
 /**
  * Attach single document / window event / HTMLElement
  */
-function attachEvent(domTarget, event, callback, capture) {
+function attachEvent(domTargets, event, callback, capture) {
     if (capture === void 0) { capture = false; }
-    domTarget.addEventListener(event, callback, capture);
+    domTargets.forEach(function (target) {
+        target.addEventListener(event, callback, capture);
+    });
     return function () {
-        domTarget.removeEventListener(event, callback, capture);
+        domTargets.forEach(function (target) {
+            target.removeEventListener(event, callback, capture);
+        });
     };
 }
 /**
  * Attach multiple document / window event / HTMLElement
  */
-function attachEvents(domTarget, events) {
-    var subscribers = [];
+function attachEvents(domTargets, events) {
+    var subscribers = new Map();
     events.forEach(function (_a) {
-        var event = _a[0], callback = _a[1], _b = _a[2], capture = _b === void 0 ? false : _b;
-        subscribers.push(attachEvent(domTarget, event, callback, capture));
+        var _b = __read(_a, 3), event = _b[0], callback = _b[1], _c = _b[2], capture = _c === void 0 ? false : _c;
+        subscribers.set(event, attachEvent(domTargets, event, callback, capture));
     });
-    return function () {
-        subscribers.forEach(function (subscriber) {
-            subscriber();
-        });
-    };
-}
-
-function useOutsideClick(elementRef, callback, deps) {
-    var callbackRef = React.useRef();
-    if (!callbackRef.current) {
-        callbackRef.current = callback;
-    }
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var handleOutsideClick = function (e) {
-            var _a;
-            if (!((_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-                callbackRef.current && callbackRef.current(e);
-            }
-        };
-        var subscribe = attachEvents(document, [["click", handleOutsideClick]]);
-        return function () { return subscribe && subscribe(); };
-    }, []);
-}
-
-function useMeasure(callback, deps) {
-    var ref = React.useRef(null);
-    var elementRefs = React.useRef([]);
-    var callbackRef = React.useRef(callback);
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var _refElement = ref.current || document.documentElement;
-        var _refElementsMultiple = elementRefs.current;
-        var resizeObserver = new ResizeObserver(function (_a) {
-            var entry = _a[0];
-            var _b = entry.target.getBoundingClientRect(), left = _b.left, top = _b.top, width = _b.width, height = _b.height;
-            var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
-            if (callbackRef) {
-                if (_refElement === document.documentElement) {
-                    return; // no-op for document
+    return function (eventKeys) {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), eventKey = _d[0], subscriber = _d[1];
+                if (!eventKeys) {
+                    subscriber();
+                    return;
                 }
-                else {
-                    callbackRef.current({
-                        left: left + pageXOffset,
-                        top: top + pageYOffset,
-                        width: width,
-                        height: height,
-                        vLeft: left,
-                        vTop: top,
-                    });
+                if (eventKeys.indexOf(eventKey) !== -1) {
+                    subscriber();
                 }
             }
-        });
-        var resizeObserverMultiple = new ResizeObserver(function (entries) {
-            var left = [];
-            var top = [];
-            var width = [];
-            var height = [];
-            var vLeft = [];
-            var vTop = [];
-            entries.forEach(function (entry) {
-                var _a = entry.target.getBoundingClientRect(), _left = _a.left, _top = _a.top, _width = _a.width, _height = _a.height;
-                var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
-                var _pageLeft = _left + pageXOffset;
-                var _pageTop = _top + pageYOffset;
-                left.push(_pageLeft);
-                top.push(_pageTop);
-                width.push(_width);
-                height.push(_height);
-                vLeft.push(_left);
-                vTop.push(_top);
-            });
-            if (callbackRef) {
-                callbackRef.current({
-                    left: left,
-                    top: top,
-                    width: width,
-                    height: height,
-                    vLeft: vLeft,
-                    vTop: vTop,
-                });
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
             }
-        });
-        if (_refElement) {
-            if (_refElement === document.documentElement &&
-                _refElementsMultiple.length > 0) {
-                _refElementsMultiple.forEach(function (element) {
-                    resizeObserverMultiple.observe(element.current);
-                });
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+}
+
+/**
+ * bin(booleanValue)
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
+ */
+function bin(bool) {
+    return bool ? 1 : 0;
+}
+/**
+ * mix(progress, a, b)
+ * linear interpolation between a and b
+ */
+function mix(perc, val1, val2) {
+    return val1 * (1 - perc) + val2 * perc;
+}
+/**
+ * clamp(value, min, max)
+ * clamps value for min and max bounds
+ */
+function clamp(value, lowerbound, upperbound) {
+    return Math.min(Math.max(value, lowerbound), upperbound);
+}
+function rubber2(distanceFromEdge, constant) {
+    return Math.pow(distanceFromEdge, constant * 5);
+}
+function rubber(distanceFromEdge, dimension, constant) {
+    if (dimension === 0 || Math.abs(dimension) === Infinity)
+        return rubber2(distanceFromEdge, constant);
+    return ((distanceFromEdge * dimension * constant) /
+        (dimension + constant * distanceFromEdge));
+}
+/**
+ * rubberClamp(value, min, max, constant?)
+ * constant is optional : default 0.15
+ * clamps the value for min and max value and
+ * extends beyond min and max values with constant
+ * factor to create elastic rubber band effect
+ */
+function rubberClamp(value, lowerbound, upperbound, constant) {
+    if (constant === void 0) { constant = 0.15; }
+    if (constant === 0)
+        return clamp(value, lowerbound, upperbound);
+    if (value < lowerbound) {
+        return (-rubber(lowerbound - value, upperbound - lowerbound, constant) +
+            lowerbound);
+    }
+    if (value > upperbound) {
+        return (+rubber(value - upperbound, upperbound - lowerbound, constant) +
+            upperbound);
+    }
+    return value;
+}
+/**
+ * snapTo(value, velocity, snapPoints[])
+ * Calculates the final snapPoint according to given current value,
+ * velocity and snapPoints array
+ */
+function snapTo(value, velocity, snapPoints) {
+    var finalValue = value + velocity * 0.2;
+    var getDiff = function (point) { return Math.abs(point - finalValue); };
+    var deltas = snapPoints.map(getDiff);
+    var minDelta = Math.min.apply(Math, __spread(deltas));
+    return snapPoints.reduce(function (acc, point) {
+        if (getDiff(point) === minDelta) {
+            return point;
+        }
+        else {
+            return acc;
+        }
+    });
+}
+/**
+ * move(array, moveIndex, toIndex)
+ * move array item from moveIndex to toIndex without array modification
+ */
+function move(array, moveIndex, toIndex) {
+    var item = array[moveIndex];
+    var length = array.length;
+    var diff = moveIndex - toIndex;
+    if (diff > 0) {
+        return __spread(array.slice(0, toIndex), [
+            item
+        ], array.slice(toIndex, moveIndex), array.slice(moveIndex + 1, length));
+    }
+    else if (diff < 0) {
+        var targetIndex = toIndex + 1;
+        return __spread(array.slice(0, moveIndex), array.slice(moveIndex + 1, targetIndex), [
+            item
+        ], array.slice(targetIndex, length));
+    }
+    return array;
+}
+
+var withDefault = function (x, y) {
+    return { x: x, y: y };
+};
+
+var Gesture = /** @class */ (function () {
+    function Gesture() {
+        this.lastTimeStamp = Date.now();
+        this.isActive = false;
+        this.targetElements = []; // represents the bounded elements
+    }
+    // it must be overridden by other child classes
+    Gesture.prototype._initEvents = function () { };
+    // cancel events
+    // we only canceled down and move events because mouse up
+    // will not be triggered
+    Gesture.prototype._cancelEvents = function () {
+        if (this._subscribe) {
+            this._subscribe();
+        }
+    };
+    // re-apply new callback
+    Gesture.prototype.applyCallback = function (callback) {
+        this.callback = callback;
+    };
+    // apply gesture
+    Gesture.prototype.applyGesture = function (_a) {
+        var _this = this;
+        var targetElement = _a.targetElement, targetElements = _a.targetElements, callback = _a.callback, config = _a.config;
+        this.targetElement = targetElement;
+        this.targetElements = targetElements.map(function (element) { return element.current; });
+        this.callback = callback;
+        this.config = config;
+        // initialize events
+        this._initEvents();
+        // unbind
+        return function () { return _this._subscribe && _this._subscribe(); };
+    };
+    Gesture._VELOCITY_LIMIT = 20;
+    return Gesture;
+}());
+
+var DragGesture = /** @class */ (function (_super) {
+    __extends(DragGesture, _super);
+    function DragGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movementStart = withDefault(0, 0);
+        _this.initialMovement = withDefault(0, 0);
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.translation = withDefault(0, 0);
+        _this.offset = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    DragGesture.prototype._initEvents = function () {
+        if (this.targetElement || this.targetElements.length > 0) {
+            this._subscribe = attachEvents([window], [
+                ["mousedown", this.pointerDown.bind(this)],
+                ["mousemove", this.pointerMove.bind(this)],
+                ["mouseup", this.pointerUp.bind(this)],
+                ["touchstart", this.pointerDown.bind(this), { passive: false }],
+                ["touchmove", this.pointerMove.bind(this), { passive: false }],
+                ["touchend", this.pointerUp.bind(this)],
+            ]);
+        }
+    };
+    // @override - cancel events
+    // we only canceled down and move events because mouse up
+    // will not be triggered
+    DragGesture.prototype._cancelEvents = function () {
+        if (this._subscribe) {
+            this._subscribe(["mousedown", "mousemove", "touchstart", "touchmove"]);
+        }
+    };
+    DragGesture.prototype._handleCallback = function () {
+        var _this = this;
+        if (this.callback) {
+            this.callback({
+                args: [this.currentIndex],
+                down: this.isActive,
+                movementX: this.movement.x,
+                movementY: this.movement.y,
+                offsetX: this.translation.x,
+                offsetY: this.translation.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+                distanceX: Math.abs(this.movement.x),
+                distanceY: Math.abs(this.movement.y),
+                directionX: Math.sign(this.movement.x),
+                directionY: Math.sign(this.movement.y),
+                cancel: function () {
+                    _this._cancelEvents();
+                },
+            });
+        }
+    };
+    DragGesture.prototype.pointerDown = function (e) {
+        var _a;
+        if (e.type === "touchstart") {
+            this.movementStart = {
+                x: e.touches[0].clientX,
+                y: e.touches[0].clientY,
+            };
+        }
+        else {
+            this.movementStart = { x: e.clientX, y: e.clientY };
+        }
+        this.movement = { x: 0, y: 0 };
+        this.offset = { x: this.translation.x, y: this.translation.y };
+        this.previousMovement = { x: 0, y: 0 };
+        this.velocity = { x: 0, y: 0 };
+        // find current selected element
+        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
+        if (e.target === this.targetElement || currElem) {
+            this.isActive = true;
+            e.preventDefault();
+            // set args
+            if (currElem) {
+                this.currentIndex = this.targetElements.indexOf(currElem);
+            }
+            // if initial function is defined then call it to get initial movementX and movementY
+            // if only select to bounded draggable element
+            var initial = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.initial) && this.config.initial();
+            var initialMovementX = initial === null || initial === void 0 ? void 0 : initial.movementX;
+            var initialMovementY = initial === null || initial === void 0 ? void 0 : initial.movementY;
+            this.initialMovement = {
+                x: initialMovementX !== null && initialMovementX !== void 0 ? initialMovementX : 0,
+                y: initialMovementY !== null && initialMovementY !== void 0 ? initialMovementY : 0,
+            };
+            this.movement = {
+                x: this.initialMovement.x,
+                y: this.initialMovement.y,
+            };
+            this.previousMovement = {
+                x: this.initialMovement.x,
+                y: this.initialMovement.y,
+            };
+            this._handleCallback();
+        }
+    };
+    DragGesture.prototype.pointerMove = function (e) {
+        if (this.isActive) {
+            e.preventDefault();
+            var now = Date.now();
+            var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+            this.lastTimeStamp = now;
+            var t = deltaTime / 1000;
+            if (e.type === "touchmove") {
+                this.movement = {
+                    x: this.initialMovement.x +
+                        (e.touches[0].clientX - this.movementStart.x),
+                    y: this.initialMovement.y +
+                        (e.touches[0].clientY - this.movementStart.y),
+                };
             }
             else {
-                resizeObserver.observe(_refElement);
+                this.movement = {
+                    x: this.initialMovement.x + (e.clientX - this.movementStart.x),
+                    y: this.initialMovement.y + (e.clientY - this.movementStart.y),
+                };
+            }
+            this.translation = {
+                x: this.offset.x + this.movement.x,
+                y: this.offset.y + this.movement.y,
+            };
+            this.velocity = {
+                x: clamp((this.movement.x - this.previousMovement.x) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+                y: clamp((this.movement.y - this.previousMovement.y) / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            };
+            this.previousMovement = {
+                x: this.movement.x,
+                y: this.movement.y,
+            };
+            this._handleCallback();
+        }
+    };
+    DragGesture.prototype.pointerUp = function () {
+        if (this.isActive) {
+            this.isActive = false;
+            this._handleCallback();
+            this._initEvents();
+        }
+    };
+    return DragGesture;
+}(Gesture));
+
+var MouseMoveGesture = /** @class */ (function (_super) {
+    __extends(MouseMoveGesture, _super);
+    function MouseMoveGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    MouseMoveGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [["mousemove", this.onMouseMove.bind(this)]]);
+        }
+        else if (this.targetElements.length > 0) {
+            this._subscribe = attachEvents(this.targetElements, [
+                ["mousemove", this.onMouseMove.bind(this)],
+            ]);
+        }
+        else {
+            this._subscribe = attachEvents([window], [["mousemove", this.onMouseMove.bind(this)]]);
+        }
+    };
+    MouseMoveGesture.prototype._handleCallback = function () {
+        var _a;
+        if (this.callback) {
+            this.callback({
+                args: [this.currentIndex],
+                event: this.event,
+                isMoving: this.isActive,
+                target: (_a = this.event) === null || _a === void 0 ? void 0 : _a.target,
+                mouseX: this.movement.x,
+                mouseY: this.movement.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+                directionX: this.direction.x,
+                directionY: this.direction.y,
+            });
+        }
+    };
+    MouseMoveGesture.prototype.onMouseMove = function (e) {
+        var _this = this;
+        // find current selected element
+        var currElem = this.targetElements.find(function (elem) { return elem === e.target; });
+        // set args
+        if (currElem) {
+            this.currentIndex = this.targetElements.indexOf(currElem);
+        }
+        this.event = e;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        var x = e.clientX;
+        var y = e.clientY;
+        this.movement = { x: x, y: y };
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.direction = { x: 0, y: 0 };
+            _this.velocity = { x: 0, y: 0 };
+            _this._handleCallback();
+        }, 250); // Debounce 250 milliseconds
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = { x: this.movement.x, y: this.movement.y };
+        this._handleCallback();
+    };
+    return MouseMoveGesture;
+}(Gesture));
+
+var ScrollGesture = /** @class */ (function (_super) {
+    __extends(ScrollGesture, _super);
+    function ScrollGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    ScrollGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [["scroll", this.scrollElementListener.bind(this)]]);
+        }
+        else {
+            this._subscribe = attachEvents([window], [["scroll", this.scrollListener.bind(this)]]);
+        }
+    };
+    ScrollGesture.prototype._handleCallback = function () {
+        if (this.callback) {
+            this.callback({
+                isScrolling: this.isActive,
+                scrollX: this.movement.x,
+                scrollY: this.movement.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+                directionX: this.direction.x,
+                directionY: this.direction.y,
+            });
+        }
+    };
+    ScrollGesture.prototype.onScroll = function (_a) {
+        var _this = this;
+        var x = _a.x, y = _a.y;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        this.movement = { x: x, y: y };
+        // Clear if scrolling
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.direction = { x: 0, y: 0 };
+            // Reset Velocity
+            _this.velocity = { x: 0, y: 0 };
+            _this._handleCallback(); // Debounce 250milliseconds
+        }, 250);
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = {
+            x: this.movement.x,
+            y: this.movement.y,
+        };
+        this._handleCallback();
+    };
+    ScrollGesture.prototype.scrollListener = function () {
+        var y = window.pageYOffset, x = window.pageXOffset;
+        this.onScroll({ x: x, y: y });
+    };
+    ScrollGesture.prototype.scrollElementListener = function () {
+        var _a, _b;
+        var x = ((_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.scrollLeft) || 0;
+        var y = ((_b = this.targetElement) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0;
+        this.onScroll({ x: x, y: y });
+    };
+    return ScrollGesture;
+}(Gesture));
+
+var LINE_HEIGHT = 40;
+var PAGE_HEIGHT = 800;
+var WheelGesture = /** @class */ (function (_super) {
+    __extends(WheelGesture, _super);
+    function WheelGesture() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.movement = withDefault(0, 0);
+        _this.previousMovement = withDefault(0, 0);
+        _this.direction = withDefault(0, 0);
+        _this.velocity = withDefault(0, 0);
+        _this.delta = withDefault(0, 0);
+        // Holds offsets
+        _this.offset = withDefault(0, 0);
+        _this.translation = withDefault(0, 0);
+        return _this;
+    }
+    // @override
+    // initialize the events
+    WheelGesture.prototype._initEvents = function () {
+        if (this.targetElement) {
+            this._subscribe = attachEvents([this.targetElement], [["wheel", this.onWheel.bind(this)]]);
+        }
+    };
+    WheelGesture.prototype._handleCallback = function () {
+        if (this.callback) {
+            this.callback({
+                target: this.targetElement,
+                isWheeling: this.isActive,
+                deltaX: this.delta.x,
+                deltaY: this.delta.y,
+                directionX: this.direction.x,
+                directionY: this.direction.y,
+                movementX: this.movement.x,
+                movementY: this.movement.y,
+                offsetX: this.offset.x,
+                offsetY: this.offset.y,
+                velocityX: this.velocity.x,
+                velocityY: this.velocity.y,
+            });
+        }
+    };
+    WheelGesture.prototype.onWheel = function (event) {
+        var _this = this;
+        var deltaX = event.deltaX, deltaY = event.deltaY, deltaMode = event.deltaMode;
+        var now = Date.now();
+        var deltaTime = Math.min(now - this.lastTimeStamp, 64);
+        this.lastTimeStamp = now;
+        var t = deltaTime / 1000; // seconds
+        this.isActive = true;
+        if (this.isActiveID !== -1) {
+            this.isActive = true;
+            clearTimeout(this.isActiveID);
+        }
+        this.isActiveID = setTimeout(function () {
+            _this.isActive = false;
+            _this.translation = { x: _this.offset.x, y: _this.offset.y };
+            _this._handleCallback();
+            _this.velocity = { x: 0, y: 0 }; // Reset Velocity
+            _this.movement = { x: 0, y: 0 };
+        }, 200);
+        // normalize wheel values, especially for Firefox
+        if (deltaMode === 1) {
+            deltaX *= LINE_HEIGHT;
+            deltaY *= LINE_HEIGHT;
+        }
+        else if (deltaMode === 2) {
+            deltaX *= PAGE_HEIGHT;
+            deltaY *= PAGE_HEIGHT;
+        }
+        this.delta = { x: deltaX, y: deltaY };
+        this.movement = {
+            x: this.movement.x + deltaX,
+            y: this.movement.y + deltaY,
+        };
+        this.offset = {
+            x: this.translation.x + this.movement.x,
+            y: this.translation.y + this.movement.y,
+        };
+        var diffX = this.movement.x - this.previousMovement.x;
+        var diffY = this.movement.y - this.previousMovement.y;
+        this.direction = {
+            x: Math.sign(diffX),
+            y: Math.sign(diffY),
+        };
+        this.velocity = {
+            x: clamp(diffX / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+            y: clamp(diffY / t / 1000, -1 * Gesture._VELOCITY_LIMIT, Gesture._VELOCITY_LIMIT),
+        };
+        this.previousMovement = {
+            x: this.movement.x,
+            y: this.movement.y,
+        };
+        this._handleCallback();
+    };
+    return WheelGesture;
+}(Gesture));
+
+var useRecognizer = function (handlers) {
+    var ref = React.useRef();
+    var elementRefs = React.useRef([]);
+    var subscribers = React.useRef(new Map()).current;
+    // re-initiate callback on change
+    React.useEffect(function () {
+        var e_1, _a;
+        try {
+            for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var _d = __read(_c.value, 2), _e = _d[1], keyIndex = _e.keyIndex, gesture = _e.gesture;
+                var _f = __read(handlers[keyIndex], 3), callback = _f[2];
+                gesture.applyCallback(callback);
             }
         }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    }, [handlers]);
+    React.useEffect(function () {
+        handlers.forEach(function (_a, keyIndex) {
+            var _b = __read(_a, 4), key = _b[0], gesture = _b[1], callback = _b[2], config = _b[3];
+            subscribers.set(key, {
+                keyIndex: keyIndex,
+                gesture: gesture,
+                unsubscribe: gesture.applyGesture({
+                    targetElement: ref.current,
+                    targetElements: elementRefs.current,
+                    callback: callback,
+                    config: config,
+                }),
+            });
+        });
         return function () {
-            if (_refElement) {
-                if (_refElement === document.documentElement &&
-                    _refElementsMultiple.length > 0) {
-                    _refElementsMultiple.forEach(function (element) {
-                        resizeObserverMultiple.unobserve(element.current);
-                    });
+            var e_2, _a;
+            try {
+                for (var _b = __values(subscribers.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var _d = __read(_c.value, 2), unsubscribe = _d[1].unsubscribe;
+                    unsubscribe && unsubscribe();
                 }
-                else {
-                    resizeObserver.unobserve(_refElement);
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                 }
+                finally { if (e_2) throw e_2.error; }
             }
         };
     }, []);
@@ -491,76 +951,48 @@ function useMeasure(callback, deps) {
                 elementRefs.current[index] || React.createRef();
             return { ref: elementRefs.current[index] };
         }
-    }; // ...bind() or ...bind(index) for multiple
+    };
+};
+
+function useDrag(callback, config) {
+    var gesture = React.useRef(new DragGesture()).current;
+    return useRecognizer([["drag", gesture, callback, config]]);
 }
 
-function useWindowDimension(callback, deps) {
-    var windowDimensionsRef = React.useRef({
-        width: 0,
-        height: 0,
-        innerWidth: 0,
-        innerHeight: 0,
-    });
-    var callbackRef = React.useRef(callback);
-    var handleCallback = function () {
-        if (callbackRef) {
-            callbackRef.current(__assign({}, windowDimensionsRef.current));
-        }
-    };
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var resizeObserver = new ResizeObserver(function (_a) {
-            var entry = _a[0];
-            var _b = entry.target, clientWidth = _b.clientWidth, clientHeight = _b.clientHeight;
-            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
-            windowDimensionsRef.current = {
-                width: clientWidth,
-                height: clientHeight,
-                innerWidth: innerWidth,
-                innerHeight: innerHeight,
-            };
-            handleCallback();
-        });
-        resizeObserver.observe(document.documentElement);
-        return function () { return resizeObserver.unobserve(document.documentElement); };
-    }, []);
+function useMouseMove(callback) {
+    var gesture = React.useRef(new MouseMoveGesture()).current;
+    return useRecognizer([["move", gesture, callback]]);
 }
 
-function useScroll(callback, deps) {
-    var ref = React.useRef(null);
-    var scrollXY = React.useRef({
-        x: 0,
-        y: 0,
-    });
-    var previousScrollXY = React.useRef({
-        x: 0,
-        y: 0,
-    });
-    var isScrolling = React.useRef(false);
-    var scrollDirection = React.useRef({ x: 0, y: 0 });
-    var _isScrolling = React.useRef(-1); // For checking scrolling and add throttle
-    var lastTimeStamp = React.useRef(0);
-    var velocity = React.useRef({ x: 0, y: 0 });
-    var callbackRef = React.useRef(callback);
-    var handleCallback = function () {
-        if (callbackRef) {
-            callbackRef.current({
-                isScrolling: isScrolling.current,
-                scrollX: scrollXY.current.x,
-                scrollY: scrollXY.current.y,
-                velocityX: velocity.current.x,
-                velocityY: velocity.current.y,
-                directionX: scrollDirection.current.x,
-                directionY: scrollDirection.current.y,
-            });
-        }
-    };
+function useScroll(callback) {
+    var gesture = React.useRef(new ScrollGesture()).current;
+    return useRecognizer([["scroll", gesture, callback]]);
+}
+
+function useWheel(callback) {
+    var gesture = React.useRef(new WheelGesture()).current;
+    return useRecognizer([["wheel", gesture, callback]]);
+}
+
+function useGesture(_a) {
+    var onDrag = _a.onDrag, onWheel = _a.onWheel, onScroll = _a.onScroll, onMouseMove = _a.onMouseMove;
+    var dragGesture = React.useRef(new DragGesture()).current;
+    var wheelGesture = React.useRef(new WheelGesture()).current;
+    var scrollGesture = React.useRef(new ScrollGesture()).current;
+    var mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
+    return useRecognizer([
+        ["drag", dragGesture, onDrag],
+        ["wheel", wheelGesture, onWheel],
+        ["scroll", scrollGesture, onScroll],
+        ["move", mouseMoveGesture, onMouseMove],
+    ]);
+}
+
+function useOutsideClick(elementRef, callback, deps) {
+    var callbackRef = React.useRef();
+    if (!callbackRef.current) {
+        callbackRef.current = callback;
+    }
     // Reinitiate callback when dependency change
     React.useEffect(function () {
         callbackRef.current = callback;
@@ -569,104 +1001,21 @@ function useScroll(callback, deps) {
         };
     }, deps);
     React.useEffect(function () {
-        var _refElement = ref.current;
-        var scrollCallback = function (_a) {
-            var x = _a.x, y = _a.y;
-            var now = Date.now();
-            var deltaTime = Math.min(now - lastTimeStamp.current, 64);
-            lastTimeStamp.current = now;
-            var t = deltaTime / 1000; // seconds
-            scrollXY.current = { x: x, y: y };
-            // Clear if scrolling
-            if (_isScrolling.current !== -1) {
-                isScrolling.current = true;
-                clearTimeout(_isScrolling.current);
+        var handleOutsideClick = function (e) {
+            var _a;
+            if (!((_a = elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                callbackRef.current && callbackRef.current(e);
             }
-            _isScrolling.current = setTimeout(function () {
-                isScrolling.current = false;
-                scrollDirection.current = { x: 0, y: 0 };
-                // Reset Velocity
-                velocity.current = { x: 0, y: 0 };
-                handleCallback(); // Debounce 250milliseconds
-            }, 250);
-            var diffX = scrollXY.current.x - previousScrollXY.current.x;
-            var diffY = scrollXY.current.y - previousScrollXY.current.y;
-            scrollDirection.current = {
-                x: Math.sign(diffX),
-                y: Math.sign(diffY),
-            };
-            velocity.current = {
-                x: clamp(diffX / t / 1000, -5, 5),
-                y: clamp(diffY / t / 1000, -5, 5),
-            };
-            previousScrollXY.current = {
-                x: scrollXY.current.x,
-                y: scrollXY.current.y,
-            };
-            handleCallback();
-        };
-        var scrollListener = function () {
-            var y = window.pageYOffset, x = window.pageXOffset;
-            scrollCallback({ x: x, y: y });
-        };
-        var scrollElementListener = function () {
-            var x = (_refElement === null || _refElement === void 0 ? void 0 : _refElement.scrollLeft) || 0;
-            var y = (_refElement === null || _refElement === void 0 ? void 0 : _refElement.scrollTop) || 0;
-            scrollCallback({ x: x, y: y });
         };
-        var subscribe;
-        if (_refElement) {
-            subscribe = attachEvents(_refElement, [
-                ["scroll", scrollElementListener],
-            ]);
-        }
-        else {
-            subscribe = attachEvents(window, [["scroll", scrollListener]]);
-        }
+        var subscribe = attachEvents([document], [["click", handleOutsideClick]]);
         return function () { return subscribe && subscribe(); };
     }, []);
-    return function () { return ({ ref: ref }); }; // ...bind()
 }
 
-function useDrag(callback, config, deps) {
-    var _VELOCITY_LIMIT = 20;
-    var currentIndex = React.useRef(undefined);
+function useMeasure(callback, deps) {
     var ref = React.useRef(null);
     var elementRefs = React.useRef([]);
     var callbackRef = React.useRef(callback);
-    var cancelRef = React.useRef();
-    var isGestureActive = React.useRef(false);
-    // Holds only movement - always starts from 0
-    var movement = React.useRef({ x: 0, y: 0 });
-    var movementStart = React.useRef({ x: 0, y: 0 });
-    var previousMovement = React.useRef({ x: 0, y: 0 });
-    var initialMovement = React.useRef({ x: 0, y: 0 });
-    // Holds offsets
-    var translation = React.useRef({ x: 0, y: 0 });
-    var offset = React.useRef({ x: 0, y: 0 });
-    var lastTimeStamp = React.useRef(0);
-    var velocity = React.useRef({ x: 0, y: 0 });
-    var handleCallback = function () {
-        if (callbackRef) {
-            callbackRef.current({
-                args: [currentIndex.current],
-                down: isGestureActive.current,
-                movementX: movement.current.x,
-                movementY: movement.current.y,
-                offsetX: translation.current.x,
-                offsetY: translation.current.y,
-                velocityX: velocity.current.x,
-                velocityY: velocity.current.y,
-                distanceX: Math.abs(movement.current.x),
-                distanceY: Math.abs(movement.current.y),
-                directionX: Math.sign(movement.current.x),
-                directionY: Math.sign(movement.current.y),
-                cancel: function () {
-                    cancelRef.current && cancelRef.current();
-                },
-            });
-        }
-    };
     // Reinitiate callback when dependency change
     React.useEffect(function () {
         callbackRef.current = callback;
@@ -675,122 +1024,82 @@ function useDrag(callback, config, deps) {
         };
     }, deps);
     React.useEffect(function () {
-        var _elemRef = ref.current;
+        var _refElement = ref.current || document.documentElement;
         var _refElementsMultiple = elementRefs.current;
-        var reSubscribe;
-        var _initEvents = function () {
-            if (_elemRef || _refElementsMultiple.length > 0) {
-                reSubscribe = attachEvents(window, [
-                    ["mousedown", pointerDown],
-                    ["mousemove", pointerMove],
-                    ["touchstart", pointerDown, { passive: false }],
-                    ["touchmove", pointerMove, { passive: false }],
-                ]);
+        var resizeObserver = new ResizeObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var _c = entry.target.getBoundingClientRect(), left = _c.left, top = _c.top, width = _c.width, height = _c.height;
+            var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+            if (callbackRef) {
+                if (_refElement === document.documentElement) {
+                    return; // no-op for document
+                }
+                else {
+                    callbackRef.current({
+                        left: left + pageXOffset,
+                        top: top + pageYOffset,
+                        width: width,
+                        height: height,
+                        vLeft: left,
+                        vTop: top,
+                    });
+                }
             }
-        };
-        var pointerDown = function (e) {
-            if (e.type === "touchstart") {
-                movementStart.current = {
-                    x: e.touches[0].clientX,
-                    y: e.touches[0].clientY,
-                };
+        });
+        var resizeObserverMultiple = new ResizeObserver(function (entries) {
+            var left = [];
+            var top = [];
+            var width = [];
+            var height = [];
+            var vLeft = [];
+            var vTop = [];
+            entries.forEach(function (entry) {
+                var _a = entry.target.getBoundingClientRect(), _left = _a.left, _top = _a.top, _width = _a.width, _height = _a.height;
+                var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+                var _pageLeft = _left + pageXOffset;
+                var _pageTop = _top + pageYOffset;
+                left.push(_pageLeft);
+                top.push(_pageTop);
+                width.push(_width);
+                height.push(_height);
+                vLeft.push(_left);
+                vTop.push(_top);
+            });
+            if (callbackRef) {
+                callbackRef.current({
+                    left: left,
+                    top: top,
+                    width: width,
+                    height: height,
+                    vLeft: vLeft,
+                    vTop: vTop,
+                });
             }
-            else {
-                movementStart.current = { x: e.clientX, y: e.clientY };
+        });
+        if (_refElement) {
+            if (_refElement === document.documentElement &&
+                _refElementsMultiple.length > 0) {
+                _refElementsMultiple.forEach(function (element) {
+                    resizeObserverMultiple.observe(element.current);
+                });
             }
-            movement.current = { x: 0, y: 0 };
-            offset.current = { x: translation.current.x, y: translation.current.y };
-            previousMovement.current = { x: 0, y: 0 };
-            velocity.current = { x: 0, y: 0 };
-            // find current selected element
-            var currElem = _refElementsMultiple.find(function (elem) { return elem.current === e.target; });
-            if (e.target === _elemRef || currElem) {
-                isGestureActive.current = true;
-                e.preventDefault();
-                // set args
-                if (currElem) {
-                    currentIndex.current = _refElementsMultiple.indexOf(currElem);
-                }
-                // if initial function is defined then call it to get initial movementX and movementY
-                // if only select to bounded draggable element
-                var initial = (config === null || config === void 0 ? void 0 : config.initial) && config.initial();
-                var initialMovementX = initial === null || initial === void 0 ? void 0 : initial.movementX;
-                var initialMovementY = initial === null || initial === void 0 ? void 0 : initial.movementY;
-                initialMovement.current = {
-                    x: initialMovementX !== null && initialMovementX !== void 0 ? initialMovementX : 0,
-                    y: initialMovementY !== null && initialMovementY !== void 0 ? initialMovementY : 0,
-                };
-                movement.current = {
-                    x: initialMovement.current.x,
-                    y: initialMovement.current.y,
-                };
-                previousMovement.current = {
-                    x: initialMovement.current.x,
-                    y: initialMovement.current.y,
-                };
-                handleCallback();
+            else {
+                resizeObserver.observe(_refElement);
             }
-        };
-        var pointerMove = function (e) {
-            if (isGestureActive.current) {
-                e.preventDefault();
-                var now = Date.now();
-                var deltaTime = Math.min(now - lastTimeStamp.current, 64);
-                lastTimeStamp.current = now;
-                var t = deltaTime / 1000;
-                if (e.type === "touchmove") {
-                    movement.current = {
-                        x: initialMovement.current.x +
-                            (e.touches[0].clientX - movementStart.current.x),
-                        y: initialMovement.current.y +
-                            (e.touches[0].clientY - movementStart.current.y),
-                    };
+        }
+        return function () {
+            if (_refElement) {
+                if (_refElement === document.documentElement &&
+                    _refElementsMultiple.length > 0) {
+                    _refElementsMultiple.forEach(function (element) {
+                        resizeObserverMultiple.unobserve(element.current);
+                    });
                 }
                 else {
-                    movement.current = {
-                        x: initialMovement.current.x + (e.clientX - movementStart.current.x),
-                        y: initialMovement.current.y + (e.clientY - movementStart.current.y),
-                    };
+                    resizeObserver.unobserve(_refElement);
                 }
-                translation.current = {
-                    x: offset.current.x + movement.current.x,
-                    y: offset.current.y + movement.current.y,
-                };
-                velocity.current = {
-                    x: clamp((movement.current.x - previousMovement.current.x) / t / 1000, -_VELOCITY_LIMIT, _VELOCITY_LIMIT),
-                    y: clamp((movement.current.y - previousMovement.current.y) / t / 1000, -_VELOCITY_LIMIT, _VELOCITY_LIMIT),
-                };
-                previousMovement.current = {
-                    x: movement.current.x,
-                    y: movement.current.y,
-                };
-                handleCallback();
-            }
-        };
-        var pointerUp = function () {
-            if (isGestureActive.current) {
-                isGestureActive.current = false;
-                handleCallback();
-                _initEvents();
             }
         };
-        var subscribe;
-        if (_elemRef || _refElementsMultiple.length > 0) {
-            subscribe = attachEvents(window, [
-                ["mousedown", pointerDown],
-                ["mousemove", pointerMove],
-                ["mouseup", pointerUp],
-                ["touchstart", pointerDown, { passive: false }],
-                ["touchmove", pointerMove, { passive: false }],
-                ["touchend", pointerUp],
-            ]);
-        }
-        var _cancelEvents = function () {
-            _initEvents(); // When cancel is called for first time reSubscription is undefined, so initializing reSubscribe and calling it fixes the issue
-            reSubscribe && reSubscribe();
-        };
-        cancelRef.current = _cancelEvents;
-        return function () { return subscribe && subscribe(); };
     }, []);
     return function (index) {
         if (index === null || index === undefined) {
@@ -801,145 +1110,20 @@ function useDrag(callback, config, deps) {
                 elementRefs.current[index] || React.createRef();
             return { ref: elementRefs.current[index] };
         }
-    };
-}
-
-function useMouseMove(callback, deps) {
-    var _VELOCITY_LIMIT = 20;
-    var ref = React.useRef(null);
-    var callbackRef = React.useRef(callback);
-    var isMoving = React.useRef(false);
-    var _isMoving = React.useRef(-1);
-    var mouseXY = React.useRef({ x: 0, y: 0 });
-    var prevMouseXY = React.useRef({ x: 0, y: 0 });
-    var directionXY = React.useRef({ x: 0, y: 0 });
-    var velocityXY = React.useRef({ x: 0, y: 0 });
-    var currentEvent = React.useRef();
-    var lastTimeStamp = React.useRef(0);
-    var handleCallback = function () {
-        var _a;
-        if (callbackRef) {
-            callbackRef.current({
-                target: (_a = currentEvent.current) === null || _a === void 0 ? void 0 : _a.target,
-                isMoving: isMoving.current,
-                mouseX: mouseXY.current.x,
-                mouseY: mouseXY.current.y,
-                velocityX: velocityXY.current.x,
-                velocityY: velocityXY.current.y,
-                directionX: directionXY.current.x,
-                directionY: directionXY.current.y,
-            });
-        }
-    };
-    // Reinitiate callback when dependency change
-    React.useEffect(function () {
-        callbackRef.current = callback;
-        return function () {
-            callbackRef.current = function () { return false; };
-        };
-    }, deps);
-    React.useEffect(function () {
-        var _refElement = ref.current;
-        var mouseMove = function (_a) {
-            var e = _a.e, x = _a.x, y = _a.y;
-            var now = Date.now();
-            var deltaTime = Math.min(now - lastTimeStamp.current, 64);
-            lastTimeStamp.current = now;
-            var t = deltaTime / 1000; // seconds
-            mouseXY.current = { x: x, y: y };
-            currentEvent.current = e;
-            if (_isMoving.current !== -1) {
-                isMoving.current = true;
-                clearTimeout(_isMoving.current);
-            }
-            _isMoving.current = setTimeout(function () {
-                isMoving.current = false;
-                directionXY.current = { x: 0, y: 0 };
-                velocityXY.current = { x: 0, y: 0 };
-                handleCallback();
-            }, 250); // Debounce 250 milliseconds
-            var diffX = mouseXY.current.x - prevMouseXY.current.x;
-            var diffY = mouseXY.current.y - prevMouseXY.current.y;
-            directionXY.current = {
-                x: Math.sign(diffX),
-                y: Math.sign(diffY),
-            };
-            velocityXY.current = {
-                x: clamp(diffX / t / 1000, -_VELOCITY_LIMIT, _VELOCITY_LIMIT),
-                y: clamp(diffY / t / 1000, -_VELOCITY_LIMIT, _VELOCITY_LIMIT),
-            };
-            prevMouseXY.current = { x: mouseXY.current.x, y: mouseXY.current.y };
-            handleCallback();
-        };
-        var mouseMoveElementListener = function (e) {
-            /** Is offsetLeft / offsetTop needed here ???
-             *  const elementOffsetLeft = _refElement?.offsetLeft || 0;
-             * const elementOffsetTop = _refElement?.offsetTop || 0;
-             */
-            mouseMove({
-                e: e,
-                x: e.clientX,
-                y: e.clientY,
-            });
-        };
-        var mouseMoveListener = function (e) {
-            mouseMove({ e: e, x: e.clientX, y: e.clientY });
-        };
-        var subscribe;
-        if (_refElement) {
-            subscribe = attachEvents(_refElement, [
-                ["mousemove", mouseMoveElementListener],
-            ]);
-        }
-        else {
-            subscribe = attachEvents(window, [["mousemove", mouseMoveListener]]);
-        }
-        return function () { return subscribe && subscribe(); };
-    }, []);
-    return function () { return ({ ref: ref }); }; // ...bind()
+    }; // ...bind() or ...bind(index) for multiple
 }
 
-var LINE_HEIGHT = 40;
-var PAGE_HEIGHT = 800;
-function useWheel(callback, deps) {
-    var ref = React.useRef(null);
-    var isWheeling = React.useRef(false);
-    var isWheelingID = React.useRef(-1);
-    var movementXY = React.useRef({
-        x: 0,
-        y: 0,
-    });
-    var previousMovementXY = React.useRef({
-        x: 0,
-        y: 0,
-    });
-    var deltaXY = React.useRef({
-        x: 0,
-        y: 0,
+function useWindowDimension(callback, deps) {
+    var windowDimensionsRef = React.useRef({
+        width: 0,
+        height: 0,
+        innerWidth: 0,
+        innerHeight: 0,
     });
-    var direction = React.useRef({ x: 0, y: 0 });
-    var lastTimeStamp = React.useRef(0);
-    var velocity = React.useRef({ x: 0, y: 0 });
-    // Holds offsets
-    var offset = React.useRef({ x: 0, y: 0 });
-    var translation = React.useRef({ x: 0, y: 0 });
     var callbackRef = React.useRef(callback);
     var handleCallback = function () {
         if (callbackRef) {
-            callbackRef.current({
-                target: ref.current,
-                isWheeling: isWheeling.current,
-                deltaX: deltaXY.current.x,
-                deltaY: deltaXY.current.y,
-                directionX: direction.current.x,
-                directionY: direction.current.y,
-                movementX: movementXY.current.x,
-                movementY: movementXY.current.y,
-                offsetX: offset.current.x,
-                offsetY: offset.current.y,
-                velocityX: velocity.current.x,
-                velocityY: velocity.current.y,
-            });
+            callbackRef.current(__assign({}, windowDimensionsRef.current));
         }
     };
     // Reinitiate callback when dependency change
@@ -950,77 +1134,33 @@ function useWheel(callback, deps) {
         };
     }, deps);
     React.useEffect(function () {
-        var _refElement = ref.current;
-        var wheelListener = function (event) {
-            var deltaX = event.deltaX, deltaY = event.deltaY, deltaMode = event.deltaMode;
-            var now = Date.now();
-            var deltaTime = Math.min(now - lastTimeStamp.current, 64);
-            lastTimeStamp.current = now;
-            var t = deltaTime / 1000; // seconds
-            isWheeling.current = true;
-            if (isWheelingID.current !== -1) {
-                isWheeling.current = true;
-                clearTimeout(isWheelingID.current);
-            }
-            isWheelingID.current = setTimeout(function () {
-                isWheeling.current = false;
-                translation.current = { x: offset.current.x, y: offset.current.y };
-                handleCallback();
-                velocity.current = { x: 0, y: 0 }; // Reset Velocity
-                movementXY.current = { x: 0, y: 0 };
-            }, 200);
-            // normalize wheel values, especially for Firefox
-            if (deltaMode === 1) {
-                deltaX *= LINE_HEIGHT;
-                deltaY *= LINE_HEIGHT;
-            }
-            else if (deltaMode === 2) {
-                deltaX *= PAGE_HEIGHT;
-                deltaY *= PAGE_HEIGHT;
-            }
-            deltaXY.current = { x: deltaX, y: deltaY };
-            movementXY.current = {
-                x: movementXY.current.x + deltaX,
-                y: movementXY.current.y + deltaY,
-            };
-            offset.current = {
-                x: translation.current.x + movementXY.current.x,
-                y: translation.current.y + movementXY.current.y,
-            };
-            var diffX = movementXY.current.x - previousMovementXY.current.x;
-            var diffY = movementXY.current.y - previousMovementXY.current.y;
-            direction.current = {
-                x: Math.sign(diffX),
-                y: Math.sign(diffY),
-            };
-            velocity.current = {
-                x: clamp(diffX / t / 1000, -20, 20),
-                y: clamp(diffY / t / 1000, -20, 20),
-            };
-            previousMovementXY.current = {
-                x: movementXY.current.x,
-                y: movementXY.current.y,
+        var resizeObserver = new ResizeObserver(function (_a) {
+            var _b = __read(_a, 1), entry = _b[0];
+            var _c = entry.target, clientWidth = _c.clientWidth, clientHeight = _c.clientHeight;
+            var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+            windowDimensionsRef.current = {
+                width: clientWidth,
+                height: clientHeight,
+                innerWidth: innerWidth,
+                innerHeight: innerHeight,
             };
             handleCallback();
-        };
-        var subscribe;
-        if (_refElement) {
-            subscribe = attachEvents(_refElement, [["wheel", wheelListener]]);
-        }
-        return function () { return subscribe && subscribe(); };
+        });
+        resizeObserver.observe(document.documentElement);
+        return function () { return resizeObserver.unobserve(document.documentElement); };
     }, []);
-    return function () { return ({ ref: ref }); }; // ...bind()
 }
 
 Object.defineProperty(exports, 'Easing', {
-    enumerable: true,
-    get: function () {
-        return reMotion.Easing;
-    }
+  enumerable: true,
+  get: function () {
+    return reMotion.Easing;
+  }
 });
 exports.AnimatedBlock = AnimatedBlock;
 exports.AnimatedImage = AnimatedImage;
 exports.AnimatedInline = AnimatedInline;
+exports.MountedBlock = MountedBlock;
 exports.ScrollableBlock = ScrollableBlock;
 exports.bInterpolate = bInterpolate;
 exports.bin = bin;
@@ -1033,6 +1173,7 @@ exports.rubberClamp = rubberClamp;
 exports.snapTo = snapTo;
 exports.useAnimatedValue = useAnimatedValue;
 exports.useDrag = useDrag;
+exports.useGesture = useGesture;
 exports.useMeasure = useMeasure;
 exports.useMountedValue = useMountedValue;
 exports.useMouseMove = useMouseMove;