@alfalab/core-components 42.10.0 → 42.11.0

package/universal-date-input/modern/components/base-universal-date-input/Component.js

@@ -0,0 +1,147 @@
+import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { useMaskito } from '@maskito/react';
+import cn from 'classnames';
+import endOfDay from 'date-fns/endOfDay';
+import startOfDay from 'date-fns/startOfDay';
+import { HOURS_MINUTES_SEPARATOR, DATE_RANGE_SEPARATOR, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from '../../consts.js';
+import { createMaskOptions } from '../../mask/index.js';
+import { DateInput } from '../date-input/Component.js';
+import { DateRangeInput } from '../date-range-input/Component.js';
+import { TimeInput } from '../time-input/Component.js';
+import { s as styles } from '../../index.module-4cca7eed.js';
+import 'date-fns/clamp';
+import 'date-fns/getDaysInMonth';
+import 'date-fns/isValid';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import '../../../../input/modern';
+import '../../../../popover/modern';
+import '../../../../shared/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/startOfMonth';
+import '../../mask/plugins.js';
+import '../../mask/utils.js';
+import '../../mask/postprocessors.js';
+import '../../mask/preprocessors.js';
+import '../../utils/index.js';
+
+const BaseUniversalDateInput = forwardRef(({ autoCorrection = true, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, view, picker, onCalendarClose, onCalendarOpen, platform, onKeyDown, disabled, readOnly, fieldClassName, disableUserInput, ...restProps }, ref) => {
+    const [correctionOccurred, setCorrectionOccurred] = useState(false);
+    const [open, setOpen] = useState(false);
+    const inputRef = useRef(null);
+    const calendarRef = useRef(null);
+    const maskOptions = useMemo(() => createMaskOptions(view, startOfDay(minDate), endOfDay(maxDate), autoCorrection, handleCorrection), [view, minDate, maxDate, autoCorrection]);
+    const maskRef = useMaskito({ options: maskOptions });
+    useEffect(() => {
+        let timeoutId;
+        if (correctionOccurred) {
+            timeoutId = setTimeout(() => setCorrectionOccurred(false), 150);
+        }
+        return () => clearTimeout(timeoutId);
+    }, [correctionOccurred]);
+    const openCalendar = () => {
+        if (picker) {
+            setOpen((p) => {
+                if (!p)
+                    onCalendarOpen?.();
+                return true;
+            });
+        }
+    };
+    const closeCalendar = () => {
+        if (picker) {
+            setOpen((p) => {
+                if (p)
+                    onCalendarClose?.();
+                return false;
+            });
+        }
+    };
+    function handleCorrection() {
+        setCorrectionOccurred(true);
+    }
+    const handleKeyDown = (event) => {
+        if (event.key === 'Escape')
+            closeCalendar();
+    };
+    const handleInputKeyDown = (event) => {
+        if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
+            event.preventDefault();
+            calendarRef.current.focus();
+        }
+        if (event.key === 'Enter') {
+            if (open)
+                closeCalendar();
+            else
+                openCalendar();
+        }
+        onKeyDown?.(event);
+    };
+    const handleClick = () => {
+        if (platform === 'desktop') {
+            if (!open)
+                openCalendar();
+            inputRef.current?.focus();
+        }
+        if (platform === 'mobile' && disableUserInput && !open) {
+            openCalendar();
+        }
+    };
+    const handlePickerClick = () => {
+        if (platform === 'mobile' && !disableUserInput && !open) {
+            openCalendar();
+        }
+    };
+    const handleFocus = () => {
+        if (platform === 'desktop')
+            openCalendar();
+    };
+    const handleBlur = (event) => {
+        if (platform === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (inputRef.current !== target &&
+                calendarRef.current?.contains(target) === false) {
+                closeCalendar();
+            }
+        }
+    };
+    const inputDisabled = disabled || readOnly;
+    const commonProps = {
+        disableUserInput,
+        autoCorrection,
+        disabled,
+        readOnly,
+        fieldClassName: cn(fieldClassName, { [styles.blink]: correctionOccurred }),
+        onKeyDown: handleInputKeyDown,
+    };
+    const pickerProps = {
+        platform,
+        picker,
+        onCalendarClose: closeCalendar,
+        onPickerClick: handlePickerClick,
+        wrapperHandlers: {
+            onKeyDown: inputDisabled ? undefined : handleKeyDown,
+            onClick: inputDisabled ? undefined : handleClick,
+            onFocus: inputDisabled ? undefined : handleFocus,
+            onBlur: handleBlur,
+        },
+        minDate,
+        maxDate,
+    };
+    switch (view) {
+        case 'date':
+        case 'date-time':
+            return (React.createElement(DateInput, { placeholder: view === 'date-time' ? 'ДД.ММ.ГГГГ, ЧЧ:ММ' : 'ДД.ММ.ГГГГ', ...restProps, ...commonProps, ...pickerProps, withTime: view === 'date-time', open: open, calendarRef: calendarRef, ref: mergeRefs([ref, maskRef, inputRef]) }));
+        case 'date-range':
+            return (React.createElement(DateRangeInput, { placeholder: `ДД.ММ.ГГГГ${DATE_RANGE_SEPARATOR}ДД.ММ.ГГГГ`, ...restProps, ...commonProps, ...pickerProps, open: open, calendarRef: calendarRef, ref: mergeRefs([ref, maskRef, inputRef]) }));
+        case 'time':
+            return (React.createElement(TimeInput, { placeholder: `ЧЧ${HOURS_MINUTES_SEPARATOR}ММ`, ...restProps, ...commonProps, ref: mergeRefs([ref, maskRef, inputRef]) }));
+        default:
+            throw new Error('The view prop must be specified');
+    }
+});
+
+export { BaseUniversalDateInput };

