@semcore/scroll-area - npm Package Compare versions

Comparing version 2.1.3 to 2.2.2

CHANGELOG.md

@@ -5,2 +5,31 @@ # Changelog
 
+## [2.2.2] - 2019-10-03
+
+### Fixed
+
+- Исправлена ошибка скрития части контента в горизонтальном режиме
+- Исправлена ошибка в сафари при появлении новых элементов
+
+## [2.2.1] - 2019-10-01
+
+### Fixed
+
+- Исправлена ошибка не работаюшего горизонтального скрола
+
+## [2.2.0] - 2019-09-30
+
+### Change
+
+- Изменен алгоритм апдейта перерасчета с `MutationObserver` на `ResizeObserver`
+
+### Fixed
+
+- Исправлена ошибка не появления скрола
+
+## [2.1.4] - 2019-09-30
+
+### Change
+
+- Нужные зависимости перенесены в `utils`, размер должен стать меньше
+
 ## [2.1.3] - 2019-08-02
@@ -7,0 +36,0 @@

lib/context.d.ts

@@ -6,5 +6,6 @@ import React from 'react';
     refContainer: React.Ref<HTMLDivElement>;
+    refPadding: React.Ref<HTMLDivElement>;
     handleScrollContainer: React.UIEventHandler;
 }
-declare const eventEmitter: any;
+declare const eventEmitter: EventEmitter;
 declare const ScrollContext: React.Context<IScrollContext>;
@@ -11,0 +12,0 @@ declare const Provider: React.ProviderExoticComponent<React.ProviderProps<IScrollContext>>, Consumer: React.ExoticComponent<React.ConsumerProps<IScrollContext>>;

lib/index.es.js

@@ -9,2 +9,3 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import cn from 'classnames';
+import ResizeObserver from 'resize-observer-polyfill';
 import RootRef from '@semcore/root-ref';
@@ -14,6 +15,7 @@ import { Box } from '@semcore/flex-box';
 export { default as EventEmitter } from '@semcore/utils/lib/eventEmitter';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 
+/* tslint:disable */
 var eventEmitter = new EventEmitter();
