@skbkontur/react-ui 0.0.0-b203c99d11 → 0.0.0-bb4cbfe9c6

package/cjs/components/ScrollContainer/ScrollContainer.constants.js

@@ -0,0 +1,33 @@
+"use strict";exports.__esModule = true;exports.scrollSizeParametersNames = exports.defaultScrollbarState = exports.MIN_SCROLL_SIZE = void 0;
+
+var MIN_SCROLL_SIZE = 20;exports.MIN_SCROLL_SIZE = MIN_SCROLL_SIZE;
+
+var defaultScrollbarState = {
+  size: 0,
+  pos: 0,
+  // Mouse is moving where big scrollbar can be located.
+  hover: false,
+  active: false,
+  // True when scroll is following mouse (mouse down on scroll).
+  scrolling: false,
+  scrollState: 'begin' };exports.defaultScrollbarState = defaultScrollbarState;
+
+
+var scrollSizeParametersNames = {
+  x: {
+    offset: 'offsetWidth',
+    size: 'scrollWidth',
+    pos: 'scrollLeft',
+    coord: 'clientX',
+    clientSize: 'clientWidth',
+    customScrollPos: 'left',
+    customScrollSize: 'width' },
+
+  y: {
+    offset: 'offsetHeight',
+    size: 'scrollHeight',
+    pos: 'scrollTop',
+    coord: 'clientY',
+    clientSize: 'clientHeight',
+    customScrollPos: 'top',
+    customScrollSize: 'height' } };exports.scrollSizeParametersNames = scrollSizeParametersNames;

