@salutejs/plasma-new-hope 0.337.0-canary.2184.17983182622.0 → 0.337.0-canary.2237.17801180282.0

package/cjs/components/TimePicker/TimePicker.js

@@ -1,720 +0,0 @@
-'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 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 _StyledEmpty;
-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 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, 20); // Минимальная высота 20px
-      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) {
-        setTimeout(function () {
-          updateScrollbar(hoursColumnRef, setHoursScrollbar);
-          updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-          if (columnsQuantity === 3) {
-            updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-          }
-        }, 100);
-      }
-    }, [isInnerOpen, columnsQuantity, updateScrollbar]);
-    React.useEffect(function () {
-      if (viewValue) {
-        var timeString = viewValue;
-        if (format === 'HH:mm' && viewValue.length > 5) {
-          timeString = viewValue.substring(0, 5);
-        }
-        setInnerTime(viewValue);
-        var _timeString$split$map = timeString.split(':').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 () {
-            if (columnRef === hoursColumnRef) {
-              updateScrollbar(hoursColumnRef, setHoursScrollbar);
-            } else if (columnRef === minutesColumnRef) {
-              updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-            } else if (columnRef === secondsColumnRef) {
-              updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-            }
-          }, 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(':');
-      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') {
-            if (!currentTime[2]) {
-              newTime[2] = '00';
-            }
-          }
-          break;
-        case 'minutes':
-          newTime[1] = value;
-          if (!currentTime[0]) {
-            newTime[0] = '00';
-          }
-          if (format === 'HH:mm:ss') {
-            if (!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(':');
-      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
-        });
-      });
-      onChange === null || onChange === void 0 || 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 _useKeyNavigation = useKeyboardNavigation.useKeyNavigation({
-        isCalendarOpen: isInnerOpen,
-        format: format,
-        maskWithFormat: true,
-        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: function onKeyDown(e) {
-        onKeyDownNavigation(e);
-        handleKeyDown(e);
-      },
-      required: required,
-      requiredPlacement: requiredPlacement,
-      hasRequiredIndicator: hasRequiredIndicator,
-      label: label,
-      labelPlacement: labelPlacement,
-      keepPlaceholder: keepPlaceholder
-    });
-    var renderTimeColumn = function renderTimeColumn(values, column, columnRef, scrollbarState, setScrollbar, scrollbarRef, thumbRef, timeoutRef) {
-      return /*#__PURE__*/React__default.default.createElement("div", {
-        style: {
-          position: 'relative',
-          width: '100%'
-        }
-      }, /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledTimeColumn, {
-        key: column,
-        ref: columnRef,
-        height: dropdownHeight,
-        className: TimePicker_tokens.classes.timeColumn
-      }, values.map(function (value, index) {
-        return /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledTimeItem, {
-          key: value,
-          ref: function ref(el) {
-            timeItemRefs.current["".concat(column, "-").concat(value)] = el;
-          },
-          className: cls__default.default(_rollupPluginBabelHelpers.defineProperty({}, TimePicker_tokens.classes.timeItemActive, activeTime[column] === index)),
-          onClick: function onClick() {
-            return handleTimeItemClick(value, column);
-          },
-          onKeyDown: function onKeyDown(e) {
-            return handleTimeItemKeyDown(e, column, value);
-          }
-        }, value);
-      }), _StyledEmpty || (_StyledEmpty = /*#__PURE__*/React__default.default.createElement(TimePicker_styles.StyledEmpty, null))), /*#__PURE__*/React__default.default.createElement(TimePicker_styles.CustomScrollbar, {
-        ref: scrollbarRef,
-        className: cls__default.default(_rollupPluginBabelHelpers.defineProperty({}, TimePicker_tokens.classes.scrollbarVisible, scrollbarState.isVisible))
-      }, /*#__PURE__*/React__default.default.createElement(TimePicker_styles.ScrollbarTrack, null, /*#__PURE__*/React__default.default.createElement(TimePicker_styles.ScrollbarThumb, {
-        ref: thumbRef,
-        style: {
-          height: "".concat(scrollbarState.thumbHeight, "px"),
-          top: "".concat(scrollbarState.thumbPosition, "px")
-        },
-        onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
-      }))));
-    };
-    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
-    }, renderTimeColumn(hours, 'hours', hoursColumnRef, hoursScrollbar, setHoursScrollbar, hoursScrollbarRef, hoursThumbRef, hoursHideTimeoutRef), renderTimeColumn(minutes, 'minutes', minutesColumnRef, minutesScrollbar, setMinutesScrollbar, minutesScrollbarRef, minutesThumbRef, minutesHideTimeoutRef), columnsQuantity === 3 && renderTimeColumn(seconds, 'seconds', secondsColumnRef, secondsScrollbar, setSecondsScrollbar, secondsScrollbarRef, secondsThumbRef, secondsHideTimeoutRef)))));
-  });
-};
-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