@salutejs/plasma-new-hope 0.339.0-canary.2287.18748636481.0 → 0.339.0-canary.2288.18780329906.0

package/cjs/components/TimePickerGrid/TimePickerGrid.js

@@ -1,733 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var index = require('./utils/index.js');
-var TimePickerGrid_styles = require('./TimePickerGrid.styles.js');
-var base$1 = require('./variations/_size/base.js');
-var base = require('./variations/_view/base.js');
-var base$2 = require('./variations/_disabled/base.js');
-var TimeColumn = require('./ui/TimeColumn/TimeColumn.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-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 outerValue = _ref.value,
-      view = _ref.view,
-      size = _ref.size,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      dropdownWidth = _ref.dropdownWidth,
-      dropdownHeight = _ref.dropdownHeight,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? 'HH:mm' : _ref$format,
-      min = _ref.min,
-      max = _ref.max,
-      columnsQuantity = _ref.columnsQuantity,
-      disabledValues = _ref.disabledValues,
-      onChange = _ref.onChange,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-    var actualFormat = format || (columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm');
-    var columnsConfig = React.useMemo(function () {
-      return index.getColumnsFromFormat(actualFormat);
-    }, [actualFormat]);
-    var hoursColumnRef = React.useRef(null);
-    var minutesColumnRef = React.useRef(null);
-    var secondsColumnRef = React.useRef(null);
-    var timeItemRefs = React.useRef({});
-    var hoursScrollbarRef = React.useRef(null);
-    var minutesScrollbarRef = React.useRef(null);
-    var secondsScrollbarRef = React.useRef(null);
-    var hoursThumbRef = React.useRef(null);
-    var minutesThumbRef = React.useRef(null);
-    var secondsThumbRef = React.useRef(null);
-    var hoursHideTimeoutRef = React.useRef(null);
-    var minutesHideTimeoutRef = React.useRef(null);
-    var secondsHideTimeoutRef = React.useRef(null);
-    var _useState = React.useState(outerValue || ''),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      innerTime = _useState2[0],
-      setInnerTime = _useState2[1];
-    var _useState3 = React.useState({
-        hours: null,
-        minutes: null,
-        seconds: null,
-        currentColumn: null
-      }),
-      _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({
-        isVisible: false,
-        thumbHeight: 0,
-        thumbPosition: 0,
-        isDragging: false
-      }),
-      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      hoursScrollbar = _useState10[0],
-      setHoursScrollbar = _useState10[1];
-    var _useState11 = 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({
-        isVisible: false,
-        thumbHeight: 0,
-        thumbPosition: 0,
-        isDragging: false
-      }),
-      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-      secondsScrollbar = _useState14[0],
-      setSecondsScrollbar = _useState14[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);
-      }
-    }, [activeTime]);
-    var getDisabledValuesForColumn = React.useCallback(function (columnType) {
-      var disabledFromProps;
-      if (columnType === 'hours') {
-        disabledFromProps = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.hour) || [];
-      } else if (columnType === 'minutes') {
-        disabledFromProps = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.minute) || [];
-      } else {
-        disabledFromProps = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.second) || [];
-      }
-      var disabledFromMinMax = [];
-      if (min || max) {
-        var timeValues = index.parseTimeString(viewValue || '00:00:00', actualFormat);
-        for (var i = 0; i < (columnType === 'hours' ? 24 : 60); i++) {
-          var testValues = _rollupPluginBabelHelpers.objectSpread2({}, timeValues);
-          if (columnType === 'hours') {
-            testValues.hh = i;
-          } else if (columnType === 'minutes') {
-            testValues.mm = i;
-          } else {
-            testValues.ss = i;
-          }
-          var completeTimeValues = getCompleteTimeValues(testValues, actualFormat);
-          if (index.isTimeDisabled(completeTimeValues, min, max, format)) {
-            disabledFromMinMax.push(i);
-          }
-        }
-      }
-      var normalizedDisabledFromProps = disabledFromProps.map(function (val) {
-        return typeof val === 'string' ? parseInt(val, 10) : val;
-      });
-      return _rollupPluginBabelHelpers.toConsumableArray(new Set([].concat(_rollupPluginBabelHelpers.toConsumableArray(normalizedDisabledFromProps), disabledFromMinMax)));
-    }, [disabledValues, min, max, viewValue, actualFormat]);
-    var getCompleteTimeValues = React.useCallback(function (timeValues, format) {
-      var completeValues = {
-        hh: 0,
-        mm: 0,
-        ss: 0
-      };
-      if (format.includes('HH')) {
-        completeValues.hh = timeValues.hh !== null ? timeValues.hh : 0;
-      }
-      if (format.includes('mm')) {
-        completeValues.mm = timeValues.mm !== null ? timeValues.mm : 0;
-      }
-      if (format.includes('ss')) {
-        completeValues.ss = timeValues.ss !== null ? timeValues.ss : 0;
-      }
-      return completeValues;
-    }, []);
-    var getNextAvailableValue = React.useCallback(function (currentIndex, values, disabledValuesForColumn, direction) {
-      var newIndex = currentIndex;
-      var iterations = 0;
-      var maxIterations = values.length;
-      do {
-        newIndex = direction === 'up' ? (newIndex - 1 + values.length) % values.length : (newIndex + 1) % values.length;
-        iterations++;
-      } while (iterations < maxIterations && disabledValuesForColumn.includes(parseInt(values[newIndex], 10)) && newIndex !== currentIndex);
-      return iterations < maxIterations && !disabledValuesForColumn.includes(parseInt(values[newIndex], 10)) ? newIndex : currentIndex;
-    }, []);
-    var minScrollbarTrackHeight = 20;
-    var calculateScrollbar = React.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 = React.useCallback(function (setScrollbar, timeoutRef, columnRef) {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      updateScrollbar(columnRef, setScrollbar, true);
-      timeoutRef.current = setTimeout(function () {
-        setScrollbar(function (prev) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-            isVisible: false
-          });
-        });
-        timeoutRef.current = null;
-      }, 2000);
-    }, []);
-    var updateScrollbar = React.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-          thumbHeight: thumbHeight,
-          thumbPosition: thumbPosition,
-          isVisible: show || prev.isVisible
-        });
-      });
-    }, [calculateScrollbar]);
-    var handleColumnScroll = React.useCallback(function (columnRef, setScrollbar, timeoutRef) {
-      showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
-    }, [showScrollbarWithDelay]);
-    var createScrollbarDragHandler = React.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-              thumbPosition: newThumbPosition,
-              isDragging: true,
-              isVisible: true
-            });
-          });
-        };
-        var handleMouseUp = function handleMouseUp() {
-          document.removeEventListener('mousemove', handleMouseMove);
-          document.removeEventListener('mouseup', handleMouseUp);
-          setScrollbar(function (prev) {
-            return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-              isDragging: false
-            });
-          });
-          showScrollbarWithDelay(setScrollbar, timeoutRef, columnRef);
-        };
-        document.addEventListener('mousemove', handleMouseMove);
-        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) {
-        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);
-          }
-        });
-      };
-    }, []);
-    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);
-        }
-      };
-    }, []);
-    var handleTimeItemClick = function handleTimeItemClick(value, column) {
-      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var currentTimeValues = index.parseTimeString(innerTime, actualFormat);
-      var newTimeValues = _rollupPluginBabelHelpers.objectSpread2({}, currentTimeValues);
-      switch (column) {
-        case 'hours':
-          newTimeValues.hh = parseInt(value, 10);
-          break;
-        case 'minutes':
-          newTimeValues.mm = parseInt(value, 10);
-          break;
-        case 'seconds':
-          newTimeValues.ss = parseInt(value, 10);
-          break;
-      }
-      var getFirstAvailableValue = function getFirstAvailableValue(columnType) {
-        var disabledValuesForColumn = getDisabledValuesForColumn(columnType);
-        var maxValue = columnType === 'hours' ? 23 : 59;
-        for (var i = 0; i <= maxValue; i++) {
-          if (!disabledValuesForColumn.includes(i)) {
-            return i;
-          }
-        }
-        return 0;
-      };
-      if (newTimeValues.hh === null && actualFormat.includes('HH')) {
-        newTimeValues.hh = getFirstAvailableValue('hours');
-      }
-      if (newTimeValues.mm === null && actualFormat.includes('mm')) {
-        newTimeValues.mm = getFirstAvailableValue('minutes');
-      }
-      if (newTimeValues.ss === null && actualFormat.includes('ss')) {
-        newTimeValues.ss = getFirstAvailableValue('seconds');
-      }
-      var completeTimeValues = getCompleteTimeValues(newTimeValues, actualFormat);
-      if (index.isTimeDisabled(completeTimeValues, min, max)) {
-        return;
-      }
-      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: {
-          hour: newTimeValues.hh || undefined,
-          minute: newTimeValues.mm || undefined,
-          second: newTimeValues.ss || undefined
-        }
-      });
-    };
-    var handleTimeItemKeyDown = function handleTimeItemKeyDown(event, column, value) {
-      var disabledValuesForColumn = getDisabledValuesForColumn(column);
-      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();
-          newIndex = getNextAvailableValue(currentIndex, column === 'hours' ? Array.from({
-            length: 24
-          }, function (_, i) {
-            return i.toString().padStart(2, '0');
-          }) : Array.from({
-            length: 60
-          }, function (_, i) {
-            return i.toString().padStart(2, '0');
-          }), disabledValuesForColumn, 'up');
-          if (newIndex !== null) {
-            var newValue = newIndex.toString().padStart(2, '0');
-            handleTimeItemClick(newValue, column, false);
-          }
-          break;
-        case 'ArrowDown':
-          event.preventDefault();
-          newIndex = getNextAvailableValue(currentIndex, column === 'hours' ? Array.from({
-            length: 24
-          }, function (_, i) {
-            return i.toString().padStart(2, '0');
-          }) : Array.from({
-            length: 60
-          }, function (_, i) {
-            return i.toString().padStart(2, '0');
-          }), disabledValuesForColumn, 'down');
-          if (newIndex !== null) {
-            var _newValue = newIndex.toString().padStart(2, '0');
-            handleTimeItemClick(_newValue, column, false);
-          }
-          break;
-        case 'ArrowRight':
-          event.preventDefault();
-          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
-              });
-            });
-          }
-          break;
-        case 'ArrowLeft':
-          event.preventDefault();
-          if (column === 'minutes') {
-            newColumn = 'hours';
-          } else if (column === 'seconds') {
-            newColumn = 'minutes';
-          }
-          if (newColumn !== column) {
-            setActiveTime(function (prev) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-                currentColumn: newColumn
-              });
-            });
-          }
-          break;
-        case 'Enter':
-        case ' ':
-          event.preventDefault();
-          handleTimeItemClick(value, column);
-          break;
-        case 'Home':
-          event.preventDefault();
-          newIndex = 0;
-          while (disabledValuesForColumn.includes(newIndex) && newIndex < (column === 'hours' ? 24 : 60)) {
-            newIndex++;
-          }
-          if (newIndex < (column === 'hours' ? 24 : 60)) {
-            handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
-          }
-          break;
-        case 'End':
-          event.preventDefault();
-          newIndex = column === 'hours' ? 23 : 59;
-          while (disabledValuesForColumn.includes(newIndex) && newIndex >= 0) {
-            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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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);
-              }
-            }
-          }
-      }
-    };
-    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
-      ref: ref,
-      view: view,
-      size: size,
-      disabled: disabled,
-      onFocus: handleContainerFocus
-    }, rest), /*#__PURE__*/React__default.default.createElement(TimePickerGrid_styles.StyledTimePicker, {
-      width: dropdownWidth,
-      tabIndex: -1
-    }, columnsConfig.map(function (columnConfig) {
-      var type = columnConfig.type,
-        values = columnConfig.values;
-      var columnRef;
-      var scrollbarState;
-      var setScrollbar;
-      var scrollbarRef;
-      var thumbRef;
-      var timeoutRef;
-      switch (type) {
-        case 'hours':
-          columnRef = hoursColumnRef;
-          scrollbarState = hoursScrollbar;
-          setScrollbar = setHoursScrollbar;
-          scrollbarRef = hoursScrollbarRef;
-          thumbRef = hoursThumbRef;
-          timeoutRef = hoursHideTimeoutRef;
-          break;
-        case 'minutes':
-          columnRef = minutesColumnRef;
-          scrollbarState = minutesScrollbar;
-          setScrollbar = setMinutesScrollbar;
-          scrollbarRef = minutesScrollbarRef;
-          thumbRef = minutesThumbRef;
-          timeoutRef = minutesHideTimeoutRef;
-          break;
-        case 'seconds':
-          columnRef = secondsColumnRef;
-          scrollbarState = secondsScrollbar;
-          setScrollbar = setSecondsScrollbar;
-          scrollbarRef = secondsScrollbarRef;
-          thumbRef = secondsThumbRef;
-          timeoutRef = secondsHideTimeoutRef;
-          break;
-        default:
-          return null;
-      }
-      return TimeColumn.renderTimeColumn({
-        values: values,
-        disabledValues: getDisabledValuesForColumn(type),
-        dropdownHeight: dropdownHeight,
-        column: type,
-        activeTime: activeTime,
-        handleTimeItemClick: handleTimeItemClick,
-        handleTimeItemKeyDown: handleTimeItemKeyDown,
-        createScrollbarDragHandler: createScrollbarDragHandler,
-        setScrollbar: setScrollbar,
-        columnRef: columnRef,
-        scrollbarState: scrollbarState,
-        scrollbarRef: scrollbarRef,
-        thumbRef: thumbRef,
-        timeoutRef: timeoutRef,
-        timeItemRefs: timeItemRefs
-      });
-    })));
-  });
-};
-var timePickerGridConfig = {
-  name: 'TimePickerGrid',
-  tag: 'div',
-  layout: timePickerGridRoot,
-  base: TimePickerGrid_styles.base,
-  variations: {
-    view: {
-      css: base.base
-    },
-    size: {
-      css: base$1.base
-    },
-    disabled: {
-      css: base$2.base,
-      attrs: true
-    }
-  },
-  defaults: {
-    size: 'm',
-    view: 'default'
-  }
-};
-
-exports.timePickerGridConfig = timePickerGridConfig;
-exports.timePickerGridRoot = timePickerGridRoot;
-//# sourceMappingURL=TimePickerGrid.js.map