@alfalab/core-components 48.10.3 → 48.11.0-beta.1

package/scrollbar/esm/inverted.css

@@ -24,8 +24,8 @@
     --scrollbar-inverted-background-color-active: var(
         --color-light-neutral-translucent-500-inverted-press
     );
-} .scrollbar__component_d0zwz .scrollbar:before {
+} .scrollbar__component_1ozm3 .scrollbar:before {
             background-color: var(--scrollbar-inverted-background-color);
-        } .scrollbar__component_d0zwz.dragging .track .scrollbar.visible:before {
+        } .scrollbar__component_1ozm3.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-inverted-background-color-active);
         }

package/scrollbar/index.css

@@ -28,20 +28,20 @@
     --scrollbar-thumb-border-radius: 3px;
     --scrollbar-thumb-side-outer-offset: var(--gap-4);
     --scrollbar-thumb-margin: 3px;
-} .scrollbar__component_s8hgz {
+} .scrollbar__component_s3zjx {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-content: flex-start;
     align-items: flex-start
-} .scrollbar__component_s8hgz .scrollbar__wrapper_s8hgz {
+} .scrollbar__component_s3zjx .scrollbar__wrapper_s3zjx {
         overflow: hidden;
         width: inherit;
         height: inherit;
         max-width: inherit;
         max-height: inherit;
-    } .scrollbar__component_s8hgz .scrollbar__heightAutoObserverWrapper_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__heightAutoObserverWrapper_s3zjx {
         box-sizing: inherit;
         height: 100%;
         width: 100%;
@@ -57,7 +57,7 @@
         flex-grow: inherit;
         flex-shrink: 0;
         flex-basis: 0;
-    } .scrollbar__component_s8hgz .scrollbar__heightAutoObserver_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__heightAutoObserver_s3zjx {
         box-sizing: inherit;
         display: block;
         opacity: 0;
@@ -71,7 +71,7 @@
         overflow: hidden;
         pointer-events: none;
         z-index: -1;
-    } .scrollbar__component_s8hgz .scrollbar__mask_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__mask_s3zjx {
         direction: inherit;
         position: absolute;
         overflow: hidden;
@@ -84,7 +84,7 @@
         width: auto;
         height: auto;
         z-index: 0;
-    } .scrollbar__component_s8hgz .scrollbar__offset_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__offset_s3zjx {
         direction: inherit;
         box-sizing: inherit;
         resize: none;
@@ -96,7 +96,7 @@
         padding: var(--gap-0);
         margin: var(--gap-0);
         -webkit-overflow-scrolling: touch;
-    } .scrollbar__component_s8hgz .scrollbar__contentWrapper_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__contentWrapper_s3zjx {
         direction: inherit;
         box-sizing: border-box;
         position: relative;
@@ -107,43 +107,43 @@
         max-height: 100%; /* Needed for vertical scroll to trigger */
         outline: none;
         scrollbar-width: none
-    } .scrollbar__component_s8hgz .scrollbar__contentWrapper_s8hgz::-webkit-scrollbar {
+    } .scrollbar__component_s3zjx .scrollbar__contentWrapper_s3zjx::-webkit-scrollbar {
             width: 0;
             height: 0;
-        } .scrollbar__component_s8hgz .scrollbar__placeholder_s8hgz {
+        } .scrollbar__component_s3zjx .scrollbar__placeholder_s3zjx {
         max-height: 100%;
         max-width: 100%;
         width: 100%;
         pointer-events: none;
-    } .scrollbar__component_s8hgz .track {
+    } .scrollbar__component_s3zjx .track {
         z-index: 1;
         position: absolute;
         right: var(--gap-0);
         bottom: var(--gap-0);
         pointer-events: auto;
         overflow: hidden
-    } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz {
+    } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx {
             top: var(--gap-0);
             width: var(--scrollbar-rail-size);
             transform: rotateY(-180deg)
-        } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz.scrollbar__hover_s8hgz .scrollbar {
+        } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx.scrollbar__hover_s3zjx .scrollbar {
                     width: var(--scrollbar-hover-size);
-                } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz .scrollbar {
+                } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx .scrollbar {
                 width: var(--scrollbar-thumb-size);
                 margin-left: var(--scrollbar-thumb-margin);
                 transition: width 0.1s linear
-            } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz .scrollbar:before {
+            } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx .scrollbar:before {
                     right: var(--gap-0);
                     left: var(--gap-0);
                     top: var(--scrollbar-thumb-side-outer-offset);
                     bottom: var(--scrollbar-thumb-side-outer-offset);
                     transition: opacity 0.2s linear;
-                } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz {
+                } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx {
             left: var(--gap-0);
             height: var(--scrollbar-rail-size)
-        } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz.scrollbar__hover_s8hgz .scrollbar {
+        } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx.scrollbar__hover_s3zjx .scrollbar {
                     height: var(--scrollbar-hover-size);
-                } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz .scrollbar {
+                } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx .scrollbar {
                 right: auto;
                 left: var(--gap-0);
                 bottom: var(--scrollbar-thumb-margin);
@@ -153,35 +153,35 @@
                 width: auto;
                 transition: height 0.1s linear;
                 will-change: height
-            } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz .scrollbar:before {
+            } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx .scrollbar:before {
                     left: var(--scrollbar-thumb-side-outer-offset);
                     right: var(--scrollbar-thumb-side-outer-offset);
                     top: var(--gap-0);
                     bottom: var(--gap-0);
                     transition: opacity 0.2s linear;
-                } .scrollbar__component_s8hgz .scrollbar {
+                } .scrollbar__component_s3zjx .scrollbar {
         position: absolute;
         left: var(--gap-0);
         right: var(--gap-0);
         min-height: 40px
-    } .scrollbar__component_s8hgz .scrollbar:before {
+    } .scrollbar__component_s3zjx .scrollbar:before {
             position: absolute;
             content: '';
             border-radius: var(--scrollbar-thumb-border-radius);
             left: var(--gap-0);
             right: var(--gap-0);
             opacity: 0;
-        } .scrollbar__component_s8hgz .scrollbar.visible:before {
+        } .scrollbar__component_s3zjx .scrollbar.visible:before {
             opacity: 1;
-        } .scrollbar__component_s8hgz.dragging .scrollbar__content_s8hgz {
+        } .scrollbar__component_s3zjx.dragging .scrollbar__content_s3zjx {
         pointer-events: none;
         user-select: none;
         -webkit-user-select: none;
-    } .scrollbar__component_s8hgz.dragging .track {
+    } .scrollbar__component_s3zjx.dragging .track {
         pointer-events: all
-    } .scrollbar__component_s8hgz.dragging .track.scrollbar__vertical_s8hgz .scrollbar {
+    } .scrollbar__component_s3zjx.dragging .track.scrollbar__vertical_s3zjx .scrollbar {
             width: var(--scrollbar-hover-size);
-        } .scrollbar__component_s8hgz.dragging .track.scrollbar__horizontal_s8hgz .scrollbar {
+        } .scrollbar__component_s3zjx.dragging .track.scrollbar__horizontal_s3zjx .scrollbar {
             height: var(--scrollbar-hover-size);
         } .simplebar-hide-scrollbar {
     position: fixed;

package/scrollbar/inverted.css

@@ -24,8 +24,8 @@
     --scrollbar-inverted-background-color-active: var(
         --color-light-neutral-translucent-500-inverted-press
     );
-} .scrollbar__component_d0zwz .scrollbar:before {
+} .scrollbar__component_1ozm3 .scrollbar:before {
             background-color: var(--scrollbar-inverted-background-color);
-        } .scrollbar__component_d0zwz.dragging .track .scrollbar.visible:before {
+        } .scrollbar__component_1ozm3.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-inverted-background-color-active);
         }

