@skbkontur/react-ui 0.0.0-ecefada396 → 0.0.0-ee57da3e1e

package/components/ScrollContainer/ScrollContainer/ScrollContainer.js

@@ -1,14 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { isIE11 } from "../../../lib/client";
+import { rootNode } from "../../../lib/rootNode";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTestEnv } from "../../../lib/currentEnvironment";
 import { styles, globalClasses } from "../ScrollContainer.styles";
 import { scrollSizeParametersNames } from "../ScrollContainer.constants";
 import { getScrollYOffset, convertScrollbarXScrollState, convertScrollbarYScrollState } from "../ScrollContainer.helpers";
 import { ScrollBar } from "../ScrollBar";
-export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
+export var ScrollContainerDataTids = {
+  root: 'ScrollContainer__root',
+  inner: 'ScrollContainer__inner'
+};
+export var ScrollContainer = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ScrollContainer, _React$Component);
 
   function ScrollContainer() {
@@ -19,9 +32,7 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.scrollX = void 0;
-    _this.scrollY = void 0;
-    _this.inner = void 0;
+    _this.getProps = createPropsGetter(ScrollContainer.defaultProps);
 
     _this.render = function () {
       var props = _this.props;
@@ -31,7 +42,7 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
       }
 
       var innerStyle = {
-        scrollBehavior: props.scrollBehaviour,
+        scrollBehavior: _this.getProps().scrollBehaviour,
         maxHeight: props.maxHeight,
         maxWidth: props.maxWidth
       };
@@ -40,26 +51,43 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
 
       var scrollbarX = _this.renderScrollbar('x');
 
-      return /*#__PURE__*/React.createElement(CommonWrapper, _this.props, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this.setRootNode
+      }, _this.props), /*#__PURE__*/React.createElement("div", {
+        "data-tid": ScrollContainerDataTids.root,
         className: styles.root(),
         onMouseMove: _this.handleMouseMove,
         onMouseLeave: _this.handleMouseLeave
       }, scrollbarY, scrollbarX, /*#__PURE__*/React.createElement("div", {
         style: innerStyle,
         ref: _this.refInner,
-        className: cx(styles.inner(), globalClasses.inner),
-        "data-tid": "ScrollContainer__inner",
+        className: cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11()),
+        "data-tid": ScrollContainerDataTids.inner,
         onScroll: _this.handleNativeScroll
       }, props.children)));
     };
 
     _this.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;
       return /*#__PURE__*/React.createElement(ScrollBar, {
         axis: axis,
         ref: refScrollBar,
-        invert: _this.props.invert,
-        onScrollStateChange: _this.handleScrollStateChange
+        invert: invert,
+        onScrollStateChange: _this.handleScrollStateChange,
+        offset: offset,
+        hideScrollBar: hideScrollBar,
+        disableAnimations: disableAnimations,
+        hideScrollBarDelay: hideScrollBarDelay
       });
     };
 
@@ -88,7 +116,7 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.refInner = function (element) {
-      if (!_this.inner && element && _this.props.preventWindowScroll) {
+      if (!_this.inner && element && _this.getProps().preventWindowScroll) {
         element.addEventListener('wheel', _this.handleInnerScrollWheel, {
           passive: false
         });
@@ -102,13 +130,13 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleNativeScroll = function (event) {
-      var _this$scrollX, _this$scrollY;
+      var _this$scrollY, _this$scrollX;
 
-      (_this$scrollX = _this.scrollX) == null ? void 0 : _this$scrollX.reflow();
-      (_this$scrollY = _this.scrollY) == null ? void 0 : _this$scrollY.reflow();
+      (_this$scrollY = _this.scrollY) == null ? void 0 : _this$scrollY.reflow(event);
+      (_this$scrollX = _this.scrollX) == null ? void 0 : _this$scrollX.reflow(event);
       _this.props.onScroll == null ? void 0 : _this.props.onScroll(event);
 
-      if (_this.props.preventWindowScroll) {
+      if (_this.getProps().preventWindowScroll) {
         event.preventDefault();
         return;
       }
@@ -144,8 +172,8 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
     _this.handleMouseMove = function (event) {
       var _this$scrollY2, _this$scrollX2;
 
-      var right = event.currentTarget.getBoundingClientRect().right - event.pageX;
-      var bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;
+      var right = getDOMRect(event.currentTarget).right - event.pageX;
+      var bottom = 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);
     };
@@ -157,34 +185,44 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
       (_this$scrollX3 = _this.scrollX) == null ? void 0 : _this$scrollX3.setHover(false);
     };
 
+    _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() {
-    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);
+    this.updateInnerElement();
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var preventWindowScroll = this.getProps().preventWindowScroll;
+
     if (this.inner) {
-      if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {
+      if (prevProps.preventWindowScroll && !preventWindowScroll) {
         this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);
       }
 
-      if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {
+      if (!prevProps.preventWindowScroll && preventWindowScroll) {
         this.inner.addEventListener('wheel', this.handleInnerScrollWheel, {
           passive: false
         });
       }
     }
+
+    if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {
+      this.updateInnerElement();
+    }
   };
   /**
   * @public
-  * @param {HTMLElement} element
+  * @param {Element} element
   */
 
 
@@ -254,18 +292,18 @@ export var ScrollContainer = /*#__PURE__*/function (_React$Component) {
   };
 
   return ScrollContainer;
-}(React.Component);
-ScrollContainer.__KONTUR_REACT_UI__ = 'ScrollContainer';
-ScrollContainer.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'ScrollContainer', _class2.propTypes = {
   invert: PropTypes.bool,
   maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),
   preventWindowScroll: PropTypes.bool,
   onScrollStateChange: PropTypes.func
-};
-ScrollContainer.defaultProps = {
+}, _class2.defaultProps = {
   invert: false,
   scrollBehaviour: 'auto',
-  preventWindowScroll: false
-};
+  preventWindowScroll: false,
+  hideScrollBar: false,
+  disableAnimations: isTestEnv,
+  hideScrollBarDelay: 500
+}, _temp)) || _class;

