@skbkontur/react-ui 0.0.0-a25347e958 → 0.0.0-a2ba201dd3

package/cjs/components/ScrollContainer/ScrollBar.js

@@ -1,11 +1,11 @@
 "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 _reactTransitionGroup = require("react-transition-group");
-var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _globalObject = require("@skbkontur/global-object");
 
 
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _Emotion = require("../../lib/theming/Emotion");
+var _isInstanceOf = require("../../lib/isInstanceOf");
 
 var _ScrollContainer = require("./ScrollContainer.constants");
 var _ScrollContainer2 = require("./ScrollContainer.styles");
@@ -31,8 +31,6 @@ var _ScrollContainer3 = require("./ScrollContainer.helpers");var
 
 
 
-
-
 
 
 
@@ -77,7 +75,7 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
       var classNames = (0, _Emotion.cx)(props.className, _ScrollContainer2.styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[
       _ScrollContainer2.styles.scrollBarInvert(_this.theme)] = props.invert, _cx[
-      _ScrollContainer2.styles.visibleScrollBar()] = _this.state.scrollingByMouseWheel || !_this.props.hideScrollBar, _cx));
+      _ScrollContainer2.styles.visibleScrollBar()] = props.isVisible, _cx));
 
 
       var inlineStyles = (_inlineStyles = {}, _inlineStyles[
@@ -87,34 +85,18 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
       return /*#__PURE__*/(
         _react.default.createElement("div", { ref: _this.containerRef, className: _this.scrollBarContainerClassNames, style: props.offset }, /*#__PURE__*/
-        _react.default.createElement(_reactTransitionGroup.CSSTransition, {
-          appear: !props.disableAnimations,
-          exit: !props.disableAnimations,
-          in: _this.state.scrollingByMouseWheel,
-          classNames: {
-            enter: _ScrollContainer2.styles.transition(),
-            enterActive: _ScrollContainer2.styles.transitionActive(),
-            exit: _ScrollContainer2.styles.transitionLeave(),
-            exitActive: _ScrollContainer2.styles.transitionLeaveActive() },
-
-          timeout: {
-            enter: 100,
-            exit: 300 } }, /*#__PURE__*/
-
-
         _react.default.createElement("div", {
           ref: _this.refScroll,
           style: inlineStyles,
           className: classNames,
           onMouseDown: _this.handleScrollMouseDown,
-          "data-tid": "ScrollContainer__ScrollBar-" + props.axis }))));
-
+          "data-tid": "ScrollContainer__ScrollBar-" + props.axis })));
 
 
 
     };_this.
 
-    reflow = function (event) {
+    reflow = function () {
       if (!_this.inner) {
         return;
       }
@@ -131,8 +113,8 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       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);
+        if (state.pos !== scrollPos) {
+          _this.props.onScroll == null ? void 0 : _this.props.onScroll(props.axis, scrollState, state.scrollState);
         }
 
         _this.setState((0, _extends2.default)({},
@@ -142,7 +124,6 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
           pos: scrollPos,
           scrollState: scrollState }));
 
-        event && event.type === 'scroll' && props.hideScrollBar && _this.setScrollingByMouseWheel();
       }
     };_this.
 
@@ -186,6 +167,7 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
 
 
+
 
 
     refScroll = function (element) {
@@ -208,7 +190,7 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       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 target = _globalObject.globalObject.document;
       var initialScrollPos = _this.inner[pos];
       var state = _this.state;
 
@@ -239,21 +221,20 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       };
 
       var mouseUp = function mouseUp() {
-        target.removeEventListener('mousemove', mouseMove);
-        target.removeEventListener('mouseup', mouseUp);
+        target == null ? void 0 : target.removeEventListener('mousemove', mouseMove);
+        target == null ? void 0 : target.removeEventListener('mouseup', mouseUp);
         _this.setState((0, _extends2.default)({}, _this.state, { scrollingByMouseDrag: false }));
-        _this.hideScrollBar();
       };
 
