@skbkontur/react-ui 6.0.7-b5d2c.0 → 6.0.7-eab55.0

package/components/TimePicker/TimePicker.js

@@ -20,91 +20,125 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useContext, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
-import { Menu } from '../../internal/Menu/index.js';
-import { Popup } from '../../internal/Popup/index.js';
-import { ZIndex } from '../../internal/ZIndex/index.js';
-import { isShortcutSelectAll } from '../../lib/events/keyboard/identifiers.js';
+import { NativeTimeInput } from '../../internal/NativeTimeInput/index.js';
+import { isIOS, isMobile } from '../../lib/client.js';
+import { isKeyArrowDown, isKeyArrowLeft, isKeyArrowRight, isKeyArrowUp, isKeyBackspace, isKeyChar, isKeyDelete, isKeyEnter, isKeySpace, isKeyTab, isModShift, isShortcutSelectAll, } from '../../lib/events/keyboard/identifiers.js';
 import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
-import { getMenuPositions } from '../../lib/getMenuPositions.js';
 import { useStyles } from '../../lib/renderEnvironment/index.js';
 import { ThemeContext } from '../../lib/theming/ThemeContext.js';
-import { MenuItem } from '../MenuItem/index.js';
 import { scrollSelectedSlotIntoView } from './helpers/scrollSelectedSlotIntoView.js';
-import { DIGIT_REGEXP } from './helpers/TimePicker.constants.js';
+import { DIGIT_REGEXP, EMPTY_VALUE } from './helpers/TimePicker.constants.js';
 import { clearTimeSegment, commitTimeSegmentOnLeave, deleteTimeSegmentDigit, formatDigitToTimeSegment, shiftTimeSegmentValue, } from './helpers/TimePicker.editing.js';
 import { DEFAULT_TIME_PICKER_SLOTS, getTimePickerPopupMaxHeight } from './helpers/TimePicker.layout.js';
 import { getNextTimeSegment, getPreviousTimeSegment } from './helpers/TimePicker.selection.js';
-import { getEmptyDisplayValue, isTimeDisplayEmpty, normalizeSlotValue, normalizeTimeValue, parsePastedTimeValue, } from './helpers/TimePicker.value.js';
+import { getEmptyDisplayValue, isTimeDisplayEmpty, isTimeValueInRange, normalizeTimeValue, parsePastedTimeValue, } from './helpers/TimePicker.value.js';
 import { useTimePickerDropdown } from './hooks/useTimePickerDropdown.js';
 import { useTimePickerSelection } from './hooks/useTimePickerSelection.js';
 import { useTimePickerValue } from './hooks/useTimePickerValue.js';
 import { TimeInput } from './TimeInput.js';
 import { getStyles } from './TimePicker.styles.js';
+import { TimePickerMobilePopup } from './TimePickerMobilePopup.js';
+import { TimePickerPopup } from './TimePickerPopup.js';
 export var TimePickerDataTids = {
     root: 'TimePicker__root',
     input: 'TimePicker__input',
+    mobileInput: 'TimePicker__mobileInput',
+    nativeInput: 'TimePicker__nativeInput',
     popup: 'TimePicker__popup',
+    mobilePopup: 'TimePicker__mobilePopup',
     slot: 'TimePicker__slot',
-    rightContent: 'TimePicker__rightContent',
 };
+/** Поле с временем помогает вводить время с клавиатуры или выбирать его с помощью мыши */
 export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
-    var disabled = props.disabled, _a = props.dropdown, dropdown = _a === void 0 ? false : _a, _b = props.precision, precision = _b === void 0 ? 'minute' : _b, _c = props.size, size = _c === void 0 ? 'small' : _c, slots = props.slots, menuPos = props.menuPos, menuAlign = props.menuAlign, rightContent = props.rightContent, valueProp = props.value, onValueChange = props.onValueChange, onFocus = props.onFocus, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, onPaste = props.onPaste, inputProps = __rest(props, ["disabled", "dropdown", "precision", "size", "slots", "menuPos", "menuAlign", "rightContent", "value", "onValueChange", "onFocus", "onBlur", "onClick", "onKeyDown", "onPaste"]);
+    var disabled = props.disabled, _a = props.useMobileNativeTimePicker, useMobileNativeTimePicker = _a === void 0 ? false : _a, _b = props.dropdown, dropdown = _b === void 0 ? false : _b, _c = props.precision, precision = _c === void 0 ? 'minute' : _c, _d = props.size, size = _d === void 0 ? 'small' : _d, slots = props.slots, menuPos = props.menuPos, menuAlign = props.menuAlign, menuWidth = props.menuWidth, minValue = props.minValue, maxValue = props.maxValue, value = props.value, onValueChange = props.onValueChange, onFocus = props.onFocus, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, onPaste = props.onPaste, inputProps = __rest(props, ["disabled", "useMobileNativeTimePicker", "dropdown", "precision", "size", "slots", "menuPos", "menuAlign", "menuWidth", "minValue", "maxValue", "value", "onValueChange", "onFocus", "onBlur", "onClick", "onKeyDown", "onPaste"]);
     var theme = useContext(ThemeContext);
     var styles = useStyles(getStyles);
-    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 activeInputRef = useRef(null);
+    var nativeInputRef = useRef(null);
     var rootRef = useRef(null);
     var slotRefs = useRef(new Map());
     var isMouseFocusRef = useRef(false);
     var isMouseDownOnFragmentRef = useRef(false);
     var mouseDownSegmentRef = useRef(null);
-    var resolvedSlots = useMemo(function () { return slots !== null && slots !== void 0 ? slots : DEFAULT_TIME_PICKER_SLOTS; }, [slots]);
-    var _e = useTimePickerValue({ isInputFocused: isInputFocused, precision: precision, value: valueProp, onValueChange: onValueChange }), editingValue = _e.editingValue, editingValueRef = _e.editingValueRef, setEditingValue = _e.setEditingValue, updateEditingValue = _e.updateEditingValue, commitEditingValue = _e.commitEditingValue, clearEditingValue = _e.clearEditingValue;
+    var _f = useState(false), isMobileDevice = _f[0], setIsMobileDevice = _f[1];
+    var _g = useState(false), canUseMobileNativeTimePicker = _g[0], setCanUseMobileNativeTimePicker = _g[1];
+    var _h = useTimePickerValue({ isInputFocused: isInputFocused, precision: precision, value: value, onValueChange: onValueChange }), editingValue = _h.editingValue, editingValueRef = _h.editingValueRef, setEditingValue = _h.setEditingValue, updateEditingValue = _h.updateEditingValue, commitEditingValue = _h.commitEditingValue, clearEditingValue = _h.clearEditingValue;
+    var resolvedSlots = useMemo(function () {
+        return (slots !== null && slots !== void 0 ? slots : DEFAULT_TIME_PICKER_SLOTS).map(function (slot) { return (__assign(__assign({}, slot), { disabled: Boolean(slot.disabled) || !isTimeValueInRange(slot.time, precision, minValue, maxValue) })); });
+    }, [maxValue, minValue, precision, slots]);
+    var popupMaxHeight = getTimePickerPopupMaxHeight(size, theme);
+    var normalizedValue = normalizeTimeValue(editingValue, precision);
+    var selectedSlotIndex = resolvedSlots.findIndex(function (slot) { return normalizeTimeValue(slot.time, precision) === normalizedValue; });
+    var canUseMobileDropdownTimePicker = dropdown && isMobileDevice && !canUseMobileNativeTimePicker;
     var displayValue = editingValue;
     if (isInputFocused) {
-        displayValue = editingValue || getEmptyDisplayValue(precision);
+        displayValue = editingValue === EMPTY_VALUE ? getEmptyDisplayValue(precision) : editingValue;
     }
     else if (isTimeDisplayEmpty(editingValue)) {
-        displayValue = '';
+        displayValue = EMPTY_VALUE;
     }
