@alfalab/core-components 47.20.0-beta.3 → 47.20.0-beta.4

package/pure-cell/esm/components/footer/index.js

@@ -1,4 +1,4 @@
-export { F as Footer } from '../../component-e838a48b.js';
+export { F as Footer } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/footer-button/component.js

@@ -2,7 +2,7 @@ import 'tslib';
 import 'react';
 import '../../../../button/esm';
 import '../../../../shared/esm';
-export { d as FooterButton } from '../../component-e838a48b.js';
+export { d as FooterButton } from '../../component-1a7063a8.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/esm';

package/pure-cell/esm/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-e838a48b";
+export * from "../../component-1a7063a8";

package/pure-cell/esm/components/footer-button/index.js

@@ -1,4 +1,4 @@
-export { d as FooterButton } from '../../component-e838a48b.js';
+export { d as FooterButton } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/footer-text/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { e as FooterText } from '../../component-e838a48b.js';
+export { e as FooterText } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/esm/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-e838a48b";
+export * from "../../component-1a7063a8";

package/pure-cell/esm/components/footer-text/index.js

@@ -1,4 +1,4 @@
-export { e as FooterText } from '../../component-e838a48b.js';
+export { e as FooterText } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/graphics/component.js

@@ -2,7 +2,7 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../../../../shared/esm';
-export { G as Graphics } from '../../component-e838a48b.js';
+export { G as Graphics } from '../../component-1a7063a8.js';
 import 'react-merge-refs';
 import '../../../../comment/esm';
 import '@alfalab/hooks';

package/pure-cell/esm/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-e838a48b";
+export * from "../../component-1a7063a8";

package/pure-cell/esm/components/graphics/index.js

@@ -1,4 +1,4 @@
-export { G as Graphics } from '../../component-e838a48b.js';
+export { G as Graphics } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/main/component.js

@@ -2,7 +2,7 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../../../../shared/esm';
-export { M as Main } from '../../component-e838a48b.js';
+export { M as Main } from '../../component-1a7063a8.js';
 import 'react-merge-refs';
 import '../../../../comment/esm';
 import '@alfalab/hooks';

package/pure-cell/esm/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-e838a48b";
+export * from "../../component-1a7063a8";

package/pure-cell/esm/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-e838a48b.js';
+export { M as Main } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { T as Text } from '../../component-e838a48b.js';
+export { T as Text } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react-merge-refs';
 import '../../../../comment/esm';

package/pure-cell/esm/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-e838a48b";
+export * from "../../component-1a7063a8";

package/pure-cell/esm/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-e838a48b.js';
+export { T as Text } from '../../component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-e838a48b.js';
+export { P as PureCell } from './component-1a7063a8.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('./component-2061fb6d.js');
+var components_addon_component = require('./component-b5662fb3.js');
 
 
 

package/pure-cell/modern/component.js

@@ -3,7 +3,7 @@ import 'react-merge-refs';
 import 'classnames';
 import '../../comment/modern';
 import '@alfalab/hooks';
-export { P as PureCell, f as PureCellContext } from './component-a22727a6.js';
+export { P as PureCell, f as PureCellContext } from './component-fb43ab63.js';
 import '../../shared/modern';
 import '../../amount/modern';
 import '../../typography/modern';

package/pure-cell/modern/components/addon/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { A as Addon } from '../../component-a22727a6.js';
+export { A as Addon } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/addon/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/addon/index.js

@@ -1,4 +1,4 @@
-export { A as Addon } from '../../component-a22727a6.js';
+export { A as Addon } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/amount/component.js

@@ -3,7 +3,7 @@ import 'classnames';
 import '../../../../amount/modern';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { a as Amount } from '../../component-a22727a6.js';
+export { a as Amount } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/amount/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/amount/index.js

@@ -1,4 +1,4 @@
-export { a as Amount } from '../../component-a22727a6.js';
+export { a as Amount } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/amount-title/component.js

@@ -3,7 +3,7 @@ import 'classnames';
 import '../../../../amount/modern';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { b as AmountTitle } from '../../component-a22727a6.js';
+export { b as AmountTitle } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/amount-title/index.js

@@ -1,4 +1,4 @@
-export { b as AmountTitle } from '../../component-a22727a6.js';
+export { b as AmountTitle } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/category/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { C as Category } from '../../component-a22727a6.js';
+export { C as Category } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/category/index.js

@@ -1,4 +1,4 @@
-export { C as Category } from '../../component-a22727a6.js';
+export { C as Category } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/content/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { c as Content } from '../../component-a22727a6.js';
+export { c as Content } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/content/index.js

@@ -1,4 +1,4 @@
-export { c as Content } from '../../component-a22727a6.js';
+export { c as Content } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { F as Footer } from '../../component-a22727a6.js';
+export { F as Footer } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/footer/index.js

@@ -1,4 +1,4 @@
-export { F as Footer } from '../../component-a22727a6.js';
+export { F as Footer } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-button/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../button/modern';
 import '../../../../shared/modern';
