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

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

@@ -3,7 +3,7 @@ import dateFnsFormat from 'date-fns/format';
 import isSameDay from 'date-fns/isSameDay';
 import parse from 'date-fns/parse';
 import { getDataTestId } from '../../../shared/esm';
-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; }
@@ -13,6 +13,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;
@@ -148,4 +151,4 @@ function getUniversalDateInputTestIds(dataTestId) {
     };
 }
 
-export { formatDate, getUniversalDateInputTestIds, getValidRange, isCompleteDate, isCompleteDateRange, isCompleteTime, isValidDate, parseDateString, preventDefault, updateRange };
+export { formatDate, formatDateRange, getUniversalDateInputTestIds, getValidRange, isCompleteDate, isCompleteDateRange, isCompleteTime, isValidDate, parseDateString, preventDefault, updateRange };

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

@@ -383,9 +383,10 @@ declare const BaseModalContext: React.Context<BaseModalContext>;
 type ModalDesktopProps = BaseModalProps & {
     /**
      * Ширина модального окна
-     * @default "m"
+     * @default 600
+     * @description s, m, l, xl deprecated, используйте вместо них 500, 600, 800, 1140 соответственно
      */
-    size?: "s" | "m" | "l" | "xl" | "fullscreen";
+    size?: "s" | "m" | "l" | "xl" | "fullscreen" | 500 | 600 | 800 | 1140;
     /**
      * Растягивает модальное окно на весь экран
      * @deprecated Используйте размер fullscreen
@@ -704,7 +705,7 @@ declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, sele
     };
 };
 declare const Modal: React.ForwardRefExoticComponent<BaseModalProps & {
-    size?: "s" | "m" | "l" | "xl" | "fullscreen" | undefined;
+    size?: "s" | "m" | "l" | "xl" | 500 | "fullscreen" | 600 | 800 | 1140 | undefined;
     fullscreen?: boolean | undefined;
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
@@ -714,6 +715,17 @@ declare const Modal: React.ForwardRefExoticComponent<BaseModalProps & {
 declare const ResponsiveContext: React.Context<TResponsiveModalContext>;
 declare const Content: FC<ContentProps>;
 declare const ModalContext: import("react").Context<BaseModalContext>;
+declare const SIZE_TO_CLASSNAME_MAP: {
+    s: string;
+    m: string;
+    l: string;
+    xl: string;
+    fullscreen: string;
+    500: string;
+    600: string;
+    800: string;
+    1140: string;
+};
 /**
  * Набор констант для z-index соответствующих классов компонентов.
  * Значения выбраны по приоритету.
@@ -950,7 +962,7 @@ type YearsTableProps = {
     responsive?: boolean;
 };
 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, getDefaultWeight, YearsTableProps, YearsTable };
+export { ResponsiveCalendarProps, ResponsiveCalendarProps as CalendarProps, CalendarResponsive, CalendarResponsive as Calendar, ModalMobile, ModalMobileProps, UseCalendarProps, useCalendar, Modal, ResponsiveContext, Content, ModalContext, SIZE_TO_CLASSNAME_MAP, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, getModalStore, GlobalStore, Typography, typographyPresets, TitleResponsive, getDefaultWeight, YearsTableProps, YearsTable };
 export * from "./Component-5684a67d";
 export type { SavedStyle, TitleProps, TextProps, Color };
 export * from "./use-skeleton-1328ead9";

package/universal-date-input/{index-c241b310.d.ts → index-61e2321e.d.ts}

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 export { Button } from "./Component.responsive-71043c62";
-export type { ButtonProps } from "./typings-c241b310";
+export type { ButtonProps } from "./typings-61e2321e";

package/universal-date-input/index-71043c62.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import React from "react";
-import { CommonButtonProps } from "./typings-c241b310";
+import { CommonButtonProps } from "./typings-61e2321e";
 declare const ButtonMobile: React.ForwardRefExoticComponent<CommonButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export { ButtonMobile };
-export type { CommonButtonProps as ButtonMobileProps } from "./typings-c241b310";
+export type { CommonButtonProps as ButtonMobileProps } from "./typings-61e2321e";

package/universal-date-input/index.css

@@ -1,5 +1,5 @@
 /* hash: 1cc2v */
-:root {
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-300: #e7e8eb;
     --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);

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/modern/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/modern/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/modern/Component.responsive.js

@@ -25,8 +25,9 @@ import './components/date-input/Component.js';
 import '../../input/modern';
 import '../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import './index.module-8770f09a.js';
+import './index.module-6ac35d87.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/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-8770f09a.js';
+import { s as styles } from '../../index.module-6ac35d87.js';
 import '../../mask/plugins.js';
 import '../../mask/utils.js';
 import 'date-fns/clamp';
@@ -26,6 +26,7 @@ import '../../../../shared/modern';
 import '../../../../input/modern';
 import '../../../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 
 const BaseUniversalDateInput = forwardRef(({ autoCorrection = true, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, view, picker, onCalendarClose, onCalendarOpen, platform, onKeyDown, disabled, readOnly, fieldClassName, disableUserInput, ...restProps }, ref) => {

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

@@ -24,7 +24,8 @@ import '../date-input/Component.js';
 import '../../../../input/modern';
 import '../../../../popover/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '../../index.module-8770f09a.js';
+import '../../index.module-6ac35d87.js';
 import '../date-range-input/Component.js';
+import 'date-fns/isAfter';
 import 'date-fns/startOfMonth';
 import '../time-input/Component.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-8770f09a.js';
+import { isValidDate, isCompleteTime, formatDate, isCompleteDate, preventDefault, parseDateString } from '../../utils/index.js';
+import { s as styles } from '../../index.module-6ac35d87.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';
@@ -12,4 +13,4 @@ import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '../../index.module-8770f09a.js';
+import '../../index.module-6ac35d87.js';

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

@@ -1,29 +1,37 @@
 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/modern';
 import { Popover } from '../../../../popover/modern';
 import { getDataTestId } from '../../../../shared/modern';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { DATE_RANGE_SEPARATOR, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../../consts.js';
-import { getValidRange, formatDate, preventDefault, isCompleteDate, isCompleteDateRange, updateRange, parseDateString } from '../../utils/index.js';
-import { s as styles } from '../../index.module-8770f09a.js';
+import { getValidRange, formatDate, formatDateRange, isCompleteDateRange, preventDefault, isCompleteDate, parseDateString, updateRange } from '../../utils/index.js';
+import { s as styles } from '../../index.module-6ac35d87.js';
 import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassName, open, onCalendarClose, value: valueProp, defaultValue, inputWrapperRef: inputWrapperRefProp = null, onComplete, onChange, onBlur, Calendar, wrapperHandlers, calendarRef, calendarProps = {}, minDate = DEFAULT_MAX_DATE, maxDate = DEFAULT_MIN_DATE, block, dataTestId, error, popoverProps, rightAddons, picker, platform, onPickerClick, rangeBehavior = 'clarification', ...restProps }, ref) => {
-    const [value, setValue] = useState(defaultValue);
+function getDefaultValue(defaultValue) {
+    if (defaultValue && isValid(defaultValue.dateFrom) && isValid(defaultValue.dateTo)) {
+        return formatDateRange(defaultValue);
+    }
+    return '';
+}
+const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassName, open, onCalendarClose, value: valueProp, defaultValue, inputWrapperRef: inputWrapperRefProp = null, onInputChange, onChange, onBlur, Calendar, wrapperHandlers, calendarRef, calendarProps = {}, minDate = DEFAULT_MAX_DATE, maxDate = DEFAULT_MIN_DATE, block, dataTestId, error, popoverProps, rightAddons, picker, platform, onPickerClick, rangeBehavior = 'clarification', clear, onClear, ...restProps }, ref) => {
+    const [inputValue, setInputValue] = useState(() => getDefaultValue(defaultValue));
     const [calendarMonth, setCalendarMonth] = useState(calendarProps.defaultMonth);
     const lastValidRange = useRef('');
     const inputRef = useRef(null);
     const inputWrapperRef = useRef(null);
-    const uncontrolled = valueProp === undefined;
-    const inputValue = valueProp ?? value ?? '';
     const { offDays } = calendarProps;
     const [from = '', to = ''] = inputValue.split(DATE_RANGE_SEPARATOR);
+    const dateFromProp = valueProp?.dateFrom;
+    const dateToProp = valueProp?.dateTo;
     const { validFrom, validTo } = useMemo(() => getValidRange({ from, to, offDays, minDate, maxDate }), [from, to, offDays, maxDate, minDate]);
     useEffect(() => {
         if (autoCorrection && (!lastValidRange.current || !inputValue)) {
@@ -37,40 +45,58 @@ const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassNam
             setCalendarMonth(startOfMonth(validTo || validFrom || Date.now()).getTime());
         }
     }, [validFrom, validTo, open, picker]);
+    useEffect(() => {
+        if (dateFromProp !== undefined && dateToProp !== undefined) {
+            setInputValue(dateFromProp && dateToProp && isValid(dateFromProp) && isValid(dateToProp)
+                ? formatDateRange({ dateFrom: dateFromProp, dateTo: dateToProp })
+                : '');
+        }
+    }, [dateFromProp, dateToProp]);
     const getInnerError = () => {
         if (autoCorrection) {
-            return (isCompleteDate(from) && !validFrom) || (isCompleteDate(to) && !validTo)
+            const isCompleteFrom = isCompleteDate(from);
+            const isCompleteTo = isCompleteDate(to);
+            const isComplete = isCompleteFrom && isCompleteTo;
+            return (isCompleteFrom && !validFrom) ||
+                (isCompleteTo && !validTo) ||
+                (isComplete && isAfter(parseDateString(from), parseDateString(to)))
                 ? 'Эта дата недоступна'
                 : false;
         }
         return false;
     };
-    const callOnComplete = (val) => {
-        const [dateFrom, dateTo] = val.split(DATE_RANGE_SEPARATOR);
-        onComplete?.(val, parseDateString(dateFrom), parseDateString(dateTo));
+    const callOnChange = (val) => {
+        const [dateFrom = '', dateTo = ''] = val.split(DATE_RANGE_SEPARATOR);
+        onChange?.({
+            dateFrom: dateFrom ? parseDateString(dateFrom) : null,
+            dateTo: dateFrom ? parseDateString(dateTo) : null,
+        }, val);
         lastValidRange.current = val;
     };
-    const changeValue = (val, event) => {
-        onChange?.(event, { value: val });
-        if (uncontrolled)
-            setValue(val);
-        if (isCompleteDateRange(val))
-            callOnComplete(val);
+    const changeInputValue = (val, event) => {
+        onInputChange?.(event, { value: val });
+        setInputValue(val);
+        if (val === '' || isCompleteDateRange(val))
+            callOnChange(val);
     };
     const handleMonthChange = (date) => {
         setCalendarMonth(date);
         calendarProps?.onMonthChange?.(date);
     };
-    const handleChange = (event) => {
-        changeValue(event.target.value, event);
+    const handleInputChange = (event) => {
+        changeInputValue(event.target.value, event);
     };
     const handleCalendarChange = (date) => {
         const newValue = updateRange({ date, validFrom, validTo, rangeBehavior });
-        changeValue(newValue, null);
+        changeInputValue(newValue, null);
         requestAnimationFrame(() => {
             inputRef.current?.setSelectionRange(newValue.length, newValue.length);
         });
     };
+    const handleClear = (event) => {
+        changeInputValue('', null);
+        onClear?.(event);
+    };
     const handleBlur = (event) => {
         onBlur?.(event);
         if (autoCorrection) {
@@ -79,7 +105,7 @@ const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassNam
                 const [prevFrom, prevTo] = lastValidRange.current.split(DATE_RANGE_SEPARATOR);
                 const newFrom = validFrom ? formatDate(validFrom) : prevFrom;
                 const newTo = validTo ? formatDate(validTo) : prevTo;
-                changeValue(`${newFrom}${DATE_RANGE_SEPARATOR}${newTo}`, null);
+                changeInputValue(`${newFrom}${DATE_RANGE_SEPARATOR}${newTo}`, null);
             }
         }
     };
@@ -95,7 +121,7 @@ const DateRangeInput = forwardRef(({ autoCorrection, breakpoint, wrapperClassNam
     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, 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, { ...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, { 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-range-input/index.js

@@ -2,6 +2,8 @@ export { DateRangeInput } from './Component.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns/isAfter';
+import 'date-fns/isValid';
 import 'date-fns/startOfMonth';
 import '../../../../input/modern';
 import '../../../../popover/modern';
@@ -13,4 +15,4 @@ import 'date-fns/differenceInDays';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '../../index.module-8770f09a.js';
+import '../../index.module-6ac35d87.js';