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

package/cjs/components/ResponsiveLayout/ResponsiveLayout.js

@@ -0,0 +1,127 @@
+"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.useResponsiveLayout = useResponsiveLayout;exports.responsiveLayout = responsiveLayout;exports.ResponsiveLayout = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../../lib/utils");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+
+var _ResponsiveLayoutEvents = require("./ResponsiveLayoutEvents");
+
+
+
+
+
+function useResponsiveLayout() {
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  var getLayoutFromGlobal = function getLayoutFromGlobal() {
+    var isMobile = (0, _ResponsiveLayoutEvents.checkMatches)(theme.mobileMediaQuery);
+
+    return { isMobile: !!isMobile };
+  };var _useState =
+
+  (0, _react.useState)(getLayoutFromGlobal()),state = _useState[0],setState = _useState[1];
+
+  var mobileListener = (0, _react.useRef)(null);
+
+  var prepareMediaQueries = (0, _react.useCallback)(function () {
+    if (!theme) {
+      return;
+    }
+
+    mobileListener.current = (0, _ResponsiveLayoutEvents.addResponsiveLayoutListener)(theme.mobileMediaQuery, checkLayoutsMediaQueries);
+
+    // Checking for SSR use case
+    var globalLayout = getLayoutFromGlobal();
+
+    if (globalLayout.isMobile !== state.isMobile) {
+      setState(globalLayout);
+    }
+  }, [theme]);
+
+  var checkLayoutsMediaQueries = (0, _react.useCallback)(
+  function (e) {
+    if (!theme) {
+      return;
+    }
+
+    if (e.media === theme.mobileMediaQuery) {
+      setState(function (prevState) {return (0, _extends2.default)({},
+        prevState, {
+          isMobile: e.matches });});
+
+    }
+  },
+  [theme]);
+
+
+  (0, _react.useEffect)(function () {
+    prepareMediaQueries();
+
+    return function () {var _mobileListener$curre;
+      (_mobileListener$curre = mobileListener.current) == null ? void 0 : _mobileListener$curre.remove;
+    };
+  }, []);
+
+  return state;
+}
+
+
+
+
+
+
+var ResponsiveLayout = function ResponsiveLayout(props) {var _props$children, _props$children2;
+  var layoutFlags = useResponsiveLayout();
+
+  (0, _react.useEffect)(function () {
+    if (props.onLayoutChange) {
+      props.onLayoutChange(layoutFlags);
+    }
+  }, [layoutFlags]);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props,
+    (0, _utils.isFunction)(props.children) ? (_props$children = props.children(layoutFlags)) != null ? _props$children : null : (_props$children2 = props.children) != null ? _props$children2 : null));
+
+
+};exports.ResponsiveLayout = ResponsiveLayout;
+
+function responsiveLayout(WrappedComp) {var _temp;
+  var ComponentWithLayout = (_temp = /*#__PURE__*/function (_WrappedComp) {(0, _inheritsLoose2.default)(ComponentWithLayout, _WrappedComp);function ComponentWithLayout() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _WrappedComp.call.apply(_WrappedComp, [this].concat(args)) || this;_this.
+      layout = void 0;_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      renderWithLayout = function (currentLayout) {
+        _this.layout = currentLayout;
+
+        return _WrappedComp.prototype.render.call((0, _assertThisInitialized2.default)(_this));
+      };return _this;}var _proto = ComponentWithLayout.prototype;_proto.
+
+    render = function render() {
+      return /*#__PURE__*/_react.default.createElement(ResponsiveLayout, null, this.renderWithLayout);
+    };(0, _createClass2.default)(ComponentWithLayout, [{ key: "currentLayout", get: function get() {return this.layout;}, set: function set(value) {//
+      } }, { key: "isMobileLayout", get: function get() {return this.layout.isMobile;}, set: function set(value) {//
+      } }]);return ComponentWithLayout;}(WrappedComp), _temp);
+  var nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');
+
+  if (!nameDescriptor || nameDescriptor.configurable) {
+    Object.defineProperty(ComponentWithLayout, 'name', { value: WrappedComp.name });
+  }
+
+  return ComponentWithLayout;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveLayout.tsx"],"names":["useResponsiveLayout","theme","ThemeContext","getLayoutFromGlobal","isMobile","mobileMediaQuery","state","setState","mobileListener","prepareMediaQueries","current","checkLayoutsMediaQueries","globalLayout","e","media","prevState","matches","remove","ResponsiveLayout","props","layoutFlags","onLayoutChange","children","responsiveLayout","WrappedComp","ComponentWithLayout","layout","renderWithLayout","currentLayout","render","value","nameDescriptor","Object","getOwnPropertyDescriptor","configurable","defineProperty","name"],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\n\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents';\n\nexport interface ResponsiveLayoutFlags {\n  isMobile: boolean;\n}\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\ninterface ResponsiveLayoutProps {\n  onLayoutChange?: (layout: ResponsiveLayoutFlags) => void;\n  children?: React.ReactNode | ((currentLayout: ResponsiveLayoutFlags) => React.ReactNode);\n}\n\nexport const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = (props) => {\n  const layoutFlags = useResponsiveLayout();\n\n  useEffect(() => {\n    if (props.onLayoutChange) {\n      props.onLayoutChange(layoutFlags);\n    }\n  }, [layoutFlags]);\n\n  return (\n    <CommonWrapper {...props}>\n      {isFunction(props.children) ? props.children(layoutFlags) ?? null : props.children ?? null}\n    </CommonWrapper>\n  );\n};\n\nexport function responsiveLayout<T extends new (...args: any[]) => React.Component>(WrappedComp: T) {\n  const ComponentWithLayout = class extends WrappedComp {\n    public layout!: ResponsiveLayoutFlags;\n\n    public get currentLayout(): ResponsiveLayoutFlags {\n      return this.layout;\n    }\n\n    public set currentLayout(value: ResponsiveLayoutFlags) {\n      //\n    }\n\n    public get isMobileLayout(): boolean {\n      return this.layout.isMobile;\n    }\n\n    public set isMobileLayout(value: boolean) {\n      //\n    }\n\n    public renderWithLayout = (currentLayout: ResponsiveLayoutFlags) => {\n      this.layout = currentLayout;\n\n      return super.render();\n    };\n\n    public render() {\n      return <ResponsiveLayout>{this.renderWithLayout}</ResponsiveLayout>;\n    }\n  };\n\n  const nameDescriptor = Object.getOwnPropertyDescriptor(ComponentWithLayout, 'name');\n\n  if (!nameDescriptor || nameDescriptor.configurable) {\n    Object.defineProperty(ComponentWithLayout, 'name', { value: WrappedComp.name });\n  }\n\n  return ComponentWithLayout;\n}\n"]}

