@skbkontur/react-ui 6.1.7-1c902.0 → 6.1.7-c386f.0

package/components/TimePicker/TimePicker.js

@@ -37,26 +37,30 @@ import { DIGIT_REGEXP, EMPTY_SEGMENT, EMPTY_VALUE, TimePickerDataTids } from './
 import { commitTimeSegmentOnLeave, deleteTimeSegmentDigit, formatDigitToTimeSegment, shiftTimeSegmentValue, } from './helpers/TimePicker.editing.js';
 import { getTimePickerPopupMaxHeight } from './helpers/TimePicker.layout.js';
 import { getNextTimeSegment, getPreviousTimeSegment } from './helpers/TimePicker.selection.js';
-import { isTimeItem, isTimeItemObject, isTimeMenuItem, timeValueToItem, } from './helpers/TimePicker.shared.js';
+import { isNavigableMenuElement, isTimeItem, isTimeItemObject, isTimeMenuItem, timeValueToItem, } from './helpers/TimePicker.shared.js';
 import { dedupeTimeItems, filterTimeItems, getEmptyDisplayValue, getTimeFilterQuery, getTimeValueString, isTimeDisplayEmpty, normalizeTimeValue, parsePastedTimeValue, replaceTimeSegment, resolveTimeItems, } from './helpers/TimePicker.value.js';
 import { validateTimePicker } from './helpers/validateTimePicker.js';
 import { useTimePickerDropdown } from './hooks/useTimePickerDropdown.js';
 import { useTimePickerSelection } from './hooks/useTimePickerSelection.js';
+import { useTimePickerSource } from './hooks/useTimePickerSource.js';
 import { useTimePickerValue } from './hooks/useTimePickerValue.js';
 import { TimePickerLocaleHelper } from './locale/index.js';
 import { getStyles } from './TimePicker.styles.js';
 import { TimePickerMobilePopup } from './TimePickerMobilePopup.js';
 import { TimePickerPopup } from './TimePickerPopup.js';
