@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/ScrollContainer/ScrollBar.js

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

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

@@ -1,23 +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";
-    };
-};
+import type { ScrollBarState } from './ScrollBar.js';
+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/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,121 +1,114 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { Nullable } from '../../typings/utility-types';
-import { ScrollAxis } from './ScrollBar';
-export type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
-export type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
-export type ScrollContainerScrollState = ScrollContainerScrollStateY;
-export type ScrollBehaviour = 'auto' | 'smooth';
-type OffsetCSSPropsY = 'top' | 'right' | 'bottom';
-type OffsetCSSPropsX = 'right' | 'bottom' | 'left';
-export interface ScrollContainerProps extends CommonProps {
-    /** Инвертирует цвет скроллбара.
-     * @default false */
-    invert?: boolean;
-    /** Задает максимальную высоту. */
-    maxHeight?: React.CSSProperties['maxHeight'];
-    /** Задает максимальную ширину. */
-    maxWidth?: React.CSSProperties['maxWidth'];
-    /** Отключает скролл окна, когда меню открыто.
-     * @default false */
-    preventWindowScroll?: boolean;
-    /** Задает поведение скролла. (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
-     * @default 'auto' */
-    scrollBehaviour?: ScrollBehaviour;
-    /** Задает функцию, которая вызывается при скроле по горизонтали. */
-    onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;
-    /** Задает функцию, которая вызывается при скроле по вертикали. */
-    onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;
-    /** Задает функцию, которая вызывается при скроле.
-     * @deprecated use onScroll */
-    onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void;
-    /** Задает функцию, которая вызывается при скроле. */
-    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
-    /** Отключает кастомный скролл. */
-    disabled?: boolean;
-    /** Задает смещение вертикального скроллбара. */
-    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
-    /** Задает смещение горизонтального скроллбара. */
-    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
-    /** Определяет, нужно ли показывать скроллбар. */
-    showScrollBar?: 'always' | 'scroll' | 'hover' | 'never';
-    /** Устанавливает задержку в миллисекундах перед скрытием скроллбара.
-     * Работает только при hideScrollBar = true или showScrollBar = 'scroll' | 'hover'. */
-    hideScrollBarDelay?: number;
-    /** Отключает анимацию. */
-    disableAnimations?: boolean;
-    scrollRef?: React.Ref<HTMLDivElement | null>;
-}
-export declare const ScrollContainerDataTids: {
-    readonly root: "ScrollContainer__root";
-    readonly inner: "ScrollContainer__inner";
-};
-type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'disableAnimations' | 'hideScrollBarDelay' | 'showScrollBar'>>;
-interface ScrollContainerState {
-    isScrollBarXVisible: boolean;
-    isScrollBarYVisible: boolean;
-    isHovered: boolean;
-}
-/**
- * `ScrollContainer` используется для создания контейнера с кастомными полосами прокрутки, который обеспечивает прокрутку содержимого по горизонтали или вертикали.
- */
-export declare class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {
-    static __KONTUR_REACT_UI__: string;
-    static displayName: string;
-    inner: Nullable<HTMLElement>;
-    static propTypes: {
-        invert: PropTypes.Requireable<boolean>;
-        maxWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        maxHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        scrollBehaviour: PropTypes.Requireable<string>;
-        preventWindowScroll: PropTypes.Requireable<boolean>;
-        onScrollStateChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: DefaultProps;
-    private getProps;
-    private scrollX;
-    private scrollY;
-    private setRootNode;
-    private initialIsScrollBarVisible;
-    state: ScrollContainerState;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: ScrollContainerProps): void;
-    render: () => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
-    /**
-     * @public
-     * @param {Element} element
-     */
-    scrollTo(element: Nullable<HTMLElement>): void;
-    /**
-     * @public
-     */
-    scrollToTop(): void;
-    /**
-     * @public
-     */
-    scrollToBottom(): void;
-    /**
-     * @public
-     */
-    scrollToLeft(): void;
-    /**
-     * @public
-     */
-    scrollToRight(): void;
-    hasScrollBar(axis: ScrollAxis): boolean;
-    private renderScrollbar;
-    private handleScrollStateChange;
-    private handleScroll;
-    private refScrollBarY;
-    private refScrollBarX;
-    private refInner;
-    private handleNativeScroll;
-    private showScrollBarOnMouseWheel;
-    private readonly hideScrollBar;
-    private handleInnerScrollWheel;
-    private handleMouseMove;
-    private handleMouseLeave;
-    private updateInnerElement;
-}
-export {};
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';
+import type { ScrollAxis } from './ScrollBar.js';
+export type ScrollContainerScrollStateX = 'left' | 'scroll' | 'right';
+export type ScrollContainerScrollStateY = 'top' | 'scroll' | 'bottom';
+export type ScrollContainerScrollState = ScrollContainerScrollStateY;
+export type ScrollBehaviour = 'auto' | 'smooth';
+type OffsetCSSPropsY = 'top' | 'right' | 'bottom';
+type OffsetCSSPropsX = 'right' | 'bottom' | 'left';
+export interface ScrollContainerProps extends CommonProps {
+    /** Инвертирует цвет скроллбара.
+     * @default false */
+    invert?: boolean;
+    /** Задает максимальную высоту. */
+    maxHeight?: React.CSSProperties['maxHeight'];
+    /** Задает максимальную ширину. */
+    maxWidth?: React.CSSProperties['maxWidth'];
+    /** Отключает скролл окна, когда меню открыто.
+     * @default false */
+    preventWindowScroll?: boolean;
+    /** Задает поведение скролла. (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
+     * @default 'auto' */
+    scrollBehaviour?: ScrollBehaviour;
+    /** Задает функцию, которая вызывается при скроле по горизонтали. */
+    onScrollStateChangeX?: (scrollState: ScrollContainerScrollStateX) => void;
+    /** Задает функцию, которая вызывается при скроле по вертикали. */
+    onScrollStateChangeY?: (scrollState: ScrollContainerScrollStateY) => void;
+    /** Задает функцию, которая вызывается при скроле.
+     * @deprecated use onScroll */
+    onScrollStateChange?: (scrollYState: ScrollContainerScrollState) => void;
+    /** Задает функцию, которая вызывается при скроле. */
+    onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
+    /** Отключает кастомный скролл. */
+    disabled?: boolean;
+    /** Задает смещение вертикального скроллбара. */
+    offsetY?: Partial<Record<OffsetCSSPropsY, React.CSSProperties[OffsetCSSPropsY]>>;
+    /** Задает смещение горизонтального скроллбара. */
+    offsetX?: Partial<Record<OffsetCSSPropsX, React.CSSProperties[OffsetCSSPropsX]>>;
+    /** Определяет, нужно ли показывать скроллбар. */
+    showScrollBar?: 'always' | 'scroll' | 'hover' | 'never';
+    /** Устанавливает задержку в миллисекундах перед скрытием скроллбара.
+     * Работает только при hideScrollBar = true или showScrollBar = 'scroll' | 'hover'. */
+    hideScrollBarDelay?: number;
+    /** Отключает анимацию. */
+    disableAnimations?: boolean;
+    scrollRef?: React.Ref<HTMLDivElement | null>;
+}
+export declare const ScrollContainerDataTids: {
+    readonly root: "ScrollContainer__root";
+    readonly inner: "ScrollContainer__inner";
+};
+type DefaultProps = Required<Pick<ScrollContainerProps, 'invert' | 'scrollBehaviour' | 'preventWindowScroll' | 'disableAnimations' | 'hideScrollBarDelay' | 'showScrollBar'>>;
+interface ScrollContainerState {
+    isScrollBarXVisible: boolean;
+    isScrollBarYVisible: boolean;
+    isHovered: boolean;
+}
+/**
+ * `ScrollContainer` используется для создания контейнера с кастомными полосами прокрутки, который обеспечивает прокрутку содержимого по горизонтали или вертикали.
+ */
+export declare class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    inner: Nullable<HTMLElement>;
+    static defaultProps: DefaultProps;
+    private getProps;
+    private scrollX;
+    private scrollY;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private initialIsScrollBarVisible;
+    state: ScrollContainerState;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ScrollContainerProps): void;
+    render: () => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    /**
+     * @public
+     * @param {Element} element
+     */
+    scrollTo(element: Nullable<HTMLElement>): void;
+    /**
+     * @public
+     */
+    scrollToTop(): void;
+    /**
+     * @public
+     */
+    scrollToBottom(): void;
+    /**
+     * @public
+     */
+    scrollToLeft(): void;
+    /**
+     * @public
+     */
+    scrollToRight(): void;
+    hasScrollBar(axis: ScrollAxis): boolean;
+    private renderScrollbar;
+    private handleScrollStateChange;
+    private handleScroll;
+    private refScrollBarY;
+    private refScrollBarX;
+    private refInner;
+    private handleNativeScroll;
+    private showScrollBarOnMouseWheel;
+    private readonly hideScrollBar;
+    private handleInnerScrollWheel;
+    private handleMouseMove;
+    private handleMouseLeave;
+    private updateInnerElement;
+}
+export {};

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

@@ -1,10 +1,10 @@
-import { ScrollBarScrollState } from './ScrollBar';
-import { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer';
-export declare const getScrollSizeParams: (inner: HTMLElement, axis: 'x' | 'y') => {
-    scrollActive: boolean;
-    scrollSize: number;
-    scrollPos: number;
-};
-export declare const getScrollYOffset: (element: HTMLElement, container: HTMLElement) => number;
-export declare const convertScrollbarXScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateX;
-export declare const convertScrollbarYScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateY;
+import type { ScrollBarScrollState } from './ScrollBar.js';
+import type { ScrollContainerScrollStateX, ScrollContainerScrollStateY } from './ScrollContainer.js';
+export declare const getScrollSizeParams: (inner: HTMLElement, axis: "x" | "y") => {
+    scrollActive: boolean;
+    scrollSize: number;
+    scrollPos: number;
+};
+export declare const getScrollYOffset: (element: HTMLElement, container: HTMLElement) => number;
+export declare const convertScrollbarXScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateX;
+export declare const convertScrollbarYScrollState: (state: ScrollBarScrollState) => ScrollContainerScrollStateY;