@salutejs/plasma-new-hope 0.340.0-canary.2316.18995854815.0 → 0.340.0-canary.2317.18997940328.0

package/es/components/TimePickerGrid/TimePickerGrid.js

@@ -1,6 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { getColumnsFromFormat, parseTimeString, isTimeDisabled, buildTimeString, animateScrollTo } from './utils/index.js';
+import React, { forwardRef, useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import { getColumnsFromFormat, parseTimeString, isTimeDisabled, animateScrollTo, buildTimeString } from './utils/index.js';
 import { base, StyledTimePicker } from './TimePickerGrid.styles.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
@@ -10,7 +10,6 @@ import { renderTimeColumn } from './ui/TimeColumn/TimeColumn.js';
 var _excluded = ["value", "view", "size", "disabled", "dropdownWidth", "dropdownHeight", "format", "min", "max", "columnsQuantity", "disabledValues", "onChange"];
 var timePickerGridRoot = function timePickerGridRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
-    var _Object$values$;
     var outerValue = _ref.value,
       view = _ref.view,
       size = _ref.size,
@@ -34,7 +33,6 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
     var minutesColumnRef = useRef(null);
     var secondsColumnRef = useRef(null);
     var timeItemRefs = useRef({});
-    var itemHeight = ((_Object$values$ = Object.values(timeItemRefs.current)[0]) === null || _Object$values$ === void 0 ? void 0 : _Object$values$.offsetHeight) || 0;
     var hoursScrollbarRef = useRef(null);
     var minutesScrollbarRef = useRef(null);
     var secondsScrollbarRef = useRef(null);
@@ -48,60 +46,64 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       _useState2 = _slicedToArray(_useState, 2),
       innerTime = _useState2[0],
       setInnerTime = _useState2[1];
-
-    // const [itemHeight, setItemHeight] = useState(0);
-    var _useState3 = useState(0),
+    var _useState3 = useState({
+        hours: null,
+        minutes: null,
+        seconds: null,
+        currentColumn: null
+      }),
       _useState4 = _slicedToArray(_useState3, 2),
-      gap = _useState4[0],
-      setGap = _useState4[1];
-    var _useState5 = useState({
+      activeTime = _useState4[0],
+      setActiveTime = _useState4[1];
+    var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      itemHeight = _useState6[0],
+      setItemHeight = _useState6[1];
+    var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      gap = _useState8[0],
+      setGap = _useState8[1];
+    var _useState9 = useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState6 = _slicedToArray(_useState5, 2),
-      hoursScrollbar = _useState6[0],
-      setHoursScrollbar = _useState6[1];
-    var _useState7 = useState({
+      _useState10 = _slicedToArray(_useState9, 2),
+      hoursScrollbar = _useState10[0],
+      setHoursScrollbar = _useState10[1];
+    var _useState11 = useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      minutesScrollbar = _useState8[0],
-      setMinutesScrollbar = _useState8[1];
-    var _useState9 = useState({
+      _useState12 = _slicedToArray(_useState11, 2),
+      minutesScrollbar = _useState12[0],
+      setMinutesScrollbar = _useState12[1];
+    var _useState13 = useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      secondsScrollbar = _useState10[0],
-      setSecondsScrollbar = _useState10[1];
+      _useState14 = _slicedToArray(_useState13, 2),
+      secondsScrollbar = _useState14[0],
+      setSecondsScrollbar = _useState14[1];
     var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
-    var getActiveTime = function getActiveTime() {
-      if (viewValue && columnsConfig.length > 0) {
-        var timeValues = parseTimeString(viewValue, actualFormat);
-        return {
-          hours: timeValues.hh,
-          minutes: timeValues.mm,
-          seconds: timeValues.ss
-        };
+    useEffect(function () {
+      if (activeTime.currentColumn && activeTime[activeTime.currentColumn] !== null) {
+        var _activeTime$activeTim;
+        var column = activeTime.currentColumn;
+        var value = (_activeTime$activeTim = activeTime[activeTime.currentColumn]) === null || _activeTime$activeTim === void 0 ? void 0 : _activeTime$activeTim.toString().padStart(2, '0');
+        var element = timeItemRefs.current["".concat(column, "-").concat(value)];
+        setTimeout(function () {
+          if (element) {
+            element.focus();
+          }
+        }, 0);
       }
-      return {
-        hours: null,
-        minutes: null,
-        seconds: null
-      };
-    };
-    var activeTime = getActiveTime();
-    var _useState11 = useState(null),
-      _useState12 = _slicedToArray(_useState11, 2),
-      currentColumn = _useState12[0],
-      setCurrentColumn = _useState12[1];
+    }, [activeTime]);
     var getDisabledValuesForColumn = useCallback(function (columnType) {
       var disabledFromProps;
       if (columnType === 'hours') {
@@ -260,16 +262,145 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
         document.addEventListener('mouseup', handleMouseUp);
       };
     }, [showScrollbarWithDelay]);
+    useEffect(function () {
+      if (viewValue && columnsConfig.length > 0) {
+        var timeValues = parseTimeString(viewValue, actualFormat);
+        setActiveTime(function (prev) {
+          return _objectSpread2(_objectSpread2({}, prev), {}, {
+            hours: timeValues.hh,
+            minutes: timeValues.mm,
+            seconds: timeValues.ss
+          });
+        });
+      }
+    }, [viewValue, columnsConfig, actualFormat]);
     var handleContainerFocus = useCallback(function () {
-      if (currentColumn === null && columnsConfig.length > 0) {
+      if (activeTime.currentColumn === null && columnsConfig.length > 0) {
         var firstColumn = columnsConfig[0].type;
-        setCurrentColumn(function (prev) {
-          return prev !== currentColumn ? firstColumn : currentColumn;
+        setActiveTime(function (prev) {
+          return _objectSpread2(_objectSpread2({}, prev), {}, {
+            currentColumn: firstColumn
+          });
+        });
+      }
+    }, [activeTime.currentColumn, columnsConfig]);
+    useEffect(function () {
+      return function () {
+        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
         });
+      };
+    }, []);
+    useEffect(function () {
+      if (Object.keys(timeItemRefs.current).length > 0) {
+        var firstItem = Object.values(timeItemRefs.current)[0];
+        if (firstItem) {
+          setItemHeight(firstItem.offsetHeight);
+        }
       }
-    }, [currentColumn, columnsConfig]);
+      if (hoursColumnRef.current) {
+        var computedStyle = getComputedStyle(hoursColumnRef.current);
+        var gapValue = parseFloat(computedStyle.gap || '0');
+        setGap(gapValue);
+      }
+    }, [outerValue]);
+    useEffect(function () {
+      setTimeout(function () {
+        updateScrollbar(hoursColumnRef, setHoursScrollbar);
+        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+        if (columnsQuantity === 3) {
+          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+        }
+      }, 100);
+    }, [columnsQuantity, updateScrollbar]);
+    useEffect(function () {
+      if (itemHeight === 0) return;
+      var scrollToActiveItem = function scrollToActiveItem(columnRef, index) {
+        if (columnRef.current && index !== null) {
+          var scrollPosition = index * (itemHeight + gap);
+          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]);
+    useEffect(function () {
+      var hoursColumn = hoursColumnRef.current;
+      var minutesColumn = minutesColumnRef.current;
+      var secondsColumn = secondsColumnRef.current;
+      var handleHoursScroll = function handleHoursScroll() {
+        return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
+      };
+      var handleMinutesScroll = function handleMinutesScroll() {
+        return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
+      };
+      var handleSecondsScroll = function handleSecondsScroll() {
+        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);
+        }
+      };
+    }, []);
+    useEffect(function () {
+      var hoursColumn = hoursColumnRef.current;
+      var minutesColumn = minutesColumnRef.current;
+      var secondsColumn = secondsColumnRef.current;
+      var handleHoursMouseEnter = function handleHoursMouseEnter() {
+        return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
+      };
+      var handleMinutesMouseEnter = function handleMinutesMouseEnter() {
+        return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
+      };
+      var handleSecondsMouseEnter = function handleSecondsMouseEnter() {
+        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 handleTimeItemClick(value, column) {
-      var currentTimeValues = parseTimeString(viewValue, actualFormat);
+      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var currentTimeValues = parseTimeString(innerTime, actualFormat);
       var newTimeValues = _objectSpread2({}, currentTimeValues);
       switch (column) {
         case 'hours':
@@ -307,6 +438,20 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       }
       var newTimeString = 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 || onChange({
         value: newTimeString,
         timeValues: {
@@ -321,6 +466,9 @@ var timePickerGridRoot = function timePickerGridRoot(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();
@@ -335,12 +483,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
           }), disabledValuesForColumn, 'up');
           if (newIndex !== null) {
             var newValue = newIndex.toString().padStart(2, '0');
-            var element = timeItemRefs.current["".concat(column, "-").concat(newValue)];
-            setTimeout(function () {
-              if (element) {
-                element.focus();
-              }
-            }, 0);
+            handleTimeItemClick(newValue, column, false);
           }
           break;
         case 'ArrowDown':
@@ -356,12 +499,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
           }), disabledValuesForColumn, 'down');
           if (newIndex !== null) {
             var _newValue = newIndex.toString().padStart(2, '0');
-            var _element = timeItemRefs.current["".concat(column, "-").concat(_newValue)];
-            setTimeout(function () {
-              if (_element) {
-                _element.focus();
-              }
-            }, 0);
+            handleTimeItemClick(_newValue, column, false);
           }
           break;
         case 'ArrowRight':
@@ -372,15 +510,11 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newColumn = 'seconds';
           }
           if (newColumn !== column) {
-            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);
+            setActiveTime(function (prev) {
+              return _objectSpread2(_objectSpread2({}, prev), {}, {
+                currentColumn: newColumn
+              });
+            });
           }
           break;
         case 'ArrowLeft':
@@ -391,15 +525,11 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newColumn = 'minutes';
           }
           if (newColumn !== column) {
-            var _activeTime$column2;
-            setCurrentColumn(newColumn);
-            var _newValue3 = (((_activeTime$column2 = activeTime[column]) === null || _activeTime$column2 === void 0 ? void 0 : _activeTime$column2.toString()) || '0').padStart(2, '0');
-            var _element3 = timeItemRefs.current["".concat(newColumn, "-").concat(_newValue3)];
-            setTimeout(function () {
-              if (_element3) {
-                _element3.focus();
-              }
-            }, 0);
+            setActiveTime(function (prev) {
+              return _objectSpread2(_objectSpread2({}, prev), {}, {
+                currentColumn: newColumn
+              });
+            });
           }
           break;
         case 'Enter':
@@ -414,13 +544,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newIndex++;
           }
           if (newIndex < (column === 'hours' ? 24 : 60)) {
-            var _newValue4 = newIndex.toString().padStart(2, '0');
-            var _element4 = timeItemRefs.current["".concat(column, "-").concat(_newValue4)];
-            setTimeout(function () {
-              if (_element4) {
-                _element4.focus();
-              }
-            }, 0);
+            handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
           }
           break;
         case 'End':
@@ -430,138 +554,83 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newIndex--;
           }
           if (newIndex >= 0) {
-            var _newValue5 = newIndex.toString().padStart(2, '0');
-            var _element5 = timeItemRefs.current["".concat(column, "-").concat(_newValue5)];
-            setTimeout(function () {
-              if (_element5) {
-                _element5.focus();
-              }
-            }, 0);
+            handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
           }
           break;
-      }
-    };
-    useEffect(function () {
-      if (currentColumn && currentColumn !== null) {
-        var _activeTime$currentCo;
-        var column = currentColumn;
-        var value = (_activeTime$currentCo = activeTime[currentColumn]) === null || _activeTime$currentCo === void 0 ? void 0 : _activeTime$currentCo.toString().padStart(2, '0');
-        var element = timeItemRefs.current["".concat(column, "-").concat(value)];
-        setTimeout(function () {
-          if (element) {
-            element.focus();
+        case 'Tab':
+          if (currentIndexInColumns === columnsConfig.length - 1) {
+            break;
           }
-        }, 0);
-      }
-    }, [currentColumn]);
-    useEffect(function () {
-      return function () {
-        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
+          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 _objectSpread2(_objectSpread2({}, prev), {}, {
+                currentColumn: newColumn
+              });
+            });
+          }
+          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 handleSecondInput(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 _tens = inputNumber;
+              var _handleSecondInput = function _handleSecondInput(e) {
+                if (/^[0-9]$/.test(e.key)) {
+                  var units = parseInt(e.key, 10);
+                  var total = _tens * 10 + units;
+                  if (total < 60 && !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);
+              }
+            }
           }
-        });
-      };
-    }, []);
-    useEffect(function () {
-      if (hoursColumnRef.current) {
-        var computedStyle = getComputedStyle(hoursColumnRef.current);
-        var gapValue = parseFloat(computedStyle.gap || '0');
-        setGap(gapValue);
-      }
-    }, [hoursColumnRef.current]);
-    useEffect(function () {
-      setTimeout(function () {
-        updateScrollbar(hoursColumnRef, setHoursScrollbar);
-        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-        if (columnsQuantity === 3) {
-          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-        }
-      }, 100);
-    }, [columnsQuantity]);
-    useEffect(function () {
-      if (itemHeight === 0) return;
-      var scrollToActiveItem = function scrollToActiveItem(columnRef, index) {
-        if (columnRef.current && index !== null) {
-          var scrollPosition = index * (itemHeight + gap);
-          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]);
-    useEffect(function () {
-      var hoursColumn = hoursColumnRef.current;
-      var minutesColumn = minutesColumnRef.current;
-      var secondsColumn = secondsColumnRef.current;
-      var handleHoursScroll = function handleHoursScroll() {
-        return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
-      };
-      var handleMinutesScroll = function handleMinutesScroll() {
-        return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
-      };
-      var handleSecondsScroll = function handleSecondsScroll() {
-        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);
-        }
-      };
-    }, []);
-    useEffect(function () {
-      var hoursColumn = hoursColumnRef.current;
-      var minutesColumn = minutesColumnRef.current;
-      var secondsColumn = secondsColumnRef.current;
-      var handleHoursMouseEnter = function handleHoursMouseEnter() {
-        return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
-      };
-      var handleMinutesMouseEnter = function handleMinutesMouseEnter() {
-        return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
-      };
-      var handleSecondsMouseEnter = function handleSecondsMouseEnter() {
-        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.createElement(Root, _extends({
       ref: ref,
       view: view,
@@ -614,7 +683,6 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
         dropdownHeight: dropdownHeight,
         column: type,
         activeTime: activeTime,
-        currentColumn: currentColumn,
         handleTimeItemClick: handleTimeItemClick,
         handleTimeItemKeyDown: handleTimeItemKeyDown,
         createScrollbarDragHandler: createScrollbarDragHandler,