@salutejs/plasma-new-hope 0.340.0-canary.2314.18974837629.0 → 0.340.0-canary.2316.18997801446.0

package/cjs/components/TimePickerGrid/TimePickerGrid.js

@@ -18,6 +18,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var _excluded = ["value", "view", "size", "disabled", "dropdownWidth", "dropdownHeight", "format", "min", "max", "columnsQuantity", "disabledValues", "onChange"];
 var timePickerGridRoot = function timePickerGridRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _Object$values$;
     var outerValue = _ref.value,
       view = _ref.view,
       size = _ref.size,
@@ -41,6 +42,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
     var minutesColumnRef = React.useRef(null);
     var secondsColumnRef = React.useRef(null);
     var timeItemRefs = React.useRef({});
+    var itemHeight = ((_Object$values$ = Object.values(timeItemRefs.current)[0]) === null || _Object$values$ === void 0 ? void 0 : _Object$values$.offsetHeight) || 0;
     var hoursScrollbarRef = React.useRef(null);
     var minutesScrollbarRef = React.useRef(null);
     var secondsScrollbarRef = React.useRef(null);
@@ -54,64 +56,60 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       innerTime = _useState2[0],
       setInnerTime = _useState2[1];
-    var _useState3 = React.useState({
-        hours: null,
-        minutes: null,
-        seconds: null,
-        currentColumn: null
-      }),
+
+    // const [itemHeight, setItemHeight] = useState(0);
+    var _useState3 = React.useState(0),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      activeTime = _useState4[0],
-      setActiveTime = _useState4[1];
-    var _useState5 = React.useState(0),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      itemHeight = _useState6[0],
-      setItemHeight = _useState6[1];
-    var _useState7 = React.useState(0),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      gap = _useState8[0],
-      setGap = _useState8[1];
-    var _useState9 = React.useState({
+      gap = _useState4[0],
+      setGap = _useState4[1];
+    var _useState5 = React.useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      hoursScrollbar = _useState10[0],
-      setHoursScrollbar = _useState10[1];
-    var _useState11 = React.useState({
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      hoursScrollbar = _useState6[0],
+      setHoursScrollbar = _useState6[1];
+    var _useState7 = React.useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-      minutesScrollbar = _useState12[0],
-      setMinutesScrollbar = _useState12[1];
-    var _useState13 = React.useState({
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      minutesScrollbar = _useState8[0],
+      setMinutesScrollbar = _useState8[1];
+    var _useState9 = React.useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-      secondsScrollbar = _useState14[0],
-      setSecondsScrollbar = _useState14[1];
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      secondsScrollbar = _useState10[0],
+      setSecondsScrollbar = _useState10[1];
     var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
-    React.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);
+    var getActiveTime = function getActiveTime() {
+      if (viewValue && columnsConfig.length > 0) {
+        var timeValues = index.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 _useState11 = React.useState(null),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      currentColumn = _useState12[0],
+      setCurrentColumn = _useState12[1];
     var getDisabledValuesForColumn = React.useCallback(function (columnType) {
       var disabledFromProps;
       if (columnType === 'hours') {
@@ -270,145 +268,16 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
         document.addEventListener('mouseup', handleMouseUp);
       };
     }, [showScrollbarWithDelay]);
-    React.useEffect(function () {
-      if (viewValue && columnsConfig.length > 0) {
-        var timeValues = index.parseTimeString(viewValue, actualFormat);
-        setActiveTime(function (prev) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-            hours: timeValues.hh,
-            minutes: timeValues.mm,
-            seconds: timeValues.ss
-          });
-        });
-      }
-    }, [viewValue, columnsConfig, actualFormat]);
     var handleContainerFocus = 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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-            currentColumn: firstColumn
-          });
-        });
-      }
-    }, [activeTime.currentColumn, columnsConfig]);
-    React.useEffect(function () {
-      return function () {
-        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-          }
+        setCurrentColumn(function (prev) {
+          return prev !== currentColumn ? firstColumn : currentColumn;
         });
-      };
-    }, []);
-    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]);
-    React.useEffect(function () {
-      setTimeout(function () {
-        updateScrollbar(hoursColumnRef, setHoursScrollbar);
-        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-        if (columnsQuantity === 3) {
-          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-        }
-      }, 100);
-    }, [columnsQuantity, updateScrollbar]);
-    React.useEffect(function () {
-      if (itemHeight === 0) return;
-      var scrollToActiveItem = function scrollToActiveItem(columnRef, index$1) {
-        if (columnRef.current && index$1 !== null) {
-          var scrollPosition = index$1 * (itemHeight + gap);
-          index.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]);
-    React.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);
-        }
-      };
-    }, []);
-    React.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);
-        }
-      };
-    }, []);
+    }, [currentColumn, columnsConfig]);
     var handleTimeItemClick = function handleTimeItemClick(value, column) {
-      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var currentTimeValues = index.parseTimeString(innerTime, actualFormat);
+      var currentTimeValues = index.parseTimeString(viewValue, actualFormat);
       var newTimeValues = _rollupPluginBabelHelpers.objectSpread2({}, currentTimeValues);
       switch (column) {
         case 'hours':
@@ -446,20 +315,6 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       }
       var newTimeString = index.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: {
@@ -474,9 +329,6 @@ 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();
@@ -491,7 +343,12 @@ var timePickerGridRoot = function timePickerGridRoot(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':
@@ -507,7 +364,12 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
           }), disabledValuesForColumn, 'down');
           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 'ArrowRight':
