@alfalab/core-components 48.27.5 → 48.28.0

package/scrollbar/esm/Component.d.ts

@@ -55,6 +55,10 @@ type ScrollbarProps = {
      * Дополнительный класс контейнера вертикальной полосы прокрутки
      */
     verticalBarClassName?: string;
+    /**
+     * Дополнительный класс контейнера горизонтальной полосы прокрутки
+     */
+    horizontalBarClassName?: string;
     /**
      * Обработчик изменения скролла
      */
@@ -118,6 +122,10 @@ declare const Scrollbar: React.ForwardRefExoticComponent<{
      * Дополнительный класс контейнера вертикальной полосы прокрутки
      */
     verticalBarClassName?: string | undefined;
+    /**
+     * Дополнительный класс контейнера горизонтальной полосы прокрутки
+     */
+    horizontalBarClassName?: string | undefined;
     /**
      * Обработчик изменения скролла
      */

package/scrollbar/esm/Component.js

@@ -814,13 +814,13 @@ var SimpleBar = /** @class */ (function () {
     return SimpleBar;
 }());
 
-var defaultColors = {"component":"scrollbar__component_20i4o"};
+var defaultColors = {"component":"scrollbar__component_u4o2q"};
 require('./default.css');
 
-var styles = {"component":"scrollbar__component_xtn1i","wrapper":"scrollbar__wrapper_xtn1i","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_xtn1i","heightAutoObserver":"scrollbar__heightAutoObserver_xtn1i","-webkit-mask":"scrollbar__mask_xtn1i","mask":"scrollbar__mask_xtn1i","offset":"scrollbar__offset_xtn1i","contentWrapper":"scrollbar__contentWrapper_xtn1i","placeholder":"scrollbar__placeholder_xtn1i","vertical":"scrollbar__vertical_xtn1i","hover":"scrollbar__hover_xtn1i","horizontal":"scrollbar__horizontal_xtn1i","content":"scrollbar__content_xtn1i"};
+var styles = {"component":"scrollbar__component_1jd9r","wrapper":"scrollbar__wrapper_1jd9r","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_1jd9r","heightAutoObserver":"scrollbar__heightAutoObserver_1jd9r","-webkit-mask":"scrollbar__mask_1jd9r","mask":"scrollbar__mask_1jd9r","offset":"scrollbar__offset_1jd9r","contentWrapper":"scrollbar__contentWrapper_1jd9r","placeholder":"scrollbar__placeholder_1jd9r","vertical":"scrollbar__vertical_1jd9r","hover":"scrollbar__hover_1jd9r","horizontal":"scrollbar__horizontal_1jd9r","content":"scrollbar__content_1jd9r"};
 require('./index.css');
 
-var invertedColors = {"component":"scrollbar__component_1hr1d"};
+var invertedColors = {"component":"scrollbar__component_au39e"};
 require('./inverted.css');
 
 var colorStylesMap = {
@@ -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, verticalBarClassName = _a.verticalBarClassName, onContentScroll = _a.onContentScroll, verticalBarRef = _a.verticalBarRef, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps", "verticalBarClassName", "onContentScroll", "verticalBarRef"]);
+    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, horizontalBarClassName = _a.horizontalBarClassName, onContentScroll = _a.onContentScroll, verticalBarRef = _a.verticalBarRef, htmlAttributes = __rest(_a, ["colors", "className", "children", "scrollableNodeProps", "contentNodeProps", "autoHide", "forceVisible", "autoHideTimeout", "clickOnTrack", "horizontalAutoStretch", "widthPropName", "maskProps", "verticalBarClassName", "horizontalBarClassName", "onContentScroll", "verticalBarRef"]);
     var elRef = useRef(null);
     var scrollableNodeRef = useRef(null);
     var contentNodeRef = useRef(null);
@@ -957,7 +957,7 @@ var Scrollbar = React.forwardRef(function (_a, ref) {
                                 contentNodeRef
                             ], (contentNodeProps.ref ? [contentNodeProps.ref] : []), true)), className: cn(classNames.contentEl, contentNodeProps === null || contentNodeProps === void 0 ? void 0 : contentNodeProps.className) }), children)))),
             React.createElement("div", { className: classNames.placeholder })),
-        React.createElement("div", { className: cn(classNames.track, classNames.horizontal) },
+        React.createElement("div", { className: cn(classNames.track, classNames.horizontal, horizontalBarClassName) },
             React.createElement("div", { className: classNames.scrollbar })),
         React.createElement("div", { ref: verticalBarRef, className: cn(classNames.track, classNames.vertical, verticalBarClassName) },
             React.createElement("div", { className: classNames.scrollbar }))));

