@titaui/pc 1.16.66 → 1.16.67

package/lib/components/scrollbar/simplebar/simplebar.js

@@ -4,121 +4,169 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _lodash2 = _interopRequireDefault(require("lodash.debounce"));
+
 var _lodash3 = _interopRequireDefault(require("lodash.memoize"));
+
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
 var _canUseDom = _interopRequireDefault(require("can-use-dom"));
+
 var _scrollbarWidth = _interopRequireDefault(require("./scrollbar-width"));
+
 var _helpers = require("./helpers");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
 var SimpleBar = /*#__PURE__*/function () {
   function SimpleBar(element, options) {
     var _this = this;
+
     _classCallCheck(this, SimpleBar);
+
     this.onScroll = function () {
       var elWindow = (0, _helpers.getElementWindow)(_this.el);
+
       if (!_this.scrollXTicking) {
         elWindow.requestAnimationFrame(_this.scrollX);
         _this.scrollXTicking = true;
       }
+
       if (!_this.scrollYTicking) {
         elWindow.requestAnimationFrame(_this.scrollY);
         _this.scrollYTicking = true;
       }
     };
+
     this.scrollX = function () {
       if (_this.axis.x.isOverflowing) {
         _this.showScrollbar("x");
+
         _this.positionScrollbar("x");
       }
+
       _this.scrollXTicking = false;
     };
+
     this.scrollY = function () {
       if (_this.axis.y.isOverflowing) {
         _this.showScrollbar("y");
+
         _this.positionScrollbar("y");
       }
+
       _this.scrollYTicking = false;
     };
+
     this.onMouseEnter = function () {
       _this.showScrollbar("x");
+
       _this.showScrollbar("y");
     };
+
     this.onMouseMove = function (e) {
       _this.mouseX = e.clientX;
       _this.mouseY = e.clientY;
+
       if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
         _this.onMouseMoveForAxis("x");
       }
+
       if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
         _this.onMouseMoveForAxis("y");
       }
     };
+
     this.onMouseLeave = function () {
       _this.onMouseMove.cancel();
+
       if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
         _this.onMouseLeaveForAxis("x");
       }
+
       if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
         _this.onMouseLeaveForAxis("y");
       }
+
       _this.mouseX = -1;
       _this.mouseY = -1;
     };
+
     this.onWindowResize = function () {
       // Recalculate scrollbarWidth in case it's a zoom
       _this.scrollbarWidth = _this.getScrollbarWidth();
+
       _this.hideNativeScrollbar();
     };
+
     this.hideScrollbars = function () {
       _this.axis.x.track.rect = _this.axis.x.track.el.getBoundingClientRect();
       _this.axis.y.track.rect = _this.axis.y.track.el.getBoundingClientRect();
+
       if (!_this.isWithinBounds(_this.axis.y.track.rect)) {
         _this.axis.y.scrollbar.el.classList.remove(_this.classNames.visible);
+
         _this.axis.y.isVisible = false;
       }
+
       if (!_this.isWithinBounds(_this.axis.x.track.rect)) {
         _this.axis.x.scrollbar.el.classList.remove(_this.classNames.visible);
+
         _this.axis.x.isVisible = false;
       }
     };
+
     this.onPointerEvent = function (e) {
       var isWithinTrackXBounds;
       var isWithinTrackYBounds;
       _this.axis.x.track.rect = _this.axis.x.track.el.getBoundingClientRect();
       _this.axis.y.track.rect = _this.axis.y.track.el.getBoundingClientRect();
+
       if (_this.axis.x.isOverflowing || _this.axis.x.forceVisible) {
         isWithinTrackXBounds = _this.isWithinBounds(_this.axis.x.track.rect);
       }
+
       if (_this.axis.y.isOverflowing || _this.axis.y.forceVisible) {
         isWithinTrackYBounds = _this.isWithinBounds(_this.axis.y.track.rect);
-      }
+      } // If any pointer event is called on the scrollbar
+
 
