@skbkontur/react-ui 6.1.3 → 6.1.4-eef21.0

package/components/TimePicker/TimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.js","sourceRoot":"","sources":["TimeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { InputLikeText } from '../../internal/InputLikeText/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\nimport { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { InputProps } from '../Input/index.js';\nimport { getTimePickerInputMinWidth, getTimePickerSuffixMargin } from './helpers/TimePicker.layout.js';\nimport { getTimeSegments, type TimeFormat, type TimeSegment } from './helpers/TimePicker.shared.js';\nimport { TimeClockIcon } from './TimeClockIcon.js';\nimport type { TimeFragmentsViewRef } from './TimeFragmentsView.js';\nimport { TimeFragmentsView } from './TimeFragmentsView.js';\nimport { getStyles } from './TimePicker.styles.js';\n\nexport interface TimeInputRef {\n  focus(): void;\n\n  blur(): void;\n\n  blink(): void;\n\n  isFragment(el: HTMLElement | EventTarget | null): boolean;\n\n  isAllSelected(): boolean;\n\n  getSegment(el: HTMLElement | EventTarget | null): TimeSegment | null;\n\n  selectSegment(segment: TimeSegment): void;\n\n  selectAll(): void;\n\n  getNode(): HTMLElement | null;\n}\n\nexport interface TimeInputProps extends Omit<InputProps, 'type' | 'value' | 'onValueChange' | 'inputMode'> {\n  hasDropdown?: boolean;\n  format: TimeFormat;\n  value: string;\n  'aria-placeholder'?: string;\n  onSelectSegment?(segment: TimeSegment, event: React.MouseEvent<HTMLSpanElement>): void;\n}\n\nexport const TimeInput = forwardRefAndName<TimeInputRef, TimeInputProps>('TimeInput', (props, ref) => {\n  const {\n    hasDropdown = false,\n    size = 'small',\n    disabled,\n    autoFocus,\n    suffix,\n    style,\n    width,\n    corners,\n    rightIcon,\n    format,\n    value,\n    onSelectSegment,\n    ...rest\n  } = props;\n\n  const theme = useContext(ThemeContext);\n\n  const { cx } = useEmotion();\n\n  const styles = useStyles(getStyles);\n\n  const inputLikeTextRef = useRef<InputLikeText>(null);\n  const fragmentsViewRef = useRef<TimeFragmentsViewRef>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      focus: () => inputLikeTextRef.current?.focus(),\n      blur: () => inputLikeTextRef.current?.blur(),\n      blink: () => inputLikeTextRef.current?.blink(),\n      getNode: () => inputLikeTextRef.current?.getNode() ?? null,\n      isFragment: (el) => fragmentsViewRef.current?.isFragment(el) ?? false,\n      getSegment: (el) => fragmentsViewRef.current?.getSegment(el) ?? null,\n      selectAll: () => {\n        const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, 0, rootNode.childNodes.length);\n      },\n\n      isAllSelected: () => {\n        const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return false;\n        }\n\n        const selection = rootNode.ownerDocument.defaultView?.getSelection() ?? null;\n\n        if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {\n          return false;\n        }\n\n        const range = selection.getRangeAt(0);\n        const text = rootNode.textContent ?? '';\n\n        return (\n          range.toString() === text && rootNode.contains(range.startContainer) && rootNode.contains(range.endContainer)\n        );\n      },\n\n      selectSegment: (segment) => {\n        const rootNode = fragmentsViewRef.current?.getRootNode() ?? null;\n\n        if (!rootNode) {\n          return;\n        }\n\n        const segmentIndex = getTimeSegments(format).indexOf(segment);\n        const start = segmentIndex < 0 ? 0 : segmentIndex * 2;\n        const end = start + 1;\n\n        inputLikeTextRef.current?.selectInnerNode(rootNode, start, end);\n      },\n    }),\n    [format],\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) {\n      return;\n    }\n\n    const timer = setTimeout(() => {\n      inputLikeTextRef.current?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(timer);\n    };\n  }, []);\n\n  const resolvedRightIcon =\n    rightIcon === undefined ? (\n      <span\n        className={cx(styles.rightIcon(), styles.rightIconDefault(theme), {\n          [styles.rightIconInteractive()]: hasDropdown && !disabled,\n        })}\n      >\n        <TimeClockIcon size={size} />\n      </span>\n    ) : (\n      rightIcon\n    );\n  const suffixMarginLeft = getTimePickerSuffixMargin(size, theme);\n  const inputMinWidth = getTimePickerInputMinWidth(size, format, resolvedRightIcon !== null, theme);\n\n  return (\n    <InputLikeText\n      ref={inputLikeTextRef}\n      {...rest}\n      takeContentWidth\n      disabled={disabled}\n      size={size}\n      inputMode={'numeric'}\n      width={width ?? 'auto'}\n      suffix={suffix && <span style={{ marginLeft: suffixMarginLeft }}>{suffix}</span>}\n      style={{ ...style, minWidth: inputMinWidth, ...corners }}\n      rightIcon={resolvedRightIcon}\n      value={value}\n    >\n      <TimeFragmentsView\n        ref={fragmentsViewRef}\n        format={format}\n        size={size}\n        value={value}\n        onSelectSegment={onSelectSegment}\n      />\n    </InputLikeText>\n  );\n});\n"]}

