@salutejs/plasma-new-hope 0.339.0-canary.2287.18675801044.0 → 0.339.0-canary.2289.18688678772.0

package/es/components/TimePicker/TimePicker.js

@@ -1,14 +1,15 @@
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, extends as _extends, defineProperty as _defineProperty, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import cls from 'classnames';
-import { delimiter, processTimeInput } from './utils/index.js';
-import { StyledPopover, StyledTimePickerGrid, base, StyledInput } from './TimePicker.styles.js';
+import { range, delimiter, animateScrollTo, processTimeInput } from './utils/index.js';
+import { StyledPopover, StyledTimePicker, base, StyledInput } from './TimePicker.styles.js';
 import { classes } from './TimePicker.tokens.js';
 import { base as base$2 } from './variations/_size/base.js';
 import { base as base$1 } from './variations/_view/base.js';
 import { base as base$3 } from './variations/_disabled/base.js';
 import { base as base$4 } from './variations/_readonly/base.js';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation.js';
+import { renderTimeColumn } from './ui/TimeColumn/TimeColumn.js';
 import { getPlacements } from '../../utils/getPopoverPlacement.js';
 
 var _excluded = ["className", "opened", "value", "label", "labelPlacement", "keepPlaceholder", "required", "requiredPlacement", "hasRequiredIndicator", "placeholder", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "disabled", "readonly", "frame", "usePortal", "closeOnOverlayClick", "closeOnEsc", "offset", "stretched", "dropdownAlign", "dropdownWidth", "dropdownHeight", "columnsQuantity", "onToggle", "onFocus", "onChange"];
@@ -60,6 +61,17 @@ var timePickerRoot = function timePickerRoot(Root) {
       onChange = _ref.onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
     var inputRef = useRef(null);
+    var timeSelectRootRef = useRef(null);
+    var hoursColumnRef = useRef(null);
+    var minutesColumnRef = useRef(null);
+    var secondsColumnRef = useRef(null);
+    var timeItemRefs = useRef({});
+    var hoursScrollbarRef = useRef(null);
+    var minutesScrollbarRef = useRef(null);
+    var secondsScrollbarRef = useRef(null);
+    var hoursThumbRef = useRef(null);
+    var minutesThumbRef = useRef(null);
+    var secondsThumbRef = useRef(null);
     var hoursHideTimeoutRef = useRef(null);
     var minutesHideTimeoutRef = useRef(null);
     var secondsHideTimeoutRef = useRef(null);
@@ -78,9 +90,147 @@ var timePickerRoot = function timePickerRoot(Root) {
         currentColumn: null
       }),
       _useState6 = _slicedToArray(_useState5, 2),
+      activeTime = _useState6[0],
       setActiveTime = _useState6[1];
+    var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      itemHeight = _useState8[0],
+      setItemHeight = _useState8[1];
+    var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      gap = _useState10[0],
+      setGap = _useState10[1];
+    var _useState11 = useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      hoursScrollbar = _useState12[0],
+      setHoursScrollbar = _useState12[1];
+    var _useState13 = useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState14 = _slicedToArray(_useState13, 2),
+      minutesScrollbar = _useState14[0],
+      setMinutesScrollbar = _useState14[1];
+    var _useState15 = useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState16 = _slicedToArray(_useState15, 2),
+      secondsScrollbar = _useState16[0],
+      setSecondsScrollbar = _useState16[1];
     var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
     var format = columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm';