package/universal-date-input/modern/components/base-universal-date-input/index.d.ts

@@ -0,0 +1 @@
+export { BaseUniversalDateInput } from "./Component";

package/universal-date-input/modern/components/base-universal-date-input/index.js

@@ -0,0 +1,30 @@
+export { BaseUniversalDateInput } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import '@maskito/react';
+import 'classnames';
+import 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import '../../consts.js';
+import 'date-fns/clamp';
+import 'date-fns/getDaysInMonth';
+import 'date-fns/isValid';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import '../date-input/Component.js';
+import '../../../../input/modern';
+import '../../../../popover/modern';
+import '../../../../shared/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../../index.module-4cca7eed.js';
+import '../date-range-input/Component.js';
+import 'date-fns/startOfMonth';
+import '../time-input/Component.js';
+import '../../mask/index.js';
+import '../../mask/plugins.js';
+import '../../mask/utils.js';
+import '../../mask/postprocessors.js';
+import '../../mask/preprocessors.js';
+import '../../utils/index.js';

package/universal-date-input/modern/components/date-input/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { InnerDateInputProps } from "../../types";
+declare const DateInput: React.ForwardRefExoticComponent<InnerDateInputProps & React.RefAttributes<HTMLInputElement>>;
+export { DateInput };

package/universal-date-input/modern/components/date-input/Component.js