package/cjs/components/ResponsiveLayout/ResponsiveLayoutEvents.d.ts

@@ -0,0 +1,11 @@
+interface mediaQueryData {
+    mql: MediaQueryList;
+    listeners: ((e: MediaQueryListEvent) => void)[];
+}
+export interface listenerToken {
+    remove: () => void;
+}
+export declare const eventListenersMap: Map<string, mediaQueryData>;
+export declare function addResponsiveLayoutListener(mediaQuery: string, callback: (e: MediaQueryListEvent) => void): listenerToken;
+export declare function checkMatches(mediaQuery: string): boolean;
+export {};

package/cjs/components/ResponsiveLayout/ResponsiveLayoutEvents.js

@@ -0,0 +1,93 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.addResponsiveLayoutListener = addResponsiveLayoutListener;exports.checkMatches = checkMatches;exports.eventListenersMap = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _client = require("../../lib/client");
+
+
+
+
+
+
+
+
+
+
+var eventListenersMap = new Map();exports.eventListenersMap = eventListenersMap;
+
+function addResponsiveLayoutListener(
+mediaQuery,
+callback)
+{
+  if (eventListenersMap.has(mediaQuery)) {
+    addCallbackToMQListener(mediaQuery, callback);
+  } else {
+    createMQListener(mediaQuery, callback);
+  }
+
+  return {
+    remove: function remove() {
+      removeCallbackFromMQListener(mediaQuery, callback);
+    } };
+
+}
+
+function addCallbackToMQListener(mediaQuery, callback) {
+  var eventListener = eventListenersMap.get(mediaQuery);
+
+  if (eventListener) {
+    eventListenersMap.set(mediaQuery, (0, _extends2.default)({},
+    eventListener, {
+      listeners: [].concat(eventListener.listeners, [callback]) }));
+
+  }
+}
+
+function createMQListener(mediaQuery, callback) {var _eventListenersMap$ge;
+  var mql = window.matchMedia(mediaQuery);
+  var newMediaQueryInfo = { mql: mql, listeners: [callback] };
+
+  eventListenersMap.set(mediaQuery, newMediaQueryInfo);
+  (_eventListenersMap$ge = eventListenersMap.get(mediaQuery)) == null ? void 0 : _eventListenersMap$ge.mql.addEventListener('change', changeCallback);
+}
+
+function removeCallbackFromMQListener(mediaQuery, callback) {
+  if (eventListenersMap.has(mediaQuery)) {
+    var eventListener = eventListenersMap.get(mediaQuery);
+
+    if (eventListener) {
+      var newListeners = eventListener.listeners.filter(function (listener) {return listener !== callback;});
+
+      if (newListeners.length === 0) {
+        eventListener.mql.removeEventListener('change', changeCallback);
+        eventListenersMap.delete(mediaQuery);
+        return;
+      }
+
+      eventListenersMap.set(mediaQuery, (0, _extends2.default)({},
+      eventListener, {
+        listeners: [].concat(newListeners) }));
+
+    }
+  }
+}
+
+function checkMatches(mediaQuery) {
+  if (!_client.canUseDOM) {
+    return false;
+  }
+
+  if (!eventListenersMap.has(mediaQuery)) {
+    return window.matchMedia(mediaQuery).matches;
+  } else {
+    var eventListener = eventListenersMap.get(mediaQuery);
+
+    return eventListener.mql.matches;
+  }
+}
+
+function changeCallback(e) {
+  var eventListener = eventListenersMap.get(e.media);
+
+  if (eventListener) {
+    eventListener.listeners.forEach(function (listener) {
+      listener(e);
+    });
+  }
+}

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

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

package/cjs/components/ResponsiveLayout/index.d.ts

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

package/cjs/components/ResponsiveLayout/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _ResponsiveLayout = require("./ResponsiveLayout");Object.keys(_ResponsiveLayout).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ResponsiveLayout[key]) return;exports[key] = _ResponsiveLayout[key];});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './ResponsiveLayout';\n"]}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Nullable } from '../../typings/utility-types';
+export declare type ScrollAxis = 'x' | 'y';
+export declare type ScrollBarScrollState = 'begin' | 'middle' | 'end';
+export interface ScrollBarState {
+    active: boolean;
+    hover: boolean;
+    scrolling: boolean;
+    size: number;
+    pos: number;
+    scrollState: ScrollBarScrollState;
+}
+export interface ScrollBarProps {
+    invert: boolean;
+    axis: ScrollAxis;
+    className?: string;
+    onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;
+}
+export declare class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
+    private inner;
+    private theme;
+    node: Nullable<HTMLElement>;
+    state: ScrollBarState;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+    private renderMain;
+    reflow: () => void;
+    setInnerElement: (inner: Nullable<HTMLElement>) => void;
+    setHover(hover: boolean): void;
+    get scrollBarState(): ScrollBarScrollState;
+    private get scrollBarStyles();
+    private refScroll;
+    private handleScrollMouseDown;
+    private handleScrollWheel;
+    private getImmediateScrollState;
+}

package/cjs/components/ScrollContainer/ScrollBar.js

@@ -0,0 +1,244 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ScrollBar = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+
+
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _ScrollContainer = require("./ScrollContainer.constants");
+var _ScrollContainer2 = require("./ScrollContainer.styles");
+var _ScrollContainer3 = require("./ScrollContainer.helpers");var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ScrollBar = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ScrollBar, _React$Component);function ScrollBar() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+    inner = void 0;_this.
+    theme = void 0;_this.
+
+    node = void 0;_this.
+    state = (0, _extends2.default)({},
+    _ScrollContainer.defaultScrollbarState);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderMain = function () {var _cx, _inlineStyles;
+      var state = _this.state;
+      var props = _this.props;
+
+      if (!state.active) {
+        return null;
+      }var _scrollSizeParameters =
+
+      _ScrollContainer.scrollSizeParametersNames[_this.props.axis],customScrollPos = _scrollSizeParameters.customScrollPos,customScrollSize = _scrollSizeParameters.customScrollSize;
+
+      var classNames = (0, _Emotion.cx)(props.className, _ScrollContainer2.styles.scrollBar(_this.theme), _this.scrollBarStyles, (_cx = {}, _cx[
+      _ScrollContainer2.styles.scrollBarInvert(_this.theme)] = props.invert, _cx));
+
+
+      var inlineStyles = (_inlineStyles = {}, _inlineStyles[
+      customScrollPos] = state.pos, _inlineStyles[
+      customScrollSize] = state.size, _inlineStyles);
+
+
+      return /*#__PURE__*/(
+        _react.default.createElement("div", {
+          ref: _this.refScroll,
+          style: inlineStyles,
+          className: classNames,
+          onMouseDown: _this.handleScrollMouseDown,
+          "data-tid": "ScrollContainer__ScrollBar-" + props.axis }));
+
+
+    };_this.
+
+    reflow = function () {
+      if (!_this.inner) {
+        return;
+      }
+
+      var props = _this.props;
+      var state = _this.state;var _getScrollSizeParams =
+
+      (0, _ScrollContainer3.getScrollSizeParams)(_this.inner, props.axis),scrollSize = _getScrollSizeParams.scrollSize,scrollPos = _getScrollSizeParams.scrollPos,scrollActive = _getScrollSizeParams.scrollActive;
+
+      if (!scrollActive && !state.active) {
+        return;
+      }
+
+      if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {
+        var scrollState = _this.getImmediateScrollState();
+
+        if (scrollState !== state.scrollState) {
+          _this.props.onScrollStateChange == null ? void 0 : _this.props.onScrollStateChange(scrollState, props.axis);
+        }
+
+        _this.setState((0, _extends2.default)({},
+        _this.state, {
+          active: scrollActive,
+          size: scrollSize,
+          pos: scrollPos,
+          scrollState: scrollState }));
+
+      }
+    };_this.
+
+    setInnerElement = function (inner) {
+      _this.inner = inner;
+      _this.reflow();
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    refScroll = function (element) {
+      var handleScrollWheel = function handleScrollWheel(event) {return _this.handleScrollWheel(event, _this.props.axis);};
+
+      if (!_this.node && element) {
+        element.addEventListener('wheel', handleScrollWheel, { passive: false });
+      }
+      if (_this.node && !element) {
+        _this.node.removeEventListener('wheel', handleScrollWheel);
+      }
+      _this.node = element;
+    };_this.
+
+    handleScrollMouseDown = function (event) {
+      if (!_this.inner) {
+        return;
+      }var _scrollSizeParameters2 =
+
+      _ScrollContainer.scrollSizeParametersNames[_this.props.axis],offset = _scrollSizeParameters2.offset,size = _scrollSizeParameters2.size,pos = _scrollSizeParameters2.pos,coord = _scrollSizeParameters2.coord;
+
+      var initialCoord = event[coord];
+      var target = window.document;
+      var initialScrollPos = _this.inner[pos];
+      var state = _this.state;
+
+      var mouseMove = function mouseMove(mouseMoveEvent) {
+        if (!_this.inner) {
+          return;
+        }
+
+        var ratio = (_this.inner[size] - _this.inner[offset]) / (_this.inner[offset] - state.size);
+        var delta = (mouseMoveEvent[coord] - initialCoord) * ratio;
+
+        _this.inner[pos] = initialScrollPos + delta;
+
+        if (mouseMoveEvent.preventDefault) {
+          mouseMoveEvent.preventDefault();
+        }
+
+        if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {
+
+          mouseMoveEvent.
+
+
+          returnValue = false;
+        }
+      };
+
+      var mouseUp = function mouseUp() {
+        target.removeEventListener('mousemove', mouseMove);
+        target.removeEventListener('mouseup', mouseUp);
+        _this.setState((0, _extends2.default)({}, _this.state, { scrolling: false }));
+      };
+
+      target.addEventListener('mousemove', mouseMove);
+      target.addEventListener('mouseup', mouseUp);
+      _this.setState((0, _extends2.default)({}, _this.state, { scrolling: true }));
+
+      event.preventDefault();
+    };_this.
+
+    handleScrollWheel = function (event, axis) {
+      if (!_this.inner || !(event instanceof WheelEvent) || axis === 'x' && !event.shiftKey) {
+        return;
+      }var _scrollSizeParameters3 =
+
+      _ScrollContainer.scrollSizeParametersNames[axis],offset = _scrollSizeParameters3.offset,size = _scrollSizeParameters3.size,pos = _scrollSizeParameters3.pos;
+
+      var scrollSize = _this.inner[size];
+      var scrollPos = _this.inner[pos];
+      var offsetHeight = _this.inner[offset];
+
+      if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {
+        return;
+      }
+      if (event.deltaY < 0 && scrollPos <= 0) {
+        return;
+      }
+
+      _this.inner[pos] += event.deltaY;
+
+      event.preventDefault();
+    };_this.
+
+    getImmediateScrollState = function () {var _scrollSizeParameters4 =
+      _ScrollContainer.scrollSizeParametersNames[_this.props.axis],pos = _scrollSizeParameters4.pos,size = _scrollSizeParameters4.size,clientSize = _scrollSizeParameters4.clientSize;
+
+      if (!_this.inner || _this.inner[pos] === 0) {
+        return 'begin';
+      }
+
+      if (_this.inner[pos] === _this.inner[size] - _this.inner[clientSize]) {
+        return 'end';
+      }
+
+      return 'middle';
+    };return _this;}var _proto = ScrollBar.prototype;_proto.componentDidMount = function componentDidMount() {this.reflow();};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.setHover = function setHover(hover) {if (this.state.active && this.state.hover !== hover) {this.setState((0, _extends2.default)({}, this.state, { hover: hover }));}};(0, _createClass2.default)(ScrollBar, [{ key: "scrollBarState", get: function get() {return this.state.scrollState;} }, { key: "scrollBarStyles", get: function get() {var _cx3;var state = this.state;if (this.props.axis === 'x') {var _cx2;return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarX(this.theme), _ScrollContainer2.globalClasses.scrollbarX, (_cx2 = {}, _cx2[_ScrollContainer2.styles.scrollBarXHover(this.theme)] = state.hover || state.scrolling, _cx2));}return (0, _Emotion.cx)(_ScrollContainer2.styles.scrollBarY(this.theme), _ScrollContainer2.globalClasses.scrollbarY, (_cx3 = {}, _cx3[_ScrollContainer2.styles.scrollBarYHover(this.theme)] = state.hover || state.scrolling, _cx3));} }]);return ScrollBar;}(_react.default.Component);exports.ScrollBar = ScrollBar;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ScrollBar.tsx"],"names":["ScrollBar","inner","theme","node","state","defaultScrollbarState","renderMain","props","active","scrollSizeParametersNames","axis","customScrollPos","customScrollSize","classNames","className","styles","scrollBar","scrollBarStyles","scrollBarInvert","invert","inlineStyles","pos","size","refScroll","handleScrollMouseDown","reflow","scrollSize","scrollPos","scrollActive","scrollState","getImmediateScrollState","onScrollStateChange","setState","setInnerElement","element","handleScrollWheel","event","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","componentDidMount","componentDidUpdate","render","setHover","hover","scrollBarX","globalClasses","scrollbarX","scrollBarXHover","scrollBarY","scrollbarY","scrollBarYHover","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants';\nimport { styles, globalClasses } from './ScrollContainer.styles';\nimport { getScrollSizeParams } from './ScrollContainer.helpers';\n\nexport type ScrollAxis = 'x' | 'y';\nexport type ScrollBarScrollState = 'begin' | 'middle' | 'end';\n\nexport interface ScrollBarState {\n  active: boolean;\n  hover: boolean;\n  scrolling: boolean;\n  size: number;\n  pos: number;\n  scrollState: ScrollBarScrollState;\n}\n\nexport interface ScrollBarProps {\n  invert: boolean;\n  axis: ScrollAxis;\n  className?: string;\n  onScrollStateChange?: (state: ScrollBarScrollState, axis: ScrollAxis) => void;\n}\n\nexport class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {\n  private inner: Nullable<HTMLElement>;\n  private theme!: Theme;\n\n  public node: Nullable<HTMLElement>;\n  public state: ScrollBarState = {\n    ...defaultScrollbarState,\n  };\n\n  public componentDidMount() {\n    this.reflow();\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const state = this.state;\n    const props = this.props;\n\n    if (!state.active) {\n      return null;\n    }\n\n    const { customScrollPos, customScrollSize } = scrollSizeParametersNames[this.props.axis];\n\n    const classNames = cx(props.className, styles.scrollBar(this.theme), this.scrollBarStyles, {\n      [styles.scrollBarInvert(this.theme)]: props.invert,\n    });\n\n    const inlineStyles: React.CSSProperties = {\n      [customScrollPos]: state.pos,\n      [customScrollSize]: state.size,\n    };\n\n    return (\n      <div\n        ref={this.refScroll}\n        style={inlineStyles}\n        className={classNames}\n        onMouseDown={this.handleScrollMouseDown}\n        data-tid={`ScrollContainer__ScrollBar-${props.axis}`}\n      />\n    );\n  };\n\n  public reflow = () => {\n    if (!this.inner) {\n      return;\n    }\n\n    const props = this.props;\n    const state = this.state;\n\n    const { scrollSize, scrollPos, scrollActive } = getScrollSizeParams(this.inner, props.axis);\n\n    if (!scrollActive && !state.active) {\n      return;\n    }\n\n    if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {\n      const scrollState = this.getImmediateScrollState();\n\n      if (scrollState !== state.scrollState) {\n        this.props.onScrollStateChange?.(scrollState, props.axis);\n      }\n\n      this.setState({\n        ...this.state,\n        active: scrollActive,\n        size: scrollSize,\n        pos: scrollPos,\n        scrollState,\n      });\n    }\n  };\n\n  public setInnerElement = (inner: Nullable<HTMLElement>) => {\n    this.inner = inner;\n    this.reflow();\n  };\n\n  public setHover(hover: boolean) {\n    if (this.state.active && this.state.hover !== hover) {\n      this.setState({ ...this.state, hover });\n    }\n  }\n\n  public get scrollBarState() {\n    return this.state.scrollState;\n  }\n\n  private get scrollBarStyles() {\n    const state = this.state;\n\n    if (this.props.axis === 'x') {\n      return cx(styles.scrollBarX(this.theme), globalClasses.scrollbarX, {\n        [styles.scrollBarXHover(this.theme)]: state.hover || state.scrolling,\n      });\n    }\n\n    return cx(styles.scrollBarY(this.theme), globalClasses.scrollbarY, {\n      [styles.scrollBarYHover(this.theme)]: state.hover || state.scrolling,\n    });\n  }\n\n  private refScroll = (element: HTMLElement | null) => {\n    const handleScrollWheel = (event: Event) => this.handleScrollWheel(event, this.props.axis);\n\n    if (!this.node && element) {\n      element.addEventListener('wheel', handleScrollWheel, { passive: false });\n    }\n    if (this.node && !element) {\n      this.node.removeEventListener('wheel', handleScrollWheel);\n    }\n    this.node = element;\n  };\n\n  private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.inner) {\n      return;\n    }\n\n    const { offset, size, pos, coord } = scrollSizeParametersNames[this.props.axis];\n\n    const initialCoord = event[coord];\n    const target: Document = window.document;\n    const initialScrollPos = this.inner[pos];\n    const state = this.state;\n\n    const mouseMove = (mouseMoveEvent: MouseEvent) => {\n      if (!this.inner) {\n        return;\n      }\n\n      const ratio = (this.inner[size] - this.inner[offset]) / (this.inner[offset] - state.size);\n      const delta = (mouseMoveEvent[coord] - initialCoord) * ratio;\n\n      this.inner[pos] = initialScrollPos + delta;\n\n      if (mouseMoveEvent.preventDefault) {\n        mouseMoveEvent.preventDefault();\n      }\n\n      if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\n        (\n          mouseMoveEvent as MouseEvent & {\n            returnValue: boolean;\n          }\n        ).returnValue = false;\n      }\n    };\n\n    const mouseUp = () => {\n      target.removeEventListener('mousemove', mouseMove);\n      target.removeEventListener('mouseup', mouseUp);\n      this.setState({ ...this.state, scrolling: false });\n    };\n\n    target.addEventListener('mousemove', mouseMove);\n    target.addEventListener('mouseup', mouseUp);\n    this.setState({ ...this.state, scrolling: true });\n\n    event.preventDefault();\n  };\n\n  private handleScrollWheel = (event: Event, axis: ScrollAxis) => {\n    if (!this.inner || !(event instanceof WheelEvent) || (axis === 'x' && !event.shiftKey)) {\n      return;\n    }\n\n    const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n    const scrollSize = this.inner[size];\n    const scrollPos = this.inner[pos];\n    const offsetHeight = this.inner[offset];\n\n    if (event.deltaY > 0 && scrollSize <= scrollPos + offsetHeight) {\n      return;\n    }\n    if (event.deltaY < 0 && scrollPos <= 0) {\n      return;\n    }\n\n    this.inner[pos] += event.deltaY;\n\n    event.preventDefault();\n  };\n\n  private getImmediateScrollState = (): ScrollBarScrollState => {\n    const { pos, size, clientSize } = scrollSizeParametersNames[this.props.axis];\n\n    if (!this.inner || this.inner[pos] === 0) {\n      return 'begin';\n    }\n\n    if (this.inner[pos] === this.inner[size] - this.inner[clientSize]) {\n      return 'end';\n    }\n\n    return 'middle';\n  };\n}\n"]}

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