package/scrollbar/modern/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/modern/Component.js

@@ -797,13 +797,13 @@ SimpleBar.defaultOptions = {
 };
 SimpleBar.instances = new WeakMap();
 
-const defaultColors = {"component":"scrollbar__component_wbkqc"};
+const defaultColors = {"component":"scrollbar__component_992ut"};
 require('./default.css');
 
-const styles = {"component":"scrollbar__component_s8hgz","wrapper":"scrollbar__wrapper_s8hgz","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_s8hgz","heightAutoObserver":"scrollbar__heightAutoObserver_s8hgz","-webkit-mask":"scrollbar__mask_s8hgz","mask":"scrollbar__mask_s8hgz","offset":"scrollbar__offset_s8hgz","contentWrapper":"scrollbar__contentWrapper_s8hgz","placeholder":"scrollbar__placeholder_s8hgz","vertical":"scrollbar__vertical_s8hgz","hover":"scrollbar__hover_s8hgz","horizontal":"scrollbar__horizontal_s8hgz","content":"scrollbar__content_s8hgz"};
+const styles = {"component":"scrollbar__component_s3zjx","wrapper":"scrollbar__wrapper_s3zjx","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_s3zjx","heightAutoObserver":"scrollbar__heightAutoObserver_s3zjx","-webkit-mask":"scrollbar__mask_s3zjx","mask":"scrollbar__mask_s3zjx","offset":"scrollbar__offset_s3zjx","contentWrapper":"scrollbar__contentWrapper_s3zjx","placeholder":"scrollbar__placeholder_s3zjx","vertical":"scrollbar__vertical_s3zjx","hover":"scrollbar__hover_s3zjx","horizontal":"scrollbar__horizontal_s3zjx","content":"scrollbar__content_s3zjx"};
 require('./index.css');
 
