@alfalab/core-components 44.7.0-beta.1 → 45.0.0

package/universal-date-input/cssm/types.d.ts

@@ -15,16 +15,12 @@ type DateSegments<T = string> = {
     hours: T;
     minutes: T;
 };
-interface BaseUniversalDateInputProps extends Omit<InputProps, 'onChange' | 'wrapperRef' | 'dataTestId'> {
+interface BaseUniversalDateInputProps extends Omit<InputProps, 'onChange' | 'wrapperRef' | 'dataTestId' | 'value' | 'defaultValue'> {
     /**
      * Автоматическое исправление ввода
      *  @default true
      */
     autoCorrection?: boolean;
-    /**
-     *  Значение инпута
-     */
-    value?: string;
     /**
      * Минимальная дата, доступная для выбора (timestamp)
      */
@@ -74,9 +70,9 @@ interface BaseUniversalDateInputProps extends Omit<InputProps, 'onChange' | 'wra
      */
     onPickerClick?: (event: MouseEvent) => void;
     /**
-     * Обработчик изменения значения
+     * Обработчик изменения значения в инпуте
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
+    onInputChange?: (event: ChangeEvent<HTMLInputElement> | null, payload: {
         value: string;
     }) => void;
     /**
@@ -86,6 +82,14 @@ interface BaseUniversalDateInputProps extends Omit<InputProps, 'onChange' | 'wra
     dataTestId?: string;
 }
 interface InnerDateInputProps extends Omit<BaseUniversalDateInputProps, 'view'> {
+    /**
+     *  Дата
+     */
+    value?: Date | number | null;
+    /**
+     *  Дата по умолчанию
+     */
+    defaultValue?: Date | number;
     /**
      * Флаг, открыт ли календарь
      */
@@ -112,35 +116,60 @@ interface InnerDateInputProps extends Omit<BaseUniversalDateInputProps, 'view'>
         onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;
     };
     /**
-     * Обработчик окончания ввода
+     * Обработчик изменения значения
      */
-    onComplete?: (value: string, date: Date) => void;
+    onChange?: (date: Date | null, value: string) => void;
 }