package/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,77 @@
+import type { AriaAttributes, HTMLAttributes, ReactNode } from 'react';
+import React from 'react';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { SizeProp } from '../../lib/types/props.js';
+import type { TimeFormat, TimeItem } from './helpers/TimePicker.shared.js';
+export interface TimePickerProps extends CommonProps, Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'> {
+    /** Устанавливает формат времени @default HH:mm */
+    format?: TimeFormat;
+    /** Определяет массив объектов с элементами в формате TimeItem. */
+    items?: TimeItem[];
+    /** Задает нижнюю границу времени. Элементы за границей становятся заблокированными. */
+    minTime?: string;
+    /** Задает верхнюю границу времени. Элементы за границей становятся заблокированными. */
+    maxTime?: string;
+    /** Значение поля @param value. */
+    value?: string;
+    /** Устанавливает фокус на поле ввода после окончания загрузки страницы @default false */
+    autoFocus?: boolean;
+    /** Делает компонент заблокированным. */
+    disabled?: boolean;
+    /** Переводит контрол в состояние валидации ошибки. */
+    error?: boolean;
+    /** Переводит контрол в состояние валидации предупреждения. */
+    warning?: boolean;
+    /** Включает нативный системный выбор времени на мобильных устройствах. */
+    useMobileNativeTimePicker?: boolean;
+    /** Расположение выпадающего меню. */
+    menuPos?: 'top' | 'bottom';
+    /** Выравнивание выпадающего меню. */
+    menuAlign?: 'left' | 'right';
+    /** Ширина выпадающего меню. По умолчанию — минимальная ширина поля ввода, расширяется по контенту. */
+    menuWidth?: string | number;
+    /** Задает ширину поля. */
+    width?: string | number;
+    /** Переопределяет иконку или скрывает, если передать `null`. */
+    rightIcon?: React.ReactNode | (() => React.ReactNode);
+    /** Устанавливает суффикс после значения и перед иконкой. */
+    suffix?: ReactNode;
+    /** Размер поля ввода и выпадающего меню. */
+    size?: SizeProp;
+    /** Устанавливает радиус скруглений углов.
+     * @ignore */
+    corners?: Partial<Pick<React.CSSProperties, 'borderTopRightRadius' | 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopLeftRadius'>>;
+    /** Задает функцию, которая вызывается при нажатии на контрол. */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Событие изменения значения `value` в поле.
+     * Во процессе ввода значение частично нормализуется по сегментам, например `1` => `01`.
+     * При потере фокуса возвращает полностью нормализованное значение в формате `HH:mm[:ss]`.
+     */
+    onValueChange?(value: string): void;
+    /** Событие потери фокуса. */
+    onBlur?(event: React.FocusEvent<HTMLElement>): void;
+    /** Событие получения фокуса. */
+    onFocus?(event: React.FocusEvent<HTMLElement>): void;
+    /** Событие нажатия клавиши. */
+    onKeyDown?(event: React.KeyboardEvent<HTMLElement>): void;
+    /** Событие вставки из буфера. */
+    onPaste?(event: React.ClipboardEvent<HTMLElement>): void;
+}
+export interface TimePickerRef {
+    /** Устанавливает фокус на поле ввода. */
+    focus(): void;
+    /** Снимает фокус с поля ввода. */
+    blur(): void;
+    /** Закрывает выпадающее меню. */
+    close(): void;
+    /** Запускает анимацию blink у поля ввода времени. */
+    blink(): void;
+    /** Возвращает корневой DOM-узел компонента. */
+    getRootNode(): HTMLElement | null;
+}
+export type TimePicker = TimePickerRef;
+/** Поле с временем помогает вводить время с клавиатуры или выбирать его с помощью мыши. */
+export declare const TimePicker: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<TimePickerRef, TimePickerProps> & Record<never, never> & {
+    validate: (value: import("../../typings/utility-types.js").Nullable<string>, options?: import("./helpers/validateTimePicker.js").TimePickerValidationOptions) => boolean;
+};