-const invertedColors = {"component":"scrollbar__component_d0zwz"};
+const invertedColors = {"component":"scrollbar__component_1ozm3"};
 require('./inverted.css');
 
 const colorStylesMap = {
@@ -841,7 +841,7 @@ function elementHasAbsPosChild(element) {
     }
     return false;
 }
-const Scrollbar = React.forwardRef(({ colors = 'default', className, children, scrollableNodeProps = { ref: null }, contentNodeProps = { ref: null }, autoHide = true, forceVisible = false, autoHideTimeout = 1000, clickOnTrack = true, horizontalAutoStretch = false, widthPropName = 'minWidth', maskProps, ...htmlAttributes }, ref) => {
+const Scrollbar = React.forwardRef(({ colors = 'default', className, children, scrollableNodeProps = { ref: null }, contentNodeProps = { ref: null }, autoHide = true, forceVisible = false, autoHideTimeout = 1000, clickOnTrack = true, horizontalAutoStretch = false, widthPropName = 'minWidth', maskProps, verticalBarClassName, onContentScroll, ...htmlAttributes }, ref) => {
     const elRef = useRef(null);
     const scrollableNodeRef = useRef(null);
     const contentNodeRef = useRef(null);
@@ -862,9 +862,15 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
                 scrollableNode: scrollableNodeRef.current,
                 contentNode: contentNodeRef.current,
             });
+            if (onContentScroll) {
+                instance.getScrollElement().addEventListener('scroll', onContentScroll);
+            }
         }
         return () => {
             if (instance) {
+                if (onContentScroll) {
+                    instance.getScrollElement().removeEventListener('scroll', onContentScroll);
+                }
                 instance.unMount();
                 instance = null;
             }
@@ -935,7 +941,7 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
             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';

package/scrollbar/modern/default.css

@@ -23,8 +23,8 @@
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --scrollbar-background-color: var(--color-light-neutral-translucent-500);
     --scrollbar-background-color-active: var(--color-light-neutral-translucent-500-press);
-} .scrollbar__component_wbkqc .scrollbar:before {
+} .scrollbar__component_992ut .scrollbar:before {
             background-color: var(--scrollbar-background-color);
-        } .scrollbar__component_wbkqc.dragging .track .scrollbar.visible:before {
+        } .scrollbar__component_992ut.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-background-color-active);
         }

package/scrollbar/modern/index.css

@@ -28,20 +28,20 @@
     --scrollbar-thumb-border-radius: 3px;
     --scrollbar-thumb-side-outer-offset: var(--gap-4);
     --scrollbar-thumb-margin: 3px;
