@skbkontur/react-ui 6.2.1 → 6.3.0

package/components/TimePicker/TimePicker.js

@@ -0,0 +1,795 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { extractCommonProps } from '../../internal/CommonWrapper/utils/extractCommonProps.js';
+import { LoadingIcon } from '../../internal/icons2022/LoadingIcon.js';
+import { NativeTimeInput } from '../../internal/NativeTimeInput/index.js';
+import { TimeInput } from '../../internal/TimeInput/index.js';
+import { useTimePickerDropdown } from '../../internal/TimePicker/useTimePickerDropdown.js';
+import { useTimePickerSelection } from '../../internal/TimePicker/useTimePickerSelection.js';
+import { useTimePickerSource } from '../../internal/TimePicker/useTimePickerSource.js';
+import { useTimePickerValue } from '../../internal/TimePicker/useTimePickerValue.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 { getTimeItemValue, isNavigableMenuElement, isTimeMenuItem, } from './helpers/TimePicker.shared.js';
+import { filterTimeItems, getEmptyDisplayValue, getTimeFilterQuery, isTimeDisplayEmpty, normalizeTimeValue, parsePastedTimeValue, replaceTimeSegment, resolveTimeItems, } from './helpers/TimePicker.value.js';
+import { validateTimePicker } from './helpers/validateTimePicker.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 _a;
+    // `className`, `style` и data-атрибуты применяет `CommonWrapper` к корневому элементу,
+    // поэтому в поле ввода они не должны уехать повторно.
+    var _b = extractCommonProps(props), notCommonProps = _b[1];
+    var disabled = notCommonProps.disabled, _c = notCommonProps.useMobileNativeTimePicker, useMobileNativeTimePicker = _c === void 0 ? false : _c, _d = notCommonProps.format, format = _d === void 0 ? 'HH:mm' : _d, _e = notCommonProps.size, size = _e === void 0 ? 'small' : _e, source = notCommonProps.source, renderItem = notCommonProps.renderItem, menuPos = notCommonProps.menuPos, menuAlign = notCommonProps.menuAlign, menuWidth = notCommonProps.menuWidth, minTime = notCommonProps.minTime, maxTime = notCommonProps.maxTime, rightIcon = notCommonProps.rightIcon, suffix = notCommonProps.suffix, corners = notCommonProps.corners, value = notCommonProps.value, onValueChange = notCommonProps.onValueChange, onInputValueChange = notCommonProps.onInputValueChange, onUnexpectedInput = notCommonProps.onUnexpectedInput, onFocus = notCommonProps.onFocus, onBlur = notCommonProps.onBlur, onClick = notCommonProps.onClick, onKeyDown = notCommonProps.onKeyDown, onPaste = notCommonProps.onPaste, inputProps = __rest(notCommonProps, ["disabled", "useMobileNativeTimePicker", "format", "size", "source", "renderItem", "menuPos", "menuAlign", "menuWidth", "minTime", "maxTime", "rightIcon", "suffix", "corners", "value", "onValueChange", "onInputValueChange", "onUnexpectedInput", "onFocus", "onBlur", "onClick", "onKeyDown", "onPaste"]);
+    var theme = useContext(ThemeContext);
+    var styles = useStyles(getStyles);
+    var locale = useLocaleForControl('TimePicker', TimePickerLocaleHelper);
+    var _f = useState(false), isInputFocused = _f[0], setIsInputFocused = _f[1];
+    var inputRef = useRef(null);
+    var mobileInputRef = useRef(null);
+    var nativeInputRef = useRef(null);
+    var rootRef = useRef(null);
+    var itemRefs = useRef(new Map());
+    var isMouseFocusRef = useRef(false);
+    /** Сегмент, по которому нажали мышью, или `null`, если нажали мимо сегментов. */
+    var mouseDownSegmentRef = useRef(null);
+    var mobileBlurEventRef = useRef(null);
+    var shouldSkipOpenOnFocusRef = useRef(false);
+    /**
+     * Контрол считает себя сфокусированным: о фокусе сообщено наружу, а сессия ввода не закончена.
+     * Внутри одной сессии фокус может переезжать между полем и инпутом мобильного попапа —
+     * например вместе со сменой верстки, — и такой переезд не начинает сессию заново.
+     */
+    var isControlFocusedRef = useRef(false);
+    /** Фокус, который контрол сам переводит в скрытый нативный инпут, открывая системный пикер. */
+    var isMovingFocusToNativePickerRef = useRef(false);
+    var popupIdRef = useRef(TimePickerDataTids.popup + getRandomID());
+    /**
+     * Мобильная версия включается медиавыражением темы, как в ComboBox:
+     * поле переключается между мобильной и десктопной версией вместе с версткой страницы.
+     */
+    var isMobileLayout = useResponsiveLayout().isMobile;
+    var canUseMobileNativeTimePicker = useMobileNativeTimePicker && isMobileLayout;
+    var isSourceFunction = typeof source === 'function';
+    var hasDropdown = isSourceFunction || (Array.isArray(source) && source.length > 0);
+    var _g = useState(false), isDropdownOpened = _g[0], setIsDropdownOpened = _g[1];
+    var _h = useState(false), isEditedAfterOpen = _h[0], setIsEditedAfterOpen = _h[1];
+    var onBlurRef = useRef(onBlur);
+    onBlurRef.current = onBlur;
+    var pendingBlurEventRef = useRef(null);
+    var _j = useState(0), blurRequestId = _j[0], setBlurRequestId = _j[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 _k = useTimePickerValue({
+        isInputFocused: isInputFocused,
+        format: format,
+        externalValue: value !== null && value !== void 0 ? value : EMPTY_VALUE,
+        isValueControlled: value !== undefined,
+        onCommitValue: onValueChange,
+        onInputValueChange: onInputValueChange,
+    }), editingValue = _k.editingValue, editingValueRef = _k.editingValueRef, committedValue = _k.committedValue, updateEditingValue = _k.updateEditingValue, commitEditingValue = _k.commitEditingValue, commitValue = _k.commitValue, commitSelectedValue = _k.commitSelectedValue;
+    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, isSourceFailed = _l.isFailed, retrySource = _l.retry;
+    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;
+    /**
+     * Время, отмеченное в меню выбранным.
+     * Пока пользователь не начал править значение при открытом меню, это то же время, что в поле.
+     * С началом правки отмечено остается закоммиченное значение: набор фильтра — например `10` —
+     * не должен отмечать элемент `10:00` как уже выбранный.
+     */
+    var selectedValue = normalizeTimeValue(isEditedAfterOpen ? committedValue : editingValue, format);
+    var selectedItemIndex = resolvedItems.findIndex(function (item) { return isTimeMenuItem(item) && item.value === selectedValue; });
+    var autoHighlightKey = null;
+    if (filterQuery !== EMPTY_VALUE) {
+        if (isSourceFunction) {
+            if (!isLoadingItems && fetchedItemsQuery === filterQuery) {
+                autoHighlightKey = "source-function:".concat(filterQuery);
+            }
+        }
+        else {
+            autoHighlightKey = "source-array:".concat(filterQuery);
+        }
+    }
+    var canUseMobileDropdownTimePicker = hasDropdown && isMobileLayout && !canUseMobileNativeTimePicker;
+    /** Ввод идет в мобильном попапе: он открыт, а нативного пикера в этом режиме нет. */
+    var isMobileDropdownActive = canUseMobileDropdownTimePicker && isDropdownOpened;
+    /**
+     * Меню с одними лишь заголовками и разделителями показывать не о чем,
+     * поэтому при активном фильтре нужен хотя бы один подошедший элемент со временем.
+     */
+    var hasDropdownContent = isLoadingItems ||
+        isSourceFailed ||
+        (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 getDisplayValue = function () {
+        if (isInputFocused) {
+            return editingValue || getEmptyDisplayValue(format);
+        }
+        return isTimeDisplayEmpty(editingValue) ? EMPTY_VALUE : editingValue;
+    };
+    var displayValue = getDisplayValue();
+    var resetMouseInteractionState = useCallback(function () {
+        isMouseFocusRef.current = false;
+        mouseDownSegmentRef.current = null;
+    }, []);
+    var updateEditingValueAfterUserEdit = useCallback(function (nextEditingValue) {
+        if (hasDropdown && editingValueRef.current !== nextEditingValue) {
+            setIsEditedAfterOpen(true);
+        }
+        updateEditingValue(nextEditingValue);
+    }, [editingValueRef, hasDropdown, updateEditingValue]);
+    var normalizeCurrentSegmentIfNeeded = useCallback(function (segment) {
+        var nextDisplayValue = commitTimeSegmentOnLeave(editingValue === EMPTY_VALUE ? getEmptyDisplayValue(format) : editingValue, segment, format);
+        updateEditingValueAfterUserEdit(nextDisplayValue);
+    }, [editingValue, format, updateEditingValueAfterUserEdit]);
+    var openNativeTimePicker = useCallback(function () {
+        var _a, _b;
+        if (!canUseMobileNativeTimePicker || disabled) {
+            return;
+        }
+        // На iOS системный пикер открывается только фокусом, поэтому фокус уходит из поля в скрытый инпут.
+        isMovingFocusToNativePickerRef.current = true;
+        if (isIOS) {
+            (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.click();
+        }
+        isMovingFocusToNativePickerRef.current = false;
+    }, [canUseMobileNativeTimePicker, disabled]);
+    /** Фокус ушел в скрытый нативный инпут: для внешнего мира контрол остается активным. */
+    var isFocusMovedToNativePicker = function (event) {
+        return isMovingFocusToNativePickerRef.current ||
+            (nativeInputRef.current !== null && event.relatedTarget === nativeInputRef.current.getNode());
+    };
+    var _m = useTimePickerDropdown({
+        disabled: disabled,
+        hasDropdown: hasDropdown,
+        items: menuItems,
+        selectedItemIndex: selectedItemIndex >= 0 ? selectedItemIndex : null,
+        autoHighlightKey: autoHighlightKey,
+        isDropdownOpened: isDropdownOpened,
+        setIsDropdownOpened: setIsDropdownOpened,
+    }), highlightedItemIndex = _m.highlightedItemIndex, openDropdown = _m.openDropdown, closeDropdown = _m.closeDropdown, resetHighlightedItem = _m.resetHighlightedItem, tryNavigateItems = _m.tryNavigateItems;
+    /**
+     * Фильтрация начинается только после правки значения при открытом меню.
+     * Состояние живет ровно столько, сколько открыто меню: правка, которая заново открывает меню,
+     * сохраняет свой запрос, а правка при закрытом меню — например стрелками — на список не влияет.
+     */
+    useEffect(function () {
+        if (!isDropdownOpened && isEditedAfterOpen) {
+            setIsEditedAfterOpen(false);
+        }
+    }, [isDropdownOpened, isEditedAfterOpen]);
+    var popupId = popupIdRef.current;
+    var highlightedMenuItem = highlightedItemIndex === null ? undefined : menuItems[highlightedItemIndex];
+    /** Кастомный `MenuItem` может принести свой `id` — тогда указывать нужно именно на него. */
+    var activeDescendantId = highlightedMenuItem
+        ? ((_a = (isNavigableMenuElement(highlightedMenuItem) ? highlightedMenuItem.props.id : undefined)) !== null && _a !== void 0 ? _a : "".concat(popupId, "-item-").concat(highlightedItemIndex))
+        : undefined;
+    var getActiveInput = useCallback(function () { return (isMobileDropdownActive ? mobileInputRef.current : inputRef.current); }, [isMobileDropdownActive]);
+    var _o = 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 blinkInput = useCallback(function () {
+        var _a;
+        (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.blink();
+    }, [getActiveInput]);
+    var handleUnexpectedInput = useCallback(function (unexpectedValue) {
+        if (!onUnexpectedInput) {
+            blinkInput();
+            return;
+        }
+        var returnedValue = onUnexpectedInput(unexpectedValue, blinkInput);
+        if (returnedValue === undefined) {
+            return;
+        }
+        if (returnedValue === null) {
+            commitValue(EMPTY_VALUE);
+            return;
+        }
+        commitSelectedValue(returnedValue);
+    }, [blinkInput, commitSelectedValue, commitValue, onUnexpectedInput]);
+    /** Закрывает открытое меню: мобильный попап заодно завершает сессию ввода, как потеря фокуса. */
+    var closeOpenedDropdown = useCallback(function () {
+        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;
+            emitBlur(blurEvent);
+            return;
+        }
+        closeDropdown();
+    }, [closeDropdown, commitEditingValue, emitBlur, isMobileDropdownActive, resetMouseInteractionState]);
+    var selectItem = useCallback(function (item) {
+        commitSelectedValue(getTimeItemValue(item));
+        closeOpenedDropdown();
+    }, [closeOpenedDropdown, commitSelectedValue]);
+    var isSelectHighlightedItem = useCallback(function (event) {
+        var _a, _b;
+        if (highlightedItemIndex === null) {
+            return false;
+        }
+        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, 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();
+        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, _b;
+        if (isMobileDropdownActive) {
+            closeOpenedDropdown();
+            return;
+        }
+        // В нативном режиме фокус держит скрытый инпут системного пикера.
+        (_a = nativeInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        (_b = getActiveInput()) === null || _b === void 0 ? void 0 : _b.blur();
+    }, [closeOpenedDropdown, getActiveInput, isMobileDropdownActive]);
+    useImperativeHandle(ref, function () { return ({
+        focus: focusInput,
+        blur: blurInput,
+        blink: blinkInput,
+        open: openInputDropdown,
+        close: closeOpenedDropdown,
+        getRootNode: function () { return rootRef.current; },
+    }); }, [blinkInput, blurInput, closeOpenedDropdown, focusInput, openInputDropdown]);
+    useLayoutEffect(function () {
+        if (!isDropdownOpened) {
+            return;
+        }
+        var selectedIndex = highlightedItemIndex !== null && highlightedItemIndex !== void 0 ? highlightedItemIndex : selectedItemIndex;
+        if (selectedIndex < 0) {
+            return;
+        }
+        var targetNode = itemRefs.current.get(selectedIndex);
+        if (targetNode) {
+            scrollSelectedItemIntoView(targetNode);
+        }
+    }, [highlightedItemIndex, isDropdownOpened, selectedItemIndex]);
+    /**
+     * Блокировка контрола посреди ввода завершает его так же, как потеря фокуса:
+     * меню закрывается, а недоведенное значение коммитится, а не остается висеть в поле.
+     */
+    useEffect(function () {
+        if (!disabled) {
+            return;
+        }
+        if (isMobileDropdownActive) {
+            closeOpenedDropdown();
+            return;
+        }
+        if (isDropdownOpened) {
+            closeDropdown();
+        }
+        if (isInputFocused) {
+            setIsInputFocused(false);
+            resetMouseInteractionState();
+            commitEditingValue();
+        }
+    }, [
+        closeDropdown,
+        closeOpenedDropdown,
+        commitEditingValue,
+        disabled,
+        isDropdownOpened,
+        isInputFocused,
+        isMobileDropdownActive,
+        resetMouseInteractionState,
+    ]);
+    var previousIsMobileLayoutRef = useRef(isMobileLayout);
+    /**
+     * Смена верстки переносит открытое меню в нужную версию: как в ComboBox, меню не закрывается.
+     * Начатый ввод переезжает вместе с ним, а если переезжать некуда — коммитится, как при потере фокуса.
+     */
+    useEffect(function () {
+        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) {
+            // Фокус сообщается до открытия пикера: иначе увод фокуса в нативный инпут закрыл бы сессию.
+            emitFocus(event);
+            if (!shouldSkipOpenDropdown) {
+                openNativeTimePicker();
+            }
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            if (!shouldSkipOpenDropdown) {
+                openDropdown();
+            }
+            // Дальше ввод идет в инпуте попапа, но фокус контрол получает здесь.
+            emitFocus(event);
+            return;
+        }
+        setIsInputFocused(true);
+        if (!shouldSkipOpenDropdown) {
+            openDropdown();
+        }
+        if (mouseDownSegmentRef.current && !isInputFocused) {
+            // По пустому полю ввод всегда начинается с часов, а по заполненному — с сегмента под курсором.
+            selectSegment(isTimeDisplayEmpty(editingValueRef.current) ? 'hours' : mouseDownSegmentRef.current);
+        }
+        else {
+            // Переезд фокуса внутри контрола продолжает начатый ввод, поэтому сегмент сохраняется:
+            // иначе следующая цифра ушла бы в часы и затерла бы набранное время.
+            selectSegment(isFocusMovedInsideControl ? selectedSegment : 'hours');
+        }
+        emitFocus(event);
+    };
+    var handleFocus = function (event) { return handleFocusBySource(event, false); };
+    var handleMobileFocus = function (event) { return handleFocusBySource(event, true); };
+    var handleBlurBySource = function (event, isMobilePopupInput) {
+        /**
+         * Пока открыт мобильный попап, фокус ходит между полем и его инпутом: контрол остается активным,
+         * поэтому наружу о таком blur сообщать нечего. Событие запоминается на случай,
+         * если фокус в инпуте попапа так и не оказался — тогда именно оно уйдет в `onBlur` при закрытии.
+         */
+        if (isMobileDropdownActive) {
+            event.persist();
+            mobileBlurEventRef.current = event;
+            return;
+        }
+        if (canUseMobileNativeTimePicker) {
+            if (isFocusMovedToNativePicker(event)) {
+                return;
+            }
+            // Ввод в мобильной версии не идет через поле, но незакоммиченное значение могло остаться
+            // от десктопной версии, если верстка сменилась посреди ввода.
+            if (isInputFocused) {
+                setIsInputFocused(false);
+                resetMouseInteractionState();
+                commitEditingValue();
+            }
+            emitBlur(event);
+            return;
+        }
+        // Инпут закрытого попапа фокуса уже не держит, но его blur может прийти на размонтировании.
+        if (isMobilePopupInput) {
+            return;
+        }
+        setIsInputFocused(false);
+        resetMouseInteractionState();
+        closeDropdown();
+        commitEditingValue();
+        emitBlur(event);
+    };
+    var handleBlur = function (event) { return handleBlurBySource(event, false); };
+    var handleMobileBlur = function (event) { return handleBlurBySource(event, true); };
+    var handleClick = function (event) {
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+        }
+        else {
+            openDropdown();
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    var handleMouseDownCaptureBySource = function (event, isMobilePopupInput) {
+        var _a, _b;
+        if (canUseMobileNativeTimePicker || (canUseMobileDropdownTimePicker && !isMobilePopupInput)) {
+            return;
+        }
+        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;
+        if (isInputFocused && segment === null) {
+            event.preventDefault();
+        }
+        isMouseFocusRef.current = !isInputFocused;
+        mouseDownSegmentRef.current = segment;
+    };
+    var handleMouseDownCapture = function (event) {
+        return handleMouseDownCaptureBySource(event, false);
+    };
+    var handleMobileMouseDownCapture = function (event) {
+        return handleMouseDownCaptureBySource(event, true);
+    };
+    var handleMouseUpBySource = function (_event, isMobilePopupInput) {
+        if (disabled || canUseMobileNativeTimePicker || (canUseMobileDropdownTimePicker && !isMobilePopupInput)) {
+            return;
+        }
+        syncSelectionWithDOM();
+    };
+    var handleMouseUp = function (event) { return handleMouseUpBySource(event, false); };
+    var handleMobileMouseUp = function (event) { return handleMouseUpBySource(event, true); };
+    var handleSelectSegmentByMouseBySource = function (segment, isMobilePopupInput) {
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            openDropdown();
+            return;
+        }
+        openDropdown();
+        if (disabled) {
+            return;
+        }
+        if (!(isMouseFocusRef.current && isTimeDisplayEmpty(editingValueRef.current)) && selectedSegment !== segment) {
+            normalizeCurrentSegmentIfNeeded(selectedSegment);
+            selectSegment(segment);
+        }
+        resetMouseInteractionState();
+    };
+    var handleSelectSegmentByMouse = function (segment) { return handleSelectSegmentByMouseBySource(segment, false); };
+    var handleMobileSelectSegmentByMouse = function (segment) {
+        return handleSelectSegmentByMouseBySource(segment, true);
+    };
+    var handleKeyDownBySource = function (event, isMobilePopupInput) {
+        var _a, _b, _c, _d;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            openDropdown();
+            return;
+        }
+        if (isShortcutSelectAll(event)) {
+            event.preventDefault();
+            selectAll();
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        var currentDisplayValue = displayValue;
+        var currentSegment = selectedSegment;
+        var hasAllSelectionInState = selection === 'all';
+        var hasAllSelectionInDOM = (_b = (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.isAllSelected()) !== null && _b !== void 0 ? _b : false;
+        var shouldHandleAsAllSelection = hasAllSelectionInState || hasAllSelectionInDOM;
+        if (hasAllSelectionInDOM && !hasAllSelectionInState) {
+            syncSelectionWithDOM();
+        }
+        if (shouldHandleAsAllSelection && (isKeyBackspace(event) || isKeyDelete(event))) {
+            event.preventDefault();
+            openDropdown();
+            updateEditingValueAfterUserEdit(getEmptyDisplayValue(format));
+            selectSegment('hours');
+            return;
+        }
+        if (DIGIT_REGEXP.test(event.key)) {
+            event.preventDefault();
+            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;
+        }
+        if (isKeyArrowLeft(event)) {
+            event.preventDefault();
+            normalizeCurrentSegmentIfNeeded(currentSegment);
+            selectSegment((_c = getPreviousTimeSegment(currentSegment)) !== null && _c !== void 0 ? _c : currentSegment);
+            return;
+        }
+        if (isModShift(isKeyTab)(event)) {
+            var previousSegment = getPreviousTimeSegment(currentSegment);
+            if (previousSegment) {
+                event.preventDefault();
+                normalizeCurrentSegmentIfNeeded(currentSegment);
+                selectSegment(previousSegment);
+            }
+            return;
+        }
+        if (isKeyArrowRight(event)) {
+            event.preventDefault();
+            normalizeCurrentSegmentIfNeeded(currentSegment);
+            selectSegment((_d = getNextTimeSegment(currentSegment, format)) !== null && _d !== void 0 ? _d : currentSegment);
+            return;
+        }
+        if (isKeyTab(event)) {
+            var nextSegment = getNextTimeSegment(currentSegment, format);
+            if (nextSegment) {
+                event.preventDefault();
+                normalizeCurrentSegmentIfNeeded(currentSegment);
+                selectSegment(nextSegment);
+            }
+            return;
+        }
+        if (isKeyArrowUp(event) || isKeyArrowDown(event)) {
+            event.preventDefault();
+            var itemStep = isKeyArrowUp(event) ? -1 : 1;
+            if (tryNavigateItems(itemStep)) {
+                return;
+            }
+            var step = isKeyArrowUp(event) ? 1 : -1;
+            updateEditingValueAfterUserEdit(shiftTimeSegmentValue(currentDisplayValue, currentSegment, step, format));
+            selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyBackspace(event)) {
+            event.preventDefault();
+            openDropdown();
+            var nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, currentSegment, format);
+            var nextSegment = currentSegment;
+            if (nextDisplayValue === currentDisplayValue) {
+                var previousSegment = getPreviousTimeSegment(currentSegment);
+                if (previousSegment) {
+                    nextSegment = previousSegment;
+                    nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, previousSegment, format);
+                }
+            }
+            updateEditingValueAfterUserEdit(nextDisplayValue);
+            selectSegment(nextSegment);
+            return;
+        }
+        if (isKeyDelete(event)) {
+            event.preventDefault();
+            openDropdown();
+            updateEditingValueAfterUserEdit(replaceTimeSegment(currentDisplayValue, currentSegment, EMPTY_SEGMENT, format));
+            selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyEscape(event)) {
+            if (isDropdownOpened) {
+                event.preventDefault();
+                closeOpenedDropdown();
+            }
+            return;
+        }
+        if (isKeyEnter(event)) {
+            if (isSourceFailed) {
+                event.preventDefault();
+                retrySource();
+                return;
+            }
+            if (isSelectHighlightedItem(event)) {
+                event.preventDefault();
+                return;
+            }
+            if (isMobileDropdownActive) {
+                event.preventDefault();
+                closeOpenedDropdown();
+                return;
+            }
+            // Enter не выбирает элемент, а лишь подтверждает введенное значение, как потеря фокуса.
+            commitEditingValue();
+            blinkInput();
+            if (isDropdownOpened) {
+                event.preventDefault();
+                closeDropdown();
+            }
+            return;
+        }
+        if (isKeySpace(event)) {
+            event.preventDefault();
+            var nextSegment = getNextTimeSegment(currentSegment, format);
+            var nextDisplayValue = commitTimeSegmentOnLeave(currentDisplayValue, currentSegment, format);
+            updateEditingValueAfterUserEdit(nextDisplayValue);
+            if (nextSegment) {
+                selectSegment(nextSegment);
+            }
+            else {
+                selectSegment(currentSegment);
+            }
+            return;
+        }
+        if (isKeyChar(event)) {
+            event.preventDefault();
+            handleUnexpectedInput(event.key);
+        }
+    };
+    var handleKeyDown = function (event) { return handleKeyDownBySource(event, false); };
+    var handleMobileKeyDown = function (event) { return handleKeyDownBySource(event, true); };
+    var handlePasteBySource = function (event, isMobilePopupInput) {
+        var _a, _b;
+        onPaste === null || onPaste === void 0 ? void 0 : onPaste(event);
+        if (event.defaultPrevented || disabled) {
+            return;
+        }
+        if (canUseMobileNativeTimePicker || (canUseMobileDropdownTimePicker && !isMobilePopupInput)) {
+            return;
+        }
+        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');
+    };
+    var handlePaste = function (event) { return handlePasteBySource(event, false); };
+    var handleMobilePaste = function (event) { return handlePasteBySource(event, true); };
+    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: commitValue, onBlur: emitBlur })),
+            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, isFailed: isSourceFailed, errorNetworkButton: locale.errorNetworkButton, errorNetworkMessage: locale.errorNetworkMessage, 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 || isSourceFailed ? true : undefined, "aria-controls": resolvedItems.length > 0 || isLoadingItems || isSourceFailed ? popupId : undefined, "aria-activedescendant": activeDescendantId, onFocus: handleMobileFocus, onBlur: handleMobileBlur, onClick: handleClick, onKeyDown: handleMobileKeyDown, onMouseDownCapture: handleMobileMouseDownCapture, onMouseUp: handleMobileMouseUp, onPaste: handleMobilePaste, onSelectSegment: handleMobileSelectSegmentByMouse, onRetry: retrySource, 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, size: size, resolvedItems: resolvedItems, renderItem: renderItem, isLoading: isLoadingItems, isFailed: isSourceFailed, errorNetworkButton: locale.errorNetworkButton, errorNetworkMessage: locale.errorNetworkMessage, highlightedItemIndex: highlightedItemIndex, selectedValue: selectedValue, itemRefs: itemRefs, onRetry: retrySource, onSelectItem: selectItem })))));
+}), { validate: validateTimePicker });
+//# sourceMappingURL=TimePicker.js.map