@astral/ui 4.52.0 → 4.52.1

package/components/DatePicker/hooks/useDatePickerOptions/useDatePickerOptions.d.ts

@@ -30,6 +30,8 @@ type UseMaskedValueAndSelectedBaseDateReturn = {
          */
         value: string;
     };
+    /** При blur неполной даты - в onChange уходит Invalid Date (тот же стейт, что у маски). */
+    onMaskedValueBlur: () => void;
 };
 /**
  * хук объединяющий повторяющуюся логику в работе DatePicker и RangeDatePicker:

package/components/DatePicker/hooks/useDatePickerOptions/useDatePickerOptions.js

@@ -12,7 +12,7 @@ import { useSelectedBaseDate } from '../useSelectedBaseDate';
  */
 export const useDatePickerOptions = ({ onChange, mask, currentValue, minDate, maxDate, monthOffset, onDatePick, }) => {
     const baseDate = useBaseDateInRange({ minDate, maxDate, monthOffset });
-    const { maskedValue, onMaskedValueChange, onMaskedDateChange } = useMaskedValue({
+    const { maskedValue, onMaskedValueChange, onMaskedValueBlur, onMaskedDateChange, } = useMaskedValue({
         currentValue,
         mask,
         onChangeValue: onChange,
@@ -39,5 +39,6 @@ export const useDatePickerOptions = ({ onChange, mask, currentValue, minDate, ma
             onChange: handleDatePick,
             date: selectedBaseDate || baseDate,
         },
+        onMaskedValueBlur,
     };
 };

package/components/DatePicker/hooks/useMaskedValue/useMaskedValue.d.ts

@@ -19,6 +19,10 @@ type Returned = {
      * Изменение maskedValue
      * */
     onMaskedValueChange: (value: string) => void;
+    /**
+     * Реакция на blur maskedValue
+     * */
+    onMaskedValueBlur: () => void;
 };
 /**
  * Хук для управления значением для MaskField

package/components/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -1,24 +1,48 @@
 import { isDate } from '@astral/utils/date/isDate';
-import { useEffect, useState } from 'react';
-import { formatDate, parseDate } from '../../../utils/date';
+import { useEffect, useRef, useState } from 'react';
+import { formatDate, isMaskedDateSyntacticallyComplete, parseDate, } from '../../../utils/date';
 /**
  * Хук для управления значением для MaskField
  */
 export const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
     const [maskedValue, setMaskedValue] = useState(() => currentValue ? formatDate(currentValue, mask) : '');
+    const maskedValueRef = useRef(maskedValue);
+    /**
+     * Ввод в маску: синхронизируем локальное значение и ref (ref нужен на blur и после выбора даты из календаря,
+     * чтобы не читать устаревший state).
+     * `onChangeValue` вызываем только при пустой строке (`null`) или когда маска синтаксически полная —
+     * иначе partial не уходит наружу до завершения ввода или до blur (см. `handleMaskedValueBlur`).
+     */
     const handleMaskedValueChange = (value) => {
         setMaskedValue(value);
-        // При отсутствии value указываем null, так как если задать undefined, то отобразится defaultValue при наличии
+        maskedValueRef.current = value;
         if (!value) {
             onChangeValue?.(null, value);
+            return;
+        }
+        if (!isMaskedDateSyntacticallyComplete(value, mask)) {
+            return;
         }
-        else {
-            onChangeValue?.(parseDate(value, mask), value);
+        onChangeValue?.(parseDate(value, mask), value);
+    };
+    /**
+     * Blur поля: если осталась непустая неполная маска — один раз отдаём `Invalid Date` в `onChangeValue`,
+     * чтобы формы могли показать ошибку. Пустая строка и полная маска не дублируют уже отправленный `onChange`.
+     */
+    const handleMaskedValueBlur = () => {
+        const currentMaskedValue = maskedValueRef.current;
+        if (!currentMaskedValue) {
+            return;
+        }
+        if (isMaskedDateSyntacticallyComplete(currentMaskedValue, mask)) {
+            return;
         }
+        onChangeValue?.(new Date(Number.NaN), currentMaskedValue);
     };
     const handleChangeMaskedDate = (date) => {
         const formatted = formatDate(date, mask);
         setMaskedValue(formatted);
+        maskedValueRef.current = formatted;
         onChangeValue?.(date, formatted);
     };
     // здесь происходит реакция на изменение value из вне (управляемый компонент)
@@ -26,6 +50,7 @@ export const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         // если новое значение пустое, то сбрасываем значение MaskField
         if (!currentValue) {
             setMaskedValue('');
+            maskedValueRef.current = '';
             return;
         }
         // здесь обрабатывается сценарий, когда в инпут вводится невалидная дата и при этом currentValue становится Invalid Date
@@ -33,16 +58,20 @@ export const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         if (!isDate(currentValue) && maskedValue) {
             return;
         }
-        // проверяем равны ли даты
-        const isEqualValueAndMaskedDate = currentValue.getTime() === parseDate(maskedValue, mask).getTime();
+        // сравнение только при полной маске, иначе getTime() от parseDate может быть NaN
+        const isEqualValueAndMaskedDate = isMaskedDateSyntacticallyComplete(maskedValue, mask) &&
+            currentValue.getTime() === parseDate(maskedValue, mask).getTime();
         // если даты не равны, то значит изменился currentValue из вне и надо синхронизировать maskedValue
         if (!isEqualValueAndMaskedDate) {
-            setMaskedValue(formatDate(currentValue, mask));
+            const formatted = formatDate(currentValue, mask);
+            setMaskedValue(formatted);
+            maskedValueRef.current = formatted;
         }
     }, [currentValue]);
     return {
         maskedValue,
         onMaskedValueChange: handleMaskedValueChange,
+        onMaskedValueBlur: handleMaskedValueBlur,
         onMaskedDateChange: handleChangeMaskedDate,
     };
 };

package/components/DatePicker/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen,
     };
     DatePickerInputProps: {
         value: string;
+        onBlur: () => void;
     };
     onAccept: ((value: string, maskRef: import("imask").default.InputMask<import("imask").default.AnyMaskedOptions>, e?: InputEvent | undefined, onChange?: ((changeValue: string) => void) | undefined) => void) | undefined;
     pickerProps: import("../types").PickerProps;

package/components/DatePicker/useLogic/useLogic.js

@@ -4,7 +4,6 @@ import { usePopover } from '../../usePopover';
 import { useViewportType } from '../../useViewportType';
 import { DEFAULT_DATE_MASK } from '../constants';
 import { useDatePickerOptions } from '../hooks/useDatePickerOptions';
-import { useMaskedValue } from '../hooks/useMaskedValue';
 import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../MinMaxDateContext';
 export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = DEFAULT_MIN_DATE, mask = DEFAULT_DATE_MASK, onOpen, onClose, onBlur, onChange, forwardedRef, }) => {
     const ref = useForwardedRef(forwardedRef);
@@ -12,21 +11,11 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
     const { isOpen, actions } = usePopover();
     const { open, close } = actions;
     const { isMobile } = useViewportType();
-    const { maskedValue } = useMaskedValue({
-        currentValue: value,
-        mask,
-        onChangeValue: onChange,
-    });
     const isTitleShow = isMobile && typeof label === 'string';
     const handleOpen = (event) => {
         onOpen?.();
         open(event);
     };
-    const handleClose = () => {
-        onBlur?.();
-        onClose?.();
-        close();
-    };
     const handleDayPick = (date) => {
         if (isMobile) {
             setSelectedDate(date);
@@ -39,7 +28,7 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
             onChange?.(date);
         }
     };
-    const { onAccept, inputProps: calculatedInputProps, pickerProps, } = useDatePickerOptions({
+    const { onAccept, inputProps: calculatedInputProps, pickerProps, onMaskedValueBlur, } = useDatePickerOptions({
         currentValue: value,
         maxDate,
         minDate,
@@ -47,6 +36,22 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
         onDatePick: handleDayPick,
         onChange: handleChange,
     });
+    /** Blur: неполный ввод -Invalid Date в onChange (при isMobile onChange не шлём), потом внешний onBlur. */
+    const flushMaskedValueAndCallOnBlur = () => {
+        onMaskedValueBlur();
+        onBlur?.();
+    };
+    function handleClose() {
+        flushMaskedValueAndCallOnBlur();
+        onClose?.();
+        close();
+    }
+    const handleInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        flushMaskedValueAndCallOnBlur();
+    };
     const handleConfirm = () => {
         onChange?.(selectedDate);
         handleClose();
@@ -58,7 +63,8 @@ export const useLogic = ({ label, value, maxDate = DEFAULT_MAX_DATE, minDate = D
         title: isTitleShow ? label : undefined,
     };
     const DatePickerInputProps = {
-        value: isMobile ? maskedValue : calculatedInputProps.value,
+        value: calculatedInputProps.value,
+        onBlur: handleInputBlur,
     };
     const confirmButtonProps = {
         onClick: handleConfirm,

package/components/DateRangePicker/useLogic/useLogic.d.ts

@@ -7,12 +7,14 @@ export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpe
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     endDatePickerInputProps: {
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     popoverHoveredContextProviderProps: {

package/components/DateRangePicker/useLogic/useLogic.js

@@ -2,8 +2,9 @@ import { useEffect, useRef, useState, } from 'react';
 import { DEFAULT_DATE_MASK, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, useMaskedValue, useSelectedBaseDate, } from '../../DatePicker';
 import { useForwardedRef } from '../../useForwardedRef';
 import { usePopover } from '../../usePopover';
+import { isMaskedDateSyntacticallyComplete } from '../../utils/date';
 import { useBaseRangeDates } from './hooks';
-import { getBoundaryDate, isMaskedDateSyntacticallyComplete } from './utils';
+import { getBoundaryDate } from './utils';
 export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, mask = DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {
     const ref = useForwardedRef(forwardedRef);
     const startInputRef = useRef(null);
@@ -65,12 +66,12 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
         }
         onChange?.({ ...value, end: endDateValue });
     };
-    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedDateChange: onMaskedStartDateChange, } = useMaskedValue({
+    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedValueBlur: onMaskedStartValueBlur, onMaskedDateChange: onMaskedStartDateChange, } = useMaskedValue({
         currentValue: value?.start,
         mask,
         onChangeValue: handleChangeStartDate,
     });
-    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedDateChange: onMaskedEndDateChange, } = useMaskedValue({
+    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedValueBlur: onMaskedEndValueBlur, onMaskedDateChange: onMaskedEndDateChange, } = useMaskedValue({
         currentValue: value?.end,
         mask,
         onChangeValue: handleChangeEndDate,
@@ -79,11 +80,32 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
         onOpen?.();
         open(event);
     };
+    const flushActiveMaskedValueOnClose = () => {
+        if (activeInput === 'startDate') {
+            onMaskedStartValueBlur();
+        }
+        if (activeInput === 'endDate') {
+            onMaskedEndValueBlur();
+        }
+    };
     const handleClose = () => {
+        flushActiveMaskedValueOnClose();
         onBlur?.();
         onClose?.();
         close();
     };
+    const handleStartInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedStartValueBlur();
+    };
+    const handleEndInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedEndValueBlur();
+    };
     const handleClickStartInput = (e) => {
         setActiveInput('startDate');
         startInputRef.current?.focus();
@@ -138,12 +160,14 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
             ref: startInputRef,
             value: startMaskedValue,
             onAccept: handleAcceptStart,
+            onBlur: handleStartInputBlur,
             onClick: handleClickStartInput,
         },
         endDatePickerInputProps: {
             ref: endInputRef,
             value: endMaskedValue,
             onAccept: handleAcceptEnd,
+            onBlur: handleEndInputBlur,
             onClick: handleClickEndInput,
         },
         popoverHoveredContextProviderProps: {

package/components/DateRangePicker/useLogic/utils/index.d.ts

@@ -1,2 +1 @@
 export * from './getBoundaryDate';
-export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/index.js

@@ -1,2 +1 @@
 export * from './getBoundaryDate';
-export * from './isMaskedDateSyntacticallyComplete';

package/components/utils/date/format/index.d.ts

@@ -1,3 +1,4 @@
 export * from './formatDate';
+export * from './isMaskedDateSyntacticallyComplete';
 export * from './maskDate';
 export * from './parseDate';

package/components/utils/date/format/index.js

@@ -1,3 +1,4 @@
 export * from './formatDate';
+export * from './isMaskedDateSyntacticallyComplete';
 export * from './maskDate';
 export * from './parseDate';

package/{node/components/DateRangePicker/useLogic/utils → components/utils/date/format}/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -1,4 +1,4 @@
-import { type DateMask } from '../../../../utils/date/format';
+import { type DateMask } from '../maskDate';
 /**
  * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
  */

package/components/utils/date/format/parseDate/parseDate.d.ts

@@ -1,5 +1,6 @@
 import { type DateMask } from '../maskDate';
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 export declare const parseDate: (date: string, mask: DateMask, separator?: string) => Date;

package/components/utils/date/format/parseDate/parseDate.js

@@ -1,21 +1,50 @@
-import { buildIsoDate, } from '../../buildIsoDate';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import utc from 'dayjs/plugin/utc';
 import { DateMaskElements } from '../maskDate';
-const orderMap = {
-    [DateMaskElements.Year]: 'year',
-    [DateMaskElements.Month]: 'month',
-    [DateMaskElements.Day]: 'day',
-    [DateMaskElements.Hour]: 'hour',
-    [DateMaskElements.Minute]: 'minute',
-    [DateMaskElements.Second]: 'second',
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+/**
+ * Токен маски UI → литерал формата `dayjs` (strict UTC).
+ * В маске час — `hh`, в дате используются сутки 0–23 как в `formatDate` (UTC), поэтому `HH`.
+ */
+const maskElementToDayjs = {
+    [DateMaskElements.Day]: 'DD',
+    [DateMaskElements.Month]: 'MM',
+    [DateMaskElements.Year]: 'YYYY',
+    [DateMaskElements.Hour]: 'HH',
+    [DateMaskElements.Minute]: 'mm',
+    [DateMaskElements.Second]: 'ss',
+};
+const buildDayjsFormat = (mask, separator) => {
+    const parts = mask.split(separator);
+    const tokens = [];
+    for (const part of parts) {
+        const t = maskElementToDayjs[part];
+        if (t == null) {
+            return null;
+        }
+        tokens.push(t);
+    }
+    return tokens.join(separator);
 };
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 export const parseDate = (date, mask, separator = '.') => {
     const dateArr = date.split(separator);
-    const options = { year: 1900 };
-    mask.split('.').forEach((element, index) => {
-        options[orderMap[element]] = parseInt(dateArr[index]);
-    });
-    return buildIsoDate(options);
+    const maskSplit = mask.split(separator);
+    if (dateArr.length !== maskSplit.length) {
+        return new Date(Number.NaN);
+    }
+    const format = buildDayjsFormat(mask, separator);
+    if (format == null) {
+        return new Date(Number.NaN);
+    }
+    const parsed = dayjs.utc(date, format, true);
+    if (!parsed.isValid()) {
+        return new Date(Number.NaN);
+    }
+    return parsed.toDate();
 };

package/node/components/DatePicker/hooks/useDatePickerOptions/useDatePickerOptions.d.ts

@@ -30,6 +30,8 @@ type UseMaskedValueAndSelectedBaseDateReturn = {
          */
         value: string;
     };
+    /** При blur неполной даты - в onChange уходит Invalid Date (тот же стейт, что у маски). */
+    onMaskedValueBlur: () => void;
 };
 /**
  * хук объединяющий повторяющуюся логику в работе DatePicker и RangeDatePicker:

package/node/components/DatePicker/hooks/useDatePickerOptions/useDatePickerOptions.js

@@ -15,7 +15,7 @@ const useSelectedBaseDate_1 = require("../useSelectedBaseDate");
  */
 const useDatePickerOptions = ({ onChange, mask, currentValue, minDate, maxDate, monthOffset, onDatePick, }) => {
     const baseDate = (0, useBaseDateInRange_1.useBaseDateInRange)({ minDate, maxDate, monthOffset });
-    const { maskedValue, onMaskedValueChange, onMaskedDateChange } = (0, useMaskedValue_1.useMaskedValue)({
+    const { maskedValue, onMaskedValueChange, onMaskedValueBlur, onMaskedDateChange, } = (0, useMaskedValue_1.useMaskedValue)({
         currentValue,
         mask,
         onChangeValue: onChange,
@@ -42,6 +42,7 @@ const useDatePickerOptions = ({ onChange, mask, currentValue, minDate, maxDate,
             onChange: handleDatePick,
             date: selectedBaseDate || baseDate,
         },
+        onMaskedValueBlur,
     };
 };
 exports.useDatePickerOptions = useDatePickerOptions;

package/node/components/DatePicker/hooks/useMaskedValue/useMaskedValue.d.ts

@@ -19,6 +19,10 @@ type Returned = {
      * Изменение maskedValue
      * */
     onMaskedValueChange: (value: string) => void;
+    /**
+     * Реакция на blur maskedValue
+     * */
+    onMaskedValueBlur: () => void;
 };
 /**
  * Хук для управления значением для MaskField

package/node/components/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -9,19 +9,43 @@ const date_1 = require("../../../utils/date");
  */
 const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
     const [maskedValue, setMaskedValue] = (0, react_1.useState)(() => currentValue ? (0, date_1.formatDate)(currentValue, mask) : '');
+    const maskedValueRef = (0, react_1.useRef)(maskedValue);
+    /**
+     * Ввод в маску: синхронизируем локальное значение и ref (ref нужен на blur и после выбора даты из календаря,
+     * чтобы не читать устаревший state).
+     * `onChangeValue` вызываем только при пустой строке (`null`) или когда маска синтаксически полная —
+     * иначе partial не уходит наружу до завершения ввода или до blur (см. `handleMaskedValueBlur`).
+     */
     const handleMaskedValueChange = (value) => {
         setMaskedValue(value);
-        // При отсутствии value указываем null, так как если задать undefined, то отобразится defaultValue при наличии
+        maskedValueRef.current = value;
         if (!value) {
             onChangeValue?.(null, value);
+            return;
+        }
+        if (!(0, date_1.isMaskedDateSyntacticallyComplete)(value, mask)) {
+            return;
         }
-        else {
-            onChangeValue?.((0, date_1.parseDate)(value, mask), value);
+        onChangeValue?.((0, date_1.parseDate)(value, mask), value);
+    };
+    /**
+     * Blur поля: если осталась непустая неполная маска — один раз отдаём `Invalid Date` в `onChangeValue`,
+     * чтобы формы могли показать ошибку. Пустая строка и полная маска не дублируют уже отправленный `onChange`.
+     */
+    const handleMaskedValueBlur = () => {
+        const currentMaskedValue = maskedValueRef.current;
+        if (!currentMaskedValue) {
+            return;
+        }
+        if ((0, date_1.isMaskedDateSyntacticallyComplete)(currentMaskedValue, mask)) {
+            return;
         }
+        onChangeValue?.(new Date(Number.NaN), currentMaskedValue);
     };
     const handleChangeMaskedDate = (date) => {
         const formatted = (0, date_1.formatDate)(date, mask);
         setMaskedValue(formatted);
+        maskedValueRef.current = formatted;
         onChangeValue?.(date, formatted);
     };
     // здесь происходит реакция на изменение value из вне (управляемый компонент)
@@ -29,6 +53,7 @@ const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         // если новое значение пустое, то сбрасываем значение MaskField
         if (!currentValue) {
             setMaskedValue('');
+            maskedValueRef.current = '';
             return;
         }
         // здесь обрабатывается сценарий, когда в инпут вводится невалидная дата и при этом currentValue становится Invalid Date
@@ -36,16 +61,20 @@ const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         if (!(0, isDate_1.isDate)(currentValue) && maskedValue) {
             return;
         }
-        // проверяем равны ли даты
-        const isEqualValueAndMaskedDate = currentValue.getTime() === (0, date_1.parseDate)(maskedValue, mask).getTime();
+        // сравнение только при полной маске, иначе getTime() от parseDate может быть NaN
+        const isEqualValueAndMaskedDate = (0, date_1.isMaskedDateSyntacticallyComplete)(maskedValue, mask) &&
+            currentValue.getTime() === (0, date_1.parseDate)(maskedValue, mask).getTime();
         // если даты не равны, то значит изменился currentValue из вне и надо синхронизировать maskedValue
         if (!isEqualValueAndMaskedDate) {
-            setMaskedValue((0, date_1.formatDate)(currentValue, mask));
+            const formatted = (0, date_1.formatDate)(currentValue, mask);
+            setMaskedValue(formatted);
+            maskedValueRef.current = formatted;
         }
     }, [currentValue]);
     return {
         maskedValue,
         onMaskedValueChange: handleMaskedValueChange,
+        onMaskedValueBlur: handleMaskedValueBlur,
         onMaskedDateChange: handleChangeMaskedDate,
     };
 };

package/node/components/DatePicker/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ label, value, maxDate, minDate, mask, onOpen,
     };
     DatePickerInputProps: {
         value: string;
+        onBlur: () => void;
     };
     onAccept: ((value: string, maskRef: import("imask").default.InputMask<import("imask").default.AnyMaskedOptions>, e?: InputEvent | undefined, onChange?: ((changeValue: string) => void) | undefined) => void) | undefined;
     pickerProps: import("../types").PickerProps;

package/node/components/DatePicker/useLogic/useLogic.js

@@ -7,7 +7,6 @@ const usePopover_1 = require("../../usePopover");
 const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
 const useDatePickerOptions_1 = require("../hooks/useDatePickerOptions");
-const useMaskedValue_1 = require("../hooks/useMaskedValue");
 const MinMaxDateContext_1 = require("../MinMaxDateContext");
 const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE, minDate = MinMaxDateContext_1.DEFAULT_MIN_DATE, mask = constants_1.DEFAULT_DATE_MASK, onOpen, onClose, onBlur, onChange, forwardedRef, }) => {
     const ref = (0, useForwardedRef_1.useForwardedRef)(forwardedRef);
@@ -15,21 +14,11 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
     const { isOpen, actions } = (0, usePopover_1.usePopover)();
     const { open, close } = actions;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
-    const { maskedValue } = (0, useMaskedValue_1.useMaskedValue)({
-        currentValue: value,
-        mask,
-        onChangeValue: onChange,
-    });
     const isTitleShow = isMobile && typeof label === 'string';
     const handleOpen = (event) => {
         onOpen?.();
         open(event);
     };
-    const handleClose = () => {
-        onBlur?.();
-        onClose?.();
-        close();
-    };
     const handleDayPick = (date) => {
         if (isMobile) {
             setSelectedDate(date);
@@ -42,7 +31,7 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
             onChange?.(date);
         }
     };
-    const { onAccept, inputProps: calculatedInputProps, pickerProps, } = (0, useDatePickerOptions_1.useDatePickerOptions)({
+    const { onAccept, inputProps: calculatedInputProps, pickerProps, onMaskedValueBlur, } = (0, useDatePickerOptions_1.useDatePickerOptions)({
         currentValue: value,
         maxDate,
         minDate,
@@ -50,6 +39,22 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
         onDatePick: handleDayPick,
         onChange: handleChange,
     });
+    /** Blur: неполный ввод -Invalid Date в onChange (при isMobile onChange не шлём), потом внешний onBlur. */
+    const flushMaskedValueAndCallOnBlur = () => {
+        onMaskedValueBlur();
+        onBlur?.();
+    };
+    function handleClose() {
+        flushMaskedValueAndCallOnBlur();
+        onClose?.();
+        close();
+    }
+    const handleInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        flushMaskedValueAndCallOnBlur();
+    };
     const handleConfirm = () => {
         onChange?.(selectedDate);
         handleClose();
@@ -61,7 +66,8 @@ const useLogic = ({ label, value, maxDate = MinMaxDateContext_1.DEFAULT_MAX_DATE
         title: isTitleShow ? label : undefined,
     };
     const DatePickerInputProps = {
-        value: isMobile ? maskedValue : calculatedInputProps.value,
+        value: calculatedInputProps.value,
+        onBlur: handleInputBlur,
     };
     const confirmButtonProps = {
         onClick: handleConfirm,

package/node/components/DateRangePicker/useLogic/useLogic.d.ts

@@ -7,12 +7,14 @@ export declare const useLogic: ({ value, minDate, maxDate, mask, onChange, onOpe
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     endDatePickerInputProps: {
         ref: import("react").RefObject<HTMLInputElement | null>;
         value: string;
         onAccept: (_: string, maskRef: IMask.InputMask<IMask.AnyMaskedOptions>) => void;
+        onBlur: () => void;
         onClick: (e: SyntheticEvent) => void;
     };
     popoverHoveredContextProviderProps: {

package/node/components/DateRangePicker/useLogic/useLogic.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const DatePicker_1 = require("../../DatePicker");
 const useForwardedRef_1 = require("../../useForwardedRef");
 const usePopover_1 = require("../../usePopover");
+const date_1 = require("../../utils/date");
 const hooks_1 = require("./hooks");
 const utils_1 = require("./utils");
 const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = DatePicker_1.DEFAULT_MAX_DATE, mask = DatePicker_1.DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {
@@ -45,7 +46,7 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
     const handleChangeStartDate = (startDateValue, startMaskString) => {
         const isStartComplete = startDateValue != null &&
             startMaskString != null &&
-            (0, utils_1.isMaskedDateSyntacticallyComplete)(startMaskString, mask);
+            (0, date_1.isMaskedDateSyntacticallyComplete)(startMaskString, mask);
         if (isStartComplete &&
             value?.end &&
             startDateValue &&
@@ -58,7 +59,7 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
     const handleChangeEndDate = (endDateValue, endMaskString) => {
         const isEndComplete = endDateValue != null &&
             endMaskString != null &&
-            (0, utils_1.isMaskedDateSyntacticallyComplete)(endMaskString, mask);
+            (0, date_1.isMaskedDateSyntacticallyComplete)(endMaskString, mask);
         if (isEndComplete &&
             value?.start &&
             endDateValue &&
@@ -68,12 +69,12 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
         }
         onChange?.({ ...value, end: endDateValue });
     };
-    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedDateChange: onMaskedStartDateChange, } = (0, DatePicker_1.useMaskedValue)({
+    const { maskedValue: startMaskedValue, onMaskedValueChange: onMaskedStartValueChange, onMaskedValueBlur: onMaskedStartValueBlur, onMaskedDateChange: onMaskedStartDateChange, } = (0, DatePicker_1.useMaskedValue)({
         currentValue: value?.start,
         mask,
         onChangeValue: handleChangeStartDate,
     });
-    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedDateChange: onMaskedEndDateChange, } = (0, DatePicker_1.useMaskedValue)({
+    const { maskedValue: endMaskedValue, onMaskedValueChange: onMaskedEndValueChange, onMaskedValueBlur: onMaskedEndValueBlur, onMaskedDateChange: onMaskedEndDateChange, } = (0, DatePicker_1.useMaskedValue)({
         currentValue: value?.end,
         mask,
         onChangeValue: handleChangeEndDate,
@@ -82,11 +83,32 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
         onOpen?.();
         open(event);
     };
+    const flushActiveMaskedValueOnClose = () => {
+        if (activeInput === 'startDate') {
+            onMaskedStartValueBlur();
+        }
+        if (activeInput === 'endDate') {
+            onMaskedEndValueBlur();
+        }
+    };
     const handleClose = () => {
+        flushActiveMaskedValueOnClose();
         onBlur?.();
         onClose?.();
         close();
     };
+    const handleStartInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedStartValueBlur();
+    };
+    const handleEndInputBlur = () => {
+        if (isOpen) {
+            return;
+        }
+        onMaskedEndValueBlur();
+    };
     const handleClickStartInput = (e) => {
         setActiveInput('startDate');
         startInputRef.current?.focus();
@@ -141,12 +163,14 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
             ref: startInputRef,
             value: startMaskedValue,
             onAccept: handleAcceptStart,
+            onBlur: handleStartInputBlur,
             onClick: handleClickStartInput,
         },
         endDatePickerInputProps: {
             ref: endInputRef,
             value: endMaskedValue,
             onAccept: handleAcceptEnd,
+            onBlur: handleEndInputBlur,
             onClick: handleClickEndInput,
         },
         popoverHoveredContextProviderProps: {

package/node/components/DateRangePicker/useLogic/utils/index.d.ts

@@ -1,2 +1 @@
 export * from './getBoundaryDate';
-export * from './isMaskedDateSyntacticallyComplete';

package/node/components/DateRangePicker/useLogic/utils/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./getBoundaryDate"), exports);
-__exportStar(require("./isMaskedDateSyntacticallyComplete"), exports);

package/node/components/utils/date/format/index.d.ts

@@ -1,3 +1,4 @@
 export * from './formatDate';
+export * from './isMaskedDateSyntacticallyComplete';
 export * from './maskDate';
 export * from './parseDate';

package/node/components/utils/date/format/index.js

@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./formatDate"), exports);
+__exportStar(require("./isMaskedDateSyntacticallyComplete"), exports);
 __exportStar(require("./maskDate"), exports);
 __exportStar(require("./parseDate"), exports);

package/{components/DateRangePicker/useLogic/utils → node/components/utils/date/format}/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -1,4 +1,4 @@
-import { type DateMask } from '../../../../utils/date/format';
+import { type DateMask } from '../maskDate';
 /**
  * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
  */

package/node/components/utils/date/format/parseDate/parseDate.d.ts

@@ -1,5 +1,6 @@
 import { type DateMask } from '../maskDate';
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 export declare const parseDate: (date: string, mask: DateMask, separator?: string) => Date;

package/node/components/utils/date/format/parseDate/parseDate.js

@@ -1,25 +1,57 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseDate = void 0;
-const buildIsoDate_1 = require("../../buildIsoDate");
+const dayjs_1 = __importDefault(require("dayjs"));
+const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
 const maskDate_1 = require("../maskDate");
-const orderMap = {
-    [maskDate_1.DateMaskElements.Year]: 'year',
-    [maskDate_1.DateMaskElements.Month]: 'month',
-    [maskDate_1.DateMaskElements.Day]: 'day',
-    [maskDate_1.DateMaskElements.Hour]: 'hour',
-    [maskDate_1.DateMaskElements.Minute]: 'minute',
-    [maskDate_1.DateMaskElements.Second]: 'second',
+dayjs_1.default.extend(customParseFormat_1.default);
+dayjs_1.default.extend(utc_1.default);
+/**
+ * Токен маски UI → литерал формата `dayjs` (strict UTC).
+ * В маске час — `hh`, в дате используются сутки 0–23 как в `formatDate` (UTC), поэтому `HH`.
+ */
+const maskElementToDayjs = {
+    [maskDate_1.DateMaskElements.Day]: 'DD',
+    [maskDate_1.DateMaskElements.Month]: 'MM',
+    [maskDate_1.DateMaskElements.Year]: 'YYYY',
+    [maskDate_1.DateMaskElements.Hour]: 'HH',
+    [maskDate_1.DateMaskElements.Minute]: 'mm',
+    [maskDate_1.DateMaskElements.Second]: 'ss',
+};
+const buildDayjsFormat = (mask, separator) => {
+    const parts = mask.split(separator);
+    const tokens = [];
+    for (const part of parts) {
+        const t = maskElementToDayjs[part];
+        if (t == null) {
+            return null;
+        }
+        tokens.push(t);
+    }
+    return tokens.join(separator);
 };
 /**
  * утилита конвертации строковой даты созданной по маске обратно в Date
+ * Строгий разбор UTC через `dayjs` + `customParseFormat`; при невалидной строке — Invalid Date
  */
 const parseDate = (date, mask, separator = '.') => {
     const dateArr = date.split(separator);
-    const options = { year: 1900 };
-    mask.split('.').forEach((element, index) => {
-        options[orderMap[element]] = parseInt(dateArr[index]);
-    });
-    return (0, buildIsoDate_1.buildIsoDate)(options);
+    const maskSplit = mask.split(separator);
+    if (dateArr.length !== maskSplit.length) {
+        return new Date(Number.NaN);
+    }
+    const format = buildDayjsFormat(mask, separator);
+    if (format == null) {
+        return new Date(Number.NaN);
+    }
+    const parsed = dayjs_1.default.utc(date, format, true);
+    if (!parsed.isValid()) {
+        return new Date(Number.NaN);
+    }
+    return parsed.toDate();
 };
 exports.parseDate = parseDate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.52.0",
+  "version": "4.52.1",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {