@skbkontur/react-ui 4.9.0 → 4.9.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.9.1](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.9.0...@skbkontur/react-ui@4.9.1) (2022-12-06)
+
+
+### Bug Fixes
+
+* **icons:** add aria-hidden attribute ([#3048](https://github.com/skbkontur/retail-ui/issues/3048)) ([4d2f69b](https://github.com/skbkontur/retail-ui/commit/4d2f69bb08ee00a1798688985013af02d7313b35))
+* **ResponsiveLayout:** configure to work with SSR ([#3052](https://github.com/skbkontur/retail-ui/issues/3052)) ([bd36596](https://github.com/skbkontur/retail-ui/commit/bd365967948b4d5dc525bb8a30c22312b90bc0ce))
+* **ScrollContainer:** add `offsetY`/`offsetX` props to scrollbar ([#3054](https://github.com/skbkontur/retail-ui/issues/3054)) ([57a5728](https://github.com/skbkontur/retail-ui/commit/57a57288661ed96bb5380eaf040699a7391fc81b))
+* **Switcher:** fix keyboard navigation with disabled items ([#3049](https://github.com/skbkontur/retail-ui/issues/3049)) ([d314d94](https://github.com/skbkontur/retail-ui/commit/d314d94d10601039973eeb20b853cc8923e1915a))
+
+
+
+
+
 # [4.9.0](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@4.8.0...@skbkontur/react-ui@4.9.0) (2022-11-25)
 
 

package/cjs/components/ResponsiveLayout/ResponsiveLayoutEvents.js

@@ -1,4 +1,5 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.addResponsiveLayoutListener = addResponsiveLayoutListener;exports.checkMatches = checkMatches;exports.eventListenersMap = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _client = require("../../lib/client");
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.addResponsiveLayoutListener = addResponsiveLayoutListener;exports.checkMatches = checkMatches;exports.eventListenersMap = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _SSRSafe = require("../../lib/SSRSafe");
+var _client = require("../../lib/client");
 
 
 
@@ -40,14 +41,16 @@ function addCallbackToMQListener(mediaQuery, callback) {
 }
 
 function createMQListener(mediaQuery, callback) {
-  var mql = window.matchMedia(mediaQuery);
-  var newMediaQueryInfo = { mql: mql, listeners: [callback] };
-
-  eventListenersMap.set(mediaQuery, newMediaQueryInfo);
-  if (mql.addEventListener) {
-    mql.addEventListener('change', changeCallback);
-  } else {
-    mql.addListener(changeCallback);
+  var mql = (0, _SSRSafe.matchMediaSSRSafe)(mediaQuery);
+  if (mql) {
+    var newMediaQueryInfo = { mql: mql, listeners: [callback] };
+
+    eventListenersMap.set(mediaQuery, newMediaQueryInfo);
+    if (mql.addEventListener) {
+      mql.addEventListener('change', changeCallback);
+    } else {
+      mql.addListener(changeCallback);
+    }
   }
 }
 
@@ -81,8 +84,8 @@ function checkMatches(mediaQuery) {var _eventListener$mql$ma;
     return false;
   }
 
-  if (!eventListenersMap.has(mediaQuery)) {
-    return window.matchMedia(mediaQuery).matches;
+  if (!eventListenersMap.has(mediaQuery)) {var _matchMediaSSRSafe;
+    return !!((_matchMediaSSRSafe = (0, _SSRSafe.matchMediaSSRSafe)(mediaQuery)) != null && _matchMediaSSRSafe.matches);
   }
 
   var eventListener = eventListenersMap.get(mediaQuery);

package/cjs/components/ResponsiveLayout/ResponsiveLayoutEvents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveLayoutEvents.ts"],"names":["eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","window","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","delete","checkMatches","canUseDOM","matches","e","media","forEach"],"mappings":"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","sourcesContent":["import { canUseDOM } from '../../lib/client';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = window.matchMedia(mediaQuery);\n  const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n  eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n  if (mql.addEventListener) {\n    mql.addEventListener('change', changeCallback);\n  } else {\n    mql.addListener(changeCallback);\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!canUseDOM) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return window.matchMedia(mediaQuery).matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"]}
+{"version":3,"sources":["ResponsiveLayoutEvents.ts"],"names":["eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","delete","checkMatches","canUseDOM","matches","e","media","forEach"],"mappings":"uVAAA;AACA;;;;;;;;;;;AAWO,IAAMA,iBAAiB,GAAG,IAAIC,GAAJ,EAA1B,C;;AAEA,SAASC,2BAAT;AACLC,UADK;AAELC,QAFK;AAGU;AACf,MAAIJ,iBAAiB,CAACK,GAAlB,CAAsBF,UAAtB,CAAJ,EAAuC;AACrCG,IAAAA,uBAAuB,CAACH,UAAD,EAAaC,QAAb,CAAvB;AACD,GAFD,MAEO;AACLG,IAAAA,gBAAgB,CAACJ,UAAD,EAAaC,QAAb,CAAhB;AACD;;AAED,SAAO;AACLI,IAAAA,MADK,oBACI;AACPC,MAAAA,4BAA4B,CAACN,UAAD,EAAaC,QAAb,CAA5B;AACD,KAHI,EAAP;;AAKD;;AAED,SAASE,uBAAT,CAAiCH,UAAjC,EAAqDC,QAArD,EAAiG;AAC/F,MAAMM,aAAa,GAAGV,iBAAiB,CAACW,GAAlB,CAAsBR,UAAtB,CAAtB;;AAEA,MAAIO,aAAJ,EAAmB;AACjBV,IAAAA,iBAAiB,CAACY,GAAlB,CAAsBT,UAAtB;AACKO,IAAAA,aADL;AAEEG,MAAAA,SAAS,YAAMH,aAAa,CAACG,SAApB,GAA+BT,QAA/B,EAFX;;AAID;AACF;;AAED,SAASG,gBAAT,CAA0BJ,UAA1B,EAA8CC,QAA9C,EAA0F;AACxF,MAAMU,GAAG,GAAG,gCAAkBX,UAAlB,CAAZ;AACA,MAAIW,GAAJ,EAAS;AACP,QAAMC,iBAAiC,GAAG,EAAED,GAAG,EAAHA,GAAF,EAAOD,SAAS,EAAE,CAACT,QAAD,CAAlB,EAA1C;;AAEAJ,IAAAA,iBAAiB,CAACY,GAAlB,CAAsBT,UAAtB,EAAkCY,iBAAlC;AACA,QAAID,GAAG,CAACE,gBAAR,EAA0B;AACxBF,MAAAA,GAAG,CAACE,gBAAJ,CAAqB,QAArB,EAA+BC,cAA/B;AACD,KAFD,MAEO;AACLH,MAAAA,GAAG,CAACI,WAAJ,CAAgBD,cAAhB;AACD;AACF;AACF;;AAED,SAASR,4BAAT,CAAsCN,UAAtC,EAA0DC,QAA1D,EAAsG;AACpG,MAAIJ,iBAAiB,CAACK,GAAlB,CAAsBF,UAAtB,CAAJ,EAAuC;AACrC,QAAMO,aAAa,GAAGV,iBAAiB,CAACW,GAAlB,CAAsBR,UAAtB,CAAtB;;AAEA,QAAIO,aAAJ,EAAmB;AACjB,UAAMS,YAAY,GAAGT,aAAa,CAACG,SAAd,CAAwBO,MAAxB,CAA+B,UAACC,QAAD,UAAcA,QAAQ,KAAKjB,QAA3B,EAA/B,CAArB;;AAEA,UAAIe,YAAY,CAACG,MAAb,KAAwB,CAA5B,EAA+B;AAC7B,YAAIZ,aAAa,CAACI,GAAd,CAAkBS,mBAAtB,EAA2C;AACzCb,UAAAA,aAAa,CAACI,GAAd,CAAkBS,mBAAlB,CAAsC,QAAtC,EAAgDN,cAAhD;AACD,SAFD,MAEO;AACLP,UAAAA,aAAa,CAACI,GAAd,CAAkBU,cAAlB,CAAiCP,cAAjC;AACD;AACDjB,QAAAA,iBAAiB,CAACyB,MAAlB,CAAyBtB,UAAzB;AACA;AACD;;AAEDH,MAAAA,iBAAiB,CAACY,GAAlB,CAAsBT,UAAtB;AACKO,MAAAA,aADL;AAEEG,QAAAA,SAAS,YAAMM,YAAN,CAFX;;AAID;AACF;AACF;;AAEM,SAASO,YAAT,CAAsBvB,UAAtB,EAA0C;AAC/C,MAAI,CAACwB,iBAAL,EAAgB;AACd,WAAO,KAAP;AACD;;AAED,MAAI,CAAC3B,iBAAiB,CAACK,GAAlB,CAAsBF,UAAtB,CAAL,EAAwC;AACtC,WAAO,CAAC,wBAAC,gCAAkBA,UAAlB,CAAD,aAAC,mBAA+ByB,OAAhC,CAAR;AACD;;AAED,MAAMlB,aAAa,GAAGV,iBAAiB,CAACW,GAAlB,CAAsBR,UAAtB,CAAtB;AACA,kCAAOO,aAAP,oBAAOA,aAAa,CAAEI,GAAf,CAAmBc,OAA1B,oCAAqC,KAArC;AACD;;AAED,SAASX,cAAT,CAAwBY,CAAxB,EAAgD;AAC9C,MAAMnB,aAAa,GAAGV,iBAAiB,CAACW,GAAlB,CAAsBkB,CAAC,CAACC,KAAxB,CAAtB;;AAEA,MAAIpB,aAAJ,EAAmB;AACjBA,IAAAA,aAAa,CAACG,SAAd,CAAwBkB,OAAxB,CAAgC,UAACV,QAAD,EAAc;AAC5CA,MAAAA,QAAQ,CAACQ,CAAD,CAAR;AACD,KAFD;AAGD;AACF","sourcesContent":["import { matchMediaSSRSafe } from '../../lib/SSRSafe';\nimport { canUseDOM } from '../../lib/client';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = matchMediaSSRSafe(mediaQuery);\n  if (mql) {\n    const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n    eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n    if (mql.addEventListener) {\n      mql.addEventListener('change', changeCallback);\n    } else {\n      mql.addListener(changeCallback);\n    }\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!canUseDOM) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!matchMediaSSRSafe(mediaQuery)?.matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Nullable } from '../../typings/utility-types';
+import { ScrollContainerProps } from './ScrollContainer';
 export declare type ScrollAxis = 'x' | 'y';
 export declare type ScrollBarScrollState = 'begin' | 'middle' | 'end';
 export interface ScrollBarState {
@@ -15,9 +16,11 @@ export interface ScrollBarProps {
     axis: ScrollAxis;
     className?: string;
     onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;
+    offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];
 }
 export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
     private inner;
+    private containerRef;
     private theme;
     node: Nullable<HTMLElement>;
     state: ScrollBarState;
@@ -30,6 +33,7 @@ export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     setHover(hover: boolean): void;
     get scrollBarState(): ScrollBarScrollState;
     private get scrollBarStyles();
+    private get scrollBarContainerClassNames();
     private refScroll;
     private handleScrollMouseDown;
     private handleScrollWheel;

package/cjs/components/ScrollContainer/ScrollBar.js

@@ -26,10 +26,13 @@ var _ScrollContainer3 = require("./ScrollContainer.helpers");var
 
 
 
+
+
 
 
 ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ScrollBar, _React$Component);function ScrollBar() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
+    containerRef = /*#__PURE__*/_react.default.createRef();_this.
 
 
 
@@ -71,17 +74,19 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
 
       var inlineStyles = (_inlineStyles = {}, _inlineStyles[
-      customScrollPos] = state.pos, _inlineStyles[
-      customScrollSize] = state.size, _inlineStyles);
+      customScrollPos] = state.pos + "%", _inlineStyles[
+      customScrollSize] = state.size + "%", _inlineStyles);
 
 
       return /*#__PURE__*/(
+        _react.default.createElement("div", { ref: _this.containerRef, className: _this.scrollBarContainerClassNames, style: props.offset }, /*#__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.
@@ -135,6 +140,16 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -171,11 +186,14 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       var state = _this.state;
 
       var mouseMove = function mouseMove(mouseMoveEvent) {
-        if (!_this.inner) {
+        if (!_this.inner || !_this.containerRef.current) {
           return;
         }
 
-        var ratio = (_this.inner[size] - _this.inner[offset]) / (_this.inner[offset] - state.size);
+        var remainingScrollingContent = _this.inner[size] - _this.inner[offset];
+        var remainingScrollingSpace = _this.containerRef.current[offset] / 100 * (100 - state.size);
+
+        var ratio = remainingScrollingContent / remainingScrollingSpace;
         var delta = (mouseMoveEvent[coord] - initialCoord) * ratio;
 
         _this.inner[pos] = initialScrollPos + delta;
@@ -243,4 +261,4 @@ ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defaul
       }
 
       return 'middle';
-    };return _this;}var _proto = ScrollBar.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.setHover = function setHover(hover) {if (this.state.active && this.state.hover !== hover) {this.setState((0, _extends2.default)({}, this.state, { hover: hover }));}};(0, _createClass2.default)(ScrollBar, [{ key: "scrollBarState", get: function get() {return this.state.scrollState;} }, { key: "scrollBarStyles", get: function get() {var _cx3;var state = this.state;if (this.props.axis === 'x') {var _cx2;return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarX(this.theme), _ScrollContainer2.globalClasses.scrollbarX, (_cx2 = {}, _cx2[_ScrollContainer2.styles.scrollBarXHover(this.theme)] = state.hover || state.scrolling, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrolling, _cx3));} }]);return ScrollBar;}(_react.default.Component);exports.ScrollBar = ScrollBar;
+    };return _this;}var _proto = ScrollBar.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.setHover = function setHover(hover) {if (this.state.active && this.state.hover !== hover) {this.setState((0, _extends2.default)({}, this.state, { hover: hover }));}};(0, _createClass2.default)(ScrollBar, [{ key: "scrollBarState", get: function get() {return this.state.scrollState;} }, { key: "scrollBarStyles", get: function get() {var _cx3;var state = this.state;if (this.props.axis === 'x') {var _cx2;return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarX(this.theme), _ScrollContainer2.globalClasses.scrollbarX, (_cx2 = {}, _cx2[_ScrollContainer2.styles.scrollBarXHover(this.theme)] = state.hover || state.scrolling, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrolling, _cx3));} }, { 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","state","defaultScrollbarState","renderMain","props","active","scrollSizeParametersNames","axis","customScrollPos","customScrollSize","classNames","className","styles","scrollBar","theme","scrollBarStyles","scrollBarInvert","invert","inlineStyles","pos","size","refScroll","handleScrollMouseDown","reflow","inner","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScrollStateChange","setState","setInnerElement","element","handleScrollWheel","event","node","addEventListener","passive","removeEventListener","offset","coord","initialCoord","target","window","document","initialScrollPos","mouseMove","mouseMoveEvent","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","scrolling","WheelEvent","shiftKey","offsetHeight","deltaY","clientSize","maxScrollPos","Math","abs","componentDidMount","componentDidUpdate","render","setHover","hover","scrollBarX","globalClasses","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { getScrollSizeParams } from './ScrollContainer.helpers';\n\nexport type ScrollAxis = 'x' | 'y';\nexport type ScrollBarScrollState = 'begin' | 'middle' | 'end';\n\nexport interface ScrollBarState {\n  active: boolean;\n  hover: boolean;\n  scrolling: boolean;\n  size: number;\n  pos: number;\n  scrollState: ScrollBarScrollState;\n}\n\nexport interface ScrollBarProps {\n  invert: boolean;\n  axis: ScrollAxis;\n  className?: string;\n  onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;\n}\n\nexport class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {\n  private inner: Nullable<HTMLElement>;\n  private theme!: Theme;\n\n  public node: Nullable<HTMLElement>;\n  public state: ScrollBarState = {\n    ...defaultScrollbarState,\n  };\n\n  public componentDidMount() {\n    this.reflow();\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const state = this.state;\n    const props = this.props;\n\n    if (!state.active) {\n      return null;\n    }\n\n    const { customScrollPos, customScrollSize } = scrollSizeParametersNames[this.props.axis];\n\n    const classNames = cx(props.className, styles.scrollBar(this.theme), this.scrollBarStyles, {\n      [styles.scrollBarInvert(this.theme)]: props.invert,\n    });\n\n    const inlineStyles: React.CSSProperties = {\n      [customScrollPos]: state.pos,\n      [customScrollSize]: state.size,\n    };\n\n    return (\n      <div\n        ref={this.refScroll}\n        style={inlineStyles}\n        className={classNames}\n        onMouseDown={this.handleScrollMouseDown}\n        data-tid={`ScrollContainer__ScrollBar-${props.axis}`}\n      />\n    );\n  };\n\n  public reflow = () => {\n    if (!this.inner) {\n      return;\n    }\n\n    const props = this.props;\n    const state = this.state;\n\n    const { scrollSize, scrollPos, scrollActive } = getScrollSizeParams(this.inner, props.axis);\n\n    if (!scrollActive && !state.active) {\n      return;\n    }\n\n    if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {\n      const scrollState = this.getImmediateScrollState();\n\n      if (scrollState !== state.scrollState) {\n        this.props.onScrollStateChange?.(scrollState, props.axis);\n      }\n\n      this.setState({\n        ...this.state,\n        active: scrollActive,\n        size: scrollSize,\n        pos: scrollPos,\n        scrollState,\n      });\n    }\n  };\n\n  public setInnerElement = (inner: Nullable<HTMLElement>) => {\n    this.inner = inner;\n    this.reflow();\n  };\n\n  public setHover(hover: boolean) {\n    if (this.state.active && this.state.hover !== hover) {\n      this.setState({ ...this.state, hover });\n    }\n  }\n\n  public get scrollBarState() {\n    return this.state.scrollState;\n  }\n\n  private get scrollBarStyles() {\n    const state = this.state;\n\n    if (this.props.axis === 'x') {\n      return cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, {\n        [styles.scrollBarXHover(this.theme)]: state.hover || state.scrolling,\n      });\n    }\n\n    return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [styles.scrollBarYHover(this.theme)]: state.hover || state.scrolling,\n    });\n  }\n\n  private refScroll = (element: HTMLElement | null) => {\n    const handleScrollWheel = (event: Event) => this.handleScrollWheel(event, this.props.axis);\n\n    if (!this.node && element) {\n      element.addEventListener('wheel', handleScrollWheel, { passive: false });\n    }\n    if (this.node && !element) {\n      this.node.removeEventListener('wheel', handleScrollWheel);\n    }\n    this.node = element;\n  };\n\n  private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.inner) {\n      return;\n    }\n\n    const { offset, size, pos, coord } = scrollSizeParametersNames[this.props.axis];\n\n    const initialCoord = event[coord];\n    const target: Document = window.document;\n    const initialScrollPos = this.inner[pos];\n    const state = this.state;\n\n    const mouseMove = (mouseMoveEvent: MouseEvent) => {\n      if (!this.inner) {\n        return;\n      }\n\n      const ratio = (this.inner[size] - this.inner[offset]) / (this.inner[offset] - state.size);\n      const delta = (mouseMoveEvent[coord] - initialCoord) * ratio;\n\n      this.inner[pos] = initialScrollPos + delta;\n\n      if (mouseMoveEvent.preventDefault) {\n        mouseMoveEvent.preventDefault();\n      }\n\n      if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\n        (\n          mouseMoveEvent as MouseEvent & {\n            returnValue: boolean;\n          }\n        ).returnValue = false;\n      }\n    };\n\n    const mouseUp = () => {\n      target.removeEventListener('mousemove', mouseMove);\n      target.removeEventListener('mouseup', mouseUp);\n      this.setState({ ...this.state, scrolling: false });\n    };\n\n    target.addEventListener('mousemove', mouseMove);\n    target.addEventListener('mouseup', mouseUp);\n    this.setState({ ...this.state, scrolling: true });\n\n    event.preventDefault();\n  };\n\n  private handleScrollWheel = (event: Event, axis: ScrollAxis) => {\n    if (!this.inner || !(event instanceof WheelEvent) || (axis === 'x' && !event.shiftKey)) {\n      return;\n    }\n\n    const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n    const scrollSize = this.inner[size];\n    const scrollPos = this.inner[pos];\n    const offsetHeight = this.inner[offset];\n\n    if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {\n      return;\n    }\n    if (event.deltaY < 0 && scrollPos <= 0) {\n      return;\n    }\n\n    this.inner[pos] += event.deltaY;\n\n    event.preventDefault();\n  };\n\n  private getImmediateScrollState = (): ScrollBarScrollState => {\n    const { pos, size, clientSize } = scrollSizeParametersNames[this.props.axis];\n\n    if (!this.inner || this.inner[pos] === 0) {\n      return 'begin';\n    }\n    // 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"]}
+{"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","inlineStyles","pos","size","scrollBarContainerClassNames","offset","refScroll","handleScrollMouseDown","reflow","inner","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScrollStateChange","setState","setInnerElement","element","handleScrollWheel","event","node","addEventListener","passive","removeEventListener","coord","initialCoord","target","window","document","initialScrollPos","mouseMove","mouseMoveEvent","current","remainingScrollingContent","remainingScrollingSpace","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","scrolling","WheelEvent","shiftKey","offsetHeight","deltaY","clientSize","maxScrollPos","Math","abs","componentDidMount","componentDidUpdate","render","setHover","hover","scrollBarX","globalClasses","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","scrollbarContainerX","scrollBarContainerX","scrollbarContainerY","scrollBarContainerY","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { getScrollSizeParams } from './ScrollContainer.helpers';\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  scrolling: 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  onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;\n  offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];\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    });\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 (scrollState !== state.scrollState) {\n        this.props.onScrollStateChange?.(scrollState, props.axis);\n      }\n\n      this.setState({\n        ...this.state,\n        active: scrollActive,\n        size: scrollSize,\n        pos: scrollPos,\n        scrollState,\n      });\n    }\n  };\n\n  public setInnerElement = (inner: Nullable<HTMLElement>) => {\n    this.inner = inner;\n    this.reflow();\n  };\n\n  public setHover(hover: boolean) {\n    if (this.state.active && this.state.hover !== hover) {\n      this.setState({ ...this.state, hover });\n    }\n  }\n\n  public get scrollBarState() {\n    return this.state.scrollState;\n  }\n\n  private get scrollBarStyles() {\n    const state = this.state;\n\n    if (this.props.axis === 'x') {\n      return cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, {\n        [styles.scrollBarXHover(this.theme)]: state.hover || state.scrolling,\n      });\n    }\n\n    return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [styles.scrollBarYHover(this.theme)]: state.hover || state.scrolling,\n    });\n  }\n\n  private 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, scrolling: false });\n    };\n\n    target.addEventListener('mousemove', mouseMove);\n    target.addEventListener('mouseup', mouseUp);\n    this.setState({ ...this.state, scrolling: true });\n\n    event.preventDefault();\n  };\n\n  private handleScrollWheel = (event: Event, axis: ScrollAxis) => {\n    if (!this.inner || !(event instanceof WheelEvent) || (axis === 'x' && !event.shiftKey)) {\n      return;\n    }\n\n    const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n    const scrollSize = this.inner[size];\n    const scrollPos = this.inner[pos];\n    const offsetHeight = this.inner[offset];\n\n    if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {\n      return;\n    }\n    if (event.deltaY < 0 && scrollPos <= 0) {\n      return;\n    }\n\n    this.inner[pos] += event.deltaY;\n\n    event.preventDefault();\n  };\n\n  private getImmediateScrollState = (): ScrollBarScrollState => {\n    const { pos, size, clientSize } = scrollSizeParametersNames[this.props.axis];\n\n    if (!this.inner || this.inner[pos] === 0) {\n      return 'begin';\n    }\n    // 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.d.ts

@@ -6,6 +6,8 @@ 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 {
     /**
      * Инвертировать цвет скроллбара
@@ -31,6 +33,14 @@ export interface ScrollContainerProps extends CommonProps {
      * Отключение кастомного скролла
      */
     disabled?: boolean;
+    /**
+     * Смещение вертикального скроллбара
+     */
+    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
+    /**
+     * Смещение горизонтального скроллбара
+     */
+    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
 }
 export declare const ScrollContainerDataTids: {
     readonly root: "ScrollContainer__root";

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

@@ -17,6 +17,10 @@ var getScrollSizeParams = function getScrollSizeParams(inner, axis) {
   if (scrollActive) {
     scrollSize = Math.max(containerSize / contentSize * containerSize, _ScrollContainer.MIN_SCROLL_SIZE);
     scrollPos = scrollOffset / (contentSize - containerSize) * (containerSize - scrollSize);
+
+    // Convert pixels to percentages
+    scrollSize = containerSize && 100 / containerSize * scrollSize;
+    scrollPos = containerSize && 100 / containerSize * scrollPos;
   }
 
   return {

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

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

@@ -39,6 +39,17 @@ var _ScrollBar = require("./ScrollBar");var _class, _class2, _temp;function _get
 
 
 
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -207,13 +218,17 @@ 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;
+
+      var offset = axis === 'x' ? offsetX : offsetY;
 
       return /*#__PURE__*/(
         _react.default.createElement(_ScrollBar.ScrollBar, {
           axis: axis,
           ref: refScrollBar,
           invert: _this.getProps().invert,
-          onScrollStateChange: _this.handleScrollStateChange }));
+          onScrollStateChange: _this.handleScrollStateChange,
+          offset: offset }));
 
 
     };_this.

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

@@ -1 +1 @@
-{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainerDataTids","root","inner","ScrollContainer","rootNode","getProps","defaultProps","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","setRootNode","styles","handleMouseMove","handleMouseLeave","refInner","globalClasses","isIE11","innerIE11","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","invert","handleScrollStateChange","scrollState","scrollY","scrollX","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","LayoutEvents","emit","WheelEvent","shiftKey","hasScrollBar","scrollSizeParametersNames","pos","size","offset","deltaY","right","currentTarget","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","React","Component","__KONTUR_REACT_UI__","propTypes","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';\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 const ScrollContainerDataTids = {\n  root: 'ScrollContainer__root',\n  inner: 'ScrollContainer__inner',\n} as const;\n\ntype DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll'>>;\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  };\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.scrollX?.setInnerElement(this.inner);\n    this.scrollY?.setInnerElement(this.inner);\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\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\n    return (\n      <ScrollBar\n        axis={axis}\n        ref={refScrollBar}\n        invert={this.getProps().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.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.scrollX?.reflow();\n    this.scrollY?.reflow();\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"]}
+{"version":3,"sources":["ScrollContainer.tsx"],"names":["ScrollContainerDataTids","root","inner","ScrollContainer","rootNode","getProps","defaultProps","render","props","disabled","children","innerStyle","scrollBehavior","scrollBehaviour","maxHeight","maxWidth","scrollbarY","renderScrollbar","scrollbarX","setRootNode","styles","handleMouseMove","handleMouseLeave","refInner","globalClasses","isIE11","innerIE11","handleNativeScroll","axis","refScrollBar","refScrollBarX","refScrollBarY","offsetY","offsetX","offset","invert","handleScrollStateChange","scrollState","scrollY","scrollX","scrollXState","onScrollStateChangeX","scrollYState","onScrollStateChange","onScrollStateChangeY","scrollbar","element","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","event","reflow","onScroll","preventDefault","LayoutEvents","emit","WheelEvent","shiftKey","hasScrollBar","scrollSizeParametersNames","pos","size","deltaY","right","currentTarget","pageX","bottom","pageY","setHover","componentDidMount","setInnerElement","componentDidUpdate","prevProps","scrollTo","scrollLeft","offsetLeft","scrollTop","scrollToTop","scrollToBottom","scrollHeight","offsetHeight","scrollToLeft","scrollToRight","scrollWidth","offsetWidth","React","Component","__KONTUR_REACT_UI__","propTypes","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';\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\nexport const ScrollContainerDataTids = {\n  root: 'ScrollContainer__root',\n  inner: 'ScrollContainer__inner',\n} as const;\n\ntype DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll'>>;\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  };\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.scrollX?.setInnerElement(this.inner);\n    this.scrollY?.setInnerElement(this.inner);\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\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 } = this.getProps();\n\n    const offset = axis === 'x' ? offsetX : offsetY;\n\n    return (\n      <ScrollBar\n        axis={axis}\n        ref={refScrollBar}\n        invert={this.getProps().invert}\n        onScrollStateChange={this.handleScrollStateChange}\n        offset={offset}\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.scrollX?.reflow();\n    this.scrollY?.reflow();\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"]}

package/cjs/components/ScrollContainer/ScrollContainer.md

@@ -141,3 +141,32 @@ 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>
+```

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

@@ -2,6 +2,8 @@ import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     scrollbarX: string;
     scrollbarY: string;
+    scrollbarContainerX: string;
+    scrollbarContainerY: string;
     inner: string;
 };
 export declare const styles: {
@@ -10,8 +12,10 @@ export declare const styles: {
     innerIE11(): string;
     scrollBar(t: Theme): string;
     scrollBarInvert(t: Theme): string;
+    scrollBarContainerY(): string;
     scrollBarY(t: Theme): string;
     scrollBarYHover(t: Theme): string;
+    scrollBarContainerX(t: Theme): string;
     scrollBarX(t: Theme): string;
     scrollBarXHover(t: Theme): string;
 };