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

package/cjs/components/ScrollContainer/ScrollBar.js

@@ -0,0 +1,244 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ScrollBar = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _ScrollContainer = require("./ScrollContainer.constants");
+var _ScrollContainer2 = require("./ScrollContainer.styles");
+var _ScrollContainer3 = require("./ScrollContainer.helpers");var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ScrollBar, _React$Component);function ScrollBar() {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 = (0, _extends2.default)({},
+    _ScrollContainer.defaultScrollbarState);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderMain = function () {var _cx, _inlineStyles;
+      var state = _this.state;
+      var props = _this.props;
+
+      if (!state.active) {
+        return null;
+      }
+
+      var _scrollSizeParameters = _ScrollContainer.scrollSizeParametersNames[_this.props.axis],customScrollPos = _scrollSizeParameters.customScrollPos,customScrollSize = _scrollSizeParameters.customScrollSize;
+
+      var classNames = (0, _Emotion.cx)(props.className, _ScrollContainer2.styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[
+      _ScrollContainer2.styles.scrollBarInvert(_this.theme)] = props.invert, _cx));
+
+
+      var inlineStyles = (_inlineStyles = {}, _inlineStyles[
+      customScrollPos] = state.pos, _inlineStyles[
+      customScrollSize] = state.size, _inlineStyles);
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement("div", {
+          ref: _this.refScroll,
+          style: inlineStyles,
+          className: classNames,
+          onMouseDown: _this.handleScrollMouseDown,
+          "data-tid": "ScrollContainer__ScrollBar-" + props.axis }));
+
+
+    };_this.
+
+    reflow = function () {
+      if (!_this.inner) {
+        return;
+      }
+
+      var props = _this.props;
+      var state = _this.state;
+
+      var _getScrollSizeParams = (0, _ScrollContainer3.getScrollSizeParams)(_this.inner, props.axis),scrollSize = _getScrollSizeParams.scrollSize,scrollPos = _getScrollSizeParams.scrollPos,scrollActive = _getScrollSizeParams.scrollActive;
+
+      if (!scrollActive && !state.active) {
+        return;
+      }
+
+      if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {
+        var scrollState = _this.getImmediateScrollState();
+
+        if (scrollState !== state.scrollState) {
+          _this.props.onScrollStateChange == null ? void 0 : _this.props.onScrollStateChange(scrollState, props.axis);
+        }
+
+        _this.setState((0, _extends2.default)({},
+        _this.state, {
+          active: scrollActive,
+          size: scrollSize,
+          pos: scrollPos,
+          scrollState: scrollState }));
+
+      }
+    };_this.
+
+    setInnerElement = function (inner) {
+      _this.inner = inner;
+      _this.reflow();
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    refScroll = function (element) {
+      var handleScrollWheel = function handleScrollWheel(event) {return _this.handleScrollWheel(event, _this.props.axis);};
+
+      if (!_this.node && element) {
+        element.addEventListener('wheel', handleScrollWheel, { passive: false });
+      }
+      if (_this.node && !element) {
+        _this.node.removeEventListener('wheel', handleScrollWheel);
+      }
+      _this.node = element;
+    };_this.
+
+    handleScrollMouseDown = function (event) {
+      if (!_this.inner) {
+        return;
+      }
+
+      var _scrollSizeParameters2 = _ScrollContainer.scrollSizeParametersNames[_this.props.axis],offset = _scrollSizeParameters2.offset,size = _scrollSizeParameters2.size,pos = _scrollSizeParameters2.pos,coord = _scrollSizeParameters2.coord;
+
+      var initialCoord = event[coord];
+      var target = window.document;
+      var initialScrollPos = _this.inner[pos];
+      var state = _this.state;
+
+      var mouseMove = function mouseMove(mouseMoveEvent) {
+        if (!_this.inner) {
+          return;
+        }
+
+        var ratio = (_this.inner[size] - _this.inner[offset]) / (_this.inner[offset] - state.size);
+        var delta = (mouseMoveEvent[coord] - initialCoord) * ratio;
+
+        _this.inner[pos] = initialScrollPos + delta;
+
+        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((0, _extends2.default)({}, _this.state, { scrolling: false }));
+      };
+
+      target.addEventListener('mousemove', mouseMove);
+      target.addEventListener('mouseup', mouseUp);
+      _this.setState((0, _extends2.default)({}, _this.state, { scrolling: true }));
+
+      event.preventDefault();
+    };_this.
+
+    handleScrollWheel = function (event, axis) {
+      if (!_this.inner || !(event instanceof WheelEvent) || axis === 'x' && !event.shiftKey) {
+        return;
+      }
+
+      var _scrollSizeParameters3 = _ScrollContainer.scrollSizeParametersNames[axis],offset = _scrollSizeParameters3.offset,size = _scrollSizeParameters3.size,pos = _scrollSizeParameters3.pos;
+
+      var scrollSize = _this.inner[size];
+      var scrollPos = _this.inner[pos];
+      var offsetHeight = _this.inner[offset];
+
+      if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {
+        return;
+      }
+      if (event.deltaY < 0 && scrollPos <= 0) {
+        return;
+      }
+
+      _this.inner[pos] += event.deltaY;
+
+      event.preventDefault();
+    };_this.
+
+    getImmediateScrollState = function () {
+      var _scrollSizeParameters4 = _ScrollContainer.scrollSizeParametersNames[_this.props.axis],pos = _scrollSizeParameters4.pos,size = _scrollSizeParameters4.size,clientSize = _scrollSizeParameters4.clientSize;
+
+      if (!_this.inner || _this.inner[pos] === 0) {
+        return 'begin';
+      }
+
+      if (_this.inner[pos] === _this.inner[size] - _this.inner[clientSize]) {
+        return 'end';
+      }
+
+      return 'middle';
+    };return _this;}var _proto = ScrollBar.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.setHover = function setHover(hover) {if (this.state.active && this.state.hover !== hover) {this.setState((0, _extends2.default)({}, this.state, { hover: hover }));}};(0, _createClass2.default)(ScrollBar, [{ key: "scrollBarState", get: function get() {return this.state.scrollState;} }, { key: "scrollBarStyles", get: function get() {var _cx3;var state = this.state;if (this.props.axis === 'x') {var _cx2;return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarX(this.theme), _ScrollContainer2.globalClasses.scrollbarX, (_cx2 = {}, _cx2[_ScrollContainer2.styles.scrollBarXHover(this.theme)] = state.hover || state.scrolling, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrolling, _cx3));} }]);return ScrollBar;}(_react.default.Component);exports.ScrollBar = ScrollBar;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ScrollBar.tsx"],"names":["ScrollBar","state","defaultScrollbarState","renderMain","props","active","scrollSizeParametersNames","axis","customScrollPos","customScrollSize","classNames","className","styles","scrollBar","theme","scrollBarStyles","scrollBarInvert","invert","inlineStyles","pos","size","refScroll","handleScrollMouseDown","reflow","inner","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScrollStateChange","setState","setInnerElement","element","handleScrollWheel","event","node","addEventListener","passive","removeEventListener","offset","coord","initialCoord","target","window","document","initialScrollPos","mouseMove","mouseMoveEvent","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","scrolling","WheelEvent","shiftKey","offsetHeight","deltaY","clientSize","componentDidMount","componentDidUpdate","render","setHover","hover","scrollBarX","globalClasses","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { getScrollSizeParams } from './ScrollContainer.helpers';\n\nexport type ScrollAxis = 'x' | 'y';\nexport type ScrollBarScrollState = 'begin' | 'middle' | 'end';\n\nexport interface ScrollBarState {\n  active: boolean;\n  hover: boolean;\n  scrolling: boolean;\n  size: number;\n  pos: number;\n  scrollState: ScrollBarScrollState;\n}\n\nexport interface ScrollBarProps {\n  invert: boolean;\n  axis: ScrollAxis;\n  className?: string;\n  onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;\n}\n\nexport class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {\n  private inner: Nullable<HTMLElement>;\n  private theme!: Theme;\n\n  public node: Nullable<HTMLElement>;\n  public state: ScrollBarState = {\n    ...defaultScrollbarState,\n  };\n\n  public componentDidMount() {\n    this.reflow();\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const state = this.state;\n    const props = this.props;\n\n    if (!state.active) {\n      return null;\n    }\n\n    const { customScrollPos, customScrollSize } = scrollSizeParametersNames[this.props.axis];\n\n    const classNames = cx(props.className, styles.scrollBar(this.theme), this.scrollBarStyles, {\n      [styles.scrollBarInvert(this.theme)]: props.invert,\n    });\n\n    const inlineStyles: React.CSSProperties = {\n      [customScrollPos]: state.pos,\n      [customScrollSize]: state.size,\n    };\n\n    return (\n      <div\n        ref={this.refScroll}\n        style={inlineStyles}\n        className={classNames}\n        onMouseDown={this.handleScrollMouseDown}\n        data-tid={`ScrollContainer__ScrollBar-${props.axis}`}\n      />\n    );\n  };\n\n  public reflow = () => {\n    if (!this.inner) {\n      return;\n    }\n\n    const props = this.props;\n    const state = this.state;\n\n    const { scrollSize, scrollPos, scrollActive } = getScrollSizeParams(this.inner, props.axis);\n\n    if (!scrollActive && !state.active) {\n      return;\n    }\n\n    if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {\n      const scrollState = this.getImmediateScrollState();\n\n      if (scrollState !== state.scrollState) {\n        this.props.onScrollStateChange?.(scrollState, props.axis);\n      }\n\n      this.setState({\n        ...this.state,\n        active: scrollActive,\n        size: scrollSize,\n        pos: scrollPos,\n        scrollState,\n      });\n    }\n  };\n\n  public setInnerElement = (inner: Nullable<HTMLElement>) => {\n    this.inner = inner;\n    this.reflow();\n  };\n\n  public setHover(hover: boolean) {\n    if (this.state.active && this.state.hover !== hover) {\n      this.setState({ ...this.state, hover });\n    }\n  }\n\n  public get scrollBarState() {\n    return this.state.scrollState;\n  }\n\n  private get scrollBarStyles() {\n    const state = this.state;\n\n    if (this.props.axis === 'x') {\n      return cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, {\n        [styles.scrollBarXHover(this.theme)]: state.hover || state.scrolling,\n      });\n    }\n\n    return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [styles.scrollBarYHover(this.theme)]: state.hover || state.scrolling,\n    });\n  }\n\n  private refScroll = (element: HTMLElement | null) => {\n    const handleScrollWheel = (event: Event) => this.handleScrollWheel(event, this.props.axis);\n\n    if (!this.node && element) {\n      element.addEventListener('wheel', handleScrollWheel, { passive: false });\n    }\n    if (this.node && !element) {\n      this.node.removeEventListener('wheel', handleScrollWheel);\n    }\n    this.node = element;\n  };\n\n  private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.inner) {\n      return;\n    }\n\n    const { offset, size, pos, coord } = scrollSizeParametersNames[this.props.axis];\n\n    const initialCoord = event[coord];\n    const target: Document = window.document;\n    const initialScrollPos = this.inner[pos];\n    const state = this.state;\n\n    const mouseMove = (mouseMoveEvent: MouseEvent) => {\n      if (!this.inner) {\n        return;\n      }\n\n      const ratio = (this.inner[size] - this.inner[offset]) / (this.inner[offset] - state.size);\n      const delta = (mouseMoveEvent[coord] - initialCoord) * ratio;\n\n      this.inner[pos] = initialScrollPos + delta;\n\n      if (mouseMoveEvent.preventDefault) {\n        mouseMoveEvent.preventDefault();\n      }\n\n      if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\n        (\n          mouseMoveEvent as MouseEvent & {\n            returnValue: boolean;\n          }\n        ).returnValue = false;\n      }\n    };\n\n    const mouseUp = () => {\n      target.removeEventListener('mousemove', mouseMove);\n      target.removeEventListener('mouseup', mouseUp);\n      this.setState({ ...this.state, scrolling: false });\n    };\n\n    target.addEventListener('mousemove', mouseMove);\n    target.addEventListener('mouseup', mouseUp);\n    this.setState({ ...this.state, scrolling: true });\n\n    event.preventDefault();\n  };\n\n  private handleScrollWheel = (event: Event, axis: ScrollAxis) => {\n    if (!this.inner || !(event instanceof WheelEvent) || (axis === 'x' && !event.shiftKey)) {\n      return;\n    }\n\n    const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n    const scrollSize = this.inner[size];\n    const scrollPos = this.inner[pos];\n    const offsetHeight = this.inner[offset];\n\n    if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {\n      return;\n    }\n    if (event.deltaY < 0 && scrollPos <= 0) {\n      return;\n    }\n\n    this.inner[pos] += event.deltaY;\n\n    event.preventDefault();\n  };\n\n  private getImmediateScrollState = (): ScrollBarScrollState => {\n    const { pos, size, clientSize } = scrollSizeParametersNames[this.props.axis];\n\n    if (!this.inner || this.inner[pos] === 0) {\n      return 'begin';\n    }\n\n    if (this.inner[pos] === this.inner[size] - this.inner[clientSize]) {\n      return 'end';\n    }\n\n    return 'middle';\n  };\n}\n"]}

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

