@salutejs/plasma-new-hope 0.337.0-canary.2184.17942080334.0 → 0.337.0-canary.2184.17969522274.0

package/styled-components/cjs/components/TimePicker/TimePicker.js

@@ -251,6 +251,15 @@ var timePickerRoot = function(Root) {
         var minutesColumnRef = (0, _react.useRef)(null);
         var secondsColumnRef = (0, _react.useRef)(null);
         var timeItemRefs = (0, _react.useRef)({});
+        var hoursScrollbarRef = (0, _react.useRef)(null);
+        var minutesScrollbarRef = (0, _react.useRef)(null);
+        var secondsScrollbarRef = (0, _react.useRef)(null);
+        var hoursThumbRef = (0, _react.useRef)(null);
+        var minutesThumbRef = (0, _react.useRef)(null);
+        var secondsThumbRef = (0, _react.useRef)(null);
+        var hoursHideTimeoutRef = (0, _react.useRef)(null);
+        var minutesHideTimeoutRef = (0, _react.useRef)(null);
+        var secondsHideTimeoutRef = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(opened), 2), isInnerOpen = _useState[0], setIsInnerOpen = _useState[1];
         var _useState1 = _sliced_to_array((0, _react.useState)(outerValue || ''), 2), innerTime = _useState1[0], setInnerTime = _useState1[1];
         var _useState2 = _sliced_to_array((0, _react.useState)({
@@ -261,11 +270,154 @@ var timePickerRoot = function(Root) {
         }), 2), activeTime = _useState2[0], setActiveTime = _useState2[1];
         var _useState3 = _sliced_to_array((0, _react.useState)(0), 2), itemHeight = _useState3[0], setItemHeight = _useState3[1];
         var _useState4 = _sliced_to_array((0, _react.useState)(0), 2), gap = _useState4[0], setGap = _useState4[1];
+        var _useState5 = _sliced_to_array((0, _react.useState)({
+            isVisible: false,
+            thumbHeight: 0,
+            thumbPosition: 0,
+            isDragging: false
+        }), 2), hoursScrollbar = _useState5[0], setHoursScrollbar = _useState5[1];
+        var _useState6 = _sliced_to_array((0, _react.useState)({
+            isVisible: false,
+            thumbHeight: 0,
+            thumbPosition: 0,
+            isDragging: false
+        }), 2), minutesScrollbar = _useState6[0], setMinutesScrollbar = _useState6[1];
+        var _useState7 = _sliced_to_array((0, _react.useState)({
+            isVisible: false,
+            thumbHeight: 0,
+            thumbPosition: 0,
+            isDragging: false
+        }), 2), secondsScrollbar = _useState7[0], setSecondsScrollbar = _useState7[1];
         var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
         var format = columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm';
         var hours = (0, _utils1.range)(24);
         var minutes = (0, _utils1.range)(60);
         var seconds = (0, _utils1.range)(60);
+        var calculateScrollbar = (0, _react.useCallback)(function(columnRef) {
+            if (!columnRef.current) return {
+                thumbHeight: 0,
+                thumbPosition: 0
+            };
+            var _columnRef_current = columnRef.current, scrollTop = _columnRef_current.scrollTop, scrollHeight = _columnRef_current.scrollHeight, clientHeight = _columnRef_current.clientHeight;
+            var trackHeight = clientHeight;
+            var thumbHeight = Math.max(trackHeight / scrollHeight * trackHeight, 20); // Минимальная высота 20px
+            var maxScroll = scrollHeight - clientHeight;
+            var thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
+            return {
+                thumbHeight: thumbHeight,
+                thumbPosition: thumbPosition
+            };
+        }, []);
+        var showScrollbarWithDelay = (0, _react.useCallback)(function(setScrollbar, timeoutRef, columnRef) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            updateScrollbar(columnRef, setScrollbar, true);
+            timeoutRef.current = setTimeout(function() {
+                setScrollbar(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), {
+                        isVisible: false
+                    });
+                });
+                timeoutRef.current = null;
+            }, 2000);
+        }, []);
+        var updateScrollbar = (0, _react.useCallback)(function(columnRef, setScrollbar) {
+            var show = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+            if (!columnRef.current) return;
+            var _calculateScrollbar = calculateScrollbar(columnRef), thumbHeight = _calculateScrollbar.thumbHeight, thumbPosition = _calculateScrollbar.thumbPosition;
+            setScrollbar(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), {
+                    thumbHeight: thumbHeight,
+                    thumbPosition: thumbPosition,
+                    isVisible: show || prev.isVisible
+                });
+            });
+        }, [
+            calculateScrollbar
+        ]);
+        var handleColumnScroll = (0, _react.useCallback)(function(columnRef, setScrollbar, timeoutRef) {
+            showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
+        }, [
+            showScrollbarWithDelay
+        ]);
+        var createScrollbarDragHandler = (0, _react.useCallback)(function(columnRef, setScrollbar, timeoutRef) {
+            return function(e) {
+                e.preventDefault();
+                var thumb = e.currentTarget;
+                var track = thumb.parentElement;
+                if (!columnRef.current || !track) return;
+                if (timeoutRef.current) {
+                    clearTimeout(timeoutRef.current);
+                    timeoutRef.current = null;
+                }
+                var startY = e.clientY;
+                var startThumbPosition = parseFloat(thumb.style.top || '0');
+                var trackRect = track.getBoundingClientRect();
+                var trackHeight = trackRect.height;
+                var thumbHeight = thumb.offsetHeight;
+                var _columnRef_current = columnRef.current, scrollHeight = _columnRef_current.scrollHeight, clientHeight = _columnRef_current.clientHeight;
+                var maxScroll = scrollHeight - clientHeight;
+                var handleMouseMove = function(moveEvent) {
+                    var deltaY = moveEvent.clientY - startY;
+                    var newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, startThumbPosition + deltaY));
+                    var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
+                    var newScrollTop = scrollPercentage * maxScroll;
+                    if (columnRef.current) {
+                        columnRef.current.scrollTop = newScrollTop;
+                    }
+                    setScrollbar(function(prev) {
+                        return _object_spread_props(_object_spread({}, prev), {
+                            thumbPosition: newThumbPosition,
+                            isDragging: true,
+                            isVisible: true
+                        });
+                    });
+                };
+                var handleMouseUp = function() {
+                    document.removeEventListener('mousemove', handleMouseMove);
+                    document.removeEventListener('mouseup', handleMouseUp);
+                    setScrollbar(function(prev) {
+                        return _object_spread_props(_object_spread({}, prev), {
+                            isDragging: false
+                        });
+                    });
+                    showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
+                };
+                document.addEventListener('mousemove', handleMouseMove);
+                document.addEventListener('mouseup', handleMouseUp);
+            };
+        }, [
+            showScrollbarWithDelay
+        ]);
+        (0, _react.useEffect)(function() {
+            return function() {
+                [
+                    hoursHideTimeoutRef,
+                    minutesHideTimeoutRef,
+                    secondsHideTimeoutRef
+                ].forEach(function(timeoutRef) {
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                    }
+                });
+            };
+        }, []);
+        (0, _react.useEffect)(function() {
+            if (isInnerOpen) {
+                setTimeout(function() {
+                    updateScrollbar(hoursColumnRef, setHoursScrollbar);
+                    updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+                    if (columnsQuantity === 3) {
+                        updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+                    }
+                }, 100);
+            }
+        }, [
+            isInnerOpen,
+            columnsQuantity,
+            updateScrollbar
+        ]);
         (0, _react.useEffect)(function() {
             if (viewValue) {
                 var timeString = viewValue;
@@ -314,6 +466,15 @@ var timePickerRoot = function(Root) {
                 if (columnRef.current && index !== null) {
                     var scrollPosition = index * (itemHeight + gap);
                     (0, _utils1.animateScrollTo)(columnRef.current, scrollPosition);
+                    setTimeout(function() {
+                        if (columnRef === hoursColumnRef) {
+                            updateScrollbar(hoursColumnRef, setHoursScrollbar);
+                        } else if (columnRef === minutesColumnRef) {
+                            updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+                        } else if (columnRef === secondsColumnRef) {
+                            updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+                        }
+                    }, 300);
                 }
             };
             scrollToActiveItem(hoursColumnRef, activeTime.hours);
@@ -322,7 +483,83 @@ var timePickerRoot = function(Root) {
         }, [
             activeTime,
             isInnerOpen,
-            itemHeight
+            itemHeight,
+            gap,
+            updateScrollbar
+        ]);
+        (0, _react.useEffect)(function() {
+            var hoursColumn = hoursColumnRef.current;
+            var minutesColumn = minutesColumnRef.current;
+            var secondsColumn = secondsColumnRef.current;
+            var handleHoursScroll = function() {
+                return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
+            };
+            var handleMinutesScroll = function() {
+                return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
+            };
+            var handleSecondsScroll = function() {
+                return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
+            };
+            if (hoursColumn) {
+                hoursColumn.addEventListener('scroll', handleHoursScroll);
+            }
+            if (minutesColumn) {
+                minutesColumn.addEventListener('scroll', handleMinutesScroll);
+            }
+            if (secondsColumn) {
+                secondsColumn.addEventListener('scroll', handleSecondsScroll);
+            }
+            return function() {
+                if (hoursColumn) {
+                    hoursColumn.removeEventListener('scroll', handleHoursScroll);
+                }
+                if (minutesColumn) {
+                    minutesColumn.removeEventListener('scroll', handleMinutesScroll);
+                }
+                if (secondsColumn) {
+                    secondsColumn.removeEventListener('scroll', handleSecondsScroll);
+                }
+            };
+        }, [
+            isInnerOpen,
+            handleColumnScroll
+        ]);
+        (0, _react.useEffect)(function() {
+            var hoursColumn = hoursColumnRef.current;
+            var minutesColumn = minutesColumnRef.current;
+            var secondsColumn = secondsColumnRef.current;
+            var handleHoursMouseEnter = function() {
+                return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
+            };
+            var handleMinutesMouseEnter = function() {
+                return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
+            };
+            var handleSecondsMouseEnter = function() {
+                return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
+            };
+            if (hoursColumn) {
+                hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
+            }
+            if (minutesColumn) {
+                minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
+            }
+            if (secondsColumn) {
+                secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
+            }
+            return function() {
+                if (hoursColumn) {
+                    hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
+                }
+                if (minutesColumn) {
+                    minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
+                }
+                if (secondsColumn) {
+                    secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
+                }
+            };
+        }, [
+            isInnerOpen,
+            showScrollbarWithDelay
         ]);
         var handleToggle = function() {
             if (disabled || readonly) return;
@@ -567,11 +804,17 @@ var timePickerRoot = function(Root) {
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder
         });
-        var renderTimeColumn = function(values, column, columnRef) {
-            return /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledTimeColumn, {
+        var renderTimeColumn = function(values, column, columnRef, scrollbarState, setScrollbar, scrollbarRef, thumbRef, timeoutRef) {
+            return /*#__PURE__*/ _react.default.createElement("div", {
+                style: {
+                    position: 'relative',
+                    width: '100%'
+                }
+            }, /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledTimeColumn, {
                 key: column,
                 ref: columnRef,
-                height: dropdownHeight
+                height: dropdownHeight,
+                className: _TimePickertokens.classes.timeColumn
             }, values.map(function(value, index) {
                 return /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledTimeItem, {
                     key: value,
@@ -586,7 +829,17 @@ var timePickerRoot = function(Root) {
                         return handleTimeItemKeyDown(e, column, value);
                     }
                 }, value);
-            }));
+            }), /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledEmpty, null)), /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.CustomScrollbar, {
+                ref: scrollbarRef,
+                className: (0, _classnames.default)(_define_property({}, _TimePickertokens.classes.scrollbarVisible, scrollbarState.isVisible))
+            }, /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.ScrollbarTrack, null, /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.ScrollbarThumb, {
+                ref: thumbRef,
+                style: {
+                    height: "".concat(scrollbarState.thumbHeight, "px"),
+                    top: "".concat(scrollbarState.thumbPosition, "px")
+                },
+                onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
+            }))));
         };
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             stretched: stretched,
@@ -619,7 +872,7 @@ var timePickerRoot = function(Root) {
             stretched: stretched
         }, /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledTimePicker, {
             width: dropdownWidth
-        }, renderTimeColumn(hours, 'hours', hoursColumnRef), renderTimeColumn(minutes, 'minutes', minutesColumnRef), columnsQuantity === 3 && renderTimeColumn(seconds, 'seconds', secondsColumnRef)))));
+        }, renderTimeColumn(hours, 'hours', hoursColumnRef, hoursScrollbar, setHoursScrollbar, hoursScrollbarRef, hoursThumbRef, hoursHideTimeoutRef), renderTimeColumn(minutes, 'minutes', minutesColumnRef, minutesScrollbar, setMinutesScrollbar, minutesScrollbarRef, minutesThumbRef, minutesHideTimeoutRef), columnsQuantity === 3 && renderTimeColumn(seconds, 'seconds', secondsColumnRef, secondsScrollbar, setSecondsScrollbar, secondsScrollbarRef, secondsThumbRef, secondsHideTimeoutRef)))));
     });
 };
 var timePickerConfig = {

package/styled-components/cjs/components/TimePicker/TimePicker.styles.js

@@ -9,6 +9,18 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get CustomScrollbar () {
+        return CustomScrollbar;
+    },
+    get ScrollbarThumb () {
+        return ScrollbarThumb;
+    },
+    get ScrollbarTrack () {
+        return ScrollbarTrack;
+    },
+    get StyledEmpty () {
+        return StyledEmpty;
+    },
     get StyledInput () {
         return StyledInput;
     },
@@ -80,13 +92,13 @@ var mergedPopoverConfig = (0, _engines.mergeConfig)(_Popover.popoverConfig);
 var Popover = (0, _engines.component)(mergedPopoverConfig);
 var StyledPopover = (0, _styledcomponents.default)(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-45298523-0"
+    componentId: "sc-90a263ab-0"
 })([
     ""
 ]);
 var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "TimePicker.styles__StyledInput",
