@skbkontur/react-ui 5.6.1-85c65.0 → 5.6.1-e2bc4.0

package/components/ResponsiveLayout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../components/ResponsiveLayout/types.ts"],"names":[],"mappings":"","sourcesContent":["export type MediaQueriesType = Record<string, string>;\nexport type EmptyObject = Record<never, never>;\n\nexport interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {\n  customMediaQueries?: MQ;\n}\n\nexport type ResponsiveLayoutFlags<T extends MediaQueriesType = EmptyObject> = {\n  [K in keyof T]?: boolean;\n} & ResponsiveLayoutFlagsInternal;\n\nexport interface ResponsiveLayoutFlagsInternal {\n  isMobile: boolean;\n}\n"]}

package/components/ResponsiveLayout/useResponsiveLayout.d.ts

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

package/components/ResponsiveLayout/useResponsiveLayout.js

@@ -0,0 +1,73 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createRef, useCallback, useContext, useEffect, useState } from 'react';
+import { useGlobal } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents.js';
+export function useResponsiveLayout(_a) {
+    var _b = _a === void 0 ? {} : _a, customMediaQueries = _b.customMediaQueries;
+    var theme = useContext(ThemeContext);
+    var globalObject = useGlobal();
+    var allMediaQueries = Object.entries(__assign({ isMobile: theme.mobileMediaQuery }, customMediaQueries)).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return ({
+            flag: key,
+            query: value,
+            ref: createRef(),
+        });
+    });
+    var getLayoutFromGlobal = function () {
+        return allMediaQueries.reduce(function (result, mediaQuery) {
+            var _a;
+            return Object.assign(result, (_a = {}, _a[mediaQuery.flag] = checkMatches(globalObject, mediaQuery.query), _a));
+        }, {});
+    };
+    var _c = useState(getLayoutFromGlobal()), state = _c[0], setState = _c[1];
+    var prepareMediaQueries = useCallback(function () {
+        if (!theme) {
+            return;
+        }
+        allMediaQueries.forEach(function (mediaQuery) {
+            return (mediaQuery.ref.current = addResponsiveLayoutListener(globalObject, mediaQuery.query, checkLayoutsMediaQueries));
+        });
+        // Checking for SSR use case
+        var globalLayout = getLayoutFromGlobal();
+        var hasChangedQuery = Object.entries(globalLayout).find(function (_a) {
+            var key = _a[0], value = _a[1];
+            return state[key] !== value;
+        });
+        if (hasChangedQuery) {
+            setState(globalLayout);
+        }
+    }, [theme]);
+    var checkLayoutsMediaQueries = useCallback(function (e) {
+        if (!theme) {
+            return;
+        }
+        allMediaQueries.forEach(function (mediaQuery) {
+            if (e.media === mediaQuery.query) {
+                setState(function (prevState) {
+                    var _a;
+                    return (__assign(__assign({}, prevState), (_a = {}, _a[mediaQuery.flag] = e.matches, _a)));
+                });
+            }
+        });
+    }, [theme]);
+    useEffect(function () {
+        prepareMediaQueries();
+        return function () {
+            allMediaQueries.forEach(function (mediaQuery) { var _a; return (_a = mediaQuery.ref.current) === null || _a === void 0 ? void 0 : _a.remove(); });
+        };
+    }, []);
+    return state;
+}
+//# sourceMappingURL=useResponsiveLayout.js.map

package/components/ResponsiveLayout/useResponsiveLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveLayout.js","sourceRoot":"","sources":["../../../components/ResponsiveLayout/useResponsiveLayout.ts"],"names":[],"mappings":"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","sourcesContent":["import type React from 'react';\nimport { createRef, useCallback, useContext, useEffect, useState } from 'react';\n\nimport { useGlobal } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\n\nimport type { EmptyObject, MediaQueriesType, ResponsiveLayoutFlags, ResponsiveLayoutOptions } from './types.js';\nimport { addResponsiveLayoutListener, checkMatches } from './ResponsiveLayoutEvents.js';\n\nexport function useResponsiveLayout<T extends MediaQueriesType = EmptyObject>({\n  customMediaQueries,\n}: ResponsiveLayoutOptions<T> = {}): ResponsiveLayoutFlags<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"]}

