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

package/pure-cell/modern/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { M as Main } from '../../component-fedb2139.js';
+export { M as Main } from '../../component-3afd91e4.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fedb2139";
+export * from "../../component-3afd91e4";

package/pure-cell/modern/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-fedb2139.js';
+export { M as Main } from '../../component-3afd91e4.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { T as Text } from '../../component-fedb2139.js';
+export { T as Text } from '../../component-3afd91e4.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-fedb2139";
+export * from "../../component-3afd91e4";

package/pure-cell/modern/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-fedb2139.js';
+export { T as Text } from '../../component-3afd91e4.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/index.d.ts

@@ -1,2 +1,2 @@
-export { PureCell } from "./component-06012092";
-export type { PureCellProps } from "./component-06012092";
+export { PureCell } from "./component-8c83a9ca";
+export type { PureCellProps } from "./component-8c83a9ca";

package/pure-cell/modern/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-fedb2139.js';
+export { P as PureCell } from './component-3afd91e4.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/radio/Component.js

@@ -47,5 +47,6 @@ var Radio = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
 });
+Radio.displayName = 'Radio';
 
 exports.Radio = Radio;

package/radio/cssm/Component.js

@@ -46,5 +46,6 @@ var Radio = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
 });
+Radio.displayName = 'Radio';
 
 exports.Radio = Radio;

package/radio/esm/Component.js

@@ -39,5 +39,6 @@ var Radio = forwardRef(function (_a, ref) {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
 });
+Radio.displayName = 'Radio';
 
 export { Radio };

package/radio/modern/Component.js

@@ -36,5 +36,6 @@ const Radio = forwardRef(({ onChange, className, circleClassName, contentClassNa
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
 });
+Radio.displayName = 'Radio';
 
 export { Radio };

package/radio-group/Component.responsive.js

@@ -17,5 +17,6 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
     var Component = isDesktop ? desktop_Component_desktop.RadioGroupDesktop : mobile_Component_mobile.RadioGroupMobile;
     return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
 });
+RadioGroup.displayName = 'RadioGroup';
 
 exports.RadioGroup = RadioGroup;

package/radio-group/cssm/Component.responsive.js

@@ -17,5 +17,6 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
     var Component = isDesktop ? desktop_Component_desktop.RadioGroupDesktop : mobile_Component_mobile.RadioGroupMobile;
     return React__default.default.createElement(Component, tslib.__assign({ ref: ref }, restProps));
 });
+RadioGroup.displayName = 'RadioGroup';
 
 exports.RadioGroup = RadioGroup;

package/radio-group/esm/Component.responsive.js

@@ -14,5 +14,6 @@ var RadioGroup = forwardRef(function (_a, ref) {
     var Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
     return React.createElement(Component, __assign({ ref: ref }, restProps));
 });
+RadioGroup.displayName = 'RadioGroup';
 
 export { RadioGroup };

package/radio-group/modern/Component.responsive.js

@@ -12,5 +12,6 @@ const RadioGroup = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const Component = isDesktop ? RadioGroupDesktop : RadioGroupMobile;
     return React.createElement(Component, { ref: ref, ...restProps });
 });
+RadioGroup.displayName = 'RadioGroup';
 
 export { RadioGroup };

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);
@@ -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;