-    componentId: "sc-45298523-1"
+    componentId: "sc-90a263ab-1"
 })([
     "width:100%;",
     ":var(",
@@ -237,34 +249,36 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
 ], _TextField.textFieldTokens.color, _TimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.placeholderColor, _TimePickertokens.tokens.textFieldPlaceholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TimePickertokens.tokens.textFieldPlaceholderColorFocus, _TextField.textFieldTokens.caretColor, _TimePickertokens.tokens.textFieldCaretColor, _TextField.textFieldTokens.focusColor, _TimePickertokens.tokens.textFieldFocusColor, _TextField.textFieldTokens.backgroundColor, _TimePickertokens.tokens.textFieldBackgroundColor, _TextField.textFieldTokens.backgroundColorHover, _TimePickertokens.tokens.textFieldBackgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TimePickertokens.tokens.textFieldBackgroundColorFocus, _TextField.textFieldTokens.borderColor, _TimePickertokens.tokens.borderColor, _TextField.textFieldTokens.borderColorHover, _TimePickertokens.tokens.borderColorHover, _TextField.textFieldTokens.borderColorFocus, _TimePickertokens.tokens.borderColorFocus, _TextField.textFieldTokens.colorReadOnly, _TimePickertokens.tokens.textFieldColorReadOnly, _TextField.textFieldTokens.backgroundColorReadOnly, _TimePickertokens.tokens.textFieldBackgroundColorReadOnly, _TextField.textFieldTokens.borderColorReadOnly, _TimePickertokens.tokens.textFieldBorderColorReadOnly, _TextField.textFieldTokens.placeholderColorReadOnly, _TimePickertokens.tokens.textFieldPlaceholderColorReadOnly, _TextField.textFieldTokens.height, _TimePickertokens.tokens.textFieldHeight, _TextField.textFieldTokens.borderWidth, _TimePickertokens.tokens.textFieldBorderWidth, _TextField.textFieldTokens.borderRadius, _TimePickertokens.tokens.textFieldBorderRadius, _TextField.textFieldTokens.padding, _TimePickertokens.tokens.textFieldPadding, _TextField.textFieldTokens.labelInnerPadding, _TimePickertokens.tokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TimePickertokens.tokens.contentLabelInnerPadding, _TextField.textFieldTokens.labelOffset, _TimePickertokens.tokens.labelOffset, _TextField.textFieldTokens.labelFontFamily, _TimePickertokens.tokens.labelFontFamily, _TextField.textFieldTokens.labelFontStyle, _TimePickertokens.tokens.labelFontStyle, _TextField.textFieldTokens.labelFontSize, _TimePickertokens.tokens.labelFontSize, _TextField.textFieldTokens.labelFontWeight, _TimePickertokens.tokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TimePickertokens.tokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TimePickertokens.tokens.labelLineHeight, _TextField.textFieldTokens.labelInnerFontFamily, _TimePickertokens.tokens.labelInnerFontFamily, _TextField.textFieldTokens.labelInnerFontSize, _TimePickertokens.tokens.labelInnerFontSize, _TextField.textFieldTokens.labelInnerFontStyle, _TimePickertokens.tokens.labelInnerFontStyle, _TextField.textFieldTokens.labelInnerFontWeight, _TimePickertokens.tokens.labelInnerFontWeight, _TextField.textFieldTokens.labelInnerLetterSpacing, _TimePickertokens.tokens.labelInnerLetterSpacing, _TextField.textFieldTokens.labelInnerLineHeight, _TimePickertokens.tokens.labelInnerLineHeight, _TextField.textFieldTokens.labelColorReadOnly, _TimePickertokens.tokens.labelColorReadOnly, _TextField.textFieldTokens.indicatorColor, _TimePickertokens.tokens.indicatorColor, _TextField.textFieldTokens.indicatorSizeInner, _TimePickertokens.tokens.indicatorSize, _TextField.textFieldTokens.indicatorSizeOuter, _TimePickertokens.tokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TimePickertokens.tokens.indicatorPlacement, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TimePickertokens.tokens.indicatorOuterPlacement, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TimePickertokens.tokens.indicatorPlacementRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _TimePickertokens.tokens.indicatorOuterPlacementRight, _TextField.textFieldTokens.leftContentMargin, _TimePickertokens.tokens.textFieldLeftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TimePickertokens.tokens.textFieldRightContentMargin, _TextField.textFieldTokens.fontFamily, _TimePickertokens.tokens.textFieldFontFamily, _TextField.textFieldTokens.fontSize, _TimePickertokens.tokens.textFieldFontSize, _TextField.textFieldTokens.fontStyle, _TimePickertokens.tokens.textFieldFontStyle, _TextField.textFieldTokens.fontWeight, _TimePickertokens.tokens.textFieldFontWeight, _TextField.textFieldTokens.letterSpacing, _TimePickertokens.tokens.textFieldLetterSpacing, _TextField.textFieldTokens.lineHeight, _TimePickertokens.tokens.textFieldLineHeight, _TextField.textFieldTokens.disabledOpacity, _TimePickertokens.tokens.disabledOpacity, _TextField.textFieldTokens.textBeforeColor, _TimePickertokens.tokens.textFieldTextBeforeColor, _TextField.textFieldTokens.textAfterColor, _TimePickertokens.tokens.textFieldTextAfterColor, _TextField.textFieldTokens.textBeforeMargin, _TimePickertokens.tokens.textFieldTextBeforeMargin, _TextField.textFieldTokens.textAfterMargin, _TimePickertokens.tokens.textFieldTextAfterMargin, _TextField.textFieldTokens.contentSlotColor, _TimePickertokens.tokens.textFieldContentSlotColor, _TimePickertokens.tokens.textFieldColor, _TextField.textFieldTokens.contentSlotRightColor, _TimePickertokens.tokens.textFieldContentRightSlotColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotRightColorHover, _TimePickertokens.tokens.textFieldContentRightSlotColorHover, _TextField.textFieldTokens.contentSlotRightColor, _TimePickertokens.classes.timePickerError, _TextField.textFieldTokens.backgroundColor, _TimePickertokens.tokens.textFieldBackgroundErrorColor, _TextField.textFieldTokens.backgroundColorHover, _TimePickertokens.tokens.textFieldBackgroundErrorColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TimePickertokens.tokens.textFieldBackgroundErrorColorFocus, _TextField.textFieldTokens.borderColor, _TimePickertokens.tokens.textFieldBorderColorError, _TextField.textFieldTokens.borderColorHover, _TimePickertokens.tokens.textFieldBorderColorErrorHover, _TextField.textFieldTokens.borderColorFocus, _TimePickertokens.tokens.textFieldBorderColorErrorFocus, _TimePickertokens.classes.timePickerSuccess, _TextField.textFieldTokens.backgroundColor, _TimePickertokens.tokens.textFieldBackgroundSuccessColor, _TextField.textFieldTokens.backgroundColorHover, _TimePickertokens.tokens.textFieldBackgroundSuccessColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TimePickertokens.tokens.textFieldBackgroundSuccessColorFocus, _TextField.textFieldTokens.borderColor, _TimePickertokens.tokens.textFieldBorderColorSuccess, _TextField.textFieldTokens.borderColorHover, _TimePickertokens.tokens.textFieldBorderColorSuccessHover, _TextField.textFieldTokens.borderColorFocus, _TimePickertokens.tokens.textFieldBorderColorSuccessFocus);
 var base = (0, _styledcomponents.css)([
     "display:inline-block;width:var(",
+    ");margin-top:var(",
     ");.",
     ",.",
     "{width:inherit;}&.",
     "{width:100%;.",
     "{width:100%;}}&.",
     "{width:100%;}"
-], _TimePickertokens.tokens.width, _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _TimePickertokens.classes.timePickerstretched, _Popover.popoverClasses.root, _TimePickertokens.classes.timePickerFullWidth);
+], _TimePickertokens.tokens.width, _TimePickertokens.tokens.dropdownMarginTop, _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _TimePickertokens.classes.timePickerstretched, _Popover.popoverClasses.root, _TimePickertokens.classes.timePickerFullWidth);
 var StyledTimePicker = _styledcomponents.default.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-45298523-2"