-export { d as FooterButton } from '../../component-a22727a6.js';
+export { d as FooterButton } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/footer-button/index.js

@@ -1,4 +1,4 @@
-export { d as FooterButton } from '../../component-a22727a6.js';
+export { d as FooterButton } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/footer-text/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { e as FooterText } from '../../component-a22727a6.js';
+export { e as FooterText } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import 'classnames';
 import '../../../../comment/modern';

package/pure-cell/modern/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/footer-text/index.js

@@ -1,4 +1,4 @@
-export { e as FooterText } from '../../component-a22727a6.js';
+export { e as FooterText } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/graphics/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { G as Graphics } from '../../component-a22727a6.js';
+export { G as Graphics } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/graphics/index.js

@@ -1,4 +1,4 @@
-export { G as Graphics } from '../../component-a22727a6.js';
+export { G as Graphics } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/main/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/modern';
-export { M as Main } from '../../component-a22727a6.js';
+export { M as Main } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/main/index.js

@@ -1,4 +1,4 @@
-export { M as Main } from '../../component-a22727a6.js';
+export { M as Main } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/components/text/component.js

@@ -2,7 +2,7 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../../../typography/modern';
-export { T as Text } from '../../component-a22727a6.js';
+export { T as Text } from '../../component-fb43ab63.js';
 import 'react-merge-refs';
 import '../../../../comment/modern';
 import '@alfalab/hooks';

package/pure-cell/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-a22727a6";
+export * from "../../component-fb43ab63";

package/pure-cell/modern/components/text/index.js

@@ -1,4 +1,4 @@
-export { T as Text } from '../../component-a22727a6.js';
+export { T as Text } from '../../component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/modern/index.js

@@ -1,4 +1,4 @@
-export { P as PureCell } from './component-a22727a6.js';
+export { P as PureCell } from './component-fb43ab63.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/scrollbar/Component.d.ts

@@ -51,6 +51,14 @@ type ScrollbarProps = {
      * HTML-aтрибуты маски.
      */
     maskProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительный класс контейнера вертикальной полосы прокрутки
+     */
+    verticalBarClassName?: string;
+    /**
+     * Обработчик изменения скролла
+     */
+    onContentScroll?: (e: Event) => void;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Scrollbar: React.ForwardRefExoticComponent<{
     /**
@@ -102,5 +110,13 @@ declare const Scrollbar: React.ForwardRefExoticComponent<{
      * HTML-aтрибуты маски.
      */
     maskProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
+    /**
+     * Дополнительный класс контейнера вертикальной полосы прокрутки
+     */
+    verticalBarClassName?: string | undefined;
+    /**
+     * Обработчик изменения скролла
+     */
+    onContentScroll?: ((e: Event) => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollbarProps, Scrollbar };

package/scrollbar/Component.js

@@ -873,7 +873,7 @@ function elementHasAbsPosChild(element) {
 }
 var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, maskProps = _a.maskProps, htmlAttributes = tslib.__rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps"]);
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, maskProps = _a.maskProps, verticalBarClassName = _a.verticalBarClassName, onContentScroll = _a.onContentScroll, htmlAttributes = tslib.__rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps", "verticalBarClassName", "onContentScroll"]);
     var elRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
     var contentNodeRef = React.useRef(null);
@@ -894,9 +894,15 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                 scrollableNode: scrollableNodeRef.current,
                 contentNode: contentNodeRef.current,
             });
+            if (onContentScroll) {
+                instance.getScrollElement().addEventListener('scroll', onContentScroll);
+            }
         }
         return function () {
             if (instance) {
+                if (onContentScroll) {
+                    instance.getScrollElement().removeEventListener('scroll', onContentScroll);
+                }
                 instance.unMount();
                 instance = null;
             }
@@ -965,7 +971,7 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
             React__default.default.createElement("div", { className: classNames.placeholder })),
         React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.horizontal) },
             React__default.default.createElement("div", { className: classNames.scrollbar })),
-        React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical) },
+        React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical, verticalBarClassName) },
             React__default.default.createElement("div", { className: classNames.scrollbar }))));
 });
 Scrollbar.displayName = 'Scrollbar';

package/scrollbar/cssm/Component.d.ts

@@ -51,6 +51,14 @@ type ScrollbarProps = {
      * HTML-aтрибуты маски.
      */
     maskProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительный класс контейнера вертикальной полосы прокрутки
+     */
+    verticalBarClassName?: string;
+    /**
+     * Обработчик изменения скролла
+     */
+    onContentScroll?: (e: Event) => void;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Scrollbar: React.ForwardRefExoticComponent<{
     /**
@@ -102,5 +110,13 @@ declare const Scrollbar: React.ForwardRefExoticComponent<{
      * HTML-aтрибуты маски.
      */
     maskProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
+    /**
+     * Дополнительный класс контейнера вертикальной полосы прокрутки
+     */
+    verticalBarClassName?: string | undefined;
+    /**
+     * Обработчик изменения скролла
+     */
+    onContentScroll?: ((e: Event) => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollbarProps, Scrollbar };

package/scrollbar/cssm/Component.js

@@ -870,7 +870,7 @@ function elementHasAbsPosChild(element) {
 }
 var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, maskProps = _a.maskProps, htmlAttributes = tslib.__rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps"]);
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, maskProps = _a.maskProps, verticalBarClassName = _a.verticalBarClassName, onContentScroll = _a.onContentScroll, htmlAttributes = tslib.__rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps", "verticalBarClassName", "onContentScroll"]);
     var elRef = React.useRef(null);
     var scrollableNodeRef = React.useRef(null);
     var contentNodeRef = React.useRef(null);
@@ -891,9 +891,15 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
                 scrollableNode: scrollableNodeRef.current,
                 contentNode: contentNodeRef.current,
             });
