@skbkontur/react-ui 0.0.0-d09e1235b2 → 0.0.0-d1bb8f344a

package/components/ResponsiveLayout/decorator/decorator.js

@@ -0,0 +1,61 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { ResponsiveLayout } from "../ResponsiveLayout";
+export function responsiveLayout(WrappedComp) {
+  var ComponentWithLayout = /*#__PURE__*/function (_WrappedComp) {
+    _inheritsLoose(ComponentWithLayout, _WrappedComp);
+
+    function ComponentWithLayout() {
+      var _this;
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _WrappedComp.call.apply(_WrappedComp, [this].concat(args)) || this;
+
+      _this.renderWithLayout = function (currentLayout) {
+        _this.layout = currentLayout;
+        return _WrappedComp.prototype.render.call(_assertThisInitialized(_this));
+      };
+
+      return _this;
+    }
+
+    var _proto = ComponentWithLayout.prototype;
+
+    _proto.render = function render() {
+      return /*#__PURE__*/React.createElement(ResponsiveLayout, null, this.renderWithLayout);
+    };
+
+    _createClass(ComponentWithLayout, [{
+      key: "currentLayout",
+      get: function get() {
+        return this.layout;
+      },
+      set: function set(value) {//
+      }
+    }, {
+      key: "isMobileLayout",
+      get: function get() {
+        return this.layout.isMobile;
+      },
+      set: function set(value) {//
+      }
+    }]);
+
+    return ComponentWithLayout;
+  }(WrappedComp);
+
+  var nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');
+
+  if (!nameDescriptor || nameDescriptor.configurable) {
+    Object.defineProperty(ComponentWithLayout, 'name', {
+      value: WrappedComp.name
+    });
+  }
+
+  return ComponentWithLayout;
+}

package/components/ResponsiveLayout/decorator/decorator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["decorator.tsx"],"names":["React","ResponsiveLayout","responsiveLayout","WrappedComp","ComponentWithLayout","renderWithLayout","currentLayout","layout","render","value","isMobile","nameDescriptor","Object","getOwnPropertyDescriptor","configurable","defineProperty","name"],"mappings":"8NAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,gBAAT,QAAiC,oBAAjC;;;AAGA,OAAO,SAASC,gBAAT,CAA6EC,WAA7E,EAA6F;AAClG,MAAMC,mBAAmB;;;;;;;;;;;;;;;;;;;AAmBhBC,MAAAA,gBAnBgB,GAmBG,UAACC,aAAD,EAA0C;AAClE,cAAKC,MAAL,GAAcD,aAAd;;AAEA,sCAAaE,MAAb;AACD,OAvBsB;;AAyBhBA,IAAAA,MAzBgB,GAyBvB,kBAAgB;AACd,0BAAO,oBAAC,gBAAD,QAAmB,KAAKH,gBAAxB,CAAP;AACD,KA3BsB,iEAGvB,eAAkD,CAChD,OAAO,KAAKE,MAAZ,CACD,CALsB,OAOvB,aAAyBE,KAAzB,EAAuD,CACrD;AACD,OATsB,kCAWvB,eAAqC,CACnC,OAAO,KAAKF,MAAL,CAAYG,QAAnB,CACD,CAbsB,OAevB,aAA0BD,KAA1B,EAA0C,CACxC;AACD,OAjBsB,kCAAiBN,WAAjB,CAAzB;AA8BA,MAAMQ,cAAc,GAAGC,MAAM,CAACC,wBAAP,CAAgCT,mBAAhC,EAAqD,MAArD,CAAvB;;AAEA,MAAI,CAACO,cAAD,IAAmBA,cAAc,CAACG,YAAtC,EAAoD;AAClDF,IAAAA,MAAM,CAACG,cAAP,CAAsBX,mBAAtB,EAA2C,MAA3C,EAAmD,EAAEK,KAAK,EAAEN,WAAW,CAACa,IAArB,EAAnD;AACD;;AAED,SAAOZ,mBAAP;AACD","sourcesContent":["import React from 'react';\n\nimport { ResponsiveLayout } from './ResponsiveLayout';\nimport { ResponsiveLayoutFlags } from './types';\n\nexport function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T) {\n  const ComponentWithLayout = class extends WrappedComp {\n    public layout!: ResponsiveLayoutFlags;\n\n    public get currentLayout(): ResponsiveLayoutFlags {\n      return this.layout;\n    }\n\n    public set currentLayout(value: ResponsiveLayoutFlags) {\n      //\n    }\n\n    public get isMobileLayout(): boolean {\n      return this.layout.isMobile;\n    }\n\n    public set isMobileLayout(value: boolean) {\n      //\n    }\n\n    public renderWithLayout = (currentLayout: ResponsiveLayoutFlags) => {\n      this.layout = currentLayout;\n\n      return super.render();\n    };\n\n    public render() {\n      return <ResponsiveLayout>{this.renderWithLayout}</ResponsiveLayout>;\n    }\n  };\n\n  const nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');\n\n  if (!nameDescriptor || nameDescriptor.configurable) {\n    Object.defineProperty(ComponentWithLayout, 'name', { value: WrappedComp.name });\n  }\n\n  return ComponentWithLayout;\n}\n"]}

