@salutejs/plasma-new-hope 0.340.0-canary.2322.19132961849.0 → 0.340.0-canary.2322.19259276297.0

package/cjs/components/Tabs/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabsNoDivider: 'tabs-no-divider',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n    tabsHasTopArrow: 'tabs-has-top-arrow',\n    tabsHasBottomArrow: 'tabs-has-bottom-arrow',\n    tabsClipScroll: 'tabs-clip-scroll',\n    tabsClipShowAll: 'tabs-clip-show-all',\n    tabsTruncate: 'tabs-truncate',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    containerHeight: '--plasma-tabs-container-height',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerWidth: '--plasma-tabs-divider-width',\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerWidth: '--plasma-tab-item-selected-divider-width',\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    arrowColorHover: '--plasma-tabs-arrow-color-hover',\n    arrowColorActive: '--plasma-tabs-arrow-color-active',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-background-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemPaddingOrientationVertical: '--plasma-tab-item-padding-orientation-vertical',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemValueColor: '--plasma-tab-item-value-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemValueColorHover: '--plasma-tab-item-value-color-hover',\n    itemColorActive: '--plasma-tab-item-color-active',\n    itemValueColorActive: '--plasma-tab-item-value-color-active',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n    itemCursor: '--plasma-tab-item-cursor',\n    itemCursorOverNotSelected: '--plasma-tab-item-cursor-over-not-selected',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedValueColor: '--plasma-tab-item-selected-value-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedValueColorHover: '--plasma-tab-item-selected-value-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n\n    valueFontFamily: '--plasma-tab-item-value-font-family',\n    valueFontSize: '--plasma-tab-item-value-font-size',\n    valueFontStyle: '--plasma-tab-item-value-font-style',\n    valueFontWeight: '--plasma-tab-item-value-font-weight',\n    valueLetterSpacing: '--plasma-tab-item-value-letter-spacing',\n    valueLineHeight: '--plasma-tab-item-value-lineheight',\n\n    actionContentMarginLeft: '--plasma-tab-item-action-content-margin-left',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabsNoDivider","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tabsHasTopArrow","tabsHasBottomArrow","tabsClipScroll","tabsClipShowAll","tabsTruncate","tokens","disabledOpacity","containerWidth","containerHeight","cursor","color","colorHover","tabsDividerWidth","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerWidth","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","arrowColorHover","arrowColorActive","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemPaddingOrientationVertical","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemValueColor","itemBackgroundColor","itemColorHover","itemValueColorHover","itemColorActive","itemValueColorActive","itemBackgroundColorHover","itemCursor","itemCursorOverNotSelected","itemSelectedColor","itemSelectedValueColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedValueColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","fontFamily","fontSize","fontStyle","fontWeight","letterSpacing","lineHeight","valueFontFamily","valueFontSize","valueFontStyle","valueFontWeight","valueLetterSpacing","valueLineHeight","actionContentMarginLeft"],"mappings":"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"}
+{"version":3,"file":"tokens.js","sources":["../../../src/components/Tabs/tokens.ts"],"sourcesContent":["export const classes = {\n    selectedTabsItem: 'selected-tabs-item',\n    tabsPilled: 'tabs-pilled',\n    tabsGroupFilledBackground: 'tabs-group-filled-background',\n    tabsStretch: 'tabs-stretched',\n    tabsNoDivider: 'tabs-no-divider',\n    tabItemDivider: 'tab-item-divider',\n    tabItemAnimated: 'tab-item-animated',\n    tabContent: 'tab-item-content',\n    tabRightContent: 'tab-item-right-content',\n    tabLeftContent: 'tab-item-left-content',\n    tabsHasLeftArrow: 'tabs-has-left-arrow',\n    tabsHasRightArrow: 'tabs-has-right-arrow',\n    tabsHasTopArrow: 'tabs-has-top-arrow',\n    tabsHasBottomArrow: 'tabs-has-bottom-arrow',\n    tabsClipScroll: 'tabs-clip-scroll',\n    tabsClipShowAll: 'tabs-clip-show-all',\n    tabsTruncate: 'tabs-truncate',\n};\n\nexport const tokens = {\n    disabledOpacity: '--plasma-tabs-disabled-opacity',\n    containerWidth: '--plasma-tabs-container-width',\n    containerHeight: '--plasma-tabs-container-height',\n    cursor: '--plasma-tabs-cursor',\n    color: '--plasma-tabs-color',\n    colorHover: '--plasma-tabs-color-hover',\n\n    tabsDividerWidth: '--plasma-tabs-divider-width',\n    tabsDividerHeight: '--plasma-tabs-divider-height',\n    tabsDividerColor: '--plasma-tabs-divider-color',\n    tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',\n\n    itemSelectedDividerWidth: '--plasma-tab-item-selected-divider-width',\n    itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',\n    itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',\n    itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',\n\n    outlineFocusColor: '--plasma-tabs-outline-focus-color',\n    arrowColor: '--plasma-tabs-arrow-color',\n    arrowColorHover: '--plasma-tabs-arrow-color-hover',\n    arrowColorActive: '--plasma-tabs-arrow-color-active',\n    tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',\n\n    tabsBackgroundColor: '--plasma-tabs-background-color',\n    tabsBorderRadius: '--plasma-tabs-border-radius',\n    tabsWidth: '--plasma-tabs-width',\n    tabsHeight: '--plasma-tabs-height',\n    tabsPadding: '--plasma-tabs-padding',\n    tabsPilledBorderRadius: '--plasma-tabs-pilled-border-radius',\n\n    itemBorderRadius: '--plasma-tab-item-border-radius',\n    itemPilledBorderRadius: '--plasma-tab-item-pilled-border-radius',\n    itemWidth: '--plasma-tab-item-width',\n    itemHeight: '--plasma-tab-item-height',\n    itemPadding: '--plasma-tab-item-padding',\n    itemPaddingClear: '--plasma-tab-item-padding-clear',\n    itemPaddingPilled: '--plasma-tab-item-padding-pilled',\n    itemPaddingOrientationVertical: '--plasma-tab-item-padding-orientation-vertical',\n    itemMarginLeft: '--plasma-tab-item-margin-left',\n    itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',\n    itemContentGap: '--plasma-tab-item-content-gap',\n\n    itemContentPadding: '--plasma-tab-item-content-padding',\n    itemContentPaddingClear: '--plasma-tab-item-content-padding-clear',\n\n    arrowInnerPadding: '--plasma-tab-arrow-inner-padding',\n    arrowOuterPadding: '--plasma-tab-arrow-outer-padding',\n    arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',\n\n    itemColor: '--plasma-tab-item-color',\n    itemValueColor: '--plasma-tab-item-value-color',\n    itemBackgroundColor: '--plasma-tab-item-background-color',\n    itemColorHover: '--plasma-tab-item-color-hover',\n    itemValueColorHover: '--plasma-tab-item-value-color-hover',\n    itemColorActive: '--plasma-tab-item-color-active',\n    itemValueColorActive: '--plasma-tab-item-value-color-active',\n    itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',\n    itemCursor: '--plasma-tab-item-cursor',\n    itemCursorOverNotSelected: '--plasma-tab-item-cursor-over-not-selected',\n\n    itemSelectedColor: '--plasma-tab-item-selected-color',\n    itemSelectedValueColor: '--plasma-tab-item-selected-value-color',\n    itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',\n    itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',\n    itemSelectedValueColorHover: '--plasma-tab-item-selected-value-color-hover',\n    itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',\n\n    itemBackgroundTransition: '--plasma-tab-item-background-transition',\n\n    fontFamily: '--plasma-tab-item-font-family',\n    fontSize: '--plasma-tab-item-font-size',\n    fontStyle: '--plasma-tab-item-font-style',\n    fontWeight: '--plasma-tab-item-font-weight',\n    fontWeightSelected: '--plasma-tab-item-font-weight-selected',\n    letterSpacing: '--plasma-tab-item-letter-spacing',\n    lineHeight: '--plasma-tab-item-lineheight',\n\n    valueFontFamily: '--plasma-tab-item-value-font-family',\n    valueFontSize: '--plasma-tab-item-value-font-size',\n    valueFontStyle: '--plasma-tab-item-value-font-style',\n    valueFontWeight: '--plasma-tab-item-value-font-weight',\n    valueLetterSpacing: '--plasma-tab-item-value-letter-spacing',\n    valueLineHeight: '--plasma-tab-item-value-lineheight',\n\n    actionContentMarginLeft: '--plasma-tab-item-action-content-margin-left',\n};\n"],"names":["classes","selectedTabsItem","tabsPilled","tabsGroupFilledBackground","tabsStretch","tabsNoDivider","tabItemDivider","tabItemAnimated","tabContent","tabRightContent","tabLeftContent","tabsHasLeftArrow","tabsHasRightArrow","tabsHasTopArrow","tabsHasBottomArrow","tabsClipScroll","tabsClipShowAll","tabsTruncate","tokens","disabledOpacity","containerWidth","containerHeight","cursor","color","colorHover","tabsDividerWidth","tabsDividerHeight","tabsDividerColor","tabsDividerBorderRadius","itemSelectedDividerWidth","itemSelectedDividerHeight","itemSelectedDividerColor","itemSelectedDividerColorHover","outlineFocusColor","arrowColor","arrowColorHover","arrowColorActive","tabsFilledBackgroundColor","tabsBackgroundColor","tabsBorderRadius","tabsWidth","tabsHeight","tabsPadding","tabsPilledBorderRadius","itemBorderRadius","itemPilledBorderRadius","itemWidth","itemHeight","itemPadding","itemPaddingClear","itemPaddingPilled","itemPaddingOrientationVertical","itemMarginLeft","itemMarginLeftFilled","itemContentGap","itemContentPadding","itemContentPaddingClear","arrowInnerPadding","arrowOuterPadding","arrowViewOuterPadding","itemColor","itemValueColor","itemBackgroundColor","itemColorHover","itemValueColorHover","itemColorActive","itemValueColorActive","itemBackgroundColorHover","itemCursor","itemCursorOverNotSelected","itemSelectedColor","itemSelectedValueColor","itemSelectedBackgroundColor","itemSelectedColorHover","itemSelectedValueColorHover","itemSelectedBackgroundColorHover","itemBackgroundTransition","fontFamily","fontSize","fontStyle","fontWeight","fontWeightSelected","letterSpacing","lineHeight","valueFontFamily","valueFontSize","valueFontStyle","valueFontWeight","valueLetterSpacing","valueLineHeight","actionContentMarginLeft"],"mappings":"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"}

