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

package/cjs/components/TimePicker/TimePicker.css

@@ -76,16 +76,18 @@
 .Popover_styles_ji8em4_s16xlixz__439b9cc0{position:absolute;z-index:var(--s16xlixz-0);opacity:0;visibility:hidden;box-shadow:var(--plasma-popover-box-shadow);}.Popover_styles_ji8em4_s16xlixz__439b9cc0.Popover_styles_ji8em4_popoverAnimate__439b9cc0{-webkit-transition:opacity 0.2s ease-in-out,-webkit-transform 0s ease-in-out,visibility 0.2s;-webkit-transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;transition:opacity 0.2s ease-in-out,transform 0s ease-in-out,visibility 0.2s;}.Popover_styles_ji8em4_s16xlixz__439b9cc0.Popover_styles_ji8em4_popoverOpen__439b9cc0{opacity:1;visibility:visible;}.Popover_styles_ji8em4_s16xlixz__439b9cc0:before{content:'';display:block;position:absolute;background:transparent;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{right:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{left:calc(0px - var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{bottom:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));left:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:calc(0px - var(--plasma-popover-arrow-height));left:unset !important;right:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0::before{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-start'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-end'] > .Popover_styles_ji8em4_popoverArrow__439b9cc0{top:unset !important;bottom:var(--plasma-popover-arrow-edge-margin) !important;-webkit-transform:unset !important;-ms-transform:unset !important;transform:unset !important;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='top-end']:before{top:unset;left:0;right:0;height:var(--plasma-popover-arrow-height);bottom:calc(-1 * var(--plasma-popover-arrow-height));}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='bottom-end']:before{top:calc(-1 * var(--plasma-popover-arrow-height));left:0;right:0;bottom:var(--plasma-popover-arrow-height);height:var(--plasma-popover-arrow-height);}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='left-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;right:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-start']:before,.Popover_styles_ji8em4_s16xlixz__439b9cc0[data-popper-placement^='right-end']:before{width:var(--plasma-popover-arrow-height);height:100%;top:0;left:calc(-1 * var(--plasma-popover-arrow-height));bottom:0;}
 
 
-.TimePicker_styles_dnulzj_s1ghbm1p__498f1c5c{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_dnulzj_s1ghbm1p__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerError__498f1c5c{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_dnulzj_s1ghbm1p__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerSuccess__498f1c5c{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
-.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c .TimePicker_styles_dnulzj_popoverWrapper__498f1c5c,.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c .TimePicker_styles_dnulzj_popoverTarget__498f1c5c{width:inherit;}.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerStretched__498f1c5c{width:100%;}.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerStretched__498f1c5c .TimePicker_styles_dnulzj_popoverRoot__498f1c5c{width:100%;}.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerFullWidth__498f1c5c{width:100%;}.TimePicker_styles_dnulzj_b19h9m1x__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerPlacementRight__498f1c5c{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
-.TimePicker_styles_dnulzj_slnaiay__498f1c5c{background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);width:var(--slnaiay-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--plasma-time-picker-ui-padding);-webkit-flex:1 1 1;-ms-flex:1 1 1;flex:1 1 1;gap:var(--plasma-time-picker-scrollbar-width);box-sizing:border-box;position:relative;}
-.TimePicker_styles_dnulzj_sh0cawu__498f1c5c{height:var(--plasma-time-picker-item-height);padding:var(--plasma-time-picker-item-padding);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:0.05s;transition:0.05s;border-radius:var(--plasma-time-picker-item-border-radius);cursor:pointer;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:auto;font-family:var(--plasma-time-picker-item-font-family);font-size:var(--plasma-time-picker-item-font-size);font-style:var(--plasma-time-picker-item-font-style);font-weight:var(--plasma-time-picker-item-font-weight);-webkit-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-moz-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-ms-letter-spacing:var(--plasma-time-picker-item-letter-spacing);letter-spacing:var(--plasma-time-picker-item-letter-spacing);line-height:var(--plasma-time-picker-item-line-height);}.TimePicker_styles_dnulzj_sh0cawu__498f1c5c:hover{background:var(--plasma-time-picker-item-hover-background);}.TimePicker_styles_dnulzj_sh0cawu__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerItemActive__498f1c5c{background:var(--plasma-time-picker-item-active-background);}
-.TimePicker_styles_dnulzj_s15lrh1g__498f1c5c{max-height:var(--s15lrh1g-0);overflow-y:scroll;-webkit-flex:1;-ms-flex:1;flex:1;z-index:3;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-time-picker-scrollbar-width);width:100%;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-ms-overflow-style:none;}.TimePicker_styles_dnulzj_s15lrh1g__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerColumnActive__498f1c5c{border:0.125rem solid var(--plasma-time-picker-item-hover-background);border-radius:var(--plasma-time-picker-item-border-radius);}.TimePicker_styles_dnulzj_s15lrh1g__498f1c5c::-webkit-scrollbar{display:none;width:0;}
-.TimePicker_styles_dnulzj_c18qymw0__498f1c5c{position:absolute;top:var(--plasma-time-picker-scrollbar-margin);right:0;bottom:var(--plasma-time-picker-scrollbar-margin);width:var(--plasma-time-picker-scrollbar-width);opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;pointer-events:none;z-index:10;overflow:hidden;}.TimePicker_styles_dnulzj_c18qymw0__498f1c5c.TimePicker_styles_dnulzj_plasmaTimePickerScrollbarVisible__498f1c5c{opacity:1;pointer-events:auto;}
-.TimePicker_styles_dnulzj_s1wgh6jw__498f1c5c{position:relative;width:100%;height:100%;background:var(--plasma-time-picker-scrollbar-track-color);border-radius:var(--plasma-time-picker-scrollbar-width);}
-.TimePicker_styles_dnulzj_s1qrdw7l__498f1c5c{position:absolute;top:0;left:0;width:100%;background:var(--plasma-time-picker-scrollbar-color);border-radius:var(--plasma-time-picker-scrollbar-width);cursor:pointer;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}.TimePicker_styles_dnulzj_s1qrdw7l__498f1c5c:hover{background:var(--plasma-time-picker-scrollbar-color);}.TimePicker_styles_dnulzj_s1qrdw7l__498f1c5c:active{background:var(--plasma-time-picker-scrollbar-track-color);}
-.TimePicker_styles_dnulzj_sa62th__498f1c5c{width:100%;height:0%.125rem;}
+.TimePicker_styles_ar3obv_s1ghbm1p__3866631e{width:100%;--plasma-textfield-color:var(--plasma-time-picker-textfield-color);--plasma-textfield__placeholder-color:var(--plasma-time-picker-textfield-placeholder-color);--plasma-textfield__placeholder-color-focus:var(--plasma-timepicker-textfield__placeholder-color-focus);--plasma-textfield__caret-color:var(--plasma-time-picker-textfield-caret-color);--plasma-textfield-focus-color:var(--plasma-time-picker-textfield-focus-color);--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-focus);--plasma-textfield-border-color:var(--plasma-time-picker_range-border-color);--plasma-textfield-border-color-hover:var(--plasma-time-picker_range-border-color-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker_range-border-color-focus);--plasma-textfield-box-shadow:var(--plasma-time-picker-textfield-box-shadow);--plasma-textfield-color-readonly:var(--plasma-time-picker-textfield-color-readonly);--plasma-textfield-bg-color-readonly:var(--plasma-time-picker-textfield-background-color-readonly);--plasma-textfield-border-color-readonly:var(--plasma-time-picker-textfield-border-color-readonly);--plasma-textfield__placeholder-color-readonly:var(--plasma-time-picker-textfield-placeholder-color-readonly);--plasma-textfield-height:var(--plasma-time-picker-textfield-height);--plasma-textfield-border-width:var(--plasma-time-picker-textfield-border-width);--plasma-textfield-border-radius:var(--plasma-time-picker-textfield-border-radius);--plasma-textfield-padding:var(--plasma-time-picker-textfield-padding);--plasma-textfield-placement_inner__label-padding:var(--plasma-time-picker-placement_inner__label-padding);--plasma-textfield-placement_inner__content-padding:var(--plasma-time-picker-placement_inner__content-padding);--plasma-textfield__label-offset:var(--plasma-time-picker__label-offset);--plasma-textfield__label-font-family:var(--plasma-time-picker__label-font-family);--plasma-textfield__label-font-style:var(--plasma-time-picker__label-font-style);--plasma-textfield__label-font-size:var(--plasma-time-picker__label-font-size);--plasma-textfield__label-font-weight:var(--plasma-time-picker__label-font-weight);--plasma-textfield__label-letter-spacing:var(--plasma-time-picker__label-letter-spacing);--plasma-textfield__label-line-height:var(--plasma-time-picker__label-line-height);--plasma-textfield-placement_inner__label-font-family:var(--plasma-time-picker-placement_inner__label-font-family);--plasma-textfield-placement_inner__label-font-size:var(--plasma-time-picker-placement_inner__label-font-size);--plasma-textfield-placement_inner__label-font-style:var(--plasma-time-picker-placement_inner__label-font-style);--plasma-textfield-placement_inner__label-font-weight:var(--plasma-time-picker-placement_inner__label-font-weight);--plasma-textfield-placement_inner__label-letter-spacing:var(--plasma-time-picker-placement_inner__label-letter-spacing);--plasma-textfield-placement_inner__label-line-height:var(--plasma-time-picker-placement_inner__label-line-height);--plasma-textfield__label-color-readonly:var(--plasma-time-picker__label-color-readonly);--plasma-textfield__indicator-color:var(--plasma-time-picker__indicator-color);--plasma-textfield__indicator-size-inner:var(--plasma-time-picker__indicator-size);--plasma-textfield__indicator-size-outer:var(--plasma-time-picker__indicator-size-outer);--plasma-textfield__indicator-placement-inner:var(--plasma-time-picker__indicator-placement);--plasma-textfield__indicator-placement-outer:var(--plasma-time-picker__indicator-placement-outer);--plasma-textfield__indicator-placement-inner-right:var(--plasma-time-picker__indicator-placement-right);--plasma-textfield__indicator-placement-outer-right:var(--plasma-time-picker__indicator-placement-outer-right);--plasma-textfield__left-content-margin:var(--plasma-time-picker-textfield__left-content-margin);--plasma-textfield__right-content-margin:var(--plasma-time-picker-textfield__right-content-margin);--plasma-textfield-font-family:var(--plasma-time-picker-textfield-font-family);--plasma-textfield-font-size:var(--plasma-time-picker-textfield-font-size);--plasma-textfield-font-style:var(--plasma-time-picker-textfield-font-style);--plasma-textfield-font-weight:var(--plasma-time-picker-textfield-font-weight);--plasma-textfield-letter-spacing:var(--plasma-time-picker-textfield-letter-spacing);--plasma-textfield-line-height:var(--plasma-time-picker-textfield-line-height);--plasma-textfield-disabled-opacity:var(--plasma-time-picker-disabled-opacity);--plasma-textfield__before-text-color:var(--plasma-time-picker-textfield__before-text-color);--plasma-textfield__after-text-color:var(--plasma-time-picker-textfield__after-text-color);--plasma-textfield__before-text-margin:var(--plasma-time-picker-textfield__before-text-margin);--plasma-textfield__after-text-margin:var(--plasma-time-picker-textfield__after-text-margin);--plasma-textfield-content-slot-color:var(--plasma-time-picker-textfield__content-color,var(--plasma-time-picker-textfield-color));--plasma-textfield-content-right-slot-color:var(--plasma-time-picker-textfield__content-right-color,var(--plasma-textfield-content-slot-color));--plasma-textfield-content-right-slot-color-hover:var(--plasma-time-picker-textfield__content-right-color-hover,var(--plasma-textfield-content-right-slot-color));}.TimePicker_styles_ar3obv_s1ghbm1p__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerError__3866631e{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-error);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-error-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-error-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-error);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-error-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-error-focus);}.TimePicker_styles_ar3obv_s1ghbm1p__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerSuccess__3866631e{--plasma-textfield-bg-color:var(--plasma-time-picker-textfield-background-color-success);--plasma-textfield-bg-color-hover:var(--plasma-time-picker-textfield-background-color-success-hover);--plasma-textfield-bg-color-focus:var(--plasma-time-picker-textfield-background-color-success-focus);--plasma-textfield-border-color:var(--plasma-time-picker-textfield-border-color-success);--plasma-textfield-border-color-hover:var(--plasma-time-picker-textfield-border-color-success-hover);--plasma-textfield-border-color-focus:var(--plasma-time-picker-textfield-border-color-success-focus);}
+.TimePicker_styles_ar3obv_b19h9m1x__3866631e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:var(--plasma-time-picker-width);margin-top:var(--plasma-time-picker-dropdown-margin-top);}.TimePicker_styles_ar3obv_b19h9m1x__3866631e .TimePicker_styles_ar3obv_popoverWrapper__3866631e,.TimePicker_styles_ar3obv_b19h9m1x__3866631e .TimePicker_styles_ar3obv_popoverTarget__3866631e{width:inherit;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerStretched__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerStretched__3866631e .TimePicker_styles_ar3obv_popoverRoot__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerFullWidth__3866631e{width:100%;}.TimePicker_styles_ar3obv_b19h9m1x__3866631e.TimePicker_styles_ar3obv_plasmaTimePickerPlacementRight__3866631e{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}
+.TimePicker_styles_ar3obv_slnaiay__3866631e{background:var(--plasma-time-picker-ui-background);border-radius:var(--plasma-time-picker-ui-border-radius);width:var(--slnaiay-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:var(--plasma-time-picker-ui-padding);-webkit-flex:1 1 1;-ms-flex:1 1 1;flex:1 1 1;gap:var(--plasma-time-picker-scrollbar-width);box-sizing:border-box;position:relative;}
 
 .base_nyid0i_bxyi89k__8a89f178[disabled]{opacity:var(--plasma-time-picker-disabled-opacity);cursor:not-allowed;}
 
 .base_zalfas_b13m44ib__f47929ae[readonly]{cursor:not-allowed;}
+
+.TimeColumn_styles_juymyb_s1okclyy__820070c4{position:relative;width:100%;}
+.TimeColumn_styles_juymyb_s14v4skc__820070c4{height:var(--plasma-time-picker-item-height);padding:var(--plasma-time-picker-item-padding);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:0.05s;transition:0.05s;border-radius:var(--plasma-time-picker-item-border-radius);cursor:pointer;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;overflow:auto;font-family:var(--plasma-time-picker-item-font-family);font-size:var(--plasma-time-picker-item-font-size);font-style:var(--plasma-time-picker-item-font-style);font-weight:var(--plasma-time-picker-item-font-weight);-webkit-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-moz-letter-spacing:var(--plasma-time-picker-item-letter-spacing);-ms-letter-spacing:var(--plasma-time-picker-item-letter-spacing);letter-spacing:var(--plasma-time-picker-item-letter-spacing);line-height:var(--plasma-time-picker-item-line-height);}.TimeColumn_styles_juymyb_s14v4skc__820070c4:hover{background:var(--plasma-time-picker-item-hover-background);}.TimeColumn_styles_juymyb_s14v4skc__820070c4.TimeColumn_styles_juymyb_plasmaTimePickerItemActive__820070c4{background:var(--plasma-time-picker-item-active-background);}
+.TimeColumn_styles_juymyb_s1mtrybc__820070c4{max-height:var(--s1mtrybc-0);overflow-y:scroll;-webkit-flex:1;-ms-flex:1;flex:1;z-index:3;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--plasma-time-picker-scrollbar-width);width:100%;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;-ms-overflow-style:none;}.TimeColumn_styles_juymyb_s1mtrybc__820070c4.TimeColumn_styles_juymyb_plasmaTimePickerColumnActive__820070c4{border:0.125rem solid var(--plasma-time-picker-item-hover-background);border-radius:var(--plasma-time-picker-item-border-radius);}.TimeColumn_styles_juymyb_s1mtrybc__820070c4::-webkit-scrollbar{display:none;width:0;}
+.TimeColumn_styles_juymyb_c3ksbzv__820070c4{position:absolute;top:var(--plasma-time-picker-scrollbar-margin);right:0;bottom:var(--plasma-time-picker-scrollbar-margin);width:var(--plasma-time-picker-scrollbar-width);opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease;pointer-events:none;z-index:10;overflow:hidden;}.TimeColumn_styles_juymyb_c3ksbzv__820070c4.TimeColumn_styles_juymyb_plasmaTimePickerScrollbarVisible__820070c4{opacity:1;pointer-events:auto;}
+.TimeColumn_styles_juymyb_s13lzs6z__820070c4{position:relative;width:100%;height:100%;background:var(--plasma-time-picker-scrollbar-track-color);border-radius:var(--plasma-time-picker-scrollbar-width);}
+.TimeColumn_styles_juymyb_svmgxvm__820070c4{position:absolute;top:0;left:0;width:100%;background:var(--plasma-time-picker-scrollbar-color);border-radius:var(--plasma-time-picker-scrollbar-width);cursor:pointer;-webkit-transition:background-color 0.2s ease;transition:background-color 0.2s ease;}.TimeColumn_styles_juymyb_svmgxvm__820070c4:hover{background:var(--plasma-time-picker-scrollbar-color);}.TimeColumn_styles_juymyb_svmgxvm__820070c4:active{background:var(--plasma-time-picker-scrollbar-track-color);}
+.TimeColumn_styles_juymyb_s1bw3c91__820070c4{width:100%;height:0%.125rem;}

package/cjs/components/TimePicker/TimePicker.js

@@ -13,6 +13,7 @@ var base = require('./variations/_view/base.js');
 var base$2 = require('./variations/_disabled/base.js');
 var base$3 = require('./variations/_readonly/base.js');
 var useKeyboardNavigation = require('./hooks/useKeyboardNavigation.js');
+var TimeColumn = require('./ui/TimeColumn/TimeColumn.js');
 var getPopoverPlacement = require('../../utils/getPopoverPlacement.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -20,7 +21,6 @@ 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) {
@@ -141,6 +141,7 @@ var timePickerRoot = function timePickerRoot(Root) {
     var hours = index.range(24);
     var minutes = index.range(60);
     var seconds = index.range(60);
+    var minScrollbarTrackHeight = 20;
     var calculateScrollbar = React.useCallback(function (columnRef) {
       if (!columnRef.current) return {
         thumbHeight: 0,
@@ -151,7 +152,7 @@ var timePickerRoot = function timePickerRoot(Root) {
         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 {
@@ -249,35 +250,37 @@ var timePickerRoot = function timePickerRoot(Root) {
       };
     }, []);
     React.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]);
     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
-        });
+      if (!viewValue) {
+        return;
       }
+      var timeString = viewValue;
+      if (format === 'HH:mm' && viewValue.length > 5) {
+        timeString = viewValue.substring(0, 5);
+      }
+      setInnerTime(viewValue);
+      var _timeString$split$map = timeString.split(index.delimiter).map(Number),
+        _timeString$split$map2 = _rollupPluginBabelHelpers.slicedToArray(_timeString$split$map, 3),
+        hh = _timeString$split$map2[0],
+        mm = _timeString$split$map2[1],
+        ss = _timeString$split$map2[2];
+      setActiveTime({
+        hours: !Number.isNaN(hh) ? hh : null,
+        minutes: !Number.isNaN(mm) ? mm : null,
+        seconds: format === 'HH:mm:ss' && !Number.isNaN(ss) ? ss : null,
+        currentColumn: null
+      });
     }, [outerValue, format]);
     React.useEffect(function () {
       if (isInnerOpen && (disabled || readonly)) {
@@ -304,13 +307,7 @@ var timePickerRoot = function timePickerRoot(Root) {
           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);
-            }
+            updateScrollbar(columnRef, setHoursScrollbar);
           }, 300);
         }
       };