package/components/ScrollContainer/ScrollBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Nullable } from '../../typings/utility-types';
-import type { ScrollContainerProps } from './ScrollContainer';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { ScrollContainerProps } from './ScrollContainer.js';
 export type ScrollAxis = 'x' | 'y';
 export type ScrollBarScrollState = 'begin' | 'middle' | 'end';
 export interface ScrollBarState {

package/components/ScrollContainer/ScrollBar.js

@@ -0,0 +1,227 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { isInstanceOf } from '../../lib/isInstanceOf.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants.js';
+import { getStyles, globalClasses } from './ScrollContainer.styles.js';
+import { getScrollSizeParams } from './ScrollContainer.helpers.js';
+var ScrollBar = /** @class */ (function (_super) {
+    __extends(ScrollBar, _super);
+    function ScrollBar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.containerRef = React.createRef();
+        _this.state = __assign({}, defaultScrollbarState);
+        _this.renderMain = function () {
+            var _a, _b;
+            var state = _this.state;
+            var props = _this.props;
+            if (!state.active) {
+                return null;
+            }
+            var _c = scrollSizeParametersNames[_this.props.axis], customScrollPos = _c.customScrollPos, customScrollSize = _c.customScrollSize;
+            var classNames = _this.cx(props.className, _this.styles.scrollBar(_this.theme), _this.scrollBarStyles, (_a = {},
+                _a[_this.styles.scrollBarInvert(_this.theme)] = props.invert,
+                _a[_this.styles.visibleScrollBar()] = props.isVisible,
+                _a));
+            var inlineStyles = (_b = {},
+                _b[customScrollPos] = "".concat(state.pos, "%"),
+                _b[customScrollSize] = "".concat(state.size, "%"),
+                _b);
+            return (React.createElement("div", { ref: _this.containerRef, className: _this.scrollBarContainerClassNames, style: props.offset },
+                React.createElement("div", { ref: _this.refScroll, style: inlineStyles, className: classNames, onMouseDown: _this.handleScrollMouseDown, "data-tid": "ScrollContainer__ScrollBar-".concat(props.axis) })));
+        };
+        _this.reflow = function () {
+            var _a, _b;
+            if (!_this.inner) {
+                return;
+            }
+            var props = _this.props;
+            var state = _this.state;
+            var _c = getScrollSizeParams(_this.inner, props.axis), scrollSize = _c.scrollSize, scrollPos = _c.scrollPos, scrollActive = _c.scrollActive;
+            if (!scrollActive && !state.active) {
+                return;
+            }
+            if (state.active !== scrollActive || state.size !== scrollSize || state.pos !== scrollPos) {
+                var scrollState = _this.getImmediateScrollState();
+                if (state.pos !== scrollPos) {
+                    (_b = (_a = _this.props).onScroll) === null || _b === void 0 ? void 0 : _b.call(_a, props.axis, scrollState, state.scrollState);
+                }
+                _this.setState(__assign(__assign({}, _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 (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 _a = scrollSizeParametersNames[_this.props.axis], offset = _a.offset, size = _a.size, pos = _a.pos, coord = _a.coord;
+            var initialCoord = event[coord];
+            var target = _this.globalObject.document;
+            var initialScrollPos = _this.inner[pos];
+            var state = _this.state;
+            var mouseMove = function (mouseMoveEvent) {
+                if (!_this.inner || !_this.containerRef.current) {
+                    return;
+                }
+                var remainingScrollingContent = _this.inner[size] - _this.inner[offset];
+                var remainingScrollingSpace = (_this.containerRef.current[offset] / 100) * (100 - state.size);
+                var ratio = remainingScrollingContent / remainingScrollingSpace;
+                var delta = (mouseMoveEvent[coord] - initialCoord) * ratio;
+                _this.inner[pos] = initialScrollPos + delta;
+                if (mouseMoveEvent.preventDefault) {
+                    mouseMoveEvent.preventDefault();
+                }
+                if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {
+                    mouseMoveEvent.returnValue = false;
+                }
+            };
+            var mouseUp = function () {
+                target === null || target === void 0 ? void 0 : target.removeEventListener('mousemove', mouseMove);
+                target === null || target === void 0 ? void 0 : target.removeEventListener('mouseup', mouseUp);
+                _this.setState(__assign(__assign({}, _this.state), { scrollingByMouseDrag: false }));
+            };
+            target === null || target === void 0 ? void 0 : target.addEventListener('mousemove', mouseMove);
+            target === null || target === void 0 ? void 0 : target.addEventListener('mouseup', mouseUp);
+            _this.setState(__assign(__assign({}, _this.state), { scrollingByMouseDrag: true }));
+            event.preventDefault();
+        };
+        _this.handleScrollWheel = function (event, axis) {
+            if (!_this.inner || !isInstanceOf(event, _this.globalObject.WheelEvent) || (axis === 'x' && !event.shiftKey)) {
+                return;
+            }
+            var _a = scrollSizeParametersNames[axis], offset = _a.offset, size = _a.size, pos = _a.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 _a = scrollSizeParametersNames[_this.props.axis], pos = _a.pos, size = _a.size, clientSize = _a.clientSize;
+            if (!_this.inner || _this.inner[pos] === 0) {
+                return 'begin';
+            }
+            // Zoom in Chrome causes problems
+            // https://github.com/skbkontur/retail-ui/pull/2705#issue-806286945
+            var maxScrollPos = _this.inner[size] - _this.inner[clientSize];
+            if (Math.abs(maxScrollPos - _this.inner[pos]) <= 1) {
+                return 'end';
+            }
+            return 'middle';
+        };
+        return _this;
+    }
+    ScrollBar.prototype.componentDidMount = function () {
+        this.reflow();
+    };
+    ScrollBar.prototype.componentDidUpdate = function () {
+        this.reflow();
+    };
+    ScrollBar.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    ScrollBar.prototype.setHover = function (hover) {
+        if (this.state.active && this.state.hover !== hover) {
+            this.setState(__assign(__assign({}, this.state), { hover: hover }));
+        }
+    };
+    ScrollBar.prototype.getHover = function () {
+        return this.state.hover;
+    };
+    Object.defineProperty(ScrollBar.prototype, "scrollBarState", {
+        get: function () {
+            return this.state.scrollState;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollBar.prototype, "scrollBarStyles", {
+        get: function () {
+            var _a, _b;
+            var state = this.state;
+            if (this.props.axis === 'x') {
+                return this.cx(this.styles.scrollBarX(this.theme), globalClasses.scrollbarX, (_a = {},
+                    _a[this.styles.scrollBarXHover(this.theme)] = state.hover || state.scrollingByMouseDrag,
+                    _a));
+            }
+            return this.cx(this.styles.scrollBarY(this.theme), globalClasses.scrollbarY, (_b = {},
+                _b[this.styles.scrollBarYHover(this.theme)] = state.hover || state.scrollingByMouseDrag,
+                _b));
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ScrollBar.prototype, "scrollBarContainerClassNames", {
+        get: function () {
+            var axis = this.props.axis;
+            if (axis === 'x') {
+                return this.cx(globalClasses.scrollbarContainerX, this.styles.scrollBarContainerX(this.theme));
+            }
+            return this.cx(globalClasses.scrollbarContainerY, this.styles.scrollBarContainerY());
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ScrollBar = __decorate([
+        withRenderEnvironment
+    ], ScrollBar);
+    return ScrollBar;
+}(React.Component));
+export { ScrollBar };
+//# sourceMappingURL=ScrollBar.js.map

package/components/ScrollContainer/ScrollBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBar.js","sourceRoot":"","sources":["../../../components/ScrollContainer/ScrollBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { defaultScrollbarState, scrollSizeParametersNames } from './ScrollContainer.constants.js';\nimport { getStyles, globalClasses } from './ScrollContainer.styles.js';\nimport { getScrollSizeParams } from './ScrollContainer.helpers.js';\nimport type { ScrollContainerProps } from './ScrollContainer.js';\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\n@withRenderEnvironment\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 emotion!: Emotion;\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(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\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 = 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 = (): void => {\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>): void => {\n    this.inner = inner;\n    this.reflow();\n  };\n\n  public setHover(hover: boolean): void {\n    if (this.state.active && this.state.hover !== hover) {\n      this.setState({ ...this.state, hover });\n    }\n  }\n\n  public getHover(): boolean {\n    return this.state.hover;\n  }\n\n  public get scrollBarState(): ScrollBarScrollState {\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"]}

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

@@ -1,4 +1,4 @@
-import type { ScrollBarState } from './ScrollBar';
+import type { ScrollBarState } from './ScrollBar.js';
 export declare const MIN_SCROLL_SIZE = 20;
 export declare const defaultScrollbarState: ScrollBarState;
 export declare const scrollSizeParametersNames: {

package/components/ScrollContainer/ScrollContainer.constants.js

@@ -0,0 +1,32 @@
+export var MIN_SCROLL_SIZE = 20;
+export 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).
+    scrollingByMouseDrag: false,
+    scrollState: 'begin',
+};
+export 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',
+    },
+};
+//# sourceMappingURL=ScrollContainer.constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContainer.constants.js","sourceRoot":"","sources":["../../../components/ScrollContainer/ScrollContainer.constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,IAAM,eAAe,GAAG,EAAE,CAAC;AAElC,MAAM,CAAC,IAAM,qBAAqB,GAAmB;IACnD,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,sDAAsD;IACtD,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,8DAA8D;IAC9D,oBAAoB,EAAE,KAAK;IAC3B,WAAW,EAAE,OAAO;CACrB,CAAC;AAEF,MAAM,CAAC,IAAM,yBAAyB,GAAG;IACvC,CAAC,EAAE;QACD,MAAM,EAAE,aAAa;QACrB,IAAI,EAAE,aAAa;QACnB,GAAG,EAAE,YAAY;QACjB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,aAAa;QACzB,eAAe,EAAE,MAAM;QACvB,gBAAgB,EAAE,OAAO;KAC1B;IACD,CAAC,EAAE;QACD,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,cAAc;QACpB,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,SAAS;QAChB,UAAU,EAAE,cAAc;QAC1B,eAAe,EAAE,KAAK;QACtB,gBAAgB,EAAE,QAAQ;KAC3B;CACO,CAAC","sourcesContent":["import type { ScrollBarState } from './ScrollBar.js';\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  scrollingByMouseDrag: 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"]}

package/components/ScrollContainer/ScrollContainer.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { CommonProps } from '../../internal/CommonWrapper';
-import type { Nullable } from '../../typings/utility-types';
-import type { TGetRootNode } from '../../lib/rootNode';
-import type { ScrollAxis } from './ScrollBar';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { ScrollAxis } from './ScrollBar.js';
 export type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
 export type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
 export type ScrollBehaviour = 'auto' | 'smooth';

package/components/ScrollContainer/ScrollContainer.helpers.d.ts

@@ -1,5 +1,5 @@
-import type { ScrollBarScrollState } from './ScrollBar';
-import type { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';
+import type { ScrollBarScrollState } from './ScrollBar.js';
+import type { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer.js';
 export interface ScrollSizeParams {
     scrollActive: boolean;
     scrollSize: number;

package/components/ScrollContainer/ScrollContainer.helpers.js

@@ -0,0 +1,50 @@
+import { MIN_SCROLL_SIZE, scrollSizeParametersNames } from './ScrollContainer.constants.js';
+export var getScrollSizeParams = function (inner, axis) {
+    var _a = scrollSizeParametersNames[axis], offset = _a.offset, size = _a.size, pos = _a.pos;
+    var contentSize = inner[size];
+    var scrollOffset = inner[pos];
+    var containerSize = inner[offset];
+    var scrollActive = containerSize < contentSize;
+    var scrollSize = 0;
+    var scrollPos = 0;
+    if (scrollActive) {
+        scrollSize = Math.max((containerSize / contentSize) * containerSize, MIN_SCROLL_SIZE);
+        scrollPos = (scrollOffset / (contentSize - containerSize)) * (containerSize - scrollSize);
+        // Convert pixels to percentages
+        scrollSize = containerSize && (100 / containerSize) * scrollSize;
+        scrollPos = containerSize && (100 / containerSize) * scrollPos;
+    }
+    return {
+        scrollActive: scrollActive,
+        scrollSize: scrollSize,
+        scrollPos: scrollPos,
+    };
+};
+export var getScrollYOffset = function (element, container) {
+    var elementTopOffset = element.offsetTop;
+    if (container.scrollTop > elementTopOffset) {
+        return elementTopOffset;
+    }
+    var offset = elementTopOffset + element.scrollHeight - container.offsetHeight;
+    if (container.scrollTop < offset) {
+        return offset;
+    }
+    return container.scrollTop;
+};
+export var convertScrollbarXScrollState = function (state) {
+    var scrollBarState = {
+        begin: 'left',
+        end: 'right',
+        middle: 'scroll',
+    };
+    return scrollBarState[state];
+};
+export var convertScrollbarYScrollState = function (state) {
+    var scrollBarState = {
+        begin: 'top',
+        end: 'bottom',
+        middle: 'scroll',
+    };
+    return scrollBarState[state];
+};
+//# sourceMappingURL=ScrollContainer.helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollContainer.helpers.js","sourceRoot":"","sources":["../../../components/ScrollContainer/ScrollContainer.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAU5F,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,KAAkB,EAAE,IAAe;IAC/D,IAAA,KAAwB,yBAAyB,CAAC,IAAI,CAAC,EAArD,MAAM,YAAA,EAAE,IAAI,UAAA,EAAE,GAAG,SAAoC,CAAC;IAE9D,IAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,IAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAChC,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEpC,IAAM,YAAY,GAAG,aAAa,GAAG,WAAW,CAAC;IAEjD,IAAI,UAAU,GAAG,CAAC,CAAC;IACnB,IAAI,SAAS,GAAG,CAAC,CAAC;IAElB,IAAI,YAAY,EAAE,CAAC;QACjB,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,aAAa,GAAG,WAAW,CAAC,GAAG,aAAa,EAAE,eAAe,CAAC,CAAC;QACtF,SAAS,GAAG,CAAC,YAAY,GAAG,CAAC,WAAW,GAAG,aAAa,CAAC,CAAC,GAAG,CAAC,aAAa,GAAG,UAAU,CAAC,CAAC;QAE1F,gCAAgC;QAChC,UAAU,GAAG,aAAa,IAAI,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,UAAU,CAAC;QACjE,SAAS,GAAG,aAAa,IAAI,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,SAAS,CAAC;IACjE,CAAC;IAED,OAAO;QACL,YAAY,cAAA;QACZ,UAAU,YAAA;QACV,SAAS,WAAA;KACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,OAAoB,EAAE,SAAsB;IAC3E,IAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC;IAE3C,IAAI,SAAS,CAAC,SAAS,GAAG,gBAAgB,EAAE,CAAC;QAC3C,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED,IAAM,MAAM,GAAG,gBAAgB,GAAG,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;IAChF,IAAI,SAAS,CAAC,SAAS,GAAG,MAAM,EAAE,CAAC;QACjC,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,OAAO,SAAS,CAAC,SAAS,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,4BAA4B,GAAG,UAAC,KAA2B;IACtE,IAAM,cAAc,GAA8D;QAChF,KAAK,EAAE,MAAM;QACb,GAAG,EAAE,OAAO;QACZ,MAAM,EAAE,QAAQ;KACjB,CAAC;IAEF,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,4BAA4B,GAAG,UAAC,KAA2B;IACtE,IAAM,cAAc,GAA8D;QAChF,KAAK,EAAE,KAAK;QACZ,GAAG,EAAE,QAAQ;QACb,MAAM,EAAE,QAAQ;KACjB,CAAC;IAEF,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC","sourcesContent":["import { MIN_SCROLL_SIZE, scrollSizeParametersNames } from './ScrollContainer.constants.js';\nimport type { ScrollBarScrollState } from './ScrollBar.js';\nimport type { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer.js';\n\nexport interface ScrollSizeParams {\n  scrollActive: boolean;\n  scrollSize: number;\n  scrollPos: number;\n}\n\nexport const getScrollSizeParams = (inner: HTMLElement, axis: 'x' | 'y'): ScrollSizeParams => {\n  const { offset, size, pos } = scrollSizeParametersNames[axis];\n\n  const contentSize = inner[size];\n  const scrollOffset = inner[pos];\n  const containerSize = inner[offset];\n\n  const scrollActive = containerSize < contentSize;\n\n  let scrollSize = 0;\n  let scrollPos = 0;\n\n  if (scrollActive) {\n    scrollSize = Math.max((containerSize / contentSize) * containerSize, MIN_SCROLL_SIZE);\n    scrollPos = (scrollOffset / (contentSize - containerSize)) * (containerSize - scrollSize);\n\n    // Convert pixels to percentages\n    scrollSize = containerSize && (100 / containerSize) * scrollSize;\n    scrollPos = containerSize && (100 / containerSize) * scrollPos;\n  }\n\n  return {\n    scrollActive,\n    scrollSize,\n    scrollPos,\n  };\n};\n\nexport const getScrollYOffset = (element: HTMLElement, container: HTMLElement): number => {\n  const elementTopOffset = element.offsetTop;\n\n  if (container.scrollTop > elementTopOffset) {\n    return elementTopOffset;\n  }\n\n  const offset = elementTopOffset + element.scrollHeight - container.offsetHeight;\n  if (container.scrollTop < offset) {\n    return offset;\n  }\n\n  return container.scrollTop;\n};\n\nexport const convertScrollbarXScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateX => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateX> = {\n    begin: 'left',\n    end: 'right',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n\nexport const convertScrollbarYScrollState = (state: ScrollBarScrollState): ScrollContainerScrollStateY => {\n  const scrollBarState: Record<ScrollBarScrollState, ScrollContainerScrollStateY> = {\n    begin: 'top',\n    end: 'bottom',\n    middle: 'scroll',\n  };\n\n  return scrollBarState[state];\n};\n"]}