-      target.addEventListener('mousemove', mouseMove);
-      target.addEventListener('mouseup', mouseUp);
+      target == null ? void 0 : target.addEventListener('mousemove', mouseMove);
+      target == null ? void 0 : target.addEventListener('mouseup', mouseUp);
       _this.setState((0, _extends2.default)({}, _this.state, { scrollingByMouseDrag: true }));
 
       event.preventDefault();
     };_this.
 
     handleScrollWheel = function (event, axis) {
-      if (!_this.inner || !(event instanceof WheelEvent) || axis === 'x' && !event.shiftKey) {
+      if (!_this.inner || !(0, _isInstanceOf.isInstanceOf)(event, _globalObject.globalObject.WheelEvent) || axis === 'x' && !event.shiftKey) {
         return;
       }
 
@@ -289,15 +270,4 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       }
 
       return 'middle';
-    };_this.
-
-    setScrollingByMouseWheel = function () {
-      if (!_this.state.scrollingByMouseWheel) {
-        _this.setState({ scrollingByMouseWheel: true });
-      }
-      _this.hideScrollBar();
-    };_this.
-
-    hideScrollBar = (0, _lodash.default)(function () {
-      !_this.state.scrollingByMouseDrag && !_this.state.hover && _this.setState({ scrollingByMouseWheel: false });
-    }, _this.props.hideScrollBarDelay);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 }));if (!hover) {this.props.hideScrollBar && this.hideScrollBar();}}};(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.scrollingByMouseDrag, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx3));} }, { key: "scrollBarContainerClassNames", get: function get() {var axis = this.props.axis;if (axis === 'x') {return (0, _Emotion.cx)(_ScrollContainer2.globalClasses.scrollbarContainerX, _ScrollContainer2.styles.scrollBarContainerX(this.theme));}return (0, _Emotion.cx)(_ScrollContainer2.globalClasses.scrollbarContainerY, _ScrollContainer2.styles.scrollBarContainerY());} }]);return ScrollBar;}(_react.default.Component);exports.ScrollBar = ScrollBar;
+    };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 }));}};_proto.getHover = function getHover() {return this.state.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.scrollingByMouseDrag, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx3));} }, { key: "scrollBarContainerClassNames", get: function get() {var axis = this.props.axis;if (axis === 'x') {return (0, _Emotion.cx)(_ScrollContainer2.globalClasses.scrollbarContainerX, _ScrollContainer2.styles.scrollBarContainerX(this.theme));}return (0, _Emotion.cx)(_ScrollContainer2.globalClasses.scrollbarContainerY, _ScrollContainer2.styles.scrollBarContainerY());} }]);return ScrollBar;}(_react.default.Component);exports.ScrollBar = ScrollBar;

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollBar.tsx"],"names":["ScrollBar","containerRef","React","createRef","state","defaultScrollbarState","renderMain","props","active","scrollSizeParametersNames","axis","customScrollPos","customScrollSize","classNames","className","styles","scrollBar","theme","scrollBarStyles","scrollBarInvert","invert","visibleScrollBar","scrollingByMouseWheel","hideScrollBar","inlineStyles","pos","size","scrollBarContainerClassNames","offset","disableAnimations","enter","transition","enterActive","transitionActive","exit","transitionLeave","exitActive","transitionLeaveActive","refScroll","handleScrollMouseDown","reflow","event","inner","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScrollStateChange","setState","type","setScrollingByMouseWheel","setInnerElement","element","handleScrollWheel","node","addEventListener","passive","removeEventListener","coord","initialCoord","target","window","document","initialScrollPos","mouseMove","mouseMoveEvent","current","remainingScrollingContent","remainingScrollingSpace","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","scrollingByMouseDrag","WheelEvent","shiftKey","offsetHeight","deltaY","clientSize","maxScrollPos","Math","abs","hover","hideScrollBarDelay","componentDidMount","componentDidUpdate","render","setHover","scrollBarX","globalClasses","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","scrollbarContainerX","scrollBarContainerX","scrollbarContainerY","scrollBarContainerY","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport debounce from 'lodash.debounce';\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';\nimport { ScrollContainerProps } from './ScrollContainer';\n\nexport type ScrollAxis = 'x' | 'y';\nexport type ScrollBarScrollState = 'begin' | 'middle' | 'end';\n\nexport interface ScrollBarState {\n  active: boolean;\n  hover: boolean;\n  scrollingByMouseDrag: boolean;\n  size: number; // in percentages\n  pos: number; // in percentages\n  scrollState: ScrollBarScrollState;\n  scrollingByMouseWheel: boolean;\n}\n\nexport interface ScrollBarProps {\n  invert: boolean;\n  axis: ScrollAxis;\n  className?: string;\n  onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;\n  offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];\n  hideScrollBar?: boolean;\n  hideScrollBarDelay?: number;\n  disableAnimations?: boolean;\n}\n\nexport class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {\n  private inner: Nullable<HTMLElement>;\n  private containerRef = React.createRef<HTMLDivElement>();\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      [styles.visibleScrollBar()]: this.state.scrollingByMouseWheel || !this.props.hideScrollBar,\n    });\n\n    const inlineStyles: React.CSSProperties = {\n      [customScrollPos]: `${state.pos}%`,\n      [customScrollSize]: `${state.size}%`,\n    };\n\n    return (\n      <div ref={this.containerRef} className={this.scrollBarContainerClassNames} style={props.offset}>\n        <CSSTransition\n          appear={!props.disableAnimations}\n          exit={!props.disableAnimations}\n          in={this.state.scrollingByMouseWheel}\n          classNames={{\n            enter: styles.transition(),\n            enterActive: styles.transitionActive(),\n            exit: styles.transitionLeave(),\n            exitActive: styles.transitionLeaveActive(),\n          }}\n          timeout={{\n            enter: 100,\n            exit: 300,\n          }}\n        >\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        </CSSTransition>\n      </div>\n    );\n  };\n\n  public reflow = (event?: React.UIEvent<HTMLDivElement>) => {\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      event && event.type === 'scroll' && props.hideScrollBar && this.setScrollingByMouseWheel();\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      if (!hover) {\n        this.props.hideScrollBar && this.hideScrollBar();\n      }\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.scrollingByMouseDrag,\n      });\n    }\n\n    return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [styles.scrollBarYHover(this.theme)]: state.hover || state.scrollingByMouseDrag,\n    });\n  }\n\n  private get scrollBarContainerClassNames() {\n    const { axis } = this.props;\n\n    if (axis === 'x') {\n      return cx(globalClasses.scrollbarContainerX, styles.scrollBarContainerX(this.theme));\n    }\n\n    return cx(globalClasses.scrollbarContainerY, styles.scrollBarContainerY());\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 || !this.containerRef.current) {\n        return;\n      }\n\n      const remainingScrollingContent = this.inner[size] - this.inner[offset];\n      const remainingScrollingSpace = (this.containerRef.current[offset] / 100) * (100 - state.size);\n\n      const ratio = remainingScrollingContent / remainingScrollingSpace;\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, scrollingByMouseDrag: false });\n      this.hideScrollBar();\n    };\n\n    target.addEventListener('mousemove', mouseMove);\n    target.addEventListener('mouseup', mouseUp);\n    this.setState({ ...this.state, scrollingByMouseDrag: 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    // Zoom in Chrome causes problems\n    // https://github.com/skbkontur/retail-ui/pull/2705#issue-806286945\n    const maxScrollPos = this.inner[size] - this.inner[clientSize];\n    if (Math.abs(maxScrollPos - this.inner[pos]) <= 1) {\n      return 'end';\n    }\n\n    return 'middle';\n  };\n\n  private setScrollingByMouseWheel = () => {\n    if (!this.state.scrollingByMouseWheel) {\n      this.setState({ scrollingByMouseWheel: true });\n    }\n    this.hideScrollBar();\n  };\n\n  private readonly hideScrollBar = debounce(() => {\n    !this.state.scrollingByMouseDrag && !this.state.hover && this.setState({ scrollingByMouseWheel: false });\n  }, this.props.hideScrollBarDelay);\n}\n"]}
+{"version":3,"sources":["ScrollBar.tsx"],"names":["ScrollBar","containerRef","React","createRef","state","defaultScrollbarState","renderMain","props","active","scrollSizeParametersNames","axis","customScrollPos","customScrollSize","classNames","className","styles","scrollBar","theme","scrollBarStyles","scrollBarInvert","invert","visibleScrollBar","isVisible","inlineStyles","pos","size","scrollBarContainerClassNames","offset","refScroll","handleScrollMouseDown","reflow","inner","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScroll","setState","setInnerElement","element","handleScrollWheel","event","node","addEventListener","passive","removeEventListener","coord","initialCoord","target","globalObject","document","initialScrollPos","mouseMove","mouseMoveEvent","current","remainingScrollingContent","remainingScrollingSpace","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","scrollingByMouseDrag","WheelEvent","shiftKey","offsetHeight","deltaY","clientSize","maxScrollPos","Math","abs","componentDidMount","componentDidUpdate","render","setHover","hover","getHover","scrollBarX","globalClasses","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","scrollbarContainerX","scrollBarContainerX","scrollbarContainerY","scrollBarContainerY","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\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';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { getScrollSizeParams } from './ScrollContainer.helpers';\nimport { ScrollContainerProps } from './ScrollContainer';\n\nexport type ScrollAxis = 'x' | 'y';\nexport type ScrollBarScrollState = 'begin' | 'middle' | 'end';\n\nexport interface ScrollBarState {\n  active: boolean;\n  hover: boolean;\n  scrollingByMouseDrag: boolean;\n  size: number; // in percentages\n  pos: number; // in percentages\n  scrollState: ScrollBarScrollState;\n}\n\nexport interface ScrollBarProps {\n  invert: boolean;\n  axis: ScrollAxis;\n  className?: string;\n  onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;\n  offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];\n  disableAnimations?: boolean;\n  isVisible: boolean;\n}\n\nexport class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {\n  private inner: Nullable<HTMLElement>;\n  private containerRef = React.createRef<HTMLDivElement>();\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      [styles.visibleScrollBar()]: props.isVisible,\n    });\n\n    const inlineStyles: React.CSSProperties = {\n      [customScrollPos]: `${state.pos}%`,\n      [customScrollSize]: `${state.size}%`,\n    };\n\n    return (\n      <div ref={this.containerRef} className={this.scrollBarContainerClassNames} style={props.offset}>\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      </div>\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 (state.pos !== scrollPos) {\n        this.props.onScroll?.(props.axis, scrollState, state.scrollState);\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 getHover() {\n    return this.state.hover;\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.scrollingByMouseDrag,\n      });\n    }\n\n    return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [styles.scrollBarYHover(this.theme)]: state.hover || state.scrollingByMouseDrag,\n    });\n  }\n\n  private get scrollBarContainerClassNames() {\n    const { axis } = this.props;\n\n    if (axis === 'x') {\n      return cx(globalClasses.scrollbarContainerX, styles.scrollBarContainerX(this.theme));\n    }\n\n    return cx(globalClasses.scrollbarContainerY, styles.scrollBarContainerY());\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 = globalObject.document;\n    const initialScrollPos = this.inner[pos];\n    const state = this.state;\n\n    const mouseMove = (mouseMoveEvent: MouseEvent) => {\n      if (!this.inner || !this.containerRef.current) {\n        return;\n      }\n\n      const remainingScrollingContent = this.inner[size] - this.inner[offset];\n      const remainingScrollingSpace = (this.containerRef.current[offset] / 100) * (100 - state.size);\n\n      const ratio = remainingScrollingContent / remainingScrollingSpace;\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, scrollingByMouseDrag: false });\n    };\n\n    target?.addEventListener('mousemove', mouseMove);\n    target?.addEventListener('mouseup', mouseUp);\n    this.setState({ ...this.state, scrollingByMouseDrag: true });\n\n    event.preventDefault();\n  };\n\n  private handleScrollWheel = (event: Event, axis: ScrollAxis) => {\n    if (!this.inner || !isInstanceOf(event, globalObject.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    // Zoom in Chrome causes problems\n    // https://github.com/skbkontur/retail-ui/pull/2705#issue-806286945\n    const maxScrollPos = this.inner[size] - this.inner[clientSize];\n    if (Math.abs(maxScrollPos - this.inner[pos]) <= 1) {\n      return 'end';\n    }\n\n    return 'middle';\n  };\n}\n"]}

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

