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

package/universal-date-input/esm/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/esm/useSkeleton-1b036d4b.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from "react";
+import { ReactNode } from "react";
+import { TextSkeletonProps } from "./types-1b036d4b";
+type SkeletonProps = {
+    /**
+     * Флаг, явно задающий состояние, при котором контент закрывается прелоадером
+     */
+    visible?: boolean;
+    /**
+     * Флаг явного включения анимации скелета
+     */
+    animate?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительные инлайн стили
+     */
+    style?: React.CSSProperties;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+declare const Skeleton: React.FC<SkeletonProps>;
+type SkeletonProps$0 = {
+    wrapperClassName?: string;
+    dataTestId?: string;
+};
+declare function useSkeleton(showSkeleton?: boolean, skeletonProps?: TextSkeletonProps): {
+    renderSkeleton: (props: SkeletonProps$0) => React.JSX.Element | null;
+    textRef: React.RefObject<HTMLElement>;
+};
+export { SkeletonProps, Skeleton, useSkeleton };

package/universal-date-input/esm/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;
@@ -30,4 +34,4 @@ declare function updateRange({ date, validFrom, validTo, rangeBehavior, }: {
     validTo?: Date;
     rangeBehavior: 'clarification' | 'reset';
 }): string;
-export { parseDateString, formatDate, isCompleteDate, isCompleteTime, isCompleteDateRange, isValidDate, preventDefault, getValidRange, updateRange };
+export { parseDateString, formatDate, formatDateRange, isCompleteDate, isCompleteTime, isCompleteDateRange, isValidDate, preventDefault, getValidRange, updateRange };

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

@@ -2,7 +2,7 @@ import differenceInDays from 'date-fns/differenceInDays';
 import dateFnsFormat from 'date-fns/format';
 import isSameDay from 'date-fns/isSameDay';
 import parse from 'date-fns/parse';
-import { DATE_FORMAT, DATE_RANGE_SEPARATOR } from '../consts.js';
+import { DATE_RANGE_SEPARATOR, DATE_FORMAT } from '../consts.js';
 
 function parseDateString(value, format) {
     if (format === void 0) { format = DATE_FORMAT; }
@@ -12,6 +12,9 @@ var formatDate = function (date, dateFormat) {
     if (dateFormat === void 0) { dateFormat = DATE_FORMAT; }
     return dateFnsFormat(date, dateFormat);
 };
+function formatDateRange(range) {
+    return formatDate(range.dateFrom) + DATE_RANGE_SEPARATOR + formatDate(range.dateTo);
+}
 function isCompleteDate(value) {
     if (value === void 0) { value = ''; }
     return value.length === DATE_FORMAT.length;
@@ -125,4 +128,4 @@ function updateRange(_a) {
     return '';
 }
 
-export { formatDate, getValidRange, isCompleteDate, isCompleteDateRange, isCompleteTime, isValidDate, parseDateString, preventDefault, updateRange };
+export { formatDate, formatDateRange, getValidRange, isCompleteDate, isCompleteDateRange, isCompleteTime, isValidDate, parseDateString, preventDefault, updateRange };

package/universal-date-input/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/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/index.js

@@ -29,8 +29,9 @@ require('../input');
 require('../popover');
 require('../shared');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('./index.module-268a582d.js');
+require('./index.module-470cf5eb.js');
 require('./components/date-range-input/Component.js');
+require('date-fns/isAfter');
 require('date-fns/startOfMonth');
 require('./components/time-input/Component.js');
 

package/universal-date-input/index.module-470cf5eb.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');
+
+exports.styles = styles;

package/universal-date-input/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/mobile/Component.mobile.js

@@ -27,8 +27,9 @@ require('../../input');
 require('../../popover');
 require('../../shared');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('../index.module-268a582d.js');
+require('../index.module-470cf5eb.js');
 require('../components/date-range-input/Component.js');
+require('date-fns/isAfter');
 require('date-fns/startOfMonth');
 require('../components/time-input/Component.js');
 

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

@@ -28,8 +28,9 @@ require('../../input');
 require('../../popover');
 require('../../shared');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('../index.module-268a582d.js');
+require('../index.module-470cf5eb.js');
 require('../components/date-range-input/Component.js');
+require('date-fns/isAfter');
 require('date-fns/startOfMonth');
 require('../components/time-input/Component.js');
 

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

@@ -19,8 +19,9 @@ import '../../input/modern';
 import '../../popover/modern';
 import '../../shared/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './index.module-662b4af0.js';
+import './index.module-423da7f8.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/modern/components/base-universal-date-input/Component.js

@@ -9,7 +9,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-662b4af0.js';
+import { s as styles } from '../../index.module-423da7f8.js';
 import 'date-fns/clamp';
 import 'date-fns/getDaysInMonth';
 import 'date-fns/isValid';
@@ -21,6 +21,7 @@ import '../../../../input/modern';
 import '../../../../popover/modern';
 import '../../../../shared/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../../mask/plugins.js';
 import '../../mask/utils.js';

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

@@ -18,8 +18,9 @@ import '../../../../input/modern';
 import '../../../../popover/modern';
 import '../../../../shared/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../../index.module-662b4af0.js';
+import '../../index.module-423da7f8.js';
 import '../date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../time-input/Component.js';
 import '../../mask/index.js';

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

@@ -1,26 +1,31 @@
 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/modern';
 import { Popover } from '../../../../popover/modern';
 import { getDataTestId } from '../../../../shared/modern';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { DATE_TIME_SEPARATOR, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, DATE_TIME_FORMAT, DATE_FORMAT } from '../../consts.js';
-import { isValidDate, isCompleteTime, formatDate, preventDefault, isCompleteDate, parseDateString } from '../../utils/index.js';
-import { s as styles } from '../../index.module-662b4af0.js';
+import { isValidDate, isCompleteTime, formatDate, isCompleteDate, preventDefault, parseDateString } from '../../utils/index.js';
+import { s as styles } from '../../index.module-423da7f8.js';
 import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWrapperRef: inputWrapperRefProp = null, defaultValue, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, picker, rightAddons, Calendar, calendarProps = {}, platform, calendarRef, onComplete, onChange, onBlur, onCalendarClose, onPickerClick, error, popoverProps, dataTestId, wrapperClassName, wrapperHandlers, block, withTime, breakpoint, ...restProps }, ref) => {
-    const [value, setValue] = useState(defaultValue);
+function getDefaultValue(defaultValue, withTime) {
+    if (defaultValue && isValid(new Date(defaultValue))) {
+        return formatDate(defaultValue, withTime ? DATE_TIME_FORMAT : DATE_FORMAT);
+    }
+    return '';
+}
+const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWrapperRef: inputWrapperRefProp = null, defaultValue, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, picker, rightAddons, Calendar, calendarProps = {}, platform, calendarRef, onInputChange, onChange, onBlur, onCalendarClose, onPickerClick, error, popoverProps, dataTestId, wrapperClassName, wrapperHandlers, block, withTime, breakpoint, clear, onClear, ...restProps }, ref) => {
+    const [inputValue, setInputValue] = useState(() => getDefaultValue(defaultValue, withTime));
     const lastValidDate = useRef('');
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
-    const uncontrolled = valueProp === undefined;
     const { offDays } = calendarProps;
-    const inputValue = valueProp ?? value ?? '';
     const [inputDate, inputTime] = inputValue.split(DATE_TIME_SEPARATOR);
     const isValidValue = isValidDate({ value: inputDate, minDate, maxDate, offDays });
     useEffect(() => {
@@ -33,6 +38,13 @@ const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWra
             }
         }
     }, [autoCorrection, minDate, withTime, isValidValue, inputValue]);