@@ -0,0 +1,101 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { Input } from '../../../../input/modern';
+import { Popover } from '../../../../popover/modern';
+import { getDataTestId } from '../../../../shared/modern';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { DATE_TIME_SEPARATOR, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, DATE_TIME_FORMAT, DATE_FORMAT } from '../../consts.js';
+import { isValidDate, isCompleteTime, formatDate, preventDefault, isCompleteDate, parseDateString } from '../../utils/index.js';
+import { s as styles } from '../../index.module-4cca7eed.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+
+const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, defaultValue, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, picker, rightAddons, Calendar, calendarProps = {}, platform, calendarRef, onComplete, onChange, onBlur, onCalendarClose, onPickerClick, error, popoverProps, dataTestId, wrapperClassName, wrapperHandlers, block, withTime, breakpoint, ...restProps }, ref) => {
+    const [value, setValue] = useState(defaultValue);
+    const lastValidDate = useRef('');
+    const inputRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const uncontrolled = valueProp === undefined;
+    const { offDays } = calendarProps;
+    const inputValue = valueProp ?? value ?? '';
+    const [inputDate, inputTime] = inputValue.split(DATE_TIME_SEPARATOR);
+    const isValidValue = isValidDate({ value: inputDate, minDate, maxDate, offDays });
+    useEffect(() => {
+        if (autoCorrection) {
+            const hasValidValue = isValidValue && isCompleteTime(inputValue, withTime);
+            if (!lastValidDate.current || !inputValue) {
+                lastValidDate.current = hasValidValue
+                    ? inputValue
+                    : formatDate(minDate, withTime ? DATE_TIME_FORMAT : DATE_FORMAT);
+            }
+        }
+    }, [autoCorrection, minDate, withTime, isValidValue, inputValue]);
+    const getInnerError = () => {
+        if (autoCorrection) {
+            const isComplete = isCompleteDate(inputDate) && isCompleteTime(inputTime, withTime);
+            return isComplete && !isValidValue ? 'Эта дата недоступна' : false;
+        }
+        return false;
+    };
+    const callOnComplete = (val) => {
+        onComplete?.(val, parseDateString(val, withTime ? DATE_TIME_FORMAT : DATE_FORMAT));
+        lastValidDate.current = val;
+    };
+    const changeValue = (val, event) => {
+        onChange?.(event, { value: val });
+        const [date, time = ''] = val.split(DATE_TIME_SEPARATOR);
+        if (uncontrolled)
+            setValue(val);
+        if (isCompleteDate(date) && isCompleteTime(time, withTime))
+            callOnComplete(val);
+    };
+    const handleChange = (event) => {
+        changeValue(event.target.value, event);
+    };
+    const handleCalendarChange = (date) => {
+        if (date) {
+            changeValue(formatDate(date, withTime ? DATE_TIME_FORMAT : DATE_FORMAT), null);
+            requestAnimationFrame(() => {
+                const dateLen = DATE_FORMAT.length;
+                const newCaretPos = withTime ? dateLen + DATE_TIME_SEPARATOR.length : dateLen;
+                inputRef.current?.setSelectionRange(newCaretPos, newCaretPos);
+            });
+        }
+        if (platform === 'desktop')
+            onCalendarClose?.();
+    };
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        if (autoCorrection) {
+            const dateFilled = isCompleteDate(inputDate);
+            if (dateFilled && !isCompleteTime(inputTime, withTime)) {
+                const [, prevTime] = lastValidDate.current.split(DATE_TIME_SEPARATOR);
+                changeValue(`${inputDate}${DATE_TIME_SEPARATOR}${prevTime}`, null);
+            }
+            if (inputValue && !dateFilled) {
+                changeValue(lastValidDate.current, null);
+            }
+        }
+    };
+    const renderCalendar = () => {
+        if (picker && Calendar) {
+            return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            React.createElement("div", { onMouseDown: preventDefault, className: styles.calendarWrapper },
+                React.createElement(Calendar, { dataTestId: getDataTestId(dataTestId, 'calendar'), ...calendarProps, breakpoint: breakpoint, responsive: true, open: open, onClose: onCalendarClose, ref: calendarRef, value: isValidValue ? parseDateString(inputDate).getTime() : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate })));
+        }
+        return null;
+    };
+    return (React.createElement("div", { ...wrapperHandlers, className: cn(styles.wrapper, wrapperClassName, {
+            [styles.block]: block,
+        }), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
+        React.createElement(Input, { ...restProps, breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: inputWrapperRef, ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(CalendarMIcon, { onClick: onPickerClick, className: styles.calendarIcon, onMouseDown: preventDefault }))) }),
+        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));
+});
+
+export { DateInput };

package/universal-date-input/modern/components/date-input/index.d.ts

@@ -0,0 +1 @@
+export { DateInput } from "./Component";

package/universal-date-input/modern/components/date-input/index.js

@@ -0,0 +1,15 @@
+export { DateInput } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import '../../../../input/modern';
+import '../../../../popover/modern';
+import '../../../../shared/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../../consts.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import '../../index.module-4cca7eed.js';
+import '../../utils/index.js';

package/universal-date-input/modern/components/date-range-input/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { InnerDateRangeInputProps } from "../../types";
+declare const DateRangeInput: React.ForwardRefExoticComponent<InnerDateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInput };

package/universal-date-input/modern/components/date-range-input/Component.js

@@ -0,0 +1,104 @@
+import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import startOfMonth from 'date-fns/startOfMonth';
+import { Input } from '../../../../input/modern';
+import { Popover } from '../../../../popover/modern';
+import { getDataTestId } from '../../../../shared/modern';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { DATE_RANGE_SEPARATOR, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../../consts.js';
+import { getValidRange, formatDate, preventDefault, isCompleteDate, isCompleteDateRange, updateRange, parseDateString } from '../../utils/index.js';
+import { s as styles } from '../../index.module-4cca7eed.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+
+const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassName, open, onCalendarClose, value: valueProp, defaultValue, onComplete, onChange, onBlur, Calendar, wrapperHandlers, calendarRef, calendarProps = {}, minDate = DEFAULT_MAX_DATE, maxDate = DEFAULT_MIN_DATE, block, dataTestId, error, popoverProps, rightAddons, picker, platform, onPickerClick, rangeBehavior = 'clarification', ...restProps }, ref) => {
+    const [value, setValue] = useState(defaultValue);
+    const [calendarMonth, setCalendarMonth] = useState(calendarProps.defaultMonth);
+    const lastValidRange = useRef('');
+    const inputRef = useRef(null);
+    const inputWrapperRef = useRef(null);
+    const uncontrolled = valueProp === undefined;
+    const inputValue = valueProp ?? value ?? '';
+    const { offDays } = calendarProps;
+    const [from = '', to = ''] = inputValue.split(DATE_RANGE_SEPARATOR);
+    const { validFrom, validTo } = useMemo(() => getValidRange({ from, to, offDays, minDate, maxDate }), [from, to, offDays, maxDate, minDate]);
+    useEffect(() => {
+        if (autoCorrection && (!lastValidRange.current || !inputValue)) {
+            const min = formatDate(minDate);
+            const max = formatDate(maxDate);
+            lastValidRange.current = `${min}${DATE_RANGE_SEPARATOR}${max}`;
+        }
+    }, [autoCorrection, minDate, maxDate, inputValue]);
+    useEffect(() => {
+        if (picker && open) {
+            setCalendarMonth(startOfMonth(validTo || validFrom || Date.now()).getTime());
+        }
+    }, [validFrom, validTo, open, picker]);
+    const getInnerError = () => {
+        if (autoCorrection) {
+            return (isCompleteDate(from) && !validFrom) || (isCompleteDate(to) && !validTo)
+                ? 'Эта дата недоступна'
+                : false;
+        }
+        return false;
+    };
+    const callOnComplete = (val) => {
+        const [dateFrom, dateTo] = val.split(DATE_RANGE_SEPARATOR);
+        onComplete?.(val, parseDateString(dateFrom), parseDateString(dateTo));
+        lastValidRange.current = val;
+    };
+    const changeValue = (val, event) => {
+        onChange?.(event, { value: val });
+        if (uncontrolled)
+            setValue(val);
+        if (isCompleteDateRange(val))
+            callOnComplete(val);
+    };
+    const handleMonthChange = (date) => {
+        setCalendarMonth(date);
+        calendarProps?.onMonthChange?.(date);
+    };
+    const handleChange = (event) => {
+        changeValue(event.target.value, event);
+    };
+    const handleCalendarChange = (date) => {
+        const newValue = updateRange({ date, validFrom, validTo, rangeBehavior });
+        changeValue(newValue, null);
+        requestAnimationFrame(() => {
+            inputRef.current?.setSelectionRange(newValue.length, newValue.length);
+        });
+    };
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        if (autoCorrection) {
+            const dateFilled = isCompleteDateRange(inputValue);
+            if (inputValue && !dateFilled) {
+                const [prevFrom, prevTo] = lastValidRange.current.split(DATE_RANGE_SEPARATOR);
+                const newFrom = validFrom ? formatDate(validFrom) : prevFrom;
+                const newTo = validTo ? formatDate(validTo) : prevTo;
+                changeValue(`${newFrom}${DATE_RANGE_SEPARATOR}${newTo}`, null);
+            }
+        }
+    };
+    const renderCalendar = () => {
+        if (picker && Calendar) {
+            return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            React.createElement("div", { onMouseDown: preventDefault, className: styles.calendarWrapper },
+                React.createElement(Calendar, { dataTestId: getDataTestId(dataTestId, 'calendar'), month: calendarMonth, ...calendarProps, onMonthChange: handleMonthChange, breakpoint: breakpoint, responsive: true, open: open, onClose: onCalendarClose, ref: calendarRef, selectedFrom: validFrom ? validFrom.getTime() : undefined, selectedTo: validTo ? validTo.getTime() : undefined, value: undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate })));
+        }
+        return null;
+    };
+    return (React.createElement("div", { ...wrapperHandlers, className: cn(styles.wrapper, wrapperClassName, {
+            [styles.block]: block,
+        }), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
+        React.createElement(Input, { placeholder: `ДД.ММ.ГГГГ${DATE_RANGE_SEPARATOR}ДД.ММ.ГГГГ`, ...restProps, dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: inputWrapperRef, ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                picker && (React.createElement(CalendarMIcon, { onClick: onPickerClick, className: styles.calendarIcon, onMouseDown: preventDefault }))) }),
+        platform === 'desktop' ? (React.createElement(Popover, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));
+});
+
+export { DateRangeInput };

