@salutejs/plasma-new-hope 0.337.0-canary.2255.18028844305.0 → 0.337.0-canary.2255.18122908918.0

package/cjs/components/TimePicker/TimePicker.js

@@ -0,0 +1,732 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cls = require('classnames');
+var index = require('./utils/index.js');
+var TimePicker_styles = require('./TimePicker.styles.js');
+var TimePicker_tokens = require('./TimePicker.tokens.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 base$3 = require('./variations/_readonly/base.js');
+var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.js');
+var TimeColumn = require('./ui/TimeColumn/TimeColumn.js');
+var getPopoverPlacement = require('../../utils/getPopoverPlacement.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var cls__default = /*#__PURE__*/_interopDefault(cls);
+
+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"];
+var timePickerRoot = function timePickerRoot(Root) {
+  return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+      _ref$opened = _ref.opened,
+      opened = _ref$opened === void 0 ? false : _ref$opened,
+      outerValue = _ref.value,
+      label = _ref.label,
+      _ref$labelPlacement = _ref.labelPlacement,
+      labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
+      keepPlaceholder = _ref.keepPlaceholder,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$requiredPlacemen = _ref.requiredPlacement,
+      requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
+      _ref$hasRequiredIndic = _ref.hasRequiredIndicator,
+      hasRequiredIndicator = _ref$hasRequiredIndic === void 0 ? true : _ref$hasRequiredIndic,
+      placeholder = _ref.placeholder,
+      contentLeft = _ref.contentLeft,
+      contentRight = _ref.contentRight,
+      textBefore = _ref.textBefore,
+      textAfter = _ref.textAfter,
+      view = _ref.view,
+      size = _ref.size,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$readonly = _ref.readonly,
+      readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+      _ref$frame = _ref.frame,
+      frame = _ref$frame === void 0 ? 'document' : _ref$frame,
+      _ref$usePortal = _ref.usePortal,
+      usePortal = _ref$usePortal === void 0 ? false : _ref$usePortal,
+      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+      _ref$closeOnEsc = _ref.closeOnEsc,
+      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
+      offset = _ref.offset,
+      stretched = _ref.stretched,
+      _ref$dropdownAlign = _ref.dropdownAlign,
+      dropdownAlign = _ref$dropdownAlign === void 0 ? 'left' : _ref$dropdownAlign,
+      dropdownWidth = _ref.dropdownWidth,
+      dropdownHeight = _ref.dropdownHeight,
+      _ref$columnsQuantity = _ref.columnsQuantity,
+      columnsQuantity = _ref$columnsQuantity === void 0 ? 2 : _ref$columnsQuantity,
+      onToggle = _ref.onToggle,
+      onFocus = _ref.onFocus,
+      onChange = _ref.onChange,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+    var inputRef = React.useRef(null);
+    var timeSelectRootRef = React.useRef(null);
+    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(opened),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isInnerOpen = _useState2[0],
+      setIsInnerOpen = _useState2[1];
+    var _useState3 = React.useState(outerValue || ''),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      innerTime = _useState4[0],
+      setInnerTime = _useState4[1];
+    var _useState5 = React.useState({
+        hours: null,
+        minutes: null,
+        seconds: null,
+        currentColumn: null
+      }),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      activeTime = _useState6[0],
+      setActiveTime = _useState6[1];
+    var _useState7 = React.useState(0),
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      itemHeight = _useState8[0],
+      setItemHeight = _useState8[1];
+    var _useState9 = React.useState(0),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      gap = _useState10[0],
+      setGap = _useState10[1];
+    var _useState11 = React.useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      hoursScrollbar = _useState12[0],
+      setHoursScrollbar = _useState12[1];
+    var _useState13 = React.useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+      minutesScrollbar = _useState14[0],
+      setMinutesScrollbar = _useState14[1];
+    var _useState15 = React.useState({
+        isVisible: false,
+        thumbHeight: 0,
+        thumbPosition: 0,
+        isDragging: false
+      }),
+      _useState16 = _rollupPluginBabelHelpers.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 = index.range(24);
+    var minutes = index.range(60);
+    var seconds = index.range(60);
+    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 () {
+      return function () {
+        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+          }
+        });
+      };
+    }, []);
+    React.useEffect(function () {
+      if (!isInnerOpen) {
+        return;
+      }
+      setTimeout(function () {
+        updateScrollbar(hoursColumnRef, setHoursScrollbar);
+        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+        if (columnsQuantity === 3) {
+          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+        }
+      }, 100);
+    }, [isInnerOpen, columnsQuantity, updateScrollbar]);
+    React.useEffect(function () {
+      if (!viewValue) {
+        return;
+      }
+      var timeString = viewValue;
+      if (format === 'HH:mm' && viewValue.length > 5) {
+        timeString = viewValue.substring(0, 5);
+      }
+      setInnerTime(viewValue);
+      var _timeString$split$map = timeString.split(index.delimiter).map(Number),
+        _timeString$split$map2 = _rollupPluginBabelHelpers.slicedToArray(_timeString$split$map, 3),
+        hh = _timeString$split$map2[0],
+        mm = _timeString$split$map2[1],
+        ss = _timeString$split$map2[2];
+      setActiveTime({
+        hours: !Number.isNaN(hh) ? hh : null,
+        minutes: !Number.isNaN(mm) ? mm : null,
+        seconds: format === 'HH:mm:ss' && !Number.isNaN(ss) ? ss : null,
+        currentColumn: null
+      });
+    }, [outerValue, format]);
+    React.useEffect(function () {
+      if (isInnerOpen && (disabled || readonly)) {
+        setIsInnerOpen(false);
+      }
+    }, [disabled, readonly]);
+    React.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]);
+    React.useEffect(function () {
+      if (!isInnerOpen || 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, isInnerOpen, 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);
+        }
+      };
+    }, [isInnerOpen, handleColumnScroll]);
+    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);
+        }
+      };
+    }, [isInnerOpen, showScrollbarWithDelay]);
+    var handleToggle = function handleToggle() {
+      if (disabled || readonly) return;
+      var newState = !isInnerOpen;
+      setIsInnerOpen(newState);
+      if (newState) {
+        setActiveTime(function (prev) {
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+            currentColumn: 'hours'
+          });
+        });
+      }
+      onToggle === null || onToggle === void 0 || onToggle(newState);
+    };
+    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 handleTimeItemClick = function handleTimeItemClick(value, column) {
+      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+      var currentTime = innerTime.split(index.delimiter);
+      var newTime = [];
+      if (format === 'HH:mm:ss') {
+        newTime = _rollupPluginBabelHelpers.toConsumableArray(currentTime);
+        while (newTime.length < 3) {
+          newTime.push('00');
+        }
+      } else {
+        newTime = _rollupPluginBabelHelpers.toConsumableArray(currentTime);
+        while (newTime.length < 2) {
+          newTime.push('00');
+        }
+        newTime = newTime.slice(0, 2);
+      }
+      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(index.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
+        }
+      });
+    };
+    var handleInputChange = function handleInputChange(event) {
+      var input = event.target.value;
+      var cursorPos = event.target.selectionStart;
+      var _processTimeInput = index.processTimeInput(input, format, cursorPos),
+        innerString = _processTimeInput.innerString,
+        values = _processTimeInput.values,
+        newCursorPosition = _processTimeInput.newCursorPosition;
+      setInnerTime(innerString);
+      setActiveTime(function (prev) {
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+          hours: values.hh,
+          minutes: values.mm,
+          seconds: values.ss
+        });
+      });
+      if (onChange) {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event), {}, {
+          target: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event.target), {}, {
+            value: innerString,
+            timeValues: values
+          })
+        }));
+      }
+      requestAnimationFrame(function () {
+        if (inputRef.current) {
+          inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+        }
+      });
+    };
+    var handleKeyDown = function handleKeyDown(event) {
+      var _activeTime$currentCo, _activeTime$currentCo2, _activeTime$newColumn, _activeTime$newColumn2;
+      if (event.key === 'Enter' && !isInnerOpen) {
+        event.preventDefault();
+        setIsInnerOpen(true);
+        setActiveTime(function (prev) {
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+            currentColumn: 'hours'
+          });
+        });
+        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(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, activeTime), {}, _rollupPluginBabelHelpers.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(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, activeTime), {}, _rollupPluginBabelHelpers.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) {
+      onKeyDownNavigation(e);
+      handleKeyDown(e);
+    };
+    var _useKeyNavigation = useKeyboardNavigation.useKeyNavigation({
+        isCalendarOpen: isInnerOpen,
+        format: format,
+        maskWithFormat: true,
+        delimiter: index.delimiter,
+        closeOnEsc: closeOnEsc,
+        onToggle: handleToggle
+      }),
+      onKeyDownNavigation = _useKeyNavigation.onKeyDown;
+    var TimePickerInput = /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledInput, {
+      ref: inputRef,
+      value: viewValue,
+      size: size,
+      disabled: disabled,
+      readOnly: readonly,
+      placeholder: placeholder,
+      contentLeft: contentLeft,
+      contentRight: contentRight,
+      textBefore: textBefore,
+      textAfter: textAfter,
+      onChange: handleInputChange,
+      onFocus: onFocus,
+      onKeyDown: handleOnKeyDown,
+      required: required,
+      requiredPlacement: requiredPlacement,
+      hasRequiredIndicator: hasRequiredIndicator,
+      label: label,
+      labelPlacement: labelPlacement,
+      keepPlaceholder: keepPlaceholder
+    });
+    return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
+      stretched: stretched,
+      view: view,
+      size: size,
+      className: cls__default.default(TimePicker_tokens.classes.timePickerRoot, className, _rollupPluginBabelHelpers.defineProperty({}, TimePicker_tokens.classes.timePickerstretched, stretched)),
+      disabled: disabled,
+      readonly: readonly,
+      ref: ref
+    }, rest), /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledPopover, {
+      opened: isInnerOpen,
+      usePortal: usePortal,
+      frame: frame,
+      onToggle: handleToggle,
+      offset: offset,
+      placement: getPopoverPlacement.getPlacements(dropdownAlign === 'left' ? 'bottom-start' : 'bottom-end', false),
+      trigger: "click",
+      closeOnOverlayClick: closeOnOverlayClick,
+      isFocusTrapped: false,
+      target: TimePickerInput,
+      preventOverflow: false,
+      align: dropdownAlign
+    }, /*#__PURE__*/React__default.default.createElement(Root, {
+      ref: timeSelectRootRef,
+      view: view,
+      size: size,
+      disabled: disabled,
+      readonly: readonly,
+      onClick: handleCalendarRootClick,
+      className: dropdownAlign === 'right' ? TimePicker_tokens.classes.timePickerPlacementRight : '',
+      stretched: stretched
+    }, /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledTimePicker, {
+      width: dropdownWidth
+    }, TimeColumn.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
+    }), TimeColumn.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 && TimeColumn.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 = {
+  name: 'TimePicker',
+  tag: 'div',
+  layout: timePickerRoot,
+  base: TimePicker_styles.base,
+  variations: {
+    view: {
+      css: base.base
+    },
+    size: {
+      css: base$1.base
+    },
+    disabled: {
+      css: base$2.base,
+      attrs: true
+    },
+    readonly: {
+      css: base$3.base,
+      attrs: true
+    }
+  },
+  defaults: {
+    size: 'm',
+    view: 'default'
+  }
+};
+
+exports.timePickerConfig = timePickerConfig;
+exports.timePickerRoot = timePickerRoot;
+//# sourceMappingURL=TimePicker.js.map