@@ -408,7 +405,7 @@ var timePickerRoot = function timePickerRoot(Root) {
     };
     var handleTimeItemClick = function handleTimeItemClick(value, column) {
       var isNextColumn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var currentTime = innerTime.split(':');
+      var currentTime = innerTime.split(index.delimiter);
       var newTime = [];
       if (format === 'HH:mm:ss') {
         newTime = _rollupPluginBabelHelpers.toConsumableArray(currentTime);
@@ -428,10 +425,8 @@ var timePickerRoot = function timePickerRoot(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':
@@ -439,10 +434,8 @@ var timePickerRoot = function timePickerRoot(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':
@@ -457,7 +450,7 @@ var timePickerRoot = function timePickerRoot(Root) {
           }
           break;
       }
-      var newTimeString = newTime.join(':');
+      var newTimeString = newTime.join(index.delimiter);
       setInnerTime(newTimeString);
       var nextColumn = null;
       if (column === 'hours' && isNextColumn) {
@@ -498,12 +491,14 @@ var timePickerRoot = function timePickerRoot(Root) {
           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
-        })
-      }));
+      if (onChange) {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event), {}, {
+          target: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event.target), {}, {
+            value: innerString,
+            timeValues: values
+          })
+        }));
+      }
       requestAnimationFrame(function () {
         if (inputRef.current) {
           inputRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
@@ -523,9 +518,13 @@ var timePickerRoot = function timePickerRoot(Root) {
         onToggle === null || onToggle === 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 (['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key)) {
@@ -566,7 +565,11 @@ var timePickerRoot = function timePickerRoot(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';
+          }
           newIndex = (_activeTime$newColumn2 = activeTime[newColumn]) !== null && _activeTime$newColumn2 !== void 0 ? _activeTime$newColumn2 : 0;
           setActiveTime(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, activeTime), {}, _rollupPluginBabelHelpers.defineProperty({
             currentColumn: newColumn
@@ -583,11 +586,15 @@ var timePickerRoot = function timePickerRoot(Root) {
         handleTimeItemClick(value, column);
       }
     };
+    var handleOnKeyDown = function handleOnKeyDown(e) {
+      onKeyDownNavigation(e);
+      handleKeyDown(e);
+    };
     var _useKeyNavigation = useKeyboardNavigation.useKeyNavigation({
         isCalendarOpen: isInnerOpen,
         format: format,
         maskWithFormat: true,
-        delimiter: ':',
+        delimiter: index.delimiter,
         closeOnEsc: closeOnEsc,
         onToggle: handleToggle
       }),
@@ -605,10 +612,7 @@ var timePickerRoot = function timePickerRoot(Root) {
       textAfter: textAfter,
       onChange: handleInputChange,
       onFocus: onFocus,
-      onKeyDown: function onKeyDown(e) {
-        onKeyDownNavigation(e);
-        handleKeyDown(e);
-      },
+      onKeyDown: handleOnKeyDown,
       required: required,
       requiredPlacement: requiredPlacement,
       hasRequiredIndicator: hasRequiredIndicator,
@@ -616,43 +620,6 @@ var timePickerRoot = function timePickerRoot(Root) {
       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,
@@ -685,7 +652,52 @@ var timePickerRoot = function timePickerRoot(Root) {
       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)))));
+    }, TimeColumn.renderTimeColumn({
+      values: hours,
+      dropdownHeight: dropdownHeight,
+      column: 'hours',
+      columnRef: hoursColumnRef,
+      scrollbarState: hoursScrollbar,
+      setScrollbar: setHoursScrollbar,
+      scrollbarRef: hoursScrollbarRef,
+      thumbRef: hoursThumbRef,
+      timeoutRef: hoursHideTimeoutRef,
+      timeItemRefs: timeItemRefs,
+      activeTime: activeTime,
+      handleTimeItemClick: handleTimeItemClick,
+      handleTimeItemKeyDown: handleTimeItemKeyDown,
+      createScrollbarDragHandler: createScrollbarDragHandler
+    }), TimeColumn.renderTimeColumn({
+      values: minutes,
+      dropdownHeight: dropdownHeight,
+      column: 'minutes',
+      columnRef: minutesColumnRef,
+      scrollbarState: minutesScrollbar,
+      setScrollbar: setMinutesScrollbar,
+      scrollbarRef: minutesScrollbarRef,
+      thumbRef: minutesThumbRef,
+      timeoutRef: minutesHideTimeoutRef,
+      timeItemRefs: timeItemRefs,
+      activeTime: activeTime,
+      handleTimeItemClick: handleTimeItemClick,
+      handleTimeItemKeyDown: handleTimeItemKeyDown,
+      createScrollbarDragHandler: createScrollbarDragHandler
+    }), columnsQuantity === 3 && TimeColumn.renderTimeColumn({
+      values: seconds,
+      dropdownHeight: dropdownHeight,
+      column: 'seconds',
+      columnRef: secondsColumnRef,
+      scrollbarState: secondsScrollbar,
+      setScrollbar: setSecondsScrollbar,
+      scrollbarRef: secondsScrollbarRef,
+      thumbRef: secondsThumbRef,
+      timeoutRef: secondsHideTimeoutRef,
+      timeItemRefs: timeItemRefs,
+      activeTime: activeTime,
+      handleTimeItemClick: handleTimeItemClick,
+      handleTimeItemKeyDown: handleTimeItemKeyDown,
+      createScrollbarDragHandler: createScrollbarDragHandler
+    })))));
   });
 };
 var timePickerConfig = {