@alfalab/core-components-calendar-input 8.2.8 → 8.2.9

package/esm/components/calendar-input/Component.d.ts

@@ -0,0 +1,216 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType, MouseEvent } from "react";
+import { CalendarMobileProps, CalendarProps } from "@alfalab/core-components-calendar";
+import { DateInputProps } from "@alfalab/core-components-date-input";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Значение инпута (используется и для календаря)
+     */
+    value?: string;
+    /**
+     * Начальное значение инпута
+     */
+    defaultValue?: string;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Определяет, как рендерить календарь — в поповере или снизу инпута
+     */
+    calendarPosition?: 'static' | 'popover';
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: 'native' | 'popover' | 'input';
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void;
+    /**
+     * Обработчик ввода в инпут
+     */
+    onInputChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+        date: Date;
+    }) => void;
+    /**
+     * Обработчик изменения календаря
+     */
+    onCalendarChange?: CalendarProps['onChange'];
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+};
+declare const CalendarInput: React.ForwardRefExoticComponent<Omit<DateInputProps, "onChange" | "mobileMode"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | 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;
+    /**
+     * Значение инпута (используется и для календаря)
+     */
+    value?: string | undefined;
+    /**
+     * Начальное значение инпута
+     */
+    defaultValue?: string | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Определяет, как рендерить календарь — в поповере или снизу инпута
+     */
+    calendarPosition?: "static" | "popover" | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Управление нативным режимом на мобильных устройствах
+     */
+    mobileMode?: "input" | "native" | "popover" | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ElementType<any> | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement> | null, payload: {
+        date: Date;
+        value: string;
+    }) => void) | undefined;
+    /**
+     * Обработчик ввода в инпут
+     */
+    onInputChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+        date: Date;
+    }) => void) | undefined;
+    /**
+     * Обработчик изменения календаря
+     */
+    onCalendarChange?: CalendarProps['onChange'];
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: "desktop" | "mobile" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { CalendarInputProps, CalendarInput };

package/esm/components/calendar-input/Component.js