+    componentId: "sc-90a263ab-2"
 })([
     "background:var(",
     ");border-radius:var(",
     ");width:",
     ";display:flex;padding:var(",
-    ");flex:1 1 1;box-sizing:border-box;position:relative;"
+    ");flex:1 1 1;gap:var(",
+    ");box-sizing:border-box;position:relative;"
 ], _TimePickertokens.tokens.timePickerBackground, _TimePickertokens.tokens.timePickerBorderRadius, function(param) {
     var width = param.width;
     return (width === 'fullWidth' ? "var(".concat(_TimePickertokens.tokens.width, ")") : width) || "var(".concat(_TimePickertokens.tokens.timePickerWidth, ")");
-}, _TimePickertokens.tokens.timePickerPadding);
+}, _TimePickertokens.tokens.timePickerPadding, _TimePickertokens.tokens.scrollbarWidth);
 var StyledTimeItem = _styledcomponents.default.div.withConfig({
     displayName: "TimePicker.styles__StyledTimeItem",
-    componentId: "sc-45298523-3"
+    componentId: "sc-90a263ab-3"
 })([
     "height:var(",
     ");padding:var(",
     ");box-sizing:border-box;display:flex;justify-content:center;align-items:center;transition:0.05s;border-radius:var(",
-    ");cursor:pointer;flex-shrink:0;font-family:var(",
+    ");cursor:pointer;flex-shrink:0;overflow:auto;font-family:var(",
     ");font-size:var(",
     ");font-style:var(",
     ");font-weight:var(",
@@ -277,24 +291,49 @@ var StyledTimeItem = _styledcomponents.default.div.withConfig({
 ], _TimePickertokens.tokens.itemHeight, _TimePickertokens.tokens.itemPadding, _TimePickertokens.tokens.itemBorderRadius, _TimePickertokens.tokens.itemFontFamily, _TimePickertokens.tokens.itemFontSize, _TimePickertokens.tokens.itemFontStyle, _TimePickertokens.tokens.itemFontWeight, _TimePickertokens.tokens.itemLetterSpacing, _TimePickertokens.tokens.itemLineHeight, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.classes.timeItemActive, _TimePickertokens.tokens.itemActiveBackground);
 var StyledTimeColumn = _styledcomponents.default.div.withConfig({
     displayName: "TimePicker.styles__StyledTimeColumn",
-    componentId: "sc-45298523-4"
+    componentId: "sc-90a263ab-4"
 })([
     "max-height:",
-    ";overflow-y:scroll;flex:1;z-index:3;margin:calc(var(",
-    ") / 2);box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
+    ";overflow-y:scroll;flex:1;z-index:3;box-sizing:border-box;display:flex;flex-direction:column;gap:var(",
     ");width:100%;&.",
     "{border:0.125rem solid var(",
     ");border-radius:var(",
-    ");}&::-webkit-scrollbar{width:var(",
-    ");height:var(",
-    ");}&::-webkit-scrollbar-track{background:var(",
-    ");border-radius:var(",
-    ");margin-top:var(",
-    ");margin-bottom:var(",
-    ");}&::-webkit-scrollbar-thumb{background:var(",
-    ");border-radius:var(",
-    ");}"
+    ");}scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none;width:0;}"
 ], function(param) {
     var height = param.height;
     return height || "var(".concat(_TimePickertokens.tokens.columnHeight, ")");
-}, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.timeColumnActive, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.tokens.itemBorderRadius, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarTrackColor, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarWidth);
+}, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.timeColumnActive, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.tokens.itemBorderRadius);
+var CustomScrollbar = _styledcomponents.default.div.withConfig({
+    displayName: "TimePicker.styles__CustomScrollbar",
+    componentId: "sc-90a263ab-5"
+})([
+    "position:absolute;top:var(",
+    ");right:0;bottom:var(",
+    ");width:var(",
+    ");opacity:0;transition:opacity 0.3s ease;pointer-events:none;z-index:10;overflow:hidden;&.",
+    "{opacity:1;pointer-events:auto;}"
+], _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarMargin, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.classes.scrollbarVisible);
+var ScrollbarTrack = _styledcomponents.default.div.withConfig({
+    displayName: "TimePicker.styles__ScrollbarTrack",
+    componentId: "sc-90a263ab-6"
+})([
+    "position:relative;width:100%;height:100%;background:var(",
+    ");border-radius:var(",
+    ");"
+], _TimePickertokens.tokens.scrollbarTrackColor, _TimePickertokens.tokens.scrollbarWidth);
+var ScrollbarThumb = _styledcomponents.default.div.withConfig({
+    displayName: "TimePicker.styles__ScrollbarThumb",
+    componentId: "sc-90a263ab-7"
+})([
+    "position:absolute;top:0;left:0;width:100%;background:var(",
+    ");border-radius:var(",
+    ");cursor:pointer;transition:background-color 0.2s ease;&:hover{background:var(",
+    ");}&:active{background:var(",
+    ");}"
+], _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarWidth, _TimePickertokens.tokens.scrollbarColor, _TimePickertokens.tokens.scrollbarTrackColor);
+var StyledEmpty = _styledcomponents.default.div.withConfig({
+    displayName: "TimePicker.styles__StyledEmpty",
+    componentId: "sc-90a263ab-8"
+})([
+    "width:100%;height:0%.125rem;"
+]);

