@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/components/ResponsiveLayout/ResponsiveLayout.md

@@ -0,0 +1,75 @@
+### Вспомогательный интерфейс
+```ts static
+interface ResponsiveLayoutFlags {
+  isMobile: boolean;
+}
+```
+
+### Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+class SomeComponent {
+  public render() {
+    return (
+      <ResponsiveLayout>
+        {
+          ({ isMobile }) => {
+            /* ... */
+          }
+        }
+      </ResponsiveLayout>
+    )
+  }
+}
+```
+
+### Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+class SomeComponent {
+  public render() {
+    return (
+      <div>
+        <ResponsiveLayout onLayoutChange={({ isMobile }) => console.log(isMobile)} />
+      </div>
+    )
+  }
+}
+```
+
+### В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
+```ts static
+type MediaQueriesType = Record<string, string>;
+```
+1. Без кастомизации есть только флаг isMobile
+2. Поля из `customMediaQueries` дополняют список возвращаемых флагов в `ResponsiveLayoutFlags`
+3. При добавлении кастомного флага isMobile, значение дефолтного флага перезаписывается в пользу кастомного
+
+```jsx static
+import { ResponsiveLayout } from '@skbkontur/react-ui';
+
+const customMediaQueries = {
+  isTablet: '(min-width: 577px)',
+  isDesktop: '(min-width: 1280px)',
+};
+
+class SomeComponent {
+  public render() {
+    return (
+      <ResponsiveLayout customMediaQueries={customMediaQueries}>
+        {
+          ({ isMobile, isTablet, isDesktop }) => {
+            /* ... */
+          }
+        }
+      </ResponsiveLayout>
+    )
+  }
+}
+```
+
+Как альтернативу можно использовать хук [useResponsiveLayout](#/Mobiles).

package/components/ResponsiveLayout/ResponsiveLayoutEvents/ResponsiveLayoutEvents.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { globalObject } from '@skbkontur/global-object';
 export var eventListenersMap = new Map();
-export function addResponsiveLayoutListener(globalObject, mediaQuery, callback) {
+export function addResponsiveLayoutListener(mediaQuery, callback) {
   if (eventListenersMap.has(mediaQuery)) {
     addCallbackToMQListener(mediaQuery, callback);
   } else {
-    createMQListener(globalObject, mediaQuery, callback);
+    createMQListener(mediaQuery, callback);
   }
   return {
     remove: function remove() {
@@ -20,7 +21,7 @@ function addCallbackToMQListener(mediaQuery, callback) {
     }));
   }
 }
-function createMQListener(globalObject, mediaQuery, callback) {
+function createMQListener(mediaQuery, callback) {
   var mql = globalObject.matchMedia == null ? void 0 : globalObject.matchMedia(mediaQuery);
   if (mql) {
     var newMediaQueryInfo = {
@@ -57,7 +58,7 @@ function removeCallbackFromMQListener(mediaQuery, callback) {
     }
   }
 }
-export function checkMatches(globalObject, mediaQuery) {
+export function checkMatches(mediaQuery) {
   var _eventListener$mql$ma;
   if (!globalObject.matchMedia) {
     return false;

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

@@ -1 +1 @@
-{"version":3,"names":["eventListenersMap","Map","addResponsiveLayoutListener","globalObject","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","_extends","listeners","concat","mql","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","_eventListener$mql$ma","_globalObject$matchMe","matches","e","media","forEach"],"sources":["ResponsiveLayoutEvents.ts"],"sourcesContent":["import type { GlobalObject } from '../../lib/globalObject';\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  globalObject: GlobalObject,\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(globalObject, 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(globalObject: GlobalObject, mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = globalObject.matchMedia?.(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(globalObject: GlobalObject, mediaQuery: string) {\n  if (!globalObject.matchMedia) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!globalObject.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["globalObject","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","_extends","listeners","concat","mql","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","_eventListener$mql$ma","_globalObject$matchMe","matches","e","media","forEach"],"sources":["ResponsiveLayoutEvents.ts"],"sourcesContent":["import { globalObject } from '@skbkontur/global-object';\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 = globalObject.matchMedia?.(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 (!globalObject.matchMedia) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!globalObject.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"],"mappings":"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","ignoreList":[]}

package/components/ResponsiveLayout/ResponsiveLayoutEvents.d.ts

@@ -1,4 +1,3 @@
-import type { GlobalObject } from '../../lib/globalObject';
 interface mediaQueryData {
     mql: MediaQueryList;
     listeners: Array<(e: MediaQueryListEvent) => void>;
@@ -7,6 +6,6 @@ export interface listenerToken {
     remove: () => void;
 }
 export declare const eventListenersMap: Map<string, mediaQueryData>;
-export declare function addResponsiveLayoutListener(globalObject: GlobalObject, mediaQuery: string, callback: (e: MediaQueryListEvent) => void): listenerToken;
-export declare function checkMatches(globalObject: GlobalObject, mediaQuery: string): boolean;
+export declare function addResponsiveLayoutListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void): listenerToken;
+export declare function checkMatches(mediaQuery: string): boolean;
 export {};

package/components/ResponsiveLayout/useResponsiveLayout/useResponsiveLayout.js

@@ -1,13 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createRef, useCallback, useContext, useEffect, useState } from 'react';
-import { useGlobal } from "../../../lib/theming/RenderEnvironmentContext";
 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 globalObject = useGlobal();
   var allMediaQueries = Object.entries(_extends({
     isMobile: theme.mobileMediaQuery
   }, customMediaQueries)).map(function (_ref2) {
@@ -22,7 +20,7 @@ export function useResponsiveLayout(_temp) {
   var getLayoutFromGlobal = function getLayoutFromGlobal() {
     return allMediaQueries.reduce(function (result, mediaQuery) {
       var _Object$assign;
-      return Object.assign(result, (_Object$assign = {}, _Object$assign[mediaQuery.flag] = checkMatches(globalObject, mediaQuery.query), _Object$assign));
+      return Object.assign(result, (_Object$assign = {}, _Object$assign[mediaQuery.flag] = checkMatches(mediaQuery.query), _Object$assign));
     }, {});
   };
   var _useState = useState(getLayoutFromGlobal()),
@@ -33,7 +31,7 @@ export function useResponsiveLayout(_temp) {
       return;
     }
     allMediaQueries.forEach(function (mediaQuery) {
-      return mediaQuery.ref.current = addResponsiveLayoutListener(globalObject, mediaQuery.query, checkLayoutsMediaQueries);
+      return mediaQuery.ref.current = addResponsiveLayoutListener(mediaQuery.query, checkLayoutsMediaQueries);
     });
 
     // Checking for SSR use case

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

@@ -1 +1 @@
-{"version":3,"names":["createRef","useCallback","useContext","useEffect","useState","useGlobal","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","_temp","_ref","customMediaQueries","theme","globalObject","allMediaQueries","Object","entries","_extends","isMobile","mobileMediaQuery","map","_ref2","key","value","flag","query","ref","getLayoutFromGlobal","reduce","result","mediaQuery","_Object$assign","assign","_useState","state","setState","prepareMediaQueries","forEach","current","checkLayoutsMediaQueries","globalLayout","hasChangedQuery","find","_ref3","e","media","prevState","_extends2","matches","_mediaQuery$ref$curre","remove"],"sources":["useResponsiveLayout.ts"],"sourcesContent":["import type React from 'react';\nimport { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { useGlobal } from '../../lib/theming/RenderEnvironmentContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport type { 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  const globalObject = useGlobal();\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) =>\n        Object.assign(result, { [mediaQuery.flag]: checkMatches(globalObject, 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(\n          globalObject,\n          mediaQuery.query,\n          checkLayoutsMediaQueries,\n        )),\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createRef","useCallback","useContext","useEffect","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","_temp","_ref","customMediaQueries","theme","allMediaQueries","Object","entries","_extends","isMobile","mobileMediaQuery","map","_ref2","key","value","flag","query","ref","getLayoutFromGlobal","reduce","result","mediaQuery","_Object$assign","assign","_useState","state","setState","prepareMediaQueries","forEach","current","checkLayoutsMediaQueries","globalLayout","hasChangedQuery","find","_ref3","e","media","prevState","_extends2","matches","_mediaQuery$ref$curre","remove"],"sources":["useResponsiveLayout.ts"],"sourcesContent":["import type React from 'react';\nimport { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport type { 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"],"mappings":"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","ignoreList":[]}

package/components/ScrollContainer/ScrollBar/ScrollBar.js

@@ -2,11 +2,12 @@ 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 { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
+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 { getStyles, globalClasses } from "../ScrollContainer.styles";
+import { styles, globalClasses } from "../ScrollContainer.styles";
 import { getScrollSizeParams } from "../ScrollContainer.helpers";
 export var ScrollBar = /*#__PURE__*/function (_React$Component) {
   function ScrollBar() {
@@ -18,7 +19,7 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
     _this.containerRef = /*#__PURE__*/React.createRef();
     _this.state = _extends({}, defaultScrollbarState);
     _this.renderMain = function () {
-      var _this$cx, _inlineStyles;
+      var _cx, _inlineStyles;
       var state = _this.state;
       var props = _this.props;
       if (!state.active) {
@@ -27,7 +28,7 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
       var _scrollSizeParameters = scrollSizeParametersNames[_this.props.axis],
         customScrollPos = _scrollSizeParameters.customScrollPos,
         customScrollSize = _scrollSizeParameters.customScrollSize;
-      var classNames = _this.cx(props.className, _this.styles.scrollBar(_this.theme), _this.scrollBarStyles, (_this$cx = {}, _this$cx[_this.styles.scrollBarInvert(_this.theme)] = props.invert, _this$cx[_this.styles.visibleScrollBar()] = props.isVisible, _this$cx));
+      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", {
@@ -98,7 +99,7 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
         pos = _scrollSizeParameters2.pos,
         coord = _scrollSizeParameters2.coord;
       var initialCoord = event[coord];
-      var target = _this.globalObject.document;
+      var target = globalObject.document;
       var initialScrollPos = _this.inner[pos];
       var state = _this.state;
       var mouseMove = function mouseMove(mouseMoveEvent) {
@@ -132,7 +133,7 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
       event.preventDefault();
     };
     _this.handleScrollWheel = function (event, axis) {
-      if (!_this.inner || !isInstanceOf(event, _this.globalObject.WheelEvent) || axis === 'x' && !event.shiftKey) {
+      if (!_this.inner || !isInstanceOf(event, globalObject.WheelEvent) || axis === 'x' && !event.shiftKey) {
         return;
       }
       var _scrollSizeParameters3 = scrollSizeParametersNames[axis],
@@ -179,16 +180,9 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-      var globalObject = _ref.globalObject,
-        emotion = _ref.emotion;
-      _this2.globalObject = globalObject;
-      _this2.cx = emotion.cx;
-      _this2.styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   _proto.setHover = function setHover(hover) {
@@ -209,22 +203,22 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "scrollBarStyles",
     get: function get() {
-      var _this$cx3;
+      var _cx3;
       var state = this.state;
       if (this.props.axis === 'x') {
-        var _this$cx2;
-        return this.cx(this.styles.scrollBarX(this.theme), globalClasses.scrollbarX, (_this$cx2 = {}, _this$cx2[this.styles.scrollBarXHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _this$cx2));
+        var _cx2;
+        return cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, (_cx2 = {}, _cx2[styles.scrollBarXHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _cx2));
       }
-      return this.cx(this.styles.scrollBarY(this.theme), globalClasses.scrollbarY, (_this$cx3 = {}, _this$cx3[this.styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag, _this$cx3));
+      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 this.cx(globalClasses.scrollbarContainerX, this.styles.scrollBarContainerX(this.theme));
+        return cx(globalClasses.scrollbarContainerX, styles.scrollBarContainerX(this.theme));
       }
-      return this.cx(globalClasses.scrollbarContainerY, this.styles.scrollBarContainerY());
+      return cx(globalClasses.scrollbarContainerY, styles.scrollBarContainerY());
     }
   }]);
 }(React.Component);

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

@@ -1 +1 @@
-{"version":3,"names":["React","RenderEnvironmentContext","ThemeContext","isInstanceOf","defaultScrollbarState","scrollSizeParametersNames","getStyles","globalClasses","getScrollSizeParams","ScrollBar","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","containerRef","createRef","state","_extends","renderMain","_this$cx","_inlineStyles","props","active","_scrollSizeParameters","axis","customScrollPos","customScrollSize","classNames","cx","className","styles","scrollBar","theme","scrollBarStyles","scrollBarInvert","invert","visibleScrollBar","isVisible","inlineStyles","pos","size","createElement","ref","scrollBarContainerClassNames","style","offset","refScroll","onMouseDown","handleScrollMouseDown","reflow","inner","_getScrollSizeParams","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScroll","setState","setInnerElement","element","handleScrollWheel","event","node","addEventListener","passive","removeEventListener","_scrollSizeParameters2","coord","initialCoord","target","globalObject","document","initialScrollPos","mouseMove","mouseMoveEvent","current","remainingScrollingContent","remainingScrollingSpace","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","returnValue","mouseUp","scrollingByMouseDrag","WheelEvent","shiftKey","_scrollSizeParameters3","offsetHeight","deltaY","_scrollSizeParameters4","clientSize","maxScrollPos","Math","abs","_inheritsLoose","_proto","componentDidMount","componentDidUpdate","render","_this2","Consumer","_ref","emotion","setHover","hover","getHover","_createClass","key","get","_this$cx3","_this$cx2","scrollBarX","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","scrollbarContainerX","scrollBarContainerX","scrollbarContainerY","scrollBarContainerY","Component"],"sources":["ScrollBar.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { RenderEnvironmentContext } from '../../lib/theming/RenderEnvironmentContext';\nimport type { GlobalObject } from '../../lib/globalObject';\nimport type { Nullable } from '../../typings/utility-types';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { getStyles, globalClasses } from './ScrollContainer.styles';\nimport { getScrollSizeParams } from './ScrollContainer.helpers';\nimport type { 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  /** Инвертирует цвет скроллбара. */\n  invert: boolean;\n\n  /** Задает ось скроллбара. */\n  axis: ScrollAxis;\n\n  /** Задает HTML-атрибут class. */\n  className?: string;\n\n  /** Задает функцию, которая вызывается при скролле. */\n  onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;\n\n  /** Задает отступ от края экрана. */\n  offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n\n  /** Определяет, виден ли скроллбар. */\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 globalObject!: GlobalObject;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\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      <RenderEnvironmentContext.Consumer>\n        {({ globalObject, emotion }) => {\n          this.globalObject = globalObject;\n          this.cx = emotion.cx;\n          this.styles = getStyles(emotion);\n\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </RenderEnvironmentContext.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 = this.cx(props.className, this.styles.scrollBar(this.theme), this.scrollBarStyles, {\n      [this.styles.scrollBarInvert(this.theme)]: props.invert,\n      [this.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 this.cx(this.styles.scrollBarX(this.theme), globalClasses.scrollbarX, {\n        [this.styles.scrollBarXHover(this.theme)]: state.hover || state.scrollingByMouseDrag,\n      });\n    }\n\n    return this.cx(this.styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [this.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 this.cx(globalClasses.scrollbarContainerX, this.styles.scrollBarContainerX(this.theme));\n    }\n\n    return this.cx(globalClasses.scrollbarContainerY, this.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 = this.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, this.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"],"mappings":"kMAAA,OAAOA,KAAK,MAAM,OAAO;;;AAGzB,SAASC,wBAAwB,QAAQ,4CAA4C;;;;AAIrF,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,YAAY,QAAQ,wBAAwB;;AAErD,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,6BAA6B;AAC9F,SAASC,SAAS,EAAEC,aAAa,QAAQ,0BAA0B;AACnE,SAASC,mBAAmB,QAAQ,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC/D,WAAaC,SAAS,0BAAAC,gBAAA,YAAAD,UAAA,OAAAE,KAAA,UAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,KAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA,GAAAN,KAAA,GAAAD,gBAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,gBAAA,SAAAU,MAAA,CAAAL,IAAA,WAAAJ,KAAA;;IAEZU,YAAY,gBAAGrB,KAAK,CAACsB,SAAS,CAAiB,CAAC,CAAAX,KAAA;;;;;;;IAOjDY,KAAK,GAAAC,QAAA;IACPpB,qBAAqB,EAAAO,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgClBc,UAAU,GAAG,YAAM,KAAAC,QAAA,EAAAC,aAAA;MACzB,IAAMJ,KAAK,GAAGZ,KAAA,CAAKY,KAAK;MACxB,IAAMK,KAAK,GAAGjB,KAAA,CAAKiB,KAAK;;MAExB,IAAI,CAACL,KAAK,CAACM,MAAM,EAAE;QACjB,OAAO,IAAI;MACb;;MAEA,IAAAC,qBAAA,GAA8CzB,yBAAyB,CAACM,KAAA,CAAKiB,KAAK,CAACG,IAAI,CAAC,CAAhFC,eAAe,GAAAF,qBAAA,CAAfE,eAAe,CAAEC,gBAAgB,GAAAH,qBAAA,CAAhBG,gBAAgB;;MAEzC,IAAMC,UAAU,GAAGvB,KAAA,CAAKwB,EAAE,CAACP,KAAK,CAACQ,SAAS,EAAEzB,KAAA,CAAK0B,MAAM,CAACC,SAAS,CAAC3B,KAAA,CAAK4B,KAAK,CAAC,EAAE5B,KAAA,CAAK6B,eAAe,GAAAd,QAAA,OAAAA,QAAA;MAChGf,KAAA,CAAK0B,MAAM,CAACI,eAAe,CAAC9B,KAAA,CAAK4B,KAAK,CAAC,IAAGX,KAAK,CAACc,MAAM,EAAAhB,QAAA;MACtDf,KAAA,CAAK0B,MAAM,CAACM,gBAAgB,CAAC,CAAC,IAAGf,KAAK,CAACgB,SAAS,EAAAlB,QAAA;MAClD,CAAC;;MAEF,IAAMmB,YAAiC,IAAAlB,aAAA,OAAAA,aAAA;MACpCK,eAAe,IAAMT,KAAK,CAACuB,GAAG,QAAAnB,aAAA;MAC9BM,gBAAgB,IAAMV,KAAK,CAACwB,IAAI,QAAApB,aAAA,CAClC;;;MAED;QACE3B,KAAA,CAAAgD,aAAA,UAAKC,GAAG,EAAEtC,KAAA,CAAKU,YAAa,EAACe,SAAS,EAAEzB,KAAA,CAAKuC,4BAA6B,EAACC,KAAK,EAAEvB,KAAK,CAACwB,MAAO;QAC7FpD,KAAA,CAAAgD,aAAA;UACEC,GAAG,EAAEtC,KAAA,CAAK0C,SAAU;UACpBF,KAAK,EAAEN,YAAa;UACpBT,SAAS,EAAEF,UAAW;UACtBoB,WAAW,EAAE3C,KAAA,CAAK4C,qBAAsB;UACxC,4CAAwC3B,KAAK,CAACG,IAAO;QACtD;QACE,CAAC;;IAEV,CAAC,CAAApB,KAAA;;IAEM6C,MAAM,GAAG,YAAM;MACpB,IAAI,CAAC7C,KAAA,CAAK8C,KAAK,EAAE;QACf;MACF;;MAEA,IAAM7B,KAAK,GAAGjB,KAAA,CAAKiB,KAAK;MACxB,IAAML,KAAK,GAAGZ,KAAA,CAAKY,KAAK;;MAExB,IAAAmC,oBAAA,GAAgDlD,mBAAmB,CAACG,KAAA,CAAK8C,KAAK,EAAE7B,KAAK,CAACG,IAAI,CAAC,CAAnF4B,UAAU,GAAAD,oBAAA,CAAVC,UAAU,CAAEC,SAAS,GAAAF,oBAAA,CAATE,SAAS,CAAEC,YAAY,GAAAH,oBAAA,CAAZG,YAAY;;MAE3C,IAAI,CAACA,YAAY,IAAI,CAACtC,KAAK,CAACM,MAAM,EAAE;QAClC;MACF;;MAEA,IAAIN,KAAK,CAACM,MAAM,KAAKgC,YAAY,IAAItC,KAAK,CAACwB,IAAI,KAAKY,UAAU,IAAIpC,KAAK,CAACuB,GAAG,KAAKc,SAAS,EAAE;QACzF,IAAME,WAAW,GAAGnD,KAAA,CAAKoD,uBAAuB,CAAC,CAAC;;QAElD,IAAIxC,KAAK,CAACuB,GAAG,KAAKc,SAAS,EAAE;UAC3BjD,KAAA,CAAKiB,KAAK,CAACoC,QAAQ,YAAnBrD,KAAA,CAAKiB,KAAK,CAACoC,QAAQ,CAAGpC,KAAK,CAACG,IAAI,EAAE+B,WAAW,EAAEvC,KAAK,CAACuC,WAAW,CAAC;QACnE;;QAEAnD,KAAA,CAAKsD,QAAQ,CAAAzC,QAAA;QACRb,KAAA,CAAKY,KAAK;UACbM,MAAM,EAAEgC,YAAY;UACpBd,IAAI,EAAEY,UAAU;UAChBb,GAAG,EAAEc,SAAS;UACdE,WAAW,EAAXA,WAAW;QACZ,CAAC;MACJ;IACF,CAAC,CAAAnD,KAAA;;IAEMuD,eAAe,GAAG,UAACT,KAA4B,EAAK;MACzD9C,KAAA,CAAK8C,KAAK,GAAGA,KAAK;MAClB9C,KAAA,CAAK6C,MAAM,CAAC,CAAC;IACf,CAAC,CAAA7C,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAwCO0C,SAAS,GAAG,UAACc,OAA2B,EAAK;MACnD,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,KAAY,UAAK1D,KAAA,CAAKyD,iBAAiB,CAACC,KAAK,EAAE1D,KAAA,CAAKiB,KAAK,CAACG,IAAI,CAAC;;MAE1F,IAAI,CAACpB,KAAA,CAAK2D,IAAI,IAAIH,OAAO,EAAE;QACzBA,OAAO,CAACI,gBAAgB,CAAC,OAAO,EAAEH,iBAAiB,EAAE,EAAEI,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;MAC1E;MACA,IAAI7D,KAAA,CAAK2D,IAAI,IAAI,CAACH,OAAO,EAAE;QACzBxD,KAAA,CAAK2D,IAAI,CAACG,mBAAmB,CAAC,OAAO,EAAEL,iBAAiB,CAAC;MAC3D;MACAzD,KAAA,CAAK2D,IAAI,GAAGH,OAAO;IACrB,CAAC,CAAAxD,KAAA;;IAEO4C,qBAAqB,GAAG,UAACc,KAAuC,EAAK;MAC3E,IAAI,CAAC1D,KAAA,CAAK8C,KAAK,EAAE;QACf;MACF;;MAEA,IAAAiB,sBAAA,GAAqCrE,yBAAyB,CAACM,KAAA,CAAKiB,KAAK,CAACG,IAAI,CAAC,CAAvEqB,MAAM,GAAAsB,sBAAA,CAANtB,MAAM,CAAEL,IAAI,GAAA2B,sBAAA,CAAJ3B,IAAI,CAAED,GAAG,GAAA4B,sBAAA,CAAH5B,GAAG,CAAE6B,KAAK,GAAAD,sBAAA,CAALC,KAAK;;MAEhC,IAAMC,YAAY,GAAGP,KAAK,CAACM,KAAK,CAAC;MACjC,IAAME,MAAM,GAAGlE,KAAA,CAAKmE,YAAY,CAACC,QAAQ;MACzC,IAAMC,gBAAgB,GAAGrE,KAAA,CAAK8C,KAAK,CAACX,GAAG,CAAC;MACxC,IAAMvB,KAAK,GAAGZ,KAAA,CAAKY,KAAK;;MAExB,IAAM0D,SAAS,GAAG,SAAZA,SAASA,CAAIC,cAA0B,EAAK;QAChD,IAAI,CAACvE,KAAA,CAAK8C,KAAK,IAAI,CAAC9C,KAAA,CAAKU,YAAY,CAAC8D,OAAO,EAAE;UAC7C;QACF;;QAEA,IAAMC,yBAAyB,GAAGzE,KAAA,CAAK8C,KAAK,CAACV,IAAI,CAAC,GAAGpC,KAAA,CAAK8C,KAAK,CAACL,MAAM,CAAC;QACvE,IAAMiC,uBAAuB,GAAI1E,KAAA,CAAKU,YAAY,CAAC8D,OAAO,CAAC/B,MAAM,CAAC,GAAG,GAAG,IAAK,GAAG,GAAG7B,KAAK,CAACwB,IAAI,CAAC;;QAE9F,IAAMuC,KAAK,GAAGF,yBAAyB,GAAGC,uBAAuB;QACjE,IAAME,KAAK,GAAG,CAACL,cAAc,CAACP,KAAK,CAAC,GAAGC,YAAY,IAAIU,KAAK;;QAE5D3E,KAAA,CAAK8C,KAAK,CAACX,GAAG,CAAC,GAAGkC,gBAAgB,GAAGO,KAAK;;QAE1C,IAAIL,cAAc,CAACM,cAAc,EAAE;UACjCN,cAAc,CAACM,cAAc,CAAC,CAAC;QACjC;;QAEA,IAAIC,MAAM,CAACC,SAAS,CAACC,cAAc,CAACzE,IAAI,CAACgE,cAAc,EAAE,aAAa,CAAC,EAAE;;UAErEA,cAAc;;;UAGdU,WAAW,GAAG,KAAK;QACvB;MACF,CAAC;;MAED,IAAMC,OAAO,GAAG,SAAVA,OAAOA,CAAA,EAAS;QACpBhB,MAAM,YAANA,MAAM,CAAEJ,mBAAmB,CAAC,WAAW,EAAEQ,SAAS,CAAC;QACnDJ,MAAM,YAANA,MAAM,CAAEJ,mBAAmB,CAAC,SAAS,EAAEoB,OAAO,CAAC;QAC/ClF,KAAA,CAAKsD,QAAQ,CAAAzC,QAAA,KAAMb,KAAA,CAAKY,KAAK,IAAEuE,oBAAoB,EAAE,KAAK,GAAE,CAAC;MAC/D,CAAC;;MAEDjB,MAAM,YAANA,MAAM,CAAEN,gBAAgB,CAAC,WAAW,EAAEU,SAAS,CAAC;MAChDJ,MAAM,YAANA,MAAM,CAAEN,gBAAgB,CAAC,SAAS,EAAEsB,OAAO,CAAC;MAC5ClF,KAAA,CAAKsD,QAAQ,CAAAzC,QAAA,KAAMb,KAAA,CAAKY,KAAK,IAAEuE,oBAAoB,EAAE,IAAI,GAAE,CAAC;;MAE5DzB,KAAK,CAACmB,cAAc,CAAC,CAAC;IACxB,CAAC,CAAA7E,KAAA;;IAEOyD,iBAAiB,GAAG,UAACC,KAAY,EAAEtC,IAAgB,EAAK;MAC9D,IAAI,CAACpB,KAAA,CAAK8C,KAAK,IAAI,CAACtD,YAAY,CAACkE,KAAK,EAAE1D,KAAA,CAAKmE,YAAY,CAACiB,UAAU,CAAC,IAAKhE,IAAI,KAAK,GAAG,IAAI,CAACsC,KAAK,CAAC2B,QAAS,EAAE;QAC1G;MACF;;MAEA,IAAAC,sBAAA,GAA8B5F,yBAAyB,CAAC0B,IAAI,CAAC,CAArDqB,MAAM,GAAA6C,sBAAA,CAAN7C,MAAM,CAAEL,IAAI,GAAAkD,sBAAA,CAAJlD,IAAI,CAAED,GAAG,GAAAmD,sBAAA,CAAHnD,GAAG;;MAEzB,IAAMa,UAAU,GAAGhD,KAAA,CAAK8C,KAAK,CAACV,IAAI,CAAC;MACnC,IAAMa,SAAS,GAAGjD,KAAA,CAAK8C,KAAK,CAACX,GAAG,CAAC;MACjC,IAAMoD,YAAY,GAAGvF,KAAA,CAAK8C,KAAK,CAACL,MAAM,CAAC;;MAEvC,IAAIiB,KAAK,CAAC8B,MAAM,GAAG,CAAC,IAAIxC,UAAU,IAAIC,SAAS,GAAGsC,YAAY,EAAE;QAC9D;MACF;MACA,IAAI7B,KAAK,CAAC8B,MAAM,GAAG,CAAC,IAAIvC,SAAS,IAAI,CAAC,EAAE;QACtC;MACF;;MAEAjD,KAAA,CAAK8C,KAAK,CAACX,GAAG,CAAC,IAAIuB,KAAK,CAAC8B,MAAM;;MAE/B9B,KAAK,CAACmB,cAAc,CAAC,CAAC;IACxB,CAAC,CAAA7E,KAAA;;IAEOoD,uBAAuB,GAAG,YAA4B;MAC5D,IAAAqC,sBAAA,GAAkC/F,yBAAyB,CAACM,KAAA,CAAKiB,KAAK,CAACG,IAAI,CAAC,CAApEe,GAAG,GAAAsD,sBAAA,CAAHtD,GAAG,CAAEC,IAAI,GAAAqD,sBAAA,CAAJrD,IAAI,CAAEsD,UAAU,GAAAD,sBAAA,CAAVC,UAAU;;MAE7B,IAAI,CAAC1F,KAAA,CAAK8C,KAAK,IAAI9C,KAAA,CAAK8C,KAAK,CAACX,GAAG,CAAC,KAAK,CAAC,EAAE;QACxC,OAAO,OAAO;MAChB;MACA;MACA;MACA,IAAMwD,YAAY,GAAG3F,KAAA,CAAK8C,KAAK,CAACV,IAAI,CAAC,GAAGpC,KAAA,CAAK8C,KAAK,CAAC4C,UAAU,CAAC;MAC9D,IAAIE,IAAI,CAACC,GAAG,CAACF,YAAY,GAAG3F,KAAA,CAAK8C,KAAK,CAACX,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE;QACjD,OAAO,KAAK;MACd;;MAEA,OAAO,QAAQ;IACjB,CAAC,QAAAnC,KAAA,EAAA8F,cAAA,CAAAhG,SAAA,EAAAC,gBAAA,MAAAgG,MAAA,GAAAjG,SAAA,CAAAiF,SAAA,CAAAgB,MAAA,CA5OMC,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAI,CAACnD,MAAM,CAAC,CAAC,CACf,CAAC,CAAAkD,MAAA,CAEME,kBAAkB,GAAzB,SAAAA,mBAAA,EAA4B,CAC1B,IAAI,CAACpD,MAAM,CAAC,CAAC,CACf,CAAC,CAAAkD,MAAA,CAEMG,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACE9G,KAAA,CAAAgD,aAAA,CAAC/C,wBAAwB,CAAC8G,QAAQ,QAC/B,UAAAC,IAAA,EAA+B,KAA5BlC,YAAY,GAAAkC,IAAA,CAAZlC,YAAY,CAAEmC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CACvBH,MAAI,CAAChC,YAAY,GAAGA,YAAY,CAChCgC,MAAI,CAAC3E,EAAE,GAAG8E,OAAO,CAAC9E,EAAE,CACpB2E,MAAI,CAACzE,MAAM,GAAG/B,SAAS,CAAC2G,OAAO,CAAC,CAEhC,oBACEjH,KAAA,CAAAgD,aAAA,CAAC9C,YAAY,CAAC6G,QAAQ,QACnB,UAACxE,KAAK,EAAK,CACVuE,MAAI,CAACvE,KAAK,GAAGA,KAAK,CAClB,OAAOuE,MAAI,CAACrF,UAAU,CAAC,CAAC,CAC1B,CACqB,CAAC,CAE5B,CACiC,CAAC,CAExC,CAAC,CAAAiF,MAAA,CAuEMQ,QAAQ,GAAf,SAAAA,SAAgBC,KAAc,EAAE,CAC9B,IAAI,IAAI,CAAC5F,KAAK,CAACM,MAAM,IAAI,IAAI,CAACN,KAAK,CAAC4F,KAAK,KAAKA,KAAK,EAAE,CACnD,IAAI,CAAClD,QAAQ,CAAAzC,QAAA,KAAM,IAAI,CAACD,KAAK,IAAE4F,KAAK,EAALA,KAAK,GAAE,CAAC,CACzC,CACF,CAAC,CAAAT,MAAA,CAEMU,QAAQ,GAAf,SAAAA,SAAA,EAAkB,CAChB,OAAO,IAAI,CAAC7F,KAAK,CAAC4F,KAAK,CACzB,CAAC,QAAAE,YAAA,CAAA5G,SAAA,KAAA6G,GAAA,oBAAAC,GAAA,EAED,SAAAA,IAAA,EAA4B,CAC1B,OAAO,IAAI,CAAChG,KAAK,CAACuC,WAAW,CAC/B,CAAC,MAAAwD,GAAA,qBAAAC,GAAA,EAED,SAAAA,IAAA,EAA8B,KAAAC,SAAA,CAC5B,IAAMjG,KAAK,GAAG,IAAI,CAACA,KAAK,CAExB,IAAI,IAAI,CAACK,KAAK,CAACG,IAAI,KAAK,GAAG,EAAE,KAAA0F,SAAA,CAC3B,OAAO,IAAI,CAACtF,EAAE,CAAC,IAAI,CAACE,MAAM,CAACqF,UAAU,CAAC,IAAI,CAACnF,KAAK,CAAC,EAAEhC,aAAa,CAACoH,UAAU,GAAAF,SAAA,OAAAA,SAAA,CACxE,IAAI,CAACpF,MAAM,CAACuF,eAAe,CAAC,IAAI,CAACrF,KAAK,CAAC,IAAGhB,KAAK,CAAC4F,KAAK,IAAI5F,KAAK,CAACuE,oBAAoB,EAAA2B,SAAA,CACrF,CAAC,CACJ,CAEA,OAAO,IAAI,CAACtF,EAAE,CAAC,IAAI,CAACE,MAAM,CAACwF,UAAU,CAAC,IAAI,CAACtF,KAAK,CAAC,EAAEhC,aAAa,CAACuH,UAAU,GAAAN,SAAA,OAAAA,SAAA,CACxE,IAAI,CAACnF,MAAM,CAAC0F,eAAe,CAAC,IAAI,CAACxF,KAAK,CAAC,IAAGhB,KAAK,CAAC4F,KAAK,IAAI5F,KAAK,CAACuE,oBAAoB,EAAA0B,SAAA,CACrF,CAAC,CACJ,CAAC,MAAAF,GAAA,kCAAAC,GAAA,EAED,SAAAA,IAAA,EAA2C,CACzC,IAAQxF,IAAI,GAAK,IAAI,CAACH,KAAK,CAAnBG,IAAI,CAEZ,IAAIA,IAAI,KAAK,GAAG,EAAE,CAChB,OAAO,IAAI,CAACI,EAAE,CAAC5B,aAAa,CAACyH,mBAAmB,EAAE,IAAI,CAAC3F,MAAM,CAAC4F,mBAAmB,CAAC,IAAI,CAAC1F,KAAK,CAAC,CAAC,CAChG,CAEA,OAAO,IAAI,CAACJ,EAAE,CAAC5B,aAAa,CAAC2H,mBAAmB,EAAE,IAAI,CAAC7F,MAAM,CAAC8F,mBAAmB,CAAC,CAAC,CAAC,CACtF,CAAC,OAnJ4BnI,KAAK,CAACoI,SAAS","ignoreList":[]}
+{"version":3,"names":["React","globalObject","ThemeContext","cx","isInstanceOf","defaultScrollbarState","scrollSizeParametersNames","styles","globalClasses","getScrollSizeParams","ScrollBar","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","containerRef","createRef","state","_extends","renderMain","_cx","_inlineStyles","props","active","_scrollSizeParameters","axis","customScrollPos","customScrollSize","classNames","className","scrollBar","theme","scrollBarStyles","scrollBarInvert","invert","visibleScrollBar","isVisible","inlineStyles","pos","size","createElement","ref","scrollBarContainerClassNames","style","offset","refScroll","onMouseDown","handleScrollMouseDown","reflow","inner","_getScrollSizeParams","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScroll","setState","setInnerElement","element","handleScrollWheel","event","node","addEventListener","passive","removeEventListener","_scrollSizeParameters2","coord","initialCoord","target","document","initialScrollPos","mouseMove","mouseMoveEvent","current","remainingScrollingContent","remainingScrollingSpace","ratio","delta","preventDefault","Object","prototype","hasOwnProperty","returnValue","mouseUp","scrollingByMouseDrag","WheelEvent","shiftKey","_scrollSizeParameters3","offsetHeight","deltaY","_scrollSizeParameters4","clientSize","maxScrollPos","Math","abs","_inheritsLoose","_proto","componentDidMount","componentDidUpdate","render","_this2","Consumer","setHover","hover","getHover","_createClass","key","get","_cx3","_cx2","scrollBarX","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","scrollbarContainerX","scrollBarContainerX","scrollbarContainerY","scrollBarContainerY","Component"],"sources":["ScrollBar.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport type { 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 type { 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  /** Инвертирует цвет скроллбара. */\n  invert: boolean;\n\n  /** Задает ось скроллбара. */\n  axis: ScrollAxis;\n\n  /** Задает HTML-атрибут class. */\n  className?: string;\n\n  /** Задает функцию, которая вызывается при скролле. */\n  onScroll?: (axis: ScrollAxis, state: ScrollBarScrollState, prevState: ScrollBarScrollState) => void;\n\n  /** Задает отступ от края экрана. */\n  offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];\n\n  /** Отключает анимацию. */\n  disableAnimations?: boolean;\n\n  /** Определяет, виден ли скроллбар. */\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"],"mappings":"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","ignoreList":[]}

package/components/ScrollContainer/ScrollBar.d.ts

@@ -30,9 +30,6 @@ export interface ScrollBarProps {
 export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
     private inner;
     private containerRef;
-    private globalObject;
-    private cx;
-    private styles;
     private theme;
     node: Nullable<HTMLElement>;
     state: ScrollBarState;

package/components/ScrollContainer/ScrollContainer/ScrollContainer.js

@@ -2,18 +2,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _ScrollContainer;
 import React from 'react';
+import { globalObject } from '@skbkontur/global-object';
 import debounce from 'lodash.debounce';
-import { RenderEnvironmentContext } from "../../../lib/theming/RenderEnvironmentContext";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
 import { isIE11 } from "../../../lib/client";
 import { rootNode } from "../../../lib/rootNode";
 import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
-import { getStyles, globalClasses } from "../ScrollContainer.styles";
+import { styles, globalClasses } from "../ScrollContainer.styles";
 import { scrollSizeParametersNames } from "../ScrollContainer.constants";
 import { getScrollYOffset, convertScrollbarXScrollState, convertScrollbarYScrollState } from "../ScrollContainer.helpers";
 import { ScrollBar } from "../ScrollBar";
@@ -43,43 +44,34 @@ export var ScrollContainer = rootNode(_class = (_ScrollContainer = /*#__PURE__*/
       isHovered: false
     };
     _this.render = function () {
+      var props = _this.props;
+      if (_this.props.disabled) {
+        return _this.props.children;
+      }
+      var innerStyle = {
+        scrollBehavior: _this.getProps().scrollBehaviour,
+        maxHeight: props.maxHeight,
+        maxWidth: props.maxWidth
+      };
+      var scrollbarY = _this.renderScrollbar('y');
+      var scrollbarX = _this.renderScrollbar('x');
       return /*#__PURE__*/(
-        React.createElement(RenderEnvironmentContext.Consumer, null, function (_ref) {
-          var globalObject = _ref.globalObject,
-            emotion = _ref.emotion;
-          _this.globalObject = globalObject;
-          _this.cx = emotion.cx;
-          _this.styles = getStyles(emotion);
-          var props = _this.props;
-          if (_this.props.disabled) {
-            return _this.props.children;
-          }
-          var innerStyle = {
-            scrollBehavior: _this.getProps().scrollBehaviour,
-            maxHeight: props.maxHeight,
-            maxWidth: props.maxWidth
-          };
-          var scrollbarY = _this.renderScrollbar('y');
-          var scrollbarX = _this.renderScrollbar('x');
-          return /*#__PURE__*/(
-            React.createElement(CommonWrapper, _extends({
-              rootNodeRef: _this.setRootNode
-            }, _this.props), /*#__PURE__*/
-            React.createElement("div", {
-              "data-tid": ScrollContainerDataTids.root,
-              className: _this.styles.root(),
-              onMouseMove: _this.handleMouseMove,
-              onMouseLeave: _this.handleMouseLeave
-            }, scrollbarY, scrollbarX, /*#__PURE__*/
-            React.createElement("div", {
-              style: innerStyle,
-              ref: _this.refInner,
-              className: _this.cx(_this.styles.inner(), globalClasses.inner, isIE11 && _this.styles.innerIE11()),
-              "data-tid": ScrollContainerDataTids.inner,
-              onScroll: _this.handleNativeScroll
-            }, props.children)))
-          );
-        })
+        React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this.setRootNode
+        }, _this.props), /*#__PURE__*/
+        React.createElement("div", {
+          "data-tid": ScrollContainerDataTids.root,
+          className: styles.root(),
+          onMouseMove: _this.handleMouseMove,
+          onMouseLeave: _this.handleMouseLeave
+        }, scrollbarY, scrollbarX, /*#__PURE__*/
+        React.createElement("div", {
+          style: innerStyle,
+          ref: _this.refInner,
+          className: cx(styles.inner(), globalClasses.inner, isIE11 && styles.innerIE11()),
+          "data-tid": ScrollContainerDataTids.inner,
+          onScroll: _this.handleNativeScroll
+        }, props.children)))
       );
     };
     _this.renderScrollbar = function (axis) {
@@ -190,7 +182,7 @@ export var ScrollContainer = rootNode(_class = (_ScrollContainer = /*#__PURE__*/
       }
     }, _this.getProps().hideScrollBarDelay);
     _this.handleInnerScrollWheel = function (event) {
-      if (!_this.inner || !isInstanceOf(event, _this.globalObject.WheelEvent)) {
+      if (!_this.inner || !isInstanceOf(event, globalObject.WheelEvent)) {
         return;
       }
       var axis = event.shiftKey ? 'x' : 'y';