@alfalab/core-components-date-range-input 2.2.7 → 2.2.9

package/modern/components/date-range-input/Component.d.ts

@@ -4,7 +4,20 @@ import { ChangeEvent, ElementType } from "react";
 import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
 import { InputProps } from "@alfalab/core-components-input";
 import { PopoverProps } from "@alfalab/core-components-popover";
-type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
+type ConditionalProps = {
+    /**
+     * Обработчик изменения значения
+     */
+    picker: true;
+    /**
+     * Обработчик закрытия календаря
+     */
+    onClose?: () => void;
+} | {
+    picker?: false;
+    onClose?: never;
+};
+type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
     /**
      * Дополнительный класс
      */
@@ -17,10 +30,6 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
      * Дополнительный класс для поповера
      */
     popoverClassName?: string;
-    /**
-     * Обработчик изменения значения
-     */
-    picker?: boolean;
     /**
      * Обработчик изменения значения
      */
@@ -95,102 +104,5 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
      */
     view?: 'desktop' | 'mobile';
 };
-declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
-    /**
-     * Дополнительный класс
-     */
-    className?: string | undefined;
-    /**
-     * Дополнительный класс для инпута
-     */
-    inputClassName?: string | undefined;
-    /**
-     * Дополнительный класс для поповера
-     */
-    popoverClassName?: string | undefined;
-    /**
-     * Обработчик изменения значения
-     */
-    picker?: boolean | undefined;
-    /**
-     * Обработчик изменения значения
-     */
-    onChange?: ((payload: {
-        dateFrom?: Date;
-        dateTo?: Date;
-        value: string;
-    }, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /**
-     * Обработчик окончания ввода
-     */
-    onComplete?: ((payload: {
-        dateFrom: Date;
-        dateTo: Date;
-        value: string;
-    }, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /**
-     * Компонент календаря
-     */
-    Calendar?: React.ElementType<any> | undefined;
-    /**
-     * Доп. пропсы для календаря
-     */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
-        open: boolean;
-        title?: string | undefined;
-        onClose?: (() => void) | undefined;
-        yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined;
-        allowSelectionFromEmptyRange?: boolean | undefined;
-    } & Record<string, unknown>) | undefined;
-    /**
-     * Месяц в календаре по умолчанию (timestamp)
-     */
-    defaultMonth?: number | undefined;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number | undefined;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number | undefined;
-    /**
-     * Список событий
-     */
-    events?: (number | Date)[] | undefined;
-    /**
-     * Список выходных
-     */
-    offDays?: (number | Date)[] | undefined;
-    /**
-     * Состояние открытия по умолчанию
-     */
-    defaultOpen?: boolean | undefined;
-    /**
-     * Позиционирование поповера с календарем
-     */
-    popoverPosition?: PopoverProps['position'];
-    /**
-     * z-index Popover
-     */
-    zIndexPopover?: PopoverProps['zIndex'];
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
-    preventFlip?: boolean | undefined;
-    /**
-     * Календарь будет принимать ширину инпута
-     */
-    useAnchorWidth?: boolean | undefined;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean | undefined;
-    /**
-     * Отображение компонента в мобильном или десктопном виде
-     */
-    view?: "desktop" | "mobile" | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { DateRangeInputProps, DateRangeInput };
+declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
+export { ConditionalProps, DateRangeInputProps, DateRangeInput };

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
+import { startOfMonth } from 'date-fns';
 import dateFnsIsValid from 'date-fns/isValid';
 import { usePeriod, Calendar } from '@alfalab/core-components-calendar/modern';
 import { IconButton } from '@alfalab/core-components-icon-button/modern';
@@ -8,28 +9,64 @@ import { Input } from '@alfalab/core-components-input/modern';
 import { Popover } from '@alfalab/core-components-popover/modern';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
-import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from '../../utils/format.js';
+import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
 
-const styles = {"component":"date-range-input__component_1hljt","calendarContainer":"date-range-input__calendarContainer_1hljt","calendarResponsive":"date-range-input__calendarResponsive_1hljt","block":"date-range-input__block_1hljt"};
+const styles = {"component":"date-range-input__component_1iuwu","calendarContainer":"date-range-input__calendarContainer_1iuwu","calendarResponsive":"date-range-input__calendarResponsive_1iuwu","block":"date-range-input__block_1iuwu"};
 require('./index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
-const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
+const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, onClose, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
     const inputRef = useRef(null);
+    const iconRef = useRef(null);
     const calendarRef = useRef(null);
     const [value, setValue] = useState(propValue || defaultValue);
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(defaultOpen);
     const inputDisabled = disabled || readOnly;
     const calendarResponsive = calendarProps?.responsive ?? true;
+    const { selectedFrom, selectedTo, updatePeriod, resetPeriod, setStart, setEnd } = usePeriod({ onPeriodChange: handlePeriodChange });
+    useEffect(() => {
+        if (value) {
+            setCalendarPeriod(getDates(value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     useEffect(() => {
-        setOpen(defaultOpen);
-    }, [defaultOpen]);
+        setValue((prevValue) => {
+            if (selectedFrom && selectedTo) {
+                const from = parseTimestampToDate(selectedFrom);
+                const to = parseTimestampToDate(selectedTo);
+                return `${from} - ${to}`;
+            }
+            if (selectedFrom && prevValue.length < DATE_FORMAT.length) {
+                return parseTimestampToDate(selectedFrom);
+            }
+            return prevValue;
+        });
+    }, [selectedFrom, selectedTo]);
     useDidUpdateEffect(() => {
         const newPropValue = propValue || '';
-        setValue((prevValue) => (prevValue === newPropValue ? prevValue : newPropValue));
+        setValue((prevValue) => {
+            if (prevValue === newPropValue) {
+                return prevValue;
+            }
+            const dates = getDates(newPropValue);
+            setCalendarPeriod(dates);
+            return dates.formattedValue;
+        });
     }, [propValue]);
-    const handlePeriodChange = (selectedFrom, selectedTo) => {
+    function getDates(val) {
+        const formattedValue = format(val);
+        const dateArr = formattedValue.split('-').map((v) => v.trim());
+        const dateFrom = dateArr[0] ? parseDateString(dateArr[0]) : undefined;
+        const dateTo = dateArr[1] ? parseDateString(dateArr[1]) : undefined;
+        return { formattedValue, dateFrom, dateTo, dateArr };
+    }
+    function setCalendarPeriod({ dateFrom, dateTo }) {
+        setStart(dateFrom?.getTime());
+        setEnd(dateTo?.getTime());
+    }
+    function handlePeriodChange(selectedFrom, selectedTo) {
         if (selectedFrom && !selectedTo && value.length === DATE_MASK.length) {
             setValue(parseTimestampToDate(selectedFrom));
         }
@@ -54,8 +91,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
                 value: newValue,
             });
         }
-    };
-    const { selectedFrom, selectedTo, updatePeriod, resetPeriod, setStart, setEnd } = usePeriod({ onPeriodChange: handlePeriodChange });
+    }
     const handleInputWrapperFocus = (event) => {
         if (view === 'desktop') {
             if (picker) {
@@ -69,8 +105,13 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     const handleBlur = (event) => {
         if (view === 'desktop') {
             const target = (event.relatedTarget || document.activeElement);
-            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+            if (calendarRef.current?.contains(target) === false &&
+                inputRef.current?.contains(target) === false &&
+                iconRef.current?.contains(target) === false) {
                 setOpen(false);
+                if (onClose) {
+                    onClose();
+                }
             }
         }
     };
@@ -88,10 +129,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
             return;
         }
-        const formattedValue = format(newValue);
-        const dateArr = formattedValue.split(' - ');
-        const dateFrom = dateArr[0] ? parseDateString(dateArr[0]) : undefined;
-        const dateTo = dateArr[1] ? parseDateString(dateArr[1]) : undefined;
+        const { formattedValue, dateFrom, dateTo, dateArr } = getDates(newValue);
         if (!dateFrom && !dateTo) {
             resetPeriod();
         }
@@ -125,6 +163,9 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
         }
     };
     const handleCalendarClose = () => {
+        if (view === 'mobile' && onClose) {
+            onClose();
+        }
         setOpen(false);
     };
     const handleClear = () => {
@@ -136,14 +177,6 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
             updatePeriod(date);
         }
     };
-    useEffect(() => {
-        if (selectedFrom && selectedTo) {
-            setValue(`${parseTimestampToDate(selectedFrom)} - ${parseTimestampToDate(selectedTo)}`);
-        }
-        else if (selectedFrom && value.length < DATE_FORMAT.length) {
-            setValue(parseTimestampToDate(selectedFrom));
-        }
-    }, [selectedFrom, selectedTo, value]);
     const handleCalendarWrapperMouseDown = (event) => {
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
@@ -155,16 +188,20 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
             inputRef.current.focus();
         }
     };
-    const renderCalendar = () => (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
+    const renderCalendar = () => {
+        const activeMonth = (selectedTo && startOfMonth(selectedTo)) ||
+            (selectedFrom && startOfMonth(selectedFrom));
+        return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+            React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: activeMonth || defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
+    };
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
         }), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
         React.createElement(Input, { ...restProps, block: block, ref: mergeRefs([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React.createElement(React.Fragment, null,
                 rightAddons,
-                picker && (React.createElement(IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
+                picker && (React.createElement(IconButton, { ref: iconRef, onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon, size: 'xxs' }))) }),
         picker && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn(styles.calendarContainer, {
                 [styles.calendarResponsive]: calendarResponsive,
             }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));

package/modern/components/date-range-input/index.css

@@ -1,4 +1,4 @@
-/* hash: xeu3t */
+/* hash: 19sow */
 :root {
 } /* deprecated */ :root {
 } :root {
@@ -40,21 +40,21 @@
     /* marker */
 } :root {
     --calendar-popover-border-radius: var(--border-radius-m);
-} .date-range-input__component_1hljt {
+} .date-range-input__component_1iuwu {
     display: inline-block;
     outline: none;
     position: relative;
-} .date-range-input__calendarContainer_1hljt {
+} .date-range-input__calendarContainer_1iuwu {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
-} @media (max-width: 374px) { .date-range-input__calendarContainer_1hljt {
+} @media (max-width: 374px) { .date-range-input__calendarContainer_1iuwu {
         width: 100%;
         min-width: 288px
 }
-    } .date-range-input__calendarResponsive_1hljt {
+    } .date-range-input__calendarResponsive_1iuwu {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .date-range-input__block_1hljt {
+} .date-range-input__block_1iuwu {
     width: 100%;
 }

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

@@ -2,6 +2,7 @@ export { DateRangeInput } from './Component.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isValid';
 import '@alfalab/core-components-calendar/modern';
 import '@alfalab/core-components-icon-button/modern';

package/modern/desktop.js

@@ -3,6 +3,7 @@ import 'react';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isValid';
 import '@alfalab/core-components-calendar/modern';
 import '@alfalab/core-components-icon-button/modern';

package/modern/index.js

@@ -5,6 +5,7 @@ import './Component.desktop.js';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isValid';
 import '@alfalab/core-components-calendar/modern';
 import '@alfalab/core-components-icon-button/modern';

package/modern/mobile.js

@@ -4,6 +4,7 @@ import '@alfalab/core-components-calendar/modern';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isValid';
 import '@alfalab/core-components-icon-button/modern';
 import '@alfalab/core-components-input/modern';

package/modern/responsive.js

@@ -5,6 +5,7 @@ import './Component.desktop.js';
 import './components/date-range-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isValid';
 import '@alfalab/core-components-calendar/modern';
 import '@alfalab/core-components-icon-button/modern';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-date-range-input",
-    "version": "2.2.7",
+    "version": "2.2.9",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -15,11 +15,12 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.5",
-        "@alfalab/core-components-icon-button": "^6.0.5",
-        "@alfalab/core-components-calendar": "^6.2.7",
-        "@alfalab/core-components-popover": "^6.0.6",
+        "@alfalab/core-components-input": "^11.1.7",
+        "@alfalab/core-components-icon-button": "^6.0.7",
+        "@alfalab/core-components-calendar": "^6.2.9",
+        "@alfalab/core-components-popover": "^6.0.7",
         "@alfalab/hooks": "^1.13.0",
-        "classnames": "^2.3.1"
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
     }
 }

package/responsive.js

@@ -1,20 +1,22 @@
 'use strict';
 
 var Component_responsive = require('./Component.responsive.js');
-require('./Component-156f85af.js');
+require('tslib');
 require('react');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('./components/date-range-input/Component.js');
 require('react-merge-refs');
 require('classnames');
+require('date-fns');
 require('date-fns/isValid');
 require('@alfalab/core-components-calendar');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/core-components-input');
 require('@alfalab/core-components-popover');
-require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('./utils/format.js');
 require('date-fns/parse');
-require('./Component.desktop.js');
 require('./Component.mobile.js');
 
 

package/Component-156f85af.d.ts

@@ -1,229 +0,0 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, ElementType } from "react";
-import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
-import { InputProps } from "@alfalab/core-components-input";
-import { PopoverProps } from "@alfalab/core-components-popover";
-declare function __extends(d: any, b: any): void;
-declare function __rest(s: any, e: any): {};
-declare function __decorate(decorators: any, target: any, key: any, desc: any, ...args: any[]): any;
-declare function __param(paramIndex: any, decorator: any): (target: any, key: any) => void;
-declare function __metadata(metadataKey: any, metadataValue: any): any;
-declare function __awaiter(thisArg: any, _arguments: any, P: any, generator: any): any;
-declare function __generator(thisArg: any, body: any): {
-    next: (v: any) => any;
-    throw: (v: any) => any;
-    return: (v: any) => any;
-};
-declare function __exportStar(m: any, o: any): void;
-declare function __values(o: any): any;
-declare function __read(o: any, n: any): any;
-declare function __spread(...args: any[]): any[];
-declare function __spreadArrays(...args: any[]): any[];
-declare function __spreadArray(to: any, from: any, pack: any, ...args: any[]): any;
-declare function __await(v: any): __await;
-declare class __await {
-    constructor(v: any);
-    v: any;
-}
-declare function __asyncGenerator(thisArg: any, _arguments: any, generator: any): {};
-declare function __asyncDelegator(o: any): {};
-declare function __asyncValues(o: any): any;
-declare function __makeTemplateObject(cooked: any, raw: any): any;
-declare function __importStar(mod: any): any;
-declare function __importDefault(mod: any): any;
-declare function __classPrivateFieldGet(receiver: any, state: any, kind: any, f: any): any;
-declare function __classPrivateFieldSet(receiver: any, state: any, value: any, kind: any, f: any): any;
-declare function __classPrivateFieldIn(state: any, receiver: any): any;
-declare function __assign(...args: any[]): any;
-declare function __createBinding(o: any, m: any, k: any, k2: any): void;
-type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для инпута
-     */
-    inputClassName?: string;
-    /**
-     * Дополнительный класс для поповера
-     */
-    popoverClassName?: string;
-    /**
-     * Обработчик изменения значения
-     */
-    picker?: boolean;
-    /**
-     * Обработчик изменения значения
-     */
-    onChange?: (payload: {
-        dateFrom?: Date;
-        dateTo?: Date;
-        value: string;
-    }, event?: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Обработчик окончания ввода
-     */
-    onComplete?: (payload: {
-        dateFrom: Date;
-        dateTo: Date;
-        value: string;
-    }, event?: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Компонент календаря
-     */
-    Calendar?: ElementType;
-    /**
-     * Доп. пропсы для календаря
-     */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
-    /**
-     * Месяц в календаре по умолчанию (timestamp)
-     */
-    defaultMonth?: number;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number;
-    /**
-     * Список событий
-     */
-    events?: Array<Date | number>;
-    /**
-     * Список выходных
-     */
-    offDays?: Array<Date | number>;
-    /**
-     * Состояние открытия по умолчанию
-     */
-    defaultOpen?: boolean;
-    /**
-     * Позиционирование поповера с календарем
-     */
-    popoverPosition?: PopoverProps['position'];
-    /**
-     * z-index Popover
-     */
-    zIndexPopover?: PopoverProps['zIndex'];
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
-    preventFlip?: boolean;
-    /**
-     * Календарь будет принимать ширину инпута
-     */
-    useAnchorWidth?: boolean;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Отображение компонента в мобильном или десктопном виде
-     */
-    view?: 'desktop' | 'mobile';
-};
-declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
-    /**
-     * Дополнительный класс
-     */
-    className?: string | undefined;
-    /**
-     * Дополнительный класс для инпута
-     */
-    inputClassName?: string | undefined;
-    /**
-     * Дополнительный класс для поповера
-     */
-    popoverClassName?: string | undefined;
-    /**
-     * Обработчик изменения значения
-     */
-    picker?: boolean | undefined;
-    /**
-     * Обработчик изменения значения
-     */
-    onChange?: ((payload: {
-        dateFrom?: Date;
-        dateTo?: Date;
-        value: string;
-    }, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /**
-     * Обработчик окончания ввода
-     */
-    onComplete?: ((payload: {
-        dateFrom: Date;
-        dateTo: Date;
-        value: string;
-    }, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /**
-     * Компонент календаря
-     */
-    Calendar?: React.ElementType<any> | undefined;
-    /**
-     * Доп. пропсы для календаря
-     */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
-        open: boolean;
-        title?: string | undefined;
-        onClose?: (() => void) | undefined;
-        yearsAmount?: number | undefined;
-        hasHeader?: boolean | undefined;
-        allowSelectionFromEmptyRange?: boolean | undefined;
-    } & Record<string, unknown>) | undefined;
-    /**
-     * Месяц в календаре по умолчанию (timestamp)
-     */
-    defaultMonth?: number | undefined;
-    /**
-     * Минимальная дата, доступная для выбора (timestamp)
-     */
-    minDate?: number | undefined;
-    /**
-     * Максимальная дата, доступная для выбора (timestamp)
-     */
-    maxDate?: number | undefined;
-    /**
-     * Список событий
-     */
-    events?: (number | Date)[] | undefined;
-    /**
-     * Список выходных
-     */
-    offDays?: (number | Date)[] | undefined;
-    /**
-     * Состояние открытия по умолчанию
-     */
-    defaultOpen?: boolean | undefined;
-    /**
-     * Позиционирование поповера с календарем
-     */
-    popoverPosition?: PopoverProps['position'];
-    /**
-     * z-index Popover
-     */
-    zIndexPopover?: PopoverProps['zIndex'];
-    /**
-     * Запрещает поповеру менять свою позицию.
-     * Например, если места снизу недостаточно,то он все равно будет показан снизу
-     */
-    preventFlip?: boolean | undefined;
-    /**
-     * Календарь будет принимать ширину инпута
-     */
-    useAnchorWidth?: boolean | undefined;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean | undefined;
-    /**
-     * Отображение компонента в мобильном или десктопном виде
-     */
-    view?: "desktop" | "mobile" | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export { __extends, __rest, __decorate, __param, __metadata, __awaiter, __generator, __exportStar, __values, __read, __spread, __spreadArrays, __spreadArray, __await, __asyncGenerator, __asyncDelegator, __asyncValues, __makeTemplateObject, __importStar, __importDefault, __classPrivateFieldGet, __classPrivateFieldSet, __classPrivateFieldIn, __assign, __createBinding, DateRangeInputProps, DateRangeInput };