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

package/Component.desktop.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "./Component-e779a21c";
+/// <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/Component.desktop.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var components_calendarInput_Component = require('./Component-e779a21c.js');
+var tslib = require('tslib');
 var React = require('react');
+var components_calendarInput_Component = require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar');
@@ -17,6 +18,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var CalendarInputDesktop = function (props) { return (React__default.default.createElement(components_calendarInput_Component.CalendarInput, components_calendarInput_Component.__assign({}, props))); };
+var CalendarInputDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_calendarInput_Component.CalendarInput, tslib.__assign({}, props, { ref: ref })); });
 
 exports.CalendarInputDesktop = CalendarInputDesktop;

package/Component.mobile.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "./Component-e779a21c";
+/// <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/Component.mobile.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var components_calendarInput_Component = require('./Component-e779a21c.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsCalendar = require('@alfalab/core-components-calendar');
+var components_calendarInput_Component = require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-date-input');
@@ -17,6 +18,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var CalendarInputMobile = function (props) { return (React__default.default.createElement(components_calendarInput_Component.CalendarInput, components_calendarInput_Component.__assign({ Calendar: coreComponentsCalendar.CalendarMobile, view: 'mobile' }, props))); };
+var CalendarInputMobile = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_calendarInput_Component.CalendarInput, tslib.__assign({ Calendar: coreComponentsCalendar.CalendarMobile, view: 'mobile' }, props, { ref: ref })); });
 
 exports.CalendarInputMobile = CalendarInputMobile;

package/Component.responsive.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "./Component-e779a21c";
+/// <reference types="react" />
+import React from 'react';
+import { CalendarInputProps } from "./components/calendar-input/Component";
 type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -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/Component.responsive.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var components_calendarInput_Component = require('./Component-e779a21c.js');
+var tslib = require('tslib');
 var React = require('react');
 var hooks = require('@alfalab/hooks');
 var Component_desktop = require('./Component.desktop.js');
 var Component_mobile = require('./Component.mobile.js');
+require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar');
@@ -20,13 +21,13 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var CalendarInputResponsive = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = components_calendarInput_Component.__rest(_a, ["breakpoint"]);
+var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
     var view = hooks.useMedia([
         ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
         ['desktop', "(min-width: ".concat(breakpoint, "px)")],
     ], 'desktop')[0];
-    return view === 'desktop' ? (React__default.default.createElement(Component_desktop.CalendarInputDesktop, components_calendarInput_Component.__assign({}, restProps))) : (React__default.default.createElement(Component_mobile.CalendarInputMobile, components_calendarInput_Component.__assign({}, restProps)));
-};
+    return view === 'desktop' ? (React__default.default.createElement(Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
+});
 
 exports.CalendarInputResponsive = CalendarInputResponsive;

package/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/components/calendar-input/Component.js

@@ -1,18 +1,143 @@
 'use strict';
 
-var components_calendarInput_Component = require('../../Component-e779a21c.js');
-require('react');
-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('../../utils.js');
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsCalendar = require('@alfalab/core-components-calendar');
+var coreComponentsDateInput = require('@alfalab/core-components-date-input');
+var coreComponentsPopover = require('@alfalab/core-components-popover');
+var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
+var utils = require('../../utils.js');
 require('date-fns/format');
 require('date-fns/isSameDay');
 require('date-fns/parse');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-exports.CalendarInput = components_calendarInput_Component.CalendarInput;
