@salutejs/plasma-new-hope 0.340.0-canary.2316.18997801446.0 → 0.340.0-canary.2317.19095667430.0

package/emotion/es/components/TimePickerGrid/TimePickerGrid.js

@@ -158,7 +158,6 @@ export var timePickerGridRoot = function(Root) {
             "disabledValues",
             "onChange"
         ]);
-        var _Object_values_;
         var actualFormat = format || (columnsQuantity === 3 ? 'HH:mm:ss' : 'HH:mm');
         var columnsConfig = useMemo(function() {
             return getColumnsFromFormat(actualFormat);
@@ -169,7 +168,6 @@ export var timePickerGridRoot = function(Root) {
         var minutesColumnRef = useRef(null);
         var secondsColumnRef = useRef(null);
         var timeItemRefs = useRef({});
-        var itemHeight = ((_Object_values_ = Object.values(timeItemRefs.current)[0]) === null || _Object_values_ === void 0 ? void 0 : _Object_values_.offsetHeight) || 0;
         var hoursScrollbarRef = useRef(null);
         var minutesScrollbarRef = useRef(null);
         var secondsScrollbarRef = useRef(null);
@@ -180,44 +178,48 @@ export var timePickerGridRoot = function(Root) {
         var minutesHideTimeoutRef = useRef(null);
         var secondsHideTimeoutRef = useRef(null);
         var _useState = _sliced_to_array(useState(outerValue || ''), 2), innerTime = _useState[0], setInnerTime = _useState[1];
-        // const [itemHeight, setItemHeight] = useState(0);
-        var _useState1 = _sliced_to_array(useState(0), 2), gap = _useState1[0], setGap = _useState1[1];
-        var _useState2 = _sliced_to_array(useState({
+        var _useState1 = _sliced_to_array(useState({
+            hours: null,
+            minutes: null,
+            seconds: null,
+            currentColumn: null
+        }), 2), activeTime = _useState1[0], setActiveTime = _useState1[1];
+        var _useState2 = _sliced_to_array(useState(0), 2), itemHeight = _useState2[0], setItemHeight = _useState2[1];
+        var _useState3 = _sliced_to_array(useState(0), 2), gap = _useState3[0], setGap = _useState3[1];
+        var _useState4 = _sliced_to_array(useState({
             isVisible: false,
             thumbHeight: 0,
             thumbPosition: 0,
             isDragging: false
-        }), 2), hoursScrollbar = _useState2[0], setHoursScrollbar = _useState2[1];
-        var _useState3 = _sliced_to_array(useState({
+        }), 2), hoursScrollbar = _useState4[0], setHoursScrollbar = _useState4[1];
+        var _useState5 = _sliced_to_array(useState({
             isVisible: false,
             thumbHeight: 0,
             thumbPosition: 0,
             isDragging: false
-        }), 2), minutesScrollbar = _useState3[0], setMinutesScrollbar = _useState3[1];
-        var _useState4 = _sliced_to_array(useState({
+        }), 2), minutesScrollbar = _useState5[0], setMinutesScrollbar = _useState5[1];
+        var _useState6 = _sliced_to_array(useState({
             isVisible: false,
             thumbHeight: 0,
             thumbPosition: 0,
             isDragging: false
-        }), 2), secondsScrollbar = _useState4[0], setSecondsScrollbar = _useState4[1];
+        }), 2), secondsScrollbar = _useState6[0], setSecondsScrollbar = _useState6[1];
         var viewValue = outerValue !== null && outerValue !== void 0 ? outerValue : innerTime;
-        var getActiveTime = function() {
-            if (viewValue && columnsConfig.length > 0) {
-                var timeValues = parseTimeString(viewValue, actualFormat);
-                return {
-                    hours: timeValues.hh,
-                    minutes: timeValues.mm,
-                    seconds: timeValues.ss
-                };
+        useEffect(function() {
+            if (activeTime.currentColumn && activeTime[activeTime.currentColumn] !== null) {
+                var _activeTime_activeTime_currentColumn;
+                var column = activeTime.currentColumn;
+                var value = (_activeTime_activeTime_currentColumn = activeTime[activeTime.currentColumn]) === null || _activeTime_activeTime_currentColumn === void 0 ? void 0 : _activeTime_activeTime_currentColumn.toString().padStart(2, '0');
+                var element = timeItemRefs.current["".concat(column, "-").concat(value)];
+                setTimeout(function() {
+                    if (element) {
+                        element.focus();
+                    }
+                }, 0);
             }
-            return {
-                hours: null,
-                minutes: null,
-                seconds: null
-            };
-        };
-        var activeTime = getActiveTime();
-        var _useState5 = _sliced_to_array(useState(null), 2), currentColumn = _useState5[0], setCurrentColumn = _useState5[1];
+        }, [
+            activeTime
+        ]);
         var getDisabledValuesForColumn = useCallback(function(columnType) {
             var disabledFromProps;
             if (columnType === 'hours') {
@@ -381,19 +383,166 @@ export var timePickerGridRoot = function(Root) {
         }, [
             showScrollbarWithDelay
         ]);
+        useEffect(function() {
+            if (viewValue && columnsConfig.length > 0) {
+                var timeValues = parseTimeString(viewValue, actualFormat);
+                setActiveTime(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), {
+                        hours: timeValues.hh,
+                        minutes: timeValues.mm,
+                        seconds: timeValues.ss
+                    });
+                });
+            }
+        }, [
+            viewValue,
+            columnsConfig,
+            actualFormat
+        ]);
         var handleContainerFocus = useCallback(function() {
-            if (currentColumn === null && columnsConfig.length > 0) {
+            if (activeTime.currentColumn === null && columnsConfig.length > 0) {
                 var firstColumn = columnsConfig[0].type;
-                setCurrentColumn(function(prev) {
-                    return prev !== currentColumn ? firstColumn : currentColumn;
+                setActiveTime(function(prev) {
+                    return _object_spread_props(_object_spread({}, prev), {
+                        currentColumn: firstColumn
+                    });
                 });
             }
         }, [
-            currentColumn,
+            activeTime.currentColumn,
             columnsConfig
         ]);
+        useEffect(function() {
+            return function() {
+                [
+                    hoursHideTimeoutRef,
+                    minutesHideTimeoutRef,
+                    secondsHideTimeoutRef
+                ].forEach(function(timeoutRef) {
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                    }
+                });
+            };
+        }, []);
+        useEffect(function() {
+            if (Object.keys(timeItemRefs.current).length > 0) {
+                var firstItem = Object.values(timeItemRefs.current)[0];
+                if (firstItem) {
+                    setItemHeight(firstItem.offsetHeight);
+                }
+            }
+            if (hoursColumnRef.current) {
+                var computedStyle = getComputedStyle(hoursColumnRef.current);
+                var gapValue = parseFloat(computedStyle.gap || '0');
+                setGap(gapValue);
+            }
+        }, [
+            outerValue
+        ]);
+        useEffect(function() {
+            setTimeout(function() {
+                updateScrollbar(hoursColumnRef, setHoursScrollbar);
+                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
+                if (columnsQuantity === 3) {
+                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
+                }
+            }, 100);
+        }, [
+            columnsQuantity,
+            updateScrollbar
+        ]);
+        useEffect(function() {
+            if (itemHeight === 0) return;
+            var scrollToActiveItem = function(columnRef, index) {
+                if (columnRef.current && index !== null) {
+                    var scrollPosition = index * (itemHeight + gap);
+                    animateScrollTo(columnRef.current, scrollPosition);
+                    setTimeout(function() {
+                        updateScrollbar(columnRef, setHoursScrollbar);
+                    }, 300);
+                }
+            };
+            scrollToActiveItem(hoursColumnRef, activeTime.hours);
+            scrollToActiveItem(minutesColumnRef, activeTime.minutes);
+            scrollToActiveItem(secondsColumnRef, activeTime.seconds);
+        }, [
+            activeTime,
+            itemHeight,
+            gap,
+            updateScrollbar
+        ]);
+        useEffect(function() {
+            var hoursColumn = hoursColumnRef.current;
+            var minutesColumn = minutesColumnRef.current;
+            var secondsColumn = secondsColumnRef.current;
+            var handleHoursScroll = function() {
+                return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
+            };
+            var handleMinutesScroll = function() {
+                return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
+            };
+            var handleSecondsScroll = function() {
+                return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
+            };
+            if (hoursColumn) {
+                hoursColumn.addEventListener('scroll', handleHoursScroll);
+            }
+            if (minutesColumn) {
+                minutesColumn.addEventListener('scroll', handleMinutesScroll);
+            }
+            if (secondsColumn) {
+                secondsColumn.addEventListener('scroll', handleSecondsScroll);
+            }
+            return function() {
+                if (hoursColumn) {
+                    hoursColumn.removeEventListener('scroll', handleHoursScroll);
+                }
+                if (minutesColumn) {
+                    minutesColumn.removeEventListener('scroll', handleMinutesScroll);
+                }
+                if (secondsColumn) {
+                    secondsColumn.removeEventListener('scroll', handleSecondsScroll);
+                }
+            };
+        }, []);
+        useEffect(function() {
+            var hoursColumn = hoursColumnRef.current;
+            var minutesColumn = minutesColumnRef.current;
+            var secondsColumn = secondsColumnRef.current;
+            var handleHoursMouseEnter = function() {
+                return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
+            };
+            var handleMinutesMouseEnter = function() {
+                return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
+            };
+            var handleSecondsMouseEnter = function() {
+                return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
+            };
+            if (hoursColumn) {
+                hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
+            }
+            if (minutesColumn) {
+                minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
+            }
+            if (secondsColumn) {
+                secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
+            }
+            return function() {
+                if (hoursColumn) {
+                    hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
+                }
+                if (minutesColumn) {
+                    minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
+                }
+                if (secondsColumn) {
+                    secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
+                }
+            };
+        }, []);
         var handleTimeItemClick = function(value, column) {
-            var currentTimeValues = parseTimeString(viewValue, actualFormat);
+            var isNextColumn = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : true;
+            var currentTimeValues = parseTimeString(innerTime, actualFormat);
             var newTimeValues = _object_spread({}, currentTimeValues);
             switch(column){
                 case 'hours':
@@ -432,6 +581,20 @@ export var timePickerGridRoot = function(Root) {
             }
             var newTimeString = buildTimeString(newTimeValues, actualFormat);
             setInnerTime(newTimeString);
+            var nextColumn = null;
+            var currentIndex = columnsConfig.findIndex(function(col) {
+                return col.type === column;
+            });
+            if (currentIndex !== -1 && isNextColumn && currentIndex < columnsConfig.length - 1) {
+                nextColumn = columnsConfig[currentIndex + 1].type;
+            }
+            var newActiveTime = {
+                hours: newTimeValues.hh,
+                minutes: newTimeValues.mm,
+                seconds: newTimeValues.ss,
+                currentColumn: nextColumn || column
+            };
+            setActiveTime(newActiveTime);
             onChange === null || onChange === void 0 ? void 0 : onChange({
                 value: newTimeString,
                 timeValues: {
@@ -446,6 +609,9 @@ export var timePickerGridRoot = function(Root) {
             var currentIndex = parseInt(value, 10);
             var newIndex = null;
             var newColumn = column;
+            var currentIndexInColumns = columnsConfig.findIndex(function(col) {
+                return col.type === column;
+            });
             switch(event.key){
                 case 'ArrowUp':
                     event.preventDefault();
@@ -460,12 +626,7 @@ export var timePickerGridRoot = function(Root) {
                     }), disabledValuesForColumn, 'up');
                     if (newIndex !== null) {
                         var newValue = newIndex.toString().padStart(2, '0');
-                        var element = timeItemRefs.current["".concat(column, "-").concat(newValue)];
-                        setTimeout(function() {
-                            if (element) {
-                                element.focus();
-                            }
-                        }, 0);
+                        handleTimeItemClick(newValue, column, false);
                     }
                     break;
                 case 'ArrowDown':
@@ -481,12 +642,7 @@ export var timePickerGridRoot = function(Root) {
                     }), disabledValuesForColumn, 'down');
                     if (newIndex !== null) {
                         var newValue1 = newIndex.toString().padStart(2, '0');
-                        var element1 = timeItemRefs.current["".concat(column, "-").concat(newValue1)];
-                        setTimeout(function() {
-                            if (element1) {
-                                element1.focus();
-                            }
-                        }, 0);
+                        handleTimeItemClick(newValue1, column, false);
                     }
                     break;
                 case 'ArrowRight':
@@ -497,15 +653,11 @@ export var timePickerGridRoot = function(Root) {
                         newColumn = 'seconds';
                     }
                     if (newColumn !== column) {
-                        var _activeTime_column;
-                        setCurrentColumn(newColumn);
-                        var newValue2 = (((_activeTime_column = activeTime[column]) === null || _activeTime_column === void 0 ? void 0 : _activeTime_column.toString()) || '0').padStart(2, '0');
-                        var element2 = timeItemRefs.current["".concat(newColumn, "-").concat(newValue2)];
-                        setTimeout(function() {
-                            if (element2) {
-                                element2.focus();
-                            }
-                        }, 0);
+                        setActiveTime(function(prev) {
+                            return _object_spread_props(_object_spread({}, prev), {
+                                currentColumn: newColumn
+                            });
+                        });
                     }
                     break;
                 case 'ArrowLeft':
@@ -516,15 +668,11 @@ export var timePickerGridRoot = function(Root) {
                         newColumn = 'minutes';
                     }
                     if (newColumn !== column) {
-                        var _activeTime_column1;
-                        setCurrentColumn(newColumn);
-                        var newValue3 = (((_activeTime_column1 = activeTime[column]) === null || _activeTime_column1 === void 0 ? void 0 : _activeTime_column1.toString()) || '0').padStart(2, '0');
-                        var element3 = timeItemRefs.current["".concat(newColumn, "-").concat(newValue3)];
-                        setTimeout(function() {
-                            if (element3) {
-                                element3.focus();
-                            }
-                        }, 0);
+                        setActiveTime(function(prev) {
+                            return _object_spread_props(_object_spread({}, prev), {
+                                currentColumn: newColumn
+                            });
+                        });
                     }
                     break;
                 case 'Enter':
@@ -539,13 +687,7 @@ export var timePickerGridRoot = function(Root) {
                         newIndex++;
                     }
                     if (newIndex < (column === 'hours' ? 24 : 60)) {
-                        var newValue4 = newIndex.toString().padStart(2, '0');
-                        var element4 = timeItemRefs.current["".concat(column, "-").concat(newValue4)];
-                        setTimeout(function() {
-                            if (element4) {
-                                element4.focus();
-                            }
-                        }, 0);
+                        handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
                     }
                     break;
                 case 'End':
@@ -555,156 +697,83 @@ export var timePickerGridRoot = function(Root) {
                         newIndex--;
                     }
                     if (newIndex >= 0) {
-                        var newValue5 = newIndex.toString().padStart(2, '0');
-                        var element5 = timeItemRefs.current["".concat(column, "-").concat(newValue5)];
-                        setTimeout(function() {
-                            if (element5) {
-                                element5.focus();
-                            }
-                        }, 0);
+                        handleTimeItemClick(newIndex.toString().padStart(2, '0'), column, false);
                     }
                     break;
-                default:
-                    break;
-            }
-        };
-        useEffect(function() {
-            if (currentColumn && currentColumn !== null) {
-                var _activeTime_currentColumn;
-                var column = currentColumn;
-                var value = (_activeTime_currentColumn = activeTime[currentColumn]) === null || _activeTime_currentColumn === void 0 ? void 0 : _activeTime_currentColumn.toString().padStart(2, '0');
-                var element = timeItemRefs.current["".concat(column, "-").concat(value)];
-                setTimeout(function() {
-                    if (element) {
-                        element.focus();
+                case 'Tab':
+                    if (currentIndexInColumns === columnsConfig.length - 1) {
+                        break;
                     }
-                }, 0);
-            }
-        }, [
-            currentColumn
-        ]);
-        useEffect(function() {
-            return function() {
-                [
-                    hoursHideTimeoutRef,
-                    minutesHideTimeoutRef,
-                    secondsHideTimeoutRef
-                ].forEach(function(timeoutRef) {
-                    if (timeoutRef.current) {
-                        clearTimeout(timeoutRef.current);
+                    event.preventDefault();
+                    if (event.shiftKey) {
+                        if (column === 'minutes') {
+                            newColumn = 'hours';
+                        } else if (column === 'seconds') {
+                            newColumn = 'minutes';
+                        }
+                    } else if (column === 'hours') {
+                        newColumn = 'minutes';
+                    } else if (column === 'minutes' && actualFormat.includes('ss')) {
+                        newColumn = 'seconds';
+                    }
+                    if (newColumn !== column) {
+                        setActiveTime(function(prev) {
+                            return _object_spread_props(_object_spread({}, prev), {
+                                currentColumn: newColumn
+                            });
+                        });
+                    }
+                    break;
+                default:
+                    if (/^[0-9]$/.test(event.key)) {
+                        event.preventDefault();
+                        var inputNumber = parseInt(event.key, 10);
+                        if (column === 'hours') {
+                            if (inputNumber <= 2) {
+                                var tens = inputNumber;
+                                var handleSecondInput = function(e) {
+                                    if (/^[0-9]$/.test(e.key)) {
+                                        var units = parseInt(e.key, 10);
+                                        var total = tens * 10 + units;
+                                        if (total < 24 && !disabledValuesForColumn.includes(total)) {
+                                            handleTimeItemClick(total.toString().padStart(2, '0'), column);
+                                        }
+                                        document.removeEventListener('keydown', handleSecondInput);
+                                    }
+                                };
+                                document.addEventListener('keydown', handleSecondInput);
+                                setTimeout(function() {
+                                    document.removeEventListener('keydown', handleSecondInput);
+                                }, 1000);
+                            } else if (inputNumber <= 9) {
+                                if (!disabledValuesForColumn.includes(inputNumber)) {
+                                    handleTimeItemClick(inputNumber.toString().padStart(2, '0'), column);
+                                }
+                            }
+                        } else if (inputNumber <= 5) {
+                            var tens1 = inputNumber;
+                            var handleSecondInput1 = function(e) {
+                                if (/^[0-9]$/.test(e.key)) {
+                                    var units = parseInt(e.key, 10);
+                                    var total = tens1 * 10 + units;
+                                    if (total < 60 && !disabledValuesForColumn.includes(total)) {
+                                        handleTimeItemClick(total.toString().padStart(2, '0'), column);
+                                    }
+                                    document.removeEventListener('keydown', handleSecondInput1);
+                                }
+                            };
+                            document.addEventListener('keydown', handleSecondInput1);
+                            setTimeout(function() {
+                                document.removeEventListener('keydown', handleSecondInput1);
+                            }, 1000);
+                        } else if (inputNumber <= 9) {
+                            if (!disabledValuesForColumn.includes(inputNumber)) {
+                                handleTimeItemClick(inputNumber.toString().padStart(2, '0'), column);
+                            }
+                        }
                     }
-                });
-            };
-        }, []);
-        useEffect(function() {
-            if (hoursColumnRef.current) {
-                var computedStyle = getComputedStyle(hoursColumnRef.current);
-                var gapValue = parseFloat(computedStyle.gap || '0');
-                setGap(gapValue);
-            }
-        }, [
-            hoursColumnRef.current
-        ]);
-        useEffect(function() {
-            setTimeout(function() {
-                updateScrollbar(hoursColumnRef, setHoursScrollbar);
-                updateScrollbar(minutesColumnRef, setMinutesScrollbar);
-                if (columnsQuantity === 3) {
-                    updateScrollbar(secondsColumnRef, setSecondsScrollbar);
-                }
-            }, 100);
-        }, [
-            columnsQuantity
-        ]);
-        useEffect(function() {
-            if (itemHeight === 0) return;
-            var scrollToActiveItem = function(columnRef, index) {
-                if (columnRef.current && index !== null) {
-                    var scrollPosition = index * (itemHeight + gap);
-                    animateScrollTo(columnRef.current, scrollPosition);
-                    setTimeout(function() {
-                        updateScrollbar(columnRef, setHoursScrollbar);
-                    }, 300);
-                }
-            };
-            scrollToActiveItem(hoursColumnRef, activeTime.hours);
-            scrollToActiveItem(minutesColumnRef, activeTime.minutes);
-            scrollToActiveItem(secondsColumnRef, activeTime.seconds);
-        }, [
-            activeTime.hours,
-            activeTime.minutes,
-            activeTime.seconds,
-            itemHeight,
-            gap
-        ]);
-        useEffect(function() {
-            var hoursColumn = hoursColumnRef.current;
-            var minutesColumn = minutesColumnRef.current;
-            var secondsColumn = secondsColumnRef.current;
-            var handleHoursScroll = function() {
-                return handleColumnScroll(hoursColumnRef, setHoursScrollbar, hoursHideTimeoutRef);
-            };
-            var handleMinutesScroll = function() {
-                return handleColumnScroll(minutesColumnRef, setMinutesScrollbar, minutesHideTimeoutRef);
-            };
-            var handleSecondsScroll = function() {
-                return handleColumnScroll(secondsColumnRef, setSecondsScrollbar, secondsHideTimeoutRef);
-            };
-            if (hoursColumn) {
-                hoursColumn.addEventListener('scroll', handleHoursScroll);
-            }
-            if (minutesColumn) {
-                minutesColumn.addEventListener('scroll', handleMinutesScroll);
-            }
-            if (secondsColumn) {
-                secondsColumn.addEventListener('scroll', handleSecondsScroll);
-            }
-            return function() {
-                if (hoursColumn) {
-                    hoursColumn.removeEventListener('scroll', handleHoursScroll);
-                }
-                if (minutesColumn) {
-                    minutesColumn.removeEventListener('scroll', handleMinutesScroll);
-                }
-                if (secondsColumn) {
-                    secondsColumn.removeEventListener('scroll', handleSecondsScroll);
-                }
-            };
-        }, []);
-        useEffect(function() {
-            var hoursColumn = hoursColumnRef.current;
-            var minutesColumn = minutesColumnRef.current;
-            var secondsColumn = secondsColumnRef.current;
-            var handleHoursMouseEnter = function() {
-                return showScrollbarWithDelay(setHoursScrollbar, hoursHideTimeoutRef, hoursColumnRef);
-            };
-            var handleMinutesMouseEnter = function() {
-                return showScrollbarWithDelay(setMinutesScrollbar, minutesHideTimeoutRef, minutesColumnRef);
-            };
-            var handleSecondsMouseEnter = function() {
-                return showScrollbarWithDelay(setSecondsScrollbar, secondsHideTimeoutRef, secondsColumnRef);
-            };
-            if (hoursColumn) {
-                hoursColumn.addEventListener('mouseenter', handleHoursMouseEnter);
-            }
-            if (minutesColumn) {
-                minutesColumn.addEventListener('mouseenter', handleMinutesMouseEnter);
-            }
-            if (secondsColumn) {
-                secondsColumn.addEventListener('mouseenter', handleSecondsMouseEnter);
             }
-            return function() {
-                if (hoursColumn) {
-                    hoursColumn.removeEventListener('mouseenter', handleHoursMouseEnter);
-                }
-                if (minutesColumn) {
-                    minutesColumn.removeEventListener('mouseenter', handleMinutesMouseEnter);
-                }
-                if (secondsColumn) {
-                    secondsColumn.removeEventListener('mouseenter', handleSecondsMouseEnter);
-                }
-            };
-        }, []);
+        };
         return /*#__PURE__*/ React.createElement(Root, _object_spread({
             ref: ref,
             view: view,
@@ -756,7 +825,6 @@ export var timePickerGridRoot = function(Root) {
                 dropdownHeight: dropdownHeight,
                 column: type,
                 activeTime: activeTime,
-                currentColumn: currentColumn,
                 handleTimeItemClick: handleTimeItemClick,
                 handleTimeItemKeyDown: handleTimeItemKeyDown,
                 createScrollbarDragHandler: createScrollbarDragHandler,

package/emotion/es/components/TimePickerGrid/ui/TimeColumn/TimeColumn.js

@@ -16,7 +16,7 @@ import cls from "classnames";
 import { classes } from "../../TimePickerGrid.tokens";
 import { StyledTimeColumn, StyledTimeItem, StyledEmpty, CustomScrollbar, ScrollbarTrack, ScrollbarThumb, StyledRoot } from "./TimeColumn.styles";
 export var renderTimeColumn = function(param) {
-    var values = param.values, disabledValues = param.disabledValues, dropdownHeight = param.dropdownHeight, column = param.column, activeTime = param.activeTime, currentColumn = param.currentColumn, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler, setScrollbar = param.setScrollbar, columnRef = param.columnRef, scrollbarState = param.scrollbarState, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs;
+    var values = param.values, disabledValues = param.disabledValues, dropdownHeight = param.dropdownHeight, column = param.column, activeTime = param.activeTime, handleTimeItemClick = param.handleTimeItemClick, handleTimeItemKeyDown = param.handleTimeItemKeyDown, createScrollbarDragHandler = param.createScrollbarDragHandler, setScrollbar = param.setScrollbar, columnRef = param.columnRef, scrollbarState = param.scrollbarState, scrollbarRef = param.scrollbarRef, thumbRef = param.thumbRef, timeoutRef = param.timeoutRef, timeItemRefs = param.timeItemRefs;
     var handleKeyDown = function(e, columnType, value) {
         handleTimeItemKeyDown(e, columnType, value);
     };
@@ -43,7 +43,7 @@ export var renderTimeColumn = function(param) {
         }
         return 0;
     };
-    var isColumnActive = currentColumn === column;
+    var isColumnActive = activeTime.currentColumn === column;
     var minAvailableIndex = minDisableIndex();
     return /*#__PURE__*/ React.createElement(StyledRoot, null, /*#__PURE__*/ React.createElement(StyledTimeColumn, {
         key: column,

package/emotion/es/examples/components/Combobox/Combobox.js

@@ -0,0 +1,7 @@
+import { component, mergeConfig } from "../../../engines";
+import { comboboxNewConfig } from "../../..";
+import { config } from "./Combobox.config";
+var mergedConfig = mergeConfig(comboboxNewConfig, config);
+var ComboboxComponent = component(mergedConfig);
+var Combobox = ComboboxComponent;
+export { Combobox };