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

package/styled-components/cjs/components/TimePicker/utils/index.js

@@ -12,6 +12,9 @@ _export(exports, {
     get animateScrollTo () {
         return animateScrollTo;
     },
+    get delimiter () {
+        return delimiter;
+    },
     get normalizeTimeSegment () {
         return normalizeTimeSegment;
     },
@@ -22,6 +25,7 @@ _export(exports, {
         return range;
     }
 });
+var delimiter = ':';
 var range = function(number) {
     var padLength = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
     return Array.from({
@@ -33,43 +37,46 @@ var range = function(number) {
 var normalizeTimeSegment = function(type, input) {
     var max = type === 'HH' ? 23 : 59;
     var digits = input.replace(/\D/g, '');
-    if (!digits) return {
-        text: '',
-        value: null,
-        carryover: ''
-    };
+    var num = parseInt(digits, 10);
+    if (!digits) {
+        return {
+            text: '',
+            value: null,
+            carryover: ''
+        };
+    }
+    if (Math.floor(max / 10) < num && digits.length === 1) {
+        return {
+            text: num.toString().padStart(2, '0'),
+            value: num,
+            carryover: ''
+        };
+    }
+    if (num <= max && digits.length === 1) {
+        return {
+            text: digits,
+            value: num,
+            carryover: ''
+        };
+    }
     if (digits.length === 1) {
-        var num = parseInt(digits, 10);
-        if (Math.floor(max / 10) < num) {
-            return {
-                text: num.toString().padStart(2, '0'),
-                value: num,
-                carryover: ''
-            };
-        }
-        if (num <= max) {
-            return {
-                text: digits,
-                value: num,
-                carryover: ''
-            };
-        }
         return {
             text: max.toString().padStart(2, '0'),
             value: max,
             carryover: ''
         };
     }
-    var number = parseInt(digits, 10);
-    if (Number.isNaN(number)) return {
-        text: '',
-        value: null,
-        carryover: ''
-    };
-    if (number <= max) {
+    if (Number.isNaN(num)) {
+        return {
+            text: '',
+            value: null,
+            carryover: ''
+        };
+    }
+    if (num <= max) {
         return {
             text: digits.padStart(2, '0'),
-            value: number,
+            value: num,
             carryover: ''
         };
     }
@@ -91,7 +98,7 @@ var normalizeTimeSegment = function(type, input) {
 var processTimeInput = function(input) {
     var format = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 'HH:mm:ss', cursorPosition = arguments.length > 2 ? arguments[2] : void 0;
     var digits = input.replace(/\D/g, '');
-    var tokens = format.split(':');
+    var tokens = format.split(delimiter);
     var values = {
         hh: null,
         mm: null,
@@ -99,22 +106,13 @@ var processTimeInput = function(input) {
     };
     var segments = [];
     var digitIndex = 0;
-    var carryover = '';
     var newCursorPosition = cursorPosition !== null && cursorPosition !== void 0 ? cursorPosition : 0;
-    tokens.forEach(function(token, index) {
+    tokens.forEach(function(token) {
         var segmentDigits = digits.slice(digitIndex, digitIndex + 2);
         digitIndex += segmentDigits.length;
-        if (carryover) {
-            segmentDigits = carryover + segmentDigits;
-            carryover = '';
-        }
-        var normalized = normalizeTimeSegment(token, segmentDigits);
-        carryover = normalized.carryover;
-        values[token.toLowerCase()] = normalized.value;
-        segments.push(normalized.text);
-        if (carryover && index === tokens.length - 1) {
-            carryover = '';
-        }
+        var _normalizeTimeSegment = normalizeTimeSegment(token, segmentDigits), text = _normalizeTimeSegment.text, value = _normalizeTimeSegment.value;
+        values[token.toLowerCase()] = value;
+        segments.push(text);
     });
     var innerString = segments[0];
     if (segments.length > 1 && segments[1]) {

package/styled-components/cjs/examples/components/TimePicker/TimePicker.config.js

@@ -26,12 +26,6 @@ var config = {
                 ":var(--text-primary);",
                 ":var(--text-secondary);",
                 ":var(--text-accent);",
-                ":var(--plasma-typo-body-xs-font-family);",
-                ":var(--plasma-typo-body-xs-font-size);",
-                ":var(--plasma-typo-body-xs-font-style);",
-                ":var(--plasma-typo-body-xs-font-weight);",
-                ":var(--plasma-typo-body-xs-letter-spacing);",
-                ":var(--plasma-typo-body-xs-line-height);",
                 ":var(--surface-negative);",
                 ":var(--surface-transparent-primary);",
                 ":var(--surface-transparent-secondary);",
@@ -47,7 +41,7 @@ var config = {
                 ":var(--surface-transparent-secondary);",
                 ":var(--surface-transparent-tertiary);",
                 ":var(--surface-transparent-primary);"
-            ], _TimePicker.timePickerTokens.background, _TimePicker.timePickerTokens.backgroundError, _TimePicker.timePickerTokens.backgroundSuccess, _TimePicker.timePickerTokens.labelColor, _TimePicker.timePickerTokens.textFieldColor, _TimePicker.timePickerTokens.textFieldPlaceholderColor, _TimePicker.timePickerTokens.textFieldCaretColor, _TimePicker.timePickerTokens.labelInnerFontFamily, _TimePicker.timePickerTokens.labelInnerFontSize, _TimePicker.timePickerTokens.labelInnerFontStyle, _TimePicker.timePickerTokens.labelInnerFontWeight, _TimePicker.timePickerTokens.labelInnerLetterSpacing, _TimePicker.timePickerTokens.labelInnerLineHeight, _TimePicker.timePickerTokens.indicatorColor, _TimePicker.timePickerTokens.textFieldBackgroundColor, _TimePicker.timePickerTokens.textFieldBackgroundColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundErrorColor, _TimePicker.timePickerTokens.textFieldBackgroundErrorColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColor, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColorFocus, _TimePicker.timePickerTokens.textFieldTextBeforeColor, _TimePicker.timePickerTokens.textFieldTextAfterColor, _TimePicker.timePickerTokens.textFieldPlaceholderColorFocus, _TimePicker.timePickerTokens.timePickerBackground, _TimePicker.timePickerTokens.itemHoverBackground, _TimePicker.timePickerTokens.itemActiveBackground, _TimePicker.timePickerTokens.scrollbarColor, _TimePicker.timePickerTokens.scrollbarTrackColor)
+            ], _TimePicker.timePickerTokens.background, _TimePicker.timePickerTokens.backgroundError, _TimePicker.timePickerTokens.backgroundSuccess, _TimePicker.timePickerTokens.labelColor, _TimePicker.timePickerTokens.textFieldColor, _TimePicker.timePickerTokens.textFieldPlaceholderColor, _TimePicker.timePickerTokens.textFieldCaretColor, _TimePicker.timePickerTokens.indicatorColor, _TimePicker.timePickerTokens.textFieldBackgroundColor, _TimePicker.timePickerTokens.textFieldBackgroundColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundErrorColor, _TimePicker.timePickerTokens.textFieldBackgroundErrorColorFocus, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColor, _TimePicker.timePickerTokens.textFieldBackgroundSuccessColorFocus, _TimePicker.timePickerTokens.textFieldTextBeforeColor, _TimePicker.timePickerTokens.textFieldTextAfterColor, _TimePicker.timePickerTokens.textFieldPlaceholderColorFocus, _TimePicker.timePickerTokens.timePickerBackground, _TimePicker.timePickerTokens.itemBackgroundHover, _TimePicker.timePickerTokens.itemBackgroundActive, _TimePicker.timePickerTokens.scrollbarColor, _TimePicker.timePickerTokens.scrollbarTrackColor)
         },
         size: {
             l: (0, _styledcomponents.css)([
@@ -97,9 +91,15 @@ var config = {
                 ":3.5rem;",
                 ":0.75rem;",
                 ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
                 ":0.125rem;",
                 ":0.5rem;"
-            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
+            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.labelInnerFontFamily, _TimePicker.timePickerTokens.labelInnerFontSize, _TimePicker.timePickerTokens.labelInnerFontStyle, _TimePicker.timePickerTokens.labelInnerFontWeight, _TimePicker.timePickerTokens.labelInnerLetterSpacing, _TimePicker.timePickerTokens.labelInnerLineHeight, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
             m: (0, _styledcomponents.css)([
                 "",
                 ":20rem;",
@@ -147,9 +147,15 @@ var config = {
                 ":3rem;",
                 ":0.625rem;",
                 ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
                 ":0.125rem;",
                 ":0.375rem;"
-            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
+            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.labelInnerFontFamily, _TimePicker.timePickerTokens.labelInnerFontSize, _TimePicker.timePickerTokens.labelInnerFontStyle, _TimePicker.timePickerTokens.labelInnerFontWeight, _TimePicker.timePickerTokens.labelInnerLetterSpacing, _TimePicker.timePickerTokens.labelInnerLineHeight, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
             s: (0, _styledcomponents.css)([
                 "",
                 ":20rem;",
@@ -197,9 +203,15 @@ var config = {
                 ":2.5rem;",
                 ":0.5rem;",
                 ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
                 ":0.125rem;",
                 ":0.25rem;"
-            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
+            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.labelInnerFontFamily, _TimePicker.timePickerTokens.labelInnerFontSize, _TimePicker.timePickerTokens.labelInnerFontStyle, _TimePicker.timePickerTokens.labelInnerFontWeight, _TimePicker.timePickerTokens.labelInnerLetterSpacing, _TimePicker.timePickerTokens.labelInnerLineHeight, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin),
             xs: (0, _styledcomponents.css)([
                 "",
                 ":20rem;",
@@ -247,9 +259,15 @@ var config = {
                 ":2rem;",
                 ":0.375rem;",
                 ":0rem;",
+                ":var(--plasma-typo-body-xs-font-family);",
+                ":var(--plasma-typo-body-xs-font-size);",
+                ":var(--plasma-typo-body-xs-font-style);",
+                ":var(--plasma-typo-body-xs-font-weight);",
+                ":var(--plasma-typo-body-xs-letter-spacing);",
+                ":var(--plasma-typo-body-xs-line-height);",
                 ":0.125rem;",
                 ":0.25rem;"
-            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin)
+            ], _TimePicker.timePickerTokens.width, _TimePicker.timePickerTokens.borderRadius, _TimePicker.timePickerTokens.leftContentMargin, _TimePicker.timePickerTokens.rightContentMargin, _TimePicker.timePickerTokens.labelOffset, _TimePicker.timePickerTokens.labelInnerPadding, _TimePicker.timePickerTokens.contentLabelInnerPadding, _TimePicker.timePickerTokens.labelFontFamily, _TimePicker.timePickerTokens.labelFontStyle, _TimePicker.timePickerTokens.labelFontSize, _TimePicker.timePickerTokens.labelFontWeight, _TimePicker.timePickerTokens.labelLetterSpacing, _TimePicker.timePickerTokens.labelLineHeight, _TimePicker.timePickerTokens.indicatorSize, _TimePicker.timePickerTokens.indicatorSizeOuter, _TimePicker.timePickerTokens.indicatorPlacement, _TimePicker.timePickerTokens.indicatorOuterPlacement, _TimePicker.timePickerTokens.indicatorPlacementRight, _TimePicker.timePickerTokens.indicatorOuterPlacementRight, _TimePicker.timePickerTokens.textFieldHeight, _TimePicker.timePickerTokens.textFieldBorderRadius, _TimePicker.timePickerTokens.textFieldPadding, _TimePicker.timePickerTokens.textFieldFontFamily, _TimePicker.timePickerTokens.textFieldFontStyle, _TimePicker.timePickerTokens.textFieldFontSize, _TimePicker.timePickerTokens.textFieldFontWeight, _TimePicker.timePickerTokens.textFieldLetterSpacing, _TimePicker.timePickerTokens.textFieldLineHeight, _TimePicker.timePickerTokens.textFieldLeftContentMargin, _TimePicker.timePickerTokens.textFieldRightContentMargin, _TimePicker.timePickerTokens.textFieldTextBeforeMargin, _TimePicker.timePickerTokens.textFieldTextAfterMargin, _TimePicker.timePickerTokens.timePickerBorderRadius, _TimePicker.timePickerTokens.timePickerWidth, _TimePicker.timePickerTokens.timePickerPadding, _TimePicker.timePickerTokens.columnHeight, _TimePicker.timePickerTokens.itemFontFamily, _TimePicker.timePickerTokens.itemFontSize, _TimePicker.timePickerTokens.itemFontStyle, _TimePicker.timePickerTokens.itemFontWeight, _TimePicker.timePickerTokens.itemLetterSpacing, _TimePicker.timePickerTokens.itemLineHeight, _TimePicker.timePickerTokens.itemHeight, _TimePicker.timePickerTokens.itemBorderRadius, _TimePicker.timePickerTokens.itemPadding, _TimePicker.timePickerTokens.labelInnerFontFamily, _TimePicker.timePickerTokens.labelInnerFontSize, _TimePicker.timePickerTokens.labelInnerFontStyle, _TimePicker.timePickerTokens.labelInnerFontWeight, _TimePicker.timePickerTokens.labelInnerLetterSpacing, _TimePicker.timePickerTokens.labelInnerLineHeight, _TimePicker.timePickerTokens.scrollbarWidth, _TimePicker.timePickerTokens.scrollbarMargin)
         },
         disabled: {
             true: (0, _styledcomponents.css)([

package/styled-components/es/components/TimePicker/TimePicker.js

@@ -138,14 +138,15 @@ function _unsupported_iterable_to_array(o, minLen) {
 import React, { forwardRef, useRef, useState, useEffect, useCallback } from "react";
 import cls from "classnames";
 import { getPlacements } from "../../utils";
-import { range, processTimeInput, animateScrollTo } from "./utils";
-import { base, StyledInput, StyledPopover, StyledTimeColumn, StyledTimeItem, StyledTimePicker, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledEmpty } from "./TimePicker.styles";
+import { range, processTimeInput, animateScrollTo, delimiter } from "./utils";
+import { base, StyledInput, StyledPopover, StyledTimePicker } from "./TimePicker.styles";
 import { classes } from "./TimePicker.tokens";
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { base as readonlyCSS } from "./variations/_readonly/base";
 import { useKeyNavigation } from "./hooks/useKeyboardNavigation";
+import { renderTimeColumn } from "./ui/TimeColumn/TimeColumn";
 export var timePickerRoot = function(Root) {
     return /*#__PURE__*/ forwardRef(function(_param, ref) {
         var className = _param.className, _param_opened = _param.opened, opened = _param_opened === void 0 ? false : _param_opened, outerValue = _param.value, label = _param.label, _param_labelPlacement = _param.labelPlacement, labelPlacement = _param_labelPlacement === void 0 ? 'outer' : _param_labelPlacement, keepPlaceholder = _param.keepPlaceholder, _param_required = _param.required, required = _param_required === void 0 ? false : _param_required, _param_requiredPlacement = _param.requiredPlacement, requiredPlacement = _param_requiredPlacement === void 0 ? 'right' : _param_requiredPlacement, _param_hasRequiredIndicator = _param.hasRequiredIndicator, hasRequiredIndicator = _param_hasRequiredIndicator === void 0 ? true : _param_hasRequiredIndicator, placeholder = _param.placeholder, contentLeft = _param.contentLeft, contentRight = _param.contentRight, textBefore = _param.textBefore, textAfter = _param.textAfter, view = _param.view, size = _param.size, _param_disabled = _param.disabled, disabled = _param_disabled === void 0 ? false : _param_disabled, _param_readonly = _param.readonly, readonly = _param_readonly === void 0 ? false : _param_readonly, _param_frame = _param.frame, frame = _param_frame === void 0 ? 'document' : _param_frame, _param_usePortal = _param.usePortal, usePortal = _param_usePortal === void 0 ? false : _param_usePortal, _param_closeOnOverlayClick = _param.closeOnOverlayClick, closeOnOverlayClick = _param_closeOnOverlayClick === void 0 ? true : _param_closeOnOverlayClick, _param_closeOnEsc = _param.closeOnEsc, closeOnEsc = _param_closeOnEsc === void 0 ? true : _param_closeOnEsc, offset = _param.offset, stretched = _param.stretched, _param_dropdownAlign = _param.dropdownAlign, dropdownAlign = _param_dropdownAlign === void 0 ? 'left' : _param_dropdownAlign, dropdownWidth = _param.dropdownWidth, dropdownHeight = _param.dropdownHeight, _param_columnsQuantity = _param.columnsQuantity, columnsQuantity = _param_columnsQuantity === void 0 ? 2 : _param_columnsQuantity, onToggle = _param.onToggle, onFocus = _param.onFocus, onChange = _param.onChange, rest = _object_without_properties(_param, [
@@ -229,6 +230,7 @@ export var timePickerRoot = function(Root) {
         var hours = range(24);
         var minutes = range(60);
         var seconds = range(60);
+        var minScrollbarTrackHeight = 20;
         var calculateScrollbar = useCallback(function(columnRef) {
             if (!columnRef.current) return {
                 thumbHeight: 0,
@@ -236,7 +238,7 @@ export var timePickerRoot = function(Root) {
             };
             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 thumbHeight = Math.max(trackHeight / scrollHeight * trackHeight, minScrollbarTrackHeight);
             var maxScroll = scrollHeight - clientHeight;
             var thumbPosition = maxScroll > 0 ? scrollTop / maxScroll * (trackHeight - thumbHeight) : 0;
             return {
@@ -340,35 +342,37 @@ export var timePickerRoot = function(Root) {
             };
         }, []);
         useEffect(function() {
-            if (isInnerOpen) {
-                setTimeout(function() {
-                    updateScrollbar(hoursColumnRef, setHoursScrollbar);
-                    updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-                    if (columnsQuantity === 3) {
-                        updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-                    }
-                }, 100);
+            if (!isInnerOpen) {
+                return;
             }
+            setTimeout(function() {
+                updateScrollbar(hoursColumnRef, setHoursScrollbar);
+                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+                if (columnsQuantity === 3) {
+                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+                }
+            }, 100);
         }, [
             isInnerOpen,
             columnsQuantity,
             updateScrollbar
         ]);
         useEffect(function() {
-            if (viewValue) {
-                var timeString = viewValue;
-                if (format === 'HH:mm' && viewValue.length > 5) {
-                    timeString = viewValue.substring(0, 5);
-                }
-                setInnerTime(viewValue);
-                var _timeString_split_map = _sliced_to_array(timeString.split(':').map(Number), 3), hh = _timeString_split_map[0], mm = _timeString_split_map[1], ss = _timeString_split_map[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
-                });
+            if (!viewValue) {
+                return;
             }
+            var timeString = viewValue;
+            if (format === 'HH:mm' && viewValue.length > 5) {
+                timeString = viewValue.substring(0, 5);
+            }
+            setInnerTime(viewValue);
+            var _timeString_split_map = _sliced_to_array(timeString.split(delimiter).map(Number), 3), hh = _timeString_split_map[0], mm = _timeString_split_map[1], ss = _timeString_split_map[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
@@ -403,13 +407,7 @@ export var timePickerRoot = function(Root) {
                     var scrollPosition = index * (itemHeight + gap);
                     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);
-                        }
+                        updateScrollbar(columnRef, setHoursScrollbar);
                     }, 300);
                 }
             };
@@ -519,7 +517,7 @@ export var timePickerRoot = function(Root) {
         };
         var handleTimeItemClick = function(value, column) {
             var isNextColumn = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
-            var currentTime = innerTime.split(':');
+            var currentTime = innerTime.split(delimiter);
             var newTime = [];
             if (format === 'HH:mm:ss') {
                 newTime = _to_consumable_array(currentTime);
@@ -539,10 +537,8 @@ export var timePickerRoot = function(Root) {
                     if (!currentTime[1]) {
                         newTime[1] = '00';
                     }
-                    if (format === 'HH:mm:ss') {
-                        if (!currentTime[2]) {
-                            newTime[2] = '00';
-                        }
+                    if (format === 'HH:mm:ss' && !currentTime[2]) {
+                        newTime[2] = '00';
                     }
                     break;
                 case 'minutes':
@@ -550,10 +546,8 @@ export var timePickerRoot = function(Root) {
                     if (!currentTime[0]) {
                         newTime[0] = '00';
                     }
-                    if (format === 'HH:mm:ss') {
-                        if (!currentTime[2]) {
-                            newTime[2] = '00';
-                        }
+                    if (format === 'HH:mm:ss' && !currentTime[2]) {
+                        newTime[2] = '00';
                     }
                     break;
                 case 'seconds':
@@ -570,7 +564,7 @@ export var timePickerRoot = function(Root) {
                 default:
                     break;
             }
-            var newTimeString = newTime.join(':');
+            var newTimeString = newTime.join(delimiter);
             setInnerTime(newTimeString);
             var nextColumn = null;
             if (column === 'hours' && isNextColumn) {
@@ -608,12 +602,14 @@ export var timePickerRoot = function(Root) {
                     seconds: values.ss
                 });
             });
-            onChange === null || onChange === void 0 ? void 0 : onChange(_object_spread_props(_object_spread({}, event), {
-                target: _object_spread_props(_object_spread({}, event.target), {
-                    value: innerString,
-                    timeValues: values
-                })
-            }));
+            if (onChange) {
+                onChange(_object_spread_props(_object_spread({}, event), {
+                    target: _object_spread_props(_object_spread({}, event.target), {
+                        value: innerString,
+                        timeValues: values
+                    })
+                }));
+            }
             requestAnimationFrame(function() {
                 if (inputRef.current) {
                     inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
@@ -632,9 +628,13 @@ export var timePickerRoot = function(Root) {
                 onToggle === null || onToggle === void 0 ? void 0 : onToggle(true);
                 return;
             }
-            if (!isInnerOpen) return;
+            if (!isInnerOpen) {
+                return;
+            }
             var currentColumn = activeTime.currentColumn;
-            if (!currentColumn) return;
+            if (!currentColumn) {
+                return;
+            }
             var newIndex = null;
             var newColumn = currentColumn;
             if ([
@@ -687,8 +687,11 @@ export var timePickerRoot = function(Root) {
                     }
                     break;
                 case 'ArrowLeft':
-                    if (currentColumn === 'minutes') newColumn = 'hours';
-                    else if (currentColumn === 'seconds') newColumn = 'minutes';
+                    if (currentColumn === 'minutes') {
+                        newColumn = 'hours';
+                    } else if (currentColumn === 'seconds') {
+                        newColumn = 'minutes';
+                    }
                     var _activeTime_newColumn1;
                     newIndex = (_activeTime_newColumn1 = activeTime[newColumn]) !== null && _activeTime_newColumn1 !== void 0 ? _activeTime_newColumn1 : 0;
                     setActiveTime(_object_spread_props(_object_spread({}, activeTime), _define_property({
@@ -708,11 +711,15 @@ export var timePickerRoot = function(Root) {
                 handleTimeItemClick(value, column);
             }
         };
+        var handleOnKeyDown = function(e) {
+            onKeyDownNavigation(e);
+            handleKeyDown(e);
+        };
         var _useKeyNavigation = useKeyNavigation({
             isCalendarOpen: isInnerOpen,
             format: format,
             maskWithFormat: true,
-            delimiter: ':',
+            delimiter: delimiter,
             closeOnEsc: closeOnEsc,
             onToggle: handleToggle
         }), onKeyDownNavigation = _useKeyNavigation.onKeyDown;
@@ -729,10 +736,7 @@ export var timePickerRoot = function(Root) {
             textAfter: textAfter,
             onChange: handleInputChange,
             onFocus: onFocus,
-            onKeyDown: function(e) {
-                onKeyDownNavigation(e);
-                handleKeyDown(e);
-            },
+            onKeyDown: handleOnKeyDown,
             required: required,
             requiredPlacement: requiredPlacement,
             hasRequiredIndicator: hasRequiredIndicator,
@@ -740,43 +744,6 @@ export var timePickerRoot = function(Root) {
             labelPlacement: labelPlacement,
             keepPlaceholder: keepPlaceholder
         });
-        var renderTimeColumn = function(values, column, columnRef, scrollbarState, setScrollbar, scrollbarRef, thumbRef, timeoutRef) {
-            return /*#__PURE__*/ React.createElement("div", {
-                style: {
-                    position: 'relative',
-                    width: '100%'
-                }
-            }, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
-                key: column,
-                ref: columnRef,
-                height: dropdownHeight,
-                className: classes.timeColumn
-            }, values.map(function(value, index) {
-                return /*#__PURE__*/ React.createElement(StyledTimeItem, {
-                    key: value,
-                    ref: function(el) {
-                        timeItemRefs.current["".concat(column, "-").concat(value)] = el;
-                    },
-                    className: cls(_define_property({}, classes.timeItemActive, activeTime[column] === index)),
-                    onClick: function() {
-                        return handleTimeItemClick(value, column);
-                    },
-                    onKeyDown: function(e) {
-                        return handleTimeItemKeyDown(e, column, value);
-                    }
-                }, value);
-            }), /*#__PURE__*/ React.createElement(StyledEmpty, null)), /*#__PURE__*/ React.createElement(CustomScrollbar, {
-                ref: scrollbarRef,
-                className: cls(_define_property({}, classes.scrollbarVisible, scrollbarState.isVisible))
-            }, /*#__PURE__*/ React.createElement(ScrollbarTrack, null, /*#__PURE__*/ React.createElement(ScrollbarThumb, {
-                ref: thumbRef,
-                style: {
-                    height: "".concat(scrollbarState.thumbHeight, "px"),
-                    top: "".concat(scrollbarState.thumbPosition, "px")
-                },
-                onMouseDown: createScrollbarDragHandler(columnRef, setScrollbar, timeoutRef)
-            }))));
-        };
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             stretched: stretched,
             view: view,
@@ -809,7 +776,52 @@ export var timePickerRoot = function(Root) {
             stretched: stretched
         }, /*#__PURE__*/ React.createElement(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)))));
+        }, renderTimeColumn({
+            values: hours,
+            dropdownHeight: dropdownHeight,
+            column: 'hours',
+            columnRef: hoursColumnRef,
+            scrollbarState: hoursScrollbar,
+            setScrollbar: setHoursScrollbar,
+            scrollbarRef: hoursScrollbarRef,
+            thumbRef: hoursThumbRef,
+            timeoutRef: hoursHideTimeoutRef,
+            timeItemRefs: timeItemRefs,
+            activeTime: activeTime,
+            handleTimeItemClick: handleTimeItemClick,
+            handleTimeItemKeyDown: handleTimeItemKeyDown,
+            createScrollbarDragHandler: createScrollbarDragHandler
+        }), renderTimeColumn({
+            values: minutes,
+            dropdownHeight: dropdownHeight,
+            column: 'minutes',
+            columnRef: minutesColumnRef,
+            scrollbarState: minutesScrollbar,
+            setScrollbar: setMinutesScrollbar,
+            scrollbarRef: minutesScrollbarRef,
+            thumbRef: minutesThumbRef,
+            timeoutRef: minutesHideTimeoutRef,
+            timeItemRefs: timeItemRefs,
+            activeTime: activeTime,
+            handleTimeItemClick: handleTimeItemClick,
+            handleTimeItemKeyDown: handleTimeItemKeyDown,
+            createScrollbarDragHandler: createScrollbarDragHandler
+        }), columnsQuantity === 3 && renderTimeColumn({
+            values: seconds,
+            dropdownHeight: dropdownHeight,
+            column: 'seconds',
+            columnRef: secondsColumnRef,
+            scrollbarState: secondsScrollbar,
+            setScrollbar: setSecondsScrollbar,
+            scrollbarRef: secondsScrollbarRef,
+            thumbRef: secondsThumbRef,
+            timeoutRef: secondsHideTimeoutRef,
+            timeItemRefs: timeItemRefs,
+            activeTime: activeTime,
+            handleTimeItemClick: handleTimeItemClick,
+            handleTimeItemKeyDown: handleTimeItemKeyDown,
+            createScrollbarDragHandler: createScrollbarDragHandler
+        })))));
     });
 };
 export var timePickerConfig = {