package/universal-date-input/modern/components/date-range-input/index.d.ts

@@ -0,0 +1 @@
+export { DateRangeInput } from "./Component";

package/universal-date-input/modern/components/date-range-input/index.js

@@ -0,0 +1,16 @@
+export { DateRangeInput } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/startOfMonth';
+import '../../../../input/modern';
+import '../../../../popover/modern';
+import '../../../../shared/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../../consts.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import '../../index.module-4cca7eed.js';
+import '../../utils/index.js';

package/universal-date-input/modern/components/time-input/Component.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import React from 'react';
+import { InnerTimeInputProps } from "../../types";
+declare const TimeInput: React.ForwardRefExoticComponent<InnerTimeInputProps & React.RefAttributes<HTMLInputElement>>;
+export { TimeInput };

package/universal-date-input/modern/components/time-input/Component.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { Input } from '../../../../input/modern';
+import { HOURS_MINUTES_SEPARATOR } from '../../consts.js';
+import { isCompleteTime } from '../../utils/index.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+
+const defaultTime = `00${HOURS_MINUTES_SEPARATOR}00`;
+const TimeInput = forwardRef(({ autoCorrection, value: valueProp, defaultValue, onChange, onComplete, onBlur, ...restProps }, ref) => {
+    const [value, setValue] = useState(defaultValue);
+    const lastValidTime = useRef(defaultTime);
+    const uncontrolled = valueProp === undefined;
+    const inputValue = value ?? valueProp ?? '';
+    useEffect(() => {
+        if (autoCorrection && !inputValue) {
+            lastValidTime.current = defaultTime;
+        }
+    }, [autoCorrection, inputValue]);
+    const callOnComplete = (val) => {
+        onComplete?.(val);
+        lastValidTime.current = val;
+    };
+    const changeValue = (val, event) => {
+        onChange?.(event, { value: val });
+        if (uncontrolled)
+            setValue(val);
+        if (isCompleteTime(val, true))
+            callOnComplete(val);
+    };
+    const handleChange = (event) => {
+        changeValue(event.target.value, event);
+    };
+    const handleBlur = (event) => {
+        onBlur?.(event);
+        if (autoCorrection && inputValue && !isCompleteTime(inputValue, true)) {
+            changeValue(lastValidTime.current, null);
+        }
+    };
+    return (React.createElement(Input, { ...restProps, onBlur: handleBlur, onInput: handleChange, ref: ref, value: inputValue, inputMode: 'decimal' }));
+});
+
+export { TimeInput };

package/universal-date-input/modern/components/time-input/index.d.ts

@@ -0,0 +1 @@
+export { TimeInput } from "./Component";

package/universal-date-input/modern/components/time-input/index.js

@@ -0,0 +1,9 @@
+export { TimeInput } from './Component.js';
+import 'react';
+import '../../../../input/modern';
+import '../../consts.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import '../../utils/index.js';