package/scrollbar/esm/default.css

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

package/scrollbar/esm/index.css

@@ -31,20 +31,20 @@
     --scrollbar-thumb-border-radius: 3px;
     --scrollbar-thumb-side-outer-offset: var(--gap-4);
     --scrollbar-thumb-margin: 3px;
-} .scrollbar__component_xtn1i {
+} .scrollbar__component_1jd9r {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-content: flex-start;
     align-items: flex-start
-} .scrollbar__component_xtn1i .scrollbar__wrapper_xtn1i {
+} .scrollbar__component_1jd9r .scrollbar__wrapper_1jd9r {
         overflow: hidden;
         width: inherit;
         height: inherit;
         max-width: inherit;
         max-height: inherit;
-    } .scrollbar__component_xtn1i .scrollbar__heightAutoObserverWrapper_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__heightAutoObserverWrapper_1jd9r {
         box-sizing: inherit;
         height: 100%;
         width: 100%;
@@ -60,7 +60,7 @@
         flex-grow: inherit;
         flex-shrink: 0;
         flex-basis: 0;
-    } .scrollbar__component_xtn1i .scrollbar__heightAutoObserver_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__heightAutoObserver_1jd9r {
         box-sizing: inherit;
         display: block;
         opacity: 0;
@@ -74,7 +74,7 @@
         overflow: hidden;
         pointer-events: none;
         z-index: -1;
-    } .scrollbar__component_xtn1i .scrollbar__mask_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__mask_1jd9r {
         direction: inherit;
         position: absolute;
         overflow: hidden;
@@ -87,7 +87,7 @@
         width: auto;
         height: auto;
         z-index: 0;
-    } .scrollbar__component_xtn1i .scrollbar__offset_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__offset_1jd9r {
         direction: inherit;
         box-sizing: inherit;
         resize: none;
@@ -99,7 +99,7 @@
         padding: var(--gap-0);
         margin: var(--gap-0);
         -webkit-overflow-scrolling: touch;
-    } .scrollbar__component_xtn1i .scrollbar__contentWrapper_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__contentWrapper_1jd9r {
         direction: inherit;
         box-sizing: border-box;
         position: relative;
@@ -110,43 +110,43 @@
         max-height: 100%; /* Needed for vertical scroll to trigger */
         outline: none;
         scrollbar-width: none
-    } .scrollbar__component_xtn1i .scrollbar__contentWrapper_xtn1i::-webkit-scrollbar {
+    } .scrollbar__component_1jd9r .scrollbar__contentWrapper_1jd9r::-webkit-scrollbar {
             width: 0;
             height: 0;
-        } .scrollbar__component_xtn1i .scrollbar__placeholder_xtn1i {
+        } .scrollbar__component_1jd9r .scrollbar__placeholder_1jd9r {
         max-height: 100%;
         max-width: 100%;
         width: 100%;
         pointer-events: none;
-    } .scrollbar__component_xtn1i .track {
+    } .scrollbar__component_1jd9r .track {
         z-index: 1;
         position: absolute;
         right: var(--gap-0);
         bottom: var(--gap-0);
         pointer-events: auto;
         overflow: hidden
-    } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i {
+    } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r {
             top: var(--gap-0);
             width: var(--scrollbar-rail-size);
             transform: rotateY(-180deg)
-        } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i.scrollbar__hover_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r.scrollbar__hover_1jd9r .scrollbar {
                     width: var(--scrollbar-hover-size);
-                } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r .scrollbar {
                 width: var(--scrollbar-thumb-size);
                 margin-left: var(--scrollbar-thumb-margin);
                 transition: width 0.1s linear
-            } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i .scrollbar:before {
+            } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r .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_xtn1i .track.scrollbar__horizontal_xtn1i {
+                } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r {
             left: var(--gap-0);
             height: var(--scrollbar-rail-size)
-        } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i.scrollbar__hover_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r.scrollbar__hover_1jd9r .scrollbar {
                     height: var(--scrollbar-hover-size);
-                } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r .scrollbar {
                 right: auto;
                 left: var(--gap-0);
                 bottom: var(--scrollbar-thumb-margin);
@@ -156,35 +156,35 @@
                 width: auto;
                 transition: height 0.1s linear;
                 will-change: height
-            } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i .scrollbar:before {
+            } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r .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_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .scrollbar {
         position: absolute;
         left: var(--gap-0);
         right: var(--gap-0);
         min-height: 40px
-    } .scrollbar__component_xtn1i .scrollbar:before {
+    } .scrollbar__component_1jd9r .scrollbar:before {
             position: absolute;
             content: '';
             border-radius: var(--scrollbar-thumb-border-radius);
             left: var(--gap-0);
             right: var(--gap-0);
             opacity: 0;
-        } .scrollbar__component_xtn1i .scrollbar.visible:before {
+        } .scrollbar__component_1jd9r .scrollbar.visible:before {
             opacity: 1;
-        } .scrollbar__component_xtn1i.dragging .scrollbar__content_xtn1i {
+        } .scrollbar__component_1jd9r.dragging .scrollbar__content_1jd9r {
         pointer-events: none;
         user-select: none;
         -webkit-user-select: none;
-    } .scrollbar__component_xtn1i.dragging .track {
+    } .scrollbar__component_1jd9r.dragging .track {
         pointer-events: all
-    } .scrollbar__component_xtn1i.dragging .track.scrollbar__vertical_xtn1i .scrollbar {
+    } .scrollbar__component_1jd9r.dragging .track.scrollbar__vertical_1jd9r .scrollbar {
             width: var(--scrollbar-hover-size);
-        } .scrollbar__component_xtn1i.dragging .track.scrollbar__horizontal_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r.dragging .track.scrollbar__horizontal_1jd9r .scrollbar {
             height: var(--scrollbar-hover-size);
         } .simplebar-hide-scrollbar {
     position: fixed;

package/scrollbar/esm/inverted.css

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

package/scrollbar/index.css

@@ -31,20 +31,20 @@
     --scrollbar-thumb-border-radius: 3px;
     --scrollbar-thumb-side-outer-offset: var(--gap-4);
     --scrollbar-thumb-margin: 3px;
-} .scrollbar__component_xtn1i {
+} .scrollbar__component_1jd9r {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-content: flex-start;
     align-items: flex-start
-} .scrollbar__component_xtn1i .scrollbar__wrapper_xtn1i {
+} .scrollbar__component_1jd9r .scrollbar__wrapper_1jd9r {
         overflow: hidden;
         width: inherit;
         height: inherit;
         max-width: inherit;
         max-height: inherit;
-    } .scrollbar__component_xtn1i .scrollbar__heightAutoObserverWrapper_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__heightAutoObserverWrapper_1jd9r {
         box-sizing: inherit;
         height: 100%;
         width: 100%;
@@ -60,7 +60,7 @@
         flex-grow: inherit;
         flex-shrink: 0;
         flex-basis: 0;
-    } .scrollbar__component_xtn1i .scrollbar__heightAutoObserver_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__heightAutoObserver_1jd9r {
         box-sizing: inherit;
         display: block;
         opacity: 0;
@@ -74,7 +74,7 @@
         overflow: hidden;
         pointer-events: none;
         z-index: -1;
-    } .scrollbar__component_xtn1i .scrollbar__mask_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__mask_1jd9r {
         direction: inherit;
         position: absolute;
         overflow: hidden;
@@ -87,7 +87,7 @@
         width: auto;
         height: auto;
         z-index: 0;
-    } .scrollbar__component_xtn1i .scrollbar__offset_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__offset_1jd9r {
         direction: inherit;
         box-sizing: inherit;
         resize: none;
@@ -99,7 +99,7 @@
         padding: var(--gap-0);
         margin: var(--gap-0);
         -webkit-overflow-scrolling: touch;
-    } .scrollbar__component_xtn1i .scrollbar__contentWrapper_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__contentWrapper_1jd9r {
         direction: inherit;
         box-sizing: border-box;
         position: relative;
@@ -110,43 +110,43 @@
         max-height: 100%; /* Needed for vertical scroll to trigger */
         outline: none;
         scrollbar-width: none
-    } .scrollbar__component_xtn1i .scrollbar__contentWrapper_xtn1i::-webkit-scrollbar {
+    } .scrollbar__component_1jd9r .scrollbar__contentWrapper_1jd9r::-webkit-scrollbar {
             width: 0;
             height: 0;
-        } .scrollbar__component_xtn1i .scrollbar__placeholder_xtn1i {
+        } .scrollbar__component_1jd9r .scrollbar__placeholder_1jd9r {
         max-height: 100%;
         max-width: 100%;
         width: 100%;
         pointer-events: none;
-    } .scrollbar__component_xtn1i .track {
+    } .scrollbar__component_1jd9r .track {
         z-index: 1;
         position: absolute;
         right: var(--gap-0);
         bottom: var(--gap-0);
         pointer-events: auto;
         overflow: hidden
-    } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i {
+    } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r {
             top: var(--gap-0);
             width: var(--scrollbar-rail-size);
             transform: rotateY(-180deg)
-        } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i.scrollbar__hover_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r.scrollbar__hover_1jd9r .scrollbar {
                     width: var(--scrollbar-hover-size);
-                } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r .scrollbar {
                 width: var(--scrollbar-thumb-size);
                 margin-left: var(--scrollbar-thumb-margin);
                 transition: width 0.1s linear
-            } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i .scrollbar:before {
+            } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r .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_xtn1i .track.scrollbar__horizontal_xtn1i {
+                } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r {
             left: var(--gap-0);
             height: var(--scrollbar-rail-size)
-        } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i.scrollbar__hover_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r.scrollbar__hover_1jd9r .scrollbar {
                     height: var(--scrollbar-hover-size);
-                } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r .scrollbar {
                 right: auto;
                 left: var(--gap-0);
                 bottom: var(--scrollbar-thumb-margin);
@@ -156,35 +156,35 @@
                 width: auto;
                 transition: height 0.1s linear;
                 will-change: height
-            } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i .scrollbar:before {
+            } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r .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_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .scrollbar {
         position: absolute;
         left: var(--gap-0);
         right: var(--gap-0);
         min-height: 40px
-    } .scrollbar__component_xtn1i .scrollbar:before {
+    } .scrollbar__component_1jd9r .scrollbar:before {
             position: absolute;
             content: '';
             border-radius: var(--scrollbar-thumb-border-radius);
             left: var(--gap-0);
             right: var(--gap-0);
             opacity: 0;
-        } .scrollbar__component_xtn1i .scrollbar.visible:before {
+        } .scrollbar__component_1jd9r .scrollbar.visible:before {
             opacity: 1;
-        } .scrollbar__component_xtn1i.dragging .scrollbar__content_xtn1i {
+        } .scrollbar__component_1jd9r.dragging .scrollbar__content_1jd9r {
         pointer-events: none;
         user-select: none;
         -webkit-user-select: none;
-    } .scrollbar__component_xtn1i.dragging .track {
+    } .scrollbar__component_1jd9r.dragging .track {
         pointer-events: all
-    } .scrollbar__component_xtn1i.dragging .track.scrollbar__vertical_xtn1i .scrollbar {
+    } .scrollbar__component_1jd9r.dragging .track.scrollbar__vertical_1jd9r .scrollbar {
             width: var(--scrollbar-hover-size);
-        } .scrollbar__component_xtn1i.dragging .track.scrollbar__horizontal_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r.dragging .track.scrollbar__horizontal_1jd9r .scrollbar {
             height: var(--scrollbar-hover-size);
         } .simplebar-hide-scrollbar {
     position: fixed;

package/scrollbar/inverted.css

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

package/scrollbar/modern/Component.d.ts

@@ -55,6 +55,10 @@ type ScrollbarProps = {
      * Дополнительный класс контейнера вертикальной полосы прокрутки
      */
     verticalBarClassName?: string;
+    /**
+     * Дополнительный класс контейнера горизонтальной полосы прокрутки
+     */
+    horizontalBarClassName?: string;
     /**
      * Обработчик изменения скролла
      */
@@ -118,6 +122,10 @@ declare const Scrollbar: React.ForwardRefExoticComponent<{
      * Дополнительный класс контейнера вертикальной полосы прокрутки
      */
     verticalBarClassName?: string | undefined;
+    /**
+     * Дополнительный класс контейнера горизонтальной полосы прокрутки
+     */
+    horizontalBarClassName?: string | undefined;
     /**
      * Обработчик изменения скролла
      */

package/scrollbar/modern/Component.js

@@ -797,13 +797,13 @@ SimpleBar.defaultOptions = {
 };
 SimpleBar.instances = new WeakMap();
 
-const defaultColors = {"component":"scrollbar__component_20i4o"};
+const defaultColors = {"component":"scrollbar__component_u4o2q"};
 require('./default.css');
 
-const styles = {"component":"scrollbar__component_xtn1i","wrapper":"scrollbar__wrapper_xtn1i","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_xtn1i","heightAutoObserver":"scrollbar__heightAutoObserver_xtn1i","-webkit-mask":"scrollbar__mask_xtn1i","mask":"scrollbar__mask_xtn1i","offset":"scrollbar__offset_xtn1i","contentWrapper":"scrollbar__contentWrapper_xtn1i","placeholder":"scrollbar__placeholder_xtn1i","vertical":"scrollbar__vertical_xtn1i","hover":"scrollbar__hover_xtn1i","horizontal":"scrollbar__horizontal_xtn1i","content":"scrollbar__content_xtn1i"};
+const styles = {"component":"scrollbar__component_1jd9r","wrapper":"scrollbar__wrapper_1jd9r","heightAutoObserverWrapper":"scrollbar__heightAutoObserverWrapper_1jd9r","heightAutoObserver":"scrollbar__heightAutoObserver_1jd9r","-webkit-mask":"scrollbar__mask_1jd9r","mask":"scrollbar__mask_1jd9r","offset":"scrollbar__offset_1jd9r","contentWrapper":"scrollbar__contentWrapper_1jd9r","placeholder":"scrollbar__placeholder_1jd9r","vertical":"scrollbar__vertical_1jd9r","hover":"scrollbar__hover_1jd9r","horizontal":"scrollbar__horizontal_1jd9r","content":"scrollbar__content_1jd9r"};
 require('./index.css');
 
-const invertedColors = {"component":"scrollbar__component_1hr1d"};
+const invertedColors = {"component":"scrollbar__component_au39e"};
 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, verticalBarClassName, onContentScroll, verticalBarRef, ...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, horizontalBarClassName, onContentScroll, verticalBarRef, ...htmlAttributes }, ref) => {
     const elRef = useRef(null);
     const scrollableNodeRef = useRef(null);
     const contentNodeRef = useRef(null);
@@ -939,7 +939,7 @@ const Scrollbar = React.forwardRef(({ colors = 'default', className, children, s
                                 ...(contentNodeProps.ref ? [contentNodeProps.ref] : []),
                             ]), className: cn(classNames.contentEl, contentNodeProps?.className) }, children)))),
             React.createElement("div", { className: classNames.placeholder })),