@@ -10,8 +10,7 @@ var defaultScrollbarState = {
   active: false,
   // True when scroll is following mouse (mouse down on scroll).
   scrollingByMouseDrag: false,
-  scrollState: 'begin',
-  scrollingByMouseWheel: false };exports.defaultScrollbarState = defaultScrollbarState;
+  scrollState: 'begin' };exports.defaultScrollbarState = defaultScrollbarState;
 
 
 var scrollSizeParametersNames = {

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.constants.ts"],"names":["MIN_SCROLL_SIZE","defaultScrollbarState","size","pos","hover","active","scrollingByMouseDrag","scrollState","scrollingByMouseWheel","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,oBAAoB,EAAE,KAP6B;AAQnDC,EAAAA,WAAW,EAAE,OARsC;AASnDC,EAAAA,qBAAqB,EAAE,KAT4B,EAA9C,C;;;AAYA,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,CAAC,EAAE;AACDC,IAAAA,MAAM,EAAE,aADP;AAEDT,IAAAA,IAAI,EAAE,aAFL;AAGDC,IAAAA,GAAG,EAAE,YAHJ;AAIDS,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;AAEDT,IAAAA,IAAI,EAAE,cAFL;AAGDC,IAAAA,GAAG,EAAE,WAHJ;AAIDS,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  scrollingByMouseDrag: false,\n  scrollState: 'begin',\n  scrollingByMouseWheel: false,\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"]}
+{"version":3,"sources":["ScrollContainer.constants.ts"],"names":["MIN_SCROLL_SIZE","defaultScrollbarState","size","pos","hover","active","scrollingByMouseDrag","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,oBAAoB,EAAE,KAP6B;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  scrollingByMouseDrag: 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

@@ -44,10 +44,15 @@ export interface ScrollContainerProps extends CommonProps {
     offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
     /**
      * Скрывать скроллбар при отсутствии активности пользователя
+     * @deprecated use showScrollBar
      */
     hideScrollBar?: boolean;
     /**
-     * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true`
+     * Показывать скроллбар
+     */
+    showScrollBar?: 'always' | 'scroll' | 'hover' | 'never';
+    /**
+     * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true` или `showScrollBar = 'scroll' | 'hover'`
      */
     hideScrollBarDelay?: number;
     /**
@@ -59,9 +64,15 @@ export declare const ScrollContainerDataTids: {
     readonly root: "ScrollContainer__root";
     readonly inner: "ScrollContainer__inner";
 };
-declare type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'hideScrollBar' | 'disableAnimations' | 'hideScrollBarDelay'>>;
-export declare class ScrollContainer extends React.Component<ScrollContainerProps> {
+declare type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'hideScrollBar' | 'disableAnimations' | 'hideScrollBarDelay' | 'showScrollBar'>>;
+interface ScrollContainerState {
+    isScrollBarXVisible: boolean;
+    isScrollBarYVisible: boolean;
+    isHovered: boolean;
+}
+export declare class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     inner: Nullable<HTMLElement>;
     static propTypes: {
         invert: PropTypes.Requireable<boolean>;
@@ -76,6 +87,8 @@ export declare class ScrollContainer extends React.Component<ScrollContainerProp
     private scrollX;
     private scrollY;
     private setRootNode;
+    private initialIsScrollBarVisible;
+    state: ScrollContainerState;
     componentDidMount(): void;
     componentDidUpdate(prevProps: ScrollContainerProps): void;
     render: () => React.ReactNode;
@@ -103,10 +116,13 @@ export declare class ScrollContainer extends React.Component<ScrollContainerProp
     hasScrollBar(axis: ScrollAxis): boolean;
     private renderScrollbar;
     private handleScrollStateChange;
+    private handleScroll;
     private refScrollBarY;
     private refScrollBarX;
     private refInner;
     private handleNativeScroll;
+    private showScrollBarOnMouseWheel;
+    private readonly hideScrollBar;
     private handleInnerScrollWheel;
     private handleMouseMove;
     private handleMouseLeave;

package/cjs/components/ScrollContainer/ScrollContainer.js

@@ -1,6 +1,9 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ScrollContainerDataTids = 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 _globalObject = require("@skbkontur/global-object");
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
+var _isInstanceOf = require("../../lib/isInstanceOf");
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 var _CommonWrapper = require("../../internal/CommonWrapper");
 
@@ -69,6 +72,11 @@ var _ScrollBar = require("./ScrollBar");var _class, _class2, _temp;function _get
 
 
 
+
+
+
+
+
 
 
 
@@ -86,6 +94,18 @@ var ScrollContainerDataTids = {
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 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.
@@ -108,6 +128,8 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
 
 
 
+
+
 
 
 
@@ -116,6 +138,21 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
 
 
 
+    initialIsScrollBarVisible = !_this.getProps().hideScrollBar && _this.getProps().showScrollBar === 'always';_this.
+
+    state = {
+      isScrollBarXVisible: _this.initialIsScrollBarVisible,
+      isScrollBarYVisible: _this.initialIsScrollBarVisible,
+      isHovered: false };_this.
+
+
+
+
+
+
+
+
+
 
 
 
@@ -242,21 +279,21 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
 
 
     renderScrollbar = function (axis) {
-      var refScrollBar = axis === 'x' ? _this.refScrollBarX : _this.refScrollBarY;
-      var _this$getProps = _this.getProps(),offsetY = _this$getProps.offsetY,offsetX = _this$getProps.offsetX,invert = _this$getProps.invert,hideScrollBar = _this$getProps.hideScrollBar,disableAnimations = _this$getProps.disableAnimations,hideScrollBarDelay = _this$getProps.hideScrollBarDelay;
-
-      var offset = axis === 'x' ? offsetX : offsetY;
+      var _this$getProps = _this.getProps(),offsetY = _this$getProps.offsetY,offsetX = _this$getProps.offsetX,invert = _this$getProps.invert,disableAnimations = _this$getProps.disableAnimations;
+      var isAxisX = axis === 'x';
+      var refScrollBar = isAxisX ? _this.refScrollBarX : _this.refScrollBarY;
+      var offset = isAxisX ? offsetX : offsetY;
+      var isVisible = isAxisX ? _this.state.isScrollBarXVisible : _this.state.isScrollBarYVisible;
 
       return /*#__PURE__*/(
         _react.default.createElement(_ScrollBar.ScrollBar, {
           axis: axis,
           ref: refScrollBar,
           invert: invert,
-          onScrollStateChange: _this.handleScrollStateChange,
+          onScroll: _this.handleScroll,
           offset: offset,
-          hideScrollBar: hideScrollBar,
           disableAnimations: disableAnimations,
-          hideScrollBarDelay: hideScrollBarDelay }));
+          isVisible: isVisible }));
 
 
     };_this.
