react-virtual-sortable 1.1.2 → 1.1.4

package/dist/index.cjs.js

@@ -0,0 +1,1994 @@
+/*!
+ * react-virtual-sortable v1.1.4
+ * open source under the MIT license
+ * https://github.com/mfuu/react-virtual-sortable#readme
+ */
+
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var sortableDnd_min = {exports: {}};
+
+/*!
+ * sortable-dnd v0.7.2
+ * open source under the MIT license
+ * https://github.com/mfuu/sortable-dnd#readme
+ */
+sortableDnd_min.exports;
+(function (module, exports) {
+  !function (t, e) {
+    module.exports = e() ;
+  }(commonjsGlobal, function () {
+
+    function t() {
+      return t = Object.assign ? Object.assign.bind() : function (t) {
+        for (var e = 1; e < arguments.length; e++) {
+          var n = arguments[e];
+          for (var o in n) ({}).hasOwnProperty.call(n, o) && (t[o] = n[o]);
+        }
+        return t;
+      }, t.apply(null, arguments);
+    }
+    function e(t) {
+      return e = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
+        return typeof t;
+      } : function (t) {
+        return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+      }, e(t);
+    }
+    var n = {
+        capture: !1,
+        passive: !1
+      },
+      o = /\s+/g;
+    function i(t) {
+      if ("undefined" != typeof window && window.navigator) return !!navigator.userAgent.match(t);
+    }
+    var r = i(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),
+      a = i(/Edge/i),
+      l = i(/safari/i) && !i(/chrome/i) && !i(/android/i);
+    function s(t, e, o) {
+      window.addEventListener ? t.addEventListener(e, o, !r && n) : window.attachEvent ? t.attachEvent("on" + e, o) : t["on" + e] = o;
+    }
+    function c(t, e, o) {
+      window.removeEventListener ? t.removeEventListener(e, o, !r && n) : window.detachEvent ? t.detachEvent("on" + e, o) : t["on" + e] = null;
+    }
+    function h() {
+      return document.scrollingElement || document.documentElement;
+    }
+    function u(t, e, n) {
+      if (t.getBoundingClientRect || t === window) {
+        var o, i, a, l, s, c, u;
+        if (t !== window && t.parentNode && t !== h() ? (i = (o = t.getBoundingClientRect()).top, a = o.left, l = o.bottom, s = o.right, c = o.height, u = o.width) : (i = 0, a = 0, l = window.innerHeight, s = window.innerWidth, c = window.innerHeight, u = window.innerWidth), e && t !== window && (n = n || t.parentNode, !r)) do {
+          if (n && n.getBoundingClientRect && "none" !== y(n, "transform")) {
+            var d = n.getBoundingClientRect();
+            i -= d.top + parseInt(y(n, "border-top-width")), a -= d.left + parseInt(y(n, "border-left-width")), l = i + o.height, s = a + o.width;
+            break;
+          }
+        } while (n = n.parentNode);
+        return {
+          top: i,
+          left: a,
+          bottom: l,
+          right: s,
+          width: u,
+          height: c
+        };
+      }
+    }
+    function d(t, e, n, o) {
+      if (t) {
+        n = n || document;
+        do {
+          if (null != e && (">" === e[0] ? t.parentNode === n && b(t, e) : b(t, e)) || o && t === n) return t;
+          if (t === n) break;
+        } while (t = t.parentNode);
+      }
+      return null;
+    }
+    function p(t, e) {
+      if (!t || !e) return !1;
+      if (e.compareDocumentPosition) return !!(16 & e.compareDocumentPosition(t));
+      if (e.contains && 1 === t.nodeType) return e.contains(t) && e !== t;
+      for (; t = t.parentNode;) if (t === e) return !0;
+      return !1;
+    }
+    function f(t, e) {
+      for (var n = t.lastElementChild; n && (n === tt.ghost || "none" === y(n, "display") || e && !b(n, e));) n = n.previousElementSibling;
+      return n || null;
+    }
+    function m(t, e) {
+      if (!t || !t.parentNode) return -1;
+      for (var n = 0; t = t.previousElementSibling;) t === tt.ghost || "TEMPLATE" === t.nodeName.toUpperCase() || "none" === y(t, "display") || e && !b(t, e) || n++;
+      return n;
+    }
+    function v(t, e, n, o) {
+      for (var i = 0, r = 0, a = t.children; i < a.length;) {
+        if (a[i] !== tt.ghost && "none" !== y(a[i], "display") && (o || a[i] !== tt.dragged) && d(a[i], n, t, !1)) {
+          if (r === e) return a[i];
+          r++;
+        }
+        i++;
+      }
+      return null;
+    }
+    function g(t, e) {
+      var n = y(t),
+        o = parseInt(n.width) - parseInt(n.paddingLeft) - parseInt(n.paddingRight) - parseInt(n.borderLeftWidth) - parseInt(n.borderRightWidth),
+        i = v(t, 0, e),
+        l = v(t, 1, e),
+        s = i && y(i),
+        c = l && y(l),
+        h = s && parseInt(s.marginLeft) + parseInt(s.marginRight) + u(i).width,
+        d = c && parseInt(c.marginLeft) + parseInt(c.marginRight) + u(l).width,
+        p = a || r ? "cssFloat" : "float";
+      if ("flex" === n.display) return "column" === n.flexDirection || "column-reverse" === n.flexDirection ? "vertical" : "horizontal";
+      if ("grid" === n.display) return n.gridTemplateColumns.split(" ").length <= 1 ? "vertical" : "horizontal";
+      if (i && s.float && "none" !== s.float) {
+        var f = "left" === s.float ? "left" : "right";
+        return !l || "both" !== c.clear && c.clear !== f ? "horizontal" : "vertical";
+      }
+      return i && ("block" === s.display || "flex" === s.display || "table" === s.display || "grid" === s.display || h >= o && "none" === n[p] || l && "none" === n[p] && h + d > o) ? "vertical" : "horizontal";
+    }
+    function w(t, e, n) {
+      if (t && e) if (t.classList) t.classList[n ? "add" : "remove"](e);else {
+        var i = (" " + t.className + " ").replace(o, " ").replace(" " + e + " ", " ");
+        t.className = (i + (n ? " " + e : "")).replace(o, " ");
+      }
+    }
+    function b(t, e) {
+      if (!t || !e) return !1;
+      ">" === e[0] && (e = e.substring(1));
+      try {
+        if (t.matches) return t.matches(e);
+        if (t.msMatchesSelector) return t.msMatchesSelector(e);
+        if (t.webkitMatchesSelector) return t.webkitMatchesSelector(e);
+      } catch (t) {
+        return !1;
+      }
+      return !1;
+    }
+    function y(t, e, n) {
+      var o = t && t.style;
+      if (o) {
+        if (void 0 === n) return window.getComputedStyle ? n = window.getComputedStyle(t, "") : t.currentStyle && (n = t.currentStyle), void 0 === e ? n : n[e];
+        e in o || -1 !== e.indexOf("webkit") || (e = "-webkit-" + e), o[e] = n + ("string" == typeof n ? "" : "px");
+      }
+    }
+    function S(t, e) {
+      return Math.round(t.top) === Math.round(e.top) && Math.round(t.left) === Math.round(e.left) && Math.round(t.height) === Math.round(e.height) && Math.round(t.width) === Math.round(e.width);
+    }
+    function _(t, e) {
+      var n = t.compareDocumentPosition ? t.compareDocumentPosition(e) : t.contains ? (t != e && t.contains(e) && 16) + (t != e && e.contains(t) && 8) + (t.sourceIndex >= 0 && e.sourceIndex >= 0 ? (t.sourceIndex < e.sourceIndex && 4) + (t.sourceIndex > e.sourceIndex && 2) : 1) : 0;
+      return 2 === n ? 1 : 4 === n ? -1 : 0;
+    }
+    function x(t) {
+      if ("function" == typeof t) {
+        for (var e = arguments.length, n = new Array(e > 1 ? e - 1 : 0), o = 1; o < e; o++) n[o - 1] = arguments[o];
+        return t.apply(void 0, n);
+      }
+      return t;
+    }
+    function I(t) {
+      void 0 !== t.preventDefault && t.cancelable && t.preventDefault();
+    }
+    var C = "Sortable" + Date.now();
+    function M(t) {
+      this.options = t, this.scrollEl = null, this.autoScrollInterval = null;
+    }
+    function D(t) {
+      this.options = t, this.animationStack = [], this.animationCallbackId = null;
+    }
+    function T(t, e) {
+      return Math.sqrt(Math.pow(t.left - e.left, 2) + Math.pow(t.top - e.top, 2));
+    }
+    M.prototype = {
+      nulling: function () {
+        this.autoScrollInterval && (clearInterval(this.autoScrollInterval), this.autoScrollInterval = null);
+      },
+      onStarted: function () {
+        this.nulling(), this.autoScrollInterval = setInterval(this.autoScroll.bind(this));
+      },
+      onMove: function (t, e, n, o) {
+        var i = n ? n[C].options : o;
+        !n || i.autoScroll ? (this.options = i, this.scrollEl = function (t, e) {
+          if (!t || !t.getBoundingClientRect) return h();
+          var n = t,
+            o = !1;
+          do {
+            if (n.clientWidth < n.scrollWidth || n.clientHeight < n.scrollHeight) {
+              var i = y(n);
+              if (n.clientWidth < n.scrollWidth && ("auto" == i.overflowX || "scroll" == i.overflowX) || n.clientHeight < n.scrollHeight && ("auto" == i.overflowY || "scroll" == i.overflowY)) {
+                if (!n.getBoundingClientRect || n === document.body) return h();
+                if (o || e) return n;
+                o = !0;
+              }
+            }
+          } while (n = n.parentNode);
+          return h();
+        }(t, !0), this.moveEvent = e) : this.scrollEl = null;
+      },
+      autoScroll: function () {
+        var t = this.options,
+          e = this.moveEvent,
+          n = this.scrollEl,
+          o = t.scrollThreshold,
+          i = t.scrollSpeed;
+        if (n && void 0 !== e.clientX && void 0 !== e.clientY) {
+          var r = u(n);
+          if (r) {
+            var a = e.clientX,
+              l = e.clientY,
+              s = r.top,
+              c = r.right,
+              h = r.bottom,
+              d = r.left,
+              p = r.height,
+              f = r.width;
+            if (!(l < s || a > c || l > h || a < d)) {
+              var m = n.scrollTop,
+                v = n.scrollLeft,
+                g = n.scrollHeight,
+                w = n.scrollWidth;
+              n.scrollLeft += this.getScrollOffset(a, d, c, o, i.x, v, w, f), n.scrollTop += this.getScrollOffset(l, s, h, o, i.y, m, g, p);
+            }
+          }
+        }
+      },
+      getScrollOffset: function (t, e, n, o, i, r, a, l) {
+        return r > 0 && t >= e && t <= e + o ? Math.max(-1, (t - e) / o - 1) * i : r + l < a && t <= n && t >= n - o ? Math.min(1, (t - n) / o + 1) * i : 0;
+      }
+    }, D.prototype = {
+      collect: function (t) {
+        if (t) {
+          for (var e = u(t), n = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, o = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight, i = Math.min(e.right, n), r = Math.min(e.bottom, o), a = Array.prototype.slice.call(t.children), l = [], s = 0, c = a.length; s < c; s++) {
+            var h = a[s];
+            if (h !== tt.ghost && "none" !== y(h, "display")) {
+              var d = u(h);
+              if (!(d.bottom < 0 || d.right < 0)) {
+                if (0 === l.length && h.previousElementSibling) {
+                  var p = h.previousElementSibling;
+                  do {
+                    if (p && p !== tt.ghost && "none" !== y(p, "display")) break;
+                  } while (p = p.previousElementSibling);
+                  p && l.push({
+                    el: p,
+                    rect: u(p)
+                  });
+                }
+                if (d.top - d.height > r || d.left - d.width > i) {
+                  l.push({
+                    el: h,
+                    rect: d
+                  });
+                  break;
+                }
+                l.push({
+                  el: h,
+                  rect: d
+                });
+              }
+            }
+          }
+          this.animationStack.push(l);
+        }
+      },
+      animate: function (t) {
+        var e = this,
+          n = this.animationStack.pop(),
+          o = this.options.animation;
+        if (!n || !o) return clearTimeout(this.animationCallbackId), void ("function" == typeof t && t());
+        var i = 0;
+        n.forEach(function (t) {
+          var n = 0,
+            r = t.el,
+            a = u(r),
+            l = t.rect,
+            s = r.prevToRect,
+            c = r.prevFromRect;
+          if (r.animating && c && s && S(l, a)) {
+            var h = function (t, e) {
+              var n = "";
+              if ("string" == typeof t) n = t;else do {
+                var o = y(t, "transform");
+                o && "none" !== o && (n = o + " " + n);
+              } while (!e && (t = t.parentNode));
+              var i = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;
+              return i && new i(n);
+            }(r, !0);
+            if (h) n = T({
+              top: a.top - h.f,
+              left: a.left - h.e
+            }, a) / T(c, s) * o;
+          }
+          S(l, a) || (r.prevFromRect = l, r.prevToRect = a, n || (n = o), e.execute(r, l, a, n)), n && (i = Math.max(i, n));
+        }), clearTimeout(this.animationCallbackId), i ? this.animationCallbackId = setTimeout(function () {
+          "function" == typeof t && t();
+        }, i) : "function" == typeof t && t();
+      },
+      execute: function (t, e, n, o) {
+        if (o) {
+          y(t, "transition", ""), y(t, "transform", "");
+          var i = this.options.easing || "",
+            r = e.left - n.left,
+            a = e.top - n.top;
+          y(t, "transform", "translate3d(".concat(r, "px, ").concat(a, "px, 0)")), this.repaintDummy = function (t) {
+            return t.offsetWidth;
+          }(t), y(t, "transition", "transform ".concat(o, "ms ").concat(i)), y(t, "transform", "translate3d(0, 0, 0)"), "number" == typeof t.animating && clearTimeout(t.animating), t.animating = setTimeout(function () {
+            y(t, "transition", ""), y(t, "transform", ""), t.prevFromRect = null, t.prevToRect = null, t.animating = null;
+          }, o);
+        }
+      }
+    };
+    var E,
+      N,
+      O,
+      R,
+      k,
+      H,
+      X,
+      Y,
+      W,
+      L,
+      B,
+      A,
+      P,
+      z,
+      j,
+      F,
+      G,
+      U,
+      q,
+      K,
+      J,
+      Q = [];
+    function V(t) {
+      var n,
+        o,
+        i,
+        r = {},
+        a = t.group;
+      a && "object" === e(a) || (a = {
+        name: a,
+        pull: !0,
+        put: !0,
+        revertDrag: !0
+      }), r.name = a.name, r.pull = null === (n = a.pull) || void 0 === n || n, r.put = null === (o = a.put) || void 0 === o || o, r.revertDrag = null === (i = a.revertDrag) || void 0 === i || i, t.group = r;
+    }
+    function Z(e) {
+      var n = e.sortable,
+        o = e.name,
+        i = e.evt,
+        r = n.options[o];
+      if ("function" == typeof r) return r(t({}, i));
+    }
+    function $(e) {
+      var n = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
+        o = {};
+      return o.event = e, o.to = E, o.from = N, o.node = O, o.clone = X, o.target = W, o.oldIndex = A, o.newIndex = P, o.pullMode = B, t(o, n), o.relative = W === O ? 0 : _(X, W), o;
+    }
+    function tt(e, n) {
+      if (!e || !e.nodeType || 1 !== e.nodeType) throw "Sortable-dnd: `el` must be an HTMLElement, not ".concat({}.toString.call(e));
+      e[C] = this, this.el = e, this.options = n = t({}, n);
+      var o = {
+        store: null,
+        group: "",
+        handle: null,
+        draggable: ">*",
+        sortable: !0,
+        disabled: !1,
+        customGhost: null,
+        lockAxis: "",
+        direction: "",
+        animation: 150,
+        easing: "",
+        chosenClass: "",
+        placeholderClass: "",
+        ghostClass: "",
+        ghostStyle: {},
+        ghostContainer: null,
+        appendToBody: !1,
+        autoScroll: !0,
+        scrollThreshold: 55,
+        scrollSpeed: {
+          x: 10,
+          y: 10
+        },
+        delay: 0,
+        delayOnTouchOnly: !1,
+        swapOnDrop: !0,
+        removeCloneOnDrop: !0,
+        dropOnAnimationEnd: !1,
+        supportTouch: "ontouchstart" in window,
+        touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,
+        emptyInsertThreshold: -1
+      };
+      for (var i in o) !(i in n) && (n[i] = o[i]);
+      for (var r in V(n), this) "_" === r.charAt(0) && "function" == typeof this[r] && (this[r] = this[r].bind(this));
+      s(e, n.supportTouch ? "touchstart" : "mousedown", this._onDrag), this.autoScroller = new M(n), this.animator = new D(n), Q.push(e);
+    }
+    return tt.prototype = {
+      constructor: tt,
+      _onDrag: function (t) {
+        var e = this,
+          n = this.el,
+          o = this.options,
+          i = o.handle,
+          c = t.touches && t.touches[0],
+          h = (c || t).target,
+          u = n.ownerDocument;
+        if (!O && !o.disabled && o.group.pull && !(/mousedown|pointerdown/.test(t.type) && 0 !== t.button || l && h && "SELECT" === h.tagName.toUpperCase())) {
+          var p = d(h, o.draggable, n);
+          p && !p.animating && (j = {
+            event: t,
+            clientX: (c || t).clientX,
+            clientY: (c || t).clientY
+          }, O = p, s(U = c ? O : document, "mouseup", this._onDrop), s(U, "touchend", this._onDrop), s(U, "touchcancel", this._onDrop), "function" == typeof i && !i(t) || "string" == typeof i && !d(h, i, O) || (!o.delay || o.delayOnTouchOnly && !c || a || r ? this._onStart(c, t) : (s(u, "touchmove", this._delayedMoveHandler), s(u, "mousemove", this._delayedMoveHandler), s(u, "mouseup", this._cancelStart), s(u, "touchend", this._cancelStart), s(u, "touchcancel", this._cancelStart), this._dragStartTimer = setTimeout(function () {
+            return e._onStart(c, t);
+          }, o.delay))));
+        }
+      },
+      _delayedMoveHandler: function (t) {
+        var e = t.touches ? t.touches[0] : t;
+        Math.max(Math.abs(e.clientX - j.clientX), Math.abs(e.clientY - j.clientY)) >= Math.floor(this.options.touchStartThreshold / (window.devicePixelRatio || 1)) && this._cancelStart();
+      },
+      _cancelStart: function () {
+        var t = this.el.ownerDocument;
+        clearTimeout(this._dragStartTimer), c(t, "touchmove", this._delayedMoveHandler), c(t, "mousemove", this._delayedMoveHandler), c(t, "mouseup", this._cancelStart), c(t, "touchend", this._cancelStart), c(t, "touchcancel", this._cancelStart);
+      },
+      _onStart: function (t, e) {
+        I(e);
+        var n = this.el,
+          o = this.options,
+          i = m(O);
+        A = i, P = i, z = i, E = n, N = n, H = n, W = O, L = O.parentNode, B = o.group.pull, K = O, q = {
+          to: n,
+          target: O,
+          newIndex: i,
+          relative: 0
+        }, X = O.cloneNode(!0), tt.dragged = O, tt.clone = X, tt.active = this, Z({
+          sortable: this,
+          name: "onChoose",
+          evt: $(e)
+        }), w(O, o.chosenClass, !0), s(U, t ? "touchmove" : "mousemove", this._nearestSortable);
+        try {
+          document.selection ? setTimeout(function () {
+            return document.selection.empty();
+          }, 0) : window.getSelection().removeAllRanges();
+        } catch (t) {}
+        s(document, "selectstart", I), l && y(document.body, "user-select", "none");
+      },
+      _onStarted: function () {
+        var t = this.options;
+        this.animator.collect(L), this._appendGhost(), w(X, t.chosenClass, !0), w(X, t.placeholderClass, !0), O.parentNode.insertBefore(X, O), y(O, "display", "none"), Z({
+          sortable: this,
+          name: "onDrag",
+          evt: $(j.event)
+        }), this.animator.animate(), this.autoScroller.onStarted();
+      },
+      _appendGhost: function () {
+        if (!Y) {
+          var e = this.options,
+            n = e.appendToBody ? document.body : x(e.ghostContainer, this) || this.el,
+            o = x(e.customGhost, X) || X;
+          w(Y = o.cloneNode(!0), e.ghostClass, !0);
+          var i = u(O),
+            r = t({
+              position: "fixed",
+              top: i.top,
+              left: i.left,
+              width: i.width,
+              height: i.height,
+              margin: 0,
+              zIndex: 1e5,
+              opacity: "0.8",
+              overflow: "hidden",
+              boxSizing: "border-box",
+              transform: "",
+              transition: "",
+              pointerEvents: "none"
+            }, e.ghostStyle);
+          for (var a in r) y(Y, a, r[a]);
+          tt.ghost = Y, n.appendChild(Y);
+          var l = (j.clientX - i.left) / parseInt(Y.style.width) * 100,
+            s = (j.clientY - i.top) / parseInt(Y.style.height) * 100;
+          y(Y, "transform-origin", "".concat(l, "% ").concat(s, "%")), y(Y, "will-change", "transform");
+        }
+      },
+      _nearestSortable: function (t) {
+        I(t);
+        var e = t.touches && t.touches[0] || t;
+        if (O && function (t) {
+          var e = F || j;
+          return !(void 0 !== t.clientX && void 0 !== t.clientY && Math.abs(t.clientX - e.clientX) <= 0 && Math.abs(t.clientY - e.clientY) <= 0);
+        }(e)) {
+          !F && this._onStarted();
+          var n = this.options.lockAxis,
+            o = "x" === n ? j.clientX : e.clientX,
+            i = "y" === n ? j.clientY : e.clientY,
+            r = document.elementFromPoint(o, i),
+            a = o - j.clientX,
+            l = i - j.clientY;
+          F = {
+            event: t,
+            clientX: o,
+            clientY: i
+          }, y(Y, "transform", "translate3d(".concat(a, "px, ").concat(l, "px, 0)"));
+          var s,
+            c,
+            h,
+            d = (s = o, c = i, Q.reduce(function (t, e) {
+              var n = e[C].options.emptyInsertThreshold;
+              if (null != n) {
+                var o = u(e),
+                  i = s >= o.left - n && s <= o.right + n,
+                  r = c >= o.top - n && c <= o.bottom + n;
+                return i && r && (!h || h && o.left >= h.left && o.right <= h.right && o.top >= h.top && o.bottom <= h.bottom) && (t = e, h = o), t;
+              }
+            }, null));
+          d && d[C]._onMove(t, r), this.autoScroller.onMove(r, F, d, this.options);
+        }
+      },
+      _allowPut: function () {
+        var t = this.options.group,
+          e = H[C].options.group;
+        return this.el === H || !!t.put && (t.put.join && t.put.indexOf(e.name) > -1 || e.name && t.name && e.name === t.name);
+      },
+      _getDirection: function () {
+        var t = this.options.draggable,
+          e = this.options.direction;
+        return e ? x(e, F.event, X, this) : g(L, t);
+      },
+      _allowSwap: function () {
+        var t = u(R),
+          e = "vertical" === this._getDirection(),
+          n = e ? "top" : "left",
+          o = e ? "bottom" : "right",
+          i = R[e ? "offsetHeight" : "offsetWidth"],
+          r = e ? F.clientY : F.clientX,
+          a = r >= t[n] && r < t[o] - i / 2 ? -1 : 1,
+          l = v(L, 0, this.options.draggable),
+          s = f(L),
+          c = u(l),
+          h = u(s);
+        if (R === L || p(L, R)) return X === l && r < c[n] ? (k = R, !0) : X === s && r > h[o] && (k = R.nextSibling, !0);
+        var d = _(X, R);
+        return k = d < 0 ? R.nextSibling : R, G !== R ? (J = a, !0) : J !== a && (J = a, a < 0 ? d > 0 : d < 0);
+      },
+      _onMove: function (t, e) {
+        var n = this.el,
+          o = this.options;
+        if (!o.disabled && this._allowPut()) {
+          if (Z({
+            sortable: this,
+            name: "onMove",
+            evt: $(t, {
+              target: R = d(e, o.draggable, n)
+            })
+          }), o.sortable || n !== H) return n === N || e !== n && f(n, o.draggable) ? void (R && !R.animating && !p(R, X) && this._allowSwap() && (R !== X && k !== X ? (n !== N ? this._onInsert(t) : R !== O && this._onChange(t), G = R) : G = R)) : (R = G = null, void this._onInsert(t));
+          N !== H && (R = G = O, J = 0, this._onInsert(t));
+        }
+      },
+      _onInsert: function (t) {
+        var e = this.el,
+          n = R || X,
+          o = "clone" === B && e !== H && N === H,
+          i = "clone" === B && e === H && N !== H,
+          r = p(R, document),
+          a = R === O && !r,
+          l = N[C],
+          s = H[C];
+        E = e, A = m(X), W = n, L = r ? R.parentNode : e, l.animator.collect(X.parentNode), this.animator.collect(L), o && (q.target = K, q.newIndex = A, q.relative = K === O ? 0 : _(X, K), y(O, "display", ""), s.options.group.revertDrag || X.parentNode.insertBefore(O, X)), i && (A = m(O), y(O, "display", "none")), y(X, "display", a ? "none" : ""), R && r ? L.insertBefore(X, J < 0 ? R : R.nextSibling) : L.appendChild(X), P = a ? z : m(X), o && s.options.group.revertDrag && (q.target = O, q.newIndex = z, q.relative = 0, Z({
+          sortable: s,
+          name: "onChange",
+          evt: $(t, {
+            to: H,
+            target: O,
+            newIndex: z,
+            revertDrag: !0
+          })
+        })), o || Z({
+          sortable: l,
+          name: "onRemove",
+          evt: $(t, {
+            newIndex: -1
+          })
+        }), i && n !== O && (K = n, Z({
+          sortable: this,
+          name: "onChange",
+          evt: $(t, {
+            from: H,
+            backToOrigin: !0
+          })
+        })), i || Z({
+          sortable: this,
+          name: "onAdd",
+          evt: $(t, {
+            oldIndex: -1
+          })
+        }), l.animator.animate(), this.animator.animate(), N = e;
+      },
+      _onChange: function (t) {
+        var e = this.el;
+        this.animator.collect(L), A = m(X), L = R.parentNode, W = R, e === H && (K = R), L.insertBefore(X, k), P = m(X), Z({
+          sortable: this,
+          name: "onChange",
+          evt: $(t)
+        }), this.animator.animate(), N = e;
+      },
+      _onDrop: function (t) {
+        var e = this,
+          n = this.options;
+        if (this._cancelStart(), c(U, "touchmove", this._nearestSortable), c(U, "mousemove", this._nearestSortable), c(U, "mouseup", this._onDrop), c(U, "touchend", this._onDrop), c(U, "touchcancel", this._onDrop), c(document, "selectstart", I), l && y(document.body, "user-select", ""), Y && Y.parentNode && Y.parentNode.removeChild(Y), H) {
+          if (N = H, A = z, W === X && (W = O), w(O, n.chosenClass, !1), Z({
+            sortable: this,
+            name: "onUnchoose",
+            evt: $(t)
+          }), F) {
+            this.animator.collect(L), w(X, n.chosenClass, !1), w(X, n.placeholderClass, !1);
+            var o = $(t);
+            !n.dropOnAnimationEnd && this._onEnd(o), this.animator.animate(function () {
+              n.dropOnAnimationEnd && e._onEnd(o);
+            });
+          } else this._nulling();
+        } else this._nulling();
+      },
+      _onEnd: function (e) {
+        var n = this.options,
+          o = "clone" === B,
+          i = N === E;
+        o && !i || !x(n.swapOnDrop, e) || L.insertBefore(O, X), o && !i || !x(n.removeCloneOnDrop, e) || X && X.parentNode && X.parentNode.removeChild(X), y(O, "display", ""), N !== E && Z({
+          sortable: N[C],
+          name: "onDrop",
+          evt: t({}, e, o ? q : {
+            newIndex: -1
+          })
+        }), Z({
+          sortable: E[C],
+          name: "onDrop",
+          evt: t({}, e, i ? {} : {
+            oldIndex: -1
+          })
+        }), this._nulling();
+      },
+      _nulling: function () {
+        E = N = O = R = k = H = X = Y = W = L = B = A = P = z = j = F = G = U = q = K = J = tt.clone = tt.ghost = tt.active = tt.dragged = null, this.autoScroller.nulling();
+      },
+      destroy: function () {
+        this._cancelStart(), this._nulling(), c(this.el, "touchstart", this._onDrag), c(this.el, "mousedown", this._onDrag);
+        var t = Q.indexOf(this.el);
+        t > -1 && Q.splice(t, 1), this.el[C] = this.animator = this.autoScroller = null;
+      },
+      option: function (t, e) {
+        if (void 0 === e) return this.options[t];
+        this.options[t] = e, this.animator.options[t] = e, this.autoScroller.options[t] = e, "group" === t && V(this.options);
+      }
+    }, tt.utils = {
+      on: s,
+      off: c,
+      css: y,
+      index: m,
+      matches: b,
+      closest: d,
+      getRect: u,
+      getChild: v,
+      toggleClass: w,
+      detectDirection: g
+    }, tt.get = function (t) {
+      return t[C];
+    }, tt.create = function (t, e) {
+      return new tt(t, e);
+    }, tt.store = {}, tt;
+  });
+})(sortableDnd_min, sortableDnd_min.exports);
+var sortableDnd_minExports = sortableDnd_min.exports;
+var Sortable = /*@__PURE__*/getDefaultExportFromCjs(sortableDnd_minExports);
+
+function throttle(fn, wait) {
+  var timer;
+  var result = function result() {
+    var _this = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timer) return;
+    if (wait <= 0) {
+      fn.apply(this, args);
+    } else {
+      timer = setTimeout(function () {
+        timer = null;
+        fn.apply(_this, args);
+      }, wait);
+    }
+  };
+  result['cancel'] = function () {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  return result;
+}
+function debounce(fn, wait) {
+  var throttled = throttle(fn, wait);
+  var result = function result() {
+    throttled['cancel']();
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    throttled.apply(this, args);
+  };
+  result['cancel'] = function () {
+    throttled['cancel']();
+  };
+  return result;
+}
+function isEqual(a, b) {
+  // 0 & -0
+  if (a === 0 && b === 0) {
+    return 1 / a === 1 / b;
+  }
+  // NaN
+  if (Number.isNaN(a) && Number.isNaN(b)) {
+    return true;
+  }
+  return a == b;
+}
+function getDataKey(item, dataKey) {
+  return (!Array.isArray(dataKey) ? dataKey.replace(/\[/g, '.').replace(/\]/g, '.').split('.') : dataKey).reduce(function (o, k) {
+    return (o || {})[k];
+  }, item);
+}
+function elementIsDocumentOrWindow(element) {
+  return element instanceof Document && element.nodeType === 9 || element instanceof Window;
+}
+
+var Virtual = /*#__PURE__*/function () {
+  function Virtual(options) {
+    _classCallCheck(this, Virtual);
+    this.options = options;
+    var defaults = {
+      size: 0,
+      keeps: 0,
+      buffer: 0,
+      wrapper: null,
+      scroller: null,
+      direction: 'vertical',
+      uniqueKeys: [],
+      debounceTime: null,
+      throttleTime: null
+    };
+    for (var name in defaults) {
+      !(name in this.options) && (this.options[name] = defaults[name]);
+    }
+    this.option('buffer', options.buffer);
+    this.sizes = new Map(); // store item size
+    this.sizeType = 'INIT';
+    this.fixedSize = 0;
+    this.averageSize = 0;
+    this.range = {
+      start: 0,
+      end: 0,
+      front: 0,
+      behind: 0
+    };
+    this.offset = 0;
+    this.direction = 'STATIONARY';
+    this.updateScrollElement();
+    this.updateOnScrollFunction();
+    this.addScrollEventListener();
+    this.checkIfUpdate(0, options.keeps - 1);
+  }
+  return _createClass(Virtual, [{
+    key: "isFixed",
+    value: function isFixed() {
+      return this.sizeType === 'FIXED';
+    }
+  }, {
+    key: "isFront",
+    value: function isFront() {
+      return this.direction === 'FRONT';
+    }
+  }, {
+    key: "isBehind",
+    value: function isBehind() {
+      return this.direction === 'BEHIND';
+    }
+  }, {
+    key: "isHorizontal",
+    value: function isHorizontal() {
+      return this.options.direction === 'horizontal';
+    }
+  }, {
+    key: "getSize",
+    value: function getSize(key) {
+      return this.sizes.get(key) || this.getItemSize();
+    }
+  }, {
+    key: "getOffset",
+    value: function getOffset() {
+      var offsetKey = this.isHorizontal() ? 'scrollLeft' : 'scrollTop';
+      return this.scrollEl[offsetKey];
+    }
+  }, {
+    key: "getScrollSize",
+    value: function getScrollSize() {
+      var sizeKey = this.isHorizontal() ? 'scrollWidth' : 'scrollHeight';
+      return this.scrollEl[sizeKey];
+    }
+  }, {
+    key: "getClientSize",
+    value: function getClientSize() {
+      var sizeKey = this.isHorizontal() ? 'offsetWidth' : 'offsetHeight';
+      return this.scrollEl[sizeKey];
+    }
+  }, {
+    key: "scrollToOffset",
+    value: function scrollToOffset(offset) {
+      var offsetKey = this.isHorizontal() ? 'scrollLeft' : 'scrollTop';
+      this.scrollEl[offsetKey] = offset;
+    }
+  }, {
+    key: "scrollToIndex",
+    value: function scrollToIndex(index) {
+      var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
+      if (index >= this.options.uniqueKeys.length - 1) {
+        this.scrollToBottom();
+        return;
+      }
+      if (index < 0) {
+        this.scrollToOffset(0);
+        return;
+      }
+      var offset = this.getOffset();
+      var clientSize = this.getClientSize();
+      // calc item position
+      var itemSize = this.getSize(this.options.uniqueKeys[index]);
+      var itemTop = this.getOffsetByRange(0, index) + this.getScrollStartOffset();
+      var itemBottom = itemTop + itemSize;
+      var viewportTop = offset;
+      var viewportBottom = offset + clientSize;
+      if (align === 'auto') {
+        if (itemTop >= viewportTop && itemBottom <= viewportBottom) {
+          return;
+        }
+        align = itemTop < viewportTop ? 'top' : 'bottom';
+      }
+      if (align === 'top') {
+        this.scrollToOffset(itemTop);
+      } else if (align === 'bottom') {
+        var targetOffset = Math.max(0, itemBottom - clientSize);
+        this.scrollToOffset(targetOffset);
+      }
+    }
+  }, {
+    key: "scrollToBottom",
+    value: function scrollToBottom() {
+      var _this = this;
+      var offset = this.getScrollSize();
+      this.scrollToOffset(offset);
+      // if the bottom is not reached, execute the scroll method again
+      setTimeout(function () {
+        if (!_this.isReachedBottom()) {
+          _this.scrollToBottom();
+        }
+      }, 5);
+    }
+  }, {
+    key: "isReachedBottom",
+    value: function isReachedBottom() {
+      return this.getOffset() + this.getClientSize() + 1 >= this.getScrollSize();
+    }
+  }, {
+    key: "option",
+    value: function option(key, value) {
+      var _this2 = this;
+      var oldValue = this.options[key];
+      this.options[key] = value;
+      if (key === 'buffer') {
+        if (value === undefined || value === null) {
+          this.buffer = Math.round(this.options.keeps / 3);
+        } else {
+          this.buffer = value;
+        }
+      }
+      if (key === 'uniqueKeys') {
+        this.sizes.forEach(function (_v, k) {
+          if (!value.includes(k)) {
+            _this2.sizes["delete"](k);
+          }
+        });
+      }
+      if (key === 'scroller') {
+        oldValue && Sortable.utils.off(oldValue, 'scroll', this.onScroll);
+        this.updateScrollElement();
+        this.addScrollEventListener();
+      }
+    }
+  }, {
+    key: "updateRange",
+    value: function updateRange(range) {
+      if (range) {
+        this.handleUpdate(range.start);
+        return;
+      }
+      var start = this.range.start;
+      start = Math.max(start, 0);
+      this.handleUpdate(start);
+    }
+  }, {
+    key: "updateItemSize",
+    value: function updateItemSize(key, size) {
+      if (!size || this.sizes.get(key) === size) {
+        return;
+      }
+      this.sizes.set(key, size);
+      if (this.sizeType === 'INIT') {
+        this.sizeType = 'FIXED';
+        this.fixedSize = size;
+      } else if (this.isFixed() && this.fixedSize !== size) {
+        this.sizeType = 'DYNAMIC';
+        this.fixedSize = 0;
+      }
+      // calculate the average size only once
+      if (!this.averageSize && this.sizeType === 'DYNAMIC' && this.sizes.size === this.options.keeps) {
+        this.updateAverageSize();
+      }
+    }
+  }, {
+    key: "updateAverageSize",
+    value: function updateAverageSize() {
+      var total = _toConsumableArray(this.sizes.values()).reduce(function (t, i) {
+        return t + i;
+      }, 0);
+      this.averageSize = Math.round(total / this.sizes.size);
+    }
+  }, {
+    key: "addScrollEventListener",
+    value: function addScrollEventListener() {
+      if (this.options.scroller) {
+        Sortable.utils.on(this.options.scroller, 'scroll', this.onScroll);
+      }
+    }
+  }, {
+    key: "removeScrollEventListener",
+    value: function removeScrollEventListener() {
+      if (this.options.scroller) {
+        Sortable.utils.off(this.options.scroller, 'scroll', this.onScroll);
+      }
+    }
+  }, {
+    key: "enableScroll",
+    value: function enableScroll(scrollable) {
+      var scroller = this.options.scroller;
+      var eventFn = scrollable ? Sortable.utils.off : Sortable.utils.on;
+      var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
+      eventFn(scroller, 'DOMMouseScroll', this.preventDefault);
+      eventFn(scroller, wheelEvent, this.preventDefault);
+      eventFn(scroller, 'touchmove', this.preventDefault);
+      eventFn(scroller, 'keydown', this.preventDefaultForKeyDown);
+    }
+  }, {
+    key: "preventDefault",
+    value: function preventDefault(e) {
+      e.preventDefault();
+    }
+  }, {
+    key: "preventDefaultForKeyDown",
+    value: function preventDefaultForKeyDown(e) {
+      var keys = {
+        37: 1,
+        38: 1,
+        39: 1,
+        40: 1
+      };
+      if (keys[e.keyCode]) {
+        this.preventDefault(e);
+        return false;
+      }
+    }
+  }, {
+    key: "updateScrollElement",
+    value: function updateScrollElement() {
+      var scroller = this.options.scroller;
+      if (elementIsDocumentOrWindow(scroller)) {
+        var scrollEl = document.scrollingElement || document.documentElement || document.body;
+        this.scrollEl = scrollEl;
+      } else {
+        this.scrollEl = scroller;
+      }
+    }
+  }, {
+    key: "updateOnScrollFunction",
+    value: function updateOnScrollFunction() {
+      var _this3 = this;
+      var _this$options = this.options,
+        debounceTime = _this$options.debounceTime,
+        throttleTime = _this$options.throttleTime;
+      if (debounceTime) {
+        this.onScroll = debounce(function () {
+          return _this3.handleScroll();
+        }, debounceTime);
+      } else if (throttleTime) {
+        this.onScroll = throttle(function () {
+          return _this3.handleScroll();
+        }, throttleTime);
+      } else {
+        this.onScroll = function () {
+          return _this3.handleScroll();
+        };
+      }
+    }
+  }, {
+    key: "handleScroll",
+    value: function handleScroll() {
+      var offset = this.getOffset();
+      var clientSize = this.getClientSize();
+      var scrollSize = this.getScrollSize();
+      if (offset === this.offset) {
+        this.direction = 'STATIONARY';
+      } else {
+        this.direction = offset < this.offset ? 'FRONT' : 'BEHIND';
+      }
+      this.offset = offset;
+      var top = this.isFront() && offset <= 0;
+      var bottom = this.isBehind() && clientSize + offset + 1 >= scrollSize;
+      this.options.onScroll({
+        top: top,
+        bottom: bottom,
+        offset: offset,
+        direction: this.direction
+      });
+      if (this.isFront()) {
+        this.handleScrollFront();
+      } else if (this.isBehind()) {
+        this.handleScrollBehind();
+      }
+    }
+  }, {
+    key: "handleScrollFront",
+    value: function handleScrollFront() {
+      var scrolls = this.getScrollItems();
+      if (scrolls >= this.range.start) {
+        return;
+      }
+      var start = Math.max(scrolls - this.buffer, 0);
+      this.checkIfUpdate(start, this.getEndByStart(start));
+    }
+  }, {
+    key: "handleScrollBehind",
+    value: function handleScrollBehind() {
+      var scrolls = this.getScrollItems();
+      if (scrolls < this.range.start + this.buffer) {
+        return;
+      }
+      this.checkIfUpdate(scrolls, this.getEndByStart(scrolls));
+    }
+  }, {
+    key: "getScrollItems",
+    value: function getScrollItems() {
+      var offset = this.offset - this.getScrollStartOffset();
+      if (offset <= 0) {
+        return 0;
+      }
+      if (this.isFixed()) {
+        return Math.floor(offset / this.fixedSize);
+      }
+      var low = 0;
+      var high = this.options.uniqueKeys.length;
+      var middle = 0;
+      var middleOffset = 0;
+      while (low <= high) {
+        middle = low + Math.floor((high - low) / 2);
+        middleOffset = this.getOffsetByRange(0, middle);
+        if (middleOffset === offset) {
+          return middle;
+        } else if (middleOffset < offset) {
+          low = middle + 1;
+        } else if (middleOffset > offset) {
+          high = middle - 1;
+        }
+      }
+      return low > 0 ? --low : 0;
+    }
+  }, {
+    key: "checkIfUpdate",
+    value: function checkIfUpdate(start, end) {
+      var keeps = this.options.keeps;
+      var total = this.options.uniqueKeys.length;
+      if (total <= keeps) {
+        start = 0;
+      } else if (end - start < keeps - 1) {
+        start = end - keeps + 1;
+      }
+      if (this.range.start !== start) {
+        this.handleUpdate(start);
+      }
+    }
+  }, {
+    key: "handleUpdate",
+    value: function handleUpdate(start) {
+      var rangeChanged = this.range.start !== start;
+      this.range.start = start;
+      this.range.end = this.getEndByStart(start);
+      this.range.front = this.getFrontOffset();
+      this.range.behind = this.getBehindOffset();
+      this.options.onUpdate(Object.assign({}, this.range), rangeChanged);
+    }
+  }, {
+    key: "getFrontOffset",
+    value: function getFrontOffset() {
+      if (this.isFixed()) {
+        return this.fixedSize * this.range.start;
+      } else {
+        return this.getOffsetByRange(0, this.range.start);
+      }
+    }
+  }, {
+    key: "getBehindOffset",
+    value: function getBehindOffset() {
+      var end = this.range.end;
+      var last = this.getLastIndex();
+      if (this.isFixed()) {
+        return (last - end) * this.fixedSize;
+      }
+      return (last - end) * this.getItemSize();
+    }
+  }, {
+    key: "getOffsetByRange",
+    value: function getOffsetByRange(start, end) {
+      if (start >= end) {
+        return 0;
+      }
+      var offset = 0;
+      for (var i = start; i < end; i++) {
+        var size = this.sizes.get(this.options.uniqueKeys[i]);
+        offset = offset + (typeof size === 'number' ? size : this.getItemSize());
+      }
+      return offset;
+    }
+  }, {
+    key: "getEndByStart",
+    value: function getEndByStart(start) {
+      return Math.min(start + this.options.keeps - 1, this.getLastIndex());
+    }
+  }, {
+    key: "getLastIndex",
+    value: function getLastIndex() {
+      var _this$options2 = this.options,
+        uniqueKeys = _this$options2.uniqueKeys,
+        keeps = _this$options2.keeps;
+      return uniqueKeys.length > 0 ? uniqueKeys.length - 1 : keeps - 1;
+    }
+  }, {
+    key: "getItemSize",
+    value: function getItemSize() {
+      return this.isFixed() ? this.fixedSize : this.options.size || this.averageSize;
+    }
+  }, {
+    key: "getScrollStartOffset",
+    value: function getScrollStartOffset() {
+      var _this$options3 = this.options,
+        wrapper = _this$options3.wrapper,
+        scroller = _this$options3.scroller;
+      if (scroller === wrapper) {
+        return 0;
+      }
+      var offset = 0;
+      if (scroller && wrapper) {
+        var offsetKey = this.isHorizontal() ? 'left' : 'top';
+        var rect = elementIsDocumentOrWindow(scroller) ? Sortable.utils.getRect(wrapper) : Sortable.utils.getRect(wrapper, true, scroller);
+        offset = this.offset + rect[offsetKey];
+      }
+      return offset;
+    }
+  }]);
+}();
+
+var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'scrollSpeed', 'appendToBody', 'ghostContainer', 'scrollThreshold', 'delayOnTouchOnly', 'placeholderClass', 'dropOnAnimationEnd'];
+var VirtualAttrs = ['size', 'keeps', 'buffer', 'scroller', 'direction', 'debounceTime', 'throttleTime'];
+var VirtualSortable = /*#__PURE__*/function () {
+  function VirtualSortable(el, options) {
+    _classCallCheck(this, VirtualSortable);
+    this.el = el;
+    this.options = options;
+    this.initVirtual();
+    this.initSortable();
+  }
+  return _createClass(VirtualSortable, [{
+    key: "destroy",
+    value: function destroy() {
+      this.virtual.removeScrollEventListener();
+      this.sortable.destroy();
+    }
+  }, {
+    key: "option",
+    value: function option(key, value) {
+      this.options[key] = value;
+      if (VirtualAttrs.includes(key) || key === 'uniqueKeys') {
+        this.virtual.option(key, value);
+      }
+      if (SortableAttrs.includes(key)) {
+        this.sortable.option(key, value);
+      }
+    }
+  }, {
+    key: "call",
+    value: function call(method) {
+      if (method in this.virtual) {
+        var func = this.virtual[method];
+        if (typeof func === 'function') {
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+          return func.apply(this.virtual, args);
+        }
+        throw new Error("Property ".concat(String(method), " is not a function on Virtual."));
+      } else {
+        throw new Error("Method ".concat(String(method), " does not exist on Virtual."));
+      }
+    }
+    // ========================================== virtual ==========================================
+  }, {
+    key: "initVirtual",
+    value: function initVirtual() {
+      var _this = this;
+      var props = VirtualAttrs.reduce(function (res, key) {
+        res[key] = _this.options[key];
+        return res;
+      }, {});
+      this.virtual = new Virtual(Object.assign(Object.assign({}, props), {
+        wrapper: this.options.wrapper,
+        uniqueKeys: this.options.uniqueKeys,
+        onScroll: function onScroll(event) {
+          return _this.onScroll(event);
+        },
+        onUpdate: function onUpdate(range, changed) {
+          return _this.onUpdate(range, changed);
+        }
+      }));
+    }
+  }, {
+    key: "onScroll",
+    value: function onScroll(event) {
+      this.dispatchEvent('onScroll', event);
+    }
+  }, {
+    key: "onUpdate",
+    value: function onUpdate(range, changed) {
+      if (this.sortableState === 'dragging' && changed) {
+        this.removeDraggedEl = true;
+      }
+      this.dispatchEvent('onUpdate', range, changed);
+    }
+    // ========================================== sortable ==========================================
+  }, {
+    key: "initSortable",
+    value: function initSortable() {
+      var _this2 = this;
+      var props = SortableAttrs.reduce(function (res, key) {
+        res[key] = _this2.options[key];
+        return res;
+      }, {});
+      this.sortable = new Sortable(this.el, Object.assign(Object.assign({}, props), {
+        emptyInsertThreshold: 0,
+        swapOnDrop: false,
+        removeCloneOnDrop: function removeCloneOnDrop(event) {
+          return event.from === event.to;
+        },
+        onDrag: function onDrag(event) {
+          return _this2.onDrag(event);
+        },
+        onDrop: function onDrop(event) {
+          return _this2.onDrop(event);
+        }
+      }));
+    }
+  }, {
+    key: "onDrag",
+    value: function onDrag(event) {
+      this.sortableState = 'dragging';
+      var key = event.node.getAttribute('data-key');
+      var index = this.getIndex(key);
+      // store the dragged item
+      this.sortable.option('store', {
+        key: key,
+        index: index
+      });
+      this.dispatchEvent('onDrag', {
+        key: key,
+        index: index,
+        event: event
+      });
+    }
+  }, {
+    key: "onDrop",
+    value: function onDrop(event) {
+      var _a, _b;
+      var _Sortable$get$option = Sortable.get(event.from).option('store'),
+        key = _Sortable$get$option.key,
+        index = _Sortable$get$option.index;
+      var evt = {
+        key: key,
+        event: event,
+        changed: false,
+        oldIndex: index,
+        newIndex: index
+      };
+      if (!(event.from === event.to && event.node === event.target)) {
+        var eventProps = this.getEventProperties(evt, event);
+        Object.assign(evt, eventProps);
+      }
+      this.dispatchEvent('onDrop', evt);
+      if (event.from === this.el && this.removeDraggedEl) {
+        (_a = Sortable.dragged) === null || _a === void 0 ? void 0 : _a.remove();
+      }
+      if (event.from !== event.to) {
+        (_b = Sortable.clone) === null || _b === void 0 ? void 0 : _b.remove();
+      }
+      this.sortableState = '';
+      this.removeDraggedEl = false;
+    }
+  }, {
+    key: "getEventProperties",
+    value: function getEventProperties(evt, event) {
+      var key = evt.key;
+      var index = evt.oldIndex;
+      var targetKey = event.target.getAttribute('data-key');
+      var newIndex = -1;
+      var oldIndex = index;
+      // changes position in current list
+      if (event.from === event.to) {
+        // re-get the dragged element's index
+        oldIndex = this.getIndex(key);
+        newIndex = this.getIndex(targetKey);
+        if (oldIndex < newIndex && event.relative === -1 || oldIndex > newIndex && event.relative === 1) {
+          newIndex += event.relative;
+        }
+      } else {
+        // removed from current list
+        if (event.from === this.el) {
+          oldIndex = this.getIndex(key);
+        }
+        // added to another list
+        if (event.to === this.el) {
+          oldIndex = -1;
+          newIndex = this.getIndex(targetKey);
+          if (event.relative === 0) {
+            // added to last
+            newIndex = this.options.uniqueKeys.length;
+          } else if (event.relative === 1) {
+            newIndex += event.relative;
+          }
+        }
+      }
+      return {
+        changed: event.from !== event.to || newIndex !== oldIndex,
+        oldIndex: oldIndex,
+        newIndex: newIndex
+      };
+    }
+  }, {
+    key: "getIndex",
+    value: function getIndex(key) {
+      if (key === null || key === undefined) {
+        return -1;
+      }
+      var uniqueKeys = this.options.uniqueKeys;
+      for (var i = 0, len = uniqueKeys.length; i < len; i++) {
+        if (isEqual(uniqueKeys[i], key)) {
+          return i;
+        }
+      }
+      return -1;
+    }
+  }, {
+    key: "dispatchEvent",
+    value: function dispatchEvent(name) {
+      // call only when the option exists
+      if (name in this.options) {
+        var func = this.options[name];
+        if (typeof func === 'function') {
+          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            args[_key2 - 1] = arguments[_key2];
+          }
+          return func.apply(this, args);
+        }
+      }
+    }
+  }]);
+}();
+
+function Item(props) {
+  var dataKey = props.dataKey,
+    horizontal = props.horizontal,
+    dragging = props.dragging,
+    children = props.children,
+    onSizeChange = props.onSizeChange;
+  var eleRef = React__namespace.useRef(null);
+  React__namespace.useLayoutEffect(function () {
+    var observer;
+    if ((typeof ResizeObserver === "undefined" ? "undefined" : _typeof(ResizeObserver)) !== undefined) {
+      observer = new ResizeObserver(function () {
+        var sizeKey = horizontal ? 'offsetWidth' : 'offsetHeight';
+        var size = eleRef.current[sizeKey];
+        onSizeChange(dataKey, size);
+      });
+      eleRef.current && (observer === null || observer === void 0 ? void 0 : observer.observe(eleRef.current));
+    }
+    return function () {
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    };
+  }, [eleRef]);
+  var itemStyle = React__namespace.useMemo(function () {
+    var style = children.props.style || {};
+    var isDragging = isEqual(dataKey, dragging);
+    return Object.assign(Object.assign({}, style), {
+      display: isDragging ? 'none' : ''
+    });
+  }, [dragging]);
+  return /*#__PURE__*/React__namespace.cloneElement(children, {
+    'data-key': dataKey,
+    role: 'item',
+    ref: eleRef,
+    style: itemStyle,
+    className: children.props.className
+  });
+}
+var Item$1 = /*#__PURE__*/React__namespace.memo(Item);
+
+function useChildren(props) {
+  var list = props.list,
+    start = props.start,
+    end = props.end,
+    dataKey = props.dataKey,
+    horizontal = props.horizontal,
+    dragging = props.dragging,
+    children = props.children,
+    onSizeChange = props.onSizeChange;
+  return React__namespace.useMemo(function () {
+    return list.slice(start, end + 1).map(function (item, i) {
+      var index = start + i;
+      var key = getDataKey(item, dataKey);
+      return /*#__PURE__*/React__namespace.createElement(Item$1, {
+        key: key,
+        dataKey: key,
+        dragging: dragging,
+        horizontal: horizontal,
+        onSizeChange: onSizeChange
+      }, typeof children === 'function' ? children(item, index, key) : children);
+    });
+  }, [list, start, end, dataKey, horizontal, dragging, children]);
+}
+
+function useCombine(states, effect) {
+  React__namespace.useEffect(effect, Object.values(states));
+}
+
+var draggingItem;
+function VirtualList(props, ref) {
+  var _props$dataKey = props.dataKey,
+    dataKey = _props$dataKey === void 0 ? '' : _props$dataKey,
+    _props$dataSource = props.dataSource,
+    dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+    _props$tableMode = props.tableMode,
+    tableMode = _props$tableMode === void 0 ? false : _props$tableMode,
+    _props$wrapTag = props.wrapTag,
+    wrapTag = _props$wrapTag === void 0 ? 'div' : _props$wrapTag,
+    _props$rootTag = props.rootTag,
+    rootTag = _props$rootTag === void 0 ? 'div' : _props$rootTag,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$wrapStyle = props.wrapStyle,
+    wrapStyle = _props$wrapStyle === void 0 ? {} : _props$wrapStyle,
+    _props$wrapClass = props.wrapClass,
+    wrapClass = _props$wrapClass === void 0 ? '' : _props$wrapClass,
+    _props$size = props.size,
+    size = _props$size === void 0 ? undefined : _props$size,
+    _props$keeps = props.keeps,
+    keeps = _props$keeps === void 0 ? 30 : _props$keeps,
+    _props$buffer = props.buffer,
+    buffer = _props$buffer === void 0 ? undefined : _props$buffer,
+    _props$scroller = props.scroller,
+    scroller = _props$scroller === void 0 ? undefined : _props$scroller,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'vertical' : _props$direction,
+    _props$debounceTime = props.debounceTime,
+    debounceTime = _props$debounceTime === void 0 ? 0 : _props$debounceTime,
+    _props$throttleTime = props.throttleTime,
+    throttleTime = _props$throttleTime === void 0 ? 0 : _props$throttleTime,
+    _props$delay = props.delay,
+    delay = _props$delay === void 0 ? 0 : _props$delay,
+    _props$group = props.group,
+    group = _props$group === void 0 ? '' : _props$group,
+    _props$handle = props.handle,
+    handle = _props$handle === void 0 ? '' : _props$handle,
+    _props$lockAxis = props.lockAxis,
+    lockAxis = _props$lockAxis === void 0 ? undefined : _props$lockAxis,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$sortable = props.sortable,
+    sortable = _props$sortable === void 0 ? true : _props$sortable,
+    _props$draggable = props.draggable,
+    draggable = _props$draggable === void 0 ? '[role="item"]' : _props$draggable,
+    _props$animation = props.animation,
+    animation = _props$animation === void 0 ? 150 : _props$animation,
+    _props$autoScroll = props.autoScroll,
+    autoScroll = _props$autoScroll === void 0 ? true : _props$autoScroll,
+    _props$scrollSpeed = props.scrollSpeed,
+    scrollSpeed = _props$scrollSpeed === void 0 ? {
+      x: 10,
+      y: 10
+    } : _props$scrollSpeed,
+    _props$ghostClass = props.ghostClass,
+    ghostClass = _props$ghostClass === void 0 ? '' : _props$ghostClass,
+    _props$ghostStyle = props.ghostStyle,
+    ghostStyle = _props$ghostStyle === void 0 ? undefined : _props$ghostStyle,
+    _props$chosenClass = props.chosenClass,
+    chosenClass = _props$chosenClass === void 0 ? '' : _props$chosenClass,
+    _props$placeholderCla = props.placeholderClass,
+    placeholderClass = _props$placeholderCla === void 0 ? '' : _props$placeholderCla,
+    _props$appendToBody = props.appendToBody,
+    appendToBody = _props$appendToBody === void 0 ? false : _props$appendToBody,
+    _props$scrollThreshol = props.scrollThreshold,
+    scrollThreshold = _props$scrollThreshol === void 0 ? 55 : _props$scrollThreshol,
+    _props$delayOnTouchOn = props.delayOnTouchOnly,
+    delayOnTouchOnly = _props$delayOnTouchOn === void 0 ? false : _props$delayOnTouchOn,
+    _props$dropOnAnimatio = props.dropOnAnimationEnd,
+    dropOnAnimationEnd = _props$dropOnAnimatio === void 0 ? true : _props$dropOnAnimatio;
+  var _React$useState = React__namespace.useState({
+      start: 0,
+      end: keeps - 1,
+      front: 0,
+      behind: 0
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    range = _React$useState2[0],
+    setRange = _React$useState2[1];
+  var dragging = React__namespace.useRef('');
+  var rootElRef = React__namespace.useRef();
+  var wrapElRef = React__namespace.useRef();
+  /**
+   * git item size by data-key
+   */
+  var getSize = function getSize(key) {
+    return VS.current.call('getSize', key);
+  };
+  /**
+   * Get the current scroll height
+   */
+  var getOffset = function getOffset() {
+    return VS.current.call('getOffset');
+  };
+  /**
+   * Get client viewport size
+   */
+  var getClientSize = function getClientSize() {
+    return VS.current.call('getClientSize');
+  };
+  /**
+   * Get all scroll size
+   */
+  var getScrollSize = function getScrollSize() {
+    return VS.current.call('getScrollSize');
+  };
+  /**
+   * Scroll to the specified offset
+   */
+  var scrollToOffset = function scrollToOffset(offset) {
+    VS.current.call('scrollToOffset', offset);
+  };
+  /**
+   * Scroll to the specified index position
+   */
+  var scrollToIndex = function scrollToIndex(index, align) {
+    VS.current.call('scrollToIndex', index, align);
+  };
+  /**
+   * Scroll to the specified data-key position
+   */
+  var scrollToKey = function scrollToKey(key, align) {
+    var index = uniqueKeys.current.indexOf(key);
+    if (index > -1) {
+      VS.current.call('scrollToIndex', index, align);
+    }
+  };
+  /**
+   * Scroll to top of list
+   */
+  var scrollToTop = function scrollToTop() {
+    scrollToOffset(0);
+  };
+  /**
+   * Scroll to bottom of list
+   */
+  var scrollToBottom = function scrollToBottom() {
+    VS.current.call('scrollToBottom');
+  };
+  React__namespace.useImperativeHandle(ref, function () {
+    return {
+      getSize: getSize,
+      getOffset: getOffset,
+      getClientSize: getClientSize,
+      getScrollSize: getScrollSize,
+      scrollToTop: scrollToTop,
+      scrollToKey: scrollToKey,
+      scrollToIndex: scrollToIndex,
+      scrollToOffset: scrollToOffset,
+      scrollToBottom: scrollToBottom
+    };
+  });
+  // ========================================== data source ==========================================
+  var list = React__namespace.useRef([]);
+  var uniqueKeys = React__namespace.useRef([]);
+  var lastListLength = React__namespace.useRef(0);
+  var listLengthWhenTopLoading = React__namespace.useRef(0);
+  React__namespace.useEffect(function () {
+    var _a;
+    list.current = dataSource;
+    updateUniqueKeys();
+    detectRangeChange(lastListLength.current, dataSource.length);
+    // if auto scroll to the last offset
+    if (listLengthWhenTopLoading.current && props.keepOffset) {
+      var index = dataSource.length - listLengthWhenTopLoading.current;
+      if (index > 0) {
+        (_a = VS.current) === null || _a === void 0 ? void 0 : _a.call('scrollToIndex', index);
+      }
+      listLengthWhenTopLoading.current = 0;
+    }
+    lastListLength.current = dataSource.length;
+  }, [dataSource]);
+  React__namespace.useEffect(function () {
+    initVirtualSortable();
+    return function () {
+      VS.current.destroy();
+    };
+  }, []);
+  var updateUniqueKeys = function updateUniqueKeys() {
+    var _a;
+    uniqueKeys.current = list.current.map(function (item) {
+      return getDataKey(item, dataKey);
+    });
+    (_a = VS.current) === null || _a === void 0 ? void 0 : _a.option('uniqueKeys', uniqueKeys.current);
+  };
+  var detectRangeChange = function detectRangeChange(oldListLength, newListLength) {
+    var _a, _b;
+    if (oldListLength === newListLength) {
+      return;
+    }
+    var newRange = Object.assign({}, range);
+    if (oldListLength > keeps && newListLength > oldListLength && newRange.end === oldListLength - 1 && ((_a = VS.current) === null || _a === void 0 ? void 0 : _a.call('isReachedBottom'))) {
+      newRange.start++;
+    }
+    (_b = VS.current) === null || _b === void 0 ? void 0 : _b.call('updateRange', newRange);
+  };
+  var dispatchEvent = function dispatchEvent(name) {
+    var handler = props[name];
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    handler && handler.apply(null, args);
+  };
+  // ========================================== virtual sortable ==========================================
+  var VS = React__namespace.useRef();
+  var combinedAttrs = {
+    // virtual attrs
+    size: size,
+    keeps: keeps,
+    buffer: buffer,
+    scroller: scroller,
+    direction: direction,
+    debounceTime: debounceTime,
+    throttleTime: throttleTime,
+    // sortable attrs
+    delay: delay,
+    group: group,
+    handle: handle,
+    lockAxis: lockAxis,
+    disabled: disabled,
+    sortable: sortable,
+    draggable: draggable,
+    animation: animation,
+    autoScroll: autoScroll,
+    ghostClass: ghostClass,
+    ghostStyle: ghostStyle,
+    chosenClass: chosenClass,
+    scrollSpeed: scrollSpeed,
+    appendToBody: appendToBody,
+    scrollThreshold: scrollThreshold,
+    delayOnTouchOnly: delayOnTouchOnly,
+    placeholderClass: placeholderClass,
+    dropOnAnimationEnd: dropOnAnimationEnd
+  };
+  var initVirtualSortable = function initVirtualSortable() {
+    VS.current = new VirtualSortable(rootElRef.current, Object.assign(Object.assign({}, combinedAttrs), {
+      wrapper: wrapElRef.current,
+      scroller: scroller || rootElRef.current,
+      uniqueKeys: uniqueKeys.current,
+      ghostContainer: wrapElRef.current,
+      onDrag: onDrag,
+      onDrop: onDrop,
+      onScroll: onScroll,
+      onUpdate: onUpdate
+    }));
+  };
+  useCombine(combinedAttrs, function () {
+    if (!VS.current) return;
+    Object.keys(combinedAttrs).forEach(function (key) {
+      if (props[key] !== void 0) {
+        VS.current.option(key, props[key]);
+      }
+    });
+  });
+  var handleToTop = debounce(function () {
+    listLengthWhenTopLoading.current = list.current.length;
+    dispatchEvent('onTop');
+  }, 50);
+  var handleToBottom = debounce(function () {
+    dispatchEvent('onBottom');
+  }, 50);
+  var onScroll = function onScroll(event) {
+    dispatchEvent('onScroll', event);
+    listLengthWhenTopLoading.current = 0;
+    if (event.top) {
+      handleToTop();
+    } else if (event.bottom) {
+      handleToBottom();
+    }
+  };
+  var onUpdate = function onUpdate(range, changed) {
+    setRange(range);
+    changed && dispatchEvent('onRangeChange', range);
+  };
+  var onSizeChange = function onSizeChange(key, size) {
+    // ignore changes for dragging element
+    if (isEqual(key, dragging.current) || !VS.current) {
+      return;
+    }
+    var sizes = VS.current.virtual.sizes.size;
+    VS.current.call('updateItemSize', key, size);
+    if (sizes === keeps - 1 && list.current.length > keeps) {
+      VS.current.call('updateRange', range);
+    }
+  };
+  var onDrag = function onDrag(event) {
+    var _a, _b;
+    var key = event.key,
+      index = event.index;
+    var item = list.current[index];
+    dragging.current = key;
+    draggingItem = item;
+    if (!sortable) {
+      (_a = VS.current) === null || _a === void 0 ? void 0 : _a.call('enableScroll', false);
+      (_b = VS.current) === null || _b === void 0 ? void 0 : _b.option('autoScroll', false);
+    }
+    dispatchEvent('onDrag', Object.assign(Object.assign({}, event), {
+      item: item
+    }));
+  };
+  var onDrop = function onDrop(event) {
+    var item = draggingItem;
+    var oldIndex = event.oldIndex,
+      newIndex = event.newIndex;
+    var oldList = _toConsumableArray(list.current);
+    var newList = _toConsumableArray(list.current);
+    if (oldIndex === -1) {
+      newList.splice(newIndex, 0, item);
+    } else if (newIndex === -1) {
+      newList.splice(oldIndex, 1);
+    } else {
+      newList.splice(oldIndex, 1);
+      newList.splice(newIndex, 0, item);
+    }
+    VS.current.call('enableScroll', true);
+    VS.current.option('autoScroll', props.autoScroll);
+    dragging.current = '';
+    dispatchEvent('onDrop', Object.assign(Object.assign({}, event), {
+      item: item,
+      list: newList,
+      oldList: oldList
+    }));
+  };
+  // ========================================== layout ==========================================
+  var _React$useMemo = React__namespace.useMemo(function () {
+      var front = range.front,
+        behind = range.behind;
+      var isHorizontal = direction === 'horizontal';
+      var overflow = isHorizontal ? 'auto hidden' : 'hidden auto';
+      var padding = isHorizontal ? "0px ".concat(behind, "px 0px ").concat(front, "px") : "".concat(front, "px 0px ").concat(behind, "px");
+      var rootElStyle = Object.assign(Object.assign({}, style), {
+        overflow: tableMode || scroller ? '' : overflow
+      });
+      var wrapElStyle = Object.assign(Object.assign({}, wrapStyle), {
+        padding: tableMode ? '' : padding
+      });
+      return {
+        rootElStyle: rootElStyle,
+        wrapElStyle: wrapElStyle
+      };
+    }, [range, style, wrapStyle, scroller, tableMode, direction]),
+    rootElStyle = _React$useMemo.rootElStyle,
+    wrapElStyle = _React$useMemo.wrapElStyle;
+  var _React$useMemo2 = React__namespace.useMemo(function () {
+      var rootElTag = tableMode ? 'table' : wrapTag;
+      var wrapElTag = tableMode ? 'tbody' : wrapTag;
+      return {
+        rootElTag: rootElTag,
+        wrapElTag: wrapElTag
+      };
+    }, [rootTag, wrapTag, tableMode]),
+    rootElTag = _React$useMemo2.rootElTag,
+    wrapElTag = _React$useMemo2.wrapElTag;
+  var listChildren = useChildren({
+    list: dataSource,
+    start: range.start,
+    end: range.end,
+    dataKey: dataKey,
+    children: props.children,
+    dragging: dragging.current,
+    horizontal: direction === 'horizontal',
+    onSizeChange: onSizeChange
+  });
+  var TableSpacer = function TableSpacer(offset, key) {
+    var offsetKey = direction === 'vertical' ? 'height' : 'width';
+    var style = _defineProperty({
+      padding: 0,
+      border: 0
+    }, offsetKey, "".concat(offset, "px"));
+    return /*#__PURE__*/React__namespace.createElement("tr", {
+      key: key
+    }, /*#__PURE__*/React__namespace.createElement("td", {
+      style: style
+    }));
+  };
+  return /*#__PURE__*/React__namespace.createElement(rootElTag, {
+    ref: rootElRef,
+    style: rootElStyle,
+    className: className
+  }, props.header, React__namespace.createElement.apply(React__namespace, [wrapElTag, {
+    ref: wrapElRef,
+    style: wrapElStyle,
+    className: wrapClass
+  }, tableMode && TableSpacer(range.front, 'front')].concat(_toConsumableArray(listChildren), [tableMode && TableSpacer(range.behind, 'behind')])), props.footer);
+}
+var index = /*#__PURE__*/React__namespace.forwardRef(VirtualList);
+
+module.exports = index;