-interface InnerDateRangeInputProps extends Omit<InnerDateInputProps, 'onComplete'> {
+interface InnerDateRangeInputProps extends Omit<InnerDateInputProps, 'onChange' | 'value' | 'defaultValue'> {
+    /**
+     *  Диапазон дат
+     */
+    value?: {
+        dateFrom: Date | number | null;
+        dateTo: Date | number | null;
+    };
+    /**
+     *  Диапазон дат по умолчанию
+     */
+    defaultValue?: {
+        dateFrom: Date | number;
+        dateTo: Date | number;
+    };
     /**
      * Тип выбора границ в календаре
      * @default clarification
      */
     rangeBehavior?: 'clarification' | 'reset';
     /**
-     * Обработчик окончания ввода
+     * Обработчик изменения значения
      */
-    onComplete?: (value: string, dateFrom: Date, dateTo: Date) => void;
+    onChange?: (range: {
+        dateFrom: Date | null;
+        dateTo: Date | null;
+    }, value: string) => void;
 }
 interface InnerTimeInputProps extends Omit<InputProps, 'onChange'> {
+    /**
+     *  Время
+     */
+    value?: string;
+    /**
+     *  Время по умолчанию
+     */
+    defaultValue?: string;
     /**
      * Автоматическое исправление ввода
      *  @default true
      */
     autoCorrection?: BaseUniversalDateInputProps['autoCorrection'];
     /**
-     * Обработчик изменения значения
+     * Обработчик изменения значения в инпуте
      */
-    onChange?: BaseUniversalDateInputProps['onChange'];
+    onInputChange?: BaseUniversalDateInputProps['onInputChange'];
     /**
-     * Обработчик окончания ввода
+     * Обработчик изменения значения
      */
-    onComplete?: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 type PrivateProps = 'platform' | 'withTime' | 'open' | 'calendarRef' | 'inputWrapperRef' | 'wrapperHandlers' | 'onPickerClick';
 type Never<T> = {
@@ -153,28 +182,28 @@ type NoPickerProps = Never<WithPickerRequiredProps> & Never<WithPickerProps>;
 type UniversalDateInputConditionalProps = ({
     view: 'date';
     picker: true;
-} & WithPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+} & WithPickerProps & Pick<InnerDateInputProps, 'onChange' | 'wrapperClassName' | 'value' | 'defaultValue'>) | ({
     view: 'date';
     picker?: false;
-} & NoPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+} & NoPickerProps & Pick<InnerDateInputProps, 'onChange' | 'wrapperClassName' | 'value' | 'defaultValue'>) | ({
     view: 'date-time';
     picker: true;
-} & WithPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+} & WithPickerProps & Pick<InnerDateInputProps, 'onChange' | 'wrapperClassName' | 'value' | 'defaultValue'>) | ({
     view: 'date-time';
     picker?: false;
-} & NoPickerProps & Pick<InnerDateInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+} & NoPickerProps & Pick<InnerDateInputProps, 'onChange' | 'wrapperClassName' | 'value' | 'defaultValue'>) | ({
     view: 'date-range';
     picker: true;
-} & WithPickerProps & Pick<InnerDateRangeInputProps, 'onComplete' | 'wrapperClassName' | 'rangeBehavior'>) | ({
+} & WithPickerProps & Pick<InnerDateRangeInputProps, 'onChange' | 'wrapperClassName' | 'rangeBehavior' | 'value' | 'defaultValue'>) | ({
     view: 'date-range';
     picker?: false;
-} & NoPickerProps & Pick<InnerDateRangeInputProps, 'onComplete' | 'wrapperClassName'>) | ({
+} & NoPickerProps & Pick<InnerDateRangeInputProps, 'onChange' | 'wrapperClassName' | 'value' | 'defaultValue'>) | ({
     view: 'time';
     picker?: never;
     minDate?: never;
     maxDate?: never;
     Calendar?: never;
-} & Pick<InnerTimeInputProps, 'onComplete'>);
+} & Pick<InnerTimeInputProps, 'onChange' | 'value' | 'defaultValue'>);
 type UniversalDateInputProps = Omit<BaseUniversalDateInputProps, PrivateProps | keyof WithPickerProps> & UniversalDateInputConditionalProps;
 type UniversalDateInputMobileProps = Omit<UniversalDateInputProps, 'breakpoint' | 'defaultMatchMediaValue'> & UniversalDateInputConditionalProps;
 type UniversalDateInputDesktopProps = Omit<UniversalDateInputProps, 'breakpoint' | 'defaultMatchMediaValue'> & UniversalDateInputConditionalProps;

package/universal-date-input/cssm/typings-61e2321e.d.ts