@@ -279,6 +316,18 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
       _this.props.onScrollStateChangeY == null ? void 0 : _this.props.onScrollStateChangeY(scrollYState);
     };_this.
 
+    handleScroll = function (
+    axis,
+    scrollState,
+    prevScrollState)
+    {
+      if (scrollState !== prevScrollState) {
+        _this.handleScrollStateChange(scrollState, axis);
+      }
+      var _this$getProps2 = _this.getProps(),hideScrollBar = _this$getProps2.hideScrollBar,showScrollBar = _this$getProps2.showScrollBar;
+      (hideScrollBar || showScrollBar === 'scroll') && _this.showScrollBarOnMouseWheel(axis);
+    };_this.
+
     refScrollBarY = function (scrollbar) {
       _this.scrollY = scrollbar;
     };_this.
@@ -298,8 +347,8 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
     };_this.
 
     handleNativeScroll = function (event) {var _this$scrollY, _this$scrollX;
-      (_this$scrollY = _this.scrollY) == null ? void 0 : _this$scrollY.reflow(event);
-      (_this$scrollX = _this.scrollX) == null ? void 0 : _this$scrollX.reflow(event);
+      (_this$scrollY = _this.scrollY) == null ? void 0 : _this$scrollY.reflow();
+      (_this$scrollX = _this.scrollX) == null ? void 0 : _this$scrollX.reflow();
 
       _this.props.onScroll == null ? void 0 : _this.props.onScroll(event);
       if (_this.getProps().preventWindowScroll) {
@@ -309,8 +358,33 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
       LayoutEvents.emit();
     };_this.
 
+    showScrollBarOnMouseWheel = function (axis) {
+      var isScrollBarVisible = axis === 'x' ? _this.state.isScrollBarXVisible : _this.state.isScrollBarYVisible;
+      if (!isScrollBarVisible) {
+        axis === 'x' ? _this.setState({ isScrollBarXVisible: true }) : _this.setState({ isScrollBarYVisible: true });
+      }
+      _this.hideScrollBar(axis);
+    };_this.
+
+    hideScrollBar = (0, _lodash.default)(function (axis) {var _this$scrollX2, _this$scrollY2;
+      if (_this.state.isHovered) {
+        return;
+      }
+      var isScrollBarXHovered = (_this$scrollX2 = _this.scrollX) == null ? void 0 : _this$scrollX2.getHover();
+      var isScrollBarYHovered = (_this$scrollY2 = _this.scrollY) == null ? void 0 : _this$scrollY2.getHover();
+      if (axis === 'both') {
+        !isScrollBarXHovered && !isScrollBarYHovered ?
+        _this.setState({ isScrollBarXVisible: false, isScrollBarYVisible: false }) :
+        _this.hideScrollBar('both');
+      } else if (axis === 'x') {
+        !isScrollBarXHovered ? _this.setState({ isScrollBarXVisible: false }) : _this.hideScrollBar('x');
+      } else {
+        !isScrollBarYHovered ? _this.setState({ isScrollBarYVisible: false }) : _this.hideScrollBar('y');
+      }
+    }, _this.getProps().hideScrollBarDelay);_this.
+
     handleInnerScrollWheel = function (event) {
-      if (!_this.inner || !(event instanceof WheelEvent)) {
+      if (!_this.inner || !(0, _isInstanceOf.isInstanceOf)(event, _globalObject.globalObject.WheelEvent)) {
         return;
       }
 
@@ -330,23 +404,31 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
       }
     };_this.
 
-    handleMouseMove = function (event) {var _this$scrollY2, _this$scrollX2;
+    handleMouseMove = function (event) {var _this$scrollY3, _this$scrollX3;
       var right = (0, _getDOMRect.getDOMRect)(event.currentTarget).right - event.pageX;
       var bottom = (0, _getDOMRect.getDOMRect)(event.currentTarget).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$scrollY3 = _this.scrollY) == null ? void 0 : _this$scrollY3.setHover(right <= 12);
+      (_this$scrollX3 = _this.scrollX) == null ? void 0 : _this$scrollX3.setHover(right >= 12 && bottom <= 12);
+
+      _this.getProps().showScrollBar === 'hover' &&
+      !_this.state.isHovered &&
+      _this.setState({ isScrollBarXVisible: true, isScrollBarYVisible: true, isHovered: true });
     };_this.
 
-    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);
+    handleMouseLeave = function () {var _this$scrollY4, _this$scrollX4;
+      (_this$scrollY4 = _this.scrollY) == null ? void 0 : _this$scrollY4.setHover(false);
+      (_this$scrollX4 = _this.scrollX) == null ? void 0 : _this$scrollX4.setHover(false);
+      if (_this.getProps().showScrollBar === 'hover') {
+        _this.setState({ isHovered: false });
+        _this.hideScrollBar('both');
+      }
     };_this.
 