+/** Пустой список для клавиатуры: не создает новую ссылку на каждый рендер. */
+var EMPTY_MENU_ITEMS = [];
 /** Поле с временем помогает пользователю быстро и удобно указать время в правильном формате.
  * В поле можно ввести время с клавиатуры либо выбрать из выпадающего списка,
  * передав массив или функцию в проп `source`.
  */
 export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (props, ref) {
-    var disabled = props.disabled, _a = props.useMobileNativeTimePicker, useMobileNativeTimePicker = _a === void 0 ? false : _a, _b = props.format, format = _b === void 0 ? 'HH:mm' : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, source = props.source, renderItem = props.renderItem, menuPos = props.menuPos, menuAlign = props.menuAlign, menuWidth = props.menuWidth, minTime = props.minTime, maxTime = props.maxTime, rightIcon = props.rightIcon, suffix = props.suffix, corners = props.corners, value = props.value, valueToItem = props.valueToItem, onValueChange = props.onValueChange, onInputValueChange = props.onInputValueChange, onUnexpectedInput = props.onUnexpectedInput, onFocus = props.onFocus, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, onPaste = props.onPaste, inputProps = __rest(props, ["disabled", "useMobileNativeTimePicker", "format", "size", "source", "renderItem", "menuPos", "menuAlign", "menuWidth", "minTime", "maxTime", "rightIcon", "suffix", "corners", "value", "valueToItem", "onValueChange", "onInputValueChange", "onUnexpectedInput", "onFocus", "onBlur", "onClick", "onKeyDown", "onPaste"]);
+    var _a;
+    var disabled = props.disabled, _b = props.useMobileNativeTimePicker, useMobileNativeTimePicker = _b === void 0 ? false : _b, _c = props.format, format = _c === void 0 ? 'HH:mm' : _c, _d = props.size, size = _d === void 0 ? 'small' : _d, source = props.source, renderItem = props.renderItem, menuPos = props.menuPos, menuAlign = props.menuAlign, menuWidth = props.menuWidth, minTime = props.minTime, maxTime = props.maxTime, rightIcon = props.rightIcon, suffix = props.suffix, corners = props.corners, value = props.value, valueToItem = props.valueToItem, onValueChange = props.onValueChange, onInputValueChange = props.onInputValueChange, onUnexpectedInput = props.onUnexpectedInput, onFocus = props.onFocus, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, onPaste = props.onPaste, inputProps = __rest(props, ["disabled", "useMobileNativeTimePicker", "format", "size", "source", "renderItem", "menuPos", "menuAlign", "menuWidth", "minTime", "maxTime", "rightIcon", "suffix", "corners", "value", "valueToItem", "onValueChange", "onInputValueChange", "onUnexpectedInput", "onFocus", "onBlur", "onClick", "onKeyDown", "onPaste"]);
     var theme = useContext(ThemeContext);
     var styles = useStyles(getStyles);
     var locale = useLocaleForControl('TimePicker', TimePickerLocaleHelper);
-    var _d = useState(false), isInputFocused = _d[0], setIsInputFocused = _d[1];
+    var _e = useState(false), isInputFocused = _e[0], setIsInputFocused = _e[1];
     var inputRef = useRef(null);
     var mobileInputRef = useRef(null);
     var nativeInputRef = useRef(null);
@@ -66,28 +70,30 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     var isMouseDownOnFragmentRef = useRef(false);
     var mouseDownSegmentRef = useRef(null);
     var mobileBlurEventRef = useRef(null);
+    var shouldSkipOpenOnFocusRef = useRef(false);
     var popupIdRef = useRef(TimePickerDataTids.popup + getRandomID());
-    var _e = useState(false), isMobileDevice = _e[0], setIsMobileDevice = _e[1];
-    var _f = useState(false), canUseMobileNativeTimePicker = _f[0], setCanUseMobileNativeTimePicker = _f[1];
+    var _f = useState(false), isMobileDevice = _f[0], setIsMobileDevice = _f[1];
+    var _g = useState(false), canUseMobileNativeTimePicker = _g[0], setCanUseMobileNativeTimePicker = _g[1];
     var isSourceFunction = typeof source === 'function';
-    var sourceItems = useMemo(function () { return (Array.isArray(source) ? source : []); }, [source]);
-    var hasDropdown = isSourceFunction || sourceItems.length > 0;
-    var _g = useState([]), fetchedItems = _g[0], setFetchedItems = _g[1];
-    var _h = useState(null), fetchedItemsQuery = _h[0], setFetchedItemsQuery = _h[1];
-    var _j = useState(false), isLoadingItems = _j[0], setIsLoadingItems = _j[1];
-    var _k = useState(false), isEditedAfterOpen = _k[0], setIsEditedAfterOpen = _k[1];
-    var sourceValueItems = isSourceFunction ? fetchedItems : sourceItems;
+    var hasDropdown = isSourceFunction || (Array.isArray(source) && source.length > 0);
+    var _h = useState(false), isDropdownOpened = _h[0], setIsDropdownOpened = _h[1];
+    var _j = useState(false), isEditedAfterOpen = _j[0], setIsEditedAfterOpen = _j[1];
+    /**
+     * Форма элементов функции-источника: последняя, о которой компонент знает.
+     * Форма запоминается, потому что элементы функции очищаются при закрытии меню,
+     * а коммит значения после закрытия должен отдать наружу элемент той же формы.
+     * Для массива форма всегда считается по текущим элементам — запоминать нечего.
+     */
+    var lastSourceItemShapeRef = useRef(null);
     /**
      * Форма элемента, который компонент собирает для времени без элемента.
      * Повторяет форму элементов источника, а если их нет — форму внешнего `value`,
      * чтобы наружу уходило то же, что пришло внутрь.
+     * Значение читается при коммите, поэтому обновляется в эффекте: так его не меняет отброшенный рендер.
      */
-    var shouldBuildItemAsObject = sourceValueItems.some(function (item) { return isTimeItem(item) && isTimeItemObject(item); }) ||
-        (value !== null && value !== undefined && isTimeItemObject(value));
+    var shouldBuildItemAsObjectRef = useRef(false);
     var valueToItemRef = useRef(valueToItem);
     valueToItemRef.current = valueToItem;
-    var shouldBuildItemAsObjectRef = useRef(shouldBuildItemAsObject);
-    shouldBuildItemAsObjectRef.current = shouldBuildItemAsObject;
     var handleCommitValue = useCallback(function (committedValue, item) {
         var _a, _b;
         if (!onValueChange) {
@@ -100,14 +106,23 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         var nextItem = (_b = item !== null && item !== void 0 ? item : (_a = valueToItemRef.current) === null || _a === void 0 ? void 0 : _a.call(valueToItemRef, committedValue)) !== null && _b !== void 0 ? _b : timeValueToItem(committedValue, shouldBuildItemAsObjectRef.current);
         onValueChange(nextItem, committedValue);
     }, [onValueChange]);
-    var _l = useTimePickerValue({
+    var _k = useTimePickerValue({
         isInputFocused: isInputFocused,
         format: format,
         externalValue: getTimeValueString(value),
+        isValueControlled: value !== undefined,
         onCommitValue: handleCommitValue,
         onInputValueChange: onInputValueChange,
-    }), editingValue = _l.editingValue, editingValueRef = _l.editingValueRef, updateEditingValue = _l.updateEditingValue, commitEditingValue = _l.commitEditingValue, commitValue = _l.commitValue, commitItem = _l.commitItem;
+    }), editingValue = _k.editingValue, editingValueRef = _k.editingValueRef, updateEditingValue = _k.updateEditingValue, commitEditingValue = _k.commitEditingValue, commitValue = _k.commitValue, commitItem = _k.commitItem;
     var filterQuery = isEditedAfterOpen ? getTimeFilterQuery(editingValue, format) : EMPTY_VALUE;
+    var _l = useTimePickerSource({ source: source, format: format, isDropdownOpened: isDropdownOpened, filterQuery: filterQuery }), sourceValueItems = _l.items, fetchedItemsQuery = _l.fetchedQuery, isLoadingItems = _l.isLoading;
+    useEffect(function () {
+        if (!isSourceFunction || sourceValueItems.some(isTimeItem)) {
+            lastSourceItemShapeRef.current = sourceValueItems.some(function (item) { return isTimeItem(item) && isTimeItemObject(item); });
+        }
+        shouldBuildItemAsObjectRef.current =
+            lastSourceItemShapeRef.current === true || (value !== null && value !== undefined && isTimeItemObject(value));
+    }, [isSourceFunction, sourceValueItems, value]);
     var filteredItems = useMemo(function () { return filterTimeItems(dedupeTimeItems(sourceValueItems, format), filterQuery, format); }, [filterQuery, format, sourceValueItems]);
     /**
      * Элементы для отрисовки: время и подпись достаются из элемента,
@@ -131,7 +146,17 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         }
     }
     var canUseMobileDropdownTimePicker = hasDropdown && isMobileDevice && !canUseMobileNativeTimePicker;
-    var hasDropdownContent = resolvedItems.length > 0 || isLoadingItems;
+    /**
+     * Меню с одними лишь заголовками и разделителями показывать не о чем,
+     * поэтому при активном фильтре нужен хотя бы один подошедший элемент со временем.
+     */
+    var hasDropdownContent = isLoadingItems || (filterQuery === EMPTY_VALUE ? resolvedItems.length > 0 : resolvedItems.some(isTimeMenuItem));
+    /**
+     * Элементы, с которыми работает клавиатура.
+     * Пока меню скрыто, их нет: иначе стрелки ходили бы по невидимому списку,
+     * а Enter выбирал бы невидимый элемент вместо коммита введенного времени.
+     */
+    var menuItems = hasDropdownContent ? resolvedItems : EMPTY_MENU_ITEMS;
     var inputRightIcon = isLoadingItems && resolvedItems.length > 0 ? (React.createElement("span", { "data-tid": TimePickerDataTids.inputLoading },
         React.createElement(LoadingIcon, { size: size }))) : (rightIcon);
     var displayValue = editingValue;
@@ -147,11 +172,11 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         mouseDownSegmentRef.current = null;
     }, []);
     var updateEditingValueAfterUserEdit = useCallback(function (nextEditingValue) {
-        if (editingValueRef.current !== nextEditingValue) {
+        if (hasDropdown && editingValueRef.current !== nextEditingValue) {
             setIsEditedAfterOpen(true);
         }
         updateEditingValue(nextEditingValue);
-    }, [editingValueRef, updateEditingValue]);
+    }, [editingValueRef, hasDropdown, updateEditingValue]);
     var normalizeCurrentSegmentIfNeeded = useCallback(function (segment) {
         var nextDisplayValue = commitTimeSegmentOnLeave(editingValue === EMPTY_VALUE ? getEmptyDisplayValue(format) : editingValue, segment, format);
         updateEditingValueAfterUserEdit(nextDisplayValue);
@@ -171,46 +196,28 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     var _m = useTimePickerDropdown({
         disabled: disabled,
         hasDropdown: hasDropdown,
-        items: resolvedItems,
+        items: menuItems,
         selectedItemIndex: selectedItemIndex >= 0 ? selectedItemIndex : null,
         autoHighlightKey: autoHighlightKey,
-    }), isDropdownOpened = _m.isDropdownOpened, highlightedItemIndex = _m.highlightedItemIndex, openDropdown = _m.openDropdown, closeDropdown = _m.closeDropdown, resetHighlightedItem = _m.resetHighlightedItem, tryNavigateItems = _m.tryNavigateItems;
-    var sourceRef = useRef(source);
-    sourceRef.current = source;
-    useEffect(function () {
-        var currentSource = sourceRef.current;
-        if (typeof currentSource !== 'function' || !isDropdownOpened) {
-            setIsLoadingItems(false);
-            return;
-        }
-        var cancelled = false;
-        setIsLoadingItems(true);
-        new Promise(function (resolve) { return resolve(currentSource(filterQuery)); }).then(function (nextItems) {
-            if (!cancelled) {
-                setFetchedItems(nextItems);
-                setFetchedItemsQuery(filterQuery);
-                setIsLoadingItems(false);
-            }
-        }, function () {
-            if (!cancelled) {
-                setFetchedItems([]);
-                setFetchedItemsQuery(filterQuery);
-                setIsLoadingItems(false);
-            }
-        });
-        return function () {
-            cancelled = true;
-        };
-    }, [filterQuery, isDropdownOpened, isSourceFunction]);
+        isDropdownOpened: isDropdownOpened,
+        setIsDropdownOpened: setIsDropdownOpened,
+    }), highlightedItemIndex = _m.highlightedItemIndex, openDropdown = _m.openDropdown, closeDropdown = _m.closeDropdown, resetHighlightedItem = _m.resetHighlightedItem, tryNavigateItems = _m.tryNavigateItems;
+    /**
+     * Фильтрация начинается только после правки значения при открытом меню.
+     * Состояние живет ровно столько, сколько открыто меню: правка, которая заново открывает меню,
+     * сохраняет свой запрос, а правка при закрытом меню — например стрелками — на список не влияет.
+     */
     useEffect(function () {
-        setIsEditedAfterOpen(false);
-        if (!isDropdownOpened && isSourceFunction) {
-            setFetchedItems([]);
-            setFetchedItemsQuery(null);
+        if (!isDropdownOpened && isEditedAfterOpen) {
+            setIsEditedAfterOpen(false);
         }
-    }, [isDropdownOpened, isSourceFunction]);
+    }, [isDropdownOpened, isEditedAfterOpen]);
     var popupId = popupIdRef.current;
