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

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

@@ -138,14 +138,15 @@ function _unsupported_iterable_to_array(o, minLen) {
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from "react";
 import cls from "classnames";
 import { getPlacements } from "../../utils";
-import { range, processTimeInput, animateScrollTo } from "./utils";
-import { base, StyledInput, StyledPopover, StyledTimeColumn, StyledTimeItem, StyledTimePicker, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledEmpty } from "./TimePicker.styles";
+import { range, processTimeInput, animateScrollTo, delimiter } from "./utils";
+import { base, StyledInput, StyledPopover, StyledTimePicker } from "./TimePicker.styles";
 import { classes } from "./TimePicker.tokens";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as readonlyCSS } from "./variations/_readonly/base";
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
+import { renderTimeColumn } from "./ui/TimeColumn/TimeColumn";
 export var timePickerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, placeholder = _param.placeholder, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, view = _param.view, size = _param.size, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_readonly = _param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, offset = _param.offset, stretched = _param.stretched, _param_dropdownAlign = _param.dropdownAlign, dropdownAlign = _param_dropdownAlign === void 0 ? 'left' : _param_dropdownAlign, dropdownWidth = _param.dropdownWidth, dropdownHeight = _param.dropdownHeight, _param_columnsQuantity = _param.columnsQuantity, columnsQuantity = _param_columnsQuantity === void 0 ? 2 : _param_columnsQuantity, onToggle = _param.onToggle, onFocus = _param.onFocus, onChange = _param.onChange, rest = _object_without_properties(_param, [
@@ -229,6 +230,7 @@ export var timePickerRoot = function(Root) {
         var hours = range(24);
         var minutes = range(60);
         var seconds = range(60);
+        var minScrollbarTrackHeight = 20;
         var calculateScrollbar = useCallback(function(columnRef) {
             if (!columnRef.current) return {
                 thumbHeight: 0,
@@ -236,7 +238,7 @@ export 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 {
@@ -340,35 +342,37 @@ export var timePickerRoot = function(Root) {
             };
         }, []);
         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
         ]);
         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(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
@@ -403,13 +407,7 @@ export var timePickerRoot = function(Root) {
                     var scrollPosition = index * (itemHeight + gap);
                     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);
                 }
             };
@@ -519,7 +517,7 @@ export 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(delimiter);
             var newTime = [];
             if (format === 'HH:mm:ss') {
                 newTime = _to_consumable_array(currentTime);
@@ -539,10 +537,8 @@ export 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':
@@ -550,10 +546,8 @@ export 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':
@@ -570,7 +564,7 @@ export var timePickerRoot = function(Root) {
                 default:
                     break;
             }
-            var newTimeString = newTime.join(':');
+            var newTimeString = newTime.join(delimiter);
             setInnerTime(newTimeString);
             var nextColumn = null;
             if (column === 'hours' && isNextColumn) {
@@ -608,12 +602,14 @@ export 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);
@@ -632,9 +628,13 @@ export 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 ([
@@ -687,8 +687,11 @@ export 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({
@@ -708,11 +711,15 @@ export var timePickerRoot = function(Root) {
                 handleTimeItemClick(value, column);
             }
         };
+        var handleOnKeyDown = function(e) {
+            onKeyDownNavigation(e);
+            handleKeyDown(e);
+        };
         var _useKeyNavigation = useKeyNavigation({
             isCalendarOpen: isInnerOpen,
             format: format,
             maskWithFormat: true,
-            delimiter: ':',
+            delimiter: delimiter,
             closeOnEsc: closeOnEsc,
             onToggle: handleToggle
         }), onKeyDownNavigation = _useKeyNavigation.onKeyDown;
@@ -729,10 +736,7 @@ export 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,
@@ -740,43 +744,6 @@ export var timePickerRoot = function(Root) {
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder
         });
-        var renderTimeColumn = function(values, column, columnRef, scrollbarState, setScrollbar, scrollbarRef, thumbRef, timeoutRef) {
-            return /*#__PURE__*/ React.createElement("div", {
-                style: {
-                    position: 'relative',
-                    width: '100%'
-                }
-            }, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
-                key: column,
-                ref: columnRef,
-                height: dropdownHeight,
-                className: classes.timeColumn
-            }, values.map(function(value, index) {
-                return /*#__PURE__*/ React.createElement(StyledTimeItem, {
-                    key: value,
-                    ref: function(el) {
-                        timeItemRefs.current["".concat(column, "-").concat(value)] = el;
-                    },
-                    className: cls(_define_property({}, classes.timeItemActive, activeTime[column] === index)),
-                    onClick: function() {
-                        return handleTimeItemClick(value, column);
-                    },
-                    onKeyDown: function(e) {
-                        return handleTimeItemKeyDown(e, column, value);
-                    }
-                }, value);
-            }), /*#__PURE__*/ React.createElement(StyledEmpty, null)), /*#__PURE__*/ React.createElement(CustomScrollbar, {
-                ref: scrollbarRef,
-                className: cls(_define_property({}, classes.scrollbarVisible, scrollbarState.isVisible))
-            }, /*#__PURE__*/ React.createElement(ScrollbarTrack, null, /*#__PURE__*/ React.createElement(ScrollbarThumb, {
-                ref: thumbRef,
-                style: {
-                    height: "".concat(scrollbarState.thumbHeight, "px"),
-                    top: "".concat(scrollbarState.thumbPosition, "px")
-                },
-                onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
-            }))));
-        };
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             stretched: stretched,
             view: view,
@@ -809,7 +776,52 @@ export var timePickerRoot = function(Root) {
             stretched: stretched
         }, /*#__PURE__*/ React.createElement(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)))));
