@alfalab/core-components 46.1.0-beta.0 → 46.1.0-beta.2

package/scrollbar/Component.js

@@ -21,7 +21,7 @@ var memoize__default = /*#__PURE__*/_interopDefaultCompat(memoize);
 var canUseDOM__default = /*#__PURE__*/_interopDefaultCompat(canUseDOM);
 
 // Helper function to retrieve options from element attributes
-function getElementWindow(element) {
+function getElementWindow$1(element) {
     if (!element ||
         !element.ownerDocument ||
         !element.ownerDocument.defaultView) {
@@ -71,7 +71,7 @@ var SimpleBar = /** @class */ (function () {
          * On scroll event handling
          */
         this.onScroll = function () {
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             if (!_this.scrollXTicking) {
                 elWindow.requestAnimationFrame(_this.scrollX);
                 _this.scrollXTicking = true;
@@ -223,7 +223,7 @@ var SimpleBar = /** @class */ (function () {
          */
         this.onEndDrag = function (e) {
             var elDocument = getElementDocument(_this.el);
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             e.preventDefault();
             e.stopPropagation();
             _this.el.classList.remove(_this.classNames.dragging);
@@ -326,7 +326,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.getOffset = function (el) {
         var rect = el.getBoundingClientRect();
         var elDocument = getElementDocument(el);
-        var elWindow = getElementWindow(el);
+        var elWindow = getElementWindow$1(el);
         return {
             top: rect.top +
                 (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
@@ -427,7 +427,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.initListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.addEventListener('mouseenter', this.onMouseEnter);
@@ -468,7 +468,7 @@ var SimpleBar = /** @class */ (function () {
         });
     };
     SimpleBar.prototype.recalculate = function () {
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
         var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
@@ -646,7 +646,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.onDragStart = function (e, axis) {
         if (axis === void 0) { axis = 'y'; }
         var elDocument = getElementDocument(this.el);
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         var scrollbar = this.axis[axis].scrollbar;
         // Measure how far the user's mouse is from the top of the scrollbar drag handle.
         var eventOffset = axis === 'y' ? e.pageY : e.pageX;
@@ -670,7 +670,7 @@ var SimpleBar = /** @class */ (function () {
         if (axis === void 0) { axis = 'y'; }
         if (!this.options.clickOnTrack)
             return;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(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];
@@ -736,7 +736,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.removeListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.removeEventListener('mouseenter', this.onMouseEnter);
@@ -826,13 +826,13 @@ var SimpleBar = /** @class */ (function () {
     return SimpleBar;
 }());
 
-var defaultColors = {"component":"scrollbar__component_1qo42"};
+var defaultColors = {"component":"scrollbar__component_1yaqp"};
 require('./default.css');
 
-var styles = {"component":"scrollbar__component_6p7ms","wrapper":"scrollbar__wrapper_6p7ms","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_6p7ms","heightAutoObserver":"scrollbar__heightAutoObserver_6p7ms","-webkit-mask":"scrollbar__mask_6p7ms","mask":"scrollbar__mask_6p7ms","offset":"scrollbar__offset_6p7ms","contentWrapper":"scrollbar__contentWrapper_6p7ms","placeholder":"scrollbar__placeholder_6p7ms","vertical":"scrollbar__vertical_6p7ms","hover":"scrollbar__hover_6p7ms","horizontal":"scrollbar__horizontal_6p7ms","content":"scrollbar__content_6p7ms"};
+var styles = {"component":"scrollbar__component_3blds","wrapper":"scrollbar__wrapper_3blds","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_3blds","heightAutoObserver":"scrollbar__heightAutoObserver_3blds","-webkit-mask":"scrollbar__mask_3blds","mask":"scrollbar__mask_3blds","offset":"scrollbar__offset_3blds","contentWrapper":"scrollbar__contentWrapper_3blds","placeholder":"scrollbar__placeholder_3blds","vertical":"scrollbar__vertical_3blds","hover":"scrollbar__hover_3blds","horizontal":"scrollbar__horizontal_3blds","content":"scrollbar__content_3blds"};
 require('./index.css');
 
-var invertedColors = {"component":"scrollbar__component_1jt2a"};
+var invertedColors = {"component":"scrollbar__component_1hc0t"};
 require('./inverted.css');
 
 var colorStylesMap = {
@@ -856,12 +856,31 @@ var classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
+function getElementWindow(element) {
+    var _a;
+    return (_a = element.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+}
+function elementHasAbsPosChild(element) {
+    var hasAbsPosChild = false;
+    var elementWindow = getElementWindow(element);
+    for (var i = 0; i < element.children.length; i++) {
+        var child = element.children[i];
+        var childStyle = elementWindow.getComputedStyle(child);
+        if (childStyle.position === 'absolute') {
+            hasAbsPosChild = true;
+            break;
+        }
+    }
+    return hasAbsPosChild;
+}
 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 _b;
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, 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 _m = React.useState(), width = _m[0], setWidth = _m[1];
     var colorStyles = colorStylesMap[colors];
     React.useEffect(function () {
         var instance;
@@ -889,11 +908,21 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
     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 () {
-            if (contentNode && rootNode && scrollableNode && maskNode) {
+            if (!contentNode)
+                return;
+            if (elementHasAbsPosChild(contentNode)) {
+                /*
+                 * Измеряем scrollWidth у contentNode, т.к. элементы внутри него позицинированы абсолютно
+                 */
+                setWidth(Math.ceil(contentNode.scrollWidth));
+            }
+            else {
+                if (!maskNode)
+                    return;
+                var prevMinWidth = maskNode.style.minWidth;
+                var prevDisplay = contentNode.style.display;
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
                  * Затем контенту устанавливаем display: inline-block, чтобы его ширина была равна ширине содержимого.
@@ -901,13 +930,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];
-                if (newWidth !== prevWidth) {
-                    rootNode.style[widthPropName] = newWidth;
-                }
-                contentNode.style.display = '';
-                maskNode.style.minWidth = '';
+                setWidth(Math.ceil(contentRect.width));
+                maskNode.style.minWidth = prevMinWidth;
+                contentNode.style.display = prevDisplay;
             }
         }, 200);
         if (horizontalAutoStretch && contentNode) {
@@ -919,14 +944,15 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                 characterData: true,
             });
         }
+        else {
+            setWidth(undefined);
+        }
         return function () {
             setMinWidth.cancel();
-            if (mutationObserver) {
-                mutationObserver.disconnect();
-            }
+            mutationObserver === null || mutationObserver === void 0 ? void 0 : 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.component, colorStyles.component, className) }),
+    }, [horizontalAutoStretch]);
+    return (React__default.default.createElement("div", tslib.__assign({}, htmlAttributes, { style: tslib.__assign(tslib.__assign({}, htmlAttributes.style), (_b = {}, _b[widthPropName] = width, _b)), 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 })),
@@ -944,5 +970,6 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical) },
             React__default.default.createElement("div", { className: classNames.scrollbar }))));
 });
+Scrollbar.displayName = 'Scrollbar';
 
 exports.Scrollbar = Scrollbar;

package/scrollbar/cssm/Component.js

@@ -27,7 +27,7 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
 
 // Helper function to retrieve options from element attributes
-function getElementWindow(element) {
+function getElementWindow$1(element) {
     if (!element ||
         !element.ownerDocument ||
         !element.ownerDocument.defaultView) {
@@ -77,7 +77,7 @@ var SimpleBar = /** @class */ (function () {
          * On scroll event handling
          */
         this.onScroll = function () {
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             if (!_this.scrollXTicking) {
                 elWindow.requestAnimationFrame(_this.scrollX);
                 _this.scrollXTicking = true;
@@ -229,7 +229,7 @@ var SimpleBar = /** @class */ (function () {
          */
         this.onEndDrag = function (e) {
             var elDocument = getElementDocument(_this.el);
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             e.preventDefault();
             e.stopPropagation();
             _this.el.classList.remove(_this.classNames.dragging);
@@ -332,7 +332,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.getOffset = function (el) {
         var rect = el.getBoundingClientRect();
         var elDocument = getElementDocument(el);
-        var elWindow = getElementWindow(el);
+        var elWindow = getElementWindow$1(el);
         return {
             top: rect.top +
                 (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
@@ -433,7 +433,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.initListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.addEventListener('mouseenter', this.onMouseEnter);
@@ -474,7 +474,7 @@ var SimpleBar = /** @class */ (function () {
         });
     };
     SimpleBar.prototype.recalculate = function () {
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
         var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
@@ -652,7 +652,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.onDragStart = function (e, axis) {
         if (axis === void 0) { axis = 'y'; }
         var elDocument = getElementDocument(this.el);
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         var scrollbar = this.axis[axis].scrollbar;
         // Measure how far the user's mouse is from the top of the scrollbar drag handle.
         var eventOffset = axis === 'y' ? e.pageY : e.pageX;
@@ -676,7 +676,7 @@ var SimpleBar = /** @class */ (function () {
         if (axis === void 0) { axis = 'y'; }
         if (!this.options.clickOnTrack)
             return;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(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];
@@ -742,7 +742,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.removeListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.removeEventListener('mouseenter', this.onMouseEnter);
@@ -853,12 +853,31 @@ var classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
+function getElementWindow(element) {
+    var _a;
+    return (_a = element.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+}
+function elementHasAbsPosChild(element) {
+    var hasAbsPosChild = false;
+    var elementWindow = getElementWindow(element);
+    for (var i = 0; i < element.children.length; i++) {
+        var child = element.children[i];
+        var childStyle = elementWindow.getComputedStyle(child);
+        if (childStyle.position === 'absolute') {
+            hasAbsPosChild = true;
+            break;
+        }
+    }
+    return hasAbsPosChild;
+}
 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 _b;
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, 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 _m = React.useState(), width = _m[0], setWidth = _m[1];
     var colorStyles = colorStylesMap[colors];
     React.useEffect(function () {
         var instance;
@@ -886,11 +905,21 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
     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 () {
-            if (contentNode && rootNode && scrollableNode && maskNode) {
+            if (!contentNode)
+                return;
+            if (elementHasAbsPosChild(contentNode)) {
+                /*
+                 * Измеряем scrollWidth у contentNode, т.к. элементы внутри него позицинированы абсолютно
+                 */
+                setWidth(Math.ceil(contentNode.scrollWidth));
+            }
+            else {
+                if (!maskNode)
+                    return;
+                var prevMinWidth = maskNode.style.minWidth;
+                var prevDisplay = contentNode.style.display;
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
                  * Затем контенту устанавливаем display: inline-block, чтобы его ширина была равна ширине содержимого.
@@ -898,13 +927,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];
-                if (newWidth !== prevWidth) {
-                    rootNode.style[widthPropName] = newWidth;
-                }
-                contentNode.style.display = '';
-                maskNode.style.minWidth = '';
+                setWidth(Math.ceil(contentRect.width));
+                maskNode.style.minWidth = prevMinWidth;
+                contentNode.style.display = prevDisplay;
             }
         }, 200);
         if (horizontalAutoStretch && contentNode) {
@@ -916,14 +941,15 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                 characterData: true,
             });
         }
+        else {
+            setWidth(undefined);
+        }
         return function () {
             setMinWidth.cancel();
-            if (mutationObserver) {
-                mutationObserver.disconnect();
-            }
+            mutationObserver === null || mutationObserver === void 0 ? void 0 : 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) }),
+    }, [horizontalAutoStretch]);
+    return (React__default.default.createElement("div", tslib.__assign({}, htmlAttributes, { style: tslib.__assign(tslib.__assign({}, htmlAttributes.style), (_b = {}, _b[widthPropName] = width, _b)), 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 })),
@@ -941,5 +967,6 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
         React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical) },
             React__default.default.createElement("div", { className: classNames.scrollbar }))));
 });
+Scrollbar.displayName = 'Scrollbar';
 
 exports.Scrollbar = Scrollbar;

package/scrollbar/default.css

@@ -19,8 +19,8 @@
 } :root {
     --scrollbar-background-color: var(--color-light-neutral-translucent-500);
     --scrollbar-background-color-active: var(--color-light-neutral-translucent-500-press);
-} .scrollbar__component_1qo42 .scrollbar:before {
+} .scrollbar__component_1yaqp .scrollbar:before {
             background-color: var(--scrollbar-background-color);
-        } .scrollbar__component_1qo42.dragging .track .scrollbar.visible:before {
+        } .scrollbar__component_1yaqp.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-background-color-active);
         }

package/scrollbar/esm/Component.js

@@ -1,5 +1,5 @@
 import { __rest, __assign, __spreadArray } from 'tslib';
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import throttle from 'lodash.throttle';
@@ -9,7 +9,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import canUseDOM from 'can-use-dom';
 
 // Helper function to retrieve options from element attributes
-function getElementWindow(element) {
+function getElementWindow$1(element) {
     if (!element ||
         !element.ownerDocument ||
         !element.ownerDocument.defaultView) {
@@ -59,7 +59,7 @@ var SimpleBar = /** @class */ (function () {
          * On scroll event handling
          */
         this.onScroll = function () {
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             if (!_this.scrollXTicking) {
                 elWindow.requestAnimationFrame(_this.scrollX);
                 _this.scrollXTicking = true;
@@ -211,7 +211,7 @@ var SimpleBar = /** @class */ (function () {
          */
         this.onEndDrag = function (e) {
             var elDocument = getElementDocument(_this.el);
-            var elWindow = getElementWindow(_this.el);
+            var elWindow = getElementWindow$1(_this.el);
             e.preventDefault();
             e.stopPropagation();
             _this.el.classList.remove(_this.classNames.dragging);
@@ -314,7 +314,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.getOffset = function (el) {
         var rect = el.getBoundingClientRect();
         var elDocument = getElementDocument(el);
-        var elWindow = getElementWindow(el);
+        var elWindow = getElementWindow$1(el);
         return {
             top: rect.top +
                 (elWindow.pageYOffset || elDocument.documentElement.scrollTop),
@@ -415,7 +415,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.initListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.addEventListener('mouseenter', this.onMouseEnter);
@@ -456,7 +456,7 @@ var SimpleBar = /** @class */ (function () {
         });
     };
     SimpleBar.prototype.recalculate = function () {
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         this.elStyles = elWindow.getComputedStyle(this.el);
         this.isRtl = this.elStyles.direction === 'rtl';
         var isHeightAuto = this.heightAutoObserverEl.offsetHeight <= 1;
@@ -634,7 +634,7 @@ var SimpleBar = /** @class */ (function () {
     SimpleBar.prototype.onDragStart = function (e, axis) {
         if (axis === void 0) { axis = 'y'; }
         var elDocument = getElementDocument(this.el);
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         var scrollbar = this.axis[axis].scrollbar;
         // Measure how far the user's mouse is from the top of the scrollbar drag handle.
         var eventOffset = axis === 'y' ? e.pageY : e.pageX;
@@ -658,7 +658,7 @@ var SimpleBar = /** @class */ (function () {
         if (axis === void 0) { axis = 'y'; }
         if (!this.options.clickOnTrack)
             return;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(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];
@@ -724,7 +724,7 @@ var SimpleBar = /** @class */ (function () {
     };
     SimpleBar.prototype.removeListeners = function () {
         var _this = this;
-        var elWindow = getElementWindow(this.el);
+        var elWindow = getElementWindow$1(this.el);
         // Event listeners
         if (this.options.autoHide) {
             this.el.removeEventListener('mouseenter', this.onMouseEnter);
@@ -814,13 +814,13 @@ var SimpleBar = /** @class */ (function () {
     return SimpleBar;
 }());
 
-var defaultColors = {"component":"scrollbar__component_1qo42"};
+var defaultColors = {"component":"scrollbar__component_1yaqp"};
 require('./default.css');
 
-var styles = {"component":"scrollbar__component_6p7ms","wrapper":"scrollbar__wrapper_6p7ms","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_6p7ms","heightAutoObserver":"scrollbar__heightAutoObserver_6p7ms","-webkit-mask":"scrollbar__mask_6p7ms","mask":"scrollbar__mask_6p7ms","offset":"scrollbar__offset_6p7ms","contentWrapper":"scrollbar__contentWrapper_6p7ms","placeholder":"scrollbar__placeholder_6p7ms","vertical":"scrollbar__vertical_6p7ms","hover":"scrollbar__hover_6p7ms","horizontal":"scrollbar__horizontal_6p7ms","content":"scrollbar__content_6p7ms"};
+var styles = {"component":"scrollbar__component_3blds","wrapper":"scrollbar__wrapper_3blds","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_3blds","heightAutoObserver":"scrollbar__heightAutoObserver_3blds","-webkit-mask":"scrollbar__mask_3blds","mask":"scrollbar__mask_3blds","offset":"scrollbar__offset_3blds","contentWrapper":"scrollbar__contentWrapper_3blds","placeholder":"scrollbar__placeholder_3blds","vertical":"scrollbar__vertical_3blds","hover":"scrollbar__hover_3blds","horizontal":"scrollbar__horizontal_3blds","content":"scrollbar__content_3blds"};
 require('./index.css');
 
-var invertedColors = {"component":"scrollbar__component_1jt2a"};
+var invertedColors = {"component":"scrollbar__component_1hc0t"};
 require('./inverted.css');
 
 var colorStylesMap = {
@@ -844,12 +844,31 @@ var classNames = {
     dragging: 'dragging',
     visible: 'visible',
 };
+function getElementWindow(element) {
+    var _a;
+    return (_a = element.ownerDocument.defaultView) !== null && _a !== void 0 ? _a : window;
+}
+function elementHasAbsPosChild(element) {
+    var hasAbsPosChild = false;
+    var elementWindow = getElementWindow(element);
+    for (var i = 0; i < element.children.length; i++) {
+        var child = element.children[i];
+        var childStyle = elementWindow.getComputedStyle(child);
+        if (childStyle.position === 'absolute') {
+            hasAbsPosChild = true;
+            break;
+        }
+    }
+    return hasAbsPosChild;
+}
 var Scrollbar = React.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 _b;
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName"]);
     var elRef = useRef(null);
     var scrollableNodeRef = useRef(null);
     var contentNodeRef = useRef(null);
     var maskNodeRef = useRef(null);
+    var _m = useState(), width = _m[0], setWidth = _m[1];
     var colorStyles = colorStylesMap[colors];
     useEffect(function () {
         var instance;
@@ -877,11 +896,21 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
     useEffect(function () {
         var mutationObserver = null;
         var contentNode = contentNodeRef.current;
-        var rootNode = elRef.current;
-        var scrollableNode = scrollableNodeRef.current;
         var maskNode = maskNodeRef.current;
         var setMinWidth = throttle(function () {
-            if (contentNode && rootNode && scrollableNode && maskNode) {
+            if (!contentNode)
+                return;
+            if (elementHasAbsPosChild(contentNode)) {
+                /*
+                 * Измеряем scrollWidth у contentNode, т.к. элементы внутри него позицинированы абсолютно
+                 */
+                setWidth(Math.ceil(contentNode.scrollWidth));
+            }
+            else {
+                if (!maskNode)
+                    return;
+                var prevMinWidth = maskNode.style.minWidth;
+                var prevDisplay = contentNode.style.display;
                 /*
                  * Устанавливаем min-width, чтобы максимально растянуть абсолютно позиционированный элемент.
                  * Затем контенту устанавливаем display: inline-block, чтобы его ширина была равна ширине содержимого.
@@ -889,13 +918,9 @@ var Scrollbar = React.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];
-                if (newWidth !== prevWidth) {
-                    rootNode.style[widthPropName] = newWidth;
-                }
-                contentNode.style.display = '';
-                maskNode.style.minWidth = '';
+                setWidth(Math.ceil(contentRect.width));
+                maskNode.style.minWidth = prevMinWidth;
+                contentNode.style.display = prevDisplay;
             }
         }, 200);
         if (horizontalAutoStretch && contentNode) {
@@ -907,14 +932,15 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
                 characterData: true,
             });
         }
+        else {
+            setWidth(undefined);
+        }
         return function () {
             setMinWidth.cancel();
-            if (mutationObserver) {
-                mutationObserver.disconnect();
-            }
+            mutationObserver === null || mutationObserver === void 0 ? void 0 : mutationObserver.disconnect();
         };
-    }, [widthPropName, horizontalAutoStretch]);
-    return (React.createElement("div", __assign({}, htmlAttributes, { ref: mergeRefs([elRef, ref]), "data-simplebar": true, className: cn(styles.component, colorStyles.component, className) }),
+    }, [horizontalAutoStretch]);
+    return (React.createElement("div", __assign({}, htmlAttributes, { style: __assign(__assign({}, htmlAttributes.style), (_b = {}, _b[widthPropName] = width, _b)), 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 })),
@@ -932,5 +958,6 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
         React.createElement("div", { className: cn(classNames.track, classNames.vertical) },
             React.createElement("div", { className: classNames.scrollbar }))));
 });
+Scrollbar.displayName = 'Scrollbar';
 
 export { Scrollbar };

package/scrollbar/esm/default.css

@@ -19,8 +19,8 @@
 } :root {
     --scrollbar-background-color: var(--color-light-neutral-translucent-500);
     --scrollbar-background-color-active: var(--color-light-neutral-translucent-500-press);
-} .scrollbar__component_1qo42 .scrollbar:before {
+} .scrollbar__component_1yaqp .scrollbar:before {
             background-color: var(--scrollbar-background-color);
-        } .scrollbar__component_1qo42.dragging .track .scrollbar.visible:before {
+        } .scrollbar__component_1yaqp.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-background-color-active);
         }