package/cjs/components/ScrollContainer/ScrollContainer.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ScrollContainer.constants.ts"],"names":["MIN_SCROLL_SIZE","defaultScrollbarState","size","pos","hover","active","scrolling","scrollState","scrollSizeParametersNames","x","offset","coord","clientSize","customScrollPos","customScrollSize","y"],"mappings":";;AAEO,IAAMA,eAAe,GAAG,EAAxB,C;;AAEA,IAAMC,qBAAqC,GAAG;AACnDC,EAAAA,IAAI,EAAE,CAD6C;AAEnDC,EAAAA,GAAG,EAAE,CAF8C;AAGnD;AACAC,EAAAA,KAAK,EAAE,KAJ4C;AAKnDC,EAAAA,MAAM,EAAE,KAL2C;AAMnD;AACAC,EAAAA,SAAS,EAAE,KAPwC;AAQnDC,EAAAA,WAAW,EAAE,OARsC,EAA9C,C;;;AAWA,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,CAAC,EAAE;AACDC,IAAAA,MAAM,EAAE,aADP;AAEDR,IAAAA,IAAI,EAAE,aAFL;AAGDC,IAAAA,GAAG,EAAE,YAHJ;AAIDQ,IAAAA,KAAK,EAAE,SAJN;AAKDC,IAAAA,UAAU,EAAE,aALX;AAMDC,IAAAA,eAAe,EAAE,MANhB;AAODC,IAAAA,gBAAgB,EAAE,OAPjB,EADoC;;AAUvCC,EAAAA,CAAC,EAAE;AACDL,IAAAA,MAAM,EAAE,cADP;AAEDR,IAAAA,IAAI,EAAE,cAFL;AAGDC,IAAAA,GAAG,EAAE,WAHJ;AAIDQ,IAAAA,KAAK,EAAE,SAJN;AAKDC,IAAAA,UAAU,EAAE,cALX;AAMDC,IAAAA,eAAe,EAAE,KANhB;AAODC,IAAAA,gBAAgB,EAAE,QAPjB,EAVoC,EAAlC,C","sourcesContent":["import { ScrollBarState } from './ScrollBar';\n\nexport const MIN_SCROLL_SIZE = 20;\n\nexport const defaultScrollbarState: ScrollBarState = {\n  size: 0,\n  pos: 0,\n  // Mouse is moving where big scrollbar can be located.\n  hover: false,\n  active: false,\n  // True when scroll is following mouse (mouse down on scroll).\n  scrolling: false,\n  scrollState: 'begin',\n};\n\nexport const scrollSizeParametersNames = {\n  x: {\n    offset: 'offsetWidth',\n    size: 'scrollWidth',\n    pos: 'scrollLeft',\n    coord: 'clientX',\n    clientSize: 'clientWidth',\n    customScrollPos: 'left',\n    customScrollSize: 'width',\n  },\n  y: {\n    offset: 'offsetHeight',\n    size: 'scrollHeight',\n    pos: 'scrollTop',\n    coord: 'clientY',\n    clientSize: 'clientHeight',\n    customScrollPos: 'top',\n    customScrollSize: 'height',\n  },\n} as const;\n"]}

package/cjs/components/ScrollContainer/ScrollContainer.d.ts

@@ -1,50 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type ScrollContainerScrollState = 'top' | 'scroll' | 'bottom';
+import { Nullable } from '../../typings/utility-types';
+export declare type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
+export declare type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
+export declare type ScrollContainerScrollState = ScrollContainerScrollStateY;
 export declare type ScrollBehaviour = 'auto' | 'smooth';
 export interface ScrollContainerProps extends CommonProps {
-    invert?: boolean;
+    /**
+     * Инвертировать цвет скроллбара
+     * @default false
+     */
+    invert: boolean;
     maxHeight?: React.CSSProperties['maxHeight'];
-    preventWindowScroll?: boolean;
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /**
+     * @default false
+     */
+    preventWindowScroll: boolean;
     /**
      * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
      * @default 'auto'
      */
     scrollBehaviour?: ScrollBehaviour;
-    onScrollStateChange?: (scrollState: ScrollContainerScrollState) => void;
+    onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;
+    onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;
+    onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void;
     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+    /**
+     * Отключение кастомного скролла
+     */
+    disabled?: boolean;
 }
-export interface ScrollContainerState {
-    scrollActive: boolean;
-    hover: boolean;
-    scrolling: boolean;
-    scrollSize: number;
-    scrollPos: number;
-    scrollState: ScrollContainerScrollState;
-}
-export declare class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {
+export declare class ScrollContainer extends React.Component<ScrollContainerProps> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
         invert: PropTypes.Requireable<boolean>;
+        maxWidth: PropTypes.Requireable<string | number>;
         maxHeight: PropTypes.Requireable<string | number>;
         scrollBehaviour: PropTypes.Requireable<string>;
         preventWindowScroll: PropTypes.Requireable<boolean>;
         onScrollStateChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     static defaultProps: {
+        invert: boolean;
         scrollBehaviour: string;
+        preventWindowScroll: boolean;
     };
-    state: ScrollContainerState;
+    private scrollX;
+    private scrollY;
     private inner;
-    private scroll;
+    private setRootNode;
     componentDidMount(): void;
     componentDidUpdate(prevProps: ScrollContainerProps): void;
-    render(): JSX.Element;
+    render: () => React.ReactNode;
     /**
      * @public
+     * @param {HTMLElement} element
      */
-    scrollTo(element: HTMLElement): void;
+    scrollTo(element: Nullable<HTMLElement>): void;
     /**
      * @public
      */
@@ -53,15 +67,22 @@ export declare class ScrollContainer extends React.Component<ScrollContainerProp
      * @public
      */
     scrollToBottom(): void;
+    /**
+     * @public
+     */
+    scrollToLeft(): void;
+    /**
+     * @public
+     */
+    scrollToRight(): void;
+    private hasScrollBar;
+    private renderScrollbar;
+    private handleScrollStateChange;
+    private refScrollBarY;
+    private refScrollBarX;
     private refInner;
-    private refScroll;
     private handleNativeScroll;
-    private reflow;
-    private handleScrollMouseDown;
-    private handleScrollWheel;
     private handleInnerScrollWheel;
     private handleMouseMove;
     private handleMouseLeave;
-    private setHover;
-    private getImmediateScrollState;
 }

package/cjs/components/ScrollContainer/ScrollContainer.helpers.d.ts

@@ -0,0 +1,10 @@
+import { ScrollBarScrollState } from './ScrollBar';
+import { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';
+export declare const getScrollSizeParams: (inner: HTMLElement, axis: 'x' | 'y') => {
+    scrollActive: boolean;
+    scrollSize: number;
+    scrollPos: number;
+};
+export declare const getScrollYOffset: (element: HTMLElement, container: HTMLElement) => number;
+export declare const convertScrollbarXScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateX;
+export declare const convertScrollbarYScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateY;

package/cjs/components/ScrollContainer/ScrollContainer.helpers.js

@@ -0,0 +1,62 @@
+"use strict";exports.__esModule = true;exports.getScrollYOffset = exports.getScrollSizeParams = exports.convertScrollbarYScrollState = exports.convertScrollbarXScrollState = void 0;var _ScrollContainer = require("./ScrollContainer.constants");
+
+
+
+var getScrollSizeParams = function getScrollSizeParams(inner, axis) {
+  var _scrollSizeParameters = _ScrollContainer.scrollSizeParametersNames[axis],offset = _scrollSizeParameters.offset,size = _scrollSizeParameters.size,pos = _scrollSizeParameters.pos;
+
+  var contentSize = inner[size];
+  var scrollOffset = inner[pos];
+  var containerSize = inner[offset];
+
+  var scrollActive = containerSize < contentSize;
+
+  var scrollSize = 0;
+  var scrollPos = 0;
+
+  if (scrollActive) {
+    scrollSize = Math.max(containerSize / contentSize * containerSize, _ScrollContainer.MIN_SCROLL_SIZE);
+    scrollPos = scrollOffset / (contentSize - containerSize) * (containerSize - scrollSize);
+  }
+
+  return {
+    scrollActive: scrollActive,
+    scrollSize: scrollSize,
+    scrollPos: scrollPos };
+
+};exports.getScrollSizeParams = getScrollSizeParams;
+
+var getScrollYOffset = function getScrollYOffset(element, container) {
+  var elementOffset = element.offsetTop;
+
+  if (container.scrollTop > elementOffset) {
+    return elementOffset;
+  }
+
+  var offset = elementOffset + element.scrollHeight - container.offsetHeight;
+  if (container.scrollTop < offset) {
+    return offset;
+  }
+
+  return container.scrollTop;
+};exports.getScrollYOffset = getScrollYOffset;
+
+var convertScrollbarXScrollState = function convertScrollbarXScrollState(state) {
+  var scrollBarState = {
+    begin: 'left',
+    end: 'right',
+    middle: 'scroll' };
+
+
+  return scrollBarState[state];
+};exports.convertScrollbarXScrollState = convertScrollbarXScrollState;
+
+var convertScrollbarYScrollState = function convertScrollbarYScrollState(state) {
+  var scrollBarState = {
+    begin: 'top',
+    end: 'bottom',
+    middle: 'scroll' };
+
+
+  return scrollBarState[state];
+};exports.convertScrollbarYScrollState = convertScrollbarYScrollState;

package/cjs/components/ScrollContainer/ScrollContainer.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ScrollContainer.helpers.ts"],"names":["getScrollSizeParams","inner","axis","scrollSizeParametersNames","offset","size","pos","contentSize","scrollOffset","containerSize","scrollActive","scrollSize","scrollPos","Math","max","MIN_SCROLL_SIZE","getScrollYOffset","element","container","elementOffset","offsetTop","scrollTop","scrollHeight","offsetHeight","convertScrollbarXScrollState","state","scrollBarState","begin","end","middle","convertScrollbarYScrollState"],"mappings":"qLAAA;;;;AAIO,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqBC,IAArB,EAAyC;AAC1E,8BAA8BC,2CAA0BD,IAA1B,CAA9B,CAAQE,MAAR,yBAAQA,MAAR,CAAgBC,IAAhB,yBAAgBA,IAAhB,CAAsBC,GAAtB,yBAAsBA,GAAtB;;AAEA,MAAMC,WAAW,GAAGN,KAAK,CAACI,IAAD,CAAzB;AACA,MAAMG,YAAY,GAAGP,KAAK,CAACK,GAAD,CAA1B;AACA,MAAMG,aAAa,GAAGR,KAAK,CAACG,MAAD,CAA3B;;AAEA,MAAMM,YAAY,GAAGD,aAAa,GAAGF,WAArC;;AAEA,MAAII,UAAU,GAAG,CAAjB;AACA,MAAIC,SAAS,GAAG,CAAhB;;AAEA,MAAIF,YAAJ,EAAkB;AAChBC,IAAAA,UAAU,GAAGE,IAAI,CAACC,GAAL,CAAUL,aAAa,GAAGF,WAAjB,GAAgCE,aAAzC,EAAwDM,gCAAxD,CAAb;AACAH,IAAAA,SAAS,GAAIJ,YAAY,IAAID,WAAW,GAAGE,aAAlB,CAAb,IAAkDA,aAAa,GAAGE,UAAlE,CAAZ;AACD;;AAED,SAAO;AACLD,IAAAA,YAAY,EAAZA,YADK;AAELC,IAAAA,UAAU,EAAVA,UAFK;AAGLC,IAAAA,SAAS,EAATA,SAHK,EAAP;;AAKD,CAtBM,C;;AAwBA,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAuBC,SAAvB,EAAkD;AAChF,MAAMC,aAAa,GAAGF,OAAO,CAACG,SAA9B;;AAEA,MAAIF,SAAS,CAACG,SAAV,GAAsBF,aAA1B,EAAyC;AACvC,WAAOA,aAAP;AACD;;AAED,MAAMf,MAAM,GAAGe,aAAa,GAAGF,OAAO,CAACK,YAAxB,GAAuCJ,SAAS,CAACK,YAAhE;AACA,MAAIL,SAAS,CAACG,SAAV,GAAsBjB,MAA1B,EAAkC;AAChC,WAAOA,MAAP;AACD;;AAED,SAAOc,SAAS,CAACG,SAAjB;AACD,CAbM,C;;AAeA,IAAMG,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACC,KAAD,EAA8D;AACxG,MAAMC,cAAyE,GAAG;AAChFC,IAAAA,KAAK,EAAE,MADyE;AAEhFC,IAAAA,GAAG,EAAE,OAF2E;AAGhFC,IAAAA,MAAM,EAAE,QAHwE,EAAlF;;;AAMA,SAAOH,cAAc,CAACD,KAAD,CAArB;AACD,CARM,C;;AAUA,IAAMK,4BAA4B,GAAG,SAA/BA,4BAA+B,CAACL,KAAD,EAA8D;AACxG,MAAMC,cAAyE,GAAG;AAChFC,IAAAA,KAAK,EAAE,KADyE;AAEhFC,IAAAA,GAAG,EAAE,QAF2E;AAGhFC,IAAAA,MAAM,EAAE,QAHwE,EAAlF;;;AAMA,SAAOH,cAAc,CAACD,KAAD,CAArB;AACD,CARM,C","sourcesContent":["import { MIN_SCROLL_SIZE, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { ScrollBarScrollState } from './ScrollBar';\nimport { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';\n\nexport const getScrollSizeParams = (inner: HTMLElement, axis: 'x' | 'y') => {\n  const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n  const contentSize = inner[size];\n  const scrollOffset = inner[pos];\n  const containerSize = inner[offset];\n\n  const scrollActive = containerSize < contentSize;\n\n  let scrollSize = 0;\n  let scrollPos = 0;\n\n  if (scrollActive) {\n    scrollSize = Math.max((containerSize / contentSize) * containerSize, MIN_SCROLL_SIZE);\n    scrollPos = (scrollOffset / (contentSize - containerSize)) * (containerSize - scrollSize);\n  }\n\n  return {\n    scrollActive,\n    scrollSize,\n    scrollPos,\n  };\n};\n\nexport const getScrollYOffset = (element: HTMLElement, container: HTMLElement) => {\n  const elementOffset = element.offsetTop;\n\n  if (container.scrollTop > elementOffset) {\n    return elementOffset;\n  }\n\n  const offset = elementOffset + element.scrollHeight - container.offsetHeight;\n  if (container.scrollTop < offset) {\n    return offset;\n  }\n\n  return container.scrollTop;\n};\n\nexport const convertScrollbarXScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateX => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateX> = {\n    begin: 'left',\n    end: 'right',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n\nexport const convertScrollbarYScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateY => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateY> = {\n    begin: 'top',\n    end: 'bottom',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n"]}

package/cjs/components/ScrollContainer/ScrollContainer.js

@@ -1,19 +1,20 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ScrollContainer = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ScrollContainer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
-var _getScrollWidth = require("../../lib/dom/getScrollWidth");
-
 var _CommonWrapper = require("../../internal/CommonWrapper");
 
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+
 var _ScrollContainer = require("./ScrollContainer.styles");
+var _ScrollContainer2 = require("./ScrollContainer.constants");
+var _ScrollContainer3 = require("./ScrollContainer.helpers");
 
-var HIDE_SCROLLBAR_OFFSET = 30;
-var MIN_SCROLL_SIZE = 20;var
 
 
 
+var _ScrollBar = require("./ScrollBar");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
 
 
 
@@ -38,7 +39,6 @@ var MIN_SCROLL_SIZE = 20;var
 
 
 
-ScrollContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ScrollContainer, _React$Component);function ScrollContainer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -49,24 +49,14 @@ ScrollContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
+ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ScrollContainer, _React$Component);function ScrollContainer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
-    state = {
-      scrollActive: false,
-      scrollSize: 0,
-      scrollPos: 0,
 
-      // Mouse is moving where big scrollbar can be located.
-      hover: false,
-      // True when scroll is following mouse (mouse down on scroll).
-      scrolling: false,
-      scrollState: 'top' };_this.
 
 
-    inner = void 0;_this.
-    scroll = void 0;_this.
 
 
 
@@ -98,16 +88,40 @@ ScrollContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
+    render = function () {
+      var props = _this.props;
 
+      if (_this.props.disabled) {
+        return _this.props.children;
+      }
 
+      var innerStyle = {
+        scrollBehavior: props.scrollBehaviour,
+        maxHeight: props.maxHeight,
+        maxWidth: props.maxWidth };
 
 
+      var scrollbarY = _this.renderScrollbar('y');
+      var scrollbarX = _this.renderScrollbar('x');
 
+      return /*#__PURE__*/(
+        _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this.setRootNode }, _this.props), /*#__PURE__*/
+        _react.default.createElement("div", { className: _ScrollContainer.styles.root(), onMouseMove: _this.handleMouseMove, onMouseLeave: _this.handleMouseLeave },
+        scrollbarY,
+        scrollbarX, /*#__PURE__*/
+        _react.default.createElement("div", {
+          style: innerStyle,
+          ref: _this.refInner,
+          className: (0, _Emotion.cx)(_ScrollContainer.styles.inner(), _ScrollContainer.globalClasses.inner),
+          "data-tid": "ScrollContainer__inner",
+          onScroll: _this.handleNativeScroll },
 
+        props.children))));
 
 
 
 
+    };_this.
 
 
 
