@alfalab/core-components 36.3.1 → 36.5.0

package/scrollbar/Component.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
@@ -9,15 +7,15 @@ var memoize = require('lodash.memoize');
 var resizeObserver = require('@juggle/resize-observer');
 var canUseDOM = require('can-use-dom');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
-var canUseDOM__default = /*#__PURE__*/_interopDefaultLegacy(canUseDOM);
+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);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -87,7 +85,7 @@ function getElementDocument(element) {
 
 var cachedScrollbarWidth = null;
 var cachedDevicePixelRatio = null;
-if (canUseDOM__default['default']) {
+if (canUseDOM__default.default) {
     window.addEventListener('resize', function () {
         if (cachedDevicePixelRatio !== window.devicePixelRatio) {
             cachedDevicePixelRatio = window.devicePixelRatio;
@@ -332,13 +330,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__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, {
             leading: true
         });
-        SimpleBar.getRtlHelpers = memoize__default['default'](SimpleBar.getRtlHelpers);
+        SimpleBar.getRtlHelpers = memoize__default.default(SimpleBar.getRtlHelpers);
         this.init();
     }
     /**
@@ -387,7 +385,7 @@ var SimpleBar = /** @class */ (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
-        if (canUseDOM__default['default']) {
+        if (canUseDOM__default.default) {
             this.initDOM();
             this.setAccessibilityAttributes();
             this.scrollbarWidth = this.getScrollbarWidth();
@@ -402,20 +400,20 @@ var SimpleBar = /** @class */ (function () {
             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.wrapperEl = this.el.querySelector(".".concat(this.classNames.wrapper));
             this.contentWrapperEl =
                 this.options.scrollableNode ||
-                    this.el.querySelector("." + this.classNames.contentWrapper);
+                    this.el.querySelector(".".concat(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);
-            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);
+                    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));
         }
         else {
             // Prepare DOM
@@ -460,8 +458,8 @@ 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("." + this.classNames.scrollbar);
-        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector("." + this.classNames.scrollbar);
+        this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector(".".concat(this.classNames.scrollbar));
+        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector(".".concat(this.classNames.scrollbar));
         if (!this.options.autoHide) {
             this.axis.x.scrollbar.el.classList.add(this.classNames.visible);
             this.axis.y.scrollbar.el.classList.add(this.classNames.visible);
@@ -526,16 +524,16 @@ var SimpleBar = /** @class */ (function () {
         var contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
         var elOverflowX = this.elStyles.overflowX;
         var 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;
+        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;
         this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%';
         // Determine placeholder size
         this.placeholderEl.style.width = isWidthAuto
-            ? contentElOffsetWidth + "px"
+            ? "".concat(contentElOffsetWidth, "px")
             : 'auto';
-        this.placeholderEl.style.height = contentElScrollHeight + "px";
+        this.placeholderEl.style.height = "".concat(contentElScrollHeight, "px");
         var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
         this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
         this.axis.y.isOverflowing =
@@ -566,8 +564,8 @@ 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 = this.axis.x.scrollbar.size + "px";
-        this.axis.y.scrollbar.el.style.height = this.axis.y.scrollbar.size + "px";
+        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.positionScrollbar('x');
         this.positionScrollbar('y');
         this.toggleTrackVisibility('x');
@@ -618,8 +616,8 @@ var SimpleBar = /** @class */ (function () {
                 : handleOffset;
         scrollbar.el.style.transform =
             axis === 'x'
-                ? "translate3d(" + handleOffset + "px, 0, 0)"
-                : "translate3d(0, " + handleOffset + "px, 0)";
+                ? "translate3d(".concat(handleOffset, "px, 0, 0)")
+                : "translate3d(0, ".concat(handleOffset, "px, 0)");
     };
     SimpleBar.prototype.toggleTrackVisibility = function (axis) {
         if (axis === void 0) { axis = 'y'; }
@@ -644,11 +642,11 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.hideNativeScrollbar = function () {
         this.offsetEl.style[this.isRtl ? 'left' : 'right'] =
             this.axis.y.isOverflowing || this.axis.y.forceVisible
-                ? "-" + this.scrollbarWidth + "px"
+                ? "-".concat(this.scrollbarWidth, "px")
                 : 0;
         this.offsetEl.style.bottom =
             this.axis.x.isOverflowing || this.axis.x.forceVisible
-                ? "-" + this.scrollbarWidth + "px"
+                ? "-".concat(this.scrollbarWidth, "px")
                 : 0;
     };
     SimpleBar.prototype.onMouseMoveForAxis = function (axis) {
@@ -875,13 +873,13 @@ var SimpleBar = /** @class */ (function () {
     return SimpleBar;
 }());
 
-var defaultColors = {"component":"scrollbar__component_10pbj"};
+var defaultColors = {"component":"scrollbar__component_197ki"};
 require('./default.css');
 
-var styles = {"component":"scrollbar__component_1teqp","wrapper":"scrollbar__wrapper_1teqp","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_1teqp","heightAutoObserver":"scrollbar__heightAutoObserver_1teqp","-webkit-mask":"scrollbar__mask_1teqp","mask":"scrollbar__mask_1teqp","offset":"scrollbar__offset_1teqp","contentWrapper":"scrollbar__contentWrapper_1teqp","placeholder":"scrollbar__placeholder_1teqp","vertical":"scrollbar__vertical_1teqp","hover":"scrollbar__hover_1teqp","horizontal":"scrollbar__horizontal_1teqp","content":"scrollbar__content_1teqp"};
+var styles = {"component":"scrollbar__component_1ivdy","wrapper":"scrollbar__wrapper_1ivdy","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_1ivdy","heightAutoObserver":"scrollbar__heightAutoObserver_1ivdy","-webkit-mask":"scrollbar__mask_1ivdy","mask":"scrollbar__mask_1ivdy","offset":"scrollbar__offset_1ivdy","contentWrapper":"scrollbar__contentWrapper_1ivdy","placeholder":"scrollbar__placeholder_1ivdy","vertical":"scrollbar__vertical_1ivdy","hover":"scrollbar__hover_1ivdy","horizontal":"scrollbar__horizontal_1ivdy","content":"scrollbar__content_1ivdy"};
 require('./index.css');
 
-var invertedColors = {"component":"scrollbar__component_jqlnr"};
+var invertedColors = {"component":"scrollbar__component_s8un9"};
 require('./inverted.css');
 
 var colorStylesMap = {
@@ -905,7 +903,7 @@ var classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
-var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
+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 = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
     var elRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -941,7 +939,7 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
         var rootNode = elRef.current;
         var scrollableNode = scrollableNodeRef.current;
         var maskNode = maskNodeRef.current;
-        var setMinWidth = throttle__default['default'](function () {
+        var setMinWidth = throttle__default.default(function () {
             if (contentNode && rootNode && scrollableNode && maskNode) {
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
@@ -950,7 +948,7 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
                 maskNode.style.minWidth = '4000px';
                 contentNode.style.display = 'inline-block';
                 var contentRect = contentNode.getBoundingClientRect();
-                var newWidth = Math.ceil(contentRect.width) + "px";
+                var newWidth = "".concat(Math.ceil(contentRect.width), "px");
                 var prevWidth = rootNode.style[widthPropName];
                 if (newWidth !== prevWidth) {
                     rootNode.style[widthPropName] = newWidth;
@@ -975,23 +973,23 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
             }
         };
     }, [widthPropName, horizontalAutoStretch]);
-    return (React__default['default'].createElement("div", __assign({}, htmlAttributes, { ref: mergeRefs__default['default']([elRef, ref]), "data-simplebar": true, className: cn__default['default'](styles.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", __assign({}, scrollableNodeProps, { ref: mergeRefs__default['default'](__spreadArray([
+    return (React__default.default.createElement("div", __assign({}, htmlAttributes, { ref: mergeRefs__default.default([elRef, ref]), "data-simplebar": true, className: cn__default.default(styles.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", __assign({}, scrollableNodeProps, { ref: mergeRefs__default.default(__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", __assign({}, contentNodeProps, { ref: mergeRefs__default['default'](__spreadArray([
+                        ], (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", __assign({}, contentNodeProps, { ref: mergeRefs__default.default(__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 }))));
+                            ], (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 }))));
 });
 
 exports.Scrollbar = Scrollbar;

package/scrollbar/cssm/Component.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
 var cn = require('classnames');
@@ -12,18 +10,18 @@ var defaultColors = require('./default.module.css');
 var styles = require('./index.module.css');
 var invertedColors = require('./inverted.module.css');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var memoize__default = /*#__PURE__*/_interopDefaultLegacy(memoize);
-var canUseDOM__default = /*#__PURE__*/_interopDefaultLegacy(canUseDOM);
-var defaultColors__default = /*#__PURE__*/_interopDefaultLegacy(defaultColors);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
-var invertedColors__default = /*#__PURE__*/_interopDefaultLegacy(invertedColors);
+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);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -93,7 +91,7 @@ function getElementDocument(element) {
 
 var cachedScrollbarWidth = null;
 var cachedDevicePixelRatio = null;
-if (canUseDOM__default['default']) {
+if (canUseDOM__default.default) {
     window.addEventListener('resize', function () {
         if (cachedDevicePixelRatio !== window.devicePixelRatio) {
             cachedDevicePixelRatio = window.devicePixelRatio;
@@ -338,13 +336,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__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, {
             leading: true
         });
-        SimpleBar.getRtlHelpers = memoize__default['default'](SimpleBar.getRtlHelpers);
+        SimpleBar.getRtlHelpers = memoize__default.default(SimpleBar.getRtlHelpers);
         this.init();
     }
     /**
@@ -393,7 +391,7 @@ var SimpleBar = /** @class */ (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
-        if (canUseDOM__default['default']) {
+        if (canUseDOM__default.default) {
             this.initDOM();
             this.setAccessibilityAttributes();
             this.scrollbarWidth = this.getScrollbarWidth();
@@ -408,20 +406,20 @@ var SimpleBar = /** @class */ (function () {
             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.wrapperEl = this.el.querySelector(".".concat(this.classNames.wrapper));
             this.contentWrapperEl =
                 this.options.scrollableNode ||
-                    this.el.querySelector("." + this.classNames.contentWrapper);
+                    this.el.querySelector(".".concat(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);
-            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);
+                    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));
         }
         else {
             // Prepare DOM
@@ -466,8 +464,8 @@ 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("." + this.classNames.scrollbar);
-        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector("." + this.classNames.scrollbar);
+        this.axis.x.scrollbar.el = this.axis.x.track.el.querySelector(".".concat(this.classNames.scrollbar));
+        this.axis.y.scrollbar.el = this.axis.y.track.el.querySelector(".".concat(this.classNames.scrollbar));
         if (!this.options.autoHide) {
             this.axis.x.scrollbar.el.classList.add(this.classNames.visible);
             this.axis.y.scrollbar.el.classList.add(this.classNames.visible);
@@ -532,16 +530,16 @@ var SimpleBar = /** @class */ (function () {
         var contentWrapperElOffsetWidth = this.contentWrapperEl.offsetWidth;
         var elOverflowX = this.elStyles.overflowX;
         var 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;
+        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;
         this.contentWrapperEl.style.height = isHeightAuto ? 'auto' : '100%';
         // Determine placeholder size
         this.placeholderEl.style.width = isWidthAuto
-            ? contentElOffsetWidth + "px"
+            ? "".concat(contentElOffsetWidth, "px")
             : 'auto';
-        this.placeholderEl.style.height = contentElScrollHeight + "px";
+        this.placeholderEl.style.height = "".concat(contentElScrollHeight, "px");
         var contentWrapperElOffsetHeight = this.contentWrapperEl.offsetHeight;
         this.axis.x.isOverflowing = contentElScrollWidth > contentElOffsetWidth;
         this.axis.y.isOverflowing =
@@ -572,8 +570,8 @@ 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 = this.axis.x.scrollbar.size + "px";
-        this.axis.y.scrollbar.el.style.height = this.axis.y.scrollbar.size + "px";
+        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.positionScrollbar('x');
         this.positionScrollbar('y');
         this.toggleTrackVisibility('x');
@@ -624,8 +622,8 @@ var SimpleBar = /** @class */ (function () {
                 : handleOffset;
         scrollbar.el.style.transform =
             axis === 'x'
-                ? "translate3d(" + handleOffset + "px, 0, 0)"
-                : "translate3d(0, " + handleOffset + "px, 0)";
+                ? "translate3d(".concat(handleOffset, "px, 0, 0)")
+                : "translate3d(0, ".concat(handleOffset, "px, 0)");
     };
     SimpleBar.prototype.toggleTrackVisibility = function (axis) {
         if (axis === void 0) { axis = 'y'; }
@@ -650,11 +648,11 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.hideNativeScrollbar = function () {
         this.offsetEl.style[this.isRtl ? 'left' : 'right'] =
             this.axis.y.isOverflowing || this.axis.y.forceVisible
-                ? "-" + this.scrollbarWidth + "px"
+                ? "-".concat(this.scrollbarWidth, "px")
                 : 0;
         this.offsetEl.style.bottom =
             this.axis.x.isOverflowing || this.axis.x.forceVisible
-                ? "-" + this.scrollbarWidth + "px"
+                ? "-".concat(this.scrollbarWidth, "px")
                 : 0;
     };
     SimpleBar.prototype.onMouseMoveForAxis = function (axis) {
@@ -882,27 +880,27 @@ var SimpleBar = /** @class */ (function () {
 }());
 
 var colorStylesMap = {
-    default: defaultColors__default['default'],
-    inverted: invertedColors__default['default'],
+    default: defaultColors__default.default,
+    inverted: invertedColors__default.default,
 };
 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,
+    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,
     track: 'track',
     scrollbar: 'scrollbar',
     dragging: 'dragging',
     visible: 'visible',
 };
-var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
+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 = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
     var elRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
@@ -938,7 +936,7 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
         var rootNode = elRef.current;
         var scrollableNode = scrollableNodeRef.current;
         var maskNode = maskNodeRef.current;
-        var setMinWidth = throttle__default['default'](function () {
+        var setMinWidth = throttle__default.default(function () {
             if (contentNode && rootNode && scrollableNode && maskNode) {
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
@@ -947,7 +945,7 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
                 maskNode.style.minWidth = '4000px';
                 contentNode.style.display = 'inline-block';
                 var contentRect = contentNode.getBoundingClientRect();
-                var newWidth = Math.ceil(contentRect.width) + "px";
+                var newWidth = "".concat(Math.ceil(contentRect.width), "px");
                 var prevWidth = rootNode.style[widthPropName];
                 if (newWidth !== prevWidth) {
                     rootNode.style[widthPropName] = newWidth;
@@ -972,23 +970,23 @@ var Scrollbar = React__default['default'].forwardRef(function (_a, ref) {
             }
         };
     }, [widthPropName, horizontalAutoStretch]);
-    return (React__default['default'].createElement("div", __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", __assign({}, scrollableNodeProps, { ref: mergeRefs__default['default'](__spreadArray([
+    return (React__default.default.createElement("div", __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", __assign({}, scrollableNodeProps, { ref: mergeRefs__default.default(__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", __assign({}, contentNodeProps, { ref: mergeRefs__default['default'](__spreadArray([
+                        ], (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", __assign({}, contentNodeProps, { ref: mergeRefs__default.default(__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 }))));
+                            ], (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 }))));
 });
 
 exports.Scrollbar = Scrollbar;

package/scrollbar/cssm/index.js

@@ -1,5 +1,3 @@
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var Component = require('./Component.js');
 require('react');
 require('react-merge-refs');

package/scrollbar/default.css

@@ -15,9 +15,9 @@
     --scrollbar-background-color: var(--color-light-graphic-primary-alpha-30);
     --scrollbar-background-color-active: var(--color-light-graphic-primary-alpha-60);
 }
-.scrollbar__component_10pbj .scrollbar:before {
+.scrollbar__component_197ki .scrollbar:before {
             background-color: var(--scrollbar-background-color);
         }
-.scrollbar__component_10pbj.dragging .track .scrollbar.visible:before {
+.scrollbar__component_197ki.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-background-color-active);
         }