package/styled-components/cjs/components/TimePicker/TimePicker.tokens.js

@@ -25,7 +25,10 @@ var classes = {
     timeItemActive: 'plasma-time-picker-item-active',
     timePickerFullWidth: 'plasma-time-picker-full-width',
     timePickerActive: 'plasma-time-picker-active',
-    timeColumnActive: 'plasma-time-picker-column-active'
+    timeColumnActive: 'plasma-time-picker-column-active',
+    timeColumn: 'plasma-time-picker-column',
+    timeColumnScrolling: 'plasma-time-picker-column-scrolling',
+    scrollbarVisible: 'plasma-time-picker-scrollbar-visible'
 };
 var tokens = {
     width: '--plasma-time-picker-width',
@@ -113,6 +116,7 @@ var tokens = {
     textFieldContentRightSlotColor: '--plasma-time-picker-textfield__content-right-color',
     textFieldContentRightSlotColorHover: '--plasma-time-picker-textfield__content-right-color-hover',
     /** Прозрачность для всего компонента в состоянии disabled */ disabledOpacity: '--plasma-time-picker-disabled-opacity',
+    dropdownMarginTop: '--plasma-time-picker-dropdown-margin-top',
     timePickerBackground: '--plasma-time-picker-ui-background',
     timePickerBorderRadius: '--plasma-time-picker-ui-border-radius',
     timePickerWidth: '--plasma-time-picker-ui-width',

package/styled-components/cjs/components/Tooltip/Tooltip.styles.js

@@ -25,14 +25,16 @@ function _interop_require_default(obj) {
 }
 var TooltipRoot = _styledcomponents.default.div.withConfig({
     displayName: "Tooltip.styles__TooltipRoot",
-    componentId: "sc-e6446bfb-0"
+    componentId: "sc-7a496a90-0"
 })([
-    "padding:var(",
+    "display:flex;align-items:center;padding:var(",
     ") var(",
     ") var(",
     ") var(",
     ");min-height:var(",
-    ");box-sizing:border-box;background-color:var(",
+    ");max-width:",
+    ";min-width:",
+    ";width:max-content;background-color:var(",
     ");border-radius:var(",
     ");box-shadow:var(",
     ");color:var(",
@@ -42,19 +44,17 @@ var TooltipRoot = _styledcomponents.default.div.withConfig({
     ");font-weight:var(",
     ");letter-spacing:var(",
     ");line-height:var(",
-    ");max-width:",
-    ";min-width:",
-    ";width:max-content;word-break:break-word;pointer-events:none;display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
-], _Tooltiptokens.tokens.paddingTop, _Tooltiptokens.tokens.paddingRight, _Tooltiptokens.tokens.paddingBottom, _Tooltiptokens.tokens.paddingLeft, _Tooltiptokens.tokens.minHeight, _Tooltiptokens.tokens.backgroundColor, _Tooltiptokens.tokens.borderRadius, _Tooltiptokens.tokens.boxShadow, _Tooltiptokens.tokens.color, _Tooltiptokens.tokens.textFontFamily, _Tooltiptokens.tokens.textFontSize, _Tooltiptokens.tokens.textFontStyle, _Tooltiptokens.tokens.textFontWeight, _Tooltiptokens.tokens.textFontLetterSpacing, _Tooltiptokens.tokens.textFontLineHeight, function(param) {
+    ");box-sizing:border-box;word-break:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;"
+], _Tooltiptokens.tokens.paddingTop, _Tooltiptokens.tokens.paddingRight, _Tooltiptokens.tokens.paddingBottom, _Tooltiptokens.tokens.paddingLeft, _Tooltiptokens.tokens.minHeight, function(param) {
     var maxWidth = param.maxWidth;
     return maxWidth || 'unset';
 }, function(param) {
     var minWidth = param.minWidth;
     return minWidth || 'unset';
-});
+}, _Tooltiptokens.tokens.backgroundColor, _Tooltiptokens.tokens.borderRadius, _Tooltiptokens.tokens.boxShadow, _Tooltiptokens.tokens.color, _Tooltiptokens.tokens.textFontFamily, _Tooltiptokens.tokens.textFontSize, _Tooltiptokens.tokens.textFontStyle, _Tooltiptokens.tokens.textFontWeight, _Tooltiptokens.tokens.textFontLetterSpacing, _Tooltiptokens.tokens.textFontLineHeight);
 var StyledContentLeft = _styledcomponents.default.div.withConfig({
     displayName: "Tooltip.styles__StyledContentLeft",
-    componentId: "sc-e6446bfb-1"
+    componentId: "sc-7a496a90-1"
 })([
     "display:flex;align-items:center;margin-right:var(",
     ");height:var(",

package/styled-components/cjs/examples/components/Combobox/Combobox.js

@@ -1 +1,16 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Combobox", {
+    enumerable: true,
+    get: function() {
+        return Combobox;
+    }
+});
+var _engines = require("../../../engines");
+var _ = require("../../..");
+var _Comboboxconfig = require("./Combobox.config");
+var mergedConfig = (0, _engines.mergeConfig)(_.comboboxNewConfig, _Comboboxconfig.config);
+var ComboboxComponent = (0, _engines.component)(mergedConfig);
+var Combobox = ComboboxComponent;

package/styled-components/es/components/Note/Note.js

@@ -160,7 +160,7 @@ export var noteRoot = function(Root) {
         var contentWidthWithOffsetToken = contentBefore ? "calc(100% - ".concat(contentBeforeWidth, " - var(").concat(contentGapToken, "))") : '100%';
         var setTruncatedText = function() {
             var _titleHelperRef_current;
-            if (!canUseDOM || !text || !(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current) || !(textRenderHelperRef === null || textRenderHelperRef === void 0 ? void 0 : textRenderHelperRef.current) || !width && !height) {
+            if (!canUseDOM || !text || typeof text !== 'string' || !(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current) || !(textRenderHelperRef === null || textRenderHelperRef === void 0 ? void 0 : textRenderHelperRef.current) || !width && !height) {
                 return;
             }
             var contentHeight = contentWrapperRef.current.offsetHeight;

package/styled-components/es/components/Note/variations/_size/base.js

@@ -36,5 +36,5 @@ export var base = css([
     ");font-weight:var(",
     ");letter-spacing:var(",
     ");line-height:var(",
-    ");word-break:break-all;}"
+    ");overflow-wrap:break-word;}"
 ], tokens.padding, tokens.borderRadius, privateTokens.height, privateTokens.width, tokens.gap, classes.stretch, ContentBefore, tokens.fixedContentBeforeWidth, tokens.fixedContentBeforeHeight, tokens.fixedContentBeforePadding, classes.contentAlignCenter, tokens.paddingScalable, tokens.gapScalable, ContentBefore, ContentWrapper, privateTokens.contentWidthWithOffset, tokens.contentGap, Title, TitleHelper, tokens.titleLineHeight, tokens.titleFontFamily, tokens.titleFontSize, tokens.titleFontStyle, tokens.titleFontWeight, tokens.titleLetterSpacing, tokens.titleLineHeight, Text, TextHelper, tokens.textFontFamily, tokens.textFontSize, tokens.textFontStyle, tokens.textFontWeight, tokens.textLetterSpacing, tokens.textLineHeight);