@@ -518,11 +380,15 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newColumn = 'seconds';
           }
           if (newColumn !== column) {
-            setActiveTime(function (prev) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, 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':
@@ -533,11 +399,15 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newColumn = 'minutes';
           }
           if (newColumn !== column) {
-            setActiveTime(function (prev) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-                currentColumn: newColumn
-              });
-            });
+            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);
           }
           break;
         case 'Enter':
@@ -552,7 +422,13 @@ var timePickerGridRoot = function timePickerGridRoot(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':
@@ -562,83 +438,138 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newIndex--;
           }
           if (newIndex >= 0) {
-            handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
+            var _newValue5 = newIndex.toString().padStart(2, '0');
+            var _element5 = timeItemRefs.current["".concat(column, "-").concat(_newValue5)];
+            setTimeout(function () {
+              if (_element5) {
+                _element5.focus();
+              }
+            }, 0);
           }
           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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-                currentColumn: newColumn
-              });
-            });
+      }
+    };
+    React.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();
           }
-          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);
-              }
-            }
+        }, 0);
+      }
+    }, [currentColumn]);
+    React.useEffect(function () {
+      return function () {
+        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
           }
+        });
+      };
+    }, []);
+    React.useEffect(function () {
+      if (hoursColumnRef.current) {
+        var computedStyle = getComputedStyle(hoursColumnRef.current);
+        var gapValue = parseFloat(computedStyle.gap || '0');
+        setGap(gapValue);
       }
-    };
+    }, [hoursColumnRef.current]);
+    React.useEffect(function () {
+      setTimeout(function () {
+        updateScrollbar(hoursColumnRef, setHoursScrollbar);
+        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+        if (columnsQuantity === 3) {
+          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+        }
+      }, 100);
+    }, [columnsQuantity]);
+    React.useEffect(function () {
+      if (itemHeight === 0) return;
+      var scrollToActiveItem = function scrollToActiveItem(columnRef, index$1) {
+        if (columnRef.current && index$1 !== null) {
+          var scrollPosition = index$1 * (itemHeight + gap);
+          index.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]);
+    React.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);
+        }
+      };
+    }, []);
+    React.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__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
       ref: ref,
       view: view,
@@ -691,6 +622,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
         dropdownHeight: dropdownHeight,
         column: type,
         activeTime: activeTime,
+        currentColumn: currentColumn,
         handleTimeItemClick: handleTimeItemClick,
         handleTimeItemKeyDown: handleTimeItemKeyDown,
         createScrollbarDragHandler: createScrollbarDragHandler,