+    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,
+        thumbPosition: 0
+      };
+      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, minScrollbarTrackHeight);
+      var maxScroll = scrollHeight - clientHeight;
+      var thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
+      return {
+        thumbHeight: thumbHeight,
+        thumbPosition: thumbPosition
+      };
+    }, []);
+    var showScrollbarWithDelay = useCallback(function (setScrollbar, timeoutRef, columnRef) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      updateScrollbar(columnRef, setScrollbar, true);
+      timeoutRef.current = setTimeout(function () {
+        setScrollbar(function (prev) {
+          return _objectSpread2(_objectSpread2({}, prev), {}, {
+            isVisible: false
+          });
+        });
+        timeoutRef.current = null;
+      }, 2000);
+    }, []);
+    var updateScrollbar = useCallback(function (columnRef, setScrollbar) {
+      var show = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      if (!columnRef.current) return;
+      var _calculateScrollbar = calculateScrollbar(columnRef),
+        thumbHeight = _calculateScrollbar.thumbHeight,
+        thumbPosition = _calculateScrollbar.thumbPosition;
+      setScrollbar(function (prev) {
+        return _objectSpread2(_objectSpread2({}, prev), {}, {
+          thumbHeight: thumbHeight,
+          thumbPosition: thumbPosition,
+          isVisible: show || prev.isVisible
+        });
+      });
+    }, [calculateScrollbar]);
+    var handleColumnScroll = useCallback(function (columnRef, setScrollbar, timeoutRef) {
+      showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
+    }, [showScrollbarWithDelay]);
+    var createScrollbarDragHandler = useCallback(function (columnRef, setScrollbar, timeoutRef) {
+      return function (e) {
+        e.preventDefault();
+        var thumb = e.currentTarget;
+        var track = thumb.parentElement;
+        if (!columnRef.current || !track) return;
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+        var startY = e.clientY;
+        var startThumbPosition = parseFloat(thumb.style.top || '0');
+        var trackRect = track.getBoundingClientRect();
+        var trackHeight = trackRect.height;
+        var thumbHeight = thumb.offsetHeight;
+        var _columnRef$current2 = columnRef.current,
+          scrollHeight = _columnRef$current2.scrollHeight,
+          clientHeight = _columnRef$current2.clientHeight;
+        var maxScroll = scrollHeight - clientHeight;
+        var handleMouseMove = function handleMouseMove(moveEvent) {
+          var deltaY = moveEvent.clientY - startY;
+          var newThumbPosition = Math.max(0, Math.min(trackHeight - thumbHeight, startThumbPosition + deltaY));
+          var scrollPercentage = newThumbPosition / (trackHeight - thumbHeight);
+          var newScrollTop = scrollPercentage * maxScroll;
+          if (columnRef.current) {
+            columnRef.current.scrollTop = newScrollTop;
+          }
+          setScrollbar(function (prev) {
+            return _objectSpread2(_objectSpread2({}, prev), {}, {
+              thumbPosition: newThumbPosition,
+              isDragging: true,
+              isVisible: true
+            });
+          });
+        };
+        var handleMouseUp = function handleMouseUp() {
+          document.removeEventListener('mousemove', handleMouseMove);
+          document.removeEventListener('mouseup', handleMouseUp);
+          setScrollbar(function (prev) {
+            return _objectSpread2(_objectSpread2({}, prev), {}, {
+              isDragging: false
+            });
+          });
+          showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+      };
+    }, [showScrollbarWithDelay]);
     useEffect(function () {
       return function () {
         [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
@@ -90,6 +240,18 @@ var timePickerRoot = function timePickerRoot(Root) {
         });
       };
     }, []);
+    useEffect(function () {
+      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) {
         return;
@@ -116,6 +278,102 @@ var timePickerRoot = function timePickerRoot(Root) {
         setIsInnerOpen(false);
       }
     }, [disabled, readonly]);
+    useEffect(function () {
+      if (isInnerOpen && Object.keys(timeItemRefs.current).length > 0) {
+        var firstItem = Object.values(timeItemRefs.current)[0];
+        if (firstItem) {
+          setItemHeight(firstItem.offsetHeight);
+        }
+      }
+      if (isInnerOpen && hoursColumnRef.current) {
+        var computedStyle = getComputedStyle(hoursColumnRef.current);
+        var gapValue = parseFloat(computedStyle.gap || '0');
+        setGap(gapValue);
+      }
+    }, [isInnerOpen]);
+    useEffect(function () {
+      if (!isInnerOpen || 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, isInnerOpen, 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);
+        }
+      };
+    }, [isInnerOpen, handleColumnScroll]);
+    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);
+        }
+      };
+    }, [isInnerOpen, showScrollbarWithDelay]);
     var handleToggle = function handleToggle() {
       if (disabled || readonly) return;
       var newState = !isInnerOpen;
@@ -129,23 +387,85 @@ var timePickerRoot = function timePickerRoot(Root) {
       }
       onToggle === null || onToggle === void 0 || onToggle(newState);
     };
