@alfalab/core-components 44.5.1-beta.0 → 44.5.1-beta.2

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

@@ -2,30 +2,34 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useState, useRef, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
+import isValid from 'date-fns/isValid';
 import { Input } from '../../../../input/esm';
 import { Popover } from '../../../../popover/esm';
 import { getDataTestId } from '../../../../shared/esm';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
-import { DATE_TIME_SEPARATOR, DEFAULT_MIN_DATE, DATE_TIME_FORMAT, DATE_FORMAT, DEFAULT_MAX_DATE } from '../../consts.js';
-import { isValidDate, isCompleteTime, formatDate, preventDefault, isCompleteDate, parseDateString } from '../../utils/index.js';
-import { s as styles } from '../../index.module-7bb1cb03.js';
+import { DATE_TIME_SEPARATOR, DATE_TIME_FORMAT, DATE_FORMAT, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE } from '../../consts.js';
+import { isValidDate, isCompleteTime, formatDate, isCompleteDate, preventDefault, parseDateString } from '../../utils/index.js';
+import { s as styles } from '../../index.module-22d92e83.js';
 import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
+function getDefaultValue(defaultValue, withTime) {
+    if (defaultValue && isValid(new Date(defaultValue))) {
+        return formatDate(defaultValue, withTime ? DATE_TIME_FORMAT : DATE_FORMAT);
+    }
+    return '';
+}
 var DateInput = forwardRef(function (_a, ref) {
     var _b;
-    var _c;
-    var autoCorrection = _a.autoCorrection, open = _a.open, valueProp = _a.value, _d = _a.inputWrapperRef, inputWrapperRefProp = _d === void 0 ? null : _d, defaultValue = _a.defaultValue, _e = _a.minDate, minDate = _e === void 0 ? DEFAULT_MIN_DATE : _e, _f = _a.maxDate, maxDate = _f === void 0 ? DEFAULT_MAX_DATE : _f, picker = _a.picker, rightAddons = _a.rightAddons, Calendar = _a.Calendar, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, platform = _a.platform, calendarRef = _a.calendarRef, onComplete = _a.onComplete, onChange = _a.onChange, onBlur = _a.onBlur, onCalendarClose = _a.onCalendarClose, onPickerClick = _a.onPickerClick, error = _a.error, popoverProps = _a.popoverProps, dataTestId = _a.dataTestId, wrapperClassName = _a.wrapperClassName, wrapperHandlers = _a.wrapperHandlers, block = _a.block, withTime = _a.withTime, breakpoint = _a.breakpoint, restProps = __rest(_a, ["autoCorrection", "open", "value", "inputWrapperRef", "defaultValue", "minDate", "maxDate", "picker", "rightAddons", "Calendar", "calendarProps", "platform", "calendarRef", "onComplete", "onChange", "onBlur", "onCalendarClose", "onPickerClick", "error", "popoverProps", "dataTestId", "wrapperClassName", "wrapperHandlers", "block", "withTime", "breakpoint"]);
-    var _h = useState(defaultValue), value = _h[0], setValue = _h[1];
+    var autoCorrection = _a.autoCorrection, open = _a.open, valueProp = _a.value, _c = _a.inputWrapperRef, inputWrapperRefProp = _c === void 0 ? null : _c, defaultValue = _a.defaultValue, _d = _a.minDate, minDate = _d === void 0 ? DEFAULT_MIN_DATE : _d, _e = _a.maxDate, maxDate = _e === void 0 ? DEFAULT_MAX_DATE : _e, picker = _a.picker, rightAddons = _a.rightAddons, Calendar = _a.Calendar, _f = _a.calendarProps, calendarProps = _f === void 0 ? {} : _f, platform = _a.platform, calendarRef = _a.calendarRef, onInputChange = _a.onInputChange, onChange = _a.onChange, onBlur = _a.onBlur, onCalendarClose = _a.onCalendarClose, onPickerClick = _a.onPickerClick, error = _a.error, popoverProps = _a.popoverProps, dataTestId = _a.dataTestId, wrapperClassName = _a.wrapperClassName, wrapperHandlers = _a.wrapperHandlers, block = _a.block, withTime = _a.withTime, breakpoint = _a.breakpoint, clear = _a.clear, onClear = _a.onClear, restProps = __rest(_a, ["autoCorrection", "open", "value", "inputWrapperRef", "defaultValue", "minDate", "maxDate", "picker", "rightAddons", "Calendar", "calendarProps", "platform", "calendarRef", "onInputChange", "onChange", "onBlur", "onCalendarClose", "onPickerClick", "error", "popoverProps", "dataTestId", "wrapperClassName", "wrapperHandlers", "block", "withTime", "breakpoint", "clear", "onClear"]);
+    var _g = useState(function () { return getDefaultValue(defaultValue, withTime); }), inputValue = _g[0], setInputValue = _g[1];
     var lastValidDate = useRef('');
     var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
-    var uncontrolled = valueProp === undefined;
     var offDays = calendarProps.offDays;
-    var inputValue = (_c = valueProp !== null && valueProp !== void 0 ? valueProp : value) !== null && _c !== void 0 ? _c : '';
-    var _j = inputValue.split(DATE_TIME_SEPARATOR), inputDate = _j[0], inputTime = _j[1];
+    var _h = inputValue.split(DATE_TIME_SEPARATOR), inputDate = _h[0], inputTime = _h[1];
     var isValidValue = isValidDate({ value: inputDate, minDate: minDate, maxDate: maxDate, offDays: offDays });
     useEffect(function () {
         if (autoCorrection) {
@@ -37,6 +41,13 @@ var DateInput = forwardRef(function (_a, ref) {
             }
         }
     }, [autoCorrection, minDate, withTime, isValidValue, inputValue]);
+    useEffect(function () {
+        if (valueProp !== undefined) {
+            setInputValue(valueProp && isValid(valueProp)
+                ? formatDate(valueProp, withTime ? DATE_TIME_FORMAT : DATE_FORMAT)
+                : '');
+        }
+    }, [valueProp, withTime]);
     var getInnerError = function () {
         if (autoCorrection) {
             var isComplete = isCompleteDate(inputDate) && isCompleteTime(inputTime, withTime);
@@ -44,24 +55,24 @@ var DateInput = forwardRef(function (_a, ref) {
         }
         return false;
     };
-    var callOnComplete = function (val) {
-        onComplete === null || onComplete === void 0 ? void 0 : onComplete(val, parseDateString(val, withTime ? DATE_TIME_FORMAT : DATE_FORMAT));
+    var callOnChange = function (val) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(val ? parseDateString(val, withTime ? DATE_TIME_FORMAT : DATE_FORMAT) : null, val);
         lastValidDate.current = val;
     };
-    var changeValue = function (val, event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: val });
+    var changeInputValue = function (val, event) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, { value: val });
         var _a = val.split(DATE_TIME_SEPARATOR), date = _a[0], _b = _a[1], time = _b === void 0 ? '' : _b;
-        if (uncontrolled)
-            setValue(val);
-        if (isCompleteDate(date) && isCompleteTime(time, withTime))
-            callOnComplete(val);
+        setInputValue(val);
+        if (val === '' || (isCompleteDate(date) && isCompleteTime(time, withTime))) {
+            callOnChange(val);
+        }
     };
-    var handleChange = function (event) {
-        changeValue(event.target.value, event);
+    var handleInputChange = function (event) {
+        changeInputValue(event.target.value, event);
     };
     var handleCalendarChange = function (date) {
         if (date) {
-            changeValue(formatDate(date, withTime ? DATE_TIME_FORMAT : DATE_FORMAT), null);
+            changeInputValue(formatDate(date, withTime ? DATE_TIME_FORMAT : DATE_FORMAT), null);
             requestAnimationFrame(function () {
                 var _a;
                 var dateLen = DATE_FORMAT.length;
@@ -78,13 +89,17 @@ var DateInput = forwardRef(function (_a, ref) {
             var dateFilled = isCompleteDate(inputDate);
             if (dateFilled && !isCompleteTime(inputTime, withTime)) {
                 var _a = lastValidDate.current.split(DATE_TIME_SEPARATOR), prevTime = _a[1];
-                changeValue("".concat(inputDate).concat(DATE_TIME_SEPARATOR).concat(prevTime), null);
+                changeInputValue("".concat(inputDate).concat(DATE_TIME_SEPARATOR).concat(prevTime), null);
             }
             if (inputValue && !dateFilled) {
-                changeValue(lastValidDate.current, null);
+                changeInputValue(lastValidDate.current, null);
             }
         }
     };
+    var handleClear = function (event) {
+        changeInputValue('', null);
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    };
     var renderCalendar = function () {
         if (picker && Calendar) {
             return (
@@ -97,7 +112,7 @@ var DateInput = forwardRef(function (_a, ref) {
     return (React.createElement("div", __assign({}, wrapperHandlers, { className: cn(styles.wrapper, wrapperClassName, (_b = {},
             _b[styles.block] = block,
             _b)), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') }),
-        React.createElement(Input, __assign({}, restProps, { breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
+        React.createElement(Input, __assign({}, restProps, { clear: clear && isCompleteDate(inputDate) && isCompleteTime(inputTime, withTime), onClear: valueProp === undefined ? handleClear : onClear, breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, 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, __assign({ offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover') }, popoverProps, { open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.popperClassName), withTransition: false }), renderCalendar())) : (renderCalendar())));

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

@@ -3,6 +3,7 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns/isValid';
 import '../../../../input/esm';
 import '../../../../popover/esm';
 import '../../../../shared/esm';
@@ -12,5 +13,5 @@ import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '../../index.module-7bb1cb03.js';
+import '../../index.module-22d92e83.js';
 import '../../utils/index.js';

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

@@ -2,33 +2,40 @@ import { __rest, __assign } from 'tslib';
 import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
+import isAfter from 'date-fns/isAfter';
+import isValid from 'date-fns/isValid';
 import startOfMonth from 'date-fns/startOfMonth';
 import { Input } from '../../../../input/esm';
 import { Popover } from '../../../../popover/esm';
 import { getDataTestId } from '../../../../shared/esm';
 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-7bb1cb03.js';
+import { getValidRange, formatDate, formatDateRange, isCompleteDateRange, preventDefault, isCompleteDate, parseDateString, updateRange } from '../../utils/index.js';
+import { s as styles } from '../../index.module-22d92e83.js';
 import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
+function getDefaultValue(defaultValue) {
+    if (defaultValue && isValid(defaultValue.dateFrom) && isValid(defaultValue.dateTo)) {
+        return formatDateRange(defaultValue);
+    }
+    return '';
+}
 var DateRangeInput = forwardRef(function (_a, ref) {
     var _b;
-    var _c;
-    var autoCorrection = _a.autoCorrection, breakpoint = _a.breakpoint, wrapperClassName = _a.wrapperClassName, open = _a.open, onCalendarClose = _a.onCalendarClose, valueProp = _a.value, defaultValue = _a.defaultValue, _d = _a.inputWrapperRef, inputWrapperRefProp = _d === void 0 ? null : _d, onComplete = _a.onComplete, onChange = _a.onChange, onBlur = _a.onBlur, Calendar = _a.Calendar, wrapperHandlers = _a.wrapperHandlers, calendarRef = _a.calendarRef, _e = _a.calendarProps, calendarProps = _e === void 0 ? {} : _e, _f = _a.minDate, minDate = _f === void 0 ? DEFAULT_MAX_DATE : _f, _g = _a.maxDate, maxDate = _g === void 0 ? DEFAULT_MIN_DATE : _g, block = _a.block, dataTestId = _a.dataTestId, error = _a.error, popoverProps = _a.popoverProps, rightAddons = _a.rightAddons, picker = _a.picker, platform = _a.platform, onPickerClick = _a.onPickerClick, _h = _a.rangeBehavior, rangeBehavior = _h === void 0 ? 'clarification' : _h, restProps = __rest(_a, ["autoCorrection", "breakpoint", "wrapperClassName", "open", "onCalendarClose", "value", "defaultValue", "inputWrapperRef", "onComplete", "onChange", "onBlur", "Calendar", "wrapperHandlers", "calendarRef", "calendarProps", "minDate", "maxDate", "block", "dataTestId", "error", "popoverProps", "rightAddons", "picker", "platform", "onPickerClick", "rangeBehavior"]);
-    var _j = useState(defaultValue), value = _j[0], setValue = _j[1];
-    var _k = useState(calendarProps.defaultMonth), calendarMonth = _k[0], setCalendarMonth = _k[1];
+    var autoCorrection = _a.autoCorrection, breakpoint = _a.breakpoint, wrapperClassName = _a.wrapperClassName, open = _a.open, onCalendarClose = _a.onCalendarClose, valueProp = _a.value, defaultValue = _a.defaultValue, _c = _a.inputWrapperRef, inputWrapperRefProp = _c === void 0 ? null : _c, onInputChange = _a.onInputChange, onChange = _a.onChange, onBlur = _a.onBlur, Calendar = _a.Calendar, wrapperHandlers = _a.wrapperHandlers, calendarRef = _a.calendarRef, _d = _a.calendarProps, calendarProps = _d === void 0 ? {} : _d, _e = _a.minDate, minDate = _e === void 0 ? DEFAULT_MAX_DATE : _e, _f = _a.maxDate, maxDate = _f === void 0 ? DEFAULT_MIN_DATE : _f, block = _a.block, dataTestId = _a.dataTestId, error = _a.error, popoverProps = _a.popoverProps, rightAddons = _a.rightAddons, picker = _a.picker, platform = _a.platform, onPickerClick = _a.onPickerClick, _g = _a.rangeBehavior, rangeBehavior = _g === void 0 ? 'clarification' : _g, clear = _a.clear, onClear = _a.onClear, restProps = __rest(_a, ["autoCorrection", "breakpoint", "wrapperClassName", "open", "onCalendarClose", "value", "defaultValue", "inputWrapperRef", "onInputChange", "onChange", "onBlur", "Calendar", "wrapperHandlers", "calendarRef", "calendarProps", "minDate", "maxDate", "block", "dataTestId", "error", "popoverProps", "rightAddons", "picker", "platform", "onPickerClick", "rangeBehavior", "clear", "onClear"]);
+    var _h = useState(function () { return getDefaultValue(defaultValue); }), inputValue = _h[0], setInputValue = _h[1];
+    var _j = useState(calendarProps.defaultMonth), calendarMonth = _j[0], setCalendarMonth = _j[1];
     var lastValidRange = useRef('');
     var inputRef = useRef(null);
     var inputWrapperRef = useRef(null);
-    var uncontrolled = valueProp === undefined;
-    var inputValue = (_c = valueProp !== null && valueProp !== void 0 ? valueProp : value) !== null && _c !== void 0 ? _c : '';
     var offDays = calendarProps.offDays;
-    var _l = inputValue.split(DATE_RANGE_SEPARATOR), _m = _l[0], from = _m === void 0 ? '' : _m, _o = _l[1], to = _o === void 0 ? '' : _o;
-    var _p = useMemo(function () { return getValidRange({ from: from, to: to, offDays: offDays, minDate: minDate, maxDate: maxDate }); }, [from, to, offDays, maxDate, minDate]), validFrom = _p.validFrom, validTo = _p.validTo;
+    var _k = inputValue.split(DATE_RANGE_SEPARATOR), _l = _k[0], from = _l === void 0 ? '' : _l, _m = _k[1], to = _m === void 0 ? '' : _m;
+    var dateFromProp = valueProp === null || valueProp === void 0 ? void 0 : valueProp.dateFrom;
+    var dateToProp = valueProp === null || valueProp === void 0 ? void 0 : valueProp.dateTo;
+    var _o = useMemo(function () { return getValidRange({ from: from, to: to, offDays: offDays, minDate: minDate, maxDate: maxDate }); }, [from, to, offDays, maxDate, minDate]), validFrom = _o.validFrom, validTo = _o.validTo;
     useEffect(function () {
         if (autoCorrection && (!lastValidRange.current || !inputValue)) {
             var min = formatDate(minDate);
@@ -41,42 +48,60 @@ var DateRangeInput = forwardRef(function (_a, ref) {
             setCalendarMonth(startOfMonth(validTo || validFrom || Date.now()).getTime());
         }
     }, [validFrom, validTo, open, picker]);
+    useEffect(function () {
+        if (dateFromProp !== undefined && dateToProp !== undefined) {
+            setInputValue(dateFromProp && dateToProp && isValid(dateFromProp) && isValid(dateToProp)
+                ? formatDateRange({ dateFrom: dateFromProp, dateTo: dateToProp })
+                : '');
+        }
+    }, [dateFromProp, dateToProp]);
     var getInnerError = function () {
         if (autoCorrection) {
-            return (isCompleteDate(from) && !validFrom) || (isCompleteDate(to) && !validTo)
+            var isCompleteFrom = isCompleteDate(from);
+            var isCompleteTo = isCompleteDate(to);
+            var isComplete = isCompleteFrom && isCompleteTo;
+            return (isCompleteFrom && !validFrom) ||
+                (isCompleteTo && !validTo) ||
+                (isComplete && isAfter(parseDateString(from), parseDateString(to)))
                 ? 'Эта дата недоступна'
                 : false;
         }
         return false;
     };
-    var callOnComplete = function (val) {
-        var _a = val.split(DATE_RANGE_SEPARATOR), dateFrom = _a[0], dateTo = _a[1];
-        onComplete === null || onComplete === void 0 ? void 0 : onComplete(val, parseDateString(dateFrom), parseDateString(dateTo));
+    var callOnChange = function (val) {
+        var _a = val.split(DATE_RANGE_SEPARATOR), _b = _a[0], dateFrom = _b === void 0 ? '' : _b, _c = _a[1], dateTo = _c === void 0 ? '' : _c;
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            dateFrom: dateFrom ? parseDateString(dateFrom) : null,
+            dateTo: dateFrom ? parseDateString(dateTo) : null,
+        }, val);
         lastValidRange.current = val;
     };
-    var changeValue = function (val, event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: val });
-        if (uncontrolled)
-            setValue(val);
-        if (isCompleteDateRange(val))
-            callOnComplete(val);
+    var changeInputValue = function (val, event) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, { value: val });
+        setInputValue(val);
+        if (val === '' || isCompleteDateRange(val))
+            callOnChange(val);
     };
     var handleMonthChange = function (date) {
         var _a;
         setCalendarMonth(date);
         (_a = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.onMonthChange) === null || _a === void 0 ? void 0 : _a.call(calendarProps, date);
     };
-    var handleChange = function (event) {
-        changeValue(event.target.value, event);
+    var handleInputChange = function (event) {
+        changeInputValue(event.target.value, event);
     };
     var handleCalendarChange = function (date) {
         var newValue = updateRange({ date: date, validFrom: validFrom, validTo: validTo, rangeBehavior: rangeBehavior });
-        changeValue(newValue, null);
+        changeInputValue(newValue, null);
         requestAnimationFrame(function () {
             var _a;
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(newValue.length, newValue.length);
         });
     };
+    var handleClear = function (event) {
+        changeInputValue('', null);
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
+    };
     var handleBlur = function (event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         if (autoCorrection) {
@@ -85,7 +110,7 @@ var DateRangeInput = forwardRef(function (_a, ref) {
                 var _a = lastValidRange.current.split(DATE_RANGE_SEPARATOR), prevFrom = _a[0], prevTo = _a[1];
                 var newFrom = validFrom ? formatDate(validFrom) : prevFrom;
                 var newTo = validTo ? formatDate(validTo) : prevTo;
-                changeValue("".concat(newFrom).concat(DATE_RANGE_SEPARATOR).concat(newTo), null);
+                changeInputValue("".concat(newFrom).concat(DATE_RANGE_SEPARATOR).concat(newTo), null);
             }
         }
     };
@@ -101,7 +126,7 @@ var DateRangeInput = forwardRef(function (_a, ref) {
     return (React.createElement("div", __assign({}, wrapperHandlers, { className: cn(styles.wrapper, wrapperClassName, (_b = {},
             _b[styles.block] = block,
             _b)), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') }),
-        React.createElement(Input, __assign({}, restProps, { dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleChange, onBlur: handleBlur, error: error || getInnerError(), block: true, rightAddons: React.createElement(React.Fragment, null,
+        React.createElement(Input, __assign({}, restProps, { clear: clear && isCompleteDateRange(inputValue), onClear: valueProp === undefined ? handleClear : onClear, dataTestId: dataTestId, breakpoint: breakpoint, wrapperRef: mergeRefs([inputWrapperRef, inputWrapperRefProp]), ref: mergeRefs([ref, inputRef]), value: inputValue, inputMode: 'decimal', onInput: handleInputChange, 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, __assign({ offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover') }, popoverProps, { open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.popperClassName), withTransition: false }), renderCalendar())) : (renderCalendar())));

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

@@ -3,6 +3,8 @@ import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns/isAfter';
+import 'date-fns/isValid';
 import 'date-fns/startOfMonth';
 import '../../../../input/esm';
 import '../../../../popover/esm';
@@ -13,5 +15,5 @@ import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '../../index.module-7bb1cb03.js';
+import '../../index.module-22d92e83.js';
 import '../../utils/index.js';

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

@@ -10,38 +10,43 @@ import 'date-fns/parse';
 
 var defaultTime = "00".concat(HOURS_MINUTES_SEPARATOR, "00");
 var TimeInput = forwardRef(function (_a, ref) {
-    var _b;
-    var autoCorrection = _a.autoCorrection, valueProp = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onComplete = _a.onComplete, onBlur = _a.onBlur, restProps = __rest(_a, ["autoCorrection", "value", "defaultValue", "onChange", "onComplete", "onBlur"]);
-    var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
+    var autoCorrection = _a.autoCorrection, valueProp = _a.value, defaultValue = _a.defaultValue, clear = _a.clear, onClear = _a.onClear, onChange = _a.onChange, onInputChange = _a.onInputChange, onBlur = _a.onBlur, restProps = __rest(_a, ["autoCorrection", "value", "defaultValue", "clear", "onClear", "onChange", "onInputChange", "onBlur"]);
+    var _b = useState(defaultValue), inputValue = _b[0], setInputValue = _b[1];
     var lastValidTime = useRef(defaultTime);
-    var uncontrolled = valueProp === undefined;
-    var inputValue = (_b = value !== null && value !== void 0 ? value : valueProp) !== null && _b !== void 0 ? _b : '';
     useEffect(function () {
         if (autoCorrection && !inputValue) {
             lastValidTime.current = defaultTime;
         }
     }, [autoCorrection, inputValue]);
-    var callOnComplete = function (val) {
-        onComplete === null || onComplete === void 0 ? void 0 : onComplete(val);
+    useEffect(function () {
+        if (valueProp !== undefined) {
+            setInputValue(valueProp);
+        }
+    }, [valueProp]);
+    var callOnChange = function (val) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(val);
         lastValidTime.current = val;
     };
-    var changeValue = function (val, event) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: val });
-        if (uncontrolled)
-            setValue(val);
-        if (isCompleteTime(val, true))
-            callOnComplete(val);
+    var changeInputValue = function (val, event) {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, { value: val });
+        setInputValue(val);
+        if (val === '' || isCompleteTime(val, true))
+            callOnChange(val);
+    };
+    var handleInputChange = function (event) {
+        changeInputValue(event.target.value, event);
     };
-    var handleChange = function (event) {
-        changeValue(event.target.value, event);
+    var handleClear = function (event) {
+        changeInputValue('', null);
+        onClear === null || onClear === void 0 ? void 0 : onClear(event);
     };
     var handleBlur = function (event) {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
         if (autoCorrection && inputValue && !isCompleteTime(inputValue, true)) {
-            changeValue(lastValidTime.current, null);
+            changeInputValue(lastValidTime.current, null);
         }
     };
-    return (React.createElement(Input, __assign({}, restProps, { onBlur: handleBlur, onInput: handleChange, ref: ref, value: inputValue, inputMode: 'decimal' })));
+    return (React.createElement(Input, __assign({}, restProps, { clear: clear && isCompleteTime(inputValue, true), onClear: valueProp === undefined ? handleClear : onClear, onBlur: handleBlur, onInput: handleInputChange, ref: ref, value: inputValue, inputMode: 'decimal' })));
 });
 
 export { TimeInput };

package/universal-date-input/esm/desktop/Component.desktop.js

@@ -19,8 +19,9 @@ import '../../../input/esm';
 import '../../../popover/esm';
 import '../../../shared/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-7bb1cb03.js';
+import '../index.module-22d92e83.js';
 import '../components/date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../components/time-input/Component.js';
 import '../mask/index.js';

package/universal-date-input/esm/desktop/index.js

@@ -20,8 +20,9 @@ import '../../../input/esm';
 import '../../../popover/esm';
 import '../../../shared/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-7bb1cb03.js';
+import '../index.module-22d92e83.js';
 import '../components/date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../components/time-input/Component.js';
 import '../mask/index.js';

package/universal-date-input/esm/index-5712fce2.d.ts

@@ -5,7 +5,7 @@ import { MouseEvent, ReactNode, FC, KeyboardEvent, MutableRefObject, Ref, Button
 import { DayAddons, SelectorView, View, Day, Month } from "./typings-5684a67d";
 import { TransitionProps } from "react-transition-group/Transition";
 import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
-import { TextElementType, TextSkeletonProps } from "./types-1328ead9";
+import { TextElementType, TextSkeletonProps } from "./types-1b036d4b";
 type CalendarDesktopProps = {
     /**
      * Дополнительный класс
@@ -928,7 +928,7 @@ declare const TitleResponsive: React.ForwardRefExoticComponent<Omit<React.HTMLAt
     children?: React.ReactNode;
     rowLimit?: 1 | 2 | 3 | undefined;
     showSkeleton?: boolean | undefined;
-    skeletonProps?: import("./types-1328ead9").TextSkeletonProps | undefined;
+    skeletonProps?: import("./types-1b036d4b").TextSkeletonProps | undefined;
 } & React.RefAttributes<HTMLDivElement | HTMLHeadingElement>>;
 type YearsTableProps = {
     /**
@@ -952,5 +952,5 @@ declare const YearsTable: FC<YearsTableProps>;
 export { ResponsiveCalendarProps, ResponsiveCalendarProps as CalendarProps, CalendarResponsive, CalendarResponsive as Calendar, ModalMobile, ModalMobileProps, UseCalendarProps, useCalendar, Modal, ResponsiveContext, Content, ModalContext, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore, Typography, typographyPresets, TitleResponsive, YearsTableProps, YearsTable };
 export * from "./Component-5684a67d";
 export type { SavedStyle, TitleProps, TextProps, Color };
-export * from "./use-skeleton-1328ead9";
+export * from "./useSkeleton-1b036d4b";
 export * from "./Component-e2b6c730";

package/universal-date-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 16jn4 */
+/* hash: jqfdd */
 :root {
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb;
@@ -43,27 +43,27 @@
 } :root {
     --calendar-icon-color: var(--color-light-neutral-translucent-700);
     --calendar-popover-border-radius: var(--border-radius-m);
-} .universal-date-input__wrapper_1h1rl {
+} .universal-date-input__wrapper_112gi {
     display: inline-block;
     outline: none;
     position: relative;
-} .universal-date-input__block_1h1rl {
+} .universal-date-input__block_112gi {
     width: 100%;
-} .universal-date-input__calendarIcon_1h1rl {
+} .universal-date-input__calendarIcon_112gi {
     width: 24px;
     height: 100%;
     display: block;
     color: var(--calendar-icon-color);
-} .universal-date-input__calendarContainer_1h1rl {
+} .universal-date-input__calendarContainer_112gi {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius);
     border: 1px solid var(--color-light-neutral-300);
     width: var(--calendar-width)
-} @media (max-width: 374px) { .universal-date-input__calendarContainer_1h1rl {
+} @media (max-width: 374px) { .universal-date-input__calendarContainer_112gi {
         width: 100%;
         min-width: 288px
 }
-    } .universal-date-input__blink_1h1rl.universal-date-input__blink_1h1rl.universal-date-input__blink_1h1rl {
+    } .universal-date-input__blink_112gi.universal-date-input__blink_112gi.universal-date-input__blink_112gi {
     background-color: var(--color-light-status-muted-negative);
 }

package/universal-date-input/esm/index.js

@@ -21,8 +21,9 @@ import '../../input/esm';
 import '../../popover/esm';
 import '../../shared/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './index.module-7bb1cb03.js';
+import './index.module-22d92e83.js';
 import './components/date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import './components/time-input/Component.js';
 import './mask/index.js';

package/universal-date-input/esm/index.module-22d92e83.js

@@ -0,0 +1,4 @@
+var styles = {"wrapper":"universal-date-input__wrapper_112gi","block":"universal-date-input__block_112gi","calendarIcon":"universal-date-input__calendarIcon_112gi","calendarContainer":"universal-date-input__calendarContainer_112gi","blink":"universal-date-input__blink_112gi"};
+require('./index.css');
+
+export { styles as s };

package/universal-date-input/esm/mobile/Component.mobile.d.ts

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

package/universal-date-input/esm/mobile/Component.mobile.js

@@ -19,8 +19,9 @@ import '../../../input/esm';
 import '../../../popover/esm';
 import '../../../shared/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-7bb1cb03.js';
+import '../index.module-22d92e83.js';
 import '../components/date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../components/time-input/Component.js';
 import '../mask/index.js';

package/universal-date-input/esm/mobile/index.js

@@ -20,8 +20,9 @@ import '../../../input/esm';
 import '../../../popover/esm';
 import '../../../shared/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../index.module-7bb1cb03.js';
+import '../index.module-22d92e83.js';
 import '../components/date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../components/time-input/Component.js';
 import '../mask/index.js';

package/universal-date-input/esm/shared/index.d.ts

@@ -0,0 +1,2 @@
+export { DATE_RANGE_SEPARATOR, DATE_TIME_SEPARATOR, DATE_TIME_FORMAT, DATE_FORMAT } from "../consts";
+export { formatDate, parseDateString, formatDateRange } from "../utils/index";

package/universal-date-input/esm/shared/index.js

@@ -0,0 +1,6 @@
+export { DATE_FORMAT, DATE_RANGE_SEPARATOR, DATE_TIME_FORMAT, DATE_TIME_SEPARATOR } from '../consts.js';
+export { formatDate, formatDateRange, parseDateString } from '../utils/index.js';
+import 'date-fns/differenceInDays';
+import 'date-fns/format';
+import 'date-fns/isSameDay';
+import 'date-fns/parse';

package/universal-date-input/esm/types-1b036d4b.d.ts

@@ -0,0 +1,13 @@
+type TextElementType = HTMLParagraphElement | HTMLSpanElement | HTMLDivElement;
+type WidthUnit = number | string;
+type TextSkeletonProps = {
+    /**
+     *  Кол-во строк текста
+     */
+    rows?: number;
+    /**
+     * Ширина строки
+     */
+    width?: WidthUnit | WidthUnit[];
+};
+export { TextElementType, TextSkeletonProps };