@@ -25,2 +27,5 @@ var ScrollContext = React.createContext({
   },
+  refPadding: function refPadding() {
+    return undefined;
+  },
   handleScrollContainer: function handleScrollContainer() {
@@ -35,2 +40,325 @@ return undefined;
   "block": {
+    "block": "_scroll-area_1xfz5_3"
+  }
+};
+
+(function cssModulesFnInject(_path) {
+  if (_path && typeof window !== 'undefined') {
+    var head = window.document.head;
+    var prevStyle = head.querySelector('._css-style');
+
+    if (prevStyle && prevStyle.insertAdjacentText) {
+      prevStyle.insertAdjacentText("beforeend", "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}");
+    } else {
+      var style = window.document.createElement("style");
+      style.classList.add('_css-style');
+      style.innerHTML = "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}";
+      head.appendChild(style);
+    }
+  }
+})('./scroll-area.style.css');
+
+function block() {
+  return data['block']['block'];
+}
+
+// TODO: refactor pls
+
+function update(fn) {
+  var ticking = false;
+  return function () {
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        ticking = false;
+        fn();
+      });
+    }
+
+    ticking = true;
+  };
+}
+
+var ScrollArea =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inherits(ScrollArea, _PureComponent);
+
+  function ScrollArea(props, context) {
+    var _this;
+
+    _classCallCheck(this, ScrollArea);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollArea).call(this, props, context));
+
+    _this.refContainer = function (node) {
+      if (_this.$container !== node) {
+        _this.eventEmitter.emit('refContainer', node);
+      }
+
+      _this.$container = node;
+    };
+
+    _this.refPadding = function (node) {
+      if (_this.$padding !== node) {
+        _this.listenDOM(node);
+      }
+
+      _this.$padding = node;
+    };
+
+    _this.refWrapper = function (node) {
+      return _this.$wrapper = node;
+    };
+
+    _this.calculate = update(function () {
+      if (_this.$container) {
+        var _this$calculateSizeCo = _this.calculateSizeContainer(),
+            height = _this$calculateSizeCo.height,
+            width = _this$calculateSizeCo.width;
+
+        if (height) _this.$container.style.height = height;
+        if (width) _this.$container.style.width = width;
+      }
+
+      _this.eventEmitter.emit('calculate');
+    });
+    _this.handleScrollContainer = update(function () {
+      return _this.eventEmitter.emit('scrollContainer');
+    });
+    _this.eventEmitter = props.eventEmitter || new EventEmitter();
+    _this.observer = new ResizeObserver(_this.calculate);
+    return _this;
+  } // для max height/width
+
+
+  _createClass(ScrollArea, [{
+    key: "calculateSizeContainer",
+    value: function calculateSizeContainer() {
+      if (!this.$container || !this.$wrapper) return;
+      var _this$$container = this.$container,
+          scrollWidth = _this$$container.scrollWidth,
+          scrollHeight = _this$$container.scrollHeight;
+      var style = window.getComputedStyle(this.$wrapper);
+      var maxWidth = Number.parseInt(style['max-width']);
+      var maxHeight = Number.parseInt(style['max-height']);
+      var size = {
+        width: '',
+        height: ''
+      };
+
+      if (maxWidth) {
+        if (scrollWidth > maxWidth) {
+          size.width = "".concat(maxWidth, "px");
+        } else {
+          size.width = '100%';
+        }
+      }
+
+      if (maxHeight) {
+        if (scrollHeight > maxHeight) {
+          size.height = "".concat(maxHeight, "px");
+        } else {
+          size.height = '100%';
+        }
+      }
+
+      return size;
+    }
+  }, {
+    key: "listenDOM",
+    value: function listenDOM(target) {
+      if (!this.observer) return;
+      this.observer.disconnect();
+
+      if (target) {
+        this.observer.observe(target);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (window.document.readyState !== 'complete') {
+        window.addEventListener('load', this.calculate);
+      } else {
+        this.calculate();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('load', this.calculate);
+      if (this.observer) this.observer.disconnect();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          other = _objectWithoutProperties(_this$props, ["children", "className"]);
+
+      return React.createElement(Provider, {
+        value: {
+          eventEmitter: this.eventEmitter,
+          refContainer: this.refContainer,
+          refPadding: this.refPadding,
+          handleScrollContainer: this.handleScrollContainer
+        }
+      }, React.createElement(RootRef, {
+        rootRef: this.refWrapper
+      }, React.createElement(Box, Object.assign({
+        className: cn(block(), className)
+      }, other), children)));
+    }
+  }]);
+
+  return ScrollArea;
+}(PureComponent);
+
+ScrollArea.displayName = 'ScrollArea';
+
+var data$1 = {
+  "block": {
+    "block": "_scroll-container_a61t2_3",
+    "horizontal": {
+      "block": "_scroll-container--horizontal_a61t2_23"
+    },
+    "vertical": {
+      "block": "_scroll-container--vertical_a61t2_27"
+    }
+  },
+  "padding": {
+    "block": "_scroll-container__padding_a61t2_20"
+  }
+};
+
+(function cssModulesFnInject(_path) {
+  if (_path && typeof window !== 'undefined') {
+    var head = window.document.head;
+    var prevStyle = head.querySelector('._css-style');
+
+    if (prevStyle && prevStyle.insertAdjacentText) {
+      prevStyle.insertAdjacentText("beforeend", "._scroll-container_a61t2_3{display:block;width:100%;height:100%;box-sizing:content-box;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}._scroll-container_a61t2_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_a61t2_23{overflow-x:scroll}._scroll-container--vertical_a61t2_27{overflow-y:scroll}._scroll-container--horizontal_a61t2_23 ._scroll-container__padding_a61t2_20{display:inline-block}");
+    } else {
+      var style = window.document.createElement("style");
+      style.classList.add('_css-style');
+      style.innerHTML = "._scroll-container_a61t2_3{display:block;width:100%;height:100%;box-sizing:content-box;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}._scroll-container_a61t2_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_a61t2_23{overflow-x:scroll}._scroll-container--vertical_a61t2_27{overflow-y:scroll}._scroll-container--horizontal_a61t2_23 ._scroll-container__padding_a61t2_20{display:inline-block}";
+      head.appendChild(style);
+    }
+  }
+})('./scroll-container.style.css');
+
+function block$1() {
+  return data$1['block']['block'];
+}
+
+block$1['horizontal'] = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
+  return data$1['block']['horizontal'][value];
+};
+
+block$1['vertical'] = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
+  return data$1['block']['vertical'][value];
+};
+
+function padding() {
+  return data$1['padding']['block'];
+}
+
+var ScrollContainer =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inherits(ScrollContainer, _PureComponent);
+
+  function ScrollContainer(props, context) {
+    var _this;
+
+    _classCallCheck(this, ScrollContainer);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollContainer).call(this, props, context));
+
+    _this.refPadding = function (node) {
+      _this.context.refPadding(node);
+    };
+
+    _this.refContainer = function (node) {
+      _this.$container = node;
+
+      _this.context.refContainer(node);
+    };
+
+    _this.calculate = function () {
+      var orientation = _this.props.orientation;
+
+      if (_this.$container) {
+        var _this$calculateOrient = _this.calculateOrientation(),
+            _this$calculateOrient2 = _slicedToArray(_this$calculateOrient, 2),
+            horizontal = _this$calculateOrient2[0],
+            vertical = _this$calculateOrient2[1];
+
+        if (orientation === undefined || orientation === 'horizontal') {
+          _this.$container.classList.toggle(block$1.horizontal(), horizontal);
+        }
+
+        if (orientation === undefined || orientation === 'vertical') {
+          _this.$container.classList.toggle(block$1.vertical(), vertical);
+        }
+      }
+    };
+
+    _this._unCalculate = context.eventEmitter.subscribe('calculate', _this.calculate);
+    return _this;
+  }
+
+  _createClass(ScrollContainer, [{
+    key: "calculateOrientation",
+    value: function calculateOrientation() {
+      if (!this.$container) return [false, false];
+      var _this$$container = this.$container,
+          scrollWidth = _this$$container.scrollWidth,
+          scrollHeight = _this$$container.scrollHeight,
+          clientWidth = _this$$container.clientWidth,
+          clientHeight = _this$$container.clientHeight;
+      return [scrollWidth > clientWidth, scrollHeight > clientHeight];
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._unCalculate) this._unCalculate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          onScroll = _this$props.onScroll,
+          other = _objectWithoutProperties(_this$props, ["children", "className", "onScroll"]);
+
+      return React.createElement(ScrollContext.Consumer, null, function (_ref) {
+        var handleScrollContainer = _ref.handleScrollContainer;
+        return React.createElement(RootRef, {
+          rootRef: _this2.refContainer
+        }, React.createElement(Box, Object.assign({
+          className: cn(block$1(), className),
+          onScroll: callAllEventHandlers(onScroll, handleScrollContainer)
+        }, other), React.createElement("div", {
+          className: padding(),
+          ref: _this2.refPadding
+        }, children)));
+      });
+    }
+  }]);
+
+  return ScrollContainer;
+}(PureComponent);
+
+ScrollContainer.displayName = 'ScrollContainer';
+ScrollContainer.contextType = ScrollContext;
+
+var data$2 = {
+  "block": {
     "block": "_scroll-bar_qrbal_3",
@@ -69,18 +397,18 @@ "hide": {
 
-function block() {
-  return data['block']['block'];
+function block$2() {
+  return data$2['block']['block'];
 }
 
-block['hide'] = function () {
+block$2['hide'] = function () {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['hide'][value];
+  return data$2['block']['hide'][value];
 };
 
-block['orientation'] = function () {
+block$2['orientation'] = function () {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['orientation'][value];
+  return data$2['block']['orientation'][value];
 };
 
 function slider() {
-  return data['slider']['block'];
+  return data$2['slider']['block'];
 }
@@ -90,3 +418,3 @@
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['slider']['theme'][value];
+  return data$2['slider']['theme'][value];
 };
@@ -100,6 +428,4 @@
 });
-var DEFAUTL_SLIDER_SIZE = 50; // hack hide Mozilla
+var DEFAUTL_SLIDER_SIZE = 50;
 
-var DEFAULT_PADDING = 40;
-
 var Slider =
@@ -380,4 +706,4 @@ /*#__PURE__*/
       return {
-        width: Math.max(calculateDimensions(clientWidth, scrollWidth - DEFAULT_PADDING), DEFAUTL_SLIDER_SIZE),
-        height: Math.max(calculateDimensions(clientHeight, scrollHeight - DEFAULT_PADDING), DEFAUTL_SLIDER_SIZE)
+        width: Math.max(calculateDimensions(clientWidth, scrollWidth), DEFAUTL_SLIDER_SIZE),
+        height: Math.max(calculateDimensions(clientHeight, scrollHeight), DEFAUTL_SLIDER_SIZE)
       };
@@ -423,3 +749,3 @@ }
       var visibleScroll = this.state.visibleScroll;
-      var classes = cn(block(), (_cn2 = {}, _defineProperty(_cn2, block.orientation(orientation), orientation), _defineProperty(_cn2, block.hide(), !visibleScroll), _cn2), className);
+      var classes = cn(block$2(), (_cn2 = {}, _defineProperty(_cn2, block$2.orientation(orientation), orientation), _defineProperty(_cn2, block$2.hide(), !visibleScroll), _cn2), className);
       var context = {
@@ -447,328 +773,2 @@ refSlider: this.refSlider,
 
-var data$1 = {
-  "block": {
-    "block": "_scroll-area_1xfz5_3"
-  }
-};
-
-(function cssModulesFnInject(_path) {
-  if (_path && typeof window !== 'undefined') {
-    var head = window.document.head;
-    var prevStyle = head.querySelector('._css-style');
-
-    if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}");
-    } else {
-      var style = window.document.createElement("style");
-      style.classList.add('_css-style');
-      style.innerHTML = "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}";
-      head.appendChild(style);
-    }
-  }
-})('./scroll-area.style.css');
-
-function block$1() {
-  return data$1['block']['block'];
-}
-
-function update(fn) {
-  var ticking = false;
-  return function () {
-    if (!ticking) {
-      window.requestAnimationFrame(function () {
-        ticking = false;
-        fn();
-      });
-    }
-
-    ticking = true;
-  };
-}
-
-var MutationObserver = undefined;
-
-if (typeof window !== 'undefined') {
-  MutationObserver = window['MutationObserver'] || window['WebKitMutationObserver'] || window['MozMutationObserver'];
-}
-
-var ScrollArea =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(ScrollArea, _PureComponent);
-
-  function ScrollArea(props, context) {
-    var _this;
-
-    _classCallCheck(this, ScrollArea);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollArea).call(this, props, context));
-
-    _this.refContainer = function (node) {
-      if (_this.$container !== node) {
-        _this.listenDOM(node);
-
-        _this.eventEmitter.emit('refContainer', node);
-      }
-
-      _this.$container = node;
-    };
-
-    _this.refWrapper = function (node) {
-      return _this.$wrapper = node;
-    };
-
-    _this.calculate = update(function () {
-      if (_this.$container) {
-        var _this$calculateSizeCo = _this.calculateSizeContainer(),
-            height = _this$calculateSizeCo.height,
-            width = _this$calculateSizeCo.width;
-
-        if (height) _this.$container.style.height = height;
-        if (width) _this.$container.style.width = width;
-      }
-
-      _this.eventEmitter.emit('calculate');
-    });
-    _this.handleScrollContainer = update(function () {
-      return _this.eventEmitter.emit('scrollContainer');
-    });
-    _this.eventEmitter = props.eventEmitter || new EventEmitter();
-
-    if (MutationObserver) {
-      _this.observer = new MutationObserver(_this.calculate);
-    }
-
-    return _this;
-  } // для max height/width
-
-
-  _createClass(ScrollArea, [{
-    key: "calculateSizeContainer",
-    value: function calculateSizeContainer() {
-      if (!this.$container || !this.$wrapper) return;
-      var _this$$container = this.$container,
-          scrollWidth = _this$$container.scrollWidth,
-          scrollHeight = _this$$container.scrollHeight;
-      var style = window.getComputedStyle(this.$wrapper);
-      var maxWidth = Number.parseInt(style['max-width']);
-      var maxHeight = Number.parseInt(style['max-height']);
-      var size = {
-        width: '',
-        height: ''
-      };
-
-      if (maxWidth) {
-        if (scrollWidth - DEFAULT_PADDING > maxWidth) {
-          size.width = "".concat(maxWidth, "px");
-        } else {
-          size.width = '100%';
-        }
-      }
-
-      if (maxHeight) {
-        if (scrollHeight - DEFAULT_PADDING > maxHeight) {
-          size.height = "".concat(maxHeight, "px");
-        } else {
-          size.height = '100%';
-        }
-      }
-
-      return size;
-    }
-  }, {
-    key: "listenDOM",
-    value: function listenDOM(target) {
-      if (!this.observer) return;
-      this.observer.disconnect();
-
-      if (target) {
-        this.observer.observe(target, {
-          childList: true,
-          subtree: true,
-          characterData: true
-        });
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (window.document.readyState !== 'complete') {
-        window.addEventListener('load', this.calculate);
-      } else {
-        this.calculate();
-      }
-
-      window.addEventListener('resize', this.calculate, false);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('load', this.calculate);
-      window.removeEventListener('resize', this.calculate);
-      if (this.observer) this.observer.disconnect();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          className = _this$props.className,
-          other = _objectWithoutProperties(_this$props, ["children", "className"]);
-
-      return React.createElement(Provider, {
-        value: {
-          eventEmitter: this.eventEmitter,
-          refContainer: this.refContainer,
-          handleScrollContainer: this.handleScrollContainer
-        }
-      }, React.createElement(RootRef, {
-        rootRef: this.refWrapper
-      }, React.createElement(Box, Object.assign({
-        className: cn(block$1(), className)
-      }, other), children)));
-    }
-  }]);
-
-  return ScrollArea;
-}(PureComponent);
-
-ScrollArea.displayName = 'ScrollArea';
-
-var data$2 = {
-  "block": {
-    "block": "_scroll-container_6apvg_3",
-    "horizontal": {
-      "block": "_scroll-container--horizontal_6apvg_21"
-    },
-    "vertical": {
-      "block": "_scroll-container--vertical_6apvg_25"
-    }
-  },
-  "padding": {
-    "block": "_scroll-container__padding_6apvg_18"
-  }
-};
-
-(function cssModulesFnInject(_path) {
-  if (_path && typeof window !== 'undefined') {
-    var head = window.document.head;
-    var prevStyle = head.querySelector('._css-style');
-
-    if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._scroll-container_6apvg_3{display:block;width:100%;height:100%;padding:20px;margin:-20px;box-sizing:content-box;-webkit-overflow-scrolling:touch}._scroll-container_6apvg_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_6apvg_21{overflow-x:scroll}._scroll-container--vertical_6apvg_25{overflow-y:scroll}._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{display:inline-block}@-moz-document url-prefix(){._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{padding-right:20px}._scroll-container--vertical_6apvg_25 ._scroll-container__padding_6apvg_18{padding-bottom:20px}}");
-    } else {
-      var style = window.document.createElement("style");
-      style.classList.add('_css-style');
-      style.innerHTML = "._scroll-container_6apvg_3{display:block;width:100%;height:100%;padding:20px;margin:-20px;box-sizing:content-box;-webkit-overflow-scrolling:touch}._scroll-container_6apvg_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_6apvg_21{overflow-x:scroll}._scroll-container--vertical_6apvg_25{overflow-y:scroll}._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{display:inline-block}@-moz-document url-prefix(){._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{padding-right:20px}._scroll-container--vertical_6apvg_25 ._scroll-container__padding_6apvg_18{padding-bottom:20px}}";
-      head.appendChild(style);
-    }
-  }
-})('./scroll-container.style.css');
-
-function block$2() {
-  return data$2['block']['block'];
-}
-
-block$2['horizontal'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data$2['block']['horizontal'][value];
-};
-
-block$2['vertical'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data$2['block']['vertical'][value];
-};
-
-function padding() {
-  return data$2['padding']['block'];
-}
-
-var ScrollContainer =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(ScrollContainer, _PureComponent);
-
-  function ScrollContainer(props, context) {
-    var _this;
-
-    _classCallCheck(this, ScrollContainer);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollContainer).call(this, props, context));
-
-    _this.refContainer = function (node) {
-      _this.$container = node;
-
-      _this.context.refContainer(node);
-    };
-
-    _this.calculate = function () {
-      var orientation = _this.props.orientation;
-
-      if (_this.$container) {
-        var _this$calculateOrient = _this.calculateOrientation(),
-            _this$calculateOrient2 = _slicedToArray(_this$calculateOrient, 2),
-            horizontal = _this$calculateOrient2[0],
-            vertical = _this$calculateOrient2[1];
-
-        if (orientation === undefined || orientation === 'horizontal') {
-          _this.$container.classList.toggle(block$2.horizontal(), horizontal);
-        }
-
-        if (orientation === undefined || orientation === 'vertical') {
-          _this.$container.classList.toggle(block$2.vertical(), vertical);
-        }
-      }
-    };
-
-    _this._unCalculate = context.eventEmitter.subscribe('calculate', _this.calculate);
-    return _this;
-  }
-
-  _createClass(ScrollContainer, [{
-    key: "calculateOrientation",
-    value: function calculateOrientation() {
-      if (!this.$container) return [false, false];
-      var _this$$container = this.$container,
-          scrollWidth = _this$$container.scrollWidth,
-          clientWidth = _this$$container.clientWidth,
-          scrollHeight = _this$$container.scrollHeight,
-          clientHeight = _this$$container.clientHeight;
-      return [scrollWidth > clientWidth, scrollHeight > clientHeight];
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._unCalculate) this._unCalculate();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          className = _this$props.className,
-          onScroll = _this$props.onScroll,
-          other = _objectWithoutProperties(_this$props, ["children", "className", "onScroll"]);
-
-      return React.createElement(ScrollContext.Consumer, null, function (_ref) {
-        var handleScrollContainer = _ref.handleScrollContainer;
-        return React.createElement(RootRef, {
-          rootRef: _this2.refContainer
-        }, React.createElement(Box, Object.assign({
-          className: cn(block$2(), className),
-          onScroll: callAllEventHandlers(onScroll, handleScrollContainer)
-        }, other), React.createElement("div", {
-          className: padding()
-        }, children)));
-      });
-    }
-  }]);
-
-  return ScrollContainer;
-}(PureComponent);
-
-ScrollContainer.displayName = 'ScrollContainer';
-ScrollContainer.contextType = ScrollContext;
-
 var ScrollAreaSmart =