+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 = React.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 = _s === void 0 ? coreComponentsCalendar.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 = tslib.__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 = utils.SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
+    var shouldRenderOnlyInput = mobileMode === 'input';
+    var shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
+    var shouldRenderPopover = calendarPosition === 'popover' && !shouldRenderNative && !shouldRenderOnlyInput;
+    var _v = React.useState(false), open = _v[0], setOpen = _v[1];
+    var _w = React.useState(value || defaultValue), inputValue = _w[0], setInputValue = _w[1];
+    var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
+    var checkInputValueIsValid = React.useCallback(function (newInputValue) {
+        if (!newInputValue)
+            return false;
+        var dateValue = coreComponentsDateInput.parseDateString(newInputValue).getTime();
+        return !!(dateValue &&
+            coreComponentsDateInput.isCompleteDateInput(newInputValue) &&
+            coreComponentsCalendar.dateInLimits(dateValue, minDate, maxDate) &&
+            !offDays.includes(dateValue));
+    }, [maxDate, minDate, offDays]);
+    var inputDisabled = disabled || readOnly;
+    var inputWrapperRef = React.useRef(null);
+    var calendarRef = React.useRef(null);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (event.target.tagName === 'INPUT' && event.key === 'Enter') {
+            setOpen(!open);
+        }
+        if (event.key === 'Escape') {
+            setOpen(false);
+        }
+    }, [open]);
+    var handleClick = React.useCallback(function () {
+        if (!open)
+            setOpen(true);
+    }, [open]);
+    var handleFocus = React.useCallback(function (event) {
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    }, [open, view]);
+    var handleBlur = React.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 = React.useCallback(function (event) {
+        if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
+            event.preventDefault();
+            calendarRef.current.focus();
+        }
+        if (onKeyDown)
+            onKeyDown(event);
+    }, [onKeyDown]);
+    var changeHandler = React.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 = React.useCallback(function (event, payload) {
+        changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
+    }, [changeHandler, checkInputValueIsValid]);
+    var handleCalendarChange = React.useCallback(function (date) {
+        if (date) {
+            changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            setOpen(false);
+        }
+    }, [changeHandler, view]);
+    var handleCalendarWrapperMouseDown = React.useCallback(function (event) {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    }, []);
+    var handleCalendarClose = React.useCallback(function () {
+        setOpen(false);
+    }, []);
+    React.useEffect(function () {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    React.useEffect(function () {
+        if (typeof value !== 'undefined') {
+            setInputValue(value);
+        }
+    }, [value]);
+    var renderCalendar = function () { return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React__default.default.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React__default.default.createElement(Calendar, tslib.__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__default.default.createElement("div", { className: cn__default.default(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__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__assign({}, restProps, { ref: ref, wrapperRef: mergeRefs__default.default([wrapperRef, inputWrapperRef]), value: inputValue, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, mobileMode: mobileMode === 'native' ? 'native' : 'input', error: error, rightAddons: React__default.default.createElement(React__default.default.Fragment, null,
+                rightAddons,
+                shouldRenderPopover && (React__default.default.createElement(CalendarMIcon.CalendarMIcon, { className: styles.calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
+        shouldRenderStatic && renderCalendar(),
+        shouldRenderPopover && (React__default.default.createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn__default.default(styles.calendarContainer, (_c = {},
+                _c[styles.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 4], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+exports.CalendarInput = CalendarInput;

package/components/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: qg9io */
+/* 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_14cog {
+} .calendar-input__component_1wl7e {
     display: inline-block;
     outline: none;
     position: relative;
-} .calendar-input__block_14cog {
+} .calendar-input__block_1wl7e {
     width: 100%;
-} .calendar-input__calendarContainer_14cog {
+} .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_14cog {
+} @media (max-width: 374px) { .calendar-input__calendarContainer_1wl7e {
         width: 100%;
         min-width: 288px
 }
-    } .calendar-input__calendarResponsive_14cog {
+    } .calendar-input__calendarResponsive_1wl7e {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
-} .calendar-input__calendarIcon_14cog {
+} .calendar-input__calendarIcon_1wl7e {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
-} .calendar-input__calendarIcon_14cog:not(:only-child) {
+} .calendar-input__calendarIcon_1wl7e:not(:only-child) {
         margin-right: var(--gap-2xs);
-    } .calendar-input__nativeInput_14cog {
+    } .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_14cog::-webkit-calendar-picker-indicator {
+} .calendar-input__nativeInput_1wl7e::-webkit-calendar-picker-indicator {
         display: none;
-    } .calendar-input__nativeInput_14cog::-webkit-inner-spin-button {
+    } .calendar-input__nativeInput_1wl7e::-webkit-inner-spin-button {
         display: none;
     }

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

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

package/components/calendar-input/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var components_calendarInput_Component = require('../../Component-e779a21c.js');
+var components_calendarInput_Component = require('./Component.js');
+require('tslib');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/cssm/Component.desktop.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "./Component-fde0c12c";
+/// <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/cssm/Component.desktop.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var components_calendarInput_Component = require('./Component-fde0c12c.js');
+var tslib = require('tslib');
 var React = require('react');
+var components_calendarInput_Component = require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-calendar/cssm');
@@ -18,6 +19,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var CalendarInputDesktop = function (props) { return (React__default.default.createElement(components_calendarInput_Component.CalendarInput, components_calendarInput_Component.__assign({}, props))); };
+var CalendarInputDesktop = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_calendarInput_Component.CalendarInput, tslib.__assign({}, props, { ref: ref })); });
 
 exports.CalendarInputDesktop = CalendarInputDesktop;

package/cssm/Component.mobile.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "./Component-fde0c12c";
+/// <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/cssm/Component.mobile.js

@@ -1,8 +1,9 @@
 'use strict';
 
-var components_calendarInput_Component = require('./Component-fde0c12c.js');
+var tslib = require('tslib');
 var React = require('react');
 var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
+var components_calendarInput_Component = require('./components/calendar-input/Component.js');
 require('react-merge-refs');
 require('classnames');
 require('@alfalab/core-components-date-input/cssm');
@@ -18,6 +19,6 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var CalendarInputMobile = function (props) { return (React__default.default.createElement(components_calendarInput_Component.CalendarInput, components_calendarInput_Component.__assign({ Calendar: coreComponentsCalendar.CalendarMobile, view: 'mobile' }, props))); };
+var CalendarInputMobile = React.forwardRef(function (props, ref) { return React__default.default.createElement(components_calendarInput_Component.CalendarInput, tslib.__assign({ Calendar: coreComponentsCalendar.CalendarMobile, view: 'mobile' }, props, { ref: ref })); });
 
 exports.CalendarInputMobile = CalendarInputMobile;

package/cssm/Component.responsive.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-import { CalendarInputProps } from "./Component-fde0c12c";
+/// <reference types="react" />
+import React from 'react';
+import { CalendarInputProps } from "./components/calendar-input/Component";
 type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
     /**
      * Контрольная точка, с нее начинается desktop версия
@@ -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 };