-    updateInnerElement = function () {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);
-    };return _this;}var _proto = ScrollContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.updateInnerElement();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var preventWindowScroll = this.getProps().preventWindowScroll;if (this.inner) {if (prevProps.preventWindowScroll && !preventWindowScroll) {this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);}if (!prevProps.preventWindowScroll && preventWindowScroll) {this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });}}if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {this.updateInnerElement();}}; /**
+    updateInnerElement = function () {var _this$scrollX5, _this$scrollY5;
+      (_this$scrollX5 = _this.scrollX) == null ? void 0 : _this$scrollX5.setInnerElement(_this.inner);
+      (_this$scrollY5 = _this.scrollY) == null ? void 0 : _this$scrollY5.setInnerElement(_this.inner);
+    };return _this;}var _proto = ScrollContainer.prototype;_proto.componentDidMount = function componentDidMount() {this.updateInnerElement();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {var preventWindowScroll = this.getProps().preventWindowScroll;if (this.inner) {if (prevProps.preventWindowScroll && !preventWindowScroll) {this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);}if (!prevProps.preventWindowScroll && preventWindowScroll) {this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });}}if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {this.updateInnerElement();}if (prevProps.showScrollBar !== this.props.showScrollBar) {if (this.props.showScrollBar === 'always') {this.setState({ isScrollBarXVisible: true, isScrollBarYVisible: true });} else if (this.props.showScrollBar === 'never') {this.setState({ isScrollBarXVisible: false, isScrollBarYVisible: false });}}}; /**
    * @public
    * @param {Element} 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);} /**
@@ -357,4 +439,4 @@ ScrollContainer = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE_
    * @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, hideScrollBar: false, disableAnimations: _currentEnvironment.isTestEnv, hideScrollBarDelay: 500 }, _temp)) || _class;exports.ScrollContainer = ScrollContainer;
+   */;_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.displayName = '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, hideScrollBar: false, disableAnimations: _currentEnvironment.isTestEnv, hideScrollBarDelay: 500, showScrollBar: 'always' }, _temp)) || _class;exports.ScrollContainer = ScrollContainer;