-} .scrollbar__component_s8hgz {
+} .scrollbar__component_s3zjx {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-content: flex-start;
     align-items: flex-start
-} .scrollbar__component_s8hgz .scrollbar__wrapper_s8hgz {
+} .scrollbar__component_s3zjx .scrollbar__wrapper_s3zjx {
         overflow: hidden;
         width: inherit;
         height: inherit;
         max-width: inherit;
         max-height: inherit;
-    } .scrollbar__component_s8hgz .scrollbar__heightAutoObserverWrapper_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__heightAutoObserverWrapper_s3zjx {
         box-sizing: inherit;
         height: 100%;
         width: 100%;
@@ -57,7 +57,7 @@
         flex-grow: inherit;
         flex-shrink: 0;
         flex-basis: 0;
-    } .scrollbar__component_s8hgz .scrollbar__heightAutoObserver_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__heightAutoObserver_s3zjx {
         box-sizing: inherit;
         display: block;
         opacity: 0;
@@ -71,7 +71,7 @@
         overflow: hidden;
         pointer-events: none;
         z-index: -1;
-    } .scrollbar__component_s8hgz .scrollbar__mask_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__mask_s3zjx {
         direction: inherit;
         position: absolute;
         overflow: hidden;
@@ -84,7 +84,7 @@
         width: auto;
         height: auto;
         z-index: 0;
-    } .scrollbar__component_s8hgz .scrollbar__offset_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__offset_s3zjx {
         direction: inherit;
         box-sizing: inherit;
         resize: none;
@@ -96,7 +96,7 @@
         padding: var(--gap-0);
         margin: var(--gap-0);
         -webkit-overflow-scrolling: touch;
-    } .scrollbar__component_s8hgz .scrollbar__contentWrapper_s8hgz {
+    } .scrollbar__component_s3zjx .scrollbar__contentWrapper_s3zjx {
         direction: inherit;
         box-sizing: border-box;
         position: relative;
@@ -107,43 +107,43 @@
         max-height: 100%; /* Needed for vertical scroll to trigger */
         outline: none;
         scrollbar-width: none
-    } .scrollbar__component_s8hgz .scrollbar__contentWrapper_s8hgz::-webkit-scrollbar {
+    } .scrollbar__component_s3zjx .scrollbar__contentWrapper_s3zjx::-webkit-scrollbar {
             width: 0;
             height: 0;
-        } .scrollbar__component_s8hgz .scrollbar__placeholder_s8hgz {
+        } .scrollbar__component_s3zjx .scrollbar__placeholder_s3zjx {
         max-height: 100%;
         max-width: 100%;
         width: 100%;
         pointer-events: none;
-    } .scrollbar__component_s8hgz .track {
+    } .scrollbar__component_s3zjx .track {
         z-index: 1;
         position: absolute;
         right: var(--gap-0);
         bottom: var(--gap-0);
         pointer-events: auto;
         overflow: hidden
-    } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz {
+    } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx {
             top: var(--gap-0);
             width: var(--scrollbar-rail-size);
             transform: rotateY(-180deg)
-        } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz.scrollbar__hover_s8hgz .scrollbar {
+        } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx.scrollbar__hover_s3zjx .scrollbar {
                     width: var(--scrollbar-hover-size);
-                } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz .scrollbar {
+                } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx .scrollbar {
                 width: var(--scrollbar-thumb-size);
                 margin-left: var(--scrollbar-thumb-margin);
                 transition: width 0.1s linear
-            } .scrollbar__component_s8hgz .track.scrollbar__vertical_s8hgz .scrollbar:before {
+            } .scrollbar__component_s3zjx .track.scrollbar__vertical_s3zjx .scrollbar:before {
                     right: var(--gap-0);
                     left: var(--gap-0);
                     top: var(--scrollbar-thumb-side-outer-offset);
                     bottom: var(--scrollbar-thumb-side-outer-offset);
                     transition: opacity 0.2s linear;
-                } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz {
+                } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx {
             left: var(--gap-0);
             height: var(--scrollbar-rail-size)
-        } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz.scrollbar__hover_s8hgz .scrollbar {
+        } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx.scrollbar__hover_s3zjx .scrollbar {
                     height: var(--scrollbar-hover-size);
-                } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz .scrollbar {
+                } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx .scrollbar {
                 right: auto;
                 left: var(--gap-0);
                 bottom: var(--scrollbar-thumb-margin);
@@ -153,35 +153,35 @@
                 width: auto;
                 transition: height 0.1s linear;
                 will-change: height
-            } .scrollbar__component_s8hgz .track.scrollbar__horizontal_s8hgz .scrollbar:before {
+            } .scrollbar__component_s3zjx .track.scrollbar__horizontal_s3zjx .scrollbar:before {
                     left: var(--scrollbar-thumb-side-outer-offset);
                     right: var(--scrollbar-thumb-side-outer-offset);
                     top: var(--gap-0);
                     bottom: var(--gap-0);
                     transition: opacity 0.2s linear;
-                } .scrollbar__component_s8hgz .scrollbar {
+                } .scrollbar__component_s3zjx .scrollbar {
         position: absolute;
         left: var(--gap-0);
         right: var(--gap-0);
         min-height: 40px
-    } .scrollbar__component_s8hgz .scrollbar:before {
+    } .scrollbar__component_s3zjx .scrollbar:before {
             position: absolute;
             content: '';
             border-radius: var(--scrollbar-thumb-border-radius);
             left: var(--gap-0);
             right: var(--gap-0);
             opacity: 0;
-        } .scrollbar__component_s8hgz .scrollbar.visible:before {
+        } .scrollbar__component_s3zjx .scrollbar.visible:before {
             opacity: 1;
-        } .scrollbar__component_s8hgz.dragging .scrollbar__content_s8hgz {
+        } .scrollbar__component_s3zjx.dragging .scrollbar__content_s3zjx {
         pointer-events: none;
         user-select: none;
         -webkit-user-select: none;
-    } .scrollbar__component_s8hgz.dragging .track {
+    } .scrollbar__component_s3zjx.dragging .track {
         pointer-events: all
-    } .scrollbar__component_s8hgz.dragging .track.scrollbar__vertical_s8hgz .scrollbar {
+    } .scrollbar__component_s3zjx.dragging .track.scrollbar__vertical_s3zjx .scrollbar {
             width: var(--scrollbar-hover-size);
-        } .scrollbar__component_s8hgz.dragging .track.scrollbar__horizontal_s8hgz .scrollbar {
+        } .scrollbar__component_s3zjx.dragging .track.scrollbar__horizontal_s3zjx .scrollbar {
             height: var(--scrollbar-hover-size);
         } .simplebar-hide-scrollbar {
     position: fixed;

package/scrollbar/modern/inverted.css

@@ -24,8 +24,8 @@
     --scrollbar-inverted-background-color-active: var(
         --color-light-neutral-translucent-500-inverted-press
     );
-} .scrollbar__component_d0zwz .scrollbar:before {
+} .scrollbar__component_1ozm3 .scrollbar:before {
             background-color: var(--scrollbar-inverted-background-color);
-        } .scrollbar__component_d0zwz.dragging .track .scrollbar.visible:before {
+        } .scrollbar__component_1ozm3.dragging .track .scrollbar.visible:before {
             background-color: var(--scrollbar-inverted-background-color-active);
         }