-    var _f = useTimePickerSelection({
+    var _j = useTimePickerSelection({
         isInputFocused: isInputFocused,
         precision: precision,
         displayValue: displayValue,
-        inputRef: inputRef,
-    }), selectedSegment = _f.selectedSegment, selectSegment = _f.selectSegment;
-    var popupMaxHeight = getTimePickerPopupMaxHeight(size, theme);
-    var normalizedValue = normalizeTimeValue(editingValue || valueProp || '', precision);
-    var selectedSlotIndex = resolvedSlots.findIndex(function (slot) { return normalizeSlotValue(slot.time, precision) === normalizedValue; });
+        inputRef: activeInputRef,
+    }), selectedSegment = _j.selectedSegment, selectSegment = _j.selectSegment;
+    var resetMouseInteractionState = useCallback(function () {
+        isMouseFocusRef.current = false;
+        isMouseDownOnFragmentRef.current = false;
+        mouseDownSegmentRef.current = null;
+    }, []);
     var normalizeCurrentSegmentIfNeeded = useCallback(function (segment) {
-        var nextDisplayValue = commitTimeSegmentOnLeave(editingValue || getEmptyDisplayValue(precision), segment, precision);
+        var nextDisplayValue = commitTimeSegmentOnLeave(editingValue === EMPTY_VALUE ? getEmptyDisplayValue(precision) : editingValue, segment, precision);
         updateEditingValue(nextDisplayValue);
     }, [editingValue, precision, updateEditingValue]);