package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.tsx"],"names":["React","PropTypes","LayoutEvents","CommonWrapper","cx","styles","globalClasses","scrollSizeParametersNames","getScrollYOffset","convertScrollbarXScrollState","convertScrollbarYScrollState","ScrollBar","ScrollContainer","scrollX","scrollY","inner","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","root","handleMouseMove","handleMouseLeave","refInner","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","invert","handleScrollStateChange","scrollState","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","emit","WheelEvent","shiftKey","hasScrollBar","pos","size","offset","deltaY","right","currentTarget","getBoundingClientRect","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n  getScrollYOffset,\n  convertScrollbarXScrollState,\n  convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\nexport interface ScrollContainerProps extends CommonProps {\n  /**\n   * Инвертировать цвет скроллбара\n   * @default false\n   */\n  invert: boolean;\n  maxHeight?: React.CSSProperties['maxHeight'];\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * @default false\n   */\n  preventWindowScroll: boolean;\n  /**\n   * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n   * @default 'auto'\n   */\n  scrollBehaviour?: ScrollBehaviour;\n  onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n  onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n  onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n  /**\n   * Отключение кастомного скролла\n   */\n  disabled?: boolean;\n}\n\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n  public static propTypes = {\n    invert: PropTypes.bool,\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n    preventWindowScroll: PropTypes.bool,\n    onScrollStateChange: PropTypes.func,\n  };\n\n  public static defaultProps = {\n    invert: false,\n    scrollBehaviour: 'auto',\n    preventWindowScroll: false,\n  };\n\n  private scrollX: Nullable<ScrollBar>;\n  private scrollY: Nullable<ScrollBar>;\n  private inner: Nullable<HTMLElement>;\n\n  public componentDidMount() {\n    this.scrollX?.setInnerElement(this.inner);\n    this.scrollY?.setInnerElement(this.inner);\n  }\n\n  public componentDidUpdate(prevProps: ScrollContainerProps) {\n    if (this.inner) {\n      if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\n        this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n      }\n      if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\n        this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n      }\n    }\n  }\n\n  public render = () => {\n    const props = this.props;\n\n    if (this.props.disabled) {\n      return this.props.children;\n    }\n\n    const innerStyle: React.CSSProperties = {\n      scrollBehavior: props.scrollBehaviour,\n      maxHeight: props.maxHeight,\n      maxWidth: props.maxWidth,\n    };\n\n    const scrollbarY = this.renderScrollbar('y');\n    const scrollbarX = this.renderScrollbar('x');\n\n    return (\n      <CommonWrapper {...this.props}>\n        <div className={styles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\n          {scrollbarY}\n          {scrollbarX}\n          <div\n            style={innerStyle}\n            ref={this.refInner}\n            className={cx(styles.inner(), globalClasses.inner)}\n            data-tid=\"ScrollContainer__inner\"\n            onScroll={this.handleNativeScroll}\n          >\n            {props.children}\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   * @param {HTMLElement} element\n   */\n  public scrollTo(element: Nullable<HTMLElement>) {\n    if (!element || !this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = element.offsetLeft;\n    this.inner.scrollTop = getScrollYOffset(element, this.inner);\n  }\n\n  /**\n   * @public\n   */\n  public scrollToTop() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToBottom() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToLeft() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollLeft = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToRight() {\n    if (!this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n  }\n\n  private hasScrollBar(axis: ScrollAxis) {\n    if (!this.inner) {\n      return false;\n    }\n\n    return axis === 'x'\n      ? this.inner.offsetWidth < this.inner.scrollWidth\n      : this.inner.offsetHeight < this.inner.scrollHeight;\n  }\n\n  private renderScrollbar = (axis: ScrollAxis) => {\n    const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n\n    return (\n      <ScrollBar\n        axis={axis}\n        ref={refScrollBar}\n        invert={this.props.invert}\n        onScrollStateChange={this.handleScrollStateChange}\n      />\n    );\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n    if (!this.scrollY || !this.scrollX) {\n      return;\n    }\n\n    if (axis === 'x') {\n      const scrollXState = convertScrollbarXScrollState(scrollState);\n\n      this.props.onScrollStateChangeX?.(scrollXState);\n      return;\n    }\n\n    const scrollYState = convertScrollbarYScrollState(scrollState);\n\n    this.props.onScrollStateChange?.(scrollYState);\n    this.props.onScrollStateChangeY?.(scrollYState);\n  };\n\n  private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollY = scrollbar;\n  };\n\n  private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollX = scrollbar;\n  };\n\n  private refInner = (element: HTMLElement | null) => {\n    if (!this.inner && element && this.props.preventWindowScroll) {\n      element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n    }\n    if (this.inner && !element) {\n      this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n    }\n    this.inner = element;\n  };\n\n  private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    this.scrollX?.reflow();\n    this.scrollY?.reflow();\n\n    this.props.onScroll?.(event);\n    if (this.props.preventWindowScroll) {\n      event.preventDefault();\n      return;\n    }\n    LayoutEvents.emit();\n  };\n\n  private handleInnerScrollWheel = (event: Event) => {\n    if (!this.inner || !(event instanceof WheelEvent)) {\n      return;\n    }\n\n    const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n    if (this.hasScrollBar(axis)) {\n      const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n      if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n        event.preventDefault();\n        return false;\n      }\n      if (event.deltaY < 0 && this.inner[pos] <= 0) {\n        event.preventDefault();\n        return false;\n      }\n    }\n  };\n\n  private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\n    const bottom = event.currentTarget.getBoundingClientRect().bottom - event.pageY;\n\n    this.scrollY?.setHover(right <= 12);\n    this.scrollX?.setHover(right >= 12 && bottom <= 12);\n  };\n\n  private handleMouseLeave = () => {\n    this.scrollY?.setHover(false);\n    this.scrollX?.setHover(false);\n  };\n}\n"]}
+{"version":3,"sources":["ScrollContainer.tsx"],"names":["React","PropTypes","LayoutEvents","CommonWrapper","cx","isIE11","rootNode","getDOMRect","createPropsGetter","isTestEnv","styles","globalClasses","scrollSizeParametersNames","getScrollYOffset","convertScrollbarXScrollState","convertScrollbarYScrollState","ScrollBar","ScrollContainerDataTids","root","inner","ScrollContainer","getProps","defaultProps","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","setRootNode","handleMouseMove","handleMouseLeave","refInner","innerIE11","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","offsetY","offsetX","invert","hideScrollBar","disableAnimations","hideScrollBarDelay","offset","handleScrollStateChange","scrollState","scrollY","scrollX","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","emit","WheelEvent","shiftKey","hasScrollBar","pos","size","deltaY","right","currentTarget","pageX","bottom","pageY","setHover","updateInnerElement","setInnerElement","componentDidMount","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","string","number","oneOf","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { scrollSizeParametersNames } from './ScrollContainer.constants';\nimport {\n  getScrollYOffset,\n  convertScrollbarXScrollState,\n  convertScrollbarYScrollState,\n} from './ScrollContainer.helpers';\nimport { ScrollAxis, ScrollBar, ScrollBarScrollState } from './ScrollBar';\n\nexport type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';\nexport type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';\nexport type ScrollContainerScrollState = ScrollContainerScrollStateY; // deprecated\nexport type ScrollBehaviour = 'auto' | 'smooth';\n\ntype OffsetCSSPropsY = 'top' | 'right' | 'bottom';\ntype OffsetCSSPropsX = 'right' | 'bottom' | 'left';\n\nexport interface ScrollContainerProps extends CommonProps {\n  /**\n   * Инвертировать цвет скроллбара\n   * @default false\n   */\n  invert?: boolean;\n  maxHeight?: React.CSSProperties['maxHeight'];\n  maxWidth?: React.CSSProperties['maxWidth'];\n  /**\n   * @default false\n   */\n  preventWindowScroll?: boolean;\n  /**\n   * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\n   * @default 'auto'\n   */\n  scrollBehaviour?: ScrollBehaviour;\n  onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;\n  onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;\n  onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void; // deprecated\n  onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\n  /**\n   * Отключение кастомного скролла\n   */\n  disabled?: boolean;\n  /**\n   * Смещение вертикального скроллбара\n   */\n  offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;\n  /**\n   * Смещение горизонтального скроллбара\n   */\n  offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;\n  /**\n   * Скрывать скроллбар при отсутствии активности пользователя\n   */\n  hideScrollBar?: boolean;\n  /**\n   * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true`\n   */\n  hideScrollBarDelay?: number;\n  /**\n   * Отключить анимации\n   */\n  disableAnimations?: boolean;\n}\n\nexport const ScrollContainerDataTids = {\n  root: 'ScrollContainer__root',\n  inner: 'ScrollContainer__inner',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    ScrollContainerProps,\n    'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'hideScrollBar' | 'disableAnimations' | 'hideScrollBarDelay'\n  >\n>;\n\n@rootNode\nexport class ScrollContainer extends React.Component<ScrollContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'ScrollContainer';\n\n  public static propTypes = {\n    invert: PropTypes.bool,\n    maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\n    preventWindowScroll: PropTypes.bool,\n    onScrollStateChange: PropTypes.func,\n  };\n\n  public static defaultProps: DefaultProps = {\n    invert: false,\n    scrollBehaviour: 'auto',\n    preventWindowScroll: false,\n    hideScrollBar: false,\n    disableAnimations: isTestEnv,\n    hideScrollBarDelay: 500,\n  };\n\n  private getProps = createPropsGetter(ScrollContainer.defaultProps);\n\n  private scrollX: Nullable<ScrollBar>;\n  private scrollY: Nullable<ScrollBar>;\n  private inner: Nullable<HTMLElement>;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.updateInnerElement();\n  }\n\n  public componentDidUpdate(prevProps: ScrollContainerProps) {\n    const preventWindowScroll = this.getProps().preventWindowScroll;\n    if (this.inner) {\n      if (prevProps.preventWindowScroll && !preventWindowScroll) {\n        this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n      }\n      if (!prevProps.preventWindowScroll && preventWindowScroll) {\n        this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n      }\n    }\n\n    if (prevProps.disabled !== this.props.disabled && !this.props.disabled) {\n      this.updateInnerElement();\n    }\n  }\n\n  public render = () => {\n    const props = this.props;\n\n    if (this.props.disabled) {\n      return this.props.children;\n    }\n\n    const innerStyle: React.CSSProperties = {\n      scrollBehavior: this.getProps().scrollBehaviour,\n      maxHeight: props.maxHeight,\n      maxWidth: props.maxWidth,\n    };\n\n    const scrollbarY = this.renderScrollbar('y');\n    const scrollbarX = this.renderScrollbar('x');\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div\n          data-tid={ScrollContainerDataTids.root}\n          className={styles.root()}\n          onMouseMove={this.handleMouseMove}\n          onMouseLeave={this.handleMouseLeave}\n        >\n          {scrollbarY}\n          {scrollbarX}\n          <div\n            style={innerStyle}\n            ref={this.refInner}\n            className={cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11())}\n            data-tid={ScrollContainerDataTids.inner}\n            onScroll={this.handleNativeScroll}\n          >\n            {props.children}\n          </div>\n        </div>\n      </CommonWrapper>\n    );\n  };\n\n  /**\n   * @public\n   * @param {Element} element\n   */\n  public scrollTo(element: Nullable<HTMLElement>) {\n    if (!element || !this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = element.offsetLeft;\n    this.inner.scrollTop = getScrollYOffset(element, this.inner);\n  }\n\n  /**\n   * @public\n   */\n  public scrollToTop() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToBottom() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToLeft() {\n    if (!this.inner) {\n      return;\n    }\n    this.inner.scrollLeft = 0;\n  }\n\n  /**\n   * @public\n   */\n  public scrollToRight() {\n    if (!this.inner) {\n      return;\n    }\n\n    this.inner.scrollLeft = this.inner.scrollWidth - this.inner.offsetWidth;\n  }\n\n  private hasScrollBar(axis: ScrollAxis) {\n    if (!this.inner) {\n      return false;\n    }\n\n    return axis === 'x'\n      ? this.inner.offsetWidth < this.inner.scrollWidth\n      : this.inner.offsetHeight < this.inner.scrollHeight;\n  }\n\n  private renderScrollbar = (axis: ScrollAxis) => {\n    const refScrollBar = axis === 'x' ? this.refScrollBarX : this.refScrollBarY;\n    const { offsetY, offsetX, invert, hideScrollBar, disableAnimations, hideScrollBarDelay } = this.getProps();\n\n    const offset = axis === 'x' ? offsetX : offsetY;\n\n    return (\n      <ScrollBar\n        axis={axis}\n        ref={refScrollBar}\n        invert={invert}\n        onScrollStateChange={this.handleScrollStateChange}\n        offset={offset}\n        hideScrollBar={hideScrollBar}\n        disableAnimations={disableAnimations}\n        hideScrollBarDelay={hideScrollBarDelay}\n      />\n    );\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollBarScrollState, axis: ScrollAxis) => {\n    if (!this.scrollY || !this.scrollX) {\n      return;\n    }\n\n    if (axis === 'x') {\n      const scrollXState = convertScrollbarXScrollState(scrollState);\n\n      this.props.onScrollStateChangeX?.(scrollXState);\n      return;\n    }\n\n    const scrollYState = convertScrollbarYScrollState(scrollState);\n\n    this.props.onScrollStateChange?.(scrollYState);\n    this.props.onScrollStateChangeY?.(scrollYState);\n  };\n\n  private refScrollBarY = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollY = scrollbar;\n  };\n\n  private refScrollBarX = (scrollbar: Nullable<ScrollBar>) => {\n    this.scrollX = scrollbar;\n  };\n\n  private refInner = (element: HTMLElement | null) => {\n    if (!this.inner && element && this.getProps().preventWindowScroll) {\n      element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\n    }\n    if (this.inner && !element) {\n      this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\n    }\n    this.inner = element;\n  };\n\n  private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\n    this.scrollY?.reflow(event);\n    this.scrollX?.reflow(event);\n\n    this.props.onScroll?.(event);\n    if (this.getProps().preventWindowScroll) {\n      event.preventDefault();\n      return;\n    }\n    LayoutEvents.emit();\n  };\n\n  private handleInnerScrollWheel = (event: Event) => {\n    if (!this.inner || !(event instanceof WheelEvent)) {\n      return;\n    }\n\n    const axis: ScrollAxis = event.shiftKey ? 'x' : 'y';\n\n    if (this.hasScrollBar(axis)) {\n      const { pos, size, offset } = scrollSizeParametersNames[axis];\n\n      if (event.deltaY > 0 && this.inner[size] <= this.inner[pos] + this.inner[offset]) {\n        event.preventDefault();\n        return false;\n      }\n      if (event.deltaY < 0 && this.inner[pos] <= 0) {\n        event.preventDefault();\n        return false;\n      }\n    }\n  };\n\n  private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    const right = getDOMRect(event.currentTarget).right - event.pageX;\n    const bottom = getDOMRect(event.currentTarget).bottom - event.pageY;\n\n    this.scrollY?.setHover(right <= 12);\n    this.scrollX?.setHover(right >= 12 && bottom <= 12);\n  };\n\n  private handleMouseLeave = () => {\n    this.scrollY?.setHover(false);\n    this.scrollX?.setHover(false);\n  };\n\n  private updateInnerElement = () => {\n    this.scrollX?.setInnerElement(this.inner);\n    this.scrollY?.setInnerElement(this.inner);\n  };\n}\n"]}

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

@@ -6,8 +6,9 @@ export var defaultScrollbarState = {
   hover: false,
   active: false,
   // True when scroll is following mouse (mouse down on scroll).
-  scrolling: false,
-  scrollState: 'begin'
+  scrollingByMouseDrag: false,
+  scrollState: 'begin',
+  scrollingByMouseWheel: false
 };
 export var scrollSizeParametersNames = {
   x: {

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

@@ -1 +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":";;AAEA,OAAO,IAAMA,eAAe,GAAG,EAAxB;;AAEP,OAAO,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;;;AAWP,OAAO,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","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"]}
+{"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":";;AAEA,OAAO,IAAMA,eAAe,GAAG,EAAxB;;AAEP,OAAO,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;;;AAYP,OAAO,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","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"]}

package/components/ScrollContainer/ScrollContainer.d.ts

@@ -6,18 +6,20 @@ 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';
+declare type OffsetCSSPropsY = 'top' | 'right' | 'bottom';
+declare type OffsetCSSPropsX = 'right' | 'bottom' | 'left';
 export interface ScrollContainerProps extends CommonProps {
     /**
      * Инвертировать цвет скроллбара
      * @default false
      */
-    invert: boolean;
+    invert?: boolean;
     maxHeight?: React.CSSProperties['maxHeight'];
     maxWidth?: React.CSSProperties['maxWidth'];
     /**
      * @default false
      */
-    preventWindowScroll: boolean;
+    preventWindowScroll?: boolean;
     /**
      * Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
      * @default 'auto'
@@ -31,7 +33,32 @@ export interface ScrollContainerProps extends CommonProps {
      * Отключение кастомного скролла
      */
     disabled?: boolean;
+    /**
+     * Смещение вертикального скроллбара
+     */
+    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
+    /**
+     * Смещение горизонтального скроллбара
+     */
+    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
+    /**
+     * Скрывать скроллбар при отсутствии активности пользователя
+     */
+    hideScrollBar?: boolean;
+    /**
+     * Задержка перед скрытием скроллбара, ms. Работает только если `hideScrollBar = true`
+     */
+    hideScrollBarDelay?: number;
+    /**
+     * Отключить анимации
+     */
+    disableAnimations?: boolean;
 }
+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> {
     static __KONTUR_REACT_UI__: string;
     static propTypes: {
@@ -42,20 +69,18 @@ export declare class ScrollContainer extends React.Component<ScrollContainerProp
         preventWindowScroll: PropTypes.Requireable<boolean>;
         onScrollStateChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static defaultProps: {
-        invert: boolean;
-        scrollBehaviour: string;
-        preventWindowScroll: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     private scrollX;
     private scrollY;
     private inner;
+    private setRootNode;
     componentDidMount(): void;
     componentDidUpdate(prevProps: ScrollContainerProps): void;
     render: () => React.ReactNode;
     /**
      * @public
-     * @param {HTMLElement} element
+     * @param {Element} element
      */
     scrollTo(element: Nullable<HTMLElement>): void;
     /**
@@ -84,4 +109,6 @@ export declare class ScrollContainer extends React.Component<ScrollContainerProp
     private handleInnerScrollWheel;
     private handleMouseMove;
     private handleMouseLeave;
+    private updateInnerElement;
 }
+export {};

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

@@ -13,7 +13,10 @@ export var getScrollSizeParams = function getScrollSizeParams(inner, axis) {
 
   if (scrollActive) {
     scrollSize = Math.max(containerSize / contentSize * containerSize, MIN_SCROLL_SIZE);
-    scrollPos = scrollOffset / (contentSize - containerSize) * (containerSize - scrollSize);
+    scrollPos = scrollOffset / (contentSize - containerSize) * (containerSize - scrollSize); // Convert pixels to percentages
+
+    scrollSize = containerSize && 100 / containerSize * scrollSize;
+    scrollPos = containerSize && 100 / containerSize * scrollPos;
   }
 
   return {
@@ -23,13 +26,13 @@ export var getScrollSizeParams = function getScrollSizeParams(inner, axis) {
   };
 };
 export var getScrollYOffset = function getScrollYOffset(element, container) {
-  var elementOffset = element.offsetTop;
+  var elementTopOffset = element.offsetTop;
 
-  if (container.scrollTop > elementOffset) {
-    return elementOffset;
+  if (container.scrollTop > elementTopOffset) {
+    return elementTopOffset;
   }
 
-  var offset = elementOffset + element.scrollHeight - container.offsetHeight;
+  var offset = elementTopOffset + element.scrollHeight - container.offsetHeight;
 
   if (container.scrollTop < offset) {
     return offset;

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.helpers.ts"],"names":["MIN_SCROLL_SIZE","scrollSizeParametersNames","getScrollSizeParams","inner","axis","offset","size","pos","contentSize","scrollOffset","containerSize","scrollActive","scrollSize","scrollPos","Math","max","getScrollYOffset","element","container","elementOffset","offsetTop","scrollTop","scrollHeight","offsetHeight","convertScrollbarXScrollState","state","scrollBarState","begin","end","middle","convertScrollbarYScrollState"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,yBAA1B,QAA2D,6BAA3D;;;;AAIA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqBC,IAArB,EAAyC;AAC5CH,EAAAA,yBAAyB,CAACG,IAAD,CADmB,CAClEC,MADkE,yBAClEA,MADkE,CAC1DC,IAD0D,yBAC1DA,IAD0D,CACpDC,GADoD,yBACpDA,GADoD;;AAG1E,MAAMC,WAAW,GAAGL,KAAK,CAACG,IAAD,CAAzB;AACA,MAAMG,YAAY,GAAGN,KAAK,CAACI,GAAD,CAA1B;AACA,MAAMG,aAAa,GAAGP,KAAK,CAACE,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,EAAwDV,eAAxD,CAAb;AACAa,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;;AAwBP,OAAO,IAAMG,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,MAAMd,MAAM,GAAGc,aAAa,GAAGF,OAAO,CAACK,YAAxB,GAAuCJ,SAAS,CAACK,YAAhE;AACA,MAAIL,SAAS,CAACG,SAAV,GAAsBhB,MAA1B,EAAkC;AAChC,WAAOA,MAAP;AACD;;AAED,SAAOa,SAAS,CAACG,SAAjB;AACD,CAbM;;AAeP,OAAO,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;;AAUP,OAAO,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","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"]}
+{"version":3,"sources":["ScrollContainer.helpers.ts"],"names":["MIN_SCROLL_SIZE","scrollSizeParametersNames","getScrollSizeParams","inner","axis","offset","size","pos","contentSize","scrollOffset","containerSize","scrollActive","scrollSize","scrollPos","Math","max","getScrollYOffset","element","container","elementTopOffset","offsetTop","scrollTop","scrollHeight","offsetHeight","convertScrollbarXScrollState","state","scrollBarState","begin","end","middle","convertScrollbarYScrollState"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,yBAA1B,QAA2D,6BAA3D;;;;AAIA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAAqBC,IAArB,EAAyC;AAC1E,8BAA8BH,yBAAyB,CAACG,IAAD,CAAvD,CAAQC,MAAR,yBAAQA,MAAR,CAAgBC,IAAhB,yBAAgBA,IAAhB,CAAsBC,GAAtB,yBAAsBA,GAAtB;;AAEA,MAAMC,WAAW,GAAGL,KAAK,CAACG,IAAD,CAAzB;AACA,MAAMG,YAAY,GAAGN,KAAK,CAACI,GAAD,CAA1B;AACA,MAAMG,aAAa,GAAGP,KAAK,CAACE,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,EAAwDV,eAAxD,CAAb;AACAa,IAAAA,SAAS,GAAIJ,YAAY,IAAID,WAAW,GAAGE,aAAlB,CAAb,IAAkDA,aAAa,GAAGE,UAAlE,CAAZ;;AAEA;AACAA,IAAAA,UAAU,GAAGF,aAAa,IAAK,MAAMA,aAAP,GAAwBE,UAAtD;AACAC,IAAAA,SAAS,GAAGH,aAAa,IAAK,MAAMA,aAAP,GAAwBG,SAArD;AACD;;AAED,SAAO;AACLF,IAAAA,YAAY,EAAZA,YADK;AAELC,IAAAA,UAAU,EAAVA,UAFK;AAGLC,IAAAA,SAAS,EAATA,SAHK,EAAP;;AAKD,CA1BM;;AA4BP,OAAO,IAAMG,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,OAAD,EAAuBC,SAAvB,EAAkD;AAChF,MAAMC,gBAAgB,GAAGF,OAAO,CAACG,SAAjC;;AAEA,MAAIF,SAAS,CAACG,SAAV,GAAsBF,gBAA1B,EAA4C;AAC1C,WAAOA,gBAAP;AACD;;AAED,MAAMd,MAAM,GAAGc,gBAAgB,GAAGF,OAAO,CAACK,YAA3B,GAA0CJ,SAAS,CAACK,YAAnE;AACA,MAAIL,SAAS,CAACG,SAAV,GAAsBhB,MAA1B,EAAkC;AAChC,WAAOA,MAAP;AACD;;AAED,SAAOa,SAAS,CAACG,SAAjB;AACD,CAbM;;AAeP,OAAO,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;;AAUP,OAAO,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","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    // Convert pixels to percentages\n    scrollSize = containerSize && (100 / containerSize) * scrollSize;\n    scrollPos = containerSize && (100 / containerSize) * scrollPos;\n  }\n\n  return {\n    scrollActive,\n    scrollSize,\n    scrollPos,\n  };\n};\n\nexport const getScrollYOffset = (element: HTMLElement, container: HTMLElement) => {\n  const elementTopOffset = element.offsetTop;\n\n  if (container.scrollTop > elementTopOffset) {\n    return elementTopOffset;\n  }\n\n  const offset = elementTopOffset + 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/components/ScrollContainer/ScrollContainer.md

@@ -17,7 +17,7 @@ var divStyle = {
   width: 200,
 };
 var absStyle = {
-  border: '1px solid #000',
+  border: '1px solid',
   boxSizing: 'border-box',
   position: 'absolute',
   width: '100%',
@@ -72,7 +72,7 @@ var divStyle = {
   width: 200,
 };
 var absStyle = {
-  border: '1px solid #000',
+  border: '1px solid',
   boxSizing: 'border-box',
   position: 'absolute',
   width: '100%',
@@ -141,3 +141,55 @@ var innerStyle = {
   </div>
 </div>;
 ```
+
+
+Смещение скроллбара
+
+```jsx harmony
+const containerStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  width: 200,
+};
+
+const offsetY = {
+  top: 8,
+  bottom: 8,
+  right: 8,
+};
+
+<div style={containerStyle}>
+  <ScrollContainer offsetY={offsetY}>
+    {Array(30).fill(null).map((_,i) => (
+      <div key={i}>
+        {i}
+      </div>
+    ))}
+  </ScrollContainer>
+</div>
+```
+
+Проп `hideScrollBar` скрывает скроллбар при отсутствии активности пользователя. Задержку на скрытие скроллбара можно регулировать пропом `hideScrollBarDelay` (по умолчанию 500ms)
+
+```jsx harmony
+var divStyle = {
+  display: 'inline-block',
+  border: '1px solid #f99',
+  height: 200,
+  margin: 1,
+  position: 'relative',
+  verticalAlign: 'top',
+  width: 200,
+};
+<div style={divStyle}>
+  <ScrollContainer hideScrollBar={true}>
+    {Array(30).fill(null).map((_,i) => (
+      <div key={i}>
+        {i}
+      </div>
+    ))}
+  </ScrollContainer>
+</div>
+```

package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js

@@ -1,11 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 export var globalClasses = prefix('scroll-container')({
   scrollbarX: 'scrollbar-x',
   scrollbarY: 'scrollbar-y',
+  scrollbarContainerX: 'scrollbar-container-x',
+  scrollbarContainerY: 'scrollbar-container-y',
   inner: 'inner'
 });
 export var styles = memoizeStyle({
@@ -13,24 +15,48 @@ export var styles = memoizeStyle({
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      height: 100%;\n      overflow: hidden;\n      position: relative;\n    "])));
   },
   inner: function inner() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      overflow: scroll;\n      max-height: 100%;\n      max-width: 100%;\n\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      margin-bottom: -1px;\n      padding-bottom: 1px;\n      margin-right: -1px;\n      padding-right: 1px;\n\n      /* Hide scrobars without losing functionality */\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      overflow: scroll;\n      max-height: 100%;\n      max-width: 100%;\n\n      /* Hide scrobars without losing functionality */\n      scrollbar-width: none;\n      -ms-overflow-style: none;\n      &::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n      }\n    "])));
+  },
+  innerIE11: function innerIE11() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      /* IE sometimes enabled scroll: http://codepen.io/anon/pen/RRrLNX */\n      margin-bottom: -1px;\n      padding-bottom: 1px;\n      margin-right: -1px;\n      padding-right: 1px;\n    "])));
   },
   scrollBar: function scrollBar(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 200;\n\n      &::after {\n        content: '';\n        display: block;\n        border-radius: 5px;\n        position: absolute;\n        background: ", ";\n      }\n    "])), t.scrollContainerScrollBarColor);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      z-index: 200;\n      border-radius: 5px;\n      background: ", ";\n      opacity: 0;\n    "])), t.scrollContainerScrollBarColor);
