@alfalab/core-components 45.6.0-beta.1 → 45.6.0-beta.2

package/scrollbar/cssm/Component.js

@@ -1,30 +1,11 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var mergeRefs = require('react-merge-refs');
-var cn = require('classnames');
-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');
-var defaultColors = require('./default.module.css');
-var styles = require('./index.module.css');
-var invertedColors = require('./inverted.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
-var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
-var debounce__default = /*#__PURE__*/_interopDefaultCompat(debounce);
-var memoize__default = /*#__PURE__*/_interopDefaultCompat(memoize);
-var canUseDOM__default = /*#__PURE__*/_interopDefaultCompat(canUseDOM);
-var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
+import React, { useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import throttle from 'lodash.throttle';
+import debounce from 'lodash.debounce';
+import memoize from 'lodash.memoize';
+import { ResizeObserver } from '@juggle/resize-observer';
+import canUseDOM from 'can-use-dom';
 
 // Helper function to retrieve options from element attributes
 function getElementWindow(element) {
@@ -42,10 +23,10 @@ function getElementDocument(element) {
     return element.ownerDocument;
 }
 
-var cachedScrollbarWidth = null;
-var cachedDevicePixelRatio = null;
-if (canUseDOM__default.default) {
-    window.addEventListener('resize', function () {
+let cachedScrollbarWidth = null;
+let cachedDevicePixelRatio = null;
+if (canUseDOM) {
+    window.addEventListener('resize', () => {
         if (cachedDevicePixelRatio !== window.devicePixelRatio) {
             cachedDevicePixelRatio = window.devicePixelRatio;
             cachedScrollbarWidth = null;
@@ -54,107 +35,106 @@ if (canUseDOM__default.default) {
 }
 function scrollbarWidth(el) {
     if (cachedScrollbarWidth === null) {
-        var document_1 = getElementDocument(el);
-        if (typeof document_1 === 'undefined') {
+        const document = getElementDocument(el);
+        if (typeof document === 'undefined') {
             cachedScrollbarWidth = 0;
             return cachedScrollbarWidth;
         }
-        var body = document_1.body;
-        var box = document_1.createElement('div');
+        const body = document.body;
+        const box = document.createElement('div');
         box.classList.add('simplebar-hide-scrollbar');
         body.appendChild(box);
-        var width = box.getBoundingClientRect().right;
+        const width = box.getBoundingClientRect().right;
         body.removeChild(box);
         cachedScrollbarWidth = width;
     }
     return cachedScrollbarWidth;
 }
 
-var SimpleBar = /** @class */ (function () {
-    function SimpleBar(element, options) {
-        var _this = this;
+class SimpleBar {
+    constructor(element, options) {
         /**
          * On scroll event handling
          */
-        this.onScroll = function () {
-            var elWindow = getElementWindow(_this.el);
-            if (!_this.scrollXTicking) {
-                elWindow.requestAnimationFrame(_this.scrollX);
-                _this.scrollXTicking = true;
+        this.onScroll = () => {
+            const elWindow = getElementWindow(this.el);
+            if (!this.scrollXTicking) {
+                elWindow.requestAnimationFrame(this.scrollX);
+                this.scrollXTicking = true;
             }
-            if (!_this.scrollYTicking) {
-                elWindow.requestAnimationFrame(_this.scrollY);
-                _this.scrollYTicking = 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.scrollX = () => {
+            if (this.axis.x.isOverflowing) {
+                this.showScrollbar('x');
+                this.positionScrollbar('x');
             }
-            _this.scrollXTicking = false;
+            this.scrollXTicking = false;
         };
-        this.scrollY = function () {
-            if (_this.axis.y.isOverflowing) {
-                _this.showScrollbar('y');
-                _this.positionScrollbar('y');
+        this.scrollY = () => {
+            if (this.axis.y.isOverflowing) {
+                this.showScrollbar('y');
+                this.positionScrollbar('y');
             }
-            _this.scrollYTicking = false;
+            this.scrollYTicking = false;
         };
-        this.onMouseEnter = function () {
-            _this.showScrollbar('x');
-            _this.showScrollbar('y');
+        this.onMouseEnter = () => {
+            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');
+        this.onMouseMove = 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');
+            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');
+        this.onMouseLeave = () => {
+            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');
+            if (this.axis.y.isOverflowing || this.axis.y.forceVisible) {
+                this.onMouseLeaveForAxis('y');
             }
-            _this.mouseX = -1;
-            _this.mouseY = -1;
+            this.mouseX = -1;
+            this.mouseY = -1;
         };
-        this.onWindowResize = function () {
+        this.onWindowResize = () => {
             // Recalculate scrollbarWidth in case it's a zoom
-            _this.scrollbarWidth = _this.getScrollbarWidth();
-            _this.hideNativeScrollbar();
+            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();
-            if (!_this.isWithinBounds(_this.axis.y.track.rect)) {
-                _this.axis.y.scrollbar.el.classList.remove(_this.classNames.visible);
-                _this.axis.y.isVisible = false;
+        this.hideScrollbars = () => {
+            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;
+            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, 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);
+        this.onPointerEvent = e => {
+            let isWithinTrackXBounds, 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 (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 (isWithinTrackXBounds || isWithinTrackYBounds) {
@@ -165,21 +145,21 @@ var SimpleBar = /** @class */ (function () {
                 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');
+                        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');
+                            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');
+                        this.axis.y.scrollbar.rect = this.axis.y.scrollbar.el.getBoundingClientRect();
+                        if (this.isWithinBounds(this.axis.y.scrollbar.rect)) {
+                            this.onDragStart(e, 'y');
                         }
                         else {
-                            _this.onTrackClick(e, 'y');
+                            this.onTrackClick(e, 'y');
                         }
                     }
                 }
@@ -188,72 +168,75 @@ var SimpleBar = /** @class */ (function () {
         /**
          * Drag scrollbar handle
          */
-        this.drag = function (e) {
-            var eventOffset;
-            var track = _this.axis[_this.draggedAxis].track;
-            var trackSize = track.rect[_this.axis[_this.draggedAxis].sizeAttr];
-            var scrollbar = _this.axis[_this.draggedAxis].scrollbar;
-            var contentSize = _this.contentWrapperEl[_this.axis[_this.draggedAxis].scrollSizeAttr];
-            var hostSize = parseInt(_this.elStyles[_this.axis[_this.draggedAxis].sizeAttr], 10);
+        this.drag = e => {
+            let eventOffset;
+            const track = this.axis[this.draggedAxis].track;
+            const trackSize = track.rect[this.axis[this.draggedAxis].sizeAttr];
+            const scrollbar = this.axis[this.draggedAxis].scrollbar;
+            const contentSize = this.contentWrapperEl[this.axis[this.draggedAxis].scrollSizeAttr];
+            const hostSize = parseInt(this.elStyles[this.axis[this.draggedAxis].sizeAttr], 10);
             e.preventDefault();
             e.stopPropagation();
-            if (_this.draggedAxis === 'y') {
+            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).
-            var dragPos = eventOffset -
-                track.rect[_this.axis[_this.draggedAxis].offsetAttr] -
-                _this.axis[_this.draggedAxis].dragOffset;
+            let 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);
+            let dragPerc = dragPos / (trackSize - scrollbar.size);
             // Scroll the content by the same percentage.
-            var scrollPos = dragPerc * (contentSize - hostSize);
+            let scrollPos = dragPerc * (contentSize - hostSize);
             // Fix browsers inconsistency on RTL
-            if (_this.draggedAxis === 'x') {
+            if (this.draggedAxis === 'x') {
                 scrollPos =
-                    _this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollbarInverted
+                    this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollbarInverted
                         ? scrollPos - (trackSize + scrollbar.size)
                         : scrollPos;
                 scrollPos =
-                    _this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollingInverted
+                    this.isRtl && SimpleBar.getRtlHelpers().isRtlScrollingInverted
                         ? -scrollPos
                         : scrollPos;
             }
-            _this.contentWrapperEl[_this.axis[_this.draggedAxis].scrollOffsetAttr] = 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);
+        this.onEndDrag = e => {
+            const elDocument = getElementDocument(this.el);
+            const elWindow = 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 () {
+            this.el.classList.remove(this.classNames.dragging);
+            elDocument.removeEventListener('mousemove', this.drag, true);
+            elDocument.removeEventListener('mouseup', this.onEndDrag, true);
+            this.removePreventClickId = elWindow.setTimeout(() => {
                 // Remove these asynchronously so we still suppress click events
                 // generated simultaneously with mouseup.
-                elDocument.removeEventListener('click', _this.preventClick, true);
-                elDocument.removeEventListener('dblclick', _this.preventClick, true);
-                _this.removePreventClickId = null;
+                elDocument.removeEventListener('click', this.preventClick, true);
+                elDocument.removeEventListener('dblclick', this.preventClick, true);
+                this.removePreventClickId = null;
             });
         };
         /**
          * Handler to ignore click events during drag
          */
-        this.preventClick = function (e) {
+        this.preventClick = e => {
             e.preventDefault();
             e.stopPropagation();
         };
         this.el = element;
         this.minScrollbarWidth = 20;
-        this.options = tslib.__assign(tslib.__assign({}, SimpleBar.defaultOptions), options);
-        this.classNames = tslib.__assign(tslib.__assign({}, SimpleBar.defaultOptions.classNames), this.options.classNames);
+        this.options = { ...SimpleBar.defaultOptions, ...options };
+        this.classNames = {
+            ...SimpleBar.defaultOptions.classNames,
+            ...this.options.classNames
+        };
         this.axis = {
             x: {
                 scrollOffsetAttr: 'scrollLeft',
@@ -289,13 +272,13 @@ var SimpleBar = /** @class */ (function () {
         if (SimpleBar.instances.has(this.el)) {
             return;
         }
-        this.recalculate = throttle__default.default(this.recalculate.bind(this), 64);
-        this.onMouseMove = throttle__default.default(this.onMouseMove.bind(this), 64);
-        this.hideScrollbars = debounce__default.default(this.hideScrollbars.bind(this), this.options.timeout);
-        this.onWindowResize = debounce__default.default(this.onWindowResize.bind(this), 64, {
+        this.recalculate = throttle(this.recalculate.bind(this), 64);
+        this.onMouseMove = throttle(this.onMouseMove.bind(this), 64);
+        this.hideScrollbars = debounce(this.hideScrollbars.bind(this), this.options.timeout);
+        this.onWindowResize = debounce(this.onWindowResize.bind(this), 64, {
             leading: true
         });
-        SimpleBar.getRtlHelpers = memoize__default.default(SimpleBar.getRtlHelpers);
+        SimpleBar.getRtlHelpers = memoize(SimpleBar.getRtlHelpers);
         this.init();
     }
     /**
@@ -307,18 +290,18 @@ var SimpleBar = /** @class */ (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 () {
-        var dummyDiv = document.createElement('div');
+    static getRtlHelpers() {
+        const dummyDiv = document.createElement('div');
         dummyDiv.innerHTML =
             '<div class="hs-dummy-scrollbar-size"><div style="height: 200%; width: 200%; margin: 10px 0;"></div></div>';
-        var scrollbarDummyEl = dummyDiv.firstElementChild;
+        const scrollbarDummyEl = dummyDiv.firstElementChild;
         document.body.appendChild(scrollbarDummyEl);
-        var dummyContainerChild = scrollbarDummyEl.firstElementChild;
+        const dummyContainerChild = scrollbarDummyEl.firstElementChild;
         scrollbarDummyEl.scrollLeft = 0;
-        var dummyContainerOffset = SimpleBar.getOffset(scrollbarDummyEl);
-        var dummyContainerChildOffset = SimpleBar.getOffset(dummyContainerChild);
+        const dummyContainerOffset = SimpleBar.getOffset(scrollbarDummyEl);
+        const dummyContainerChildOffset = SimpleBar.getOffset(dummyContainerChild);
         scrollbarDummyEl.scrollLeft = 999;
-        var dummyContainerScrollOffsetAfterScroll = SimpleBar.getOffset(dummyContainerChild);
+        const dummyContainerScrollOffsetAfterScroll = SimpleBar.getOffset(dummyContainerChild);
         return {
             // determines if the scrolling is responding with negative values
             isRtlScrollingInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left &&
@@ -328,51 +311,48 @@ var SimpleBar = /** @class */ (function () {
             // determines if the origin scrollbar position is inverted or not (positioned on left or right)
             isRtlScrollbarInverted: dummyContainerOffset.left !== dummyContainerChildOffset.left
         };
-    };
-    SimpleBar.getOffset = function (el) {
-        var rect = el.getBoundingClientRect();
-        var elDocument = getElementDocument(el);
-        var elWindow = getElementWindow(el);
+    }
+    static getOffset(el) {
+        const rect = el.getBoundingClientRect();
+        const elDocument = getElementDocument(el);
+        const elWindow = getElementWindow(el);
         return {
             top: rect.top +
                 (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
             left: rect.left +
                 (elWindow.pageXOffset || elDocument.documentElement.scrollLeft)
         };
-    };
-    SimpleBar.prototype.init = function () {
+    }
+    init() {
         // 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
-        if (canUseDOM__default.default) {
+        if (canUseDOM) {
             this.initDOM();
             this.setAccessibilityAttributes();
             this.scrollbarWidth = this.getScrollbarWidth();
             this.recalculate();
             this.initListeners();
         }
-    };
-    SimpleBar.prototype.initDOM = function () {
-        var _this = this;
+    }
+    initDOM() {
         // make sure this element doesn't have the elements yet
-        if (Array.prototype.filter.call(this.el.children, function (child) {
-            return child.classList.contains(_this.classNames.wrapper);
-        }).length) {
+        if (Array.prototype.filter.call(this.el.children, child => child.classList.contains(this.classNames.wrapper)).length) {
             // assume that element has his DOM already initiated
-            this.wrapperEl = this.el.querySelector(".".concat(this.classNames.wrapper));
+            this.wrapperEl = this.el.querySelector(`.${this.classNames.wrapper}`);
             this.contentWrapperEl =
                 this.options.scrollableNode ||
-                    this.el.querySelector(".".concat(this.classNames.contentWrapper));
+                    this.el.querySelector(`.${this.classNames.contentWrapper}`);
             this.contentEl =
                 this.options.contentNode ||
-                    this.el.querySelector(".".concat(this.classNames.contentEl));
-            this.offsetEl = this.el.querySelector(".".concat(this.classNames.offset));
-            this.maskEl = this.el.querySelector(".".concat(this.classNames.mask));
-            this.placeholderEl = this.findChild(this.wrapperEl, ".".concat(this.classNames.placeholder));
-            this.heightAutoObserverWrapperEl = this.el.querySelector(".".concat(this.classNames.heightAutoObserverWrapperEl));
-            this.heightAutoObserverEl = this.el.querySelector(".".concat(this.classNames.heightAutoObserverEl));
-            this.axis.x.track.el = this.findChild(this.el, ".".concat(this.classNames.track, ".").concat(this.classNames.horizontal));
-            this.axis.y.track.el = this.findChild(this.el, ".".concat(this.classNames.track, ".").concat(this.classNames.vertical));
+                    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}`);
+            this.heightAutoObserverWrapperEl = this.el.querySelector(`.${this.classNames.heightAutoObserverWrapperEl}`);
+            this.heightAutoObserverEl = this.el.querySelector(`.${this.classNames.heightAutoObserverEl}`);
+            this.axis.x.track.el = this.findChild(this.el, `.${this.classNames.track}.${this.classNames.horizontal}`);
+            this.axis.y.track.el = this.findChild(this.el, `.${this.classNames.track}.${this.classNames.vertical}`);
         }
         else {
             // Prepare DOM
@@ -405,8 +385,8 @@ var SimpleBar = /** @class */ (function () {
             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');
+            const track = document.createElement('div');
+            const scrollbar = document.createElement('div');
             track.classList.add(this.classNames.track);
             scrollbar.classList.add(this.classNames.scrollbar);
             track.appendChild(scrollbar);
@@ -417,32 +397,31 @@ var SimpleBar = /** @class */ (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));
+        this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector(`.${this.classNames.scrollbar}`);
+        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector(`.${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');
-    };
-    SimpleBar.prototype.setAccessibilityAttributes = function () {
-        var ariaLabel = this.options.ariaLabel || 'scrollable content';
+    }
+    setAccessibilityAttributes() {
+        const ariaLabel = this.options.ariaLabel || 'scrollable content';
         this.contentWrapperEl.setAttribute('tabindex', '0');
         this.contentWrapperEl.setAttribute('role', 'region');
         this.contentWrapperEl.setAttribute('aria-label', ariaLabel);
-    };
-    SimpleBar.prototype.initListeners = function () {
-        var _this = this;
-        var elWindow = getElementWindow(this.el);
+    }
+    initListeners() {
+        const elWindow = getElementWindow(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.addEventListener('mouseenter', this.onMouseEnter);
         }
-        ['mousedown', 'click', 'dblclick'].forEach(function (e) {
-            _this.el.addEventListener(e, _this.onPointerEvent, true);
+        ['mousedown', 'click', 'dblclick'].forEach(e => {
+            this.el.addEventListener(e, this.onPointerEvent, true);
         });
-        ['touchstart', 'touchend', 'touchmove'].forEach(function (e) {
-            _this.el.addEventListener(e, _this.onPointerEvent, {
+        ['touchstart', 'touchend', 'touchmove'].forEach(e => {
+            this.el.addEventListener(e, this.onPointerEvent, {
                 capture: true,
                 passive: true
             });
@@ -453,16 +432,16 @@ var SimpleBar = /** @class */ (function () {
         // 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 () {
+        let resizeObserverStarted = false;
+        const resizeObserver = elWindow.ResizeObserver || ResizeObserver;
+        this.resizeObserver = new resizeObserver(() => {
             if (!resizeObserverStarted)
                 return;
-            _this.recalculate();
+            this.recalculate();
         });
         this.resizeObserver.observe(this.el);
         this.resizeObserver.observe(this.contentEl);
-        elWindow.requestAnimationFrame(function () {
+        elWindow.requestAnimationFrame(() => {
             resizeObserverStarted = true;
         });
         // This is required to detect horizontal scroll. Vertical scroll only needs the resizeObserver.
@@ -472,28 +451,28 @@ var SimpleBar = /** @class */ (function () {
             subtree: true,
             characterData: true
         });
-    };
-    SimpleBar.prototype.recalculate = function () {
-        var elWindow = getElementWindow(this.el);
+    }
+    recalculate() {
+        const elWindow = getElementWindow(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
-        var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
-        var isWidthAuto = this.heightAutoObserverEl.offsetWidth <= 1;
-        var contentElOffsetWidth = this.contentEl.offsetWidth;
-        var contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
-        var elOverflowX = this.elStyles.overflowX;
-        var elOverflowY = this.elStyles.overflowY;
-        this.contentEl.style.padding = "".concat(this.elStyles.paddingTop, " ").concat(this.elStyles.paddingRight, " ").concat(this.elStyles.paddingBottom, " ").concat(this.elStyles.paddingLeft);
-        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;
+        const isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
+        const isWidthAuto = this.heightAutoObserverEl.offsetWidth <= 1;
+        const contentElOffsetWidth = this.contentEl.offsetWidth;
+        const contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
+        const elOverflowX = this.elStyles.overflowX;
+        const elOverflowY = this.elStyles.overflowY;
+        this.contentEl.style.padding = `${this.elStyles.paddingTop} ${this.elStyles.paddingRight} ${this.elStyles.paddingBottom} ${this.elStyles.paddingLeft}`;
+        this.wrapperEl.style.margin = `-${this.elStyles.paddingTop} -${this.elStyles.paddingRight} -${this.elStyles.paddingBottom} -${this.elStyles.paddingLeft}`;
+        const contentElScrollHeight = this.contentEl.scrollHeight;
+        const contentElScrollWidth = this.contentEl.scrollWidth;
         this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%';
         // Determine placeholder size
         this.placeholderEl.style.width = isWidthAuto
-            ? "".concat(contentElOffsetWidth, "px")
+            ? `${contentElOffsetWidth}px`
             : 'auto';
-        this.placeholderEl.style.height = "".concat(contentElScrollHeight, "px");
-        var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
+        this.placeholderEl.style.height = `${contentElScrollHeight}px`;
+        const contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
         this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
         this.axis.y.isOverflowing =
             contentElScrollHeight > contentWrapperElOffsetHeight;
@@ -508,10 +487,10 @@ var SimpleBar = /** @class */ (function () {
             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
+        let offsetForXScrollbar = this.axis.x.isOverflowing
             ? this.scrollbarWidth
             : 0;
-        var offsetForYScrollbar = this.axis.y.isOverflowing
+        let offsetForYScrollbar = this.axis.y.isOverflowing
             ? this.scrollbarWidth
             : 0;
         this.axis.x.isOverflowing =
@@ -523,50 +502,48 @@ var SimpleBar = /** @class */ (function () {
                     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 = "".concat(this.axis.x.scrollbar.size, "px");
-        this.axis.y.scrollbar.el.style.height = "".concat(this.axis.y.scrollbar.size, "px");
+        this.axis.x.scrollbar.el.style.width = `${this.axis.x.scrollbar.size}px`;
+        this.axis.y.scrollbar.el.style.height = `${this.axis.y.scrollbar.size}px`;
         this.positionScrollbar('x');
         this.positionScrollbar('y');
         this.toggleTrackVisibility('x');
         this.toggleTrackVisibility('y');
-    };
+    }
     /**
      * Calculate scrollbar size
      */
-    SimpleBar.prototype.getScrollbarSize = function (axis) {
-        if (axis === void 0) { axis = 'y'; }
+    getScrollbarSize(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;
+        const contentSize = this.contentEl[this.axis[axis].scrollSizeAttr];
+        const trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
+        let scrollbarSize;
+        let 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;
-    };
-    SimpleBar.prototype.positionScrollbar = function (axis) {
-        if (axis === void 0) { axis = 'y'; }
+    }
+    positionScrollbar(axis = '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);
-        var scrollbar = this.axis[axis].scrollbar;
-        var scrollOffset = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
+        const contentSize = this.contentWrapperEl[this.axis[axis].scrollSizeAttr];
+        const trackSize = this.axis[axis].track.el[this.axis[axis].offsetSizeAttr];
+        const hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
+        const scrollbar = this.axis[axis].scrollbar;
+        let scrollOffset = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
         scrollOffset =
             axis === 'x' &&
                 this.isRtl &&
                 SimpleBar.getRtlHelpers().isRtlScrollingInverted
                 ? -scrollOffset
                 : scrollOffset;
-        var scrollPourcent = scrollOffset / (contentSize - hostSize);
-        var handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
+        let scrollPourcent = scrollOffset / (contentSize - hostSize);
+        let handleOffset = ~~((trackSize - scrollbar.size) * scrollPourcent);
         handleOffset =
             axis === 'x' &&
                 this.isRtl &&
@@ -575,13 +552,12 @@ var SimpleBar = /** @class */ (function () {
                 : handleOffset;
         scrollbar.el.style.transform =
             axis === 'x'
-                ? "translate3d(".concat(handleOffset, "px, 0, 0)")
-                : "translate3d(0, ".concat(handleOffset, "px, 0)");
-    };
-    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;
+                ? `translate3d(${handleOffset}px, 0, 0)`
+                : `translate3d(0, ${handleOffset}px, 0)`;
+    }
+    toggleTrackVisibility(axis = 'y') {
+        const track = this.axis[axis].track.el;
+        const 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';
@@ -597,22 +573,21 @@ var SimpleBar = /** @class */ (function () {
         else {
             scrollbar.style.display = 'none';
         }
-    };
-    SimpleBar.prototype.hideNativeScrollbar = function () {
+    }
+    hideNativeScrollbar() {
         this.offsetEl.style[this.isRtl ? 'left' : 'right'] =
             this.axis.y.isOverflowing || this.axis.y.forceVisible
-                ? "-".concat(this.scrollbarWidth, "px")
+                ? `-${this.scrollbarWidth}px`
                 : 0;
         this.offsetEl.style.bottom =
             this.axis.x.isOverflowing || this.axis.x.forceVisible
-                ? "-".concat(this.scrollbarWidth, "px")
+                ? `-${this.scrollbarWidth}px`
                 : 0;
-    };
-    SimpleBar.prototype.onMouseMoveForAxis = function (axis) {
-        if (axis === void 0) { axis = 'y'; }
+    }
+    onMouseMoveForAxis(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);
+        const isWithinScrollbarBoundsX = this.isWithinBounds(this.axis[axis].scrollbar.rect);
         if (isWithinScrollbarBoundsX) {
             this.axis[axis].scrollbar.el.classList.add(this.classNames.hover);
         }
@@ -626,18 +601,16 @@ var SimpleBar = /** @class */ (function () {
         else {
             this.axis[axis].track.el.classList.remove(this.classNames.hover);
         }
-    };
-    SimpleBar.prototype.onMouseLeaveForAxis = function (axis) {
-        if (axis === void 0) { axis = 'y'; }
+    }
+    onMouseLeaveForAxis(axis = 'y') {
         this.axis[axis].track.el.classList.remove(this.classNames.hover);
         this.axis[axis].scrollbar.el.classList.remove(this.classNames.hover);
-    };
+    }
     /**
      * Show scrollbar
      */
-    SimpleBar.prototype.showScrollbar = function (axis) {
-        if (axis === void 0) { axis = 'y'; }
-        var scrollbar = this.axis[axis].scrollbar.el;
+    showScrollbar(axis = 'y') {
+        let scrollbar = this.axis[axis].scrollbar.el;
         if (!this.axis[axis].isVisible) {
             scrollbar.classList.add(this.classNames.visible);
             this.axis[axis].isVisible = true;
@@ -645,17 +618,16 @@ var SimpleBar = /** @class */ (function () {
         if (this.options.autoHide) {
             this.hideScrollbars();
         }
-    };
+    }
     /**
      * on scrollbar handle drag movement starts
      */
-    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;
+    onDragStart(e, axis = 'y') {
+        const elDocument = getElementDocument(this.el);
+        const elWindow = getElementWindow(this.el);
+        const 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;
+        const eventOffset = axis === 'y' ? e.pageY : e.pageX;
         this.axis[axis].dragOffset =
             eventOffset - scrollbar.rect[this.axis[axis].offsetAttr];
         this.draggedAxis = axis;
@@ -670,59 +642,56 @@ var SimpleBar = /** @class */ (function () {
             elWindow.clearTimeout(this.removePreventClickId);
             this.removePreventClickId = null;
         }
-    };
-    SimpleBar.prototype.onTrackClick = function (e, axis) {
-        var _this = this;
-        if (axis === void 0) { axis = 'y'; }
+    }
+    onTrackClick(e, axis = 'y') {
         if (!this.options.clickOnTrack)
             return;
-        var elWindow = getElementWindow(this.el);
+        const elWindow = getElementWindow(this.el);
         this.axis[axis].scrollbar.rect = this.axis[axis].scrollbar.el.getBoundingClientRect();
-        var scrollbar = this.axis[axis].scrollbar;
-        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'
+        const scrollbar = this.axis[axis].scrollbar;
+        const scrollbarOffset = scrollbar.rect[this.axis[axis].offsetAttr];
+        const hostSize = parseInt(this.elStyles[this.axis[axis].sizeAttr], 10);
+        let scrolled = this.contentWrapperEl[this.axis[axis].scrollOffsetAttr];
+        const 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 () {
-            var _a, _b;
+        const dir = t < 0 ? -1 : 1;
+        const scrollSize = dir === -1 ? scrolled - hostSize : scrolled + hostSize;
+        const scrollTo = () => {
             if (dir === -1) {
                 if (scrolled > scrollSize) {
-                    scrolled -= _this.options.clickOnTrackSpeed;
-                    _this.contentWrapperEl.scrollTo((_a = {},
-                        _a[_this.axis[axis].offsetAttr] = scrolled,
-                        _a));
+                    scrolled -= this.options.clickOnTrackSpeed;
+                    this.contentWrapperEl.scrollTo({
+                        [this.axis[axis].offsetAttr]: scrolled
+                    });
                     elWindow.requestAnimationFrame(scrollTo);
                 }
             }
             else {
                 if (scrolled < scrollSize) {
-                    scrolled += _this.options.clickOnTrackSpeed;
-                    _this.contentWrapperEl.scrollTo((_b = {},
-                        _b[_this.axis[axis].offsetAttr] = scrolled,
-                        _b));
+                    scrolled += this.options.clickOnTrackSpeed;
+                    this.contentWrapperEl.scrollTo({
+                        [this.axis[axis].offsetAttr]: scrolled
+                    });
                     elWindow.requestAnimationFrame(scrollTo);
                 }
             }
         };
         scrollTo();
-    };
+    }
     /**
      * Getter for content element
      */
-    SimpleBar.prototype.getContentElement = function () {
+    getContentElement() {
         return this.contentEl;
-    };
+    }
     /**
      * Getter for original scrolling element
      */
-    SimpleBar.prototype.getScrollElement = function () {
+    getScrollElement() {
         return this.contentWrapperEl;
-    };
-    SimpleBar.prototype.getScrollbarWidth = function () {
+    }
+    getScrollbarWidth() {
         // Try/catch for FF 56 throwing on undefined computedStyles
         try {
             // Detect browsers supporting CSS scrollbar styling and do not calculate
@@ -739,19 +708,18 @@ var SimpleBar = /** @class */ (function () {
         catch (e) {
             return scrollbarWidth(this.el);
         }
-    };
-    SimpleBar.prototype.removeListeners = function () {
-        var _this = this;
-        var elWindow = getElementWindow(this.el);
+    }
+    removeListeners() {
+        const elWindow = getElementWindow(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.removeEventListener('mouseenter', this.onMouseEnter);
         }
-        ['mousedown', 'click', 'dblclick'].forEach(function (e) {
-            _this.el.removeEventListener(e, _this.onPointerEvent, true);
+        ['mousedown', 'click', 'dblclick'].forEach(e => {
+            this.el.removeEventListener(e, this.onPointerEvent, true);
         });
-        ['touchstart', 'touchend', 'touchmove'].forEach(function (e) {
-            _this.el.removeEventListener(e, _this.onPointerEvent, {
+        ['touchstart', 'touchend', 'touchmove'].forEach(e => {
+            this.el.removeEventListener(e, this.onPointerEvent, {
                 capture: true,
                 passive: true
             });
@@ -773,101 +741,106 @@ var SimpleBar = /** @class */ (function () {
         this.onMouseMove.cancel();
         this.hideScrollbars.cancel();
         this.onWindowResize.cancel();
-    };
+    }
     /**
      * UnMount mutation observer and delete SimpleBar instance from DOM element
      */
-    SimpleBar.prototype.unMount = function () {
+    unMount() {
         this.removeListeners();
         SimpleBar.instances.delete(this.el);
-    };
+    }
     /**
      * Check if mouse is within bounds
      */
-    SimpleBar.prototype.isWithinBounds = function (bbox) {
+    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
      */
-    SimpleBar.prototype.findChild = function (el, query) {
-        var matches = el.matches ||
+    findChild(el, query) {
+        const 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;
-}());
+        return Array.prototype.filter.call(el.children, child => 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();
+
+const defaultColors = {"component":"component"};
+require('./default.css');
+
+const styles = {"component":"component","wrapper":"wrapper","heightAutoObserverWrapper":"heightAutoObserverWrapper","heightAutoObserver":"heightAutoObserver","-webkit-mask":"mask","mask":"mask","offset":"offset","contentWrapper":"contentWrapper","placeholder":"placeholder","vertical":"vertical","hover":"hover","horizontal":"horizontal","content":"content"};
+require('./index.css');
+
+const invertedColors = {"component":"component"};
+require('./inverted.css');
 
-var colorStylesMap = {
-    default: defaultColors__default.default,
-    inverted: invertedColors__default.default,
+const colorStylesMap = {
+    default: defaultColors,
+    inverted: invertedColors,
 };
-var classNames = {
-    wrapper: styles__default.default.wrapper,
-    heightAutoObserverEl: styles__default.default.heightAutoObserver,
-    heightAutoObserverWrapperEl: styles__default.default.heightAutoObserverWrapper,
-    mask: styles__default.default.mask,
-    offset: styles__default.default.offset,
-    contentWrapper: styles__default.default.contentWrapper,
-    contentEl: styles__default.default.content,
-    placeholder: styles__default.default.placeholder,
-    vertical: styles__default.default.vertical,
-    horizontal: styles__default.default.horizontal,
-    hover: styles__default.default.hover,
+const classNames = {
+    wrapper: styles.wrapper,
+    heightAutoObserverEl: styles.heightAutoObserver,
+    heightAutoObserverWrapperEl: styles.heightAutoObserverWrapper,
+    mask: styles.mask,
+    offset: styles.offset,
+    contentWrapper: styles.contentWrapper,
+    contentEl: styles.content,
+    placeholder: styles.placeholder,
+    vertical: styles.vertical,
+    horizontal: styles.horizontal,
+    hover: styles.hover,
     track: 'track',
     scrollbar: 'scrollbar',
     dragging: 'dragging',
     visible: 'visible',
 };
-var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
-    var _b = _a.colors, colors = _b === void 0 ? 'default' : _b, className = _a.className, children = _a.children, _c = _a.scrollableNodeProps, scrollableNodeProps = _c === void 0 ? { ref: null } : _c, _d = _a.contentNodeProps, contentNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.autoHide, autoHide = _e === void 0 ? true : _e, _f = _a.forceVisible, forceVisible = _f === void 0 ? false : _f, _g = _a.autoHideTimeout, autoHideTimeout = _g === void 0 ? 1000 : _g, _h = _a.clickOnTrack, clickOnTrack = _h === void 0 ? true : _h, _j = _a.horizontalAutoStretch, horizontalAutoStretch = _j === void 0 ? false : _j, _k = _a.widthPropName, widthPropName = _k === void 0 ? 'minWidth' : _k, htmlAttributes = tslib.__rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
-    var elRef = React.useRef(null);
-    var scrollableNodeRef = React.useRef(null);
-    var contentNodeRef = React.useRef(null);
-    var maskNodeRef = React.useRef(null);
-    var colorStyles = colorStylesMap[colors];
-    React.useEffect(function () {
-        var instance;
+const Scrollbar = React.forwardRef(({ colors = 'default', className, children, scrollableNodeProps = { ref: null }, contentNodeProps = { ref: null }, autoHide = true, forceVisible = false, autoHideTimeout = 1000, clickOnTrack = true, horizontalAutoStretch = false, widthPropName = 'minWidth', ...htmlAttributes }, ref) => {
+    const elRef = useRef(null);
+    const scrollableNodeRef = useRef(null);
+    const contentNodeRef = useRef(null);
+    const maskNodeRef = useRef(null);
+    const colorStyles = colorStylesMap[colors];
+    useEffect(() => {
+        let instance;
         if (elRef.current) {
             instance = new SimpleBar(elRef.current, {
-                autoHide: autoHide,
-                forceVisible: forceVisible,
-                clickOnTrack: clickOnTrack,
-                classNames: classNames,
+                autoHide,
+                forceVisible,
+                clickOnTrack,
+                classNames,
                 timeout: autoHideTimeout,
                 direction: 'ltr',
                 scrollbarMinSize: 40,
@@ -875,7 +848,7 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                 contentNode: contentNodeRef.current,
             });
         }
-        return function () {
+        return () => {
             if (instance) {
                 instance.unMount();
                 instance = null;
@@ -883,13 +856,13 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    React.useEffect(function () {
-        var mutationObserver = null;
-        var contentNode = contentNodeRef.current;
-        var rootNode = elRef.current;
-        var scrollableNode = scrollableNodeRef.current;
-        var maskNode = maskNodeRef.current;
-        var setMinWidth = throttle__default.default(function () {
+    useEffect(() => {
+        let mutationObserver = null;
+        const contentNode = contentNodeRef.current;
+        const rootNode = elRef.current;
+        const scrollableNode = scrollableNodeRef.current;
+        const maskNode = maskNodeRef.current;
+        const setMinWidth = throttle(() => {
             if (contentNode && rootNode && scrollableNode && maskNode) {
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
@@ -897,9 +870,9 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                  */
                 maskNode.style.minWidth = '4000px';
                 contentNode.style.display = 'inline-block';
-                var contentRect = contentNode.getBoundingClientRect();
-                var newWidth = "".concat(Math.ceil(contentRect.width), "px");
-                var prevWidth = rootNode.style[widthPropName];
+                const contentRect = contentNode.getBoundingClientRect();
+                const newWidth = `${Math.ceil(contentRect.width)}px`;
+                const prevWidth = rootNode.style[widthPropName];
                 if (newWidth !== prevWidth) {
                     rootNode.style[widthPropName] = newWidth;
                 }
@@ -916,30 +889,32 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                 characterData: true,
             });
         }
-        return function () {
+        return () => {
             setMinWidth.cancel();
             if (mutationObserver) {
                 mutationObserver.disconnect();
             }
         };
     }, [widthPropName, horizontalAutoStretch]);
-    return (React__default.default.createElement("div", tslib.__assign({}, htmlAttributes, { ref: mergeRefs__default.default([elRef, ref]), "data-simplebar": true, className: cn__default.default(styles__default.default.component, colorStyles.component, className) }),
-        React__default.default.createElement("div", { className: classNames.wrapper },
-            React__default.default.createElement("div", { className: classNames.heightAutoObserverWrapperEl },
-                React__default.default.createElement("div", { className: classNames.heightAutoObserverEl })),
-            React__default.default.createElement("div", { className: classNames.mask, ref: maskNodeRef },
-                React__default.default.createElement("div", { className: classNames.offset },
-                    React__default.default.createElement("div", tslib.__assign({}, scrollableNodeProps, { ref: mergeRefs__default.default(tslib.__spreadArray([
-                            scrollableNodeRef
-                        ], (scrollableNodeProps.ref ? [scrollableNodeProps.ref] : []), true)), className: cn__default.default(classNames.contentWrapper, scrollableNodeProps === null || scrollableNodeProps === void 0 ? void 0 : scrollableNodeProps.className) }),
-                        React__default.default.createElement("div", tslib.__assign({}, contentNodeProps, { ref: mergeRefs__default.default(tslib.__spreadArray([
-                                contentNodeRef
-                            ], (contentNodeProps.ref ? [contentNodeProps.ref] : []), true)), className: cn__default.default(classNames.contentEl, contentNodeProps === null || contentNodeProps === void 0 ? void 0 : contentNodeProps.className) }), children)))),
-            React__default.default.createElement("div", { className: classNames.placeholder })),
-        React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.horizontal) },
-            React__default.default.createElement("div", { className: classNames.scrollbar })),
-        React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical) },
-            React__default.default.createElement("div", { className: classNames.scrollbar }))));
+    return (React.createElement("div", { ...htmlAttributes, ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) },
+        React.createElement("div", { className: classNames.wrapper },
+            React.createElement("div", { className: classNames.heightAutoObserverWrapperEl },
+                React.createElement("div", { className: classNames.heightAutoObserverEl })),
+            React.createElement("div", { className: classNames.mask, ref: maskNodeRef },
+                React.createElement("div", { className: classNames.offset },
+                    React.createElement("div", { ...scrollableNodeProps, ref: mergeRefs([
+                            scrollableNodeRef,
+                            ...(scrollableNodeProps.ref ? [scrollableNodeProps.ref] : []),
+                        ]), className: cn(classNames.contentWrapper, scrollableNodeProps?.className) },
+                        React.createElement("div", { ...contentNodeProps, ref: mergeRefs([
+                                contentNodeRef,
+                                ...(contentNodeProps.ref ? [contentNodeProps.ref] : []),
+                            ]), className: cn(classNames.contentEl, contentNodeProps?.className) }, children)))),
+            React.createElement("div", { className: classNames.placeholder })),
+        React.createElement("div", { className: cn(classNames.track, classNames.horizontal) },
+            React.createElement("div", { className: classNames.scrollbar })),
+        React.createElement("div", { className: cn(classNames.track, classNames.vertical) },
+            React.createElement("div", { className: classNames.scrollbar }))));
 });
 
-exports.Scrollbar = Scrollbar;
+export { Scrollbar };