@@ -0,0 +1,23 @@
+import { ScrollBarState } from './ScrollBar';
+export declare const MIN_SCROLL_SIZE = 20;
+export declare const defaultScrollbarState: ScrollBarState;
+export declare const scrollSizeParametersNames: {
+    readonly x: {
+        readonly offset: "offsetWidth";
+        readonly size: "scrollWidth";
+        readonly pos: "scrollLeft";
+        readonly coord: "clientX";
+        readonly clientSize: "clientWidth";
+        readonly customScrollPos: "left";
+        readonly customScrollSize: "width";
+    };
+    readonly y: {
+        readonly offset: "offsetHeight";
+        readonly size: "scrollHeight";
+        readonly pos: "scrollTop";
+        readonly coord: "clientY";
+        readonly clientSize: "clientHeight";
+        readonly customScrollPos: "top";
+        readonly customScrollSize: "height";
+    };
+};

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

@@ -0,0 +1,33 @@
+"use strict";exports.__esModule = true;exports.scrollSizeParametersNames = exports.defaultScrollbarState = exports.MIN_SCROLL_SIZE = void 0;
+
+var MIN_SCROLL_SIZE = 20;exports.MIN_SCROLL_SIZE = MIN_SCROLL_SIZE;
+
+var defaultScrollbarState = {
+  size: 0,
+  pos: 0,
+  // Mouse is moving where big scrollbar can be located.
+  hover: false,
+  active: false,
+  // True when scroll is following mouse (mouse down on scroll).
+  scrolling: false,
+  scrollState: 'begin' };exports.defaultScrollbarState = defaultScrollbarState;
+
+
+var scrollSizeParametersNames = {
+  x: {
+    offset: 'offsetWidth',
+    size: 'scrollWidth',
+    pos: 'scrollLeft',
+    coord: 'clientX',
+    clientSize: 'clientWidth',
+    customScrollPos: 'left',
+    customScrollSize: 'width' },
+
+  y: {
+    offset: 'offsetHeight',
+    size: 'scrollHeight',
+    pos: 'scrollTop',
+    coord: 'clientY',
+    clientSize: 'clientHeight',
+    customScrollPos: 'top',
+    customScrollSize: 'height' } };exports.scrollSizeParametersNames = scrollSizeParametersNames;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ScrollContainer.constants.ts"],"names":["MIN_SCROLL_SIZE","defaultScrollbarState","size","pos","hover","active","scrolling","scrollState","scrollSizeParametersNames","x","offset","coord","clientSize","customScrollPos","customScrollSize","y"],"mappings":";;AAEO,IAAMA,eAAe,GAAG,EAAxB,C;;AAEA,IAAMC,qBAAqC,GAAG;AACnDC,EAAAA,IAAI,EAAE,CAD6C;AAEnDC,EAAAA,GAAG,EAAE,CAF8C;AAGnD;AACAC,EAAAA,KAAK,EAAE,KAJ4C;AAKnDC,EAAAA,MAAM,EAAE,KAL2C;AAMnD;AACAC,EAAAA,SAAS,EAAE,KAPwC;AAQnDC,EAAAA,WAAW,EAAE,OARsC,EAA9C,C;;;AAWA,IAAMC,yBAAyB,GAAG;AACvCC,EAAAA,CAAC,EAAE;AACDC,IAAAA,MAAM,EAAE,aADP;AAEDR,IAAAA,IAAI,EAAE,aAFL;AAGDC,IAAAA,GAAG,EAAE,YAHJ;AAIDQ,IAAAA,KAAK,EAAE,SAJN;AAKDC,IAAAA,UAAU,EAAE,aALX;AAMDC,IAAAA,eAAe,EAAE,MANhB;AAODC,IAAAA,gBAAgB,EAAE,OAPjB,EADoC;;AAUvCC,EAAAA,CAAC,EAAE;AACDL,IAAAA,MAAM,EAAE,cADP;AAEDR,IAAAA,IAAI,EAAE,cAFL;AAGDC,IAAAA,GAAG,EAAE,WAHJ;AAIDQ,IAAAA,KAAK,EAAE,SAJN;AAKDC,IAAAA,UAAU,EAAE,cALX;AAMDC,IAAAA,eAAe,EAAE,KANhB;AAODC,IAAAA,gBAAgB,EAAE,QAPjB,EAVoC,EAAlC,C","sourcesContent":["import { ScrollBarState } from './ScrollBar';\n\nexport const MIN_SCROLL_SIZE = 20;\n\nexport const defaultScrollbarState: ScrollBarState = {\n  size: 0,\n  pos: 0,\n  // Mouse is moving where big scrollbar can be located.\n  hover: false,\n  active: false,\n  // True when scroll is following mouse (mouse down on scroll).\n  scrolling: false,\n  scrollState: 'begin',\n};\n\nexport const scrollSizeParametersNames = {\n  x: {\n    offset: 'offsetWidth',\n    size: 'scrollWidth',\n    pos: 'scrollLeft',\n    coord: 'clientX',\n    clientSize: 'clientWidth',\n    customScrollPos: 'left',\n    customScrollSize: 'width',\n  },\n  y: {\n    offset: 'offsetHeight',\n    size: 'scrollHeight',\n    pos: 'scrollTop',\n    coord: 'clientY',\n    clientSize: 'clientHeight',\n    customScrollPos: 'top',\n    customScrollSize: 'height',\n  },\n} as const;\n"]}