package/universal-date-input/modern/consts.d.ts

@@ -0,0 +1,11 @@
+import { DateSegments, DateTemplate, View } from "./types";
+declare const DATE_RANGE_SEPARATOR = " \u2013 ";
+declare const DATE_TIME_SEPARATOR = ", ";
+declare const HOURS_MINUTES_SEPARATOR = ":";
+declare const TEMPLATES: Record<View, DateTemplate>;
+declare const DATE_MAX_VALUES: DateSegments<number>;
+declare const DEFAULT_MIN_DATE: number;
+declare const DEFAULT_MAX_DATE: number;
+declare const DATE_FORMAT = "dd.MM.yyyy";
+declare const DATE_TIME_FORMAT: string;
+export { DATE_RANGE_SEPARATOR, DATE_TIME_SEPARATOR, HOURS_MINUTES_SEPARATOR, TEMPLATES, DATE_MAX_VALUES, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, DATE_FORMAT, DATE_TIME_FORMAT };

package/universal-date-input/modern/consts.js

@@ -0,0 +1,34 @@
+const DATE_RANGE_SEPARATOR = ' – ';
+const DATE_TIME_SEPARATOR = ', ';
+const HOURS_MINUTES_SEPARATOR = ':';
+const TEMPLATES = {
+    date: {
+        segments: ['dd', 'MM', 'yyyy'],
+        separators: ['.', '.'],
+    },
+    'date-time': {
+        segments: ['dd', 'MM', 'yyyy', 'HH', 'mm'],
+        separators: ['.', '.', DATE_TIME_SEPARATOR, HOURS_MINUTES_SEPARATOR],
+    },
+    'date-range': {
+        segments: ['dd', 'MM', 'yyyy', 'dd', 'MM', 'yyyy'],
+        separators: ['.', '.', DATE_RANGE_SEPARATOR, '.', '.'],
+    },
+    time: {
+        segments: ['HH', 'mm'],
+        separators: [HOURS_MINUTES_SEPARATOR],
+    },
+};
+const DATE_MAX_VALUES = {
+    day: 31,
+    month: 12,
+    year: 9999,
+    hours: 23,
+    minutes: 59,
+};
+const DEFAULT_MIN_DATE = new Date(1900, 0, 1).getTime();
+const DEFAULT_MAX_DATE = new Date(2124, 11, 31).getTime();
+const DATE_FORMAT = 'dd.MM.yyyy';
+const DATE_TIME_FORMAT = `dd.MM.yyyy${DATE_TIME_SEPARATOR}HH${HOURS_MINUTES_SEPARATOR}mm`;
+
+export { DATE_FORMAT, DATE_MAX_VALUES, DATE_RANGE_SEPARATOR, DATE_TIME_FORMAT, DATE_TIME_SEPARATOR, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, HOURS_MINUTES_SEPARATOR, TEMPLATES };

package/universal-date-input/modern/desktop-63dec22f.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop-2e2b2125";
+export {};

package/universal-date-input/modern/desktop.d.ts

@@ -0,0 +1,2 @@
+export { UniversalDateInputDesktop } from "./Component.desktop";
+export type { UniversalDateInputDesktopProps } from "./types";

package/universal-date-input/modern/desktop.js

@@ -0,0 +1,31 @@
+export { UniversalDateInputDesktop } from './Component.desktop.js';
+import 'react';
+import './components/base-universal-date-input/Component.js';
+import 'react-merge-refs';
+import '@maskito/react';
+import 'classnames';
+import 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import './consts.js';
+import 'date-fns/clamp';
+import 'date-fns/getDaysInMonth';
+import 'date-fns/isValid';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';
+import './components/date-input/Component.js';
+import '../../input/modern';
+import '../../popover/modern';
+import '../../shared/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './index.module-4cca7eed.js';
+import './components/date-range-input/Component.js';
+import 'date-fns/startOfMonth';
+import './components/time-input/Component.js';
+import './mask/index.js';
+import './mask/plugins.js';
+import './mask/utils.js';
+import './mask/postprocessors.js';
+import './mask/preprocessors.js';
+import './utils/index.js';