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

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

@@ -0,0 +1,108 @@
+/// <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";
+type ConditionalProps = {
+    /**
+     * Обработчик изменения значения
+     */
+    picker: true;
+    /**
+     * Обработчик закрытия календаря
+     */
+    onClose?: () => void;
+} | {
+    picker?: false;
+    onClose?: never;
+};
+type DateRangeInputProps = Omit<InputProps, 'onChange'> & ConditionalProps & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    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<DateRangeInputProps & React.RefAttributes<HTMLInputElement>>;
+export { ConditionalProps, DateRangeInputProps, DateRangeInput };

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

@@ -1,13 +1,217 @@
-export { D as DateRangeInput } from '../../Component-2c3bcbd6.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import 'date-fns/isValid';
-import '@alfalab/core-components-calendar/esm';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/core-components-input/esm';
-import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/CalendarMIcon';
-import '../../utils/format.js';
+import { __rest, __assign } from 'tslib';
+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/esm';
+import { IconButton } from '@alfalab/core-components-icon-button/esm';
+import { Input } from '@alfalab/core-components-input/esm';
+import { Popover } from '@alfalab/core-components-popover/esm';
+import { useDidUpdateEffect } from '@alfalab/hooks';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { parseTimestampToDate, DATE_FORMAT, format, parseDateString, DATE_MASK, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
+
+var 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 */
+var DateRangeInput = React.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d;
+    var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, onClose = _a.onClose, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar$1 = _g === void 0 ? Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "onClose", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
+    var inputRef = useRef(null);
+    var iconRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _q = useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
+    var _r = useState(defaultOpen), open = _r[0], setOpen = _r[1];
+    var inputDisabled = disabled || readOnly;
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
+    var _s = usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
+    useEffect(function () {
+        if (value) {
+            setCalendarPeriod(getDates(value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(function () {
+        setValue(function (prevValue) {
+            if (selectedFrom && selectedTo) {
+                var from = parseTimestampToDate(selectedFrom);
+                var to = parseTimestampToDate(selectedTo);
+                return "".concat(from, " - ").concat(to);
+            }
+            if (selectedFrom && prevValue.length < DATE_FORMAT.length) {
+                return parseTimestampToDate(selectedFrom);
+            }
+            return prevValue;
+        });
+    }, [selectedFrom, selectedTo]);
+    useDidUpdateEffect(function () {
+        var newPropValue = propValue || '';
+        setValue(function (prevValue) {
+            if (prevValue === newPropValue) {
+                return prevValue;
+            }
+            var dates = getDates(newPropValue);
+            setCalendarPeriod(dates);
+            return dates.formattedValue;
+        });
+    }, [propValue]);
+    function getDates(val) {
+        var formattedValue = format(val);
+        var dateArr = formattedValue.split('-').map(function (v) { return v.trim(); });
+        var dateFrom = dateArr[0] ? parseDateString(dateArr[0]) : undefined;
+        var dateTo = dateArr[1] ? parseDateString(dateArr[1]) : undefined;
+        return { formattedValue: formattedValue, dateFrom: dateFrom, dateTo: dateTo, dateArr: dateArr };
+    }
+    function setCalendarPeriod(_a) {
+        var dateFrom = _a.dateFrom, dateTo = _a.dateTo;
+        setStart(dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+        setEnd(dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime());
+    }
+    function handlePeriodChange(selectedFrom, selectedTo) {
+        if (selectedFrom && !selectedTo && value.length === DATE_MASK.length) {
+            setValue(parseTimestampToDate(selectedFrom));
+        }
+        else if ((!selectedFrom && !selectedTo && value.length === DATE_FORMAT.length) ||
+            (selectedFrom === selectedTo && value.length === DATE_MASK.length)) {
+            setValue('');
+        }
+        var dateFrom = selectedFrom ? new Date(selectedFrom) : undefined;
+        var dateTo = selectedTo ? new Date(selectedTo) : undefined;
+        var newValue = [selectedFrom, selectedTo].filter(Boolean)
+            .map(function (timestamp) { return parseTimestampToDate(timestamp); })
+            .join(' - ');
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            dateFrom: dateFrom,
+            dateTo: dateTo,
+            value: newValue,
+        });
+        if (dateFrom && dateTo) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                dateFrom: dateFrom,
+                dateTo: dateTo,
+                value: newValue,
+            });
+        }
+    }
+    var handleInputWrapperFocus = function (event) {
+        if (view === 'desktop') {
+            if (picker) {
+                setOpen(true);
+            }
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    var handleBlur = function (event) {
+        var _a, _b, _c;
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (((_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)) === false &&
+                ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.contains(target)) === false &&
+                ((_c = iconRef.current) === null || _c === void 0 ? void 0 : _c.contains(target)) === false) {
+                setOpen(false);
+                if (onClose) {
+                    onClose();
+                }
+            }
+        }
+    };
+    var handleChange = function (event) {
+        var _a, _b;
+        var newValue = event.target.value;
+        if (newValue.length > DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, дефис и пробелы
+        if (/[^\d. -]/.test(newValue)) {
+            return;
+        }
+        var dots = newValue.match(/\./g);
+        var hyphen = newValue.match(/\-/g);
+        // Не даем вводить больше, чем 4 точки и 1 дефис
+        if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
+            return;
+        }
+        var _c = getDates(newValue), formattedValue = _c.formattedValue, dateFrom = _c.dateFrom, dateTo = _c.dateTo, dateArr = _c.dateArr;
+        if (!dateFrom && !dateTo) {
+            resetPeriod();
+        }
+        else if (selectedFrom && formattedValue.length < DATE_FORMAT.length) {
+            setStart();
+        }
+        else if (selectedFrom && selectedTo) {
+            setEnd();
+        }
+        else if (dateFrom &&
+            dateFnsIsValid(dateFrom) &&
+            ((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === DATE_FORMAT.length &&
+            dateFrom.getTime() !== selectedFrom) {
+            setStart(dateFrom.getTime());
+        }
+        else if (dateTo &&
+            dateFnsIsValid(dateTo) &&
+            ((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === DATE_FORMAT.length &&
+            dateTo.getTime() !== selectedTo) {
+            setEnd(dateTo.getTime());
+        }
+        setValue(formattedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
+        if (isCompleteDateInput(formattedValue)) {
+            var valid = isValid(formattedValue, dateArr[0], dateArr[1]);
+            if (!valid)
+                return;
+            if (dateFrom && dateTo) {
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
+            }
+        }
+    };
+    var handleCalendarClose = function () {
+        if (view === 'mobile' && onClose) {
+            onClose();
+        }
+        setOpen(false);
+    };
+    var handleClear = function () {
+        setValue('');
+        resetPeriod();
+    };
+    var handleCalendarChange = function (date) {
+        if (date) {
+            updatePeriod(date);
+        }
+    };
+    var handleCalendarWrapperMouseDown = function (event) {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    var handleIconButtonClick = function () {
+        if (!open)
+            setOpen(true);
+        if (view === 'desktop' && inputRef.current) {
+            inputRef.current.focus();
+        }
+    };
+    var renderCalendar = function () {
+        var 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, __assign({}, 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, (_b = {},
+            _b[styles.block] = block,
+            _b)), onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        React.createElement(Input, __assign({}, 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, { 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, (_c = {},
+                _c[styles.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+export { DateRangeInput };

package/esm/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/esm/components/date-range-input/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-2c3bcbd6";
+export * from "./Component";

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

@@ -1,7 +1,9 @@
-export { D as DateRangeInput } from '../../Component-2c3bcbd6.js';
+export { DateRangeInput } from './Component.js';
+import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isValid';
 import '@alfalab/core-components-calendar/esm';
 import '@alfalab/core-components-icon-button/esm';

package/esm/desktop.js

@@ -1,8 +1,10 @@
 export { DateRangeInputDesktop } from './Component.desktop.js';
-import './Component-2c3bcbd6.js';
+import 'tslib';
 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/esm';
 import '@alfalab/core-components-icon-button/esm';

package/esm/index.js

@@ -1,16 +1,18 @@
 export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';
-import './Component-2c3bcbd6.js';
+import 'tslib';
 import 'react';
+import '@alfalab/hooks';
+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/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-input/esm';
 import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import './utils/format.js';
 import 'date-fns/parse';
-import './Component.desktop.js';
 import './Component.mobile.js';

package/esm/mobile.js

@@ -1,10 +1,12 @@
 export { DateRangeInputMobile } from './Component.mobile.js';
-import './Component-2c3bcbd6.js';
+import 'tslib';
 import 'react';
+import '@alfalab/core-components-calendar/esm';
+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/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-input/esm';
 import '@alfalab/core-components-popover/esm';

package/esm/responsive.js

@@ -1,16 +1,18 @@
 export { DateRangeInputResponsive } from './Component.responsive.js';
-import './Component-2c3bcbd6.js';
+import 'tslib';
 import 'react';
+import '@alfalab/hooks';
+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/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-input/esm';
 import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import './utils/format.js';
 import 'date-fns/parse';
-import './Component.desktop.js';
 import './Component.mobile.js';

package/index.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/mobile.js

@@ -1,12 +1,14 @@
 'use strict';
 
 var Component_mobile = require('./Component.mobile.js');
-require('./Component-156f85af.js');
+require('tslib');
 require('react');
+require('@alfalab/core-components-calendar');
+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');

package/modern/Component.desktop.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { DateRangeInputProps } from "./components/date-range-input/Component";
-type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view'>;
-declare const DateRangeInputDesktop: FC<DateRangeInputDesktopProps>;
+/// <reference types="react" />
+import React from 'react';
+import { DateRangeInputProps, ConditionalProps } from "./components/date-range-input/Component";
+type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose'> & ConditionalProps;
+declare const DateRangeInputDesktop: React.ForwardRefExoticComponent<DateRangeInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
 export { DateRangeInputDesktopProps, DateRangeInputDesktop };

package/modern/Component.desktop.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { DateRangeInput } from './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';
@@ -12,6 +13,6 @@ import '@alfalab/icons-glyph/CalendarMIcon';
 import './utils/format.js';
 import 'date-fns/parse';
 
-const DateRangeInputDesktop = (props) => (React.createElement(DateRangeInput, { ...props }));
+const DateRangeInputDesktop = forwardRef((props, ref) => React.createElement(DateRangeInput, { ...props, ref: ref }));
 
 export { DateRangeInputDesktop };

package/modern/Component.mobile.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { DateRangeInputProps } from "./components/date-range-input/Component";
-type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view'>;
-declare const DateRangeInputMobile: FC<DateRangeInputMobileProps>;
+/// <reference types="react" />
+import React from 'react';
+import { DateRangeInputProps, ConditionalProps } from "./components/date-range-input/Component";
+type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose'> & ConditionalProps;
+declare const DateRangeInputMobile: React.ForwardRefExoticComponent<DateRangeInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { DateRangeInputMobileProps, DateRangeInputMobile };

package/modern/Component.mobile.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { CalendarMobile } from '@alfalab/core-components-calendar/modern';
 import { DateRangeInput } from './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';
@@ -12,6 +13,6 @@ import '@alfalab/icons-glyph/CalendarMIcon';
 import './utils/format.js';
 import 'date-fns/parse';
 
-const DateRangeInputMobile = (props) => (React.createElement(DateRangeInput, { Calendar: CalendarMobile, view: 'mobile', ...props }));
+const DateRangeInputMobile = forwardRef((props, ref) => React.createElement(DateRangeInput, { Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref }));
 
 export { DateRangeInputMobile };

package/modern/Component.responsive.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
-import { DateRangeInputProps } from "./components/date-range-input/Component";
-type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view'> & {
+/// <reference types="react" />
+import React from 'react';
+import { DateRangeInputProps, ConditionalProps } from "./components/date-range-input/Component";
+type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view' | 'picker' | 'onClose'> & ConditionalProps & {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
@@ -8,5 +9,5 @@ type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view'> & {
     breakpoint?: number;
 };
 type DateRangeInputMedia = 'desktop' | 'mobile';
-declare const DateRangeInputResponsive: FC<DateRangeInputResponsiveProps>;
+declare const DateRangeInputResponsive: React.ForwardRefExoticComponent<DateRangeInputResponsiveProps & React.RefAttributes<HTMLInputElement>>;
 export { DateRangeInputResponsiveProps, DateRangeInputMedia, DateRangeInputResponsive };

package/modern/Component.responsive.js

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import { DateRangeInputDesktop } from './Component.desktop.js';
 import { DateRangeInputMobile } from './Component.mobile.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';
@@ -14,12 +15,12 @@ import '@alfalab/icons-glyph/CalendarMIcon';
 import './utils/format.js';
 import 'date-fns/parse';
 
-const DateRangeInputResponsive = ({ breakpoint = 1024, ...restProps }) => {
+const DateRangeInputResponsive = forwardRef(({ breakpoint = 1024, ...restProps }, ref) => {
     const [view] = useMedia([
         ['mobile', `(max-width: ${breakpoint - 1}px)`],
         ['desktop', `(min-width: ${breakpoint}px)`],
     ], 'desktop');
-    return view === 'desktop' ? (React.createElement(DateRangeInputDesktop, { ...restProps })) : (React.createElement(DateRangeInputMobile, { ...restProps }));
-};
+    return view === 'desktop' ? (React.createElement(DateRangeInputDesktop, { ...restProps, ref: ref })) : (React.createElement(DateRangeInputMobile, { ...restProps, ref: ref }));
+});
 
 export { DateRangeInputResponsive };