-    var handleOnChange = function handleOnChange(event) {
-      var _timeString;
-      if (!event) {
-        return;
+    var handleCalendarRootClick = function handleCalendarRootClick(event) {
+      if (disabled || readonly) return;
+      if (isInnerOpen && stretched && event.target === (timeSelectRootRef === null || timeSelectRootRef === void 0 ? void 0 : timeSelectRootRef.current)) {
+        setIsInnerOpen(false);
+        onToggle === null || onToggle === void 0 || onToggle(false);
       }
-      var timeString = event.value;
-      if (format === 'HH:mm' && viewValue.length > 5) {
-        timeString = viewValue.substring(0, 5);
+    };
+    var handleTimeItemClick = function handleTimeItemClick(value, column) {
+      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var currentTime = innerTime.split(delimiter);
+      var newTime = [];
+      if (format === 'HH:mm:ss') {
+        newTime = _toConsumableArray(currentTime);
+        while (newTime.length < 3) {
+          newTime.push('00');
+        }
+      } else {
+        newTime = _toConsumableArray(currentTime);
+        while (newTime.length < 2) {
+          newTime.push('00');
+        }
+        newTime = newTime.slice(0, 2);
       }
-      setInnerTime((_timeString = timeString) !== null && _timeString !== void 0 ? _timeString : '');
-      setActiveTime({
-        hours: !Number.isNaN(event.timeValues.hour) ? event.timeValues.hour : null,
-        minutes: !Number.isNaN(event.timeValues.minute) ? event.timeValues.minute : null,
-        seconds: format === 'HH:mm:ss' && !Number.isNaN(event.timeValues.second) ? event.timeValues.second : null,
-        currentColumn: null
+      switch (column) {
+        case 'hours':
+          newTime[0] = value;
+          if (!currentTime[1]) {
+            newTime[1] = '00';
+          }
+          if (format === 'HH:mm:ss' && !currentTime[2]) {
+            newTime[2] = '00';
+          }
+          break;
+        case 'minutes':
+          newTime[1] = value;
+          if (!currentTime[0]) {
+            newTime[0] = '00';
+          }
+          if (format === 'HH:mm:ss' && !currentTime[2]) {
+            newTime[2] = '00';
+          }
+          break;
+        case 'seconds':
+          if (format === 'HH:mm:ss') {
+            newTime[2] = value;
+            if (!currentTime[0]) {
+              newTime[0] = '00';
+            }
+            if (!currentTime[1]) {
+              newTime[1] = '00';
+            }
+          }
+          break;
+      }
+      var newTimeString = newTime.join(delimiter);
+      setInnerTime(newTimeString);
+      var nextColumn = null;
+      if (column === 'hours' && isNextColumn) {
+        nextColumn = 'minutes';
+      } else if (column === 'minutes' && isNextColumn) {
+        nextColumn = format === 'HH:mm:ss' ? 'seconds' : null;
+      } else {
+        nextColumn = activeTime.currentColumn;
+      }
+      var newActiveTime = {
+        hours: column === 'hours' ? parseInt(value, 10) : activeTime.hours,
+        minutes: column === 'minutes' ? parseInt(value, 10) : activeTime.minutes,
+        seconds: column === 'seconds' ? parseInt(value, 10) : activeTime.seconds,
+        currentColumn: nextColumn
+      };
+      setActiveTime(newActiveTime);
+      onChange === null || onChange === void 0 || onChange({
+        value: newTimeString,
+        timeValues: {
+          hh: parseInt(newTime[0], 10),
+          mm: parseInt(newTime[1], 10),
+          ss: format === 'HH:mm:ss' ? parseInt(newTime[2] || '0', 10) : null
+        }
       });
-      onChange === null || onChange === void 0 || onChange(event);
     };
     var handleInputChange = function handleInputChange(event) {
       var input = event.target.value;
@@ -177,6 +497,7 @@ var timePickerRoot = function timePickerRoot(Root) {
       });
     };
     var handleKeyDown = function handleKeyDown(event) {
+      var _activeTime$currentCo, _activeTime$currentCo2, _activeTime$newColumn, _activeTime$newColumn2;
       if (event.key === 'Enter' && !isInnerOpen) {
         event.preventDefault();
         setIsInnerOpen(true);
@@ -186,6 +507,74 @@ var timePickerRoot = function timePickerRoot(Root) {
           });
         });
         onToggle === null || onToggle === void 0 || onToggle(true);
+        return;
+      }
+      if (!isInnerOpen) {
+        return;
+      }
+      var currentColumn = activeTime.currentColumn;
+      if (!currentColumn) {
+        return;
+      }
+      var newIndex = null;
+      var newColumn = currentColumn;
+      if (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
+        event.preventDefault();
+      }
+      if (['ArrowRight'].includes(event.key) && currentColumn !== 'seconds') {
+        event.preventDefault();
+      }
+      if (['ArrowLeft'].includes(event.key) && currentColumn !== 'hours') {
+        event.preventDefault();
+      }
+      switch (event.key) {
+        case 'ArrowUp':
+          newIndex = Math.max(0, ((_activeTime$currentCo = activeTime[currentColumn]) !== null && _activeTime$currentCo !== void 0 ? _activeTime$currentCo : 0) - 1);
+          if (newIndex !== null) {
+            var value = newIndex.toString().padStart(2, '0');
+            handleTimeItemClick(value, currentColumn, false);
+          }
+          break;
+        case 'ArrowDown':
+        case 'Tab':
+          event.preventDefault();
+          newIndex = Math.min(currentColumn === 'hours' ? 23 : 59, ((_activeTime$currentCo2 = activeTime[currentColumn]) !== null && _activeTime$currentCo2 !== void 0 ? _activeTime$currentCo2 : 0) + 1);
+          if (newIndex !== null) {
+            var _value = newIndex.toString().padStart(2, '0');
+            handleTimeItemClick(_value, currentColumn, false);
+          }
+          break;
+        case 'ArrowRight':
+        case 'Enter':
+          if (currentColumn === 'hours') newColumn = 'minutes';else if (currentColumn === 'minutes' && format === 'HH:mm:ss') newColumn = 'seconds';
+          newIndex = (_activeTime$newColumn = activeTime[newColumn]) !== null && _activeTime$newColumn !== void 0 ? _activeTime$newColumn : 0;
+          setActiveTime(_objectSpread2(_objectSpread2({}, activeTime), {}, _defineProperty({
+            currentColumn: newColumn
+          }, newColumn, newIndex)));
+          if (currentColumn === 'seconds' && format === 'HH:mm:ss' || currentColumn === 'minutes' && format === 'HH:mm') {
+            setIsInnerOpen(false);
+          }
+          break;
+        case 'ArrowLeft':
+          if (currentColumn === 'minutes') {
+            newColumn = 'hours';
+          } else if (currentColumn === 'seconds') {
+            newColumn = 'minutes';
+          }
+          newIndex = (_activeTime$newColumn2 = activeTime[newColumn]) !== null && _activeTime$newColumn2 !== void 0 ? _activeTime$newColumn2 : 0;
+          setActiveTime(_objectSpread2(_objectSpread2({}, activeTime), {}, _defineProperty({
+            currentColumn: newColumn
+          }, newColumn, newIndex)));
+          if (currentColumn === 'hours') {
+            setIsInnerOpen(false);
+          }
+          break;
+      }
+    };
+    var handleTimeItemKeyDown = function handleTimeItemKeyDown(event, column, value) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        handleTimeItemClick(value, column);
       }
     };
     var handleOnKeyDown = function handleOnKeyDown(e) {
@@ -243,16 +632,63 @@ var timePickerRoot = function timePickerRoot(Root) {
       target: TimePickerInput,
       preventOverflow: false,
       align: dropdownAlign
-    }, /*#__PURE__*/React.createElement(StyledTimePickerGrid, {
-      value: viewValue,
-      onChange: handleOnChange,
-      dropdownHeight: dropdownHeight,
-      dropdownWidth: dropdownWidth,
-      format: format,
+    }, /*#__PURE__*/React.createElement(Root, {
+      ref: timeSelectRootRef,
       view: view,
       size: size,
-      disabled: disabled
-    })));
+      disabled: disabled,
+      readonly: readonly,
+      onClick: handleCalendarRootClick,
+      className: dropdownAlign === 'right' ? classes.timePickerPlacementRight : '',
+      stretched: stretched
+    }, /*#__PURE__*/React.createElement(StyledTimePicker, {
+      width: dropdownWidth
+    }, 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
+    })))));
   });
 };
 var timePickerConfig = {