@@ -0,0 +1,114 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default 56
+     * @description xxs, xs, s, m, l, xl deprecated, используйте вместо них 32, 40, 48, 56, 64, 72 соответственно
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 32 | 40 | 48 | 56 | 64 | 72;
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования.
+     * Для спиннера используется модификатор -loader
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Включает размытие фона для некоторых вариантов кнопки
+     * @description Может привести к просадке fps и другим багам. Старайтесь не размещать слишком много заблюреных элементов на одной странице.
+     */
+    allowBackdropBlur?: boolean;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PrivateButtonProps = {
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/universal-date-input/cssm/utils/index.d.ts

@@ -1,6 +1,10 @@
 import { SyntheticEvent } from 'react';
 declare function parseDateString(value: string, format?: string): Date;
 declare const formatDate: (date: Date | number, dateFormat?: string) => string;
+declare function formatDateRange(range: {
+    dateFrom: Date | number;
+    dateTo: Date | number;
+}): string;
 declare function isCompleteDate(value?: string): boolean;
 declare function isCompleteTime(value?: string, withTime?: boolean): boolean;
 declare function isCompleteDateRange(value?: string): boolean;
@@ -42,4 +46,4 @@ declare function getUniversalDateInputTestIds(dataTestId: string): {
     error: string;
     hint: string;
 };
-export { parseDateString, formatDate, isCompleteDate, isCompleteTime, isCompleteDateRange, isValidDate, preventDefault, getValidRange, updateRange, getUniversalDateInputTestIds };
+export { parseDateString, formatDate, formatDateRange, isCompleteDate, isCompleteTime, isCompleteDateRange, isValidDate, preventDefault, getValidRange, updateRange, getUniversalDateInputTestIds };

package/universal-date-input/cssm/utils/index.js

@@ -22,6 +22,9 @@ var formatDate = function (date, dateFormat) {
     if (dateFormat === void 0) { dateFormat = consts.DATE_FORMAT; }
     return dateFnsFormat__default.default(date, dateFormat);
 };
+function formatDateRange(range) {
+    return formatDate(range.dateFrom) + consts.DATE_RANGE_SEPARATOR + formatDate(range.dateTo);
+}
 function isCompleteDate(value) {
     if (value === void 0) { value = ''; }
     return value.length === consts.DATE_FORMAT.length;
@@ -158,6 +161,7 @@ function getUniversalDateInputTestIds(dataTestId) {
 }
 
 exports.formatDate = formatDate;
+exports.formatDateRange = formatDateRange;
 exports.getUniversalDateInputTestIds = getUniversalDateInputTestIds;
 exports.getValidRange = getValidRange;
 exports.isCompleteDate = isCompleteDate;

package/universal-date-input/esm/Component-61e2321e.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { CommonButtonProps, PrivateButtonProps } from "./typings-61e2321e";
+type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     */
+    visible?: boolean;
+    /**
+     * Размер компонента
+     * @description xs, s, m deprecated, используйте вместо них 16, 24, 48 соответственно
+     */
+    size?: "xs" | "s" | "m" | 16 | 24 | 48;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Палитра, в контексте которой используется спиннер
+     */
+    colors?: "default" | "inverted";
+};
+declare const SIZE_TO_CLASSNAME_MAP: {
+    xs: string;
+    s: string;
+    m: string;
+    16: string;
+    24: string;
+    48: string;
+};
+declare const Spinner: FC<SpinnerProps>;
+/**
+ * Минимальное время отображения лоадера - 500мс,
+ * чтобы при быстрых ответах от сервера кнопка не «моргала».
+ */
+declare const LOADER_MIN_DISPLAY_INTERVAL = 500;
+declare const BaseButton: React.ForwardRefExoticComponent<(CommonButtonProps & PrivateButtonProps) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export { SpinnerProps, SIZE_TO_CLASSNAME_MAP, Spinner, LOADER_MIN_DISPLAY_INTERVAL, BaseButton };

package/universal-date-input/esm/Component.responsive-71043c62.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import React from 'react';
-import { ButtonProps } from "./typings-c241b310";
+import { ButtonProps } from "./typings-61e2321e";
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { Button };

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

@@ -26,8 +26,9 @@ import './components/date-input/Component.js';
 import '../../input/esm';
 import '../../popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './index.module-bd4ab388.js';
+import './index.module-af3cfc05.js';
 import './components/date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import './components/time-input/Component.js';
 

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

@@ -10,7 +10,7 @@ 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-bd4ab388.js';
+import { s as styles } from '../../index.module-af3cfc05.js';
 import '../../mask/plugins.js';
 import '../../mask/utils.js';
 import 'date-fns/clamp';
@@ -27,6 +27,7 @@ import '../../../../shared/esm';
 import '../../../../input/esm';
 import '../../../../popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 
 var BaseUniversalDateInput = forwardRef(function (_a, ref) {

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

@@ -25,7 +25,8 @@ import '../date-input/Component.js';
 import '../../../../input/esm';
 import '../../../../popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../../index.module-bd4ab388.js';
+import '../../index.module-af3cfc05.js';
 import '../date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../time-input/Component.js';

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-bd4ab388.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-af3cfc05.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';
@@ -13,4 +14,4 @@ import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '../../index.module-bd4ab388.js';
+import '../../index.module-af3cfc05.js';