package/scrollbar/moderncssm/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/moderncssm/Component.js

@@ -835,7 +835,7 @@ function elementHasAbsPosChild(element) {
     }
     return false;
 }
-const Scrollbar = React.forwardRef(({ colors = 'default', className, children, scrollableNodeProps = { ref: null }, contentNodeProps = { ref: null }, autoHide = true, forceVisible = false, autoHideTimeout = 1000, clickOnTrack = true, horizontalAutoStretch = false, widthPropName = 'minWidth', maskProps, ...htmlAttributes }, ref) => {
+const Scrollbar = React.forwardRef(({ colors = 'default', className, children, scrollableNodeProps = { ref: null }, contentNodeProps = { ref: null }, autoHide = true, forceVisible = false, autoHideTimeout = 1000, clickOnTrack = true, horizontalAutoStretch = false, widthPropName = 'minWidth', maskProps, verticalBarClassName, onContentScroll, ...htmlAttributes }, ref) => {
     const elRef = useRef(null);
     const scrollableNodeRef = useRef(null);
     const contentNodeRef = useRef(null);
@@ -856,9 +856,15 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
                 scrollableNode: scrollableNodeRef.current,
                 contentNode: contentNodeRef.current,
             });
+            if (onContentScroll) {
+                instance.getScrollElement().addEventListener('scroll', onContentScroll);
+            }
         }
         return () => {
             if (instance) {
+                if (onContentScroll) {
+                    instance.getScrollElement().removeEventListener('scroll', onContentScroll);
+                }
                 instance.unMount();
                 instance = null;
             }
@@ -929,7 +935,7 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
             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';

package/segmented-control/Component.js

@@ -10,13 +10,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"wrapper":"segmented-control__wrapper_68su3","segment":"segmented-control__segment_68su3","selected":"segmented-control__selected_68su3","selectedBox":"segmented-control__selectedBox_68su3"};
+var defaultColors = {"wrapper":"segmented-control__wrapper_1v034","segment":"segmented-control__segment_1v034","selected":"segmented-control__selected_1v034","selectedBox":"segmented-control__selectedBox_1v034"};
 require('./default.css');
 
-var styles = {"wrapper":"segmented-control__wrapper_10k1n","disabled":"segmented-control__disabled_10k1n","container":"segmented-control__container_10k1n","inner":"segmented-control__inner_10k1n","segment":"segmented-control__segment_10k1n","selected":"segmented-control__selected_10k1n","size-40":"segmented-control__size-40_10k1n","rounded":"segmented-control__rounded_10k1n","rectangular":"segmented-control__rectangular_10k1n","selectedBox":"segmented-control__selectedBox_10k1n","size-32":"segmented-control__size-32_10k1n"};
+var styles = {"wrapper":"segmented-control__wrapper_48nuq","disabled":"segmented-control__disabled_48nuq","container":"segmented-control__container_48nuq","inner":"segmented-control__inner_48nuq","segment":"segmented-control__segment_48nuq","selected":"segmented-control__selected_48nuq","size-40":"segmented-control__size-40_48nuq","rounded":"segmented-control__rounded_48nuq","rectangular":"segmented-control__rectangular_48nuq","selectedBox":"segmented-control__selectedBox_48nuq","size-32":"segmented-control__size-32_48nuq"};
 require('./index.css');
 
-var invertedColors = {"wrapper":"segmented-control__wrapper_8ho9a","segment":"segmented-control__segment_8ho9a","selected":"segmented-control__selected_8ho9a","selectedBox":"segmented-control__selectedBox_8ho9a"};
+var invertedColors = {"wrapper":"segmented-control__wrapper_1x8yj","segment":"segmented-control__segment_1x8yj","selected":"segmented-control__selected_1x8yj","selectedBox":"segmented-control__selectedBox_1x8yj"};
 require('./inverted.css');
 
 var colorStyles = {

package/segmented-control/components/segment/Component.js

@@ -12,13 +12,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var defaultColors = {"segment":"segmented-control__segment_19sj3"};
+var defaultColors = {"segment":"segmented-control__segment_1fn9w"};
 require('./default.css');
 
-var styles = {"segment":"segmented-control__segment_ywip3","focused":"segmented-control__focused_ywip3"};
+var styles = {"segment":"segmented-control__segment_120lp","focused":"segmented-control__focused_120lp"};
 require('./index.css');
 
-var invertedColors = {"segment":"segmented-control__segment_g9mci"};
+var invertedColors = {"segment":"segmented-control__segment_m4d5l"};
 require('./inverted.css');
 
 var colorStyles = {

package/segmented-control/components/segment/default.css

@@ -20,8 +20,8 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__segment_19sj3 {
+} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__segment_1fn9w {
     color: var(--color-light-text-primary)
-} .segmented-control__segment_19sj3:not(:first-child):before {
+} .segmented-control__segment_1fn9w:not(:first-child):before {
         background-color: var(--color-light-neutral-translucent-300);
     }

package/segmented-control/components/segment/index.css

@@ -25,7 +25,7 @@
         sans-serif;
 } :root {
     --focus-color: var(--color-light-status-info);
-} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__segment_ywip3 {
+} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__segment_120lp {
     flex: 1;
     z-index: 1;
     display: flex;
@@ -42,7 +42,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
-} .segmented-control__segment_ywip3:not(:first-child):before {
+} .segmented-control__segment_120lp:not(:first-child):before {
         content: '';
         position: absolute;
         transition: opacity 0.2s ease;
@@ -51,7 +51,7 @@
         border-radius: 0.5px;
         bottom: var(--gap-8);
         left: var(--gap-0);
-    } .segmented-control__focused_ywip3 {
+    } .segmented-control__focused_120lp {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/segmented-control/components/segment/inverted.css

@@ -20,8 +20,8 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__segment_g9mci {
+} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__segment_m4d5l {
     color: var(--color-light-text-primary-inverted)
-} .segmented-control__segment_g9mci:not(:first-child):before {
+} .segmented-control__segment_m4d5l:not(:first-child):before {
         background-color: var(--color-light-neutral-translucent-300-inverted);
     }

package/segmented-control/default.css

@@ -21,11 +21,11 @@
     /* новые значения, используйте их */
 } :root {
 } :root {
-} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__wrapper_68su3 {
+} /* сбрасывает синюю подсветку при нажатии */ .segmented-control__wrapper_1v034 {
     background-color: var(--color-light-neutral-translucent-200);
-} .segmented-control__segment_68su3.segmented-control__selected_68su3 {
+} .segmented-control__segment_1v034.segmented-control__selected_1v034 {
     color: var(--color-light-text-primary);
-} .segmented-control__selectedBox_68su3 {
+} .segmented-control__selectedBox_1v034 {
     border: 0.5px solid var(--color-light-neutral-translucent-200);
     background-color: var(--color-light-neutral-translucent-0);
 }

package/segmented-control/esm/Component.js

@@ -3,13 +3,13 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
 import { SegmentedControlContext } from './context.js';
 
-var defaultColors = {"wrapper":"segmented-control__wrapper_68su3","segment":"segmented-control__segment_68su3","selected":"segmented-control__selected_68su3","selectedBox":"segmented-control__selectedBox_68su3"};
+var defaultColors = {"wrapper":"segmented-control__wrapper_1v034","segment":"segmented-control__segment_1v034","selected":"segmented-control__selected_1v034","selectedBox":"segmented-control__selectedBox_1v034"};
 require('./default.css');
 
-var styles = {"wrapper":"segmented-control__wrapper_10k1n","disabled":"segmented-control__disabled_10k1n","container":"segmented-control__container_10k1n","inner":"segmented-control__inner_10k1n","segment":"segmented-control__segment_10k1n","selected":"segmented-control__selected_10k1n","size-40":"segmented-control__size-40_10k1n","rounded":"segmented-control__rounded_10k1n","rectangular":"segmented-control__rectangular_10k1n","selectedBox":"segmented-control__selectedBox_10k1n","size-32":"segmented-control__size-32_10k1n"};
+var styles = {"wrapper":"segmented-control__wrapper_48nuq","disabled":"segmented-control__disabled_48nuq","container":"segmented-control__container_48nuq","inner":"segmented-control__inner_48nuq","segment":"segmented-control__segment_48nuq","selected":"segmented-control__selected_48nuq","size-40":"segmented-control__size-40_48nuq","rounded":"segmented-control__rounded_48nuq","rectangular":"segmented-control__rectangular_48nuq","selectedBox":"segmented-control__selectedBox_48nuq","size-32":"segmented-control__size-32_48nuq"};
 require('./index.css');
 
-var invertedColors = {"wrapper":"segmented-control__wrapper_8ho9a","segment":"segmented-control__segment_8ho9a","selected":"segmented-control__selected_8ho9a","selectedBox":"segmented-control__selectedBox_8ho9a"};
+var invertedColors = {"wrapper":"segmented-control__wrapper_1x8yj","segment":"segmented-control__segment_1x8yj","selected":"segmented-control__selected_1x8yj","selectedBox":"segmented-control__selectedBox_1x8yj"};
 require('./inverted.css');
 
 var colorStyles = {