@@ -0,0 +1,23 @@
+import { ScrollBarState } from './ScrollBar';
+export declare const MIN_SCROLL_SIZE = 20;
+export declare const defaultScrollbarState: ScrollBarState;
+export declare const scrollSizeParametersNames: {
+    readonly x: {
+        readonly offset: "offsetWidth";
+        readonly size: "scrollWidth";
+        readonly pos: "scrollLeft";
+        readonly coord: "clientX";
+        readonly clientSize: "clientWidth";
+        readonly customScrollPos: "left";
+        readonly customScrollSize: "width";
+    };
+    readonly y: {
+        readonly offset: "offsetHeight";
+        readonly size: "scrollHeight";
+        readonly pos: "scrollTop";
+        readonly coord: "clientY";
+        readonly clientSize: "clientHeight";
+        readonly customScrollPos: "top";
+        readonly customScrollSize: "height";
+    };
+};

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,48 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-export declare type ScrollContainerScrollState = 'top' | 'scroll' | 'bottom';
+import { CommonProps } from '../../internal/CommonWrapper';
+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 {
-    invert?: boolean;
+export interface ScrollContainerProps extends CommonProps {
+    /**
+     * Инвертировать цвет скроллбара
+     * @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;
-}
-export interface ScrollContainerState {
-    scrollActive: boolean;
-    hover: boolean;
-    scrolling: boolean;
-    scrollSize: number;
-    scrollPos: number;
-    scrollState: string;
+    onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;
+    onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;
+    onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void;
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+    /**
+     * Отключение кастомного скролла
+     */
+    disabled?: boolean;
 }
-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
      */
@@ -51,16 +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;
-    private getMarginRight;
 }

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"]}