@@ -809,3 +809,3 @@ /*#__PURE__*/
 export default ScrollAreaSmart;
-export { DEFAULT_PADDING, ScrollArea, ScrollBar, ScrollContainer };
+export { ScrollArea, ScrollBar, ScrollContainer };
 //# sourceMappingURL=index.es.js.map

lib/index.js

@@ -16,9 +16,11 @@ 'use strict';
 var cn = _interopDefault(require('classnames'));
+var ResizeObserver = _interopDefault(require('resize-observer-polyfill'));
 var RootRef = _interopDefault(require('@semcore/root-ref'));
 var flexBox = require('@semcore/flex-box');
 var EventEmitter = _interopDefault(require('@semcore/utils/lib/eventEmitter'));
+var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
+var assignProps = require('@semcore/utils/lib/assignProps');
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
-var assignProps = require('@semcore/utils/lib/assignProps');
-var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray'));
 
+/* tslint:disable */
 var eventEmitter = new EventEmitter();
@@ -30,2 +32,5 @@ var ScrollContext = React__default.createContext({
   },
+  refPadding: function refPadding() {
+    return undefined;
+  },
   handleScrollContainer: function handleScrollContainer() {
@@ -40,2 +45,325 @@ return undefined;
   "block": {
+    "block": "_scroll-area_1xfz5_3"
+  }
+};
+
+(function cssModulesFnInject(_path) {
+  if (_path && typeof window !== 'undefined') {
+    var head = window.document.head;
+    var prevStyle = head.querySelector('._css-style');
+
+    if (prevStyle && prevStyle.insertAdjacentText) {
+      prevStyle.insertAdjacentText("beforeend", "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}");
+    } else {
+      var style = window.document.createElement("style");
+      style.classList.add('_css-style');
+      style.innerHTML = "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}";
+      head.appendChild(style);
+    }
+  }
+})('./scroll-area.style.css');
+
+function block() {
+  return data['block']['block'];
+}
+
+// TODO: refactor pls
+
+function update(fn) {
+  var ticking = false;
+  return function () {
+    if (!ticking) {
+      window.requestAnimationFrame(function () {
+        ticking = false;
+        fn();
+      });
+    }
+
+    ticking = true;
+  };
+}
+
+var ScrollArea =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inherits(ScrollArea, _PureComponent);
+
+  function ScrollArea(props, context) {
+    var _this;
+
+    _classCallCheck(this, ScrollArea);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollArea).call(this, props, context));
+
+    _this.refContainer = function (node) {
+      if (_this.$container !== node) {
+        _this.eventEmitter.emit('refContainer', node);
+      }
+
+      _this.$container = node;
+    };
+
+    _this.refPadding = function (node) {
+      if (_this.$padding !== node) {
+        _this.listenDOM(node);
+      }
+
+      _this.$padding = node;
+    };
+
+    _this.refWrapper = function (node) {
+      return _this.$wrapper = node;
+    };
+
+    _this.calculate = update(function () {
+      if (_this.$container) {
+        var _this$calculateSizeCo = _this.calculateSizeContainer(),
+            height = _this$calculateSizeCo.height,
+            width = _this$calculateSizeCo.width;
+
+        if (height) _this.$container.style.height = height;
+        if (width) _this.$container.style.width = width;
+      }
+
+      _this.eventEmitter.emit('calculate');
+    });
+    _this.handleScrollContainer = update(function () {
+      return _this.eventEmitter.emit('scrollContainer');
+    });
+    _this.eventEmitter = props.eventEmitter || new EventEmitter();
+    _this.observer = new ResizeObserver(_this.calculate);
+    return _this;
+  } // для max height/width
+
+
+  _createClass(ScrollArea, [{
+    key: "calculateSizeContainer",
+    value: function calculateSizeContainer() {
+      if (!this.$container || !this.$wrapper) return;
+      var _this$$container = this.$container,
+          scrollWidth = _this$$container.scrollWidth,
+          scrollHeight = _this$$container.scrollHeight;
+      var style = window.getComputedStyle(this.$wrapper);
+      var maxWidth = Number.parseInt(style['max-width']);
+      var maxHeight = Number.parseInt(style['max-height']);
+      var size = {
+        width: '',
+        height: ''
+      };
+
+      if (maxWidth) {
+        if (scrollWidth > maxWidth) {
+          size.width = "".concat(maxWidth, "px");
+        } else {
+          size.width = '100%';
+        }
+      }
+
+      if (maxHeight) {
+        if (scrollHeight > maxHeight) {
+          size.height = "".concat(maxHeight, "px");
+        } else {
+          size.height = '100%';
+        }
+      }
+
+      return size;
+    }
+  }, {
+    key: "listenDOM",
+    value: function listenDOM(target) {
+      if (!this.observer) return;
+      this.observer.disconnect();
+
+      if (target) {
+        this.observer.observe(target);
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (window.document.readyState !== 'complete') {
+        window.addEventListener('load', this.calculate);
+      } else {
+        this.calculate();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      window.removeEventListener('load', this.calculate);
+      if (this.observer) this.observer.disconnect();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          other = _objectWithoutProperties(_this$props, ["children", "className"]);
+
+      return React__default.createElement(Provider, {
+        value: {
+          eventEmitter: this.eventEmitter,
+          refContainer: this.refContainer,
+          refPadding: this.refPadding,
+          handleScrollContainer: this.handleScrollContainer
+        }
+      }, React__default.createElement(RootRef, {
+        rootRef: this.refWrapper
+      }, React__default.createElement(flexBox.Box, Object.assign({
+        className: cn(block(), className)
+      }, other), children)));
+    }
+  }]);
+
+  return ScrollArea;
+}(React.PureComponent);
+
+ScrollArea.displayName = 'ScrollArea';
+
+var data$1 = {
+  "block": {
+    "block": "_scroll-container_a61t2_3",
+    "horizontal": {
+      "block": "_scroll-container--horizontal_a61t2_23"
+    },
+    "vertical": {
+      "block": "_scroll-container--vertical_a61t2_27"
+    }
+  },
+  "padding": {
+    "block": "_scroll-container__padding_a61t2_20"
+  }
+};
+
+(function cssModulesFnInject(_path) {
+  if (_path && typeof window !== 'undefined') {
+    var head = window.document.head;
+    var prevStyle = head.querySelector('._css-style');
+
+    if (prevStyle && prevStyle.insertAdjacentText) {
+      prevStyle.insertAdjacentText("beforeend", "._scroll-container_a61t2_3{display:block;width:100%;height:100%;box-sizing:content-box;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}._scroll-container_a61t2_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_a61t2_23{overflow-x:scroll}._scroll-container--vertical_a61t2_27{overflow-y:scroll}._scroll-container--horizontal_a61t2_23 ._scroll-container__padding_a61t2_20{display:inline-block}");
+    } else {
+      var style = window.document.createElement("style");
+      style.classList.add('_css-style');
+      style.innerHTML = "._scroll-container_a61t2_3{display:block;width:100%;height:100%;box-sizing:content-box;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}._scroll-container_a61t2_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_a61t2_23{overflow-x:scroll}._scroll-container--vertical_a61t2_27{overflow-y:scroll}._scroll-container--horizontal_a61t2_23 ._scroll-container__padding_a61t2_20{display:inline-block}";
+      head.appendChild(style);
+    }
+  }
+})('./scroll-container.style.css');
+
+function block$1() {
+  return data$1['block']['block'];
+}
+
+block$1['horizontal'] = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
+  return data$1['block']['horizontal'][value];
+};
+
+block$1['vertical'] = function () {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
+  return data$1['block']['vertical'][value];
+};
+
+function padding() {
+  return data$1['padding']['block'];
+}
+
+var ScrollContainer =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inherits(ScrollContainer, _PureComponent);
+
+  function ScrollContainer(props, context) {
+    var _this;
+
+    _classCallCheck(this, ScrollContainer);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollContainer).call(this, props, context));
+
+    _this.refPadding = function (node) {
+      _this.context.refPadding(node);
+    };
+
+    _this.refContainer = function (node) {
+      _this.$container = node;
+
+      _this.context.refContainer(node);
+    };
+
+    _this.calculate = function () {
+      var orientation = _this.props.orientation;
+
+      if (_this.$container) {
+        var _this$calculateOrient = _this.calculateOrientation(),
+            _this$calculateOrient2 = _slicedToArray(_this$calculateOrient, 2),
+            horizontal = _this$calculateOrient2[0],
+            vertical = _this$calculateOrient2[1];
+
+        if (orientation === undefined || orientation === 'horizontal') {
+          _this.$container.classList.toggle(block$1.horizontal(), horizontal);
+        }
+
+        if (orientation === undefined || orientation === 'vertical') {
+          _this.$container.classList.toggle(block$1.vertical(), vertical);
+        }
+      }
+    };
+
+    _this._unCalculate = context.eventEmitter.subscribe('calculate', _this.calculate);
+    return _this;
+  }
+
+  _createClass(ScrollContainer, [{
+    key: "calculateOrientation",
+    value: function calculateOrientation() {
+      if (!this.$container) return [false, false];
+      var _this$$container = this.$container,
+          scrollWidth = _this$$container.scrollWidth,
+          scrollHeight = _this$$container.scrollHeight,
+          clientWidth = _this$$container.clientWidth,
+          clientHeight = _this$$container.clientHeight;
+      return [scrollWidth > clientWidth, scrollHeight > clientHeight];
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._unCalculate) this._unCalculate();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          className = _this$props.className,
+          onScroll = _this$props.onScroll,
+          other = _objectWithoutProperties(_this$props, ["children", "className", "onScroll"]);
+
+      return React__default.createElement(ScrollContext.Consumer, null, function (_ref) {
+        var handleScrollContainer = _ref.handleScrollContainer;
+        return React__default.createElement(RootRef, {
+          rootRef: _this2.refContainer
+        }, React__default.createElement(flexBox.Box, Object.assign({
+          className: cn(block$1(), className),
+          onScroll: assignProps.callAllEventHandlers(onScroll, handleScrollContainer)
+        }, other), React__default.createElement("div", {
+          className: padding(),
+          ref: _this2.refPadding
+        }, children)));
+      });
+    }
+  }]);
+
+  return ScrollContainer;
+}(React.PureComponent);
+
+ScrollContainer.displayName = 'ScrollContainer';
+ScrollContainer.contextType = ScrollContext;
+
+var data$2 = {
+  "block": {
     "block": "_scroll-bar_qrbal_3",
@@ -74,18 +402,18 @@ "hide": {
 
-function block() {
-  return data['block']['block'];
+function block$2() {
+  return data$2['block']['block'];
 }
 
-block['hide'] = function () {
+block$2['hide'] = function () {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['hide'][value];
+  return data$2['block']['hide'][value];
 };
 
-block['orientation'] = function () {
+block$2['orientation'] = function () {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['block']['orientation'][value];
+  return data$2['block']['orientation'][value];
 };
 
 function slider() {
-  return data['slider']['block'];
+  return data$2['slider']['block'];
 }
@@ -95,3 +423,3 @@
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data['slider']['theme'][value];
+  return data$2['slider']['theme'][value];
 };
@@ -105,6 +433,4 @@
 });
-var DEFAUTL_SLIDER_SIZE = 50; // hack hide Mozilla
+var DEFAUTL_SLIDER_SIZE = 50;
 
-var DEFAULT_PADDING = 40;
-
 var Slider =
@@ -385,4 +711,4 @@ /*#__PURE__*/
       return {
-        width: Math.max(calculateDimensions(clientWidth, scrollWidth - DEFAULT_PADDING), DEFAUTL_SLIDER_SIZE),
-        height: Math.max(calculateDimensions(clientHeight, scrollHeight - DEFAULT_PADDING), DEFAUTL_SLIDER_SIZE)
+        width: Math.max(calculateDimensions(clientWidth, scrollWidth), DEFAUTL_SLIDER_SIZE),
+        height: Math.max(calculateDimensions(clientHeight, scrollHeight), DEFAUTL_SLIDER_SIZE)
       };
@@ -428,3 +754,3 @@ }
       var visibleScroll = this.state.visibleScroll;
-      var classes = cn(block(), (_cn2 = {}, _defineProperty(_cn2, block.orientation(orientation), orientation), _defineProperty(_cn2, block.hide(), !visibleScroll), _cn2), className);
+      var classes = cn(block$2(), (_cn2 = {}, _defineProperty(_cn2, block$2.orientation(orientation), orientation), _defineProperty(_cn2, block$2.hide(), !visibleScroll), _cn2), className);
       var context = {
@@ -452,328 +778,2 @@ refSlider: this.refSlider,
 
-var data$1 = {
-  "block": {
-    "block": "_scroll-area_1xfz5_3"
-  }
-};
-
-(function cssModulesFnInject(_path) {
-  if (_path && typeof window !== 'undefined') {
-    var head = window.document.head;
-    var prevStyle = head.querySelector('._css-style');
-
-    if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}");
-    } else {
-      var style = window.document.createElement("style");
-      style.classList.add('_css-style');
-      style.innerHTML = "._scroll-area_1xfz5_3{position:relative;overflow:hidden;width:100%;height:100%}";
-      head.appendChild(style);
-    }
-  }
-})('./scroll-area.style.css');
-
-function block$1() {
-  return data$1['block']['block'];
-}
-
-function update(fn) {
-  var ticking = false;
-  return function () {
-    if (!ticking) {
-      window.requestAnimationFrame(function () {
-        ticking = false;
-        fn();
-      });
-    }
-
-    ticking = true;
-  };
-}
-
-var MutationObserver = undefined;
-
-if (typeof window !== 'undefined') {
-  MutationObserver = window['MutationObserver'] || window['WebKitMutationObserver'] || window['MozMutationObserver'];
-}
-
-var ScrollArea =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(ScrollArea, _PureComponent);
-
-  function ScrollArea(props, context) {
-    var _this;
-
-    _classCallCheck(this, ScrollArea);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollArea).call(this, props, context));
-
-    _this.refContainer = function (node) {
-      if (_this.$container !== node) {
-        _this.listenDOM(node);
-
-        _this.eventEmitter.emit('refContainer', node);
-      }
-
-      _this.$container = node;
-    };
-
-    _this.refWrapper = function (node) {
-      return _this.$wrapper = node;
-    };
-
-    _this.calculate = update(function () {
-      if (_this.$container) {
-        var _this$calculateSizeCo = _this.calculateSizeContainer(),
-            height = _this$calculateSizeCo.height,
-            width = _this$calculateSizeCo.width;
-
-        if (height) _this.$container.style.height = height;
-        if (width) _this.$container.style.width = width;
-      }
-
-      _this.eventEmitter.emit('calculate');
-    });
-    _this.handleScrollContainer = update(function () {
-      return _this.eventEmitter.emit('scrollContainer');
-    });
-    _this.eventEmitter = props.eventEmitter || new EventEmitter();
-
-    if (MutationObserver) {
-      _this.observer = new MutationObserver(_this.calculate);
-    }
-
-    return _this;
-  } // для max height/width
-
-
-  _createClass(ScrollArea, [{
-    key: "calculateSizeContainer",
-    value: function calculateSizeContainer() {
-      if (!this.$container || !this.$wrapper) return;
-      var _this$$container = this.$container,
-          scrollWidth = _this$$container.scrollWidth,
-          scrollHeight = _this$$container.scrollHeight;
-      var style = window.getComputedStyle(this.$wrapper);
-      var maxWidth = Number.parseInt(style['max-width']);
-      var maxHeight = Number.parseInt(style['max-height']);
-      var size = {
-        width: '',
-        height: ''
-      };
-
-      if (maxWidth) {
-        if (scrollWidth - DEFAULT_PADDING > maxWidth) {
-          size.width = "".concat(maxWidth, "px");
-        } else {
-          size.width = '100%';
-        }
-      }
-
-      if (maxHeight) {
-        if (scrollHeight - DEFAULT_PADDING > maxHeight) {
-          size.height = "".concat(maxHeight, "px");
-        } else {
-          size.height = '100%';
-        }
-      }
-
-      return size;
-    }
-  }, {
-    key: "listenDOM",
-    value: function listenDOM(target) {
-      if (!this.observer) return;
-      this.observer.disconnect();
-
-      if (target) {
-        this.observer.observe(target, {
-          childList: true,
-          subtree: true,
-          characterData: true
-        });
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (window.document.readyState !== 'complete') {
-        window.addEventListener('load', this.calculate);
-      } else {
-        this.calculate();
-      }
-
-      window.addEventListener('resize', this.calculate, false);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.removeEventListener('load', this.calculate);
-      window.removeEventListener('resize', this.calculate);
-      if (this.observer) this.observer.disconnect();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          className = _this$props.className,
-          other = _objectWithoutProperties(_this$props, ["children", "className"]);
-
-      return React__default.createElement(Provider, {
-        value: {
-          eventEmitter: this.eventEmitter,
-          refContainer: this.refContainer,
-          handleScrollContainer: this.handleScrollContainer
-        }
-      }, React__default.createElement(RootRef, {
-        rootRef: this.refWrapper
-      }, React__default.createElement(flexBox.Box, Object.assign({
-        className: cn(block$1(), className)
-      }, other), children)));
-    }
-  }]);
-
-  return ScrollArea;
-}(React.PureComponent);
-
-ScrollArea.displayName = 'ScrollArea';
-
-var data$2 = {
-  "block": {
-    "block": "_scroll-container_6apvg_3",
-    "horizontal": {
-      "block": "_scroll-container--horizontal_6apvg_21"
-    },
-    "vertical": {
-      "block": "_scroll-container--vertical_6apvg_25"
-    }
-  },
-  "padding": {
-    "block": "_scroll-container__padding_6apvg_18"
-  }
-};
-
-(function cssModulesFnInject(_path) {
-  if (_path && typeof window !== 'undefined') {
-    var head = window.document.head;
-    var prevStyle = head.querySelector('._css-style');
-
-    if (prevStyle && prevStyle.insertAdjacentText) {
-      prevStyle.insertAdjacentText("beforeend", "._scroll-container_6apvg_3{display:block;width:100%;height:100%;padding:20px;margin:-20px;box-sizing:content-box;-webkit-overflow-scrolling:touch}._scroll-container_6apvg_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_6apvg_21{overflow-x:scroll}._scroll-container--vertical_6apvg_25{overflow-y:scroll}._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{display:inline-block}@-moz-document url-prefix(){._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{padding-right:20px}._scroll-container--vertical_6apvg_25 ._scroll-container__padding_6apvg_18{padding-bottom:20px}}");
-    } else {
-      var style = window.document.createElement("style");
-      style.classList.add('_css-style');
-      style.innerHTML = "._scroll-container_6apvg_3{display:block;width:100%;height:100%;padding:20px;margin:-20px;box-sizing:content-box;-webkit-overflow-scrolling:touch}._scroll-container_6apvg_3::-webkit-scrollbar{display:none}._scroll-container--horizontal_6apvg_21{overflow-x:scroll}._scroll-container--vertical_6apvg_25{overflow-y:scroll}._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{display:inline-block}@-moz-document url-prefix(){._scroll-container--horizontal_6apvg_21 ._scroll-container__padding_6apvg_18{padding-right:20px}._scroll-container--vertical_6apvg_25 ._scroll-container__padding_6apvg_18{padding-bottom:20px}}";
-      head.appendChild(style);
-    }
-  }
-})('./scroll-container.style.css');
-
-function block$2() {
-  return data$2['block']['block'];
-}
-
-block$2['horizontal'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data$2['block']['horizontal'][value];
-};
-
-block$2['vertical'] = function () {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'block';
-  return data$2['block']['vertical'][value];
-};
-
-function padding() {
-  return data$2['padding']['block'];
-}
-
-var ScrollContainer =
-/*#__PURE__*/
-function (_PureComponent) {
-  _inherits(ScrollContainer, _PureComponent);
-
-  function ScrollContainer(props, context) {
-    var _this;
-
-    _classCallCheck(this, ScrollContainer);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(ScrollContainer).call(this, props, context));
-
-    _this.refContainer = function (node) {
-      _this.$container = node;
-
-      _this.context.refContainer(node);
-    };
-
-    _this.calculate = function () {
-      var orientation = _this.props.orientation;
-
-      if (_this.$container) {
-        var _this$calculateOrient = _this.calculateOrientation(),
-            _this$calculateOrient2 = _slicedToArray(_this$calculateOrient, 2),
-            horizontal = _this$calculateOrient2[0],
-            vertical = _this$calculateOrient2[1];
-
-        if (orientation === undefined || orientation === 'horizontal') {
-          _this.$container.classList.toggle(block$2.horizontal(), horizontal);
-        }
-
-        if (orientation === undefined || orientation === 'vertical') {
-          _this.$container.classList.toggle(block$2.vertical(), vertical);
-        }
-      }
-    };
-
-    _this._unCalculate = context.eventEmitter.subscribe('calculate', _this.calculate);
-    return _this;
-  }
-
-  _createClass(ScrollContainer, [{
-    key: "calculateOrientation",
-    value: function calculateOrientation() {
-      if (!this.$container) return [false, false];
-      var _this$$container = this.$container,
-          scrollWidth = _this$$container.scrollWidth,
-          clientWidth = _this$$container.clientWidth,
-          scrollHeight = _this$$container.scrollHeight,
-          clientHeight = _this$$container.clientHeight;
-      return [scrollWidth > clientWidth, scrollHeight > clientHeight];
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._unCalculate) this._unCalculate();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          children = _this$props.children,
-          className = _this$props.className,
-          onScroll = _this$props.onScroll,
-          other = _objectWithoutProperties(_this$props, ["children", "className", "onScroll"]);
-
-      return React__default.createElement(ScrollContext.Consumer, null, function (_ref) {
-        var handleScrollContainer = _ref.handleScrollContainer;
-        return React__default.createElement(RootRef, {
-          rootRef: _this2.refContainer
-        }, React__default.createElement(flexBox.Box, Object.assign({
-          className: cn(block$2(), className),
-          onScroll: assignProps.callAllEventHandlers(onScroll, handleScrollContainer)
-        }, other), React__default.createElement("div", {
-          className: padding()
-        }, children)));
-      });
-    }
-  }]);
-
-  return ScrollContainer;
-}(React.PureComponent);
-
-ScrollContainer.displayName = 'ScrollContainer';
-ScrollContainer.contextType = ScrollContext;
-
 var ScrollAreaSmart =