+        }, 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
+        }), 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 && 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
+        })))));
     });
 };
 export var timePickerConfig = {

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

@@ -10,14 +10,14 @@ var mergedPopoverConfig = mergeConfig(popoverConfig);
 var Popover = component(mergedPopoverConfig);
 export var StyledPopover = styled(Popover).withConfig({
     displayName: "TimePicker.styles__StyledPopover",
-    componentId: "sc-d0bdbdc5-0"
+    componentId: "sc-8a747fd1-0"
 })([
     ""
 ]);
 // NOTE: переопределение токенов TextField
 export var StyledInput = styled(TextField).withConfig({
     displayName: "TimePicker.styles__StyledInput",
-    componentId: "sc-d0bdbdc5-1"
+    componentId: "sc-8a747fd1-1"
 })([
     "width:100%;",
     ":var(",
@@ -131,6 +131,8 @@ export var StyledInput = styled(TextField).withConfig({
     ":var(",
     ");",
     ":var(",
+    ");",
+    ":var(",
     ",var(",
     "));",
     ":var(",
@@ -165,7 +167,7 @@ export var StyledInput = styled(TextField).withConfig({
     ");",
     ":var(",
     ");}"
-], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelOffset, tokens.labelOffset, textFieldTokens.labelFontFamily, tokens.labelFontFamily, textFieldTokens.labelFontStyle, tokens.labelFontStyle, textFieldTokens.labelFontSize, tokens.labelFontSize, textFieldTokens.labelFontWeight, tokens.labelFontWeight, textFieldTokens.labelLetterSpacing, tokens.labelLetterSpacing, textFieldTokens.labelLineHeight, tokens.labelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.labelColorReadOnly, tokens.labelColorReadOnly, textFieldTokens.indicatorColor, tokens.indicatorColor, textFieldTokens.indicatorSizeInner, tokens.indicatorSize, textFieldTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, textFieldTokens.indicatorLabelPlacementInner, tokens.indicatorPlacement, textFieldTokens.indicatorLabelPlacementOuter, tokens.indicatorOuterPlacement, textFieldTokens.indicatorLabelPlacementInnerRight, tokens.indicatorPlacementRight, textFieldTokens.indicatorLabelPlacementOuterRight, tokens.indicatorOuterPlacementRight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, tokens.textFieldColor, textFieldTokens.contentSlotRightColor, tokens.textFieldContentRightSlotColor, textFieldTokens.contentSlotColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentRightSlotColorHover, textFieldTokens.contentSlotRightColor, classes.timePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.timePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
+], textFieldTokens.color, tokens.textFieldColor, textFieldTokens.placeholderColor, tokens.textFieldPlaceholderColor, textFieldTokens.placeholderColorFocus, tokens.textFieldPlaceholderColorFocus, textFieldTokens.caretColor, tokens.textFieldCaretColor, textFieldTokens.focusColor, tokens.textFieldFocusColor, textFieldTokens.backgroundColor, tokens.textFieldBackgroundColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundColorFocus, textFieldTokens.borderColor, tokens.borderColor, textFieldTokens.borderColorHover, tokens.borderColorHover, textFieldTokens.borderColorFocus, tokens.borderColorFocus, textFieldTokens.boxShadow, tokens.textFieldBoxShadow, textFieldTokens.colorReadOnly, tokens.textFieldColorReadOnly, textFieldTokens.backgroundColorReadOnly, tokens.textFieldBackgroundColorReadOnly, textFieldTokens.borderColorReadOnly, tokens.textFieldBorderColorReadOnly, textFieldTokens.placeholderColorReadOnly, tokens.textFieldPlaceholderColorReadOnly, textFieldTokens.height, tokens.textFieldHeight, textFieldTokens.borderWidth, tokens.textFieldBorderWidth, textFieldTokens.borderRadius, tokens.textFieldBorderRadius, textFieldTokens.padding, tokens.textFieldPadding, textFieldTokens.labelInnerPadding, tokens.labelInnerPadding, textFieldTokens.contentLabelInnerPadding, tokens.contentLabelInnerPadding, textFieldTokens.labelOffset, tokens.labelOffset, textFieldTokens.labelFontFamily, tokens.labelFontFamily, textFieldTokens.labelFontStyle, tokens.labelFontStyle, textFieldTokens.labelFontSize, tokens.labelFontSize, textFieldTokens.labelFontWeight, tokens.labelFontWeight, textFieldTokens.labelLetterSpacing, tokens.labelLetterSpacing, textFieldTokens.labelLineHeight, tokens.labelLineHeight, textFieldTokens.labelInnerFontFamily, tokens.labelInnerFontFamily, textFieldTokens.labelInnerFontSize, tokens.labelInnerFontSize, textFieldTokens.labelInnerFontStyle, tokens.labelInnerFontStyle, textFieldTokens.labelInnerFontWeight, tokens.labelInnerFontWeight, textFieldTokens.labelInnerLetterSpacing, tokens.labelInnerLetterSpacing, textFieldTokens.labelInnerLineHeight, tokens.labelInnerLineHeight, textFieldTokens.labelColorReadOnly, tokens.labelColorReadOnly, textFieldTokens.indicatorColor, tokens.indicatorColor, textFieldTokens.indicatorSizeInner, tokens.indicatorSize, textFieldTokens.indicatorSizeOuter, tokens.indicatorSizeOuter, textFieldTokens.indicatorLabelPlacementInner, tokens.indicatorPlacement, textFieldTokens.indicatorLabelPlacementOuter, tokens.indicatorOuterPlacement, textFieldTokens.indicatorLabelPlacementInnerRight, tokens.indicatorPlacementRight, textFieldTokens.indicatorLabelPlacementOuterRight, tokens.indicatorOuterPlacementRight, textFieldTokens.leftContentMargin, tokens.textFieldLeftContentMargin, textFieldTokens.rightContentMargin, tokens.textFieldRightContentMargin, textFieldTokens.fontFamily, tokens.textFieldFontFamily, textFieldTokens.fontSize, tokens.textFieldFontSize, textFieldTokens.fontStyle, tokens.textFieldFontStyle, textFieldTokens.fontWeight, tokens.textFieldFontWeight, textFieldTokens.letterSpacing, tokens.textFieldLetterSpacing, textFieldTokens.lineHeight, tokens.textFieldLineHeight, textFieldTokens.disabledOpacity, tokens.disabledOpacity, textFieldTokens.textBeforeColor, tokens.textFieldTextBeforeColor, textFieldTokens.textAfterColor, tokens.textFieldTextAfterColor, textFieldTokens.textBeforeMargin, tokens.textFieldTextBeforeMargin, textFieldTokens.textAfterMargin, tokens.textFieldTextAfterMargin, textFieldTokens.contentSlotColor, tokens.textFieldContentSlotColor, tokens.textFieldColor, textFieldTokens.contentSlotRightColor, tokens.textFieldContentRightSlotColor, textFieldTokens.contentSlotColor, textFieldTokens.contentSlotRightColorHover, tokens.textFieldContentRightSlotColorHover, textFieldTokens.contentSlotRightColor, classes.timePickerError, textFieldTokens.backgroundColor, tokens.textFieldBackgroundErrorColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundErrorColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundErrorColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorError, textFieldTokens.borderColorHover, tokens.textFieldBorderColorErrorHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorErrorFocus, classes.timePickerSuccess, textFieldTokens.backgroundColor, tokens.textFieldBackgroundSuccessColor, textFieldTokens.backgroundColorHover, tokens.textFieldBackgroundSuccessColorHover, textFieldTokens.backgroundColorFocus, tokens.textFieldBackgroundSuccessColorFocus, textFieldTokens.borderColor, tokens.textFieldBorderColorSuccess, textFieldTokens.borderColorHover, tokens.textFieldBorderColorSuccessHover, textFieldTokens.borderColorFocus, tokens.textFieldBorderColorSuccessFocus);
 export var base = css([
     "display:flex;width:var(",
     ");margin-top:var(",
@@ -179,7 +181,7 @@ export var base = css([
 ], tokens.width, tokens.dropdownMarginTop, popoverClasses.wrapper, popoverClasses.target, classes.timePickerstretched, popoverClasses.root, classes.timePickerFullWidth, classes.timePickerPlacementRight);
 export var StyledTimePicker = styled.div.withConfig({
     displayName: "TimePicker.styles__StyledTimePicker",
-    componentId: "sc-d0bdbdc5-2"
+    componentId: "sc-8a747fd1-2"
 })([
     "background:var(",
     ");border-radius:var(",
@@ -191,69 +193,3 @@ export var StyledTimePicker = styled.div.withConfig({
     var width = param.width;
     return (width === 'fullWidth' ? "var(".concat(tokens.width, ")") : width) || "var(".concat(tokens.timePickerWidth, ")");
 }, tokens.timePickerPadding, tokens.scrollbarWidth);
-export var StyledTimeItem = styled.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(",
-    ");}"
-], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemHoverBackground, classes.timeItemActive, tokens.itemActiveBackground);
-export var StyledTimeColumn = styled.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(tokens.columnHeight, ")");
-}, tokens.scrollbarWidth, classes.timeColumnActive, tokens.itemHoverBackground, tokens.itemBorderRadius);
-export var CustomScrollbar = styled.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;}"
-], tokens.scrollbarMargin, tokens.scrollbarMargin, tokens.scrollbarWidth, classes.scrollbarVisible);
-export var ScrollbarTrack = styled.div.withConfig({
-    displayName: "TimePicker.styles__ScrollbarTrack",
-    componentId: "sc-d0bdbdc5-6"
-})([
-    "position:relative;width:100%;height:100%;background:var(",
-    ");border-radius:var(",
-    ");"
-], tokens.scrollbarTrackColor, tokens.scrollbarWidth);
-export var ScrollbarThumb = styled.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(",
-    ");}"
-], tokens.scrollbarColor, tokens.scrollbarWidth, tokens.scrollbarColor, tokens.scrollbarTrackColor);
-export var StyledEmpty = styled.div.withConfig({
-    displayName: "TimePicker.styles__StyledEmpty",
-    componentId: "sc-d0bdbdc5-8"
-})([
-    "width:100%;height:0%.125rem;"
-]);

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

@@ -75,6 +75,7 @@ export 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',
@@ -108,8 +109,8 @@ export 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/es/components/TimePicker/hooks/useKeyboardNavigation.js

@@ -5,21 +5,13 @@ export 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/es/components/TimePicker/ui/TimeColumn/TimeColumn.js

@@ -0,0 +1,50 @@
+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;
+}
+import React from "react";
+import cls from "classnames";
+import { classes } from "../../TimePicker.tokens";
+import { StyledTimeColumn, StyledTimeItem, StyledEmpty, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledRoot } from "./TimeColumn.styles";
+export 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.createElement(StyledRoot, null, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
+        key: column,
+        ref: columnRef,
+        height: dropdownHeight,
+        className: classes.timeColumn
+    }, values.map(function(value, index) {
+        return /*#__PURE__*/ React.createElement(StyledTimeItem, {
+            key: value,
+            ref: function(el) {
+                timeItemRefs.current["".concat(column, "-").concat(value)] = el;
+            },
+            className: cls(_define_property({}, classes.timeItemActive, activeTime[column] === index)),
+            onClick: function() {
+                return handleTimeItemClick(value, column);
+            },
+            onKeyDown: function(e) {
+                return handleTimeItemKeyDown(e, column, value);
+            }
+        }, value);
+    }), /*#__PURE__*/ React.createElement(StyledEmpty, null)), /*#__PURE__*/ React.createElement(CustomScrollbar, {
+        ref: scrollbarRef,
+        className: cls(_define_property({}, classes.scrollbarVisible, scrollbarState.isVisible))
+    }, /*#__PURE__*/ React.createElement(ScrollbarTrack, null, /*#__PURE__*/ React.createElement(ScrollbarThumb, {
+        ref: thumbRef,
+        style: {
+            height: "".concat(scrollbarState.thumbHeight, "px"),
+            top: "".concat(scrollbarState.thumbPosition, "px")
+        },
+        onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
+    }))));
+};