package/components/ResponsiveLayout/decorator/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/decorator.js",
+  "module": "decorator",
+  "types": "../decorator.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/decorator.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ResponsiveLayoutFlags } from './types';
+export declare function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T): {
+    new (...args: any[]): {
+        layout: ResponsiveLayoutFlags;
+        currentLayout: ResponsiveLayoutFlags<import("./types").EmptyObject>;
+        isMobileLayout: boolean;
+        renderWithLayout: (currentLayout: ResponsiveLayoutFlags) => React.ReactNode;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+} & T;

package/components/ResponsiveLayout/index/index.js

@@ -0,0 +1,3 @@
+export * from "../ResponsiveLayout";
+export * from "../useResponsiveLayout";
+export * from "../types";

package/components/ResponsiveLayout/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAd;AACA,cAAc,uBAAd;AACA,cAAc,SAAd","sourcesContent":["export * from './ResponsiveLayout';\nexport * from './useResponsiveLayout';\nexport * from './types';\n"]}

package/components/ResponsiveLayout/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ResponsiveLayout';
+export * from './useResponsiveLayout';
+export * from './types';

package/components/ResponsiveLayout/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/components/ResponsiveLayout/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/types/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/types.js",
+  "module": "types",
+  "types": "../types.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/ResponsiveLayout/types/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/components/ResponsiveLayout/types.d.ts

@@ -0,0 +1,11 @@
+export declare type MediaQueriesType = Record<string, string>;
+export declare type EmptyObject = Record<never, never>;
+export interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {
+    customMediaQueries?: MQ;
+}
+export declare type ResponsiveLayoutFlags<T extends MediaQueriesType = EmptyObject> = {
+    [K in keyof T]?: boolean;
+} & ResponsiveLayoutFlagsInternal;
+export interface ResponsiveLayoutFlagsInternal {
+    isMobile: boolean;
+}

package/components/ResponsiveLayout/useResponsiveLayout/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ResponsiveLayout/useResponsiveLayout.js",
+  "module": "useResponsiveLayout",
+  "types": "../useResponsiveLayout.d.ts",
+  "sideEffects": false
+}

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { addResponsiveLayoutListener, checkMatches } from "../ResponsiveLayoutEvents";
+export function useResponsiveLayout(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      customMediaQueries = _ref.customMediaQueries;
+
+  var theme = useContext(ThemeContext);
+  var allMediaQueries = Object.entries(_extends({
+    isMobile: theme.mobileMediaQuery
+  }, customMediaQueries)).map(function (_ref2) {
+    var key = _ref2[0],
+        value = _ref2[1];
+    return {
+      flag: key,
+      query: value,
+      ref: /*#__PURE__*/createRef()
+    };
+  });
+
+  var getLayoutFromGlobal = function getLayoutFromGlobal() {
+    return allMediaQueries.reduce(function (result, mediaQuery) {
+      var _Object$assign;
+
+      return Object.assign(result, (_Object$assign = {}, _Object$assign[mediaQuery.flag] = checkMatches(mediaQuery.query), _Object$assign));
+    }, {});
+  };
+
+  var _useState = useState(getLayoutFromGlobal()),
+      state = _useState[0],
+      setState = _useState[1];
+
+  var prepareMediaQueries = useCallback(function () {
+    if (!theme) {
+      return;
+    }
+
+    allMediaQueries.forEach(function (mediaQuery) {
+      return mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries);
+    }); // Checking for SSR use case
+
+    var globalLayout = getLayoutFromGlobal();
+    var hasChangedQuery = Object.entries(globalLayout).find(function (_ref3) {
+      var key = _ref3[0],
+          value = _ref3[1];
+      return state[key] !== value;
+    });
+
+    if (hasChangedQuery) {
+      setState(globalLayout);
+    }
+  }, [theme]);
+  var checkLayoutsMediaQueries = useCallback(function (e) {
+    if (!theme) {
+      return;
+    }
+
+    allMediaQueries.forEach(function (mediaQuery) {
+      if (e.media === mediaQuery.query) {
+        setState(function (prevState) {
+          var _extends2;
+
+          return _extends({}, prevState, (_extends2 = {}, _extends2[mediaQuery.flag] = e.matches, _extends2));
+        });
+      }
+    });
+  }, [theme]);
+  useEffect(function () {
+    prepareMediaQueries();
+    return function () {
+      allMediaQueries.forEach(function (mediaQuery) {
+        var _mediaQuery$ref$curre;
+
+        return (_mediaQuery$ref$curre = mediaQuery.ref.current) == null ? void 0 : _mediaQuery$ref$curre.remove();
+      });
+    };
+  }, []);
+  return state;
+}

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useResponsiveLayout.ts"],"names":["createRef","useCallback","useContext","useEffect","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","customMediaQueries","theme","allMediaQueries","Object","entries","isMobile","mobileMediaQuery","map","key","value","flag","query","ref","getLayoutFromGlobal","reduce","result","mediaQuery","assign","state","setState","prepareMediaQueries","forEach","current","checkLayoutsMediaQueries","globalLayout","hasChangedQuery","find","e","media","prevState","matches","remove"],"mappings":"0DAAA,SAAgBA,SAAhB,EAA2BC,WAA3B,EAAwCC,UAAxC,EAAoDC,SAApD,EAA+DC,QAA/D,QAA+E,OAA/E;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,2BAAT,EAAsCC,YAAtC,QAA0D,0BAA1D;;AAEA,OAAO,SAASC,mBAAT;;AAE6B,+BAAJ,EAAI,SADlCC,kBACkC,QADlCA,kBACkC;AAClC,MAAMC,KAAK,GAAGR,UAAU,CAACG,YAAD,CAAxB;;AAEA,MAAMM,eAAe,GAAGC,MAAM,CAACC,OAAP;AACtBC,IAAAA,QAAQ,EAAEJ,KAAK,CAACK,gBADM;AAEnBN,EAAAA,kBAFmB;AAGrBO,EAAAA,GAHqB,CAGjB,sBAAEC,GAAF,YAAOC,KAAP,mBAAmB;AACxBC,MAAAA,IAAI,EAAEF,GADkB;AAExBG,MAAAA,KAAK,EAAEF,KAFiB;AAGxBG,MAAAA,GAAG,eAAErB,SAAS,EAHU,EAAnB,EAHiB,CAAxB;;;AASA,MAAMsB,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAgC;AAC1D,WAAOX,eAAe,CAACY,MAAhB;AACL,cAACC,MAAD,EAASC,UAAT,6BAAwBb,MAAM,CAACc,MAAP,CAAcF,MAAd,uCAAyBC,UAAU,CAACN,IAApC,IAA2CZ,YAAY,CAACkB,UAAU,CAACL,KAAZ,CAAvD,kBAAxB,EADK;AAEL,MAFK,CAAP;;AAID,GALD;;AAOA,kBAA0BhB,QAAQ,CAACkB,mBAAmB,EAApB,CAAlC,CAAOK,KAAP,gBAAcC,QAAd;;AAEA,MAAMC,mBAAmB,GAAG5B,WAAW,CAAC,YAAM;AAC5C,QAAI,CAACS,KAAL,EAAY;AACV;AACD;;AAEDC,IAAAA,eAAe,CAACmB,OAAhB;AACE,cAACL,UAAD;AACGA,QAAAA,UAAU,CAACJ,GAAX,CAAeU,OAAf,GAAyBzB,2BAA2B,CAACmB,UAAU,CAACL,KAAZ,EAAmBY,wBAAnB,CADvD,GADF;;;AAKA;AACA,QAAMC,YAAY,GAAGX,mBAAmB,EAAxC;AACA,QAAMY,eAAe,GAAGtB,MAAM,CAACC,OAAP,CAAeoB,YAAf,EAA6BE,IAA7B,CAAkC,sBAAElB,GAAF,YAAOC,KAAP,mBAAkBS,KAAK,CAACV,GAAD,CAAL,KAAeC,KAAjC,EAAlC,CAAxB;;AAEA,QAAIgB,eAAJ,EAAqB;AACnBN,MAAAA,QAAQ,CAACK,YAAD,CAAR;AACD;AACF,GAjBsC,EAiBpC,CAACvB,KAAD,CAjBoC,CAAvC;;AAmBA,MAAMsB,wBAAwB,GAAG/B,WAAW;AAC1C,YAACmC,CAAD,EAA4B;AAC1B,QAAI,CAAC1B,KAAL,EAAY;AACV;AACD;;AAEDC,IAAAA,eAAe,CAACmB,OAAhB,CAAwB,UAACL,UAAD,EAAgB;AACtC,UAAIW,CAAC,CAACC,KAAF,KAAYZ,UAAU,CAACL,KAA3B,EAAkC;AAChCQ,QAAAA,QAAQ,CAAC,UAACU,SAAD;AACJA,UAAAA,SADI;AAENb,UAAAA,UAAU,CAACN,IAFL,IAEYiB,CAAC,CAACG,OAFd,eAAD,CAAR;;AAID;AACF,KAPD;AAQD,GAdyC;AAe1C,GAAC7B,KAAD,CAf0C,CAA5C;;;AAkBAP,EAAAA,SAAS,CAAC,YAAM;AACd0B,IAAAA,mBAAmB;;AAEnB,WAAO,YAAM;AACXlB,MAAAA,eAAe,CAACmB,OAAhB,CAAwB,UAACL,UAAD,6DAAgBA,UAAU,CAACJ,GAAX,CAAeU,OAA/B,qBAAgB,sBAAwBS,MAAxB,EAAhB,EAAxB;AACD,KAFD;AAGD,GANQ,EAMN,EANM,CAAT;;AAQA,SAAOb,KAAP;AACD","sourcesContent":["import React, { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({\n  customMediaQueries,\n}: ResponsiveLayoutOptions<T> = {}) {\n  const theme = useContext(ThemeContext);\n\n  const allMediaQueries = Object.entries({\n    isMobile: theme.mobileMediaQuery,\n    ...customMediaQueries,\n  }).map(([key, value]) => ({\n    flag: key,\n    query: value,\n    ref: createRef() as React.MutableRefObject<{ remove: () => void } | null>,\n  }));\n\n  const getLayoutFromGlobal = (): ResponsiveLayoutFlags<T> => {\n    return allMediaQueries.reduce(\n      (result, mediaQuery) => Object.assign(result, { [mediaQuery.flag]: checkMatches(mediaQuery.query) }),\n      {},\n    ) as ResponsiveLayoutFlags<T>;\n  };\n\n  const [state, setState] = useState(getLayoutFromGlobal());\n\n  const prepareMediaQueries = useCallback(() => {\n    if (!theme) {\n      return;\n    }\n\n    allMediaQueries.forEach(\n      (mediaQuery) =>\n        (mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries)),\n    );\n\n    // Checking for SSR use case\n    const globalLayout = getLayoutFromGlobal();\n    const hasChangedQuery = Object.entries(globalLayout).find(([key, value]) => state[key] !== value);\n\n    if (hasChangedQuery) {\n      setState(globalLayout);\n    }\n  }, [theme]);\n\n  const checkLayoutsMediaQueries = useCallback(\n    (e: MediaQueryListEvent) => {\n      if (!theme) {\n        return;\n      }\n\n      allMediaQueries.forEach((mediaQuery) => {\n        if (e.media === mediaQuery.query) {\n          setState((prevState: ResponsiveLayoutFlags<T>) => ({\n            ...prevState,\n            [mediaQuery.flag]: e.matches,\n          }));\n        }\n      });\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    prepareMediaQueries();\n\n    return () => {\n      allMediaQueries.forEach((mediaQuery) => mediaQuery.ref.current?.remove());\n    };\n  }, []);\n\n  return state;\n}\n"]}

package/components/ResponsiveLayout/useResponsiveLayout.d.ts

@@ -0,0 +1,2 @@
+import { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types';
+export declare function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({ customMediaQueries, }?: ResponsiveLayoutOptions<T>): ResponsiveLayoutFlags<T>;

package/components/ScrollContainer/ScrollBar/ScrollBar.js

@@ -0,0 +1,279 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
+import { defaultScrollbarState, scrollSizeParametersNames } from "../ScrollContainer.constants";
+import { styles, globalClasses } from "../ScrollContainer.styles";
+import { getScrollSizeParams } from "../ScrollContainer.helpers";
+export var ScrollBar = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(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.createRef();
+    _this.state = _extends({}, defaultScrollbarState);
+
+    _this.renderMain = function () {
+      var _cx, _inlineStyles;
+
+      var state = _this.state;
+      var props = _this.props;
+
+      if (!state.active) {
+        return null;
+      }
+
+      var _scrollSizeParameters = scrollSizeParametersNames[_this.props.axis],
+          customScrollPos = _scrollSizeParameters.customScrollPos,
+          customScrollSize = _scrollSizeParameters.customScrollSize;
+      var classNames = cx(props.className, styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[styles.scrollBarInvert(_this.theme)] = props.invert, _cx[styles.visibleScrollBar()] = props.isVisible, _cx));
+      var inlineStyles = (_inlineStyles = {}, _inlineStyles[customScrollPos] = state.pos + "%", _inlineStyles[customScrollSize] = state.size + "%", _inlineStyles);
+      return /*#__PURE__*/React.createElement("div", {
+        ref: _this.containerRef,
+        className: _this.scrollBarContainerClassNames,
+        style: props.offset
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: _this.refScroll,
+        style: inlineStyles,
+        className: classNames,
+        onMouseDown: _this.handleScrollMouseDown,
+        "data-tid": "ScrollContainer__ScrollBar-" + props.axis
+      }));
+    };
+
+    _this.reflow = function () {
+      if (!_this.inner) {
+        return;
+      }
+
+      var props = _this.props;
+      var state = _this.state;
+
+      var _getScrollSizeParams = getScrollSizeParams(_this.inner, props.axis),
+          scrollSize = _getScrollSizeParams.scrollSize,
+          scrollPos = _getScrollSizeParams.scrollPos,
+          scrollActive = _getScrollSizeParams.scrollActive;
+
+      if (!scrollActive && !state.active) {
+        return;
+      }
+
+      if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {
+        var scrollState = _this.getImmediateScrollState();
+
+        if (state.pos !== scrollPos) {
+          _this.props.onScroll == null ? void 0 : _this.props.onScroll(props.axis, scrollState, state.scrollState);
+        }
+
+        _this.setState(_extends({}, _this.state, {
+          active: scrollActive,
+          size: scrollSize,
+          pos: scrollPos,
+          scrollState: scrollState
+        }));
+      }
+    };
+
+    _this.setInnerElement = function (inner) {
+      _this.inner = inner;
+
+      _this.reflow();
+    };
+
+    _this.refScroll = function (element) {
+      var handleScrollWheel = function handleScrollWheel(event) {
+        return _this.handleScrollWheel(event, _this.props.axis);
+      };
+
+      if (!_this.node && element) {
+        element.addEventListener('wheel', handleScrollWheel, {
+          passive: false
+        });
+      }
+
+      if (_this.node && !element) {
+        _this.node.removeEventListener('wheel', handleScrollWheel);
+      }
+
+      _this.node = element;
+    };
+
+    _this.handleScrollMouseDown = function (event) {
+      if (!_this.inner) {
+        return;
+      }
+
+      var _scrollSizeParameters2 = scrollSizeParametersNames[_this.props.axis],
+          offset = _scrollSizeParameters2.offset,
+          size = _scrollSizeParameters2.size,
+          pos = _scrollSizeParameters2.pos,
+          coord = _scrollSizeParameters2.coord;
+      var initialCoord = event[coord];
+      var target = globalObject.document;
+      var initialScrollPos = _this.inner[pos];
+      var state = _this.state;
+
+      var mouseMove = function mouseMove(mouseMoveEvent) {
+        if (!_this.inner || !_this.containerRef.current) {
+          return;
+        }
+
+        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;
+
+        if (mouseMoveEvent.preventDefault) {
+          mouseMoveEvent.preventDefault();
+        }
+
+        if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {
+          mouseMoveEvent.returnValue = false;
+        }
+      };
+
+      var mouseUp = function mouseUp() {
+        target == null ? void 0 : target.removeEventListener('mousemove', mouseMove);
+        target == null ? void 0 : target.removeEventListener('mouseup', mouseUp);
+
+        _this.setState(_extends({}, _this.state, {
+          scrollingByMouseDrag: false
+        }));
+      };
+
+      target == null ? void 0 : target.addEventListener('mousemove', mouseMove);
+      target == null ? void 0 : target.addEventListener('mouseup', mouseUp);
+
+      _this.setState(_extends({}, _this.state, {
+        scrollingByMouseDrag: true
+      }));
+
+      event.preventDefault();
+    };
+
+    _this.handleScrollWheel = function (event, axis) {
+      if (!_this.inner || !isInstanceOf(event, globalObject.WheelEvent) || axis === 'x' && !event.shiftKey) {
+        return;
+      }
+
+      var _scrollSizeParameters3 = scrollSizeParametersNames[axis],
+          offset = _scrollSizeParameters3.offset,
+          size = _scrollSizeParameters3.size,
+          pos = _scrollSizeParameters3.pos;
+      var scrollSize = _this.inner[size];
+      var scrollPos = _this.inner[pos];
+      var offsetHeight = _this.inner[offset];
+
+      if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {
+        return;
+      }
+
+      if (event.deltaY < 0 && scrollPos <= 0) {
+        return;
+      }
+
+      _this.inner[pos] += event.deltaY;
+      event.preventDefault();
+    };
+
+    _this.getImmediateScrollState = function () {
+      var _scrollSizeParameters4 = scrollSizeParametersNames[_this.props.axis],
+          pos = _scrollSizeParameters4.pos,
+          size = _scrollSizeParameters4.size,
+          clientSize = _scrollSizeParameters4.clientSize;
+
+      if (!_this.inner || _this.inner[pos] === 0) {
+        return 'begin';
+      } // Zoom in Chrome causes problems
+      // https://github.com/skbkontur/retail-ui/pull/2705#issue-806286945
+
+
+      var maxScrollPos = _this.inner[size] - _this.inner[clientSize];
+
+      if (Math.abs(maxScrollPos - _this.inner[pos]) <= 1) {
+        return 'end';
+      }
+
+      return 'middle';
+    };
+
+    return _this;
+  }
+
+  var _proto = ScrollBar.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.reflow();
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    this.reflow();
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(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(_extends({}, this.state, {
+        hover: hover
+      }));
+    }
+  };
+
+  _proto.getHover = function getHover() {
+    return this.state.hover;
+  };
+
+  _createClass(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 cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, (_cx2 = {}, _cx2[styles.scrollBarXHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx2));
+      }
+
+      return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, (_cx3 = {}, _cx3[styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx3));
+    }
+  }, {
+    key: "scrollBarContainerClassNames",
+    get: function get() {
+      var axis = this.props.axis;
+
+      if (axis === 'x') {
+        return cx(globalClasses.scrollbarContainerX, styles.scrollBarContainerX(this.theme));
+      }
+
+      return cx(globalClasses.scrollbarContainerY, styles.scrollBarContainerY());
+    }
+  }]);
+
+  return ScrollBar;
+}(React.Component);

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

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