@@ -814,3 +814,2 @@ /*#__PURE__*/
 exports.EventEmitter = EventEmitter;
-exports.DEFAULT_PADDING = DEFAULT_PADDING;
 exports.ScrollArea = ScrollArea;
@@ -817,0 +816,0 @@ exports.ScrollBar = ScrollBar;

lib/ScrollArea/index.d.ts

@@ -10,2 +10,3 @@ import React, { PureComponent } from 'react';
     private $container;
+    private $padding;
     private $wrapper;
@@ -16,2 +17,3 @@ private eventEmitter;
     refContainer: (node: any) => void;
+    refPadding: (node: any) => void;
     refWrapper: (node: any) => any;
@@ -18,0 +20,0 @@ calculateSizeContainer(): {

lib/ScrollBar/index.d.ts

@@ -8,3 +8,2 @@ import React, { PureComponent } from 'react';
 }
-export declare const DEFAULT_PADDING = 40;
 export interface ISliderProps extends IBoxProps {
@@ -11,0 +10,0 @@ /** Тема slider

lib/ScrollContainer/index.d.ts

@@ -13,2 +13,3 @@ import React, { PureComponent } from 'react';
     constructor(props: any, context: any);
+    refPadding: (node: any) => void;
     refContainer: (node: any) => void;
@@ -15,0 +16,0 @@ calculateOrientation(): boolean[];

package.json

 {
   "name": "@semcore/scroll-area",
   "description": "SEMRush ScrollArea Component",
-  "version": "2.1.3",
+  "version": "2.2.2",
   "main": "lib/index.js",
@@ -12,21 +12,10 @@ "module": "lib/index.es.js",
     "build": "rollup --config=node:rollup-config-ts",
-    "test": "jest --no-cache"
+    "test": "jest"
   },
   "dependencies": {
-    "@semcore/utils": "^2.4",
     "@semcore/flex-box": "^3.1",
     "@semcore/root-ref": "^1.0",
-    "classnames": "^2.2",
-    "@types/react": "^16.8",
-    "@babel/runtime": "^7.5"
+    "@semcore/utils": "^3.1",
+    "resize-observer-polyfill": "^1.5"
   },
-  "peerDependencies": {
-    "react": "^16.6"
-  },
-  "devDependencies": {
-    "react": "^16.6",
-    "jest-preset-ui": "*",
-    "rollup-config-react": "*",
-    "jest": "*"
-  },
   "jest": {
@@ -33,0 +22,0 @@ "preset": "jest-preset-ui"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

4

decreased by-42.86%

Dev dependency count

0

decreased by-100%

Lines of code

2125

increased by0.38%

Worsened metrics

Total package byte prevSize

153729

decreased by-1.17%

Dependency changes

• + Addedresize-observer-polyfill@^1.5

• + Addedresize-observer-polyfill@1.5.1(transitive)

• - Removed@babel/runtime@^7.5

• - Removed@types/react@^16.8

• - Removedclassnames@^2.2

• - Removed@semcore/utils@2.6.0(transitive)

• - Removed@types/prop-types@15.7.13(transitive)

• - Removed@types/react@16.14.62(transitive)

• - Removed@types/scheduler@0.16.8(transitive)

• - Removedclassnames@2.5.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• Updated@semcore/utils@^3.1