-      // If any pointer event is called on the scrollbar
       if (isWithinTrackXBounds || isWithinTrackYBounds) {
         // Preventing the event's default action stops text being
         // selectable during the drag.
-        e.preventDefault();
-        // Prevent event leaking
+        e.preventDefault(); // Prevent event leaking
+
         e.stopPropagation();
+
         if (e.type === "mousedown") {
           if (isWithinTrackXBounds) {
             _this.axis.x.scrollbar.rect = _this.axis.x.scrollbar.el.getBoundingClientRect();
+
             if (_this.isWithinBounds(_this.axis.x.scrollbar.rect)) {
               _this.onDragStart(e, "x");
             } else {
               _this.onTrackClick(e, "x");
             }
           }
+
           if (isWithinTrackYBounds) {
             _this.axis.y.scrollbar.rect = _this.axis.y.scrollbar.el.getBoundingClientRect();
+
             if (_this.isWithinBounds(_this.axis.y.scrollbar.rect)) {
               _this.onDragStart(e, "y");
             } else {
@@ -128,6 +176,7 @@ var SimpleBar = /*#__PURE__*/function () {
         }
       }
     };
+
     this.drag = function (e) {
       var eventOffset;
       var track = _this.axis[_this.draggedAxis].track;
@@ -137,33 +186,36 @@ var SimpleBar = /*#__PURE__*/function () {
       var hostSize = parseInt(_this.elStyles[_this.axis[_this.draggedAxis].sizeAttr], 10);
       e.preventDefault();
       e.stopPropagation();
+
       if (_this.draggedAxis === "y") {
         eventOffset = e.pageY;
       } else {
         eventOffset = e.pageX;
-      }
+      } // Calculate how far the user's mouse is from the top/left of the scrollbar (minus the dragOffset).
+
 
-      // Calculate how far the user's mouse is from the top/left of the scrollbar (minus the dragOffset).
-      var dragPos = eventOffset - track.rect[_this.axis[_this.draggedAxis].offsetAttr] - _this.axis[_this.draggedAxis].dragOffset;
-      // Convert the mouse position into a percentage of the scrollbar height/width.
-      var dragPerc = dragPos / (trackSize - scrollbar.size);
+      var dragPos = eventOffset - track.rect[_this.axis[_this.draggedAxis].offsetAttr] - _this.axis[_this.draggedAxis].dragOffset; // Convert the mouse position into a percentage of the scrollbar height/width.
 
-      // Scroll the content by the same percentage.
-      var scrollPos = dragPerc * (contentSize - hostSize);
+      var dragPerc = dragPos / (trackSize - scrollbar.size); // Scroll the content by the same percentage.
+
+      var scrollPos = dragPerc * (contentSize - hostSize); // Fix browsers inconsistency on RTL
 
-      // Fix browsers inconsistency on RTL
       if (_this.draggedAxis === "x") {
         scrollPos = _this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollbarInverted ? scrollPos - (trackSize + scrollbar.size) : scrollPos;
         scrollPos = _this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollingInverted ? -scrollPos : scrollPos;
       }
+
       _this.contentWrapperEl[_this.axis[_this.draggedAxis].scrollOffsetAttr] = scrollPos;
     };
+
     this.onEndDrag = function (e) {
       var elDocument = (0, _helpers.getElementDocument)(_this.el);
       var elWindow = (0, _helpers.getElementWindow)(_this.el);
       e.preventDefault();
       e.stopPropagation();
+
       _this.el.classList.remove(_this.classNames.dragging);
+
       elDocument.removeEventListener("mousemove", _this.drag, true);
       elDocument.removeEventListener("mouseup", _this.onEndDrag, true);
       _this.removePreventClickId = elWindow.setTimeout(function () {
@@ -174,10 +226,12 @@ var SimpleBar = /*#__PURE__*/function () {
         _this.removePreventClickId = null;
       });
     };
+
     this.preventClick = function (e) {
       e.preventDefault();
       e.stopPropagation();
     };
+
     this.el = element;
     this.minScrollbarWidth = 20;
     this.options = _objectSpread(_objectSpread({}, SimpleBar.defaultOptions), options);
@@ -212,13 +266,13 @@ var SimpleBar = /*#__PURE__*/function () {
         scrollbar: {}
       }
     };
-    this.removePreventClickId = null;
+    this.removePreventClickId = null; // Don't re-instantiate over an existing one
 
-    // Don't re-instantiate over an existing one
     if (SimpleBar.instances.has(this.el)) {
       return;
-    }
-    // Tita TODO: 修改 64 到 1，解决卡顿问题
+    } // Tita TODO: 修改 64 到 1，解决卡顿问题
+
+
     this.recalculate = (0, _lodash["default"])(this.recalculate.bind(this), 1);
     this.onMouseMove = (0, _lodash["default"])(this.onMouseMove.bind(this), 64);
     this.hideScrollbars = (0, _lodash2["default"])(this.hideScrollbars.bind(this), this.options.timeout);
@@ -228,7 +282,6 @@ var SimpleBar = /*#__PURE__*/function () {
     SimpleBar.getRtlHelpers = (0, _lodash3["default"])(SimpleBar.getRtlHelpers);
     this.init();
   }
-
   /**
    * Static properties
    */
@@ -239,13 +292,14 @@ var SimpleBar = /*#__PURE__*/function () {
    *  - IE11 inverts both scrollbar position and scrolling offset
    * Directly inspired by @KingSora's OverlayScrollbars https://github.com/KingSora/OverlayScrollbars/blob/master/js/OverlayScrollbars.js#L1634
    */
+
+
   _createClass(SimpleBar, [{
     key: "init",
     value: function init() {
       // Save a reference to the instance, so we know this DOM node has already been instancied
-      SimpleBar.instances.set(this.el, this);
+      SimpleBar.instances.set(this.el, this); // We stop here on server-side
 
-      // We stop here on server-side
       if (_canUseDom["default"]) {
         this.initDOM();
         this.setAccessibilityAttributes();
@@ -258,6 +312,7 @@ var SimpleBar = /*#__PURE__*/function () {
     key: "initDOM",
     value: function initDOM() {
       var _this2 = this;
+
       // make sure this element doesn't have the elements yet
       if (Array.prototype.filter.call(this.el.children, function (child) {
         return child.classList.contains(_this2.classNames.wrapper);
@@ -291,9 +346,11 @@ var SimpleBar = /*#__PURE__*/function () {
         this.placeholderEl.classList.add(this.classNames.placeholder);
         this.heightAutoObserverWrapperEl.classList.add(this.classNames.heightAutoObserverWrapperEl);
         this.heightAutoObserverEl.classList.add(this.classNames.heightAutoObserverEl);
+
         while (this.el.firstChild) {
           this.contentEl.appendChild(this.el.firstChild);
         }
+
         this.contentWrapperEl.appendChild(this.contentEl);
         this.offsetEl.appendChild(this.contentWrapperEl);
         this.maskEl.appendChild(this.offsetEl);
@@ -303,6 +360,7 @@ var SimpleBar = /*#__PURE__*/function () {
         this.wrapperEl.appendChild(this.placeholderEl);
         this.el.appendChild(this.wrapperEl);
       }
+
       if (!this.axis.x.track.el || !this.axis.y.track.el) {
         var track = document.createElement("div");
         var scrollbar = document.createElement("div");
@@ -316,12 +374,15 @@ var SimpleBar = /*#__PURE__*/function () {
         this.el.appendChild(this.axis.x.track.el);
         this.el.appendChild(this.axis.y.track.el);
       }
+
       this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector(".".concat(this.classNames.scrollbar));
       this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector(".".concat(this.classNames.scrollbar));
+
       if (!this.options.autoHide) {
         this.axis.x.scrollbar.el.classList.add(this.classNames.visible);
         this.axis.y.scrollbar.el.classList.add(this.classNames.visible);
       }
+
       this.el.setAttribute("data-simplebar", "init");
     }
   }, {
@@ -336,11 +397,13 @@ var SimpleBar = /*#__PURE__*/function () {
     key: "initListeners",
     value: function initListeners() {
       var _this3 = this;
-      var elWindow = (0, _helpers.getElementWindow)(this.el);
-      // Event listeners
+
+      var elWindow = (0, _helpers.getElementWindow)(this.el); // Event listeners
+
       if (this.options.autoHide) {
         this.el.addEventListener("mouseenter", this.onMouseEnter);
       }
+
       ["mousedown", "click", "dblclick"].forEach(function (e) {
         _this3.el.addEventListener(e, _this3.onPointerEvent, true);
       });
@@ -352,25 +415,23 @@ var SimpleBar = /*#__PURE__*/function () {
       });
       this.el.addEventListener("mousemove", this.onMouseMove);
       this.el.addEventListener("mouseleave", this.onMouseLeave);
-      this.contentWrapperEl.addEventListener("scroll", this.onScroll);
+      this.contentWrapperEl.addEventListener("scroll", this.onScroll); // Browser zoom triggers a window resize
 
-      // Browser zoom triggers a window resize
-      elWindow.addEventListener("resize", this.onWindowResize);
+      elWindow.addEventListener("resize", this.onWindowResize); // Hack for https://github.com/WICG/ResizeObserver/issues/38
 
-      // Hack for https://github.com/WICG/ResizeObserver/issues/38
       var resizeObserverStarted = false;
       var resizeObserver = elWindow.ResizeObserver || _resizeObserverPolyfill["default"];
       this.resizeObserver = new resizeObserver(function () {
         if (!resizeObserverStarted) return;
+
         _this3.recalculate();
       });
       this.resizeObserver.observe(this.el);
       this.resizeObserver.observe(this.contentEl);
       elWindow.requestAnimationFrame(function () {
         resizeObserverStarted = true;
-      });
+      }); // This is required to detect horizontal scroll. Vertical scroll only needs the resizeObserver.
 
-      // This is required to detect horizontal scroll. Vertical scroll only needs the resizeObserver.
       this.mutationObserver = new elWindow.MutationObserver(this.recalculate);
       this.mutationObserver.observe(this.contentEl, {
         childList: true,
@@ -394,23 +455,20 @@ var SimpleBar = /*#__PURE__*/function () {
       this.wrapperEl.style.margin = "-".concat(this.elStyles.paddingTop, " -").concat(this.elStyles.paddingRight, " -").concat(this.elStyles.paddingBottom, " -").concat(this.elStyles.paddingLeft);
       var contentElScrollHeight = this.contentEl.scrollHeight;
       var contentElScrollWidth = this.contentEl.scrollWidth;
-      this.contentWrapperEl.style.height = isHeightAuto ? "auto" : "100%";
+      this.contentWrapperEl.style.height = isHeightAuto ? "auto" : "100%"; // Determine placeholder size
 
-      // Determine placeholder size
       this.placeholderEl.style.width = isWidthAuto ? "".concat(contentElOffsetWidth, "px") : "auto";
       this.placeholderEl.style.height = "".concat(contentElScrollHeight, "px");
       var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
       this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
-      this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight;
+      this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight; // Set isOverflowing to false if user explicitely set hidden overflow
 
-      // Set isOverflowing to false if user explicitely set hidden overflow
       this.axis.x.isOverflowing = elOverflowX === "hidden" ? false : this.axis.x.isOverflowing;
       this.axis.y.isOverflowing = elOverflowY === "hidden" ? false : this.axis.y.isOverflowing;
       this.axis.x.forceVisible = this.options.forceVisible === "x" || this.options.forceVisible === true;
       this.axis.y.forceVisible = this.options.forceVisible === "y" || this.options.forceVisible === true;
-      this.hideNativeScrollbar();
+      this.hideNativeScrollbar(); // Set isOverflowing to false if scrollbar is not necessary (content is shorter than offset)
 
-      // Set isOverflowing to false if scrollbar is not necessary (content is shorter than offset)
       var offsetForXScrollbar = this.axis.x.isOverflowing ? this.scrollbarWidth : 0;
       var offsetForYScrollbar = this.axis.y.isOverflowing ? this.scrollbarWidth : 0;
       this.axis.x.isOverflowing = this.axis.x.isOverflowing && contentElScrollWidth > contentWrapperElOffsetWidth - offsetForYScrollbar;
@@ -424,36 +482,41 @@ var SimpleBar = /*#__PURE__*/function () {
       this.toggleTrackVisibility("x");
       this.toggleTrackVisibility("y");
     }
-
     /**
      * Calculate scrollbar size
      */
+
   }, {
     key: "getScrollbarSize",
     value: function getScrollbarSize() {
       var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "y";
+
       if (!this.axis[axis].isOverflowing) {
         return 0;
       }
+
       var contentSize = this.contentEl[this.axis[axis].scrollSizeAttr];
       var trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
       var scrollbarSize;
-      var scrollbarRatio = trackSize / contentSize;
+      var scrollbarRatio = trackSize / contentSize; // Calculate new height/position of drag handle.
 
-      // Calculate new height/position of drag handle.
       scrollbarSize = Math.max(~~(scrollbarRatio * trackSize), this.options.scrollbarMinSize);
+
       if (this.options.scrollbarMaxSize) {
         scrollbarSize = Math.min(scrollbarSize, this.options.scrollbarMaxSize);
       }
+
       return scrollbarSize;
     }
   }, {
     key: "positionScrollbar",
     value: function positionScrollbar() {
       var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "y";
+
       if (!this.axis[axis].isOverflowing) {
         return;
       }
+
       var contentSize = this.contentWrapperEl[this.axis[axis].scrollSizeAttr];
       var trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
       var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
@@ -471,15 +534,16 @@ var SimpleBar = /*#__PURE__*/function () {
       var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "y";
       var track = this.axis[axis].track.el;
       var scrollbar = this.axis[axis].scrollbar.el;
+
       if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
         track.style.visibility = "visible";
         this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "scroll";
       } else {
         track.style.visibility = "hidden";
         this.contentWrapperEl.style[this.axis[axis].overflowAttr] = "hidden";
-      }
+      } // Even if forceVisible is enabled, scrollbar itself should be hidden
+
 
-      // Even if forceVisible is enabled, scrollbar itself should be hidden
       if (this.axis[axis].isOverflowing) {
         scrollbar.style.display = "block";
       } else {
@@ -492,10 +556,10 @@ var SimpleBar = /*#__PURE__*/function () {
       this.offsetEl.style[this.isRtl ? "left" : "right"] = this.axis.y.isOverflowing || this.axis.y.forceVisible ? "-".concat(this.scrollbarWidth, "px") : 0;
       this.offsetEl.style.bottom = this.axis.x.isOverflowing || this.axis.x.forceVisible ? "-".concat(this.scrollbarWidth, "px") : 0;
     }
-
     /**
      * On scroll event handling
      */
+
   }, {
     key: "onMouseMoveForAxis",
     value: function onMouseMoveForAxis() {
@@ -503,11 +567,13 @@ var SimpleBar = /*#__PURE__*/function () {
       this.axis[axis].track.rect = this.axis[axis].track.el.getBoundingClientRect();
       this.axis[axis].scrollbar.rect = this.axis[axis].scrollbar.el.getBoundingClientRect();
       var isWithinScrollbarBoundsX = this.isWithinBounds(this.axis[axis].scrollbar.rect);
+
       if (isWithinScrollbarBoundsX) {
         this.axis[axis].scrollbar.el.classList.add(this.classNames.hover);
       } else {
         this.axis[axis].scrollbar.el.classList.remove(this.classNames.hover);
       }
+
       if (this.isWithinBounds(this.axis[axis].track.rect)) {
         this.showScrollbar(axis);
         this.axis[axis].track.el.classList.add(this.classNames.hover);
@@ -531,18 +597,20 @@ var SimpleBar = /*#__PURE__*/function () {
     function showScrollbar() {
       var axis = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "y";
       var scrollbar = this.axis[axis].scrollbar.el;
+
       if (!this.axis[axis].isVisible) {
         scrollbar.classList.add(this.classNames.visible);
         this.axis[axis].isVisible = true;
       }
+
       if (this.options.autoHide) {
         this.hideScrollbars();
       }
     }
-
     /**
      * Hide Scrollbar
      */
+
   }, {
     key: "onDragStart",
     value:
@@ -553,15 +621,15 @@ var SimpleBar = /*#__PURE__*/function () {
       var axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "y";
       var elDocument = (0, _helpers.getElementDocument)(this.el);
       var elWindow = (0, _helpers.getElementWindow)(this.el);
-      var scrollbar = this.axis[axis].scrollbar;
+      var scrollbar = this.axis[axis].scrollbar; // Measure how far the user's mouse is from the top of the scrollbar drag handle.
 
-      // Measure how far the user's mouse is from the top of the scrollbar drag handle.
       var eventOffset = axis === "y" ? e.pageY : e.pageX;
       this.axis[axis].dragOffset = eventOffset - scrollbar.rect[this.axis[axis].offsetAttr];
       this.draggedAxis = axis;
       this.el.classList.add(this.classNames.dragging);
       elDocument.addEventListener("mousemove", this.drag, true);
       elDocument.addEventListener("mouseup", this.onEndDrag, true);
+
       if (this.removePreventClickId === null) {
         elDocument.addEventListener("click", this.preventClick, true);
         elDocument.addEventListener("dblclick", this.preventClick, true);
@@ -570,14 +638,15 @@ var SimpleBar = /*#__PURE__*/function () {
         this.removePreventClickId = null;
       }
     }
-
     /**
      * Drag scrollbar handle
      */
+
   }, {
     key: "onTrackClick",
     value: function onTrackClick(e) {
       var _this4 = this;
+
       var axis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "y";
       if (!this.options.clickOnTrack) return;
       var elWindow = (0, _helpers.getElementWindow)(this.el);
@@ -589,34 +658,40 @@ var SimpleBar = /*#__PURE__*/function () {
       var t = axis === "y" ? this.mouseY - scrollbarOffset : this.mouseX - scrollbarOffset;
       var dir = t < 0 ? -1 : 1;
       var scrollSize = dir === -1 ? scrolled - hostSize : scrolled + hostSize;
+
       var scrollTo = function scrollTo() {
         if (dir === -1) {
           if (scrolled > scrollSize) {
             scrolled -= _this4.options.clickOnTrackSpeed;
+
             _this4.contentWrapperEl.scrollTo(_defineProperty({}, _this4.axis[axis].offsetAttr, scrolled));
+
             elWindow.requestAnimationFrame(scrollTo);
           }
         } else if (scrolled < scrollSize) {
           scrolled += _this4.options.clickOnTrackSpeed;
+
           _this4.contentWrapperEl.scrollTo(_defineProperty({}, _this4.axis[axis].offsetAttr, scrolled));
+
           elWindow.requestAnimationFrame(scrollTo);
         }
       };
+
       scrollTo();
     }
-
     /**
      * Getter for content element
      */
+
   }, {
     key: "getContentElement",
     value: function getContentElement() {
       return this.contentEl;
     }
-
     /**
      * Getter for original scrolling element
      */
+
   }, {
     key: "getScrollElement",
     value: function getScrollElement() {
@@ -631,6 +706,7 @@ var SimpleBar = /*#__PURE__*/function () {
         if (getComputedStyle(this.contentWrapperEl, "::-webkit-scrollbar").display === "none" || "scrollbarWidth" in document.documentElement.style || "-ms-overflow-style" in document.documentElement.style) {
           return 0;
         }
+
         return (0, _scrollbarWidth["default"])(this.el);
       } catch (e) {
         return (0, _scrollbarWidth["default"])(this.el);
@@ -640,11 +716,13 @@ var SimpleBar = /*#__PURE__*/function () {
     key: "removeListeners",
     value: function removeListeners() {
       var _this5 = this;
-      var elWindow = (0, _helpers.getElementWindow)(this.el);
-      // Event listeners
+
+      var elWindow = (0, _helpers.getElementWindow)(this.el); // Event listeners
+
       if (this.options.autoHide) {
         this.el.removeEventListener("mouseenter", this.onMouseEnter);
       }
+
       ["mousedown", "click", "dblclick"].forEach(function (e) {
         _this5.el.removeEventListener(e, _this5.onPointerEvent, true);
       });
@@ -656,46 +734,50 @@ var SimpleBar = /*#__PURE__*/function () {
       });
       this.el.removeEventListener("mousemove", this.onMouseMove);
       this.el.removeEventListener("mouseleave", this.onMouseLeave);
+
       if (this.contentWrapperEl) {
         this.contentWrapperEl.removeEventListener("scroll", this.onScroll);
       }
+
       elWindow.removeEventListener("resize", this.onWindowResize);
+
       if (this.mutationObserver) {
         this.mutationObserver.disconnect();
       }
+
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
-      }
+      } // Cancel all debounced functions
+
 
-      // Cancel all debounced functions
       this.recalculate.cancel();
       this.onMouseMove.cancel();
       this.hideScrollbars.cancel();
       this.onWindowResize.cancel();
     }
-
     /**
      * UnMount mutation observer and delete SimpleBar instance from DOM element
      */
+
   }, {
     key: "unMount",
     value: function unMount() {
       this.removeListeners();
       SimpleBar.instances["delete"](this.el);
     }
-
     /**
      * Check if mouse is within bounds
      */
+
   }, {
     key: "isWithinBounds",
     value: function isWithinBounds(bbox) {
       return this.mouseX >= bbox.left && this.mouseX <= bbox.left + bbox.width && this.mouseY >= bbox.top && this.mouseY <= bbox.top + bbox.height;
     }
-
     /**
      * Find element children matches query
      */
+
   }, {
     key: "findChild",
     value: function findChild(el, query) {
@@ -736,8 +818,10 @@ var SimpleBar = /*#__PURE__*/function () {
       };
     }
   }]);
+
   return SimpleBar;
 }();
+
 exports["default"] = SimpleBar;
 SimpleBar.defaultOptions = {
   autoHide: true,