package/components/ScrollContainer/ScrollBar/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/ScrollContainer/ScrollBar.js",
+  "module": "ScrollBar",
+  "types": "../ScrollBar.d.ts",
+  "sideEffects": false
+}

package/components/ScrollContainer/ScrollBar.d.ts

@@ -0,0 +1,44 @@
+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 {
+    active: boolean;
+    hover: boolean;
+    scrollingByMouseDrag: boolean;
+    size: number;
+    pos: number;
+    scrollState: ScrollBarScrollState;
+}
+export interface ScrollBarProps {
+    invert: boolean;
+    axis: ScrollAxis;
+    className?: string;
+    onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;
+    offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];
+    disableAnimations?: boolean;
+    isVisible: boolean;
+}
+export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
+    private inner;
+    private containerRef;
+    private theme;
+    node: Nullable<HTMLElement>;
+    state: ScrollBarState;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+    private renderMain;
+    reflow: () => void;
+    setInnerElement: (inner: Nullable<HTMLElement>) => void;
+    setHover(hover: boolean): void;
+    getHover(): boolean;
+    get scrollBarState(): ScrollBarScrollState;
+    private get scrollBarStyles();
+    private get scrollBarContainerClassNames();
+    private refScroll;
+    private handleScrollMouseDown;
+    private handleScrollWheel;
+    private getImmediateScrollState;
+}