-        React.createElement("div", { className: cn(classNames.track, classNames.horizontal) },
+        React.createElement("div", { className: cn(classNames.track, classNames.horizontal, horizontalBarClassName) },
             React.createElement("div", { className: classNames.scrollbar })),
         React.createElement("div", { ref: verticalBarRef, className: cn(classNames.track, classNames.vertical, verticalBarClassName) },
             React.createElement("div", { className: classNames.scrollbar }))));

package/scrollbar/modern/default.css

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

package/scrollbar/modern/index.css

@@ -31,20 +31,20 @@
     --scrollbar-thumb-border-radius: 3px;
     --scrollbar-thumb-side-outer-offset: var(--gap-4);
     --scrollbar-thumb-margin: 3px;
-} .scrollbar__component_xtn1i {
+} .scrollbar__component_1jd9r {
     position: relative;
     flex-direction: column;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-content: flex-start;
     align-items: flex-start
-} .scrollbar__component_xtn1i .scrollbar__wrapper_xtn1i {
+} .scrollbar__component_1jd9r .scrollbar__wrapper_1jd9r {
         overflow: hidden;
         width: inherit;
         height: inherit;
         max-width: inherit;
         max-height: inherit;
-    } .scrollbar__component_xtn1i .scrollbar__heightAutoObserverWrapper_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__heightAutoObserverWrapper_1jd9r {
         box-sizing: inherit;
         height: 100%;
         width: 100%;
@@ -60,7 +60,7 @@
         flex-grow: inherit;
         flex-shrink: 0;
         flex-basis: 0;
-    } .scrollbar__component_xtn1i .scrollbar__heightAutoObserver_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__heightAutoObserver_1jd9r {
         box-sizing: inherit;
         display: block;
         opacity: 0;
@@ -74,7 +74,7 @@
         overflow: hidden;
         pointer-events: none;
         z-index: -1;
-    } .scrollbar__component_xtn1i .scrollbar__mask_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__mask_1jd9r {
         direction: inherit;
         position: absolute;
         overflow: hidden;
@@ -87,7 +87,7 @@
         width: auto;
         height: auto;
         z-index: 0;
-    } .scrollbar__component_xtn1i .scrollbar__offset_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__offset_1jd9r {
         direction: inherit;
         box-sizing: inherit;
         resize: none;
@@ -99,7 +99,7 @@
         padding: var(--gap-0);
         margin: var(--gap-0);
         -webkit-overflow-scrolling: touch;
-    } .scrollbar__component_xtn1i .scrollbar__contentWrapper_xtn1i {
+    } .scrollbar__component_1jd9r .scrollbar__contentWrapper_1jd9r {
         direction: inherit;
         box-sizing: border-box;
         position: relative;
@@ -110,43 +110,43 @@
         max-height: 100%; /* Needed for vertical scroll to trigger */
         outline: none;
         scrollbar-width: none
-    } .scrollbar__component_xtn1i .scrollbar__contentWrapper_xtn1i::-webkit-scrollbar {
+    } .scrollbar__component_1jd9r .scrollbar__contentWrapper_1jd9r::-webkit-scrollbar {
             width: 0;
             height: 0;
-        } .scrollbar__component_xtn1i .scrollbar__placeholder_xtn1i {
+        } .scrollbar__component_1jd9r .scrollbar__placeholder_1jd9r {
         max-height: 100%;
         max-width: 100%;
         width: 100%;
         pointer-events: none;
-    } .scrollbar__component_xtn1i .track {
+    } .scrollbar__component_1jd9r .track {
         z-index: 1;
         position: absolute;
         right: var(--gap-0);
         bottom: var(--gap-0);
         pointer-events: auto;
         overflow: hidden
-    } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i {
+    } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r {
             top: var(--gap-0);
             width: var(--scrollbar-rail-size);
             transform: rotateY(-180deg)
-        } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i.scrollbar__hover_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r.scrollbar__hover_1jd9r .scrollbar {
                     width: var(--scrollbar-hover-size);
-                } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r .scrollbar {
                 width: var(--scrollbar-thumb-size);
                 margin-left: var(--scrollbar-thumb-margin);
                 transition: width 0.1s linear
-            } .scrollbar__component_xtn1i .track.scrollbar__vertical_xtn1i .scrollbar:before {
+            } .scrollbar__component_1jd9r .track.scrollbar__vertical_1jd9r .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_xtn1i .track.scrollbar__horizontal_xtn1i {
+                } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r {
             left: var(--gap-0);
             height: var(--scrollbar-rail-size)
-        } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i.scrollbar__hover_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r.scrollbar__hover_1jd9r .scrollbar {
                     height: var(--scrollbar-hover-size);
-                } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r .scrollbar {
                 right: auto;
                 left: var(--gap-0);
                 bottom: var(--scrollbar-thumb-margin);
@@ -156,35 +156,35 @@
                 width: auto;
                 transition: height 0.1s linear;
                 will-change: height
-            } .scrollbar__component_xtn1i .track.scrollbar__horizontal_xtn1i .scrollbar:before {
+            } .scrollbar__component_1jd9r .track.scrollbar__horizontal_1jd9r .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_xtn1i .scrollbar {
+                } .scrollbar__component_1jd9r .scrollbar {
         position: absolute;
         left: var(--gap-0);
         right: var(--gap-0);
         min-height: 40px
-    } .scrollbar__component_xtn1i .scrollbar:before {
+    } .scrollbar__component_1jd9r .scrollbar:before {
             position: absolute;
             content: '';
             border-radius: var(--scrollbar-thumb-border-radius);
             left: var(--gap-0);
             right: var(--gap-0);
             opacity: 0;
-        } .scrollbar__component_xtn1i .scrollbar.visible:before {
+        } .scrollbar__component_1jd9r .scrollbar.visible:before {
             opacity: 1;
-        } .scrollbar__component_xtn1i.dragging .scrollbar__content_xtn1i {
+        } .scrollbar__component_1jd9r.dragging .scrollbar__content_1jd9r {
         pointer-events: none;
         user-select: none;
         -webkit-user-select: none;
-    } .scrollbar__component_xtn1i.dragging .track {
+    } .scrollbar__component_1jd9r.dragging .track {
         pointer-events: all
-    } .scrollbar__component_xtn1i.dragging .track.scrollbar__vertical_xtn1i .scrollbar {
+    } .scrollbar__component_1jd9r.dragging .track.scrollbar__vertical_1jd9r .scrollbar {
             width: var(--scrollbar-hover-size);
-        } .scrollbar__component_xtn1i.dragging .track.scrollbar__horizontal_xtn1i .scrollbar {
+        } .scrollbar__component_1jd9r.dragging .track.scrollbar__horizontal_1jd9r .scrollbar {
             height: var(--scrollbar-hover-size);
         } .simplebar-hide-scrollbar {
     position: fixed;