-    var activeDescendantId = hasDropdown && highlightedItemIndex !== null ? "".concat(popupId, "-item-").concat(highlightedItemIndex) : undefined;
+    var highlightedMenuItem = highlightedItemIndex === null ? undefined : menuItems[highlightedItemIndex];
+    /** Кастомный `MenuItem` может принести свой `id` — тогда указывать нужно именно на него. */
+    var activeDescendantId = hasDropdown && highlightedItemIndex !== null && highlightedMenuItem
+        ? ((_a = (isNavigableMenuElement(highlightedMenuItem) ? highlightedMenuItem.props.id : undefined)) !== null && _a !== void 0 ? _a : "".concat(popupId, "-item-").concat(highlightedItemIndex))
+        : undefined;
     var isMobileDropdownActive = canUseMobileDropdownTimePicker && isDropdownOpened;
     var getActiveInput = useCallback(function () { return (canUseMobileDropdownTimePicker && isDropdownOpened ? mobileInputRef.current : inputRef.current); }, [canUseMobileDropdownTimePicker, isDropdownOpened]);
     var _o = useTimePickerSelection({
@@ -226,14 +233,24 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     /**
      * Сообщает о некорректном вводе: нажатой клавише или вставленном значении, которое не может быть временем.
      * Если обработчик не задан, поле вспыхивает само.
+     * Обработчик может подставить значение вместо некорректного ввода:
+     * элемент коммитится как есть, `null` очищает поле, а `undefined` оставляет значение прежним.
      */
     var handleUnexpectedInput = useCallback(function (unexpectedValue) {
-        if (onUnexpectedInput) {
-            onUnexpectedInput(unexpectedValue, blinkInputValue);
+        if (!onUnexpectedInput) {
+            blinkInputValue();
+            return;
+        }
+        var returnedValue = onUnexpectedInput(unexpectedValue, blinkInputValue);
+        if (returnedValue === undefined) {
+            return;
+        }
+        if (returnedValue === null) {
+            commitValue(EMPTY_VALUE);
             return;
         }
-        blinkInputValue();
-    }, [blinkInputValue, onUnexpectedInput]);
+        commitItem(returnedValue);
+    }, [blinkInputValue, commitItem, commitValue, onUnexpectedInput]);
     var closeOpenedDropdown = useCallback(function () {
         var _a;
         if (canUseMobileDropdownTimePicker && isDropdownOpened) {
@@ -267,21 +284,51 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             closeDropdown();
         }
     }, [canUseMobileDropdownTimePicker, closeDropdown, closeOpenedDropdown, commitItem]);
-    var isSelectHighlightedItem = useCallback(function () {
+    var isSelectHighlightedItem = useCallback(function (event) {
+        var _a, _b;
         if (highlightedItemIndex === null) {
             return false;
         }
-        var resolvedItem = resolvedItems[highlightedItemIndex];
-        if (!resolvedItem || !isTimeMenuItem(resolvedItem) || resolvedItem.disabled) {
+        var resolvedItem = menuItems[highlightedItemIndex];
+        if (!resolvedItem) {
+            return true;
+        }
+        if (isNavigableMenuElement(resolvedItem)) {
+            (_b = (_a = resolvedItem.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            return true;
+        }
+        if (!isTimeMenuItem(resolvedItem) || resolvedItem.disabled) {
             return true;
         }
         selectItem(resolvedItem.item);
         return true;
-    }, [highlightedItemIndex, resolvedItems, selectItem]);
-    var focusInput = useCallback(function () {
+    }, [highlightedItemIndex, menuItems, selectItem]);
+    var focusInput = useCallback(function (options) {
         var _a;
+        if (disabled) {
+            return;
+        }
+        shouldSkipOpenOnFocusRef.current = Boolean(options === null || options === void 0 ? void 0 : options.withoutOpenDropdown);
         (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [getActiveInput]);
+        shouldSkipOpenOnFocusRef.current = false;
+    }, [disabled, getActiveInput]);
+    /**
+     * Открывает выпадающее меню так же, как это делает пользователь: через фокус в поле.
+     * Меню закрывается по потере фокуса, поэтому открытое без фокуса меню было бы нечем закрыть.
+     * В режиме нативного пикера открывается системный пикер — своего меню в этом режиме нет.
+     */
+    var openInputDropdown = useCallback(function () {
+        var _a;
+        if (disabled) {
+            return;
+        }
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            return;
+        }
+        (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.focus();
+        openDropdown();
+    }, [canUseMobileNativeTimePicker, disabled, getActiveInput, openDropdown, openNativeTimePicker]);
     var blurInput = useCallback(function () {
         var _a;
         if (canUseMobileDropdownTimePicker && isDropdownOpened) {
@@ -301,9 +348,10 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         focus: focusInput,
         blur: blurInput,
         blink: blinkInput,
+        open: openInputDropdown,
         close: closeInputDropdown,
         getRootNode: function () { return rootRef.current; },
-    }); }, [blinkInput, blurInput, closeInputDropdown, focusInput, getActiveInput]);
+    }); }, [blinkInput, blurInput, closeInputDropdown, focusInput, openInputDropdown]);
     useLayoutEffect(function () {
         if (!isDropdownOpened) {
             return;
@@ -317,11 +365,36 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             scrollSelectedItemIntoView(targetNode);
         }
     }, [highlightedItemIndex, isDropdownOpened, selectedItemIndex]);
+    /**
+     * Блокировка контрола посреди ввода завершает его так же, как потеря фокуса:
+     * меню закрывается, а недоведенное значение коммитится, а не остается висеть в поле.
+     */
     useEffect(function () {
-        if (disabled && isDropdownOpened) {
+        if (!disabled) {
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && isDropdownOpened) {
             closeOpenedDropdown();
+            return;
+        }
+        if (isDropdownOpened) {
+            closeDropdown();
+        }
+        if (isInputFocused) {
+            setIsInputFocused(false);
+            resetMouseInteractionState();
+            commitEditingValue();
         }
-    }, [closeOpenedDropdown, disabled, isDropdownOpened]);
+    }, [
+        canUseMobileDropdownTimePicker,
+        closeDropdown,
+        closeOpenedDropdown,
+        commitEditingValue,
+        disabled,
+        isDropdownOpened,
+        isInputFocused,
+        resetMouseInteractionState,
+    ]);
     useEffect(function () {
         setIsMobileDevice(Boolean(isMobile));
         setCanUseMobileNativeTimePicker(useMobileNativeTimePicker && Boolean(isMobile));
@@ -330,17 +403,25 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         closeOpenedDropdown();
     }, [closeOpenedDropdown]);
     var handleFocusBySource = function (event, isMobilePopupInput) {
+        var shouldSkipOpenDropdown = shouldSkipOpenOnFocusRef.current;
+        shouldSkipOpenOnFocusRef.current = false;
         if (canUseMobileNativeTimePicker) {
-            openNativeTimePicker();
+            if (!shouldSkipOpenDropdown) {
+                openNativeTimePicker();
+            }
             onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
             return;
         }
         if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
-            openDropdown();
+            if (!shouldSkipOpenDropdown) {
+                openDropdown();
+            }
             return;
         }
         setIsInputFocused(true);
