@salutejs/plasma-new-hope 0.340.0-canary.2325.19232328937.0 → 0.340.0-canary.2326.19261364971.0

package/emotion/cjs/components/TimePickerGrid/TimePickerGrid.js

@@ -217,6 +217,7 @@ var timePickerGridRoot = function(Root) {
             "disabledValues",
             "onChange"
         ]);
+        var _Object_values_;
         var actualFormat = format || (columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm');
         var columnsConfig = (0, _react.useMemo)(function() {
             return (0, _utils.getColumnsFromFormat)(actualFormat);
@@ -227,6 +228,7 @@ var timePickerGridRoot = function(Root) {
         var minutesColumnRef = (0, _react.useRef)(null);
         var secondsColumnRef = (0, _react.useRef)(null);
         var timeItemRefs = (0, _react.useRef)({});
+        var itemHeight = ((_Object_values_ = Object.values(timeItemRefs.current)[0]) === null || _Object_values_ === void 0 ? void 0 : _Object_values_.offsetHeight) || 0;
         var hoursScrollbarRef = (0, _react.useRef)(null);
         var minutesScrollbarRef = (0, _react.useRef)(null);
         var secondsScrollbarRef = (0, _react.useRef)(null);
@@ -237,48 +239,43 @@ var timePickerGridRoot = function(Root) {
         var minutesHideTimeoutRef = (0, _react.useRef)(null);
         var secondsHideTimeoutRef = (0, _react.useRef)(null);
         var _useState = _sliced_to_array((0, _react.useState)(outerValue || ''), 2), innerTime = _useState[0], setInnerTime = _useState[1];
-        var _useState1 = _sliced_to_array((0, _react.useState)({
-            hours: null,
-            minutes: null,
-            seconds: null,
-            currentColumn: null
-        }), 2), activeTime = _useState1[0], setActiveTime = _useState1[1];
-        var _useState2 = _sliced_to_array((0, _react.useState)(0), 2), itemHeight = _useState2[0], setItemHeight = _useState2[1];
-        var _useState3 = _sliced_to_array((0, _react.useState)(0), 2), gap = _useState3[0], setGap = _useState3[1];
-        var _useState4 = _sliced_to_array((0, _react.useState)({
+        var _useState1 = _sliced_to_array((0, _react.useState)(0), 2), gap = _useState1[0], setGap = _useState1[1];
+        var _useState2 = _sliced_to_array((0, _react.useState)({
             isVisible: false,
             thumbHeight: 0,
             thumbPosition: 0,
             isDragging: false
-        }), 2), hoursScrollbar = _useState4[0], setHoursScrollbar = _useState4[1];
-        var _useState5 = _sliced_to_array((0, _react.useState)({
+        }), 2), hoursScrollbar = _useState2[0], setHoursScrollbar = _useState2[1];
+        var _useState3 = _sliced_to_array((0, _react.useState)({
             isVisible: false,
             thumbHeight: 0,
             thumbPosition: 0,
             isDragging: false
-        }), 2), minutesScrollbar = _useState5[0], setMinutesScrollbar = _useState5[1];
-        var _useState6 = _sliced_to_array((0, _react.useState)({
+        }), 2), minutesScrollbar = _useState3[0], setMinutesScrollbar = _useState3[1];
+        var _useState4 = _sliced_to_array((0, _react.useState)({
             isVisible: false,
             thumbHeight: 0,
             thumbPosition: 0,
             isDragging: false
-        }), 2), secondsScrollbar = _useState6[0], setSecondsScrollbar = _useState6[1];
+        }), 2), secondsScrollbar = _useState4[0], setSecondsScrollbar = _useState4[1];
         var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
-        (0, _react.useEffect)(function() {
-            if (activeTime.currentColumn && activeTime[activeTime.currentColumn] !== null) {
-                var _activeTime_activeTime_currentColumn;
-                var column = activeTime.currentColumn;
-                var value = (_activeTime_activeTime_currentColumn = activeTime[activeTime.currentColumn]) === null || _activeTime_activeTime_currentColumn === void 0 ? void 0 : _activeTime_activeTime_currentColumn.toString().padStart(2, '0');
-                var element = timeItemRefs.current["".concat(column, "-").concat(value)];
-                setTimeout(function() {
-                    if (element) {
-                        element.focus();
-                    }
-                }, 0);
+        var getActiveTime = function() {
+            if (viewValue && columnsConfig.length > 0) {
+                var timeValues = (0, _utils.parseTimeString)(viewValue, actualFormat);
+                return {
+                    hours: timeValues.hh,
+                    minutes: timeValues.mm,
+                    seconds: timeValues.ss
+                };
             }
-        }, [
-            activeTime
-        ]);
+            return {
+                hours: null,
+                minutes: null,
+                seconds: null
+            };
+        };
+        var activeTime = getActiveTime();
+        var _useState5 = _sliced_to_array((0, _react.useState)(null), 2), currentColumn = _useState5[0], setCurrentColumn = _useState5[1];
         var getDisabledValuesForColumn = (0, _react.useCallback)(function(columnType) {
             var disabledFromProps;
             if (columnType === 'hours') {
@@ -442,166 +439,19 @@ var timePickerGridRoot = function(Root) {
         }, [
             showScrollbarWithDelay
         ]);
-        (0, _react.useEffect)(function() {
-            if (viewValue && columnsConfig.length > 0) {
-                var timeValues = (0, _utils.parseTimeString)(viewValue, actualFormat);
-                setActiveTime(function(prev) {
-                    return _object_spread_props(_object_spread({}, prev), {
-                        hours: timeValues.hh,
-                        minutes: timeValues.mm,
-                        seconds: timeValues.ss
-                    });
-                });
-            }
-        }, [
-            viewValue,
-            columnsConfig,
-            actualFormat
-        ]);
         var handleContainerFocus = (0, _react.useCallback)(function() {
-            if (activeTime.currentColumn === null && columnsConfig.length > 0) {
+            if (currentColumn === null && columnsConfig.length > 0) {
                 var firstColumn = columnsConfig[0].type;
-                setActiveTime(function(prev) {
-                    return _object_spread_props(_object_spread({}, prev), {
-                        currentColumn: firstColumn
-                    });
+                setCurrentColumn(function(prev) {
+                    return prev !== currentColumn ? firstColumn : currentColumn;
                 });
             }
         }, [
-            activeTime.currentColumn,
+            currentColumn,
             columnsConfig
         ]);
-        (0, _react.useEffect)(function() {
-            return function() {
-                [
-                    hoursHideTimeoutRef,
-                    minutesHideTimeoutRef,
-                    secondsHideTimeoutRef
-                ].forEach(function(timeoutRef) {
-                    if (timeoutRef.current) {
-                        clearTimeout(timeoutRef.current);
-                    }
-                });
-            };
-        }, []);
-        (0, _react.useEffect)(function() {
-            if (Object.keys(timeItemRefs.current).length > 0) {
-                var firstItem = Object.values(timeItemRefs.current)[0];
-                if (firstItem) {
-                    setItemHeight(firstItem.offsetHeight);
-                }
-            }
-            if (hoursColumnRef.current) {
-                var computedStyle = getComputedStyle(hoursColumnRef.current);
-                var gapValue = parseFloat(computedStyle.gap || '0');
-                setGap(gapValue);
-            }
-        }, [
-            outerValue
-        ]);
-        (0, _react.useEffect)(function() {
-            setTimeout(function() {
-                updateScrollbar(hoursColumnRef, setHoursScrollbar);
-                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-                if (columnsQuantity === 3) {
-                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-                }
-            }, 100);
-        }, [
-            columnsQuantity,
-            updateScrollbar
-        ]);
-        (0, _react.useEffect)(function() {
-            if (itemHeight === 0) return;
-            var scrollToActiveItem = function(columnRef, index) {
-                if (columnRef.current && index !== null) {
-                    var scrollPosition = index * (itemHeight + gap);
-                    (0, _utils.animateScrollTo)(columnRef.current, scrollPosition);
-                    setTimeout(function() {
-                        updateScrollbar(columnRef, setHoursScrollbar);
-                    }, 300);
-                }
-            };
-            scrollToActiveItem(hoursColumnRef, activeTime.hours);
-            scrollToActiveItem(minutesColumnRef, activeTime.minutes);
-            scrollToActiveItem(secondsColumnRef, activeTime.seconds);
-        }, [
-            activeTime,
-            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);
-                }
-            };
-        }, []);
-        (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);
-                }
-            };
-        }, []);
         var handleTimeItemClick = function(value, column) {
-            var isNextColumn = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
-            var currentTimeValues = (0, _utils.parseTimeString)(innerTime, actualFormat);
+            var currentTimeValues = (0, _utils.parseTimeString)(viewValue, actualFormat);
             var newTimeValues = _object_spread({}, currentTimeValues);
             switch(column){
                 case 'hours':
@@ -640,20 +490,6 @@ var timePickerGridRoot = function(Root) {
             }
             var newTimeString = (0, _utils.buildTimeString)(newTimeValues, actualFormat);
             setInnerTime(newTimeString);
-            var nextColumn = null;
-            var currentIndex = columnsConfig.findIndex(function(col) {
-                return col.type === column;
-            });
-            if (currentIndex !== -1 && isNextColumn && currentIndex < columnsConfig.length - 1) {
-                nextColumn = columnsConfig[currentIndex + 1].type;
-            }
-            var newActiveTime = {
-                hours: newTimeValues.hh,
-                minutes: newTimeValues.mm,
-                seconds: newTimeValues.ss,
-                currentColumn: nextColumn || column
-            };
-            setActiveTime(newActiveTime);
             onChange === null || onChange === void 0 ? void 0 : onChange({
                 value: newTimeString,
                 timeValues: {
@@ -668,9 +504,6 @@ var timePickerGridRoot = function(Root) {
             var currentIndex = parseInt(value, 10);
             var newIndex = null;
             var newColumn = column;
-            var currentIndexInColumns = columnsConfig.findIndex(function(col) {
-                return col.type === column;
-            });
             switch(event.key){
                 case 'ArrowUp':
                     event.preventDefault();
@@ -685,7 +518,12 @@ var timePickerGridRoot = function(Root) {
                     }), disabledValuesForColumn, 'up');
                     if (newIndex !== null) {
                         var newValue = newIndex.toString().padStart(2, '0');
-                        handleTimeItemClick(newValue, column, false);
+                        var element = timeItemRefs.current["".concat(column, "-").concat(newValue)];
+                        setTimeout(function() {
+                            if (element) {
+                                element.focus();
+                            }
+                        }, 0);
                     }
                     break;
                 case 'ArrowDown':
@@ -701,7 +539,12 @@ var timePickerGridRoot = function(Root) {
                     }), disabledValuesForColumn, 'down');
                     if (newIndex !== null) {
                         var newValue1 = newIndex.toString().padStart(2, '0');
-                        handleTimeItemClick(newValue1, column, false);
+                        var element1 = timeItemRefs.current["".concat(column, "-").concat(newValue1)];
+                        setTimeout(function() {
+                            if (element1) {
+                                element1.focus();
+                            }
+                        }, 0);
                     }
                     break;
                 case 'ArrowRight':
@@ -712,11 +555,15 @@ var timePickerGridRoot = function(Root) {
                         newColumn = 'seconds';
                     }
                     if (newColumn !== column) {
-                        setActiveTime(function(prev) {
-                            return _object_spread_props(_object_spread({}, prev), {
-                                currentColumn: newColumn
-                            });
-                        });
+                        var _activeTime_column;
+                        setCurrentColumn(newColumn);
+                        var newValue2 = (((_activeTime_column = activeTime[column]) === null || _activeTime_column === void 0 ? void 0 : _activeTime_column.toString()) || '0').padStart(2, '0');
+                        var element2 = timeItemRefs.current["".concat(newColumn, "-").concat(newValue2)];
+                        setTimeout(function() {
+                            if (element2) {
+                                element2.focus();
+                            }
+                        }, 0);
                     }
                     break;
                 case 'ArrowLeft':
@@ -727,11 +574,15 @@ var timePickerGridRoot = function(Root) {
                         newColumn = 'minutes';
                     }
                     if (newColumn !== column) {
-                        setActiveTime(function(prev) {
-                            return _object_spread_props(_object_spread({}, prev), {
-                                currentColumn: newColumn
-                            });
-                        });
+                        var _activeTime_column1;
+                        setCurrentColumn(newColumn);
+                        var newValue3 = (((_activeTime_column1 = activeTime[column]) === null || _activeTime_column1 === void 0 ? void 0 : _activeTime_column1.toString()) || '0').padStart(2, '0');
+                        var element3 = timeItemRefs.current["".concat(newColumn, "-").concat(newValue3)];
+                        setTimeout(function() {
+                            if (element3) {
+                                element3.focus();
+                            }
+                        }, 0);
                     }
                     break;
                 case 'Enter':
@@ -746,7 +597,13 @@ var timePickerGridRoot = function(Root) {
                         newIndex++;
                     }
                     if (newIndex < (column === 'hours' ? 24 : 60)) {
-                        handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
+                        var newValue4 = newIndex.toString().padStart(2, '0');
+                        var element4 = timeItemRefs.current["".concat(column, "-").concat(newValue4)];
+                        setTimeout(function() {
+                            if (element4) {
+                                element4.focus();
+                            }
+                        }, 0);
                     }
                     break;
                 case 'End':
@@ -756,83 +613,156 @@ var timePickerGridRoot = function(Root) {
                         newIndex--;
                     }
                     if (newIndex >= 0) {
-                        handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
-                    }
-                    break;
-                case 'Tab':
-                    if (currentIndexInColumns === columnsConfig.length - 1) {
-                        break;
-                    }
-                    event.preventDefault();
-                    if (event.shiftKey) {
-                        if (column === 'minutes') {
-                            newColumn = 'hours';
-                        } else if (column === 'seconds') {
-                            newColumn = 'minutes';
-                        }
-                    } else if (column === 'hours') {
-                        newColumn = 'minutes';
-                    } else if (column === 'minutes' && actualFormat.includes('ss')) {
-                        newColumn = 'seconds';
-                    }
-                    if (newColumn !== column) {
-                        setActiveTime(function(prev) {
-                            return _object_spread_props(_object_spread({}, prev), {
-                                currentColumn: newColumn
-                            });
-                        });
+                        var newValue5 = newIndex.toString().padStart(2, '0');
+                        var element5 = timeItemRefs.current["".concat(column, "-").concat(newValue5)];
+                        setTimeout(function() {
+                            if (element5) {
+                                element5.focus();
+                            }
+                        }, 0);
                     }
                     break;
                 default:
-                    if (/^[0-9]$/.test(event.key)) {
-                        event.preventDefault();
-                        var inputNumber = parseInt(event.key, 10);
-                        if (column === 'hours') {
-                            if (inputNumber <= 2) {
-                                var tens = inputNumber;
-                                var handleSecondInput = function(e) {
-                                    if (/^[0-9]$/.test(e.key)) {
-                                        var units = parseInt(e.key, 10);
-                                        var total = tens * 10 + units;
-                                        if (total < 24 && !disabledValuesForColumn.includes(total)) {
-                                            handleTimeItemClick(total.toString().padStart(2, '0'), column);
-                                        }
-                                        document.removeEventListener('keydown', handleSecondInput);
-                                    }
-                                };
-                                document.addEventListener('keydown', handleSecondInput);
-                                setTimeout(function() {
-                                    document.removeEventListener('keydown', handleSecondInput);
-                                }, 1000);
-                            } else if (inputNumber <= 9) {
-                                if (!disabledValuesForColumn.includes(inputNumber)) {
-                                    handleTimeItemClick(inputNumber.toString().padStart(2, '0'), column);
-                                }
-                            }
-                        } else if (inputNumber <= 5) {
-                            var tens1 = inputNumber;
-                            var handleSecondInput1 = function(e) {
-                                if (/^[0-9]$/.test(e.key)) {
-                                    var units = parseInt(e.key, 10);
-                                    var total = tens1 * 10 + units;
-                                    if (total < 60 && !disabledValuesForColumn.includes(total)) {
-                                        handleTimeItemClick(total.toString().padStart(2, '0'), column);
-                                    }
-                                    document.removeEventListener('keydown', handleSecondInput1);
-                                }
-                            };
-                            document.addEventListener('keydown', handleSecondInput1);
-                            setTimeout(function() {
-                                document.removeEventListener('keydown', handleSecondInput1);
-                            }, 1000);
-                        } else if (inputNumber <= 9) {
-                            if (!disabledValuesForColumn.includes(inputNumber)) {
-                                handleTimeItemClick(inputNumber.toString().padStart(2, '0'), column);
-                            }
-                        }
-                    }
+                    break;
             }
         };
+        (0, _react.useEffect)(function() {
+            if (currentColumn && currentColumn !== null) {
+                var _activeTime_currentColumn;
+                var column = currentColumn;
+                var value = (_activeTime_currentColumn = activeTime[currentColumn]) === null || _activeTime_currentColumn === void 0 ? void 0 : _activeTime_currentColumn.toString().padStart(2, '0');
+                var element = timeItemRefs.current["".concat(column, "-").concat(value)];
+                setTimeout(function() {
+                    if (element) {
+                        element.focus();
+                    }
+                }, 0);
+            }
+        }, [
+            currentColumn
+        ]);
+        (0, _react.useEffect)(function() {
+            return function() {
+                [
+                    hoursHideTimeoutRef,
+                    minutesHideTimeoutRef,
+                    secondsHideTimeoutRef
+                ].forEach(function(timeoutRef) {
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                    }
+                });
+            };
+        }, []);
+        (0, _react.useEffect)(function() {
+            if (hoursColumnRef.current) {
+                var computedStyle = getComputedStyle(hoursColumnRef.current);
+                var gapValue = parseFloat(computedStyle.gap || '0');
+                setGap(gapValue);
+            }
+        }, [
+            hoursColumnRef.current
+        ]);
+        (0, _react.useEffect)(function() {
+            setTimeout(function() {
+                updateScrollbar(hoursColumnRef, setHoursScrollbar);
+                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+                if (columnsQuantity === 3) {
+                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+                }
+            }, 100);
+        }, [
+            columnsQuantity
+        ]);
+        (0, _react.useEffect)(function() {
+            if (itemHeight === 0) return;
+            var scrollToActiveItem = function(columnRef, index) {
+                if (columnRef.current && index !== null) {
+                    var scrollPosition = index * (itemHeight + gap);
+                    (0, _utils.animateScrollTo)(columnRef.current, scrollPosition);
+                    setTimeout(function() {
+                        updateScrollbar(columnRef, setHoursScrollbar);
+                    }, 300);
+                }
+            };
+            scrollToActiveItem(hoursColumnRef, activeTime.hours);
+            scrollToActiveItem(minutesColumnRef, activeTime.minutes);
+            scrollToActiveItem(secondsColumnRef, activeTime.seconds);
+        }, [
+            activeTime.hours,
+            activeTime.minutes,
+            activeTime.seconds,
+            itemHeight,
+            gap
+        ]);
+        (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);
+                }
+            };
+        }, []);
+        (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);
+                }
+            };
+        }, []);
         return /*#__PURE__*/ _react.default.createElement(Root, _object_spread({
             ref: ref,
             view: view,
@@ -884,6 +814,7 @@ var timePickerGridRoot = function(Root) {
                 dropdownHeight: dropdownHeight,
                 column: type,
                 activeTime: activeTime,
+                currentColumn: currentColumn,
                 handleTimeItemClick: handleTimeItemClick,
                 handleTimeItemKeyDown: handleTimeItemKeyDown,
                 createScrollbarDragHandler: createScrollbarDragHandler,

package/emotion/cjs/components/TimePickerGrid/ui/TimeColumn/TimeColumn.js

@@ -31,7 +31,7 @@ function _interop_require_default(obj) {
     };
 }
 var renderTimeColumn = function(param) {
-    var values = param.values, disabledValues = param.disabledValues, dropdownHeight = param.dropdownHeight, column = param.column, activeTime = param.activeTime, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler, setScrollbar = param.setScrollbar, columnRef = param.columnRef, scrollbarState = param.scrollbarState, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs;
+    var values = param.values, disabledValues = param.disabledValues, dropdownHeight = param.dropdownHeight, column = param.column, activeTime = param.activeTime, currentColumn = param.currentColumn, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler, setScrollbar = param.setScrollbar, columnRef = param.columnRef, scrollbarState = param.scrollbarState, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs;
     var handleKeyDown = function(e, columnType, value) {
         handleTimeItemKeyDown(e, columnType, value);
     };
@@ -58,7 +58,7 @@ var renderTimeColumn = function(param) {
         }
         return 0;
     };
-    var isColumnActive = activeTime.currentColumn === column;
+    var isColumnActive = currentColumn === column;
     var minAvailableIndex = minDisableIndex();
     return /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledRoot, null, /*#__PURE__*/ _react.default.createElement(_TimeColumnstyles.StyledTimeColumn, {
         key: column,