package/cjs/components/TimePickerGrid/TimePickerGrid.js

@@ -18,6 +18,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var _excluded = ["value", "view", "size", "disabled", "dropdownWidth", "dropdownHeight", "format", "min", "max", "columnsQuantity", "disabledValues", "onChange"];
 var timePickerGridRoot = function timePickerGridRoot(Root) {
   return /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _Object$values$;
     var outerValue = _ref.value,
       view = _ref.view,
       size = _ref.size,
@@ -41,6 +42,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
     var minutesColumnRef = React.useRef(null);
     var secondsColumnRef = React.useRef(null);
     var timeItemRefs = React.useRef({});
+    var itemHeight = ((_Object$values$ = Object.values(timeItemRefs.current)[0]) === null || _Object$values$ === void 0 ? void 0 : _Object$values$.offsetHeight) || 0;
     var hoursScrollbarRef = React.useRef(null);
     var minutesScrollbarRef = React.useRef(null);
     var secondsScrollbarRef = React.useRef(null);
@@ -54,64 +56,58 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       innerTime = _useState2[0],
       setInnerTime = _useState2[1];
-    var _useState3 = React.useState({
-        hours: null,
-        minutes: null,
-        seconds: null,
-        currentColumn: null
-      }),
+    var _useState3 = React.useState(0),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      activeTime = _useState4[0],
-      setActiveTime = _useState4[1];
-    var _useState5 = React.useState(0),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      itemHeight = _useState6[0],
-      setItemHeight = _useState6[1];
-    var _useState7 = React.useState(0),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      gap = _useState8[0],
-      setGap = _useState8[1];
-    var _useState9 = React.useState({
+      gap = _useState4[0],
+      setGap = _useState4[1];
+    var _useState5 = React.useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      hoursScrollbar = _useState10[0],
-      setHoursScrollbar = _useState10[1];
-    var _useState11 = React.useState({
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      hoursScrollbar = _useState6[0],
+      setHoursScrollbar = _useState6[1];
+    var _useState7 = React.useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-      minutesScrollbar = _useState12[0],
-      setMinutesScrollbar = _useState12[1];
-    var _useState13 = React.useState({
+      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+      minutesScrollbar = _useState8[0],
+      setMinutesScrollbar = _useState8[1];
+    var _useState9 = React.useState({
         isVisible: false,
         thumbHeight: 0,
         thumbPosition: 0,
         isDragging: false
       }),
-      _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-      secondsScrollbar = _useState14[0],
-      setSecondsScrollbar = _useState14[1];
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      secondsScrollbar = _useState10[0],
+      setSecondsScrollbar = _useState10[1];
     var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
-    React.useEffect(function () {
-      if (activeTime.currentColumn && activeTime[activeTime.currentColumn] !== null) {
-        var _activeTime$activeTim;
-        var column = activeTime.currentColumn;
-        var value = (_activeTime$activeTim = activeTime[activeTime.currentColumn]) === null || _activeTime$activeTim === void 0 ? void 0 : _activeTime$activeTim.toString().padStart(2, '0');
-        var element = timeItemRefs.current["".concat(column, "-").concat(value)];
-        setTimeout(function () {
-          if (element) {
-            element.focus();
-          }
-        }, 0);
+    var getActiveTime = function getActiveTime() {
+      if (viewValue && columnsConfig.length > 0) {
+        var timeValues = index.parseTimeString(viewValue, actualFormat);
+        return {
+          hours: timeValues.hh,
+          minutes: timeValues.mm,
+          seconds: timeValues.ss
+        };
       }
-    }, [activeTime]);
+      return {
+        hours: null,
+        minutes: null,
+        seconds: null
+      };
+    };
+    var activeTime = getActiveTime();
+    var _useState11 = React.useState(null),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      currentColumn = _useState12[0],
+      setCurrentColumn = _useState12[1];
     var getDisabledValuesForColumn = React.useCallback(function (columnType) {
       var disabledFromProps;
       if (columnType === 'hours') {
@@ -270,145 +266,16 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
         document.addEventListener('mouseup', handleMouseUp);
       };
     }, [showScrollbarWithDelay]);
-    React.useEffect(function () {
-      if (viewValue && columnsConfig.length > 0) {
-        var timeValues = index.parseTimeString(viewValue, actualFormat);
-        setActiveTime(function (prev) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-            hours: timeValues.hh,
-            minutes: timeValues.mm,
-            seconds: timeValues.ss
-          });
-        });
-      }
-    }, [viewValue, columnsConfig, actualFormat]);
     var handleContainerFocus = React.useCallback(function () {
-      if (activeTime.currentColumn === null && columnsConfig.length > 0) {
+      if (currentColumn === null && columnsConfig.length > 0) {
         var firstColumn = columnsConfig[0].type;
-        setActiveTime(function (prev) {
-          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-            currentColumn: firstColumn
-          });
-        });
-      }
-    }, [activeTime.currentColumn, columnsConfig]);
-    React.useEffect(function () {
-      return function () {
-        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
-          if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-          }
+        setCurrentColumn(function (prev) {
+          return prev !== currentColumn ? firstColumn : currentColumn;
         });
-      };
-    }, []);
-    React.useEffect(function () {
-      if (Object.keys(timeItemRefs.current).length > 0) {
-        var firstItem = Object.values(timeItemRefs.current)[0];
-        if (firstItem) {
-          setItemHeight(firstItem.offsetHeight);
-        }
-      }
-      if (hoursColumnRef.current) {
-        var computedStyle = getComputedStyle(hoursColumnRef.current);
-        var gapValue = parseFloat(computedStyle.gap || '0');
-        setGap(gapValue);
       }
-    }, [outerValue]);
-    React.useEffect(function () {
-      setTimeout(function () {
-        updateScrollbar(hoursColumnRef, setHoursScrollbar);
-        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-        if (columnsQuantity === 3) {
-          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-        }
-      }, 100);
-    }, [columnsQuantity, updateScrollbar]);
-    React.useEffect(function () {
-      if (itemHeight === 0) return;
-      var scrollToActiveItem = function scrollToActiveItem(columnRef, index$1) {
-        if (columnRef.current && index$1 !== null) {
-          var scrollPosition = index$1 * (itemHeight + gap);
-          index.animateScrollTo(columnRef.current, scrollPosition);
-          setTimeout(function () {
-            updateScrollbar(columnRef, setHoursScrollbar);
-          }, 300);
-        }
-      };
-      scrollToActiveItem(hoursColumnRef, activeTime.hours);
-      scrollToActiveItem(minutesColumnRef, activeTime.minutes);
-      scrollToActiveItem(secondsColumnRef, activeTime.seconds);
-    }, [activeTime, itemHeight, gap, updateScrollbar]);
-    React.useEffect(function () {
-      var hoursColumn = hoursColumnRef.current;
-      var minutesColumn = minutesColumnRef.current;
-      var secondsColumn = secondsColumnRef.current;
-      var handleHoursScroll = function handleHoursScroll() {
-        return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
-      };
-      var handleMinutesScroll = function handleMinutesScroll() {
-        return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
-      };
-      var handleSecondsScroll = function handleSecondsScroll() {
-        return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
-      };
-      if (hoursColumn) {
-        hoursColumn.addEventListener('scroll', handleHoursScroll);
-      }
-      if (minutesColumn) {
-        minutesColumn.addEventListener('scroll', handleMinutesScroll);
-      }
-      if (secondsColumn) {
-        secondsColumn.addEventListener('scroll', handleSecondsScroll);
-      }
-      return function () {
-        if (hoursColumn) {
-          hoursColumn.removeEventListener('scroll', handleHoursScroll);
-        }
-        if (minutesColumn) {
-          minutesColumn.removeEventListener('scroll', handleMinutesScroll);
-        }
-        if (secondsColumn) {
-          secondsColumn.removeEventListener('scroll', handleSecondsScroll);
-        }
-      };
-    }, []);
-    React.useEffect(function () {
-      var hoursColumn = hoursColumnRef.current;
-      var minutesColumn = minutesColumnRef.current;
-      var secondsColumn = secondsColumnRef.current;
-      var handleHoursMouseEnter = function handleHoursMouseEnter() {
-        return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
-      };
-      var handleMinutesMouseEnter = function handleMinutesMouseEnter() {
-        return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
-      };
-      var handleSecondsMouseEnter = function handleSecondsMouseEnter() {
-        return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
-      };
-      if (hoursColumn) {
-        hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
-      }
-      if (minutesColumn) {
-        minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
-      }
-      if (secondsColumn) {
-        secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
-      }
-      return function () {
-        if (hoursColumn) {
-          hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
-        }
-        if (minutesColumn) {
-          minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
-        }
-        if (secondsColumn) {
-          secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
-        }
-      };
-    }, []);
+    }, [currentColumn, columnsConfig]);
     var handleTimeItemClick = function handleTimeItemClick(value, column) {
-      var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var currentTimeValues = index.parseTimeString(innerTime, actualFormat);
+      var currentTimeValues = index.parseTimeString(viewValue, actualFormat);
       var newTimeValues = _rollupPluginBabelHelpers.objectSpread2({}, currentTimeValues);
       switch (column) {
         case 'hours':
@@ -446,20 +313,6 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       }
       var newTimeString = index.buildTimeString(newTimeValues, actualFormat);
       setInnerTime(newTimeString);
-      var nextColumn = null;
-      var currentIndex = columnsConfig.findIndex(function (col) {
-        return col.type === column;
-      });
-      if (currentIndex !== -1 && isNextColumn && currentIndex < columnsConfig.length - 1) {
-        nextColumn = columnsConfig[currentIndex + 1].type;
-      }
-      var newActiveTime = {
-        hours: newTimeValues.hh,
-        minutes: newTimeValues.mm,
-        seconds: newTimeValues.ss,
-        currentColumn: nextColumn || column
-      };
-      setActiveTime(newActiveTime);
       onChange === null || onChange === void 0 || onChange({
         value: newTimeString,
         timeValues: {
@@ -474,9 +327,6 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
       var currentIndex = parseInt(value, 10);
       var newIndex = null;
       var newColumn = column;
-      var currentIndexInColumns = columnsConfig.findIndex(function (col) {
-        return col.type === column;
-      });
       switch (event.key) {
         case 'ArrowUp':
           event.preventDefault();
@@ -491,7 +341,12 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
           }), disabledValuesForColumn, 'up');
           if (newIndex !== null) {
             var newValue = newIndex.toString().padStart(2, '0');
-            handleTimeItemClick(newValue, column, false);
+            var element = timeItemRefs.current["".concat(column, "-").concat(newValue)];
+            setTimeout(function () {
+              if (element) {
+                element.focus();
+              }
+            }, 0);
           }
           break;
         case 'ArrowDown':
@@ -507,7 +362,12 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
           }), disabledValuesForColumn, 'down');
           if (newIndex !== null) {
             var _newValue = newIndex.toString().padStart(2, '0');
-            handleTimeItemClick(_newValue, column, false);
+            var _element = timeItemRefs.current["".concat(column, "-").concat(_newValue)];
+            setTimeout(function () {
+              if (_element) {
+                _element.focus();
+              }
+            }, 0);
           }
           break;
         case 'ArrowRight':
