@skbkontur/react-ui 0.0.0-4bd3603e53 → 0.0.0-4c5579465d

package/components/ResponsiveLayout/ResponsiveLayout.md

@@ -40,4 +40,35 @@ class SomeComponent {
 }
 ```
 
+В компонент можно передать проп `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,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { matchMediaSSRSafe } from "../../../lib/SSRSafe";
 import { canUseDOM } from "../../../lib/client";
 export var eventListenersMap = new Map();
 export function addResponsiveLayoutListener(mediaQuery, callback) {
@@ -26,17 +27,20 @@ function addCallbackToMQListener(mediaQuery, callback) {
 }
 
 function createMQListener(mediaQuery, callback) {
-  var mql = window.matchMedia(mediaQuery);
-  var newMediaQueryInfo = {
-    mql: mql,
-    listeners: [callback]
-  };
-  eventListenersMap.set(mediaQuery, newMediaQueryInfo);
-
-  if (mql.addEventListener) {
-    mql.addEventListener('change', changeCallback);
-  } else {
-    mql.addListener(changeCallback);
+  var mql = matchMediaSSRSafe(mediaQuery);
+
+  if (mql) {
+    var newMediaQueryInfo = {
+      mql: mql,
+      listeners: [callback]
+    };
+    eventListenersMap.set(mediaQuery, newMediaQueryInfo);
+
+    if (mql.addEventListener) {
+      mql.addEventListener('change', changeCallback);
+    } else {
+      mql.addListener(changeCallback);
+    }
   }
 }
 
@@ -75,7 +79,9 @@ export function checkMatches(mediaQuery) {
   }
 
   if (!eventListenersMap.has(mediaQuery)) {
-    return window.matchMedia(mediaQuery).matches;
+    var _matchMediaSSRSafe;
+
+    return !!((_matchMediaSSRSafe = matchMediaSSRSafe(mediaQuery)) != null && _matchMediaSSRSafe.matches);
   }
 
   var eventListener = eventListenersMap.get(mediaQuery);

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

@@ -1 +1 @@
-{"version":3,"sources":["ResponsiveLayoutEvents.ts"],"names":["canUseDOM","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","window","matchMedia","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","matches","e","media","forEach"],"mappings":"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","sourcesContent":["import { canUseDOM } from '../../lib/client';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = window.matchMedia(mediaQuery);\n  const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n  eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n  if (mql.addEventListener) {\n    mql.addEventListener('change', changeCallback);\n  } else {\n    mql.addListener(changeCallback);\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!canUseDOM) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return window.matchMedia(mediaQuery).matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"]}
+{"version":3,"sources":["ResponsiveLayoutEvents.ts"],"names":["matchMediaSSRSafe","canUseDOM","eventListenersMap","Map","addResponsiveLayoutListener","mediaQuery","callback","has","addCallbackToMQListener","createMQListener","remove","removeCallbackFromMQListener","eventListener","get","set","listeners","mql","newMediaQueryInfo","addEventListener","changeCallback","addListener","newListeners","filter","listener","length","removeEventListener","removeListener","checkMatches","matches","e","media","forEach"],"mappings":"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","sourcesContent":["import { matchMediaSSRSafe } from '../../lib/SSRSafe';\nimport { canUseDOM } from '../../lib/client';\n\ninterface mediaQueryData {\n  mql: MediaQueryList;\n  listeners: Array<(e: MediaQueryListEvent) => void>;\n}\n\nexport interface listenerToken {\n  remove: () => void;\n}\n\nexport const eventListenersMap = new Map<string, mediaQueryData>();\n\nexport function addResponsiveLayoutListener(\n  mediaQuery: string,\n  callback: (e: MediaQueryListEvent) => void,\n): listenerToken {\n  if (eventListenersMap.has(mediaQuery)) {\n    addCallbackToMQListener(mediaQuery, callback);\n  } else {\n    createMQListener(mediaQuery, callback);\n  }\n\n  return {\n    remove() {\n      removeCallbackFromMQListener(mediaQuery, callback);\n    },\n  };\n}\n\nfunction addCallbackToMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const eventListener = eventListenersMap.get(mediaQuery);\n\n  if (eventListener) {\n    eventListenersMap.set(mediaQuery, {\n      ...eventListener,\n      listeners: [...eventListener.listeners, callback],\n    });\n  }\n}\n\nfunction createMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  const mql = matchMediaSSRSafe(mediaQuery);\n  if (mql) {\n    const newMediaQueryInfo: mediaQueryData = { mql, listeners: [callback] };\n\n    eventListenersMap.set(mediaQuery, newMediaQueryInfo);\n    if (mql.addEventListener) {\n      mql.addEventListener('change', changeCallback);\n    } else {\n      mql.addListener(changeCallback);\n    }\n  }\n}\n\nfunction removeCallbackFromMQListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void) {\n  if (eventListenersMap.has(mediaQuery)) {\n    const eventListener = eventListenersMap.get(mediaQuery);\n\n    if (eventListener) {\n      const newListeners = eventListener.listeners.filter((listener) => listener !== callback);\n\n      if (newListeners.length === 0) {\n        if (eventListener.mql.removeEventListener) {\n          eventListener.mql.removeEventListener('change', changeCallback);\n        } else {\n          eventListener.mql.removeListener(changeCallback);\n        }\n        eventListenersMap.delete(mediaQuery);\n        return;\n      }\n\n      eventListenersMap.set(mediaQuery, {\n        ...eventListener,\n        listeners: [...newListeners],\n      });\n    }\n  }\n}\n\nexport function checkMatches(mediaQuery: string) {\n  if (!canUseDOM) {\n    return false;\n  }\n\n  if (!eventListenersMap.has(mediaQuery)) {\n    return !!matchMediaSSRSafe(mediaQuery)?.matches;\n  }\n\n  const eventListener = eventListenersMap.get(mediaQuery);\n  return eventListener?.mql.matches ?? false;\n}\n\nfunction changeCallback(e: MediaQueryListEvent) {\n  const eventListener = eventListenersMap.get(e.media);\n\n  if (eventListener) {\n    eventListener.listeners.forEach((listener) => {\n      listener(e);\n    });\n  }\n}\n"]}

package/components/ResponsiveLayout/decorator.d.ts

@@ -3,7 +3,7 @@ import { ResponsiveLayoutFlags } from './types';
 export declare function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T): {
     new (...args: any[]): {
         layout: ResponsiveLayoutFlags;
-        currentLayout: ResponsiveLayoutFlags;
+        currentLayout: ResponsiveLayoutFlags<import("./types").EmptyObject>;
         isMobileLayout: boolean;
         renderWithLayout: (currentLayout: ResponsiveLayoutFlags) => React.ReactNode;
         render(): JSX.Element;

package/components/ResponsiveLayout/types.d.ts

@@ -1,3 +1,11 @@
-export interface ResponsiveLayoutFlags {
+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/useResponsiveLayout.js

@@ -1,32 +1,53 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { addResponsiveLayoutListener, checkMatches } from "../ResponsiveLayoutEvents";
-export function useResponsiveLayout() {
-  var theme = useContext(ThemeContext);
+export function useResponsiveLayout(_temp) {
+  var _ref = _temp === void 0 ? {} : _temp,
+      customMediaQueries = _ref.customMediaQueries;
 
-  var getLayoutFromGlobal = function getLayoutFromGlobal() {
-    var isMobile = checkMatches(theme.mobileMediaQuery);
+  var theme = useContext(ThemeContext);
+  var allMediaQueries = Object.entries(_extends({
+    isMobile: theme.mobileMediaQuery
+  }, customMediaQueries)).map(function (_ref2) {
+    var key = _ref2[0],
+        value = _ref2[1];
     return {
-      isMobile: !!isMobile
+      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 mobileListener = useRef(null);
   var prepareMediaQueries = useCallback(function () {
     if (!theme) {
       return;
     }
 
-    mobileListener.current = addResponsiveLayoutListener(theme.mobileMediaQuery, checkLayoutsMediaQueries); // Checking for SSR use case
+    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 (globalLayout.isMobile !== state.isMobile) {
+    if (hasChangedQuery) {
       setState(globalLayout);
     }
   }, [theme]);
@@ -35,20 +56,24 @@ export function useResponsiveLayout() {
       return;
     }
 
-    if (e.media === theme.mobileMediaQuery) {
-      setState(function (prevState) {
-        return _extends({}, prevState, {
-          isMobile: e.matches
+    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 () {
-      var _mobileListener$curre;
+      allMediaQueries.forEach(function (mediaQuery) {
+        var _mediaQuery$ref$curre;
 
-      (_mobileListener$curre = mobileListener.current) == null ? void 0 : _mobileListener$curre.remove();
+        return (_mediaQuery$ref$curre = mediaQuery.ref.current) == null ? void 0 : _mediaQuery$ref$curre.remove();
+      });
     };
   }, []);
   return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useResponsiveLayout.ts"],"names":["useCallback","useContext","useEffect","useRef","useState","ThemeContext","addResponsiveLayoutListener","checkMatches","useResponsiveLayout","theme","getLayoutFromGlobal","isMobile","mobileMediaQuery","state","setState","mobileListener","prepareMediaQueries","current","checkLayoutsMediaQueries","globalLayout","e","media","prevState","matches","remove"],"mappings":"0DAAA,SAAgBA,WAAhB,EAA6BC,UAA7B,EAAyCC,SAAzC,EAAoDC,MAApD,EAA4DC,QAA5D,QAA4E,OAA5E;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,2BAAT,EAAsCC,YAAtC,QAA0D,0BAA1D;;AAEA,OAAO,SAASC,mBAAT,GAA+B;AACpC,MAAMC,KAAK,GAAGR,UAAU,CAACI,YAAD,CAAxB;;AAEA,MAAMK,mBAAmB,GAAG,SAAtBA,mBAAsB,GAA6B;AACvD,QAAMC,QAAQ,GAAGJ,YAAY,CAACE,KAAK,CAACG,gBAAP,CAA7B;;AAEA,WAAO,EAAED,QAAQ,EAAE,CAAC,CAACA,QAAd,EAAP;AACD,GAJD;;AAMA,kBAA0BP,QAAQ,CAACM,mBAAmB,EAApB,CAAlC,CAAOG,KAAP,gBAAcC,QAAd;;AAEA,MAAMC,cAAqE,GAAGZ,MAAM,CAAC,IAAD,CAApF;;AAEA,MAAMa,mBAAmB,GAAGhB,WAAW,CAAC,YAAM;AAC5C,QAAI,CAACS,KAAL,EAAY;AACV;AACD;;AAEDM,IAAAA,cAAc,CAACE,OAAf,GAAyBX,2BAA2B,CAACG,KAAK,CAACG,gBAAP,EAAyBM,wBAAzB,CAApD;;AAEA;AACA,QAAMC,YAAY,GAAGT,mBAAmB,EAAxC;;AAEA,QAAIS,YAAY,CAACR,QAAb,KAA0BE,KAAK,CAACF,QAApC,EAA8C;AAC5CG,MAAAA,QAAQ,CAACK,YAAD,CAAR;AACD;AACF,GAbsC,EAapC,CAACV,KAAD,CAboC,CAAvC;;AAeA,MAAMS,wBAAwB,GAAGlB,WAAW;AAC1C,YAACoB,CAAD,EAA4B;AAC1B,QAAI,CAACX,KAAL,EAAY;AACV;AACD;;AAED,QAAIW,CAAC,CAACC,KAAF,KAAYZ,KAAK,CAACG,gBAAtB,EAAwC;AACtCE,MAAAA,QAAQ,CAAC,UAACQ,SAAD;AACJA,QAAAA,SADI;AAEPX,UAAAA,QAAQ,EAAES,CAAC,CAACG,OAFL,KAAD,CAAR;;AAID;AACF,GAZyC;AAa1C,GAACd,KAAD,CAb0C,CAA5C;;;AAgBAP,EAAAA,SAAS,CAAC,YAAM;AACdc,IAAAA,mBAAmB;;AAEnB,WAAO,YAAM;AACX,+BAAAD,cAAc,CAACE,OAAf,2CAAwBO,MAAxB;AACD,KAFD;AAGD,GANQ,EAMN,EANM,CAAT;;AAQA,SAAOX,KAAP;AACD","sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { ResponsiveLayoutFlags } from './types';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport function useResponsiveLayout() {\n  const theme = useContext(ThemeContext);\n\n  const getLayoutFromGlobal = (): ResponsiveLayoutFlags => {\n    const isMobile = checkMatches(theme.mobileMediaQuery);\n\n    return { isMobile: !!isMobile };\n  };\n\n  const [state, setState] = useState(getLayoutFromGlobal());\n\n  const mobileListener: React.MutableRefObject<{ remove: () => void } | null> = useRef(null);\n\n  const prepareMediaQueries = useCallback(() => {\n    if (!theme) {\n      return;\n    }\n\n    mobileListener.current = addResponsiveLayoutListener(theme.mobileMediaQuery, checkLayoutsMediaQueries);\n\n    // Checking for SSR use case\n    const globalLayout = getLayoutFromGlobal();\n\n    if (globalLayout.isMobile !== state.isMobile) {\n      setState(globalLayout);\n    }\n  }, [theme]);\n\n  const checkLayoutsMediaQueries = useCallback(\n    (e: MediaQueryListEvent) => {\n      if (!theme) {\n        return;\n      }\n\n      if (e.media === theme.mobileMediaQuery) {\n        setState((prevState: ResponsiveLayoutFlags) => ({\n          ...prevState,\n          isMobile: e.matches,\n        }));\n      }\n    },\n    [theme],\n  );\n\n  useEffect(() => {\n    prepareMediaQueries();\n\n    return () => {\n      mobileListener.current?.remove();\n    };\n  }, []);\n\n  return state;\n}\n"]}
+{"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

@@ -1,2 +1,2 @@
-import { ResponsiveLayoutFlags } from './types';
-export declare function useResponsiveLayout(): ResponsiveLayoutFlags;
+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

@@ -2,8 +2,11 @@ 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 { CSSTransition } from 'react-transition-group';
+import debounce from 'lodash.debounce';
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { cx } from "../../../lib/theming/Emotion";
+import { renderTarget } from "../../../lib/SSRSafe";
 import { defaultScrollbarState, scrollSizeParametersNames } from "../ScrollContainer.constants";
 import { styles, globalClasses } from "../ScrollContainer.styles";
 import { getScrollSizeParams } from "../ScrollContainer.helpers";
@@ -18,6 +21,7 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.containerRef = /*#__PURE__*/React.createRef();
     _this.state = _extends({}, defaultScrollbarState);
 
     _this.renderMain = function () {
@@ -33,18 +37,36 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
       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));
-      var inlineStyles = (_inlineStyles = {}, _inlineStyles[customScrollPos] = state.pos, _inlineStyles[customScrollSize] = state.size, _inlineStyles);
+      var classNames = cx(props.className, styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[styles.scrollBarInvert(_this.theme)] = props.invert, _cx[styles.visibleScrollBar()] = _this.state.scrollingByMouseWheel || !_this.props.hideScrollBar, _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(CSSTransition, {
+        appear: !props.disableAnimations,
+        exit: !props.disableAnimations,
+        "in": _this.state.scrollingByMouseWheel,
+        classNames: {
+          enter: styles.transition(),
+          enterActive: styles.transitionActive(),
+          exit: styles.transitionLeave(),
+          exitActive: styles.transitionLeaveActive()
+        },
+        timeout: {
+          enter: 100,
+          exit: 300
+        }
+      }, /*#__PURE__*/React.createElement("div", {
         ref: _this.refScroll,
         style: inlineStyles,
         className: classNames,
         onMouseDown: _this.handleScrollMouseDown,
         "data-tid": "ScrollContainer__ScrollBar-" + props.axis
-      });
+      })));
     };
 
-    _this.reflow = function () {
+    _this.reflow = function (event) {
       if (!_this.inner) {
         return;
       }
@@ -74,6 +96,8 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
           pos: scrollPos,
           scrollState: scrollState
         }));
+
+        event && event.type === 'scroll' && props.hideScrollBar && _this.setScrollingByMouseWheel();
       }
     };
 
@@ -112,16 +136,18 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
           pos = _scrollSizeParameters2.pos,
           coord = _scrollSizeParameters2.coord;
       var initialCoord = event[coord];
-      var target = window.document;
+      var target = renderTarget;
       var initialScrollPos = _this.inner[pos];
       var state = _this.state;
 
       var mouseMove = function mouseMove(mouseMoveEvent) {
-        if (!_this.inner) {
+        if (!_this.inner || !_this.containerRef.current) {
           return;
         }
 
-        var ratio = (_this.inner[size] - _this.inner[offset]) / (_this.inner[offset] - state.size);
+        var remainingScrollingContent = _this.inner[size] - _this.inner[offset];
+        var remainingScrollingSpace = _this.containerRef.current[offset] / 100 * (100 - state.size);
+        var ratio = remainingScrollingContent / remainingScrollingSpace;
         var delta = (mouseMoveEvent[coord] - initialCoord) * ratio;
         _this.inner[pos] = initialScrollPos + delta;
 
@@ -139,15 +165,17 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
         target.removeEventListener('mouseup', mouseUp);
 
         _this.setState(_extends({}, _this.state, {
-          scrolling: false
+          scrollingByMouseDrag: false
         }));
+
+        _this.hideScrollBar();
       };
 
       target.addEventListener('mousemove', mouseMove);
       target.addEventListener('mouseup', mouseUp);
 
       _this.setState(_extends({}, _this.state, {
-        scrolling: true
+        scrollingByMouseDrag: true
       }));
 
       event.preventDefault();
@@ -199,6 +227,21 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
       return 'middle';
     };
 
+    _this.setScrollingByMouseWheel = function () {
+      if (!_this.state.scrollingByMouseWheel) {
+        _this.setState({
+          scrollingByMouseWheel: true
+        });
+      }
+
+      _this.hideScrollBar();
+    };
+
+    _this.hideScrollBar = debounce(function () {
+      !_this.state.scrollingByMouseDrag && !_this.state.hover && _this.setState({
+        scrollingByMouseWheel: false
+      });
+    }, _this.props.hideScrollBarDelay);
     return _this;
   }
 
@@ -226,6 +269,10 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
       this.setState(_extends({}, this.state, {
         hover: hover
       }));
+
+      if (!hover) {
+        this.props.hideScrollBar && this.hideScrollBar();
+      }
     }
   };
 
@@ -244,10 +291,21 @@ export var ScrollBar = /*#__PURE__*/function (_React$Component) {
       if (this.props.axis === 'x') {
         var _cx2;
 
-        return cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, (_cx2 = {}, _cx2[styles.scrollBarXHover(this.theme)] = state.hover || state.scrolling, _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(styles.scrollBarY(this.theme), globalClasses.scrollbarY, (_cx3 = {}, _cx3[styles.scrollBarYHover(this.theme)] = state.hover || state.scrolling, _cx3));
+      return cx(globalClasses.scrollbarContainerY, styles.scrollBarContainerY());
     }
   }]);
 

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

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

package/components/ScrollContainer/ScrollBar.d.ts

@@ -1,23 +1,30 @@
 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;
-    scrolling: boolean;
+    scrollingByMouseDrag: boolean;
     size: number;
     pos: number;
     scrollState: ScrollBarScrollState;
+    scrollingByMouseWheel: boolean;
 }
 export interface ScrollBarProps {
     invert: boolean;
     axis: ScrollAxis;
     className?: string;
     onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;
+    offset: ScrollContainerProps['offsetY'] | ScrollContainerProps['offsetX'];
+    hideScrollBar?: boolean;
+    hideScrollBarDelay?: number;
+    disableAnimations?: boolean;
 }
 export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
     private inner;
+    private containerRef;
     private theme;
     node: Nullable<HTMLElement>;
     state: ScrollBarState;
@@ -25,13 +32,16 @@ export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     componentDidUpdate(): void;
     render(): JSX.Element;
     private renderMain;
-    reflow: () => void;
+    reflow: (event?: React.UIEvent<HTMLDivElement, UIEvent> | undefined) => void;
     setInnerElement: (inner: Nullable<HTMLElement>) => void;
     setHover(hover: boolean): void;
     get scrollBarState(): ScrollBarScrollState;
     private get scrollBarStyles();
+    private get scrollBarContainerClassNames();
     private refScroll;
     private handleScrollMouseDown;
     private handleScrollWheel;
     private getImmediateScrollState;
+    private setScrollingByMouseWheel;
+    private readonly hideScrollBar;
 }