+    useEffect(() => {
+        if (valueProp !== undefined) {
+            setInputValue(valueProp && isValid(valueProp)
+                ? formatDate(valueProp, withTime ? DATE_TIME_FORMAT : DATE_FORMAT)
+                : '');
+        }
+    }, [valueProp, withTime]);
     const getInnerError = () => {
         if (autoCorrection) {
             const isComplete = isCompleteDate(inputDate) && isCompleteTime(inputTime, withTime);
@@ -40,24 +52,24 @@ const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWra
         }
         return false;
     };
-    const callOnComplete = (val) => {
-        onComplete?.(val, parseDateString(val, withTime ? DATE_TIME_FORMAT : DATE_FORMAT));
+    const callOnChange = (val) => {
+        onChange?.(val ? parseDateString(val, withTime ? DATE_TIME_FORMAT : DATE_FORMAT) : null, val);
         lastValidDate.current = val;
     };
-    const changeValue = (val, event) => {
-        onChange?.(event, { value: val });
+    const changeInputValue = (val, event) => {
+        onInputChange?.(event, { value: val });
         const [date, time = ''] = val.split(DATE_TIME_SEPARATOR);
-        if (uncontrolled)
-            setValue(val);
-        if (isCompleteDate(date) && isCompleteTime(time, withTime))
-            callOnComplete(val);
+        setInputValue(val);
+        if (val === '' || (isCompleteDate(date) && isCompleteTime(time, withTime))) {
+            callOnChange(val);
+        }
     };
-    const handleChange = (event) => {
-        changeValue(event.target.value, event);
+    const handleInputChange = (event) => {
+        changeInputValue(event.target.value, event);
     };
     const handleCalendarChange = (date) => {
         if (date) {
-            changeValue(formatDate(date, withTime ? DATE_TIME_FORMAT : DATE_FORMAT), null);
+            changeInputValue(formatDate(date, withTime ? DATE_TIME_FORMAT : DATE_FORMAT), null);
             requestAnimationFrame(() => {
                 const dateLen = DATE_FORMAT.length;
                 const newCaretPos = withTime ? dateLen + DATE_TIME_SEPARATOR.length : dateLen;
@@ -73,13 +85,17 @@ const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWra
             const dateFilled = isCompleteDate(inputDate);
             if (dateFilled && !isCompleteTime(inputTime, withTime)) {
                 const [, prevTime] = lastValidDate.current.split(DATE_TIME_SEPARATOR);
-                changeValue(`${inputDate}${DATE_TIME_SEPARATOR}${prevTime}`, null);
+                changeInputValue(`${inputDate}${DATE_TIME_SEPARATOR}${prevTime}`, null);
             }
             if (inputValue && !dateFilled) {
-                changeValue(lastValidDate.current, null);
+                changeInputValue(lastValidDate.current, null);
             }
         }
     };
+    const handleClear = (event) => {
+        changeInputValue('', null);
+        onClear?.(event);
+    };
     const renderCalendar = () => {
         if (picker && Calendar) {
             return (
@@ -92,7 +108,7 @@ const DateInput = forwardRef(({ autoCorrection, open, value: valueProp, inputWra
     return (React.createElement("div", { ...wrapperHandlers, className: cn(styles.wrapper, wrapperClassName, {
             [styles.block]: block,
         }), tabIndex: -1, "data-test-id": getDataTestId(dataTestId, 'wrapper') },
-        React.createElement(Input, { ...restProps, breakpoint: breakpoint, dataTestId: dataTestId, wrapperRef: 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, { ...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, { offset: [0, 4], position: 'bottom-start', dataTestId: getDataTestId(dataTestId, 'popover'), ...popoverProps, open: open, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, popoverProps?.popperClassName), withTransition: false }, renderCalendar())) : (renderCalendar())));

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

@@ -2,6 +2,7 @@ export { DateInput } from './Component.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns/isValid';
 import '../../../../input/modern';
 import '../../../../popover/modern';
 import '../../../../shared/modern';
@@ -11,5 +12,5 @@ import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '../../index.module-662b4af0.js';
+import '../../index.module-423da7f8.js';
 import '../../utils/index.js';