@@ -518,11 +378,15 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newColumn = 'seconds';
           }
           if (newColumn !== column) {
-            setActiveTime(function (prev) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-                currentColumn: newColumn
-              });
-            });
+            var _activeTime$column;
+            setCurrentColumn(newColumn);
+            var _newValue2 = (((_activeTime$column = activeTime[column]) === null || _activeTime$column === void 0 ? void 0 : _activeTime$column.toString()) || '0').padStart(2, '0');
+            var _element2 = timeItemRefs.current["".concat(newColumn, "-").concat(_newValue2)];
+            setTimeout(function () {
+              if (_element2) {
+                _element2.focus();
+              }
+            }, 0);
           }
           break;
         case 'ArrowLeft':
@@ -533,11 +397,15 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newColumn = 'minutes';
           }
           if (newColumn !== column) {
-            setActiveTime(function (prev) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-                currentColumn: newColumn
-              });
-            });
+            var _activeTime$column2;
+            setCurrentColumn(newColumn);
+            var _newValue3 = (((_activeTime$column2 = activeTime[column]) === null || _activeTime$column2 === void 0 ? void 0 : _activeTime$column2.toString()) || '0').padStart(2, '0');
+            var _element3 = timeItemRefs.current["".concat(newColumn, "-").concat(_newValue3)];
+            setTimeout(function () {
+              if (_element3) {
+                _element3.focus();
+              }
+            }, 0);
           }
           break;
         case 'Enter':
