@skbkontur/react-ui 6.1.7-c386f.0 → 6.1.7-e032b.0

package/components/TimePicker/TimePicker.js

@@ -25,20 +25,21 @@ import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
 import { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';
 import { NativeTimeInput } from '../../internal/NativeTimeInput/index.js';
 import { TimeInput } from '../../internal/TimeInput/index.js';
-import { isIOS, isMobile } from '../../lib/client.js';
+import { isIOS } from '../../lib/client.js';
 import { isKeyArrowDown, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyBackspace, isKeyChar, isKeyDelete, isKeyEnter, isKeyEscape, isKeySpace, isKeyTab, isModShift, isShortcutSelectAll, } from '../../lib/events/keyboard/identifiers.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
 import { useLocaleForControl } from '../../lib/locale/useLocaleForControl.js';
 import { useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
 import { getRandomID } from '../../lib/utils.js';
+import { useResponsiveLayout } from '../ResponsiveLayout/index.js';
 import { scrollSelectedItemIntoView } from './helpers/scrollSelectedItemIntoView.js';
 import { DIGIT_REGEXP, EMPTY_SEGMENT, EMPTY_VALUE, TimePickerDataTids } from './helpers/TimePicker.constants.js';
 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 { 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 { 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';
@@ -67,17 +68,27 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     var rootRef = useRef(null);
     var itemRefs = useRef(new Map());
     var isMouseFocusRef = useRef(false);
-    var isMouseDownOnFragmentRef = useRef(false);
+    /** Сегмент, по которому нажали мышью, или `null`, если нажали мимо сегментов. */
     var mouseDownSegmentRef = useRef(null);
     var mobileBlurEventRef = useRef(null);
     var shouldSkipOpenOnFocusRef = useRef(false);
+    /**
+     * Контрол считает себя сфокусированным: о фокусе сообщено наружу, а сессия ввода не закончена.
+     * Внутри одной сессии фокус может переезжать между полем и инпутом мобильного попапа —
+     * например вместе со сменой верстки, — и такой переезд не начинает сессию заново.
+     */
+    var isControlFocusedRef = useRef(false);
     var popupIdRef = useRef(TimePickerDataTids.popup + getRandomID());
-    var _f = useState(false), isMobileDevice = _f[0], setIsMobileDevice = _f[1];
-    var _g = useState(false), canUseMobileNativeTimePicker = _g[0], setCanUseMobileNativeTimePicker = _g[1];
+    /**
+     * Мобильная версия включается медиавыражением темы, как в ComboBox:
+     * поле переключается между мобильной и десктопной версией вместе с версткой страницы.
+     */
+    var isMobileLayout = useResponsiveLayout().isMobile;
+    var canUseMobileNativeTimePicker = useMobileNativeTimePicker && isMobileLayout;
     var isSourceFunction = typeof source === 'function';
     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 _f = useState(false), isDropdownOpened = _f[0], setIsDropdownOpened = _f[1];
+    var _g = useState(false), isEditedAfterOpen = _g[0], setIsEditedAfterOpen = _g[1];
     /**
      * Форма элементов функции-источника: последняя, о которой компонент знает.
      * Форма запоминается, потому что элементы функции очищаются при закрытии меню,
@@ -94,28 +105,62 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     var shouldBuildItemAsObjectRef = useRef(false);
     var valueToItemRef = useRef(valueToItem);
     valueToItemRef.current = valueToItem;
-    var handleCommitValue = useCallback(function (committedValue, item) {
+    var handleCommitValue = useCallback(function (nextValue, item) {
         var _a, _b;
         if (!onValueChange) {
             return;
         }
-        if (committedValue === EMPTY_VALUE) {
+        if (nextValue === EMPTY_VALUE) {
             onValueChange(null, EMPTY_VALUE);
             return;
         }
-        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);
+        var nextItem = (_b = item !== null && item !== void 0 ? item : (_a = valueToItemRef.current) === null || _a === void 0 ? void 0 : _a.call(valueToItemRef, nextValue)) !== null && _b !== void 0 ? _b : timeValueToItem(nextValue, shouldBuildItemAsObjectRef.current);
+        onValueChange(nextItem, nextValue);
     }, [onValueChange]);
-    var _k = useTimePickerValue({
+    var onBlurRef = useRef(onBlur);
+    onBlurRef.current = onBlur;
+    var pendingBlurEventRef = useRef(null);
+    var _h = useState(0), blurRequestId = _h[0], setBlurRequestId = _h[1];
+    /**
+     * Завершает сессию фокуса и откладывает `onBlur` до конца рендера, как это делает ComboBox.
+     * Значение коммитится синхронно с потерей фокуса, поэтому вызванный тут же `onBlur`
+     * попал бы в обработчик с состоянием родителя до изменения значения — например с пустым временем.
+     * Событие может отсутствовать: сессия все равно закрывается, но наружу ничего не уходит.
+     */
+    var emitBlur = useCallback(function (event) {
+        if (!isControlFocusedRef.current) {
+            return;
+        }
+        isControlFocusedRef.current = false;
+        if (!event || !onBlurRef.current) {
+            return;
+        }
+        event.persist();
+        pendingBlurEventRef.current = event;
+        setBlurRequestId(function (currentId) { return currentId + 1; });
+    }, []);
+    var flushPendingBlur = useCallback(function () {
+        var _a;
+        var pendingBlurEvent = pendingBlurEventRef.current;
+        if (!pendingBlurEvent) {
+            return;
+        }
+        pendingBlurEventRef.current = null;
+        (_a = onBlurRef.current) === null || _a === void 0 ? void 0 : _a.call(onBlurRef, pendingBlurEvent);
+    }, []);
+    useEffect(flushPendingBlur, [blurRequestId, flushPendingBlur]);
+    /** Родитель мог убрать поле в ответ на коммит значения — отложенное событие все равно должно уйти. */
+    useEffect(function () { return flushPendingBlur; }, [flushPendingBlur]);
+    var _j = useTimePickerValue({
         isInputFocused: isInputFocused,
         format: format,
         externalValue: getTimeValueString(value),
         isValueControlled: value !== undefined,
         onCommitValue: handleCommitValue,
         onInputValueChange: onInputValueChange,
-    }), editingValue = _k.editingValue, editingValueRef = _k.editingValueRef, updateEditingValue = _k.updateEditingValue, commitEditingValue = _k.commitEditingValue, commitValue = _k.commitValue, commitItem = _k.commitItem;
+    }), editingValue = _j.editingValue, editingValueRef = _j.editingValueRef, committedValue = _j.committedValue, updateEditingValue = _j.updateEditingValue, commitEditingValue = _j.commitEditingValue, commitValue = _j.commitValue, commitItem = _j.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;
+    var _k = useTimePickerSource({ source: source, format: format, isDropdownOpened: isDropdownOpened, filterQuery: filterQuery }), sourceValueItems = _k.items, fetchedItemsQuery = _k.fetchedQuery, isLoadingItems = _k.isLoading;
     useEffect(function () {
         if (!isSourceFunction || sourceValueItems.some(isTimeItem)) {
             lastSourceItemShapeRef.current = sourceValueItems.some(function (item) { return isTimeItem(item) && isTimeItemObject(item); });
@@ -123,17 +168,17 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         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]);
-    /**
-     * Элементы для отрисовки: время и подпись достаются из элемента,
-     * а `disabled` дополняется проверкой диапазона `minTime`/`maxTime`.
-     * Исходный элемент сохраняется как есть — именно он уходит в `onValueChange`.
-     */
-    var resolvedItems = useMemo(function () { return resolveTimeItems(filteredItems, format, minTime, maxTime); }, [maxTime, minTime, format, filteredItems]);
+    var resolvedItems = useMemo(function () { return resolveTimeItems(filterTimeItems(sourceValueItems, filterQuery, format), format, minTime, maxTime); }, [filterQuery, format, maxTime, minTime, sourceValueItems]);
     var popupMaxHeight = getTimePickerPopupMaxHeight(size, theme);
     var ariaPlaceholder = format === 'HH:mm' ? locale.ariaPlaceholderHHMM : locale.ariaPlaceholderHHMMSS;
-    var normalizedValue = normalizeTimeValue(editingValue, format);
-    var selectedItemIndex = resolvedItems.findIndex(function (item) { return isTimeMenuItem(item) && normalizeTimeValue(item.value, format) === normalizedValue; });
+    /**
+     * Время, отмеченное в меню выбранным.
+     * Пока пользователь не начал править значение при открытом меню, это то же время, что в поле.
+     * С началом правки отмечено остается закоммиченное значение: набор фильтра — например `10` —
+     * не должен отмечать элемент `10:00` как уже выбранный.
+     */
+    var selectedValue = normalizeTimeValue(isEditedAfterOpen ? committedValue : editingValue, format);
+    var selectedItemIndex = resolvedItems.findIndex(function (item) { return isTimeMenuItem(item) && normalizeTimeValue(item.value, format) === selectedValue; });
     var autoHighlightKey = null;
     if (filterQuery !== EMPTY_VALUE) {
         if (isSourceFunction) {
@@ -145,7 +190,9 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             autoHighlightKey = "source-array:".concat(filterQuery);
         }
     }
-    var canUseMobileDropdownTimePicker = hasDropdown && isMobileDevice && !canUseMobileNativeTimePicker;
+    var canUseMobileDropdownTimePicker = hasDropdown && isMobileLayout && !canUseMobileNativeTimePicker;
+    /** Ввод идет в мобильном попапе: он открыт, а нативного пикера в этом режиме нет. */
+    var isMobileDropdownActive = canUseMobileDropdownTimePicker && isDropdownOpened;
     /**
      * Меню с одними лишь заголовками и разделителями показывать не о чем,
      * поэтому при активном фильтре нужен хотя бы один подошедший элемент со временем.
@@ -159,16 +206,16 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     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;
-    if (isInputFocused) {
-        displayValue = editingValue === EMPTY_VALUE ? getEmptyDisplayValue(format) : editingValue;
-    }
-    else if (isTimeDisplayEmpty(editingValue)) {
-        displayValue = EMPTY_VALUE;
-    }
+    /** Сфокусированное поле всегда показывает сегменты, а пустое без фокуса — ничего. */
+    var getDisplayValue = function () {
+        if (isInputFocused) {
+            return editingValue || getEmptyDisplayValue(format);
+        }
+        return isTimeDisplayEmpty(editingValue) ? EMPTY_VALUE : editingValue;
+    };
+    var displayValue = getDisplayValue();
     var resetMouseInteractionState = useCallback(function () {
         isMouseFocusRef.current = false;
-        isMouseDownOnFragmentRef.current = false;
         mouseDownSegmentRef.current = null;
     }, []);
     var updateEditingValueAfterUserEdit = useCallback(function (nextEditingValue) {
@@ -193,7 +240,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.click();
         }
     }, [canUseMobileNativeTimePicker, disabled]);
-    var _m = useTimePickerDropdown({
+    var _l = useTimePickerDropdown({
         disabled: disabled,
         hasDropdown: hasDropdown,
         items: menuItems,
@@ -201,7 +248,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         autoHighlightKey: autoHighlightKey,
         isDropdownOpened: isDropdownOpened,
         setIsDropdownOpened: setIsDropdownOpened,
-    }), highlightedItemIndex = _m.highlightedItemIndex, openDropdown = _m.openDropdown, closeDropdown = _m.closeDropdown, resetHighlightedItem = _m.resetHighlightedItem, tryNavigateItems = _m.tryNavigateItems;
+    }), highlightedItemIndex = _l.highlightedItemIndex, openDropdown = _l.openDropdown, closeDropdown = _l.closeDropdown, resetHighlightedItem = _l.resetHighlightedItem, tryNavigateItems = _l.tryNavigateItems;
     /**
      * Фильтрация начинается только после правки значения при открытом меню.
      * Состояние живет ровно столько, сколько открыто меню: правка, которая заново открывает меню,
@@ -215,33 +262,26 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     var popupId = popupIdRef.current;
     var highlightedMenuItem = highlightedItemIndex === null ? undefined : menuItems[highlightedItemIndex];
     /** Кастомный `MenuItem` может принести свой `id` — тогда указывать нужно именно на него. */
-    var activeDescendantId = hasDropdown && highlightedItemIndex !== null && highlightedMenuItem
+    var activeDescendantId = 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({
+    var getActiveInput = useCallback(function () { return (isMobileDropdownActive ? mobileInputRef.current : inputRef.current); }, [isMobileDropdownActive]);
+    var _m = useTimePickerSelection({
         isInputFocused: isInputFocused,
         format: format,
         displayValue: displayValue,
         getInput: getActiveInput,
-    }), selection = _o.selection, selectedSegment = _o.selectedSegment, selectSegment = _o.selectSegment, selectAll = _o.selectAll, syncSelectionWithDOM = _o.syncSelectionWithDOM;
-    var blinkInputValue = useCallback(function () {
+    }), selection = _m.selection, selectedSegment = _m.selectedSegment, selectSegment = _m.selectSegment, selectAll = _m.selectAll, syncSelectionWithDOM = _m.syncSelectionWithDOM;
+    var blinkInput = useCallback(function () {
         var _a;
         (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.blink();
     }, [getActiveInput]);
-    /**
-     * Сообщает о некорректном вводе: нажатой клавише или вставленном значении, которое не может быть временем.
-     * Если обработчик не задан, поле вспыхивает само.
-     * Обработчик может подставить значение вместо некорректного ввода:
-     * элемент коммитится как есть, `null` очищает поле, а `undefined` оставляет значение прежним.
-     */
     var handleUnexpectedInput = useCallback(function (unexpectedValue) {
         if (!onUnexpectedInput) {
-            blinkInputValue();
+            blinkInput();
             return;
         }
-        var returnedValue = onUnexpectedInput(unexpectedValue, blinkInputValue);
+        var returnedValue = onUnexpectedInput(unexpectedValue, blinkInput);
         if (returnedValue === undefined) {
             return;
         }
@@ -250,40 +290,31 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             return;
         }
         commitItem(returnedValue);
-    }, [blinkInputValue, commitItem, commitValue, onUnexpectedInput]);
+    }, [blinkInput, commitItem, commitValue, onUnexpectedInput]);
+    /** Закрывает открытое меню: мобильный попап заодно завершает сессию ввода, как потеря фокуса. */
     var closeOpenedDropdown = useCallback(function () {
-        var _a;
-        if (canUseMobileDropdownTimePicker && isDropdownOpened) {
+        var _a, _b;
+        if (isMobileDropdownActive) {
+            // Фокус может остаться в любом из двух полей: инпут попапа не всегда получает его —
+            // например мобильный браузер отказывается переводить фокус без жеста пользователя.
+            // Гасим оба, чтобы закрытие попапа всегда давало событие потери фокуса.
             (_a = mobileInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
             setIsInputFocused(false);
             resetMouseInteractionState();
             closeDropdown();
             commitEditingValue();
             var blurEvent = mobileBlurEventRef.current;
             mobileBlurEventRef.current = null;
-            if (blurEvent) {
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur(blurEvent);
-            }
+            emitBlur(blurEvent);
             return;
         }
         closeDropdown();
-    }, [
-        canUseMobileDropdownTimePicker,
-        closeDropdown,
-        commitEditingValue,
-        isDropdownOpened,
-        onBlur,
-        resetMouseInteractionState,
-    ]);
+    }, [closeDropdown, commitEditingValue, emitBlur, isMobileDropdownActive, resetMouseInteractionState]);
     var selectItem = useCallback(function (item) {
         commitItem(item);
-        if (canUseMobileDropdownTimePicker) {
-            closeOpenedDropdown();
-        }
-        else {
-            closeDropdown();
-        }
-    }, [canUseMobileDropdownTimePicker, closeDropdown, closeOpenedDropdown, commitItem]);
+        closeOpenedDropdown();
+    }, [closeOpenedDropdown, commitItem]);
     var isSelectHighlightedItem = useCallback(function (event) {
         var _a, _b;
         if (highlightedItemIndex === null) {
@@ -331,27 +362,20 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     }, [canUseMobileNativeTimePicker, disabled, getActiveInput, openDropdown, openNativeTimePicker]);
     var blurInput = useCallback(function () {
         var _a;
-        if (canUseMobileDropdownTimePicker && isDropdownOpened) {
+        if (isMobileDropdownActive) {
             closeOpenedDropdown();
             return;
         }
         (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.blur();
-    }, [canUseMobileDropdownTimePicker, closeOpenedDropdown, getActiveInput, isDropdownOpened]);
-    var closeInputDropdown = useCallback(function () {
-        closeOpenedDropdown();
-    }, [closeOpenedDropdown]);
-    var blinkInput = useCallback(function () {
-        var _a;
-        (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.blink();
-    }, [getActiveInput]);
+    }, [closeOpenedDropdown, getActiveInput, isMobileDropdownActive]);
     useImperativeHandle(ref, function () { return ({
         focus: focusInput,
         blur: blurInput,
         blink: blinkInput,
         open: openInputDropdown,
-        close: closeInputDropdown,
+        close: closeOpenedDropdown,
         getRootNode: function () { return rootRef.current; },
-    }); }, [blinkInput, blurInput, closeInputDropdown, focusInput, openInputDropdown]);
+    }); }, [blinkInput, blurInput, closeOpenedDropdown, focusInput, openInputDropdown]);
     useLayoutEffect(function () {
         if (!isDropdownOpened) {
             return;
@@ -373,7 +397,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         if (!disabled) {
             return;
         }
-        if (canUseMobileDropdownTimePicker && isDropdownOpened) {
+        if (isMobileDropdownActive) {
             closeOpenedDropdown();
             return;
         }
@@ -386,94 +410,145 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
             commitEditingValue();
         }
     }, [
-        canUseMobileDropdownTimePicker,
         closeDropdown,
         closeOpenedDropdown,
         commitEditingValue,
         disabled,
         isDropdownOpened,
         isInputFocused,
+        isMobileDropdownActive,
         resetMouseInteractionState,
     ]);
+    var previousIsMobileLayoutRef = useRef(isMobileLayout);
+    /**
+     * Смена верстки переносит открытое меню в нужную версию: как в ComboBox, меню не закрывается.
+     * Начатый ввод переезжает вместе с ним, а если переезжать некуда — коммитится, как при потере фокуса.
+     */
     useEffect(function () {
-        setIsMobileDevice(Boolean(isMobile));
-        setCanUseMobileNativeTimePicker(useMobileNativeTimePicker && Boolean(isMobile));
-    }, [useMobileNativeTimePicker]);
-    var handleCloseMobileDropdown = useCallback(function () {
-        closeOpenedDropdown();
-    }, [closeOpenedDropdown]);
+        if (previousIsMobileLayoutRef.current === isMobileLayout) {
+            return;
+        }
+        previousIsMobileLayoutRef.current = isMobileLayout;
+        // Запомненный blur остался от прошлой верстки: как потеря фокуса контрола он больше не годится.
+        mobileBlurEventRef.current = null;
+        if (isMobileLayout) {
+            // Ввод продолжится в инпуте попапа, только если попап открывается вместе со сменой верстки.
+            if (isInputFocused && !isMobileDropdownActive) {
+                setIsInputFocused(false);
+                resetMouseInteractionState();
+                commitEditingValue();
+            }
+            // В режиме нативного пикера своего меню нет.
+            if (isDropdownOpened && canUseMobileNativeTimePicker) {
+                closeDropdown();
+            }
+            return;
+        }
+        /**
+         * Десктопное меню закрывается по потере фокуса поля, поэтому без фокуса в контроле
+         * его нечем было бы закрыть: мобильный попап мог быть открыт и без фокуса в своем инпуте.
+         * Если же фокус был, его вернет в поле `useTimePickerSelection`.
+         */
+        if (isDropdownOpened && !isInputFocused) {
+            closeDropdown();
+        }
+    }, [
+        canUseMobileNativeTimePicker,
+        closeDropdown,
+        commitEditingValue,
+        isDropdownOpened,
+        isInputFocused,
+        isMobileDropdownActive,
+        isMobileLayout,
+        resetMouseInteractionState,
+    ]);
+    /** Сообщает о фокусе один раз за сессию: переезд фокуса внутри контрола наружу не виден. */
+    var emitFocus = function (event) {
+        if (isControlFocusedRef.current) {
+            return;
+        }
+        isControlFocusedRef.current = true;
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
     var handleFocusBySource = function (event, isMobilePopupInput) {
         var shouldSkipOpenDropdown = shouldSkipOpenOnFocusRef.current;
         shouldSkipOpenOnFocusRef.current = false;
+        var isFocusMovedInsideControl = isControlFocusedRef.current;
         if (canUseMobileNativeTimePicker) {
             if (!shouldSkipOpenDropdown) {
                 openNativeTimePicker();
             }
-            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            emitFocus(event);
             return;
         }
         if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
             if (!shouldSkipOpenDropdown) {
                 openDropdown();
             }
+            // Дальше ввод идет в инпуте попапа, но фокус контрол получает здесь.
+            emitFocus(event);
             return;
         }
         setIsInputFocused(true);
         if (!shouldSkipOpenDropdown) {
             openDropdown();
         }
-        if (isMouseDownOnFragmentRef.current && !isInputFocused) {
-            if (isTimeDisplayEmpty(editingValueRef.current)) {
-                selectSegment('hours');
-            }
-            else if (mouseDownSegmentRef.current) {
-                selectSegment(mouseDownSegmentRef.current);
-            }
+        if (mouseDownSegmentRef.current && !isInputFocused) {
+            // По пустому полю ввод всегда начинается с часов, а по заполненному — с сегмента под курсором.
+            selectSegment(isTimeDisplayEmpty(editingValueRef.current) ? 'hours' : mouseDownSegmentRef.current);
         }
         else {
-            selectSegment('hours');
+            // Переезд фокуса внутри контрола продолжает начатый ввод, поэтому сегмент сохраняется:
+            // иначе следующая цифра ушла бы в часы и затерла бы набранное время.
+            selectSegment(isFocusMovedInsideControl ? selectedSegment : 'hours');
         }
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        emitFocus(event);
     };
     var handleFocus = function (event) { return handleFocusBySource(event, false); };
     var handleMobileFocus = function (event) { return handleFocusBySource(event, true); };
     var handleBlurBySource = function (event, isMobilePopupInput) {
-        if (canUseMobileNativeTimePicker) {
-            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        /**
+         * Пока открыт мобильный попап, фокус ходит между полем и его инпутом: контрол остается активным,
+         * поэтому наружу о таком blur сообщать нечего. Событие запоминается на случай,
+         * если фокус в инпуте попапа так и не оказался — тогда именно оно уйдет в `onBlur` при закрытии.
+         */
+        if (isMobileDropdownActive) {
+            event.persist();
+            mobileBlurEventRef.current = event;
             return;
         }
-        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+        if (canUseMobileNativeTimePicker) {
+            // Ввод в мобильной версии не идет через поле, но незакоммиченное значение могло остаться
+            // от десктопной версии, если верстка сменилась посреди ввода.
+            if (isInputFocused) {
+                setIsInputFocused(false);
+                resetMouseInteractionState();
+                commitEditingValue();
+            }
+            emitBlur(event);
             return;
         }
+        // Инпут закрытого попапа фокуса уже не держит, но его blur может прийти на размонтировании.
         if (isMobilePopupInput) {
-            event.persist();
-            mobileBlurEventRef.current = event;
             return;
         }
         setIsInputFocused(false);
         resetMouseInteractionState();
         closeDropdown();
         commitEditingValue();
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        emitBlur(event);
     };
     var handleBlur = function (event) { return handleBlurBySource(event, false); };
     var handleMobileBlur = function (event) { return handleBlurBySource(event, true); };
-    var handleClickBySource = function (event, isMobilePopupInput) {
+    var handleClick = function (event) {
         if (canUseMobileNativeTimePicker) {
             openNativeTimePicker();
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            return;
         }
-        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+        else {
             openDropdown();
-            onClick === null || onClick === void 0 ? void 0 : onClick(event);
-            return;
         }
-        openDropdown();
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    var handleClick = function (event) { return handleClickBySource(event, false); };
-    var handleMobileClick = function (event) { return handleClickBySource(event, true); };
     var handleMouseDownCaptureBySource = function (event, isMobilePopupInput) {
         var _a, _b;
         if (canUseMobileNativeTimePicker || (canUseMobileDropdownTimePicker && !isMobilePopupInput)) {
@@ -481,12 +556,10 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         }
         var currentInputRef = isMobilePopupInput ? mobileInputRef : inputRef;
         var segment = (_b = (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(event.target)) !== null && _b !== void 0 ? _b : null;
-        var isFragment = segment !== null;
-        if (isInputFocused && !isFragment) {
+        if (isInputFocused && segment === null) {
             event.preventDefault();
         }
         isMouseFocusRef.current = !isInputFocused;
-        isMouseDownOnFragmentRef.current = isFragment;
         mouseDownSegmentRef.current = segment;
     };
     var handleMouseDownCapture = function (event) {
@@ -647,12 +720,7 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
         if (isKeyEscape(event)) {
             if (isDropdownOpened) {
                 event.preventDefault();
-                if (canUseMobileDropdownTimePicker) {
-                    closeOpenedDropdown();
-                }
-                else {
-                    closeDropdown();
-                }
+                closeOpenedDropdown();
             }
             return;
         }
@@ -661,15 +729,14 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
                 event.preventDefault();
                 return;
             }
-            if (canUseMobileDropdownTimePicker && isDropdownOpened) {
+            if (isMobileDropdownActive) {
                 event.preventDefault();
                 closeOpenedDropdown();
                 return;
             }
-            // Enter не выбирает элемент, а лишь подтверждает введенное значение,
-            // поэтому коммитим значение как при потере фокуса и подсвечиваем поле.
+            // Enter не выбирает элемент, а лишь подтверждает введенное значение, как потеря фокуса.
             commitEditingValue();
-            blinkInputValue();
+            blinkInput();
             if (isDropdownOpened) {
                 event.preventDefault();
                 closeDropdown();
@@ -721,19 +788,16 @@ export var TimePicker = Object.assign(forwardRefAndName('TimePicker', function (
     };
     var handlePaste = function (event) { return handlePasteBySource(event, false); };
     var handleMobilePaste = function (event) { return handlePasteBySource(event, true); };
-    var handleNativeValueChange = useCallback(function (nextValue) {
-        commitValue(nextValue);
-    }, [commitValue]);
     return (React.createElement(CommonWrapper, __assign({}, props),
         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": 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 })),
+            canUseMobileNativeTimePicker && (React.createElement(NativeTimeInput, { "data-tid": TimePickerDataTids.nativeInput, disabled: disabled, ref: nativeInputRef, format: format, minTime: minTime, maxTime: maxTime, value: editingValue, onValueChange: commitValue })),
+            isMobileDropdownActive && (React.createElement(TimePickerMobilePopup, { id: popupId, value: displayValue, inputRef: mobileInputRef, disabled: disabled, format: format, size: size, rightIcon: inputRightIcon, suffix: suffix, resolvedItems: resolvedItems, renderItem: renderItem, isLoading: isLoadingItems, highlightedItemIndex: highlightedItemIndex, selectedValue: selectedValue, 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: handleClick, onKeyDown: handleMobileKeyDown, onMouseDownCapture: handleMobileMouseDownCapture, onMouseUp: handleMobileMouseUp, onPaste: handleMobilePaste, onSelectSegment: handleMobileSelectSegmentByMouse, onSelectItem: selectItem, onCloseRequest: closeOpenedDropdown })),
             hasDropdown &&
                 !canUseMobileNativeTimePicker &&
                 !canUseMobileDropdownTimePicker &&
                 isDropdownOpened &&
                 hasDropdownContent &&
-                rootRef.current && (React.createElement(TimePickerPopup, { id: popupId, anchorElement: rootRef.current, menuPos: menuPos, menuAlign: menuAlign, menuWidth: menuWidth, popupMaxHeight: popupMaxHeight, format: format, size: size, resolvedItems: resolvedItems, renderItem: renderItem, isLoading: isLoadingItems, highlightedItemIndex: highlightedItemIndex, normalizedValue: normalizedValue, itemRefs: itemRefs, onSelectItem: selectItem })))));
+                rootRef.current && (React.createElement(TimePickerPopup, { id: popupId, anchorElement: rootRef.current, menuPos: menuPos, menuAlign: menuAlign, menuWidth: menuWidth, popupMaxHeight: popupMaxHeight, format: format, size: size, resolvedItems: resolvedItems, renderItem: renderItem, isLoading: isLoadingItems, highlightedItemIndex: highlightedItemIndex, selectedValue: selectedValue, itemRefs: itemRefs, onSelectItem: selectItem })))));
 }), { validate: validateTimePicker });
 //# sourceMappingURL=TimePicker.js.map