package/components/TimePicker/TimePicker.js

@@ -0,0 +1,508 @@
+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 { NativeTimeInput } from '../../internal/NativeTimeInput/index.js';
+import { isIOS, isMobile } 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 { useStyles } from '../../lib/renderEnvironment/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { getRandomID } from '../../lib/utils.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 { getEmptyDisplayValue, isTimeDisplayEmpty, isTimeValueOutOfRange, normalizeTimeValue, parsePastedTimeValue, replaceTimeSegment, } from './helpers/TimePicker.value.js';
+import { validateTimePicker } from './helpers/validateTimePicker.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 TimePicker = Object.assign(forwardRefAndName('TimePicker', function (props, ref) {
+    var _a;
+    var disabled = props.disabled, _b = props.useMobileNativeTimePicker, useMobileNativeTimePicker = _b === void 0 ? false : _b, _c = props.format, format = _c === void 0 ? 'HH:mm' : _c, _d = props.size, size = _d === void 0 ? 'small' : _d, items = props.items, menuPos = props.menuPos, menuAlign = props.menuAlign, menuWidth = props.menuWidth, minTime = props.minTime, maxTime = props.maxTime, rightIcon = props.rightIcon, suffix = props.suffix, corners = props.corners, value = props.value, onValueChange = props.onValueChange, onFocus = props.onFocus, onBlur = props.onBlur, onClick = props.onClick, onKeyDown = props.onKeyDown, onPaste = props.onPaste, inputProps = __rest(props, ["disabled", "useMobileNativeTimePicker", "format", "size", "items", "menuPos", "menuAlign", "menuWidth", "minTime", "maxTime", "rightIcon", "suffix", "corners", "value", "onValueChange", "onFocus", "onBlur", "onClick", "onKeyDown", "onPaste"]);
+    var theme = useContext(ThemeContext);
+    var styles = useStyles(getStyles);
+    var _e = useState(false), isInputFocused = _e[0], setIsInputFocused = _e[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);
+    var isMouseDownOnFragmentRef = useRef(false);
+    var mouseDownSegmentRef = useRef(null);
+    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];
+    var _h = useTimePickerValue({ isInputFocused: isInputFocused, format: format, value: value, onValueChange: onValueChange }), editingValue = _h.editingValue, editingValueRef = _h.editingValueRef, setEditingValue = _h.setEditingValue, updateEditingValue = _h.updateEditingValue, commitEditingValue = _h.commitEditingValue, clearEditingValue = _h.clearEditingValue;
+    var hasDropdown = ((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) > 0;
+    var resolvedItems = useMemo(function () {
+        return (items !== null && items !== void 0 ? items : []).map(function (item) { return (__assign(__assign({}, item), { disabled: Boolean(item.disabled) || isTimeValueOutOfRange(item.value, format, minTime, maxTime) })); });
+    }, [maxTime, minTime, format, items]);
+    var popupMaxHeight = getTimePickerPopupMaxHeight(size, theme);
+    var ariaPlaceholder = format === 'HH:mm' ? 'чч:мм' : 'чч:мм:сс';
+    var normalizedValue = normalizeTimeValue(editingValue, format);
+    var selectedItemIndex = resolvedItems.findIndex(function (item) { return normalizeTimeValue(item.value, format) === normalizedValue; });
+    var canUseMobileDropdownTimePicker = hasDropdown && isMobileDevice && !canUseMobileNativeTimePicker;
+    var displayValue = editingValue;
+    if (isInputFocused) {
+        displayValue = editingValue === EMPTY_VALUE ? getEmptyDisplayValue(format) : editingValue;
+    }
+    else if (isTimeDisplayEmpty(editingValue)) {
+        displayValue = EMPTY_VALUE;
+    }
+    var resetMouseInteractionState = useCallback(function () {
+        isMouseFocusRef.current = false;
+        isMouseDownOnFragmentRef.current = false;
+        mouseDownSegmentRef.current = null;
+    }, []);
+    var normalizeCurrentSegmentIfNeeded = useCallback(function (segment) {
+        var nextDisplayValue = commitTimeSegmentOnLeave(editingValue === EMPTY_VALUE ? getEmptyDisplayValue(format) : editingValue, segment, format);
+        updateEditingValue(nextDisplayValue);
+    }, [editingValue, format, updateEditingValue]);
+    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 _j = useTimePickerDropdown({
+        disabled: disabled,
+        hasDropdown: hasDropdown,
+        items: resolvedItems,
+        selectedItemIndex: selectedItemIndex >= 0 ? selectedItemIndex : null,
+    }), isDropdownOpened = _j.isDropdownOpened, highlightedItemIndex = _j.highlightedItemIndex, openDropdown = _j.openDropdown, closeDropdown = _j.closeDropdown, resetHighlightedItem = _j.resetHighlightedItem, tryNavigateItems = _j.tryNavigateItems;
+    var popupId = popupIdRef.current;
+    var activeDescendantId = hasDropdown && highlightedItemIndex !== null ? "".concat(popupId, "-item-").concat(highlightedItemIndex) : undefined;
+    var getActiveInput = useCallback(function () { return (canUseMobileDropdownTimePicker && isDropdownOpened ? mobileInputRef.current : inputRef.current); }, [canUseMobileDropdownTimePicker, isDropdownOpened]);
+    var _k = useTimePickerSelection({
+        isInputFocused: isInputFocused,
+        format: format,
+        displayValue: displayValue,
+        getInput: getActiveInput,
+    }), selection = _k.selection, selectedSegment = _k.selectedSegment, selectSegment = _k.selectSegment, selectAll = _k.selectAll, syncSelectionWithDOM = _k.syncSelectionWithDOM;
+    var closeOpenedDropdown = useCallback(function () {
+        if (canUseMobileDropdownTimePicker && isDropdownOpened) {
+            setIsInputFocused(false);
+            resetMouseInteractionState();
+            if (isTimeDisplayEmpty(editingValueRef.current)) {
+                clearEditingValue();
+            }
+            else {
+                commitEditingValue();
+            }
+        }
+        closeDropdown();
+    }, [
+        canUseMobileDropdownTimePicker,
+        clearEditingValue,
+        closeDropdown,
+        commitEditingValue,
+        editingValueRef,
+        isDropdownOpened,
+        resetMouseInteractionState,
+    ]);
+    var selectItem = useCallback(function (item) {
+        if (item.disabled) {
+            return;
+        }
+        if (canUseMobileDropdownTimePicker) {
+            setIsInputFocused(false);
+            resetMouseInteractionState();
+        }
+        updateEditingValue(item.value);
+        closeDropdown();
+    }, [canUseMobileDropdownTimePicker, closeDropdown, resetMouseInteractionState, updateEditingValue]);
+    var isSelectHighlightedItem = useCallback(function () {
+        if (highlightedItemIndex === null) {
+            return false;
+        }
+        var item = resolvedItems[highlightedItemIndex];
+        if (!item || item.disabled) {
+            return true;
+        }
+        selectItem(item);
+        return true;
+    }, [highlightedItemIndex, resolvedItems, selectItem]);
+    var focusInput = useCallback(function () {
+        var _a;
+        (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [getActiveInput]);
+    var blurInput = useCallback(function () {
+        var _a;
+        (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.blur();
+    }, [getActiveInput]);
+    var closeInputDropdown = useCallback(function () {
+        closeOpenedDropdown();
+    }, [closeOpenedDropdown]);
+    var blinkInput = useCallback(function () {
+        var _a;
+        (_a = getActiveInput()) === null || _a === void 0 ? void 0 : _a.blink();
+    }, [getActiveInput]);
+    useImperativeHandle(ref, function () { return ({
+        focus: focusInput,
+        blur: blurInput,
+        blink: blinkInput,
+        close: closeInputDropdown,
+        getRootNode: function () { return rootRef.current; },
+    }); }, [blinkInput, blurInput, closeInputDropdown, focusInput, getActiveInput]);
+    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 && isDropdownOpened) {
+            closeOpenedDropdown();
+        }
+    }, [closeOpenedDropdown, disabled, isDropdownOpened]);
+    useEffect(function () {
+        setIsMobileDevice(Boolean(isMobile));
+        setCanUseMobileNativeTimePicker(useMobileNativeTimePicker && Boolean(isMobile));
+    }, [useMobileNativeTimePicker]);
+    var handleCloseMobileDropdown = useCallback(function () {
+        closeOpenedDropdown();
+    }, [closeOpenedDropdown]);
+    var handleFocusBySource = function (event, isMobilePopupInput) {
+        if (canUseMobileNativeTimePicker) {
+            openNativeTimePicker();
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            return;
+        }
+        if (canUseMobileDropdownTimePicker && !isMobilePopupInput) {
+            openDropdown();
+            return;
+        }
+        setIsInputFocused(true);
+        openDropdown();
+        if (isMouseDownOnFragmentRef.current && !isInputFocused) {
+            if (isTimeDisplayEmpty(editingValueRef.current)) {
+                selectSegment('hours');
+            }
+            else if (mouseDownSegmentRef.current) {
+                selectSegment(mouseDownSegmentRef.current);
+            }
+        }
+        else {
+            selectSegment('hours');
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(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) {
+            return;
+        }
+        setIsInputFocused(false);
+        resetMouseInteractionState();
+        if (isMobilePopupInput) {
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            return;
+        }
+        closeDropdown();
+        if (isTimeDisplayEmpty(editingValueRef.current)) {
+            clearEditingValue();
+            onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+            return;
+        }
+        commitEditingValue();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(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 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)) {
+            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();
+        }
+        isMouseFocusRef.current = !isInputFocused;
+        isMouseDownOnFragmentRef.current = isFragment;
+        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, _e, _f;
+        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();
+            updateEditingValue(getEmptyDisplayValue(format));
+            selectSegment('hours');
+            return;
+        }
+        if (DIGIT_REGEXP.test(event.key)) {
+            event.preventDefault();
+            resetHighlightedItem();
+            var nextDigitInputValue = shouldHandleAsAllSelection ? getEmptyDisplayValue(format) : currentDisplayValue;
+            var nextDigitInputSegment = shouldHandleAsAllSelection ? 'hours' : currentSegment;
+            var result = formatDigitToTimeSegment(nextDigitInputValue, nextDigitInputSegment, event.key, format);
+            if (result.shouldBlink) {
+                (_c = getActiveInput()) === null || _c === void 0 ? void 0 : _c.blink();
+                return;
+            }
+            updateEditingValue(result.nextValue);
+            selectSegment(result.selectedSegment);
+            return;
+        }
+        if (isKeyArrowLeft(event)) {
+            event.preventDefault();
+            normalizeCurrentSegmentIfNeeded(currentSegment);
+            selectSegment((_d = getPreviousTimeSegment(currentSegment)) !== null && _d !== void 0 ? _d : 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((_e = getNextTimeSegment(currentSegment, format)) !== null && _e !== void 0 ? _e : 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;
+            updateEditingValue(shiftTimeSegmentValue(currentDisplayValue, currentSegment, step, format));
+            selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyBackspace(event)) {
+            event.preventDefault();
+            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);
+                }
+            }
+            updateEditingValue(nextDisplayValue);
+            selectSegment(nextSegment);
+            return;
+        }
+        if (isKeyDelete(event)) {
+            event.preventDefault();
+            updateEditingValue(replaceTimeSegment(currentDisplayValue, currentSegment, EMPTY_SEGMENT, format));
+            selectSegment(currentSegment);
+            return;
+        }
+        if (isKeyEscape(event)) {
+            if (isDropdownOpened) {
+                event.preventDefault();
+                closeDropdown();
+            }
+            return;
+        }
+        if (isKeyEnter(event)) {
+            if (isSelectHighlightedItem()) {
+                event.preventDefault();
+            }
+            return;
+        }
+        if (isKeySpace(event)) {
+            event.preventDefault();
+            var nextSegment = getNextTimeSegment(currentSegment, format);
+            var nextDisplayValue = commitTimeSegmentOnLeave(currentDisplayValue, currentSegment, format);
+            updateEditingValue(nextDisplayValue);
+            if (nextSegment) {
+                selectSegment(nextSegment);
+            }
+            else {
+                selectSegment(currentSegment);
+            }
+            return;
+        }
+        if (isKeyChar(event)) {
+            event.preventDefault();
+            (_f = getActiveInput()) === null || _f === void 0 ? void 0 : _f.blink();
+        }
+    };
+    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 = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text');
+        var nextDisplayValue = parsePastedTimeValue(pastedValue, format);
+        event.preventDefault();
+        if (isTimeDisplayEmpty(nextDisplayValue)) {
+            (_b = getActiveInput()) === 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, hasDropdown: hasDropdown, size: size, format: format, corners: corners, rightIcon: rightIcon, suffix: suffix, value: displayValue, "aria-haspopup": hasDropdown ? 'listbox' : undefined, "aria-expanded": hasDropdown && isDropdownOpened ? true : undefined, "aria-controls": hasDropdown && isDropdownOpened ? popupId : undefined, "aria-activedescendant": activeDescendantId, "aria-placeholder": ariaPlaceholder, 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: rightIcon, suffix: suffix, resolvedItems: resolvedItems, 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, onFocus: handleMobileFocus, onBlur: handleMobileBlur, onClick: handleMobileClick, onKeyDown: handleMobileKeyDown, onMouseDownCapture: handleMobileMouseDownCapture, onMouseUp: handleMobileMouseUp, onPaste: handleMobilePaste, onSelectSegment: handleMobileSelectSegmentByMouse, onSelectItem: selectItem, onCloseRequest: handleCloseMobileDropdown })),
+            hasDropdown &&
+                !canUseMobileNativeTimePicker &&
+                !canUseMobileDropdownTimePicker &&
+                isDropdownOpened &&
+                rootRef.current && (React.createElement(TimePickerPopup, { id: popupId, anchorElement: rootRef.current, menuPos: menuPos, menuAlign: menuAlign, menuWidth: menuWidth, popupMaxHeight: popupMaxHeight, format: format, size: size, resolvedItems: resolvedItems, highlightedItemIndex: highlightedItemIndex, normalizedValue: normalizedValue, itemRefs: itemRefs, onSelectItem: selectItem })))));
+}), { validate: validateTimePicker });
+//# sourceMappingURL=TimePicker.js.map