@alfalab/core-components 28.2.1 → 28.2.2-beta.0

package/scrollbar/Component.js

@@ -3,24 +3,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
-require('core-js/modules/es.parse-int.js');
-require('core-js/modules/es.object.assign.js');
-require('core-js/modules/es.array.filter.js');
-require('core-js/modules/es.object.to-string.js');
-require('core-js/modules/es.array.iterator.js');
-require('core-js/modules/es.string.iterator.js');
-require('core-js/modules/es.weak-map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 var throttle = require('lodash.throttle');
 var debounce = require('lodash.debounce');
 var memoize = require('lodash.memoize');
 var resizeObserver = require('@juggle/resize-observer');
 var canUseDOM = require('can-use-dom');
-require('core-js/modules/es.array.reduce.js');
-require('core-js/modules/es.regexp.exec.js');
-require('core-js/modules/es.string.match.js');
-require('core-js/modules/es.function.name.js');
-require('core-js/modules/es.string.replace.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -79,16 +66,11 @@ function __spreadArrays() {
     return r;
 }
 
-/**
- * SimpleBar.js - v5.3.8
- * Scrollbars, simpler.
- * https://grsmto.github.io/simplebar/
- *
- * Made by Adrien Denat from a fork by Jonathan Nicol
- * Under MIT License
- */
+// Helper function to retrieve options from element attributes
 function getElementWindow(element) {
-    if (!element || !element.ownerDocument || !element.ownerDocument.defaultView) {
+    if (!element ||
+        !element.ownerDocument ||
+        !element.ownerDocument.defaultView) {
         return window;
     }
     return element.ownerDocument.defaultView;
@@ -99,6 +81,7 @@ function getElementDocument(element) {
     }
     return element.ownerDocument;
 }
+
 var cachedScrollbarWidth = null;
 var cachedDevicePixelRatio = null;
 if (canUseDOM__default['default']) {
@@ -111,13 +94,13 @@ if (canUseDOM__default['default']) {
 }
 function scrollbarWidth(el) {
     if (cachedScrollbarWidth === null) {
-        var document = getElementDocument(el);
-        if (typeof document === 'undefined') {
+        var document_1 = getElementDocument(el);
+        if (typeof document_1 === 'undefined') {
             cachedScrollbarWidth = 0;
             return cachedScrollbarWidth;
         }
-        var body = document.body;
-        var box = document.createElement('div');
+        var body = document_1.body;
+        var box = document_1.createElement('div');
         box.classList.add('simplebar-hide-scrollbar');
         body.appendChild(box);
         var width = box.getBoundingClientRect().right;
@@ -126,9 +109,13 @@ function scrollbarWidth(el) {
     }
     return cachedScrollbarWidth;
 }
-var SimpleBar = /*#__PURE__*/ function () {
+
+var SimpleBar = /** @class */ (function () {
     function SimpleBar(element, options) {
         var _this = this;
+        /**
+         * On scroll event handling
+         */
         this.onScroll = function () {
             var elWindow = getElementWindow(_this.el);
             if (!_this.scrollXTicking) {
@@ -184,6 +171,9 @@ var SimpleBar = /*#__PURE__*/ function () {
             _this.scrollbarWidth = _this.getScrollbarWidth();
             _this.hideNativeScrollbar();
         };
+        /**
+         * Hide Scrollbar
+         */
         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();
@@ -205,11 +195,13 @@ var SimpleBar = /*#__PURE__*/ function () {
             }
             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) {
@@ -233,6 +225,9 @@ var SimpleBar = /*#__PURE__*/ function () {
                 }
             }
         };
+        /**
+         * Drag scrollbar handle
+         */
         this.drag = function (e) {
             var eventOffset;
             var track = _this.axis[_this.draggedAxis].track;
@@ -247,16 +242,31 @@ var SimpleBar = /*#__PURE__*/ function () {
             }
             else {
                 eventOffset = e.pageX;
-            } // 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); // Scroll the content by the same percentage.
-            var scrollPos = dragPerc * (contentSize - hostSize); // Fix browsers inconsistency on RTL
+            }
+            // 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);
+            // Scroll the content by the same percentage.
+            var scrollPos = dragPerc * (contentSize - hostSize);
+            // 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;
+                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;
         };
+        /**
+         * End scroll handle drag
+         */
         this.onEndDrag = function (e) {
             var elDocument = getElementDocument(_this.el);
             var elWindow = getElementWindow(_this.el);
@@ -273,14 +283,17 @@ var SimpleBar = /*#__PURE__*/ function () {
                 _this.removePreventClickId = null;
             });
         };
+        /**
+         * Handler to ignore click events during drag
+         */
         this.preventClick = function (e) {
             e.preventDefault();
             e.stopPropagation();
         };
         this.el = element;
         this.minScrollbarWidth = 20;
-        this.options = Object.assign({}, SimpleBar.defaultOptions, options);
-        this.classNames = Object.assign({}, SimpleBar.defaultOptions.classNames, this.options.classNames);
+        this.options = __assign(__assign({}, SimpleBar.defaultOptions), options);
+        this.classNames = __assign(__assign({}, SimpleBar.defaultOptions.classNames), this.options.classNames);
         this.axis = {
             x: {
                 scrollOffsetAttr: 'scrollLeft',
@@ -311,7 +324,8 @@ var SimpleBar = /*#__PURE__*/ function () {
                 scrollbar: {}
             }
         };
-        this.removePreventClickId = null; // Don't re-instantiate over an existing one
+        this.removePreventClickId = null;
+        // Don't re-instantiate over an existing one
         if (SimpleBar.instances.has(this.el)) {
             return;
         }
@@ -333,9 +347,10 @@ 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
      */
-    SimpleBar.getRtlHelpers = function getRtlHelpers() {
+    SimpleBar.getRtlHelpers = function () {
         var dummyDiv = document.createElement('div');
-        dummyDiv.innerHTML = '<div class="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>';
+        dummyDiv.innerHTML =
+            '<div class="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>';
         var scrollbarDummyEl = dummyDiv.firstElementChild;
         document.body.appendChild(scrollbarDummyEl);
         var dummyContainerChild = scrollbarDummyEl.firstElementChild;
@@ -346,24 +361,29 @@ var SimpleBar = /*#__PURE__*/ function () {
         var dummyContainerScrollOffsetAfterScroll = SimpleBar.getOffset(dummyContainerChild);
         return {
             // determines if the scrolling is responding with negative values
-            isRtlScrollingInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left && dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left !== 0,
+            isRtlScrollingInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left &&
+                dummyContainerChildOffset.left -
+                    dummyContainerScrollOffsetAfterScroll.left !==
+                    0,
             // determines if the origin scrollbar position is inverted or not (positioned on left or right)
             isRtlScrollbarInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left
         };
     };
-    SimpleBar.getOffset = function getOffset(el) {
+    SimpleBar.getOffset = function (el) {
         var rect = el.getBoundingClientRect();
         var elDocument = getElementDocument(el);
         var elWindow = getElementWindow(el);
         return {
-            top: rect.top + (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
-            left: rect.left + (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
+            top: rect.top +
+                (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
+            left: rect.left +
+                (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
         };
     };
-    var _proto = SimpleBar.prototype;
-    _proto.init = function init() {
+    SimpleBar.prototype.init = function () {
         // Save a reference to the instance, so we know this DOM node has already been instancied
-        SimpleBar.instances.set(this.el, this); // We stop here on server-side
+        SimpleBar.instances.set(this.el, this);
+        // We stop here on server-side
         if (canUseDOM__default['default']) {
             this.initDOM();
             this.setAccessibilityAttributes();
@@ -372,16 +392,20 @@ var SimpleBar = /*#__PURE__*/ function () {
             this.initListeners();
         }
     };
-    _proto.initDOM = function initDOM() {
-        var _this2 = this;
+    SimpleBar.prototype.initDOM = function () {
+        var _this = 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);
+            return child.classList.contains(_this.classNames.wrapper);
         }).length) {
             // assume that element has his DOM already initiated
             this.wrapperEl = this.el.querySelector("." + this.classNames.wrapper);
-            this.contentWrapperEl = this.options.scrollableNode || this.el.querySelector("." + this.classNames.contentWrapper);
-            this.contentEl = this.options.contentNode || this.el.querySelector("." + this.classNames.contentEl);
+            this.contentWrapperEl =
+                this.options.scrollableNode ||
+                    this.el.querySelector("." + this.classNames.contentWrapper);
+            this.contentEl =
+                this.options.contentNode ||
+                    this.el.querySelector("." + this.classNames.contentEl);
             this.offsetEl = this.el.querySelector("." + this.classNames.offset);
             this.maskEl = this.el.querySelector("." + this.classNames.mask);
             this.placeholderEl = this.findChild(this.wrapperEl, "." + this.classNames.placeholder);
@@ -441,43 +465,47 @@ var SimpleBar = /*#__PURE__*/ function () {
         }
         this.el.setAttribute('data-simplebar', 'init');
     };
-    _proto.setAccessibilityAttributes = function setAccessibilityAttributes() {
+    SimpleBar.prototype.setAccessibilityAttributes = function () {
         var ariaLabel = this.options.ariaLabel || 'scrollable content';
         this.contentWrapperEl.setAttribute('tabindex', '0');
         this.contentWrapperEl.setAttribute('role', 'region');
         this.contentWrapperEl.setAttribute('aria-label', ariaLabel);
     };
-    _proto.initListeners = function initListeners() {
-        var _this3 = this;
-        var elWindow = getElementWindow(this.el); // Event listeners
+    SimpleBar.prototype.initListeners = function () {
+        var _this = this;
+        var elWindow = 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);
+            _this.el.addEventListener(e, _this.onPointerEvent, true);
         });
         ['touchstart', 'touchend', 'touchmove'].forEach(function (e) {
-            _this3.el.addEventListener(e, _this3.onPointerEvent, {
+            _this.el.addEventListener(e, _this.onPointerEvent, {
                 capture: true,
                 passive: true
             });
         });
         this.el.addEventListener('mousemove', this.onMouseMove);
         this.el.addEventListener('mouseleave', this.onMouseLeave);
-        this.contentWrapperEl.addEventListener('scroll', this.onScroll); // Browser zoom triggers a window resize
-        elWindow.addEventListener('resize', this.onWindowResize); // Hack for https://github.com/WICG/ResizeObserver/issues/38
+        this.contentWrapperEl.addEventListener('scroll', this.onScroll);
+        // Browser zoom triggers a window resize
+        elWindow.addEventListener('resize', this.onWindowResize);
+        // Hack for https://github.com/WICG/ResizeObserver/issues/38
         var resizeObserverStarted = false;
         var resizeObserver$1 = elWindow.ResizeObserver || resizeObserver.ResizeObserver;
         this.resizeObserver = new resizeObserver$1(function () {
             if (!resizeObserverStarted)
                 return;
-            _this3.recalculate();
+            _this.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,
@@ -485,7 +513,7 @@ var SimpleBar = /*#__PURE__*/ function () {
             characterData: true
         });
     };
-    _proto.recalculate = function recalculate() {
+    SimpleBar.prototype.recalculate = function () {
         var elWindow = getElementWindow(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
@@ -499,21 +527,40 @@ var SimpleBar = /*#__PURE__*/ function () {
         this.wrapperEl.style.margin = "-" + this.elStyles.paddingTop + " -" + this.elStyles.paddingRight + " -" + this.elStyles.paddingBottom + " -" + this.elStyles.paddingLeft;
         var contentElScrollHeight = this.contentEl.scrollHeight;
         var contentElScrollWidth = this.contentEl.scrollWidth;
-        this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%'; // Determine placeholder size
-        this.placeholderEl.style.width = isWidthAuto ? contentElOffsetWidth + "px" : 'auto';
+        this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%';
+        // Determine placeholder size
+        this.placeholderEl.style.width = isWidthAuto
+            ? contentElOffsetWidth + "px"
+            : 'auto';
         this.placeholderEl.style.height = contentElScrollHeight + "px";
         var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
         this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
-        this.axis.y.isOverflowing = contentElScrollHeight > contentWrapperElOffsetHeight; // 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(); // 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;
-        this.axis.y.isOverflowing = this.axis.y.isOverflowing && contentElScrollHeight > contentWrapperElOffsetHeight - offsetForXScrollbar;
+        this.axis.y.isOverflowing =
+            contentElScrollHeight > contentWrapperElOffsetHeight;
+        // 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();
+        // 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;
+        this.axis.y.isOverflowing =
+            this.axis.y.isOverflowing &&
+                contentElScrollHeight >
+                    contentWrapperElOffsetHeight - offsetForXScrollbar;
         this.axis.x.scrollbar.size = this.getScrollbarSize('x');
         this.axis.y.scrollbar.size = this.getScrollbarSize('y');
         this.axis.x.scrollbar.el.style.width = this.axis.x.scrollbar.size + "px";
@@ -523,27 +570,27 @@ var SimpleBar = /*#__PURE__*/ function () {
         this.toggleTrackVisibility('x');
         this.toggleTrackVisibility('y');
     };
-    _proto.getScrollbarSize = function getScrollbarSize(axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    /**
+     * Calculate scrollbar size
+     */
+    SimpleBar.prototype.getScrollbarSize = function (axis) {
+        if (axis === void 0) { axis = '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; // Calculate new height/position of drag handle.
+        var scrollbarRatio = trackSize / contentSize;
+        // 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;
     };
-    _proto.positionScrollbar = function positionScrollbar(axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.positionScrollbar = function (axis) {
+        if (axis === void 0) { axis = 'y'; }
         if (!this.axis[axis].isOverflowing) {
             return;
         }
@@ -552,16 +599,27 @@ var SimpleBar = /*#__PURE__*/ function () {
         var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
         var scrollbar = this.axis[axis].scrollbar;
         var scrollOffset = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
-        scrollOffset = axis === 'x' && this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollingInverted ? -scrollOffset : scrollOffset;
+        scrollOffset =
+            axis === 'x' &&
+                this.isRtl &&
+                SimpleBar.getRtlHelpers().isRtlScrollingInverted
+                ? -scrollOffset
+                : scrollOffset;
         var scrollPourcent = scrollOffset / (contentSize - hostSize);
         var handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
-        handleOffset = axis === 'x' && this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollbarInverted ? handleOffset + (trackSize - scrollbar.size) : handleOffset;
-        scrollbar.el.style.transform = axis === 'x' ? "translate3d(" + handleOffset + "px, 0, 0)" : "translate3d(0, " + handleOffset + "px, 0)";
+        handleOffset =
+            axis === 'x' &&
+                this.isRtl &&
+                SimpleBar.getRtlHelpers().isRtlScrollbarInverted
+                ? handleOffset + (trackSize - scrollbar.size)
+                : handleOffset;
+        scrollbar.el.style.transform =
+            axis === 'x'
+                ? "translate3d(" + handleOffset + "px, 0, 0)"
+                : "translate3d(0, " + handleOffset + "px, 0)";
     };
-    _proto.toggleTrackVisibility = function toggleTrackVisibility(axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.toggleTrackVisibility = function (axis) {
+        if (axis === void 0) { axis = 'y'; }
         var track = this.axis[axis].track.el;
         var scrollbar = this.axis[axis].scrollbar.el;
         if (this.axis[axis].isOverflowing || this.axis[axis].forceVisible) {
@@ -571,7 +629,8 @@ var SimpleBar = /*#__PURE__*/ function () {
         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';
         }
@@ -579,14 +638,18 @@ var SimpleBar = /*#__PURE__*/ function () {
             scrollbar.style.display = 'none';
         }
     };
-    _proto.hideNativeScrollbar = function hideNativeScrollbar() {
-        this.offsetEl.style[this.isRtl ? 'left' : 'right'] = this.axis.y.isOverflowing || this.axis.y.forceVisible ? "-" + this.scrollbarWidth + "px" : 0;
-        this.offsetEl.style.bottom = this.axis.x.isOverflowing || this.axis.x.forceVisible ? "-" + this.scrollbarWidth + "px" : 0;
+    SimpleBar.prototype.hideNativeScrollbar = function () {
+        this.offsetEl.style[this.isRtl ? 'left' : 'right'] =
+            this.axis.y.isOverflowing || this.axis.y.forceVisible
+                ? "-" + this.scrollbarWidth + "px"
+                : 0;
+        this.offsetEl.style.bottom =
+            this.axis.x.isOverflowing || this.axis.x.forceVisible
+                ? "-" + this.scrollbarWidth + "px"
+                : 0;
     };
-    _proto.onMouseMoveForAxis = function onMouseMoveForAxis(axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.onMouseMoveForAxis = function (axis) {
+        if (axis === void 0) { axis = 'y'; }
         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);
@@ -604,20 +667,16 @@ var SimpleBar = /*#__PURE__*/ function () {
             this.axis[axis].track.el.classList.remove(this.classNames.hover);
         }
     };
-    _proto.onMouseLeaveForAxis = function onMouseLeaveForAxis(axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.onMouseLeaveForAxis = function (axis) {
+        if (axis === void 0) { axis = 'y'; }
         this.axis[axis].track.el.classList.remove(this.classNames.hover);
         this.axis[axis].scrollbar.el.classList.remove(this.classNames.hover);
     };
     /**
      * Show scrollbar
      */
-    _proto.showScrollbar = function showScrollbar(axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.showScrollbar = function (axis) {
+        if (axis === void 0) { axis = 'y'; }
         var scrollbar = this.axis[axis].scrollbar.el;
         if (!this.axis[axis].isVisible) {
             scrollbar.classList.add(this.classNames.visible);
@@ -630,15 +689,15 @@ var SimpleBar = /*#__PURE__*/ function () {
     /**
      * on scrollbar handle drag movement starts
      */
-    _proto.onDragStart = function onDragStart(e, axis) {
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.onDragStart = function (e, axis) {
+        if (axis === void 0) { axis = 'y'; }
         var elDocument = getElementDocument(this.el);
         var elWindow = getElementWindow(this.el);
-        var scrollbar = this.axis[axis].scrollbar; // Measure how far the user's mouse is from the top of the scrollbar drag handle.
+        var scrollbar = this.axis[axis].scrollbar;
+        // 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.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);
@@ -652,11 +711,9 @@ var SimpleBar = /*#__PURE__*/ function () {
             this.removePreventClickId = null;
         }
     };
-    _proto.onTrackClick = function onTrackClick(e, axis) {
-        var _this4 = this;
-        if (axis === void 0) {
-            axis = 'y';
-        }
+    SimpleBar.prototype.onTrackClick = function (e, axis) {
+        var _this = this;
+        if (axis === void 0) { axis = 'y'; }
         if (!this.options.clickOnTrack)
             return;
         var elWindow = getElementWindow(this.el);
@@ -665,40 +722,54 @@ var SimpleBar = /*#__PURE__*/ function () {
         var scrollbarOffset = scrollbar.rect[this.axis[axis].offsetAttr];
         var hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
         var scrolled = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
-        var t = axis === 'y' ? this.mouseY - scrollbarOffset : this.mouseX - scrollbarOffset;
+        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() {
+        var scrollTo = function () {
+            var _a, _b;
             if (dir === -1) {
                 if (scrolled > scrollSize) {
-                    var _this4$contentWrapper;
-                    scrolled -= _this4.options.clickOnTrackSpeed;
-                    _this4.contentWrapperEl.scrollTo((_this4$contentWrapper = {}, _this4$contentWrapper[_this4.axis[axis].offsetAttr] = scrolled, _this4$contentWrapper));
+                    scrolled -= _this.options.clickOnTrackSpeed;
+                    _this.contentWrapperEl.scrollTo((_a = {},
+                        _a[_this.axis[axis].offsetAttr] = scrolled,
+                        _a));
                     elWindow.requestAnimationFrame(scrollTo);
                 }
             }
             else {
                 if (scrolled < scrollSize) {
-                    var _this4$contentWrapper2;
-                    scrolled += _this4.options.clickOnTrackSpeed;
-                    _this4.contentWrapperEl.scrollTo((_this4$contentWrapper2 = {}, _this4$contentWrapper2[_this4.axis[axis].offsetAttr] = scrolled, _this4$contentWrapper2));
+                    scrolled += _this.options.clickOnTrackSpeed;
+                    _this.contentWrapperEl.scrollTo((_b = {},
+                        _b[_this.axis[axis].offsetAttr] = scrolled,
+                        _b));
                     elWindow.requestAnimationFrame(scrollTo);
                 }
             }
         };
         scrollTo();
     };
-    _proto.getContentElement = function getContentElement() {
+    /**
+     * Getter for content element
+     */
+    SimpleBar.prototype.getContentElement = function () {
         return this.contentEl;
     };
-    _proto.getScrollElement = function getScrollElement() {
+    /**
+     * Getter for original scrolling element
+     */
+    SimpleBar.prototype.getScrollElement = function () {
         return this.contentWrapperEl;
     };
-    _proto.getScrollbarWidth = function getScrollbarWidth() {
+    SimpleBar.prototype.getScrollbarWidth = function () {
         // Try/catch for FF 56 throwing on undefined computedStyles
         try {
             // Detect browsers supporting CSS scrollbar styling and do not calculate
-            if (getComputedStyle(this.contentWrapperEl, '::-webkit-scrollbar').display === 'none' || 'scrollbarWidth' in document.documentElement.style || '-ms-overflow-style' in document.documentElement.style) {
+            if (getComputedStyle(this.contentWrapperEl, '::-webkit-scrollbar')
+                .display === 'none' ||
+                'scrollbarWidth' in document.documentElement.style ||
+                '-ms-overflow-style' in document.documentElement.style) {
                 return 0;
             }
             else {
@@ -709,17 +780,18 @@ var SimpleBar = /*#__PURE__*/ function () {
             return scrollbarWidth(this.el);
         }
     };
-    _proto.removeListeners = function removeListeners() {
-        var _this5 = this;
-        var elWindow = getElementWindow(this.el); // Event listeners
+    SimpleBar.prototype.removeListeners = function () {
+        var _this = this;
+        var elWindow = 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);
+            _this.el.removeEventListener(e, _this.onPointerEvent, true);
         });
         ['touchstart', 'touchend', 'touchmove'].forEach(function (e) {
-            _this5.el.removeEventListener(e, _this5.onPointerEvent, {
+            _this.el.removeEventListener(e, _this.onPointerEvent, {
                 capture: true,
                 passive: true
             });
@@ -735,62 +807,78 @@ var SimpleBar = /*#__PURE__*/ function () {
         }
         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();
     };
-    _proto.unMount = function unMount() {
+    /**
+     * UnMount mutation observer and delete SimpleBar instance from DOM element
+     */
+    SimpleBar.prototype.unMount = function () {
         this.removeListeners();
         SimpleBar.instances.delete(this.el);
     };
-    _proto.isWithinBounds = function isWithinBounds(bbox) {
-        return this.mouseX >= bbox.left && this.mouseX <= bbox.left + bbox.width && this.mouseY >= bbox.top && this.mouseY <= bbox.top + bbox.height;
+    /**
+     * Check if mouse is within bounds
+     */
+    SimpleBar.prototype.isWithinBounds = function (bbox) {
+        return (this.mouseX >= bbox.left &&
+            this.mouseX <= bbox.left + bbox.width &&
+            this.mouseY >= bbox.top &&
+            this.mouseY <= bbox.top + bbox.height);
     };
-    _proto.findChild = function findChild(el, query) {
-        var matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+    /**
+     * Find element children matches query
+     */
+    SimpleBar.prototype.findChild = function (el, query) {
+        var matches = el.matches ||
+            el.webkitMatchesSelector ||
+            el.mozMatchesSelector ||
+            el.msMatchesSelector;
         return Array.prototype.filter.call(el.children, function (child) {
             return matches.call(child, query);
         })[0];
     };
+    SimpleBar.defaultOptions = {
+        autoHide: true,
+        forceVisible: false,
+        clickOnTrack: true,
+        clickOnTrackSpeed: 40,
+        classNames: {
+            contentEl: 'simplebar-content',
+            contentWrapper: 'simplebar-content-wrapper',
+            offset: 'simplebar-offset',
+            mask: 'simplebar-mask',
+            wrapper: 'simplebar-wrapper',
+            placeholder: 'simplebar-placeholder',
+            scrollbar: 'simplebar-scrollbar',
+            track: 'simplebar-track',
+            heightAutoObserverWrapperEl: 'simplebar-height-auto-observer-wrapper',
+            heightAutoObserverEl: 'simplebar-height-auto-observer',
+            visible: 'simplebar-visible',
+            horizontal: 'simplebar-horizontal',
+            vertical: 'simplebar-vertical',
+            hover: 'simplebar-hover',
+            dragging: 'simplebar-dragging'
+        },
+        scrollbarMinSize: 25,
+        scrollbarMaxSize: 0,
+        timeout: 1000
+    };
+    SimpleBar.instances = new WeakMap();
     return SimpleBar;
-}();
-SimpleBar.defaultOptions = {
-    autoHide: true,
-    forceVisible: false,
-    clickOnTrack: true,
-    clickOnTrackSpeed: 40,
-    classNames: {
-        contentEl: 'simplebar-content',
-        contentWrapper: 'simplebar-content-wrapper',
-        offset: 'simplebar-offset',
-        mask: 'simplebar-mask',
-        wrapper: 'simplebar-wrapper',
-        placeholder: 'simplebar-placeholder',
-        scrollbar: 'simplebar-scrollbar',
-        track: 'simplebar-track',
-        heightAutoObserverWrapperEl: 'simplebar-height-auto-observer-wrapper',
-        heightAutoObserverEl: 'simplebar-height-auto-observer',
-        visible: 'simplebar-visible',
-        horizontal: 'simplebar-horizontal',
-        vertical: 'simplebar-vertical',
-        hover: 'simplebar-hover',
-        dragging: 'simplebar-dragging'
-    },
-    scrollbarMinSize: 25,
-    scrollbarMaxSize: 0,
-    timeout: 1000
-};
-SimpleBar.instances = new WeakMap();
+}());
 
-var styles = {"component":"scrollbar__component_1a8nl","wrapper":"scrollbar__wrapper_1a8nl","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_1a8nl","heightAutoObserver":"scrollbar__heightAutoObserver_1a8nl","-webkit-mask":"scrollbar__mask_1a8nl","mask":"scrollbar__mask_1a8nl","offset":"scrollbar__offset_1a8nl","contentWrapper":"scrollbar__contentWrapper_1a8nl","placeholder":"scrollbar__placeholder_1a8nl","vertical":"scrollbar__vertical_1a8nl","hover":"scrollbar__hover_1a8nl","horizontal":"scrollbar__horizontal_1a8nl","content":"scrollbar__content_1a8nl"};
+var styles = {"component":"scrollbar__component_e9713","wrapper":"scrollbar__wrapper_e9713","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_e9713","heightAutoObserver":"scrollbar__heightAutoObserver_e9713","-webkit-mask":"scrollbar__mask_e9713","mask":"scrollbar__mask_e9713","offset":"scrollbar__offset_e9713","contentWrapper":"scrollbar__contentWrapper_e9713","placeholder":"scrollbar__placeholder_e9713","vertical":"scrollbar__vertical_e9713","hover":"scrollbar__hover_e9713","horizontal":"scrollbar__horizontal_e9713","content":"scrollbar__content_e9713"};
 require('./index.css');
 
-var defaultColors = {"component":"scrollbar__component_ikw9u"};
+var defaultColors = {"component":"scrollbar__component_wlfie"};
 require('./default.css');
 
-var invertedColors = {"component":"scrollbar__component_ii57j"};
+var invertedColors = {"component":"scrollbar__component_wiog3"};
 require('./inverted.css');
 
 var colorStylesMap = {