@salutejs/plasma-new-hope 0.337.0-canary.2184.17981110340.0 → 0.337.0-canary.2184.18005913845.0

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

@@ -27,6 +27,7 @@ var _base1 = require("./variations/_view/base");
 var _base2 = require("./variations/_disabled/base");
 var _base3 = require("./variations/_readonly/base");
 var _useKeyboardNavigation = require("./hooks/useKeyboardNavigation");
+var _TimeColumn = require("./ui/TimeColumn/TimeColumn");
 function _array_like_to_array(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -293,6 +294,7 @@ var timePickerRoot = function(Root) {
         var hours = (0, _utils1.range)(24);
         var minutes = (0, _utils1.range)(60);
         var seconds = (0, _utils1.range)(60);
+        var minScrollbarTrackHeight = 20;
         var calculateScrollbar = (0, _react.useCallback)(function(columnRef) {
             if (!columnRef.current) return {
                 thumbHeight: 0,
@@ -300,7 +302,7 @@ var timePickerRoot = function(Root) {
             };
             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 thumbHeight = Math.max(trackHeight / scrollHeight * trackHeight, minScrollbarTrackHeight);
             var maxScroll = scrollHeight - clientHeight;
             var thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
             return {
@@ -404,35 +406,37 @@ var timePickerRoot = function(Root) {
             };
         }, []);
         (0, _react.useEffect)(function() {
-            if (isInnerOpen) {
-                setTimeout(function() {
-                    updateScrollbar(hoursColumnRef, setHoursScrollbar);
-                    updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-                    if (columnsQuantity === 3) {
-                        updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-                    }
-                }, 100);
+            if (!isInnerOpen) {
+                return;
             }
+            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;
-                if (format === 'HH:mm' && viewValue.length > 5) {
-                    timeString = viewValue.substring(0, 5);
-                }
-                setInnerTime(viewValue);
-                var _timeString_split_map = _sliced_to_array(timeString.split(':').map(Number), 3), hh = _timeString_split_map[0], mm = _timeString_split_map[1], ss = _timeString_split_map[2];
-                setActiveTime({
-                    hours: !Number.isNaN(hh) ? hh : null,
-                    minutes: !Number.isNaN(mm) ? mm : null,
-                    seconds: format === 'HH:mm:ss' && !Number.isNaN(ss) ? ss : null,
-                    currentColumn: null
-                });
+            if (!viewValue) {
+                return;
             }
+            var timeString = viewValue;
+            if (format === 'HH:mm' && viewValue.length > 5) {
+                timeString = viewValue.substring(0, 5);
+            }
+            setInnerTime(viewValue);
+            var _timeString_split_map = _sliced_to_array(timeString.split(_utils1.delimiter).map(Number), 3), hh = _timeString_split_map[0], mm = _timeString_split_map[1], ss = _timeString_split_map[2];
+            setActiveTime({
+                hours: !Number.isNaN(hh) ? hh : null,
+                minutes: !Number.isNaN(mm) ? mm : null,
+                seconds: format === 'HH:mm:ss' && !Number.isNaN(ss) ? ss : null,
+                currentColumn: null
+            });
         }, [
             outerValue,
             format
@@ -467,13 +471,7 @@ var timePickerRoot = function(Root) {
                     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);
-                        }
+                        updateScrollbar(columnRef, setHoursScrollbar);
                     }, 300);
                 }
             };
@@ -583,7 +581,7 @@ var timePickerRoot = function(Root) {
         };
         var handleTimeItemClick = function(value, column) {
             var isNextColumn = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
-            var currentTime = innerTime.split(':');
+            var currentTime = innerTime.split(_utils1.delimiter);
             var newTime = [];
             if (format === 'HH:mm:ss') {
                 newTime = _to_consumable_array(currentTime);
@@ -603,10 +601,8 @@ var timePickerRoot = function(Root) {
                     if (!currentTime[1]) {
                         newTime[1] = '00';
                     }
-                    if (format === 'HH:mm:ss') {
-                        if (!currentTime[2]) {
-                            newTime[2] = '00';
-                        }
+                    if (format === 'HH:mm:ss' && !currentTime[2]) {
+                        newTime[2] = '00';
                     }
                     break;
                 case 'minutes':
@@ -614,10 +610,8 @@ var timePickerRoot = function(Root) {
                     if (!currentTime[0]) {
                         newTime[0] = '00';
                     }
-                    if (format === 'HH:mm:ss') {
-                        if (!currentTime[2]) {
-                            newTime[2] = '00';
-                        }
+                    if (format === 'HH:mm:ss' && !currentTime[2]) {
+                        newTime[2] = '00';
                     }
                     break;
                 case 'seconds':
@@ -634,7 +628,7 @@ var timePickerRoot = function(Root) {
                 default:
                     break;
             }
-            var newTimeString = newTime.join(':');
+            var newTimeString = newTime.join(_utils1.delimiter);
             setInnerTime(newTimeString);
             var nextColumn = null;
             if (column === 'hours' && isNextColumn) {
@@ -672,12 +666,14 @@ var timePickerRoot = function(Root) {
                     seconds: values.ss
                 });
             });
-            onChange === null || onChange === void 0 ? void 0 : onChange(_object_spread_props(_object_spread({}, event), {
-                target: _object_spread_props(_object_spread({}, event.target), {
-                    value: innerString,
-                    timeValues: values
-                })
-            }));
+            if (onChange) {
+                onChange(_object_spread_props(_object_spread({}, event), {
+                    target: _object_spread_props(_object_spread({}, event.target), {
+                        value: innerString,
+                        timeValues: values
+                    })
+                }));
+            }
             requestAnimationFrame(function() {
                 if (inputRef.current) {
                     inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
@@ -696,9 +692,13 @@ var timePickerRoot = function(Root) {
                 onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
                 return;
             }
-            if (!isInnerOpen) return;
+            if (!isInnerOpen) {
+                return;
+            }
             var currentColumn = activeTime.currentColumn;
-            if (!currentColumn) return;
+            if (!currentColumn) {
+                return;
+            }
             var newIndex = null;
             var newColumn = currentColumn;
             if ([
@@ -751,8 +751,11 @@ var timePickerRoot = function(Root) {
                     }
                     break;
                 case 'ArrowLeft':
-                    if (currentColumn === 'minutes') newColumn = 'hours';
-                    else if (currentColumn === 'seconds') newColumn = 'minutes';
+                    if (currentColumn === 'minutes') {
+                        newColumn = 'hours';
+                    } else if (currentColumn === 'seconds') {
+                        newColumn = 'minutes';
+                    }
                     var _activeTime_newColumn1;
                     newIndex = (_activeTime_newColumn1 = activeTime[newColumn]) !== null && _activeTime_newColumn1 !== void 0 ? _activeTime_newColumn1 : 0;
                     setActiveTime(_object_spread_props(_object_spread({}, activeTime), _define_property({
@@ -772,11 +775,15 @@ var timePickerRoot = function(Root) {
                 handleTimeItemClick(value, column);
             }
         };
+        var handleOnKeyDown = function(e) {
+            onKeyDownNavigation(e);
+            handleKeyDown(e);
+        };
         var _useKeyNavigation = (0, _useKeyboardNavigation.useKeyNavigation)({
             isCalendarOpen: isInnerOpen,
             format: format,
             maskWithFormat: true,
-            delimiter: ':',
+            delimiter: _utils1.delimiter,
             closeOnEsc: closeOnEsc,
             onToggle: handleToggle
         }), onKeyDownNavigation = _useKeyNavigation.onKeyDown;
@@ -793,10 +800,7 @@ var timePickerRoot = function(Root) {
             textAfter: textAfter,
             onChange: handleInputChange,
             onFocus: onFocus,
-            onKeyDown: function(e) {
-                onKeyDownNavigation(e);
-                handleKeyDown(e);
-            },
+            onKeyDown: handleOnKeyDown,
             required: required,
             requiredPlacement: requiredPlacement,
             hasRequiredIndicator: hasRequiredIndicator,
@@ -804,43 +808,6 @@ var timePickerRoot = function(Root) {
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder
         });
-        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,
-                className: _TimePickertokens.classes.timeColumn
-            }, values.map(function(value, index) {
-                return /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledTimeItem, {
-                    key: value,
-                    ref: function(el) {
-                        timeItemRefs.current["".concat(column, "-").concat(value)] = el;
-                    },
-                    className: (0, _classnames.default)(_define_property({}, _TimePickertokens.classes.timeItemActive, activeTime[column] === index)),
-                    onClick: function() {
-                        return handleTimeItemClick(value, column);
-                    },
-                    onKeyDown: function(e) {
-                        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,
             view: view,
@@ -873,7 +840,52 @@ var timePickerRoot = function(Root) {
             stretched: stretched
         }, /*#__PURE__*/ _react.default.createElement(_TimePickerstyles.StyledTimePicker, {
             width: dropdownWidth
-        }, 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)))));
+        }, (0, _TimeColumn.renderTimeColumn)({
+            values: hours,
+            dropdownHeight: dropdownHeight,
+            column: 'hours',
+            columnRef: hoursColumnRef,
+            scrollbarState: hoursScrollbar,
+            setScrollbar: setHoursScrollbar,
+            scrollbarRef: hoursScrollbarRef,
+            thumbRef: hoursThumbRef,
+            timeoutRef: hoursHideTimeoutRef,
+            timeItemRefs: timeItemRefs,
+            activeTime: activeTime,
+            handleTimeItemClick: handleTimeItemClick,
+            handleTimeItemKeyDown: handleTimeItemKeyDown,
+            createScrollbarDragHandler: createScrollbarDragHandler
+        }), (0, _TimeColumn.renderTimeColumn)({
+            values: minutes,
+            dropdownHeight: dropdownHeight,
+            column: 'minutes',
+            columnRef: minutesColumnRef,
+            scrollbarState: minutesScrollbar,
+            setScrollbar: setMinutesScrollbar,
+            scrollbarRef: minutesScrollbarRef,
+            thumbRef: minutesThumbRef,
+            timeoutRef: minutesHideTimeoutRef,
+            timeItemRefs: timeItemRefs,
+            activeTime: activeTime,
+            handleTimeItemClick: handleTimeItemClick,
+            handleTimeItemKeyDown: handleTimeItemKeyDown,
+            createScrollbarDragHandler: createScrollbarDragHandler
+        }), columnsQuantity === 3 && (0, _TimeColumn.renderTimeColumn)({
+            values: seconds,
+            dropdownHeight: dropdownHeight,
+            column: 'seconds',
+            columnRef: secondsColumnRef,
+            scrollbarState: secondsScrollbar,
+            setScrollbar: setSecondsScrollbar,
+            scrollbarRef: secondsScrollbarRef,
+            thumbRef: secondsThumbRef,
+            timeoutRef: secondsHideTimeoutRef,
+            timeItemRefs: timeItemRefs,
+            activeTime: activeTime,
+            handleTimeItemClick: handleTimeItemClick,
+            handleTimeItemKeyDown: handleTimeItemKeyDown,
+            createScrollbarDragHandler: createScrollbarDragHandler
+        })))));
     });
 };
 var timePickerConfig = {

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

@@ -9,30 +9,12 @@ 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;
     },
     get StyledPopover () {
         return StyledPopover;
     },
-    get StyledTimeColumn () {
-        return StyledTimeColumn;
-    },
-    get StyledTimeItem () {
-        return StyledTimeItem;
-    },
     get StyledTimePicker () {
         return StyledTimePicker;
     },
@@ -92,13 +74,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-d0bdbdc5-0"
+    componentId: "sc-8a747fd1-0"
 })([
     ""
 ]);
 var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     displayName: "TimePicker.styles__StyledInput",
-    componentId: "sc-d0bdbdc5-1"
+    componentId: "sc-8a747fd1-1"
 })([
     "width:100%;",
     ":var(",
@@ -212,6 +194,8 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     ":var(",
     ");",
     ":var(",
+    ");",
+    ":var(",
     ",var(",
     "));",
     ":var(",
@@ -246,7 +230,7 @@ var StyledInput = (0, _styledcomponents.default)(TextField).withConfig({
     ");",
     ":var(",
     ");}"
-], _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);
+], _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.boxShadow, _TimePickertokens.tokens.textFieldBoxShadow, _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:flex;width:var(",
     ");margin-top:var(",
@@ -260,7 +244,7 @@ var base = (0, _styledcomponents.css)([
 ], _TimePickertokens.tokens.width, _TimePickertokens.tokens.dropdownMarginTop, _Popover.popoverClasses.wrapper, _Popover.popoverClasses.target, _TimePickertokens.classes.timePickerstretched, _Popover.popoverClasses.root, _TimePickertokens.classes.timePickerFullWidth, _TimePickertokens.classes.timePickerPlacementRight);
 var StyledTimePicker = _styledcomponents.default.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-d0bdbdc5-2"
+    componentId: "sc-8a747fd1-2"
 })([
     "background:var(",
     ");border-radius:var(",
@@ -272,69 +256,3 @@ var StyledTimePicker = _styledcomponents.default.div.withConfig({
     var width = param.width;
     return (width === 'fullWidth' ? "var(".concat(_TimePickertokens.tokens.width, ")") : width) || "var(".concat(_TimePickertokens.tokens.timePickerWidth, ")");
 }, _TimePickertokens.tokens.timePickerPadding, _TimePickertokens.tokens.scrollbarWidth);
-var StyledTimeItem = _styledcomponents.default.div.withConfig({
-    displayName: "TimePicker.styles__StyledTimeItem",
-    componentId: "sc-d0bdbdc5-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;overflow:auto;font-family:var(",
-    ");font-size:var(",
-    ");font-style:var(",
-    ");font-weight:var(",
-    ");letter-spacing:var(",
-    ");line-height:var(",
-    ");&:hover{background:var(",
-    ");}&.",
-    "{background:var(",
-    ");}"
-], _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-d0bdbdc5-4"
-})([
-    "max-height:",
-    ";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(",
-    ");}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.classes.timeColumnActive, _TimePickertokens.tokens.itemHoverBackground, _TimePickertokens.tokens.itemBorderRadius);
-var CustomScrollbar = _styledcomponents.default.div.withConfig({
-    displayName: "TimePicker.styles__CustomScrollbar",
-    componentId: "sc-d0bdbdc5-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-d0bdbdc5-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-d0bdbdc5-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-d0bdbdc5-8"
-})([
-    "width:100%;height:0%.125rem;"
-]);

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

@@ -93,6 +93,7 @@ var tokens = {
     textFieldBorderColorSuccess: '--plasma-time-picker-textfield-border-color-success',
     textFieldBorderColorSuccessHover: '--plasma-time-picker-textfield-border-color-success-hover',
     textFieldBorderColorSuccessFocus: '--plasma-time-picker-textfield-border-color-success-focus',
+    textFieldBoxShadow: '--plasma-time-picker-textfield-box-shadow',
     textFieldColorReadOnly: '--plasma-time-picker-textfield-color-readonly',
     textFieldBackgroundColorReadOnly: '--plasma-time-picker-textfield-background-color-readonly',
     textFieldBorderColorReadOnly: '--plasma-time-picker-textfield-border-color-readonly',
@@ -126,8 +127,8 @@ var tokens = {
     itemHeight: '--plasma-time-picker-item-height',
     itemBorderRadius: '--plasma-time-picker-item-border-radius',
     itemPadding: '--plasma-time-picker-item-padding',
-    itemHoverBackground: '--plasma-time-picker-item-hover-background',
-    itemActiveBackground: '--plasma-time-picker-item-active-background',
+    itemBackgroundHover: '--plasma-time-picker-item-hover-background',
+    itemBackgroundActive: '--plasma-time-picker-item-active-background',
     itemFontFamily: '--plasma-time-picker-item-font-family',
     itemFontStyle: '--plasma-time-picker-item-font-style',
     itemFontSize: '--plasma-time-picker-item-font-size',

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

@@ -15,21 +15,13 @@ var useKeyNavigation = function(param) {
             event.preventDefault();
             return;
         }
-        switch(event.code){
-            case 'Space':
-                if (!isCalendarOpen) {
-                    event.preventDefault();
-                    onToggle(true, event);
-                }
-                break;
-            case 'Escape':
-                if (isCalendarOpen && closeOnEsc) {
-                    event.preventDefault();
-                    onToggle(false, event);
-                }
-                break;
-            default:
-                break;
+        if (event.code === 'Space' && !isCalendarOpen) {
+            event.preventDefault();
+            onToggle(true, event);
+        }
+        if (event.code === 'Escape' && isCalendarOpen && closeOnEsc) {
+            event.preventDefault();
+            onToggle(false, event);
         }
     };
     return {

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderTimeColumn", {
+    enumerable: true,
+    get: function() {
+        return renderTimeColumn;
+    }
+});
+var _react = /*#__PURE__*/ _interop_require_default(require("react"));
+var _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+var _TimePickertokens = require("../../TimePicker.tokens");
+var _TimeColumnstyles = require("./TimeColumn.styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var renderTimeColumn = function(param) {
+    var values = param.values, dropdownHeight = param.dropdownHeight, column = param.column, columnRef = param.columnRef, scrollbarState = param.scrollbarState, setScrollbar = param.setScrollbar, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs, activeTime = param.activeTime, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler;
+    return /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledRoot, null, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledTimeColumn, {
+        key: column,
+        ref: columnRef,
+        height: dropdownHeight,
+        className: _TimePickertokens.classes.timeColumn
+    }, values.map(function(value, index) {
+        return /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledTimeItem, {
+            key: value,
+            ref: function(el) {
+                timeItemRefs.current["".concat(column, "-").concat(value)] = el;
+            },
+            className: (0, _classnames.default)(_define_property({}, _TimePickertokens.classes.timeItemActive, activeTime[column] === index)),
+            onClick: function() {
+                return handleTimeItemClick(value, column);
+            },
+            onKeyDown: function(e) {
+                return handleTimeItemKeyDown(e, column, value);
+            }
+        }, value);
+    }), /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledEmpty, null)), /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.CustomScrollbar, {
+        ref: scrollbarRef,
+        className: (0, _classnames.default)(_define_property({}, _TimePickertokens.classes.scrollbarVisible, scrollbarState.isVisible))
+    }, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.ScrollbarTrack, null, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.ScrollbarThumb, {
+        ref: thumbRef,
+        style: {
+            height: "".concat(scrollbarState.thumbHeight, "px"),
+            top: "".concat(scrollbarState.thumbPosition, "px")
+        },
+        onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
+    }))));
+};