package/styled-components/es/components/TimePicker/ui/TimeColumn/TimeColumn.styles.js

@@ -0,0 +1,74 @@
+import styled from "styled-components";
+import { classes, tokens } from "../../TimePicker.tokens";
+export var StyledRoot = styled.div.withConfig({
+    displayName: "TimeColumn.styles__StyledRoot",
+    componentId: "sc-a5ee4233-0"
+})([
+    "position:relative;width:100%;"
+]);
+export var StyledTimeItem = styled.div.withConfig({
+    displayName: "TimeColumn.styles__StyledTimeItem",
+    componentId: "sc-a5ee4233-1"
+})([
+    "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(",
+    ");}"
+], tokens.itemHeight, tokens.itemPadding, tokens.itemBorderRadius, tokens.itemFontFamily, tokens.itemFontSize, tokens.itemFontStyle, tokens.itemFontWeight, tokens.itemLetterSpacing, tokens.itemLineHeight, tokens.itemBackgroundHover, classes.timeItemActive, tokens.itemBackgroundActive);
+export var StyledTimeColumn = styled.div.withConfig({
+    displayName: "TimeColumn.styles__StyledTimeColumn",
+    componentId: "sc-a5ee4233-2"
+})([
+    "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(tokens.columnHeight, ")");
+}, tokens.scrollbarWidth, classes.timeColumnActive, tokens.itemBackgroundHover, tokens.itemBorderRadius);
+export var CustomScrollbar = styled.div.withConfig({
+    displayName: "TimeColumn.styles__CustomScrollbar",
+    componentId: "sc-a5ee4233-3"
+})([
+    "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;}"
+], tokens.scrollbarMargin, tokens.scrollbarMargin, tokens.scrollbarWidth, classes.scrollbarVisible);
+export var ScrollbarTrack = styled.div.withConfig({
+    displayName: "TimeColumn.styles__ScrollbarTrack",
+    componentId: "sc-a5ee4233-4"
+})([
+    "position:relative;width:100%;height:100%;background:var(",
+    ");border-radius:var(",
+    ");"
+], tokens.scrollbarTrackColor, tokens.scrollbarWidth);
+export var ScrollbarThumb = styled.div.withConfig({
+    displayName: "TimeColumn.styles__ScrollbarThumb",
+    componentId: "sc-a5ee4233-5"
+})([
+    "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(",
+    ");}"
+], tokens.scrollbarColor, tokens.scrollbarWidth, tokens.scrollbarColor, tokens.scrollbarTrackColor);
+export var StyledEmpty = styled.div.withConfig({
+    displayName: "TimeColumn.styles__StyledEmpty",
+    componentId: "sc-a5ee4233-6"
+})([
+    "width:100%;height:0%.125rem;"
+]);

package/styled-components/es/components/TimePicker/ui/TimeColumn/TimeColumn.types.js

@@ -0,0 +1 @@
+export { };