@@ -1,12 +1,135 @@
-export { C as CalendarInput } from '../../Component-6e641637.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/core-components-calendar/esm';
-import '@alfalab/core-components-date-input/esm';
-import '@alfalab/core-components-popover/esm';
-import '@alfalab/icons-glyph/CalendarMIcon';
-import '../../utils.js';
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
+import mergeRefs from 'react-merge-refs';
+import cn from 'classnames';
+import { dateInLimits, Calendar } from '@alfalab/core-components-calendar/esm';
+import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '@alfalab/core-components-date-input/esm';
+import { Popover } from '@alfalab/core-components-popover/esm';
+import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { SUPPORTS_INPUT_TYPE_DATE } from '../../utils.js';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
+
+var styles = {"component":"calendar-input__component_1wl7e","block":"calendar-input__block_1wl7e","calendarContainer":"calendar-input__calendarContainer_1wl7e","calendarResponsive":"calendar-input__calendarResponsive_1wl7e","calendarIcon":"calendar-input__calendarIcon_1wl7e","nativeInput":"calendar-input__nativeInput_1wl7e"};
+require('./index.css')
+
+var CalendarInput = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var _d;
+    var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className; _a.inputClassName; var popoverClassName = _a.popoverClassName, _f = _a.defaultOpen, defaultOpen = _f === void 0 ? false : _f, defaultMonth = _a.defaultMonth, _g = _a.defaultValue, defaultValue = _g === void 0 ? '' : _g, _h = _a.calendarPosition, calendarPosition = _h === void 0 ? 'popover' : _h, value = _a.value, dataTestId = _a.dataTestId, _j = _a.calendarProps, calendarProps = _j === void 0 ? {} : _j, _k = _a.minDate, minDate = _k === void 0 ? calendarProps.minDate : _k, _l = _a.maxDate, maxDate = _l === void 0 ? calendarProps.maxDate : _l, _m = _a.offDays, offDays = _m === void 0 ? calendarProps.offDays || [] : _m, _o = _a.events, events = _o === void 0 ? calendarProps.events || [] : _o, preventFlip = _a.preventFlip, _p = _a.mobileMode, mobileMode = _p === void 0 ? 'popover' : _p, _q = _a.wrapperRef, wrapperRef = _q === void 0 ? null : _q, disabled = _a.disabled, _r = _a.onChange, onChange = _r === void 0 ? function () { return null; } : _r, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _s = _a.Calendar, Calendar$1 = _s === void 0 ? Calendar : _s, _t = _a.popoverPosition, popoverPosition = _t === void 0 ? 'bottom-start' : _t, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, _u = _a.view, view = _u === void 0 ? 'desktop' : _u, restProps = __rest(_a, ["block", "className", "inputClassName", "popoverClassName", "defaultOpen", "defaultMonth", "defaultValue", "calendarPosition", "value", "dataTestId", "calendarProps", "minDate", "maxDate", "offDays", "events", "preventFlip", "mobileMode", "wrapperRef", "disabled", "onChange", "onInputChange", "onCalendarChange", "onKeyDown", "readOnly", "Calendar", "popoverPosition", "zIndexPopover", "useAnchorWidth", "rightAddons", "error", "view"]);
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
+    var shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
+    var shouldRenderOnlyInput = mobileMode === 'input';
+    var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
+    var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
+    var _v = useState(false), open = _v[0], setOpen = _v[1];
+    var _w = useState(value || defaultValue), inputValue = _w[0], setInputValue = _w[1];
+    var calendarValue = inputValue ? parseDateString(inputValue).getTime() : undefined;
+    var checkInputValueIsValid = useCallback(function (newInputValue) {
+        if (!newInputValue)
+            return false;
+        var dateValue = parseDateString(newInputValue).getTime();
+        return !!(dateValue &&
+            isCompleteDateInput(newInputValue) &&
+            dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    }, [maxDate, minDate, offDays]);
+    var inputDisabled = disabled || readOnly;
+    var inputWrapperRef = useRef(null);
+    var calendarRef = useRef(null);
+    var handleKeyDown = useCallback(function (event) {
+        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
+            setOpen(!open);
+        }
+        if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    }, [open]);
+    var handleClick = useCallback(function () {
+        if (!open)
+            setOpen(true);
+    }, [open]);
+    var handleFocus = useCallback(function (event) {
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    }, [open, view]);
+    var handleBlur = useCallback(function (event) {
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
+        }
+    }, [view]);
+    var handleInputKeyDown = useCallback(function (event) {
+        if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
+            event.preventDefault();
+            calendarRef.current.focus();
+        }
+        if (onKeyDown)
+            onKeyDown(event);
+    }, [onKeyDown]);
+    var changeHandler = useCallback(function (event, newValue, newDate, initiator, shouldChange) {
+        if (initiator === void 0) { initiator = 'input'; }
+        if (shouldChange === void 0) { shouldChange = true; }
+        if (initiator === 'input' && event && onInputChange) {
+            onInputChange(event, { value: newValue, date: newDate });
+        }
+        if (initiator === 'calendar' && onCalendarChange) {
+            onCalendarChange(newDate.getTime());
+        }
+        setInputValue(newValue);
+        if (shouldChange) {
+            onChange(event, { date: newDate, value: newValue });
+        }
+    }, [onCalendarChange, onChange, onInputChange]);
+    var handleInputChange = useCallback(function (event, payload) {
+        changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
+    }, [changeHandler, checkInputValueIsValid]);
+    var handleCalendarChange = useCallback(function (date) {
+        if (date) {
+            changeHandler(null, formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            setOpen(false);
+        }
+    }, [changeHandler, view]);
+    var handleCalendarWrapperMouseDown = useCallback(function (event) {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    }, []);
+    var handleCalendarClose = useCallback(function () {
+        setOpen(false);
+    }, []);
+    useEffect(function () {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    useEffect(function () {
+        if (typeof value !== 'undefined') {
+            setInputValue(value);
+        }
+    }, [value]);
+    var renderCalendar = function () { 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: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", { className: cn(styles.component, className, (_b = {},
+            _b[styles.block] = block,
+            _b)), tabIndex: -1, onKeyDown: inputDisabled ? undefined : handleKeyDown, onClick: inputDisabled ? undefined : handleClick, onFocus: inputDisabled ? undefined : handleFocus, onBlur: handleBlur, "data-test-id": dataTestId },
+        React.createElement(DateInput, __assign({}, restProps, { ref: ref, wrapperRef: mergeRefs([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React.createElement(React.Fragment, null,
+                rightAddons,
+                shouldRenderPopover && (React.createElement(CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
+        shouldRenderStatic && renderCalendar(),
+        shouldRenderPopover && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, (_c = {},
+                _c[styles.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 4], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+export { CalendarInput };

package/esm/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: 9cpr5 */
+/* hash: 1csm0 */
 :root {
 } /* deprecated */ :root {
     --color-light-graphic-primary: #0b1f35;
@@ -43,31 +43,31 @@
 } :root {
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: var(--border-radius-m);
-} .calendar-input__component_1dwtp {
+} .calendar-input__component_1wl7e {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_1dwtp {
+} .calendar-input__block_1wl7e {
     width: 100%;
-} .calendar-input__calendarContainer_1dwtp {
+} .calendar-input__calendarContainer_1wl7e {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
-} @media (max-width: 374px) { .calendar-input__calendarContainer_1dwtp {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_1wl7e {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_1dwtp {
+    } .calendar-input__calendarResponsive_1wl7e {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .calendar-input__calendarIcon_1dwtp {
+} .calendar-input__calendarIcon_1wl7e {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_1dwtp:not(:only-child) {
+} .calendar-input__calendarIcon_1wl7e:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_1dwtp {
+    } .calendar-input__nativeInput_1wl7e {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -77,8 +77,8 @@
     -webkit-appearance: none;
             appearance: none;
     z-index: 1
-} .calendar-input__nativeInput_1dwtp::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_1wl7e::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_1dwtp::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_1wl7e::-webkit-inner-spin-button {
         display: none;
     }

package/esm/components/calendar-input/index.d.ts

@@ -1 +1 @@
-export * from "../../Component-6e641637";
+export * from "./Component";

package/esm/components/calendar-input/index.js

@@ -1,4 +1,5 @@
-export { C as CalendarInput } from '../../Component-6e641637.js';
+export { CalendarInput } from './Component.js';
+import 'tslib';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/esm/desktop.js

@@ -1,6 +1,7 @@
 export { CalendarInputDesktop } from './Component.desktop.js';
-import './Component-6e641637.js';
+import 'tslib';
 import 'react';
+import './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-calendar/esm';

package/esm/index.js

@@ -1,15 +1,16 @@
 export { CalendarInputResponsive as CalendarInput } from './Component.responsive.js';
 export { DATE_FORMAT, DATE_MASK, IS_BROWSER, NATIVE_DATE_FORMAT, SUPPORTS_INPUT_TYPE_DATE, formatDate, isInputDateSupported, isValidInputValue, parseDateString } from './utils.js';
-import './Component-6e641637.js';
+import 'tslib';
 import 'react';
+import '@alfalab/hooks';
+import './Component.desktop.js';
+import './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-calendar/esm';
 import '@alfalab/core-components-date-input/esm';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import '@alfalab/hooks';
-import './Component.desktop.js';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';

package/esm/mobile.js

@@ -1,9 +1,10 @@
 export { CalendarInputMobile } from './Component.mobile.js';
-import './Component-6e641637.js';
+import 'tslib';
 import 'react';
+import '@alfalab/core-components-calendar/esm';
+import './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
-import '@alfalab/core-components-calendar/esm';
 import '@alfalab/core-components-date-input/esm';
 import '@alfalab/core-components-popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';

package/esm/responsive.js

@@ -1,6 +1,9 @@
 export { CalendarInputResponsive } from './Component.responsive.js';
-import './Component-6e641637.js';
+import 'tslib';
 import 'react';
+import '@alfalab/hooks';
+import './Component.desktop.js';
+import './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
 import '@alfalab/core-components-calendar/esm';
@@ -11,6 +14,4 @@ import './utils.js';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
-import '@alfalab/hooks';
-import './Component.desktop.js';
 import './Component.mobile.js';

package/index.js

@@ -2,16 +2,17 @@
 
 var Component_responsive = require('./Component.responsive.js');
 var utils = require('./utils.js');
-require('./Component-60ae032f.js');
+require('tslib');
 require('react');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar');
 require('@alfalab/core-components-date-input');
 require('@alfalab/core-components-popover');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('@alfalab/hooks');
-require('./Component.desktop.js');
 require('date-fns/format');
 require('date-fns/isSameDay');
 require('date-fns/parse');

package/mobile.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var Component_mobile = require('./Component.mobile.js');
-require('./Component-60ae032f.js');
+require('tslib');
 require('react');
+require('@alfalab/core-components-calendar');
+require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
-require('@alfalab/core-components-calendar');
 require('@alfalab/core-components-date-input');
 require('@alfalab/core-components-popover');
 require('@alfalab/icons-glyph/CalendarMIcon');

package/modern/Component.desktop.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
 import { CalendarInputProps } from "./components/calendar-input/Component";
 type CalendarInputDesktopProps = Omit<CalendarInputProps, 'view'>;
-declare const CalendarInputDesktop: FC<CalendarInputDesktopProps>;
+declare const CalendarInputDesktop: React.ForwardRefExoticComponent<CalendarInputDesktopProps & React.RefAttributes<HTMLInputElement>>;
 export { CalendarInputDesktopProps, CalendarInputDesktop };

package/modern/Component.desktop.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { CalendarInput } from './components/calendar-input/Component.js';
 import 'react-merge-refs';
 import 'classnames';
@@ -11,6 +11,6 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-const CalendarInputDesktop = (props) => (React.createElement(CalendarInput, { ...props }));
+const CalendarInputDesktop = forwardRef((props, ref) => React.createElement(CalendarInput, { ...props, ref: ref }));
 
 export { CalendarInputDesktop };

package/modern/Component.mobile.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
 import { CalendarInputProps } from "./components/calendar-input/Component";
 type CalendarInputMobileProps = Omit<CalendarInputProps, 'view'>;
-declare const CalendarInputMobile: FC<CalendarInputMobileProps>;
+declare const CalendarInputMobile: React.ForwardRefExoticComponent<CalendarInputMobileProps & React.RefAttributes<HTMLInputElement>>;
 export { CalendarInputMobileProps, CalendarInputMobile };

package/modern/Component.mobile.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { CalendarMobile } from '@alfalab/core-components-calendar/modern';
 import { CalendarInput } from './components/calendar-input/Component.js';
 import 'react-merge-refs';
@@ -11,6 +11,6 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-const CalendarInputMobile = (props) => (React.createElement(CalendarInput, { Calendar: CalendarMobile, view: 'mobile', ...props }));
+const CalendarInputMobile = forwardRef((props, ref) => React.createElement(CalendarInput, { Calendar: CalendarMobile, view: 'mobile', ...props, ref: ref }));
 
 export { CalendarInputMobile };

package/modern/Component.responsive.d.ts

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+/// <reference types="react" />
+import React from 'react';
 import { CalendarInputProps } from "./components/calendar-input/Component";
 type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
     /**
@@ -8,5 +9,11 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
     breakpoint?: number;
 };
 type CalendarInputMedia = 'desktop' | 'mobile';
-declare const CalendarInputResponsive: FC<CalendarInputResponsiveProps>;
+declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<CalendarInputProps, "view"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
 export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };

package/modern/Component.responsive.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useMedia } from '@alfalab/hooks';
 import { CalendarInputDesktop } from './Component.desktop.js';
 import { CalendarInputMobile } from './Component.mobile.js';
@@ -14,12 +14,12 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-const CalendarInputResponsive = ({ breakpoint = 1024, ...restProps }) => {
+const CalendarInputResponsive = 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(CalendarInputDesktop, { ...restProps })) : (React.createElement(CalendarInputMobile, { ...restProps }));
-};
+    return view === 'desktop' ? (React.createElement(CalendarInputDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarInputMobile, { ...restProps, ref: ref }));
+});
 
 export { CalendarInputResponsive };

package/modern/components/calendar-input/Component.js

@@ -10,7 +10,7 @@ import 'date-fns/format';
 import 'date-fns/isSameDay';
 import 'date-fns/parse';
 
-const styles = {"component":"calendar-input__component_1dwtp","block":"calendar-input__block_1dwtp","calendarContainer":"calendar-input__calendarContainer_1dwtp","calendarResponsive":"calendar-input__calendarResponsive_1dwtp","calendarIcon":"calendar-input__calendarIcon_1dwtp","nativeInput":"calendar-input__nativeInput_1dwtp"};
+const styles = {"component":"calendar-input__component_1wl7e","block":"calendar-input__block_1wl7e","calendarContainer":"calendar-input__calendarContainer_1wl7e","calendarResponsive":"calendar-input__calendarResponsive_1wl7e","calendarIcon":"calendar-input__calendarIcon_1wl7e","nativeInput":"calendar-input__nativeInput_1wl7e"};
 require('./index.css')
 
 const CalendarInput = forwardRef(({ block = false, className, inputClassName, popoverClassName, defaultOpen = false, defaultMonth, defaultValue = '', calendarPosition = 'popover', value, dataTestId, calendarProps = {}, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], preventFlip, mobileMode = 'popover', wrapperRef = null, disabled, onChange = () => null, onInputChange, onCalendarChange, onKeyDown, readOnly, Calendar: Calendar$1 = Calendar, popoverPosition = 'bottom-start', zIndexPopover, useAnchorWidth, rightAddons, error, view = 'desktop', ...restProps }, ref) => {