@@ -173,140 +187,65 @@ ScrollContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
 
+    renderScrollbar = function (axis) {
+      var refScrollBar = axis === 'x' ? _this.refScrollBarX : _this.refScrollBarY;
 
+      return /*#__PURE__*/(
+        _react.default.createElement(_ScrollBar.ScrollBar, {
+          axis: axis,
+          ref: refScrollBar,
+          invert: _this.props.invert,
+          onScrollStateChange: _this.handleScrollStateChange }));
 
-    refInner = function (element) {
-      if (!_this.inner && element && _this.props.preventWindowScroll) {
-        element.addEventListener('wheel', _this.handleInnerScrollWheel, { passive: false });
-      }
-      if (_this.inner && !element) {
-        _this.inner.removeEventListener('wheel', _this.handleInnerScrollWheel);
-      }
-      _this.inner = element;
-    };_this.
 
-    refScroll = function (element) {
-      if (!_this.scroll && element) {
-        element.addEventListener('wheel', _this.handleScrollWheel, { passive: false });
-      }
-      if (_this.scroll && !element) {
-        _this.scroll.removeEventListener('wheel', _this.handleScrollWheel);
-      }
-      _this.scroll = element;
     };_this.
 
-    handleNativeScroll = function (event) {
-      _this.reflow();
-      _this.props.onScroll == null ? void 0 : _this.props.onScroll(event);
-      if (_this.props.preventWindowScroll) {
-        event.preventDefault();
-        return;
-      }
-      LayoutEvents.emit();
-    };_this.
-
-    reflow = function () {
-      if (!_this.inner) {
+    handleScrollStateChange = function (scrollState, axis) {
+      if (!_this.scrollY || !_this.scrollX) {
         return;
       }
 
-      var containerHeight = _this.inner.offsetHeight;
-      var contentHeight = _this.inner.scrollHeight;
-      var scrollTop = _this.inner.scrollTop;
+      if (axis === 'x') {
+        var scrollXState = (0, _ScrollContainer3.convertScrollbarXScrollState)(scrollState);
 
-      var scrollActive = containerHeight < contentHeight;
-
-      if (!scrollActive && !_this.state.scrollActive) {
+        _this.props.onScrollStateChangeX == null ? void 0 : _this.props.onScrollStateChangeX(scrollXState);
         return;
       }
 
-      var scrollSize = 0;
-      var scrollPos = 0;
-      var scrollState = _this.state.scrollState;
-
-      if (scrollActive) {
-        scrollSize = Math.max(containerHeight / contentHeight * containerHeight, MIN_SCROLL_SIZE);
-        scrollPos = scrollTop / (contentHeight - containerHeight) * (containerHeight - scrollSize);
-      }
-
-      if (
-      _this.state.scrollActive !== scrollActive ||
-      _this.state.scrollSize !== scrollSize ||
-      _this.state.scrollPos !== scrollPos)
-      {
-        scrollState = _this.getImmediateScrollState();
+      var scrollYState = (0, _ScrollContainer3.convertScrollbarYScrollState)(scrollState);
 
-        if (scrollState !== _this.state.scrollState) {
-          _this.props.onScrollStateChange == null ? void 0 : _this.props.onScrollStateChange(scrollState);
-        }
+      _this.props.onScrollStateChange == null ? void 0 : _this.props.onScrollStateChange(scrollYState);
+      _this.props.onScrollStateChangeY == null ? void 0 : _this.props.onScrollStateChangeY(scrollYState);
+    };_this.
 
-        _this.setState({
-          scrollActive: scrollActive,
-          scrollSize: scrollSize,
-          scrollPos: scrollPos,
-          scrollState: scrollState });
+    refScrollBarY = function (scrollbar) {
+      _this.scrollY = scrollbar;
+    };_this.
 
-      }
+    refScrollBarX = function (scrollbar) {
+      _this.scrollX = scrollbar;
     };_this.
 
-    handleScrollMouseDown = function (event) {
-      if (!_this.inner) {
-        return;
+    refInner = function (element) {
+      if (!_this.inner && element && _this.props.preventWindowScroll) {
+        element.addEventListener('wheel', _this.handleInnerScrollWheel, { passive: false });
       }
-
-      var target = window.document;
-      var initialY = event.clientY;
-      var initialScrollTop = _this.inner.scrollTop;
-
-      var mouseMove = function mouseMove(mouseMoveEvent) {
-        if (!_this.inner) {
-          return;
-        }
-
-        var ratio =
-        (_this.inner.scrollHeight - _this.inner.offsetHeight) / (_this.inner.offsetHeight - _this.state.scrollSize);
-        var deltaY = (mouseMoveEvent.clientY - initialY) * ratio;
-
-        _this.inner.scrollTop = initialScrollTop + deltaY;
-
-        if (mouseMoveEvent.preventDefault) {
-          mouseMoveEvent.preventDefault();
-        }
-
-        if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {
-          mouseMoveEvent.
-
-          returnValue = false;
-        }
-      };
-
-      var mouseUp = function mouseUp() {
-        target.removeEventListener('mousemove', mouseMove);
-        target.removeEventListener('mouseup', mouseUp);
-        _this.setState({ scrolling: false });
-      };
-
-      target.addEventListener('mousemove', mouseMove);
-      target.addEventListener('mouseup', mouseUp);
-      _this.setState({ scrolling: true });
-
-      event.preventDefault();
+      if (_this.inner && !element) {
+        _this.inner.removeEventListener('wheel', _this.handleInnerScrollWheel);
+      }
+      _this.inner = element;
     };_this.
 
-    handleScrollWheel = function (event) {
-      if (!_this.inner || !(event instanceof WheelEvent)) {
-        return;
-      }
+    handleNativeScroll = function (event) {var _this$scrollX, _this$scrollY;
+      (_this$scrollX = _this.scrollX) == null ? void 0 : _this$scrollX.reflow();
+      (_this$scrollY = _this.scrollY) == null ? void 0 : _this$scrollY.reflow();
 
-      if (event.deltaY > 0 && _this.inner.scrollHeight <= _this.inner.scrollTop + _this.inner.offsetHeight) {
-        return;
-      }
-      if (event.deltaY < 0 && _this.inner.scrollTop <= 0) {
+      _this.props.onScroll == null ? void 0 : _this.props.onScroll(event);
+      if (_this.props.preventWindowScroll) {
+        event.preventDefault();
         return;
       }
-
-      _this.inner.scrollTop += event.deltaY;
-      event.preventDefault();
+      LayoutEvents.emit();
     };_this.
 
     handleInnerScrollWheel = function (event) {
@@ -314,39 +253,42 @@ ScrollContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
         return;
       }
 
-      if (_this.state.scrollActive) {
-        if (event.deltaY > 0 && _this.inner.scrollHeight <= _this.inner.scrollTop + _this.inner.offsetHeight) {
+      var axis = event.shiftKey ? 'x' : 'y';
+
+      if (_this.hasScrollBar(axis)) {
+        var _scrollSizeParameters = _ScrollContainer2.scrollSizeParametersNames[axis],pos = _scrollSizeParameters.pos,size = _scrollSizeParameters.size,offset = _scrollSizeParameters.offset;
+
+        if (event.deltaY > 0 && _this.inner[size] <= _this.inner[pos] + _this.inner[offset]) {
           event.preventDefault();
           return false;
         }
-        if (event.deltaY < 0 && _this.inner.scrollTop <= 0) {
+        if (event.deltaY < 0 && _this.inner[pos] <= 0) {
           event.preventDefault();
           return false;
         }
       }
     };_this.
 
-    handleMouseMove = function (event) {
+    handleMouseMove = function (event) {var _this$scrollY2, _this$scrollX2;
       var right = event.currentTarget.getBoundingClientRect().right - event.pageX;
-      _this.setHover(right <= 12);
+      var bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;
+
+      (_this$scrollY2 = _this.scrollY) == null ? void 0 : _this$scrollY2.setHover(right <= 12);
+      (_this$scrollX2 = _this.scrollX) == null ? void 0 : _this$scrollX2.setHover(right >= 12 && bottom <= 12);
     };_this.
 
-    handleMouseLeave = function () {
-      _this.setHover(false);
-    };return _this;}var _proto = ScrollContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.inner) {if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);}if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });}}this.reflow();};_proto.render = function render() {var state = this.state;var props = this.props;var scroll = null;if (state.scrollActive) {var _cn;var scrollClass = (0, _classnames.default)((_cn = {}, _cn[_ScrollContainer.jsStyles.scroll()] = true, _cn[_ScrollContainer.jsStyles.scrollInvert()] = Boolean(props.invert), _cn[_ScrollContainer.jsStyles.scrollHover()] = state.hover || state.scrolling, _cn));var scrollStyle = { top: state.scrollPos, height: state.scrollSize };scroll = /*#__PURE__*/_react.default.createElement("div", { ref: this.refScroll, className: scrollClass, style: scrollStyle, onMouseDown: this.handleScrollMouseDown });}var innerStyle = { // hide vertical scrollbar with a little extra space
-      marginRight: -1 * HIDE_SCROLLBAR_OFFSET, paddingRight: HIDE_SCROLLBAR_OFFSET - (0, _getScrollWidth.getScrollWidth)(), maxHeight: props.maxHeight, scrollBehavior: props.scrollBehaviour };return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { className: _ScrollContainer.jsStyles.root(), onMouseMove: this.handleMouseMove, onMouseLeave: this.handleMouseLeave }, scroll, /*#__PURE__*/_react.default.createElement("div", { "data-tid": "ScrollContainer__inner", className: _ScrollContainer.jsStyles.inner(), style: innerStyle, ref: this.refInner, onScroll: this.handleNativeScroll }, props.children)));} /**
-   * @public
-   */;_proto.scrollTo = function scrollTo(element) {if (!element || !this.inner) {return;}var maxScroll = element.offsetTop;if (this.inner.scrollTop > maxScroll) {this.inner.scrollTop = maxScroll;return;}var minScroll = element.offsetTop + element.scrollHeight - this.inner.offsetHeight;if (this.inner.scrollTop < minScroll) {this.inner.scrollTop = minScroll;}} /**
-   * @public
-   */;_proto.scrollToTop = function scrollToTop() {if (!this.inner) {return;}this.inner.scrollTop = 0;} /**
-   * @public
-   */;_proto.scrollToBottom = function scrollToBottom() {if (!this.inner) {return;}this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;};_proto.setHover = function setHover(hover) {if (this.state.hover !== hover) {this.setState({ hover: hover });}};_proto.
-  getImmediateScrollState = function getImmediateScrollState() {
-    if (!this.inner || this.inner.scrollTop === 0) {
-      return 'top';
-    } else if (this.inner.scrollTop === this.inner.scrollHeight - this.inner.clientHeight) {
-      return 'bottom';
-    } else {
-      return 'scroll';
-    }
-  };return ScrollContainer;}(_react.default.Component);exports.ScrollContainer = ScrollContainer;ScrollContainer.__KONTUR_REACT_UI__ = 'ScrollContainer';ScrollContainer.propTypes = { invert: _propTypes.default.bool, maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), scrollBehaviour: _propTypes.default.oneOf(['auto', 'smooth']), preventWindowScroll: _propTypes.default.bool, onScrollStateChange: _propTypes.default.func };ScrollContainer.defaultProps = { scrollBehaviour: 'auto' };
+    handleMouseLeave = function () {var _this$scrollY3, _this$scrollX3;
+      (_this$scrollY3 = _this.scrollY) == null ? void 0 : _this$scrollY3.setHover(false);
+      (_this$scrollX3 = _this.scrollX) == null ? void 0 : _this$scrollX3.setHover(false);
+    };return _this;}var _proto = ScrollContainer.prototype;_proto.componentDidMount = function componentDidMount() {var _this$scrollX4, _this$scrollY4;(_this$scrollX4 = this.scrollX) == null ? void 0 : _this$scrollX4.setInnerElement(this.inner);(_this$scrollY4 = this.scrollY) == null ? void 0 : _this$scrollY4.setInnerElement(this.inner);};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.inner) {if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);}if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });}}}; /**
+   * @public
+   * @param {HTMLElement} element
+   */_proto.scrollTo = function scrollTo(element) {if (!element || !this.inner) {return;}this.inner.scrollLeft = element.offsetLeft;this.inner.scrollTop = (0, _ScrollContainer3.getScrollYOffset)(element, this.inner);} /**
+   * @public
+   */;_proto.scrollToTop = function scrollToTop() {if (!this.inner) {return;}this.inner.scrollTop = 0;} /**
+   * @public
+   */;_proto.scrollToBottom = function scrollToBottom() {if (!this.inner) {return;}this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;} /**
+   * @public
+   */;_proto.scrollToLeft = function scrollToLeft() {if (!this.inner) {return;}this.inner.scrollLeft = 0;} /**
+   * @public
+   */;_proto.scrollToRight = function scrollToRight() {if (!this.inner) {return;}this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;};_proto.hasScrollBar = function hasScrollBar(axis) {if (!this.inner) {return false;}return axis === 'x' ? this.inner.offsetWidth < this.inner.scrollWidth : this.inner.offsetHeight < this.inner.scrollHeight;};return ScrollContainer;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'ScrollContainer', _class2.propTypes = { invert: _propTypes.default.bool, maxWidth: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), scrollBehaviour: _propTypes.default.oneOf(['auto', 'smooth']), preventWindowScroll: _propTypes.default.bool, onScrollStateChange: _propTypes.default.func }, _class2.defaultProps = { invert: false, scrollBehaviour: 'auto', preventWindowScroll: false }, _temp)) || _class;exports.ScrollContainer = ScrollContainer;