+  },
+  visibleScrollBar: function visibleScrollBar() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      opacity: 1;\n    "])));
   },
   scrollBarInvert: function scrollBarInvert(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &::after {\n        background: #ccc;\n        background: ", ";\n      }\n    "])), t.scrollContainerScrollBarInvertColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: #ccc;\n      background: ", ";\n    "])), t.scrollContainerScrollBarInvertColor);
+  },
+  scrollBarContainerY: function scrollBarContainerY() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: 2px;\n      top: 1px;\n      bottom: 1px;\n      width: 0;\n    "])));
   },
   scrollBarY: function scrollBarY(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      right: 2px;\n      transition: width 0.2s;\n      width: ", ";\n\n      &::after {\n        bottom: 1px;\n        left: 0;\n        right: 0;\n        top: 1px;\n      }\n    "])), t.scrollContainerScrollBarSize);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      right: 0;\n      transition: width 0.2s;\n      width: ", ";\n    "])), t.scrollContainerScrollBarSize);
   },
   scrollBarYHover: function scrollBarYHover(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+  },
+  scrollBarContainerX: function scrollBarContainerX(t) {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      right: 1px;\n      bottom: 1px;\n      left: 1px;\n      height: 0;\n\n      .", " ~ & {\n        margin-right: calc(", " + 3px) !important;\n      }\n\n      & ~ .", " {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(", " + 2px);\n        }\n      }\n    "])), globalClasses.scrollbarContainerY, t.scrollContainerScrollBarHoverSize, globalClasses.inner, t.scrollContainerScrollBarHoverSize);
   },
   scrollBarX: function scrollBarX(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      bottom: 1px;\n      transition: height 0.2s;\n      height: ", ";\n\n      &::after {\n        bottom: 0px;\n        left: 1px;\n        right: 1px;\n        top: 0;\n      }\n\n      .", " ~ & {\n        &::after {\n          right: calc(", " + 4px) !important;\n        }\n      }\n\n      & ~ .", " {\n        &::after {\n          content: ' ';\n          width: 100%;\n          display: block;\n          height: calc(", " + 2px);\n        }\n      }\n    "])), t.scrollContainerScrollBarSize, globalClasses.scrollbarY, t.scrollContainerScrollBarHoverSize, globalClasses.inner, t.scrollContainerScrollBarHoverSize);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      bottom: 0;\n      transition: height 0.2s;\n      height: ", ";\n    "])), t.scrollContainerScrollBarSize);
   },
   scrollBarXHover: function scrollBarXHover(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), t.scrollContainerScrollBarHoverSize);
+  },
+  transition: function transition() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      opacity: 0 !important; //override scrollBar opacity\n    "])));
+  },
+  transitionActive: function transitionActive() {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      transition: opacity 100ms ease-out !important; //override scrollBarX and scrollBarY transition\n      opacity: 1 !important; //override scrollBar opacity\n    "])));
+  },
+  transitionLeave: function transitionLeave() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      opacity: 1 !important; //override scrollBar opacity\n    "])));
+  },
+  transitionLeaveActive: function transitionLeaveActive() {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      opacity: 0 !important; //override scrollBar opacity\n      transition: opacity 300ms ease-out !important; //override scrollBarX and scrollBarY transition\n    "])));
   }
 });