-        openDropdown();
+        if (!shouldSkipOpenDropdown) {
+            openDropdown();
+        }
         if (isMouseDownOnFragmentRef.current && !isInputFocused) {
             if (isTimeDisplayEmpty(editingValueRef.current)) {
                 selectSegment('hours');
@@ -477,20 +558,24 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         }
         if (shouldHandleAsAllSelection && (isKeyBackspace(event) || isKeyDelete(event))) {
             event.preventDefault();
+            openDropdown();
             updateEditingValueAfterUserEdit(getEmptyDisplayValue(format));
             selectSegment('hours');
             return;
         }
         if (DIGIT_REGEXP.test(event.key)) {
             event.preventDefault();
-            resetHighlightedItem();
+            openDropdown();
             var nextDigitInputValue = shouldHandleAsAllSelection ? getEmptyDisplayValue(format) : currentDisplayValue;
             var nextDigitInputSegment = shouldHandleAsAllSelection ? 'hours' : currentSegment;
             var result = formatDigitToTimeSegment(nextDigitInputValue, nextDigitInputSegment, event.key, format);
+            // Отклоненная цифра не меняет ни значение, ни список, поэтому и подсветку трогать нельзя:
+            // автоподсветка не восстановится, а Enter выбрал бы не тот элемент, который видит пользователь.
             if (result.shouldBlink) {
                 handleUnexpectedInput(event.key);
                 return;
             }
+            resetHighlightedItem();
             updateEditingValueAfterUserEdit(result.nextValue);
             selectSegment(result.selectedSegment);
             return;
@@ -538,6 +623,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         }
         if (isKeyBackspace(event)) {
             event.preventDefault();
+            openDropdown();
             var nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, currentSegment, format);
             var nextSegment = currentSegment;
             if (nextDisplayValue === currentDisplayValue) {
@@ -553,6 +639,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         }
         if (isKeyDelete(event)) {
             event.preventDefault();
+            openDropdown();
             updateEditingValueAfterUserEdit(replaceTimeSegment(currentDisplayValue, currentSegment, EMPTY_SEGMENT, format));
             selectSegment(currentSegment);
             return;
@@ -570,7 +657,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             return;
         }
         if (isKeyEnter(event)) {
-            if (isSelectHighlightedItem()) {
+            if (isSelectHighlightedItem(event)) {
                 event.preventDefault();
                 return;
             }
@@ -610,7 +697,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     var handleKeyDown = function (event) { return handleKeyDownBySource(event, false); };
     var handleMobileKeyDown = function (event) { return handleKeyDownBySource(event, true); };
     var handlePasteBySource = function (event, isMobilePopupInput) {
-        var _a;
+        var _a, _b;
         onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
         if (event.defaultPrevented || disabled) {
             return;
@@ -618,13 +705,17 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         if (canUseMobileNativeTimePicker || (canUseMobileDropdownTimePicker && !isMobilePopupInput)) {
             return;
         }
-        var pastedValue = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
-        var nextDisplayValue = parsePastedTimeValue(pastedValue, format);
+        var pastedValue = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : EMPTY_VALUE;
         event.preventDefault();
+        if (pastedValue.trim() === EMPTY_VALUE) {
+            return;
+        }
+        var nextDisplayValue = parsePastedTimeValue(pastedValue, format);
         if (isTimeDisplayEmpty(nextDisplayValue)) {
             handleUnexpectedInput(pastedValue);
             return;
         }
+        openDropdown();
         updateEditingValueAfterUserEdit(nextDisplayValue);
         selectSegment('hours');
     };
@@ -637,7 +728,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         React.createElement("span", { ref: rootRef, className: styles.root(), "data-tid": TimePickerDataTids.root },
             React.createElement(TimeInput, __assign({}, inputProps, { "data-tid": TimePickerDataTids.input, ref: inputRef, disabled: disabled, hasDropdown: hasDropdown, size: size, format: format, corners: corners, rightIcon: inputRightIcon, suffix: suffix, value: displayValue, "aria-haspopup": hasDropdown ? 'listbox' : undefined, "aria-expanded": !isMobileDropdownActive && hasDropdown && isDropdownOpened && hasDropdownContent ? true : undefined, "aria-controls": !isMobileDropdownActive && hasDropdown && isDropdownOpened && hasDropdownContent ? popupId : undefined, "aria-activedescendant": isMobileDropdownActive ? undefined : activeDescendantId, "aria-placeholder": ariaPlaceholder, "aria-busy": isLoadingItems || undefined, onClick: handleClick, onBlur: handleBlur, onFocus: handleFocus, onMouseDownCapture: handleMouseDownCapture, onMouseUp: handleMouseUp, onKeyDown: handleKeyDown, onSelectSegment: handleSelectSegmentByMouse, onPaste: handlePaste })),
             canUseMobileNativeTimePicker && (React.createElement(NativeTimeInput, { "data-tid": TimePickerDataTids.nativeInput, disabled: disabled, ref: nativeInputRef, format: format, minTime: minTime, maxTime: maxTime, value: editingValue, onValueChange: handleNativeValueChange })),
-            canUseMobileDropdownTimePicker && isDropdownOpened && (React.createElement(TimePickerMobilePopup, { id: popupId, opened: isDropdownOpened, value: displayValue, inputRef: mobileInputRef, disabled: disabled, format: format, size: size, rightIcon: inputRightIcon, suffix: suffix, resolvedItems: resolvedItems, renderItem: renderItem, isLoading: isLoadingItems, highlightedItemIndex: highlightedItemIndex, normalizedValue: normalizedValue, itemRefs: itemRefs, error: props.error, warning: props.warning, "aria-describedby": props['aria-describedby'], "aria-label": props['aria-label'], "aria-placeholder": ariaPlaceholder, "aria-haspopup": 'listbox', "aria-expanded": hasDropdownContent ? true : undefined, "aria-controls": hasDropdownContent ? popupId : undefined, "aria-activedescendant": activeDescendantId, onFocus: handleMobileFocus, onBlur: handleMobileBlur, onClick: handleMobileClick, onKeyDown: handleMobileKeyDown, onMouseDownCapture: handleMobileMouseDownCapture, onMouseUp: handleMobileMouseUp, onPaste: handleMobilePaste, onSelectSegment: handleMobileSelectSegmentByMouse, onSelectItem: selectItem, onCloseRequest: handleCloseMobileDropdown })),
+            canUseMobileDropdownTimePicker && isDropdownOpened && (React.createElement(TimePickerMobilePopup, { id: popupId, opened: isDropdownOpened, value: displayValue, inputRef: mobileInputRef, disabled: disabled, format: format, size: size, rightIcon: inputRightIcon, suffix: suffix, resolvedItems: resolvedItems, renderItem: renderItem, isLoading: isLoadingItems, highlightedItemIndex: highlightedItemIndex, normalizedValue: normalizedValue, itemRefs: itemRefs, error: props.error, warning: props.warning, "aria-describedby": props['aria-describedby'], "aria-label": props['aria-label'], "aria-placeholder": ariaPlaceholder, "aria-haspopup": 'listbox', "aria-expanded": resolvedItems.length > 0 || isLoadingItems ? true : undefined, "aria-controls": resolvedItems.length > 0 || isLoadingItems ? popupId : undefined, "aria-activedescendant": activeDescendantId, onFocus: handleMobileFocus, onBlur: handleMobileBlur, onClick: handleMobileClick, onKeyDown: handleMobileKeyDown, onMouseDownCapture: handleMobileMouseDownCapture, onMouseUp: handleMobileMouseUp, onPaste: handleMobilePaste, onSelectSegment: handleMobileSelectSegmentByMouse, onSelectItem: selectItem, onCloseRequest: handleCloseMobileDropdown })),
             hasDropdown &&
                 !canUseMobileNativeTimePicker &&
                 !canUseMobileDropdownTimePicker &&