-    var focusInput = useCallback(function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    var blurInput = useCallback(function () {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-    }, []);
-    var _g = useTimePickerDropdown({
+    var openNativeTimePicker = useCallback(function () {
+        var _a, _b;
+        if (!canUseMobileNativeTimePicker || disabled) {
+            return;
+        }
+        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();
+        }
+    }, [canUseMobileNativeTimePicker, disabled]);
+    var _k = useTimePickerDropdown({
         disabled: disabled,
         dropdown: dropdown,
         slots: resolvedSlots,
         selectedSlotIndex: selectedSlotIndex >= 0 ? selectedSlotIndex : null,
-    }), isDropdownOpened = _g.isDropdownOpened, highlightedSlotIndex = _g.highlightedSlotIndex, openDropdown = _g.openDropdown, closeDropdown = _g.closeDropdown, resetHighlightedSlot = _g.resetHighlightedSlot, tryNavigateSlots = _g.tryNavigateSlots;
+    }), isDropdownOpened = _k.isDropdownOpened, highlightedSlotIndex = _k.highlightedSlotIndex, openDropdown = _k.openDropdown, closeDropdown = _k.closeDropdown, resetHighlightedSlot = _k.resetHighlightedSlot, tryNavigateSlots = _k.tryNavigateSlots;
+    useEffect(function () {
+        activeInputRef.current =
+            canUseMobileDropdownTimePicker && isDropdownOpened ? mobileInputRef.current : inputRef.current;
+    }, [canUseMobileDropdownTimePicker, isDropdownOpened]);
     var selectSlot = useCallback(function (slot) {
         if (slot.disabled) {
             return;
         }
-        var nextValue = normalizeSlotValue(slot.time, precision);
+        var nextValue = normalizeTimeValue(slot.time, precision);
         setEditingValue(nextValue);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+        if (canUseMobileDropdownTimePicker) {
+            setIsInputFocused(false);
+            resetMouseInteractionState();
+        }
         closeDropdown();
-    }, [closeDropdown, onValueChange, precision, setEditingValue]);
+    }, [
+        canUseMobileDropdownTimePicker,
+        closeDropdown,
+        onValueChange,
+        precision,
+        resetMouseInteractionState,
+        setEditingValue,
+    ]);
     var isSelectHighlightedSlot = useCallback(function () {
         if (highlightedSlotIndex === null) {
             return false;
@@ -116,6 +150,25 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
         selectSlot(slot);
         return true;
     }, [highlightedSlotIndex, resolvedSlots, selectSlot]);
+    var focusInput = useCallback(function () {
+        var _a;
+        (_a = activeInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    var blurInput = useCallback(function () {
+        var _a;
+        (_a = activeInputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }, []);
+    var blinkInput = useCallback(function () {
+        var _a;
+        (_a = activeInputRef.current) === null || _a === void 0 ? void 0 : _a.blink();
+    }, []);
+    useImperativeHandle(ref, function () { return ({
+        focus: focusInput,
+        blur: blurInput,
+        blink: blinkInput,
+        getNode: function () { var _a, _b; return (_b = (_a = activeInputRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
+        getRootNode: function () { return rootRef.current; },
+    }); }, [blinkInput, blurInput, focusInput]);
     useLayoutEffect(function () {
         if (!isDropdownOpened) {
             return;
@@ -129,13 +182,32 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
             scrollSelectedSlotIntoView(targetNode);
         }
     }, [highlightedSlotIndex, isDropdownOpened, selectedSlotIndex]);
-    useImperativeHandle(ref, function () { return ({
-        focus: focusInput,
-        blur: blurInput,
-        getNode: function () { var _a, _b; return (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getNode()) !== null && _b !== void 0 ? _b : null; },
-        getRootNode: function () { return rootRef.current; },
-    }); }, [blurInput, focusInput]);
-    var handleFocus = function (event) {
+    useEffect(function () {
+        setIsMobileDevice(Boolean(isMobile));
+        setCanUseMobileNativeTimePicker(useMobileNativeTimePicker && Boolean(isMobile));
+    }, [useMobileNativeTimePicker]);
+    var handleCloseMobileDropdown = useCallback(function () {
+        setIsInputFocused(false);
+        resetMouseInteractionState();
+        if (isTimeDisplayEmpty(editingValueRef.current)) {
+            clearEditingValue();
+        }
+        else {
+            commitEditingValue();
+        }
+        closeDropdown();
+    }, [clearEditingValue, closeDropdown, commitEditingValue, editingValueRef, resetMouseInteractionState]);
+    var handleFocusBySource = function (event, isMobilePopupInput) {
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            openDropdown();
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            return;
+        }
         setIsInputFocused(true);
         openDropdown();
         if (isMouseDownOnFragmentRef.current && !isInputFocused) {
@@ -151,11 +223,23 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
         }
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     };
-    var handleBlur = function (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);
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            return;
+        }
         setIsInputFocused(false);
-        isMouseFocusRef.current = false;
-        isMouseDownOnFragmentRef.current = false;
-        mouseDownSegmentRef.current = null;
+        resetMouseInteractionState();
+        if (isMobilePopupInput) {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            return;
+        }
         closeDropdown();
         if (isTimeDisplayEmpty(editingValueRef.current)) {
             clearEditingValue();
@@ -165,13 +249,31 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
         commitEditingValue();
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     };
-    var handleClick = function (event) {
+    var handleBlur = function (event) { return handleBlurBySource(event, false); };
+    var handleMobileBlur = function (event) { return handleBlurBySource(event, true); };
+    var handleClickBySource = function (event, isMobilePopupInput) {
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            openDropdown();
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            return;
+        }
         openDropdown();
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
     };
-    var handleMouseDownCapture = function (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;
-        var segment = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getSegment(event.target)) !== null && _b !== void 0 ? _b : null;
+        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;
         var isFragment = segment !== null;
         if (isInputFocused && !isFragment) {
             event.preventDefault();
@@ -180,7 +282,21 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
         isMouseDownOnFragmentRef.current = isFragment;
         mouseDownSegmentRef.current = segment;
     };
-    var handleSelectSegmentByMouse = function (segment) {
+    var handleMouseDownCapture = function (event) {
+        return handleMouseDownCaptureBySource(event, false);
+    };
+    var handleMobileMouseDownCapture = function (event) {
+        return handleMouseDownCaptureBySource(event, true);
+    };
+    var handleSelectSegmentByMouseBySource = function (segment, isMobilePopupInput) {
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            openDropdown();
+            return;
+        }
         openDropdown();
         if (disabled) {
             return;
@@ -189,27 +305,27 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
             normalizeCurrentSegmentIfNeeded(selectedSegment);
             selectSegment(segment);
         }
-        isMouseFocusRef.current = false;
-        isMouseDownOnFragmentRef.current = false;
-        mouseDownSegmentRef.current = null;
+        resetMouseInteractionState();
     };
-    var handleRightContentMouseDown = function (event) {
-        if (disabled) {
-            return;
-        }
-        event.preventDefault();
-        openDropdown();
-        focusInput();
-    };
-    var handleKeyDown = function (event) {
-        var _a, _b, _c, _d, _e, _f;
+    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, _e, _f, _g;
         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();
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectAll();
+            (_a = activeInputRef.current) === null || _a === void 0 ? void 0 : _a.selectAll();
             return;
         }
         if (event.altKey || event.ctrlKey || event.metaKey) {
@@ -217,8 +333,8 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
         }
         var currentDisplayValue = displayValue;
         var currentSegment = selectedSegment;
-        var isAllSelected = (_c = (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.isAllSelected()) !== null && _c !== void 0 ? _c : false;
-        if (isAllSelected && (event.key === 'Backspace' || event.key === 'Delete')) {
+        var isAllSelected = (_c = (_b = activeInputRef.current) === null || _b === void 0 ? void 0 : _b.isAllSelected()) !== null && _c !== void 0 ? _c : false;
+        if (isAllSelected && (isKeyBackspace(event) || isKeyDelete(event))) {
             event.preventDefault();
             updateEditingValue(getEmptyDisplayValue(precision));
             selectSegment('hours');
@@ -229,123 +345,134 @@ export var TimePicker = forwardRefAndName('TimePicker', function (props, ref) {
             resetHighlightedSlot();
             var result = formatDigitToTimeSegment(currentDisplayValue, currentSegment, event.key, precision);
             if (result.shouldBlink) {
-                (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blink();
+                (_d = activeInputRef.current) === null || _d === void 0 ? void 0 : _d.blink();
                 return;
             }
             updateEditingValue(result.nextValue);
             selectSegment(result.selectedSegment);
             return;
         }
-        switch (event.key) {
-            case 'ArrowLeft': {
+        if (isKeyArrowLeft(event)) {
+            event.preventDefault();
+            normalizeCurrentSegmentIfNeeded(currentSegment);
+            selectSegment((_e = getPreviousTimeSegment(currentSegment)) !== null && _e !== void 0 ? _e : currentSegment);
+            return;
+        }
+        if (isModShift(isKeyTab)(event)) {
+            var previousSegment = getPreviousTimeSegment(currentSegment);
+            if (previousSegment) {
                 event.preventDefault();
                 normalizeCurrentSegmentIfNeeded(currentSegment);
-                selectSegment((_e = getPreviousTimeSegment(currentSegment)) !== null && _e !== void 0 ? _e : currentSegment);
-                return;
+                selectSegment(previousSegment);
             }
-            case 'ArrowRight': {
+            return;
+        }
+        if (isKeyArrowRight(event)) {
+            event.preventDefault();
+            normalizeCurrentSegmentIfNeeded(currentSegment);
+            selectSegment((_f = getNextTimeSegment(currentSegment, precision)) !== null && _f !== void 0 ? _f : currentSegment);
+            return;
+        }
+        if (isKeyTab(event)) {
+            var nextSegment = getNextTimeSegment(currentSegment, precision);
+            if (nextSegment) {
                 event.preventDefault();
                 normalizeCurrentSegmentIfNeeded(currentSegment);
-                selectSegment((_f = getNextTimeSegment(currentSegment, precision)) !== null && _f !== void 0 ? _f : currentSegment);
-                return;
+                selectSegment(nextSegment);
             }
-            case 'ArrowUp':
-            case 'ArrowDown': {
-                event.preventDefault();
-                var slotStep = event.key === 'ArrowUp' ? -1 : 1;
-                if (tryNavigateSlots(slotStep)) {
-                    return;
-                }
-                var step = event.key === 'ArrowUp' ? 1 : -1;
-                updateEditingValue(shiftTimeSegmentValue(currentDisplayValue, currentSegment, step, precision));
-                selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyArrowUp(event) || isKeyArrowDown(event)) {
+            event.preventDefault();
+            var slotStep = isKeyArrowUp(event) ? -1 : 1;
+            if (tryNavigateSlots(slotStep)) {
                 return;
             }
-            case 'Backspace': {
-                event.preventDefault();
-                var nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, currentSegment, precision);
-                var nextSegment = currentSegment;
-                if (nextDisplayValue === currentDisplayValue) {
-                    var previousSegment = getPreviousTimeSegment(currentSegment);
-                    if (previousSegment) {
-                        nextSegment = previousSegment;
-                        nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, previousSegment, precision);
-                    }
+            var step = isKeyArrowUp(event) ? 1 : -1;
+            updateEditingValue(shiftTimeSegmentValue(currentDisplayValue, currentSegment, step, precision));
+            selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyBackspace(event)) {
+            event.preventDefault();
+            var nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, currentSegment, precision);
+            var nextSegment = currentSegment;
+            if (nextDisplayValue === currentDisplayValue) {
+                var previousSegment = getPreviousTimeSegment(currentSegment);
+                if (previousSegment) {
+                    nextSegment = previousSegment;
+                    nextDisplayValue = deleteTimeSegmentDigit(currentDisplayValue, previousSegment, precision);
                 }
-                updateEditingValue(nextDisplayValue);
-                selectSegment(nextSegment);
-                return;
             }
-            case 'Delete': {
+            updateEditingValue(nextDisplayValue);
+            selectSegment(nextSegment);
+            return;
+        }
+        if (isKeyDelete(event)) {
+            event.preventDefault();
+            updateEditingValue(clearTimeSegment(currentDisplayValue, currentSegment, precision));
+            selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyEnter(event)) {
+            if (isSelectHighlightedSlot()) {
                 event.preventDefault();
-                updateEditingValue(clearTimeSegment(currentDisplayValue, currentSegment, precision));
-                selectSegment(currentSegment);
-                return;
             }
-            case 'Enter': {
-                if (isSelectHighlightedSlot()) {
-                    event.preventDefault();
-                }
-                return;
+            return;
+        }
+        if (isKeySpace(event)) {
+            event.preventDefault();
+            var nextSegment = getNextTimeSegment(currentSegment, precision);
+            var nextDisplayValue = commitTimeSegmentOnLeave(currentDisplayValue, currentSegment, precision);
+            updateEditingValue(nextDisplayValue);
+            if (nextSegment) {
+                selectSegment(nextSegment);
             }
-            case ' ': {
-                event.preventDefault();
-                var nextSegment = getNextTimeSegment(currentSegment, precision);
-                var nextDisplayValue = commitTimeSegmentOnLeave(currentDisplayValue, currentSegment, precision);
-                updateEditingValue(nextDisplayValue);
-                if (nextSegment) {
-                    selectSegment(nextSegment);
-                }
-                else {
-                    selectSegment(currentSegment);
-                }
-                return;
+            else {
+                selectSegment(currentSegment);
             }
-            default:
-                return;
+            return;
+        }
+        if (isKeyChar(event)) {
+            (_g = activeInputRef.current) === null || _g === void 0 ? void 0 : _g.blink();
         }
     };
-    var handlePaste = function (event) {
-        var _a, _b, _c;
+    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;
         }
-        var pastedValue = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) !== null && _b !== void 0 ? _b : '';
+        if (canUseMobileNativeTimePicker || (canUseMobileDropdownTimePicker && !isMobilePopupInput)) {
+            return;
+        }
+        var pastedValue = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
         var nextDisplayValue = parsePastedTimeValue(pastedValue, precision);
         event.preventDefault();
         if (isTimeDisplayEmpty(nextDisplayValue)) {
-            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.blink();
+            (_b = activeInputRef.current) === null || _b === void 0 ? void 0 : _b.blink();
             return;
         }
         updateEditingValue(nextDisplayValue);
         selectSegment('hours');
     };
+    var handlePaste = function (event) { return handlePasteBySource(event, false); };
+    var handleMobilePaste = function (event) { return handlePasteBySource(event, true); };
+    var handleNativeValueChange = useCallback(function (nextValue) {
+        setEditingValue(nextValue);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+    }, [onValueChange, setEditingValue]);
     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, size: size, precision: precision, rightContent: rightContent, value: displayValue, onClick: handleClick, onBlur: handleBlur, onFocus: handleFocus, onRightContentMouseDown: handleRightContentMouseDown, onMouseDownCapture: handleMouseDownCapture, onKeyDown: handleKeyDown, onSelectSegment: handleSelectSegmentByMouse, onPaste: handlePaste })),
-            dropdown && isDropdownOpened && rootRef.current && (React.createElement(Popup, { opened: true, hasShadow: true, "data-tid": TimePickerDataTids.popup, anchorElement: rootRef.current, priority: ZIndex.priorities.PopupMenu, positions: getMenuPositions(menuPos, menuAlign), margin: parseInt(theme.menuOffsetY) - 1 },
-                React.createElement("div", { className: styles.popup(theme), onMouseDown: function (event) { return event.preventDefault(); } },
-                    React.createElement(Menu, { hasMargin: false, width: 'auto', maxHeight: popupMaxHeight }, resolvedSlots.map(function (slot, index) {
-                        var normalizedSlot = normalizeSlotValue(slot.time, precision);
-                        var state;
-                        if (highlightedSlotIndex === index) {
-                            state = 'hover';
-                        }
-                        else if (normalizedSlot === normalizedValue) {
-                            state = 'selected';
-                        }
-                        return (React.createElement(MenuItem, { key: "".concat(slot.time, "-").concat(index), disabled: slot.disabled, size: size, state: state, onClick: function () { return selectSlot(slot); } },
-                            React.createElement("span", { ref: function (node) {
-                                    if (node) {
-                                        slotRefs.current.set(index, node);
-                                    }
-                                    else {
-                                        slotRefs.current.delete(index);
-                                    }
-                                }, "data-tid": TimePickerDataTids.slot, className: styles.slot() },
-                                React.createElement("span", { className: styles.slotTime() }, normalizedSlot),
-                                slot.info && React.createElement("span", { className: styles.slotInfo(theme) }, slot.info))));
-                    }))))))));
+            React.createElement(TimeInput, __assign({}, inputProps, { "data-tid": TimePickerDataTids.input, ref: inputRef, disabled: disabled, dropdown: dropdown, size: size, precision: precision, value: displayValue, onClick: handleClick, onBlur: handleBlur, onFocus: handleFocus, onMouseDownCapture: handleMouseDownCapture, onKeyDown: handleKeyDown, onSelectSegment: handleSelectSegmentByMouse, onPaste: handlePaste })),
+            canUseMobileNativeTimePicker && (React.createElement(NativeTimeInput, { "data-tid": TimePickerDataTids.nativeInput, disabled: disabled, ref: nativeInputRef, precision: precision, minValue: minValue, maxValue: maxValue, value: editingValue, onValueChange: handleNativeValueChange })),
+            canUseMobileDropdownTimePicker && isDropdownOpened && (React.createElement(TimePickerMobilePopup, { opened: isDropdownOpened, value: displayValue, inputRef: mobileInputRef, disabled: disabled, precision: precision, size: size, resolvedSlots: resolvedSlots, highlightedSlotIndex: highlightedSlotIndex, normalizedValue: normalizedValue, slotRefs: slotRefs, error: props.error, warning: props.warning, "aria-describedby": props['aria-describedby'], "aria-label": props['aria-label'], onFocus: handleMobileFocus, onBlur: handleMobileBlur, onClick: handleMobileClick, onKeyDown: handleMobileKeyDown, onMouseDownCapture: handleMobileMouseDownCapture, onPaste: handleMobilePaste, onSelectSegment: handleMobileSelectSegmentByMouse, onSelectSlot: selectSlot, onCloseRequest: handleCloseMobileDropdown })),
+            dropdown &&
+                !canUseMobileNativeTimePicker &&
+                !canUseMobileDropdownTimePicker &&
+                isDropdownOpened &&
+                rootRef.current && (React.createElement(TimePickerPopup, { anchorElement: rootRef.current, menuPos: menuPos, menuAlign: menuAlign, menuWidth: menuWidth, popupMaxHeight: popupMaxHeight, precision: precision, size: size, resolvedSlots: resolvedSlots, highlightedSlotIndex: highlightedSlotIndex, normalizedValue: normalizedValue, slotRefs: slotRefs, onSelectSlot: selectSlot })))));
 });
 //# sourceMappingURL=TimePicker.js.map