+            if (onContentScroll) {
+                instance.getScrollElement().addEventListener('scroll', onContentScroll);
+            }
         }
         return function () {
             if (instance) {
+                if (onContentScroll) {
+                    instance.getScrollElement().removeEventListener('scroll', onContentScroll);
+                }
                 instance.unMount();
                 instance = null;
             }
@@ -962,7 +968,7 @@ var Scrollbar = React__default.default.forwardRef(function (_a, ref) {
             React__default.default.createElement("div", { className: classNames.placeholder })),
         React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.horizontal) },
             React__default.default.createElement("div", { className: classNames.scrollbar })),
-        React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical) },
+        React__default.default.createElement("div", { className: cn__default.default(classNames.track, classNames.vertical, verticalBarClassName) },
             React__default.default.createElement("div", { className: classNames.scrollbar }))));
 });
 Scrollbar.displayName = 'Scrollbar';

package/scrollbar/esm/Component.d.ts

@@ -51,6 +51,14 @@ type ScrollbarProps = {
      * HTML-aтрибуты маски.
      */
     maskProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    /**
+     * Дополнительный класс контейнера вертикальной полосы прокрутки
+     */
+    verticalBarClassName?: string;
+    /**
+     * Обработчик изменения скролла
+     */
+    onContentScroll?: (e: Event) => void;
 } & HTMLAttributes<HTMLDivElement>;
 declare const Scrollbar: React.ForwardRefExoticComponent<{
     /**
@@ -102,5 +110,13 @@ declare const Scrollbar: React.ForwardRefExoticComponent<{
      * HTML-aтрибуты маски.
      */
     maskProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
+    /**
+     * Дополнительный класс контейнера вертикальной полосы прокрутки
+     */
+    verticalBarClassName?: string | undefined;
+    /**
+     * Обработчик изменения скролла
+     */
+    onContentScroll?: ((e: Event) => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { ScrollbarProps, Scrollbar };

package/scrollbar/esm/Component.js

@@ -861,7 +861,7 @@ function elementHasAbsPosChild(element) {
 }
 var Scrollbar = React.forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, maskProps = _a.maskProps, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps"]);
+    var _c = _a.colors, colors = _c === void 0 ? 'default' : _c, className = _a.className, children = _a.children, _d = _a.scrollableNodeProps, scrollableNodeProps = _d === void 0 ? { ref: null } : _d, _e = _a.contentNodeProps, contentNodeProps = _e === void 0 ? { ref: null } : _e, _f = _a.autoHide, autoHide = _f === void 0 ? true : _f, _g = _a.forceVisible, forceVisible = _g === void 0 ? false : _g, _h = _a.autoHideTimeout, autoHideTimeout = _h === void 0 ? 1000 : _h, _j = _a.clickOnTrack, clickOnTrack = _j === void 0 ? true : _j, _k = _a.horizontalAutoStretch, horizontalAutoStretch = _k === void 0 ? false : _k, _l = _a.widthPropName, widthPropName = _l === void 0 ? 'minWidth' : _l, maskProps = _a.maskProps, verticalBarClassName = _a.verticalBarClassName, onContentScroll = _a.onContentScroll, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps", "verticalBarClassName", "onContentScroll"]);
     var elRef = useRef(null);
     var scrollableNodeRef = useRef(null);
     var contentNodeRef = useRef(null);
@@ -882,9 +882,15 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
                 scrollableNode: scrollableNodeRef.current,
                 contentNode: contentNodeRef.current,
             });
+            if (onContentScroll) {
+                instance.getScrollElement().addEventListener('scroll', onContentScroll);
+            }
         }
         return function () {
             if (instance) {
+                if (onContentScroll) {
+                    instance.getScrollElement().removeEventListener('scroll', onContentScroll);
+                }
                 instance.unMount();
                 instance = null;
             }
@@ -953,7 +959,7 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
             React.createElement("div", { className: classNames.placeholder })),
         React.createElement("div", { className: cn(classNames.track, classNames.horizontal) },
             React.createElement("div", { className: classNames.scrollbar })),
-        React.createElement("div", { className: cn(classNames.track, classNames.vertical) },
+        React.createElement("div", { className: cn(classNames.track, classNames.vertical, verticalBarClassName) },
             React.createElement("div", { className: classNames.scrollbar }))));
 });
 Scrollbar.displayName = 'Scrollbar';