@@ -552,7 +420,13 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newIndex++;
           }
           if (newIndex < (column === 'hours' ? 24 : 60)) {
-            handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
+            var _newValue4 = newIndex.toString().padStart(2, '0');
+            var _element4 = timeItemRefs.current["".concat(column, "-").concat(_newValue4)];
+            setTimeout(function () {
+              if (_element4) {
+                _element4.focus();
+              }
+            }, 0);
           }
           break;
         case 'End':
@@ -562,83 +436,138 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
             newIndex--;
           }
           if (newIndex >= 0) {
-            handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
+            var _newValue5 = newIndex.toString().padStart(2, '0');
+            var _element5 = timeItemRefs.current["".concat(column, "-").concat(_newValue5)];
+            setTimeout(function () {
+              if (_element5) {
+                _element5.focus();
+              }
+            }, 0);
           }
           break;
-        case 'Tab':
-          if (currentIndexInColumns === columnsConfig.length - 1) {
-            break;
-          }
-          event.preventDefault();
-          if (event.shiftKey) {
-            if (column === 'minutes') {
-              newColumn = 'hours';
-            } else if (column === 'seconds') {
-              newColumn = 'minutes';
-            }
-          } else if (column === 'hours') {
-            newColumn = 'minutes';
-          } else if (column === 'minutes' && actualFormat.includes('ss')) {
-            newColumn = 'seconds';
-          }
-          if (newColumn !== column) {
-            setActiveTime(function (prev) {
-              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-                currentColumn: newColumn
-              });
-            });
+      }
+    };
+    React.useEffect(function () {
+      if (currentColumn && currentColumn !== null) {
+        var _activeTime$currentCo;
+        var column = currentColumn;
+        var value = (_activeTime$currentCo = activeTime[currentColumn]) === null || _activeTime$currentCo === void 0 ? void 0 : _activeTime$currentCo.toString().padStart(2, '0');
+        var element = timeItemRefs.current["".concat(column, "-").concat(value)];
+        setTimeout(function () {
+          if (element) {
+            element.focus();
           }
-          break;
-        default:
-          if (/^[0-9]$/.test(event.key)) {
-            event.preventDefault();
-            var inputNumber = parseInt(event.key, 10);
-            if (column === 'hours') {
-              if (inputNumber <= 2) {
-                var tens = inputNumber;
-                var handleSecondInput = function handleSecondInput(e) {
-                  if (/^[0-9]$/.test(e.key)) {
-                    var units = parseInt(e.key, 10);
-                    var total = tens * 10 + units;
-                    if (total < 24 && !disabledValuesForColumn.includes(total)) {
-                      handleTimeItemClick(total.toString().padStart(2, '0'), column);
-                    }
-                    document.removeEventListener('keydown', handleSecondInput);
-                  }
-                };
-                document.addEventListener('keydown', handleSecondInput);
-                setTimeout(function () {
-                  document.removeEventListener('keydown', handleSecondInput);
-                }, 1000);
-              } else if (inputNumber <= 9) {
-                if (!disabledValuesForColumn.includes(inputNumber)) {
-                  handleTimeItemClick(inputNumber.toString().padStart(2, '0'), column);
-                }
-              }
-            } else if (inputNumber <= 5) {
-              var _tens = inputNumber;
-              var _handleSecondInput = function _handleSecondInput(e) {
-                if (/^[0-9]$/.test(e.key)) {
-                  var units = parseInt(e.key, 10);
-                  var total = _tens * 10 + units;
-                  if (total < 60 && !disabledValuesForColumn.includes(total)) {
-                    handleTimeItemClick(total.toString().padStart(2, '0'), column);
-                  }
-                  document.removeEventListener('keydown', _handleSecondInput);
-                }
-              };
-              document.addEventListener('keydown', _handleSecondInput);
-              setTimeout(function () {
-                document.removeEventListener('keydown', _handleSecondInput);
-              }, 1000);
-            } else if (inputNumber <= 9) {
-              if (!disabledValuesForColumn.includes(inputNumber)) {
-                handleTimeItemClick(inputNumber.toString().padStart(2, '0'), column);
-              }
-            }
+        }, 0);
+      }
+    }, [currentColumn]);
+    React.useEffect(function () {
+      return function () {
+        [hoursHideTimeoutRef, minutesHideTimeoutRef, secondsHideTimeoutRef].forEach(function (timeoutRef) {
+          if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
           }
+        });
+      };
+    }, []);
+    React.useEffect(function () {
+      if (hoursColumnRef.current) {
+        var computedStyle = getComputedStyle(hoursColumnRef.current);
+        var gapValue = parseFloat(computedStyle.gap || '0');
+        setGap(gapValue);
       }
-    };
+    }, [hoursColumnRef.current]);
+    React.useEffect(function () {
+      setTimeout(function () {
+        updateScrollbar(hoursColumnRef, setHoursScrollbar);
+        updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+        if (columnsQuantity === 3) {
+          updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+        }
+      }, 100);
+    }, [columnsQuantity]);
+    React.useEffect(function () {
+      if (itemHeight === 0) return;
+      var scrollToActiveItem = function scrollToActiveItem(columnRef, index$1) {
+        if (columnRef.current && index$1 !== null) {
+          var scrollPosition = index$1 * (itemHeight + gap);
+          index.animateScrollTo(columnRef.current, scrollPosition);
+          setTimeout(function () {
+            updateScrollbar(columnRef, setHoursScrollbar);
+          }, 300);
+        }
+      };
+      scrollToActiveItem(hoursColumnRef, activeTime.hours);
+      scrollToActiveItem(minutesColumnRef, activeTime.minutes);
+      scrollToActiveItem(secondsColumnRef, activeTime.seconds);
+    }, [activeTime.hours, activeTime.minutes, activeTime.seconds, itemHeight, gap]);
+    React.useEffect(function () {
+      var hoursColumn = hoursColumnRef.current;
+      var minutesColumn = minutesColumnRef.current;
+      var secondsColumn = secondsColumnRef.current;
+      var handleHoursScroll = function handleHoursScroll() {
+        return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
+      };
+      var handleMinutesScroll = function handleMinutesScroll() {
+        return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
+      };
+      var handleSecondsScroll = function handleSecondsScroll() {
+        return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
+      };
+      if (hoursColumn) {
+        hoursColumn.addEventListener('scroll', handleHoursScroll);
+      }
+      if (minutesColumn) {
+        minutesColumn.addEventListener('scroll', handleMinutesScroll);
+      }
+      if (secondsColumn) {
+        secondsColumn.addEventListener('scroll', handleSecondsScroll);
+      }
+      return function () {
+        if (hoursColumn) {
+          hoursColumn.removeEventListener('scroll', handleHoursScroll);
+        }
+        if (minutesColumn) {
+          minutesColumn.removeEventListener('scroll', handleMinutesScroll);
+        }
+        if (secondsColumn) {
+          secondsColumn.removeEventListener('scroll', handleSecondsScroll);
+        }
+      };
+    }, []);
+    React.useEffect(function () {
+      var hoursColumn = hoursColumnRef.current;
+      var minutesColumn = minutesColumnRef.current;
+      var secondsColumn = secondsColumnRef.current;
+      var handleHoursMouseEnter = function handleHoursMouseEnter() {
+        return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
+      };
+      var handleMinutesMouseEnter = function handleMinutesMouseEnter() {
+        return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
+      };
+      var handleSecondsMouseEnter = function handleSecondsMouseEnter() {
+        return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
+      };
+      if (hoursColumn) {
+        hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
+      }
+      if (minutesColumn) {
+        minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
+      }
+      if (secondsColumn) {
+        secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
+      }
+      return function () {
+        if (hoursColumn) {
+          hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
+        }
+        if (minutesColumn) {
+          minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
+        }
+        if (secondsColumn) {
+          secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
+        }
+      };
+    }, []);
     return /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
       ref: ref,
       view: view,
@@ -691,6 +620,7 @@ var timePickerGridRoot = function timePickerGridRoot(Root) {
         dropdownHeight: dropdownHeight,
         column: type,
         activeTime: activeTime,
+        currentColumn: currentColumn,
         handleTimeItemClick: handleTimeItemClick,
         handleTimeItemKeyDown: handleTimeItemKeyDown,
         createScrollbarDragHandler: createScrollbarDragHandler,