@alfalab/core-components-calendar-input 6.4.0 → 6.5.2

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-calendar-input@6.5.1...@alfalab/core-components-calendar-input@6.5.2) (2022-07-01)
+
+**Note:** Version bump only for package @alfalab/core-components-calendar-input
+
+
+
+
+
+## [6.5.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-calendar-input@6.5.0...@alfalab/core-components-calendar-input@6.5.1) (2022-06-30)
+
+**Note:** Version bump only for package @alfalab/core-components-calendar-input
+
+
+
+
+
+# [6.5.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-calendar-input@6.4.0...@alfalab/core-components-calendar-input@6.5.0) (2022-06-29)
+
+
+### Features
+
+* **calendar:** implement calendar mobile ([#54](https://github.com/core-ds/core-components/issues/54)) ([730f51d](https://github.com/core-ds/core-components/commit/730f51d35823273f122fe84a0369f95745fd2878))
+
+
+
+
+
 # [6.4.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-calendar-input@6.3.3...@alfalab/core-components-calendar-input@6.4.0) (2022-06-28)
 
 

package/dist/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { DateInputProps } from "@alfalab/core-components-date-input";
-import { CalendarProps } from "@alfalab/core-components-calendar";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | 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;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +194,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */

package/dist/Component.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
+var hooks = require('@alfalab/hooks');
 var coreComponentsPopover = require('@alfalab/core-components-popover');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input');
@@ -59,18 +60,25 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-input__component_15x5q","block":"calendar-input__block_15x5q","calendarContainer":"calendar-input__calendarContainer_15x5q","calendarIcon":"calendar-input__calendarIcon_15x5q","nativeInput":"calendar-input__nativeInput_15x5q"};
+var styles = {"component":"calendar-input__component_1i7k6","block":"calendar-input__block_1i7k6","calendarContainer":"calendar-input__calendarContainer_1i7k6","calendarResponsive":"calendar-input__calendarResponsive_1i7k6","calendarIcon":"calendar-input__calendarIcon_1i7k6","nativeInput":"calendar-input__nativeInput_1i7k6"};
 require('./index.css')
 
 var CalendarInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.block, block = _c === void 0 ? false : _c, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, defaultMonth = _a.defaultMonth, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, _f = _a.calendarPosition, calendarPosition = _f === void 0 ? 'popover' : _f, value = _a.value, dataTestId = _a.dataTestId, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, _h = _a.minDate, minDate = _h === void 0 ? calendarProps.minDate : _h, _j = _a.maxDate, maxDate = _j === void 0 ? calendarProps.maxDate : _j, _k = _a.offDays, offDays = _k === void 0 ? calendarProps.offDays || [] : _k, _l = _a.events, events = _l === void 0 ? calendarProps.events || [] : _l, preventFlip = _a.preventFlip, _m = _a.mobileMode, mobileMode = _m === void 0 ? 'popover' : _m, _o = _a.wrapperRef, wrapperRef = _o === void 0 ? null : _o, disabled = _a.disabled, _p = _a.onChange, onChange = _p === void 0 ? function () { return null; } : _p, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _q = _a.Calendar, Calendar = _q === void 0 ? coreComponentsCalendar.Calendar : _q, _r = _a.popoverPosition, popoverPosition = _r === void 0 ? 'bottom-start' : _r, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, 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"]);
+    var _b, _c;
+    var _d;
+    var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, 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, 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"]);
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
+    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 _s = React.useState(false), open = _s[0], setOpen = _s[1];
-    var _t = React.useState(value || defaultValue), inputValue = _t[0], setInputValue = _t[1];
+    var _u = React.useState(false), open = _u[0], setOpen = _u[1];
+    var _v = React.useState(value || defaultValue), inputValue = _v[0], setInputValue = _v[1];
     var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
     var checkInputValueIsValid = React.useCallback(function (newInputValue) {
         if (!newInputValue || error)
@@ -97,17 +105,21 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setOpen(true);
     }, [open]);
     var handleFocus = React.useCallback(function (event) {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     var handleBlur = React.useCallback(function (event) {
-        var target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        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();
@@ -134,13 +146,20 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
     var handleCalendarChange = React.useCallback(function (date) {
-        changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+        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]);
@@ -149,22 +168,10 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setInputValue(value);
         }
     }, [value]);
-    var renderCalendar = React.useCallback(function () { return (
+    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, __assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
-        calendarProps,
-        calendarValue,
-        checkInputValueIsValid,
-        defaultMonth,
-        events,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        inputValue,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
+        React__default['default'].createElement(CalendarComponent, __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 = {},
@@ -174,7 +181,9 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
                 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: styles.calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, 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, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
 exports.CalendarInput = CalendarInput;

package/dist/cssm/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { DateInputProps } from "@alfalab/core-components-date-input";
-import { CalendarProps } from "@alfalab/core-components-calendar";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | 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;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +194,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */

package/dist/cssm/Component.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var cn = require('classnames');
 var mergeRefs = require('react-merge-refs');
+var hooks = require('@alfalab/hooks');
 var coreComponentsPopover = require('@alfalab/core-components-popover/dist/cssm');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/dist/cssm');
@@ -62,14 +63,21 @@ function __rest(s, e) {
 }
 
 var CalendarInput = React.forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.block, block = _c === void 0 ? false : _c, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, defaultMonth = _a.defaultMonth, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, _f = _a.calendarPosition, calendarPosition = _f === void 0 ? 'popover' : _f, value = _a.value, dataTestId = _a.dataTestId, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, _h = _a.minDate, minDate = _h === void 0 ? calendarProps.minDate : _h, _j = _a.maxDate, maxDate = _j === void 0 ? calendarProps.maxDate : _j, _k = _a.offDays, offDays = _k === void 0 ? calendarProps.offDays || [] : _k, _l = _a.events, events = _l === void 0 ? calendarProps.events || [] : _l, preventFlip = _a.preventFlip, _m = _a.mobileMode, mobileMode = _m === void 0 ? 'popover' : _m, _o = _a.wrapperRef, wrapperRef = _o === void 0 ? null : _o, disabled = _a.disabled, _p = _a.onChange, onChange = _p === void 0 ? function () { return null; } : _p, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _q = _a.Calendar, Calendar = _q === void 0 ? coreComponentsCalendar.Calendar : _q, _r = _a.popoverPosition, popoverPosition = _r === void 0 ? 'bottom-start' : _r, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, 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"]);
+    var _b, _c;
+    var _d;
+    var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, 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, 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"]);
+    var view = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
+    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 _s = React.useState(false), open = _s[0], setOpen = _s[1];
-    var _t = React.useState(value || defaultValue), inputValue = _t[0], setInputValue = _t[1];
+    var _u = React.useState(false), open = _u[0], setOpen = _u[1];
+    var _v = React.useState(value || defaultValue), inputValue = _v[0], setInputValue = _v[1];
     var calendarValue = inputValue ? coreComponentsDateInput.parseDateString(inputValue).getTime() : undefined;
     var checkInputValueIsValid = React.useCallback(function (newInputValue) {
         if (!newInputValue || error)
@@ -96,17 +104,21 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setOpen(true);
     }, [open]);
     var handleFocus = React.useCallback(function (event) {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     var handleBlur = React.useCallback(function (event) {
-        var target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        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();
@@ -133,13 +145,20 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
     var handleCalendarChange = React.useCallback(function (date) {
-        changeHandler(null, coreComponentsDateInput.formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+        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]);
@@ -148,22 +167,10 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
             setInputValue(value);
         }
     }, [value]);
-    var renderCalendar = React.useCallback(function () { return (
+    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, __assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
-        calendarProps,
-        calendarValue,
-        checkInputValueIsValid,
-        defaultMonth,
-        events,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        inputValue,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
+        React__default['default'].createElement(CalendarComponent, __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__default['default'].component, className, (_b = {},
@@ -173,7 +180,9 @@ var CalendarInput = React.forwardRef(function (_a, ref) {
                 rightAddons,
                 shouldRenderPopover && (React__default['default'].createElement(CalendarMIcon.CalendarMIcon, { className: styles__default['default'].calendarIcon }))), onKeyDown: handleInputKeyDown, onChange: handleInputChange, block: true })),
         shouldRenderStatic && renderCalendar(),
-        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: styles__default['default'].calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        shouldRenderPopover && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn__default['default'](styles__default['default'].calendarContainer, (_c = {},
+                _c[styles__default['default'].calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
 exports.CalendarInput = CalendarInput;

package/dist/cssm/index.js

@@ -6,6 +6,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
+require('@alfalab/hooks');
 require('@alfalab/core-components-popover/dist/cssm');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('@alfalab/core-components-date-input/dist/cssm');

package/dist/cssm/index.module.css

@@ -11,11 +11,13 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-s: 4px;
 }
 :root {
+    --calendar-width: 344px;
 
     /* Кнопки выбора месяцев и годов */
 
@@ -27,6 +29,8 @@
 
     /* highlighted */
 
+    /* holidays */
+
     /* range */
 
     /* selected */
@@ -58,6 +62,10 @@
         min-width: 288px
 }
     }
+.calendarResponsive {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
 .calendarIcon {
     width: 24px;
     height: 24px;

package/dist/cssm/stories.module.css

@@ -18,6 +18,8 @@
 
     /* highlighted */
 
+    /* holidays */
+
     /* range */
 
     /* selected */

package/dist/esm/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { DateInputProps } from "@alfalab/core-components-date-input";
-import { CalendarProps } from "@alfalab/core-components-calendar";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | 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;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +194,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */

package/dist/esm/Component.js

@@ -1,10 +1,11 @@
 import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
+import { useMedia } from '@alfalab/hooks';
 import { Popover } from '@alfalab/core-components-popover/dist/esm';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '@alfalab/core-components-date-input/dist/esm';
-import { dateInLimits, Calendar } from '@alfalab/core-components-calendar/dist/esm';
+import { dateInLimits, CalendarMobile, Calendar } from '@alfalab/core-components-calendar/dist/esm';
 import 'date-fns/parse';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
@@ -49,18 +50,25 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"calendar-input__component_15x5q","block":"calendar-input__block_15x5q","calendarContainer":"calendar-input__calendarContainer_15x5q","calendarIcon":"calendar-input__calendarIcon_15x5q","nativeInput":"calendar-input__nativeInput_15x5q"};
+var styles = {"component":"calendar-input__component_1i7k6","block":"calendar-input__block_1i7k6","calendarContainer":"calendar-input__calendarContainer_1i7k6","calendarResponsive":"calendar-input__calendarResponsive_1i7k6","calendarIcon":"calendar-input__calendarIcon_1i7k6","nativeInput":"calendar-input__nativeInput_1i7k6"};
 require('./index.css')
 
 var CalendarInput = forwardRef(function (_a, ref) {
-    var _b;
-    var _c = _a.block, block = _c === void 0 ? false : _c, className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, _d = _a.defaultOpen, defaultOpen = _d === void 0 ? false : _d, defaultMonth = _a.defaultMonth, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, _f = _a.calendarPosition, calendarPosition = _f === void 0 ? 'popover' : _f, value = _a.value, dataTestId = _a.dataTestId, _g = _a.calendarProps, calendarProps = _g === void 0 ? {} : _g, _h = _a.minDate, minDate = _h === void 0 ? calendarProps.minDate : _h, _j = _a.maxDate, maxDate = _j === void 0 ? calendarProps.maxDate : _j, _k = _a.offDays, offDays = _k === void 0 ? calendarProps.offDays || [] : _k, _l = _a.events, events = _l === void 0 ? calendarProps.events || [] : _l, preventFlip = _a.preventFlip, _m = _a.mobileMode, mobileMode = _m === void 0 ? 'popover' : _m, _o = _a.wrapperRef, wrapperRef = _o === void 0 ? null : _o, disabled = _a.disabled, _p = _a.onChange, onChange = _p === void 0 ? function () { return null; } : _p, onInputChange = _a.onInputChange, onCalendarChange = _a.onCalendarChange, onKeyDown = _a.onKeyDown, readOnly = _a.readOnly, _q = _a.Calendar, Calendar$1 = _q === void 0 ? Calendar : _q, _r = _a.popoverPosition, popoverPosition = _r === void 0 ? 'bottom-start' : _r, zIndexPopover = _a.zIndexPopover, useAnchorWidth = _a.useAnchorWidth, rightAddons = _a.rightAddons, error = _a.error, 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"]);
+    var _b, _c;
+    var _d;
+    var _e = _a.block, block = _e === void 0 ? false : _e, className = _a.className, inputClassName = _a.inputClassName, 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, 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"]);
+    var view = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
+    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 _s = useState(false), open = _s[0], setOpen = _s[1];
-    var _t = useState(value || defaultValue), inputValue = _t[0], setInputValue = _t[1];
+    var _u = useState(false), open = _u[0], setOpen = _u[1];
+    var _v = useState(value || defaultValue), inputValue = _v[0], setInputValue = _v[1];
     var calendarValue = inputValue ? parseDateString(inputValue).getTime() : undefined;
     var checkInputValueIsValid = useCallback(function (newInputValue) {
         if (!newInputValue || error)
@@ -87,17 +95,21 @@ var CalendarInput = forwardRef(function (_a, ref) {
             setOpen(true);
     }, [open]);
     var handleFocus = useCallback(function (event) {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     var handleBlur = useCallback(function (event) {
-        var target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        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();
@@ -124,13 +136,20 @@ var CalendarInput = forwardRef(function (_a, ref) {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
     var handleCalendarChange = useCallback(function (date) {
-        changeHandler(null, formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+        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]);
@@ -139,22 +158,10 @@ var CalendarInput = forwardRef(function (_a, ref) {
             setInputValue(value);
         }
     }, [value]);
-    var renderCalendar = useCallback(function () { return (
+    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, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); }, [
-        calendarProps,
-        calendarValue,
-        checkInputValueIsValid,
-        defaultMonth,
-        events,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        inputValue,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
+        React.createElement(CalendarComponent, __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 = {},
@@ -164,7 +171,9 @@ var CalendarInput = forwardRef(function (_a, ref) {
                 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: styles.calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, 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, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
 export { CalendarInput };

package/dist/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: acokf */
+/* hash: 1s50e */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -12,11 +12,13 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-s: 4px;
 }
 :root {
+    --calendar-width: 344px;
 
     /* Кнопки выбора месяцев и годов */
 
@@ -28,6 +30,8 @@
 
     /* highlighted */
 
+    /* holidays */
+
     /* range */
 
     /* selected */
@@ -40,35 +44,39 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_15x5q {
+.calendar-input__component_1i7k6 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_15x5q {
+.calendar-input__block_1i7k6 {
     width: 100%;
 }
-.calendar-input__calendarContainer_15x5q {
+.calendar-input__calendarContainer_1i7k6 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_15x5q {
+.calendar-input__calendarContainer_1i7k6 {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_15x5q {
+.calendar-input__calendarResponsive_1i7k6 {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.calendar-input__calendarIcon_1i7k6 {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_15x5q:not(:only-child) {
+.calendar-input__calendarIcon_1i7k6:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_15x5q {
+.calendar-input__nativeInput_1i7k6 {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +87,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_15x5q::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_1i7k6::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_15x5q::-webkit-inner-spin-button {
+.calendar-input__nativeInput_1i7k6::-webkit-inner-spin-button {
         display: none;
     }

package/dist/esm/index.js

@@ -2,6 +2,7 @@ export { CalendarInput } from './Component.js';
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
+import '@alfalab/hooks';
 import '@alfalab/core-components-popover/dist/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import '@alfalab/core-components-date-input/dist/esm';

package/dist/index.css

@@ -1,4 +1,4 @@
-/* hash: acokf */
+/* hash: 1s50e */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -12,11 +12,13 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-s: 4px;
 }
 :root {
+    --calendar-width: 344px;
 
     /* Кнопки выбора месяцев и годов */
 
@@ -28,6 +30,8 @@
 
     /* highlighted */
 
+    /* holidays */
+
     /* range */
 
     /* selected */
@@ -40,35 +44,39 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_15x5q {
+.calendar-input__component_1i7k6 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_15x5q {
+.calendar-input__block_1i7k6 {
     width: 100%;
 }
-.calendar-input__calendarContainer_15x5q {
+.calendar-input__calendarContainer_1i7k6 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_15x5q {
+.calendar-input__calendarContainer_1i7k6 {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_15x5q {
+.calendar-input__calendarResponsive_1i7k6 {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.calendar-input__calendarIcon_1i7k6 {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_15x5q:not(:only-child) {
+.calendar-input__calendarIcon_1i7k6:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_15x5q {
+.calendar-input__nativeInput_1i7k6 {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +87,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_15x5q::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_1i7k6::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_15x5q::-webkit-inner-spin-button {
+.calendar-input__nativeInput_1i7k6::-webkit-inner-spin-button {
         display: none;
     }

package/dist/index.js

@@ -6,6 +6,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('react-merge-refs');
+require('@alfalab/hooks');
 require('@alfalab/core-components-popover');
 require('@alfalab/icons-glyph/CalendarMIcon');
 require('@alfalab/core-components-date-input');

package/dist/modern/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "@alfalab/core-components-popover";
 import { DateInputProps } from "@alfalab/core-components-date-input";
-import { CalendarProps } from "@alfalab/core-components-calendar";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
 type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Дополнительный класс
@@ -20,7 +20,7 @@ type CalendarInputProps = Omit<DateInputProps, 'onChange' | 'mobileMode'> & {
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: CalendarProps & Record<string, unknown>;
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -117,7 +117,17 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Доп. пропсы для календаря
      */
-    calendarProps?: (CalendarProps & Record<string, unknown>) | 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;
     /**
      * Значение инпута (используется и для календаря)
      */
@@ -184,7 +194,7 @@ declare const CalendarInput: React.ForwardRefExoticComponent<Pick<DateInputProps
     /**
      * Обработчик изменения календаря
      */
-    onCalendarChange?: ((date: number) => void) | undefined;
+    onCalendarChange?: ((date?: number | undefined) => void) | undefined;
     /**
      * Позиционирование поповера с календарем
      */

package/dist/modern/Component.js

@@ -1,19 +1,26 @@
 import React, { forwardRef, useState, useCallback, useRef, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
+import { useMedia } from '@alfalab/hooks';
 import { Popover } from '@alfalab/core-components-popover/dist/modern';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '@alfalab/core-components-date-input/dist/modern';
-import { Calendar, dateInLimits } from '@alfalab/core-components-calendar/dist/modern';
+import { Calendar, dateInLimits, CalendarMobile } from '@alfalab/core-components-calendar/dist/modern';
 import 'date-fns/parse';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
 
-var styles = {"component":"calendar-input__component_15x5q","block":"calendar-input__block_15x5q","calendarContainer":"calendar-input__calendarContainer_15x5q","calendarIcon":"calendar-input__calendarIcon_15x5q","nativeInput":"calendar-input__nativeInput_15x5q"};
+var styles = {"component":"calendar-input__component_1i7k6","block":"calendar-input__block_1i7k6","calendarContainer":"calendar-input__calendarContainer_1i7k6","calendarResponsive":"calendar-input__calendarResponsive_1i7k6","calendarIcon":"calendar-input__calendarIcon_1i7k6","nativeInput":"calendar-input__nativeInput_1i7k6"};
 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, ...restProps }, ref) => {
+    const [view] = useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop');
+    const CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
+    const calendarResponsive = calendarProps?.responsive ?? true;
     const shouldRenderNative = SUPPORTS_INPUT_TYPE_DATE && mobileMode === 'native';
     const shouldRenderOnlyInput = mobileMode === 'input';
     const shouldRenderStatic = calendarPosition === 'static' && !shouldRenderOnlyInput;
@@ -46,17 +53,21 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
             setOpen(true);
     }, [open]);
     const handleFocus = useCallback((event) => {
-        setOpen(true);
-        if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
-            calendarRef.current.focus();
+        if (view === 'desktop') {
+            setOpen(true);
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
         }
-    }, [open]);
+    }, [open, view]);
     const handleBlur = useCallback((event) => {
-        const target = (event.relatedTarget || document.activeElement);
-        if (calendarRef.current && calendarRef.current.contains(target) === false) {
-            setOpen(false);
+        if (view === 'desktop') {
+            const target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
         }
-    }, []);
+    }, [view]);
     const handleInputKeyDown = useCallback((event) => {
         if (['ArrowDown', 'ArrowUp'].includes(event.key) && calendarRef.current) {
             event.preventDefault();
@@ -80,14 +91,21 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
     const handleInputChange = useCallback((event, payload) => {
         changeHandler(event, payload.value, payload.date, 'input', !payload.value || checkInputValueIsValid(payload.value));
     }, [changeHandler, checkInputValueIsValid]);
-    const handleCalendarChange = useCallback(date => {
-        changeHandler(null, formatDate(date), new Date(date), 'calendar');
-        setOpen(false);
-    }, [changeHandler]);
+    const handleCalendarChange = useCallback((date) => {
+        if (date) {
+            changeHandler(null, formatDate(date), new Date(date), 'calendar');
+        }
+        if (view === 'desktop') {
+            setOpen(false);
+        }
+    }, [changeHandler, view]);
     const handleCalendarWrapperMouseDown = useCallback((event) => {
         // Не дает инпуту терять фокус при выборе даты
         event.preventDefault();
     }, []);
+    const handleCalendarClose = useCallback(() => {
+        setOpen(false);
+    }, []);
     useEffect(() => {
         setOpen(defaultOpen);
     }, [defaultOpen]);
@@ -96,22 +114,10 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
             setInputValue(value);
         }
     }, [value]);
-    const renderCalendar = useCallback(() => (
+    const renderCalendar = () => (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React.createElement(Calendar$1, Object.assign({}, calendarProps, { ref: calendarRef, defaultMonth: defaultMonth, value: checkInputValueIsValid(inputValue) ? calendarValue : undefined, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))), [
-        calendarProps,
-        calendarValue,
-        checkInputValueIsValid,
-        defaultMonth,
-        events,
-        handleCalendarChange,
-        handleCalendarWrapperMouseDown,
-        inputValue,
-        maxDate,
-        minDate,
-        offDays,
-    ]);
+        React.createElement(CalendarComponent, Object.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, {
@@ -121,7 +127,9 @@ const CalendarInput = forwardRef(({ block = false, className, inputClassName, po
                 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: styles.calendarContainer, className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+        shouldRenderPopover && (React.createElement(Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputWrapperRef.current, popperClassName: cn(styles.calendarContainer, {
+                [styles.calendarResponsive]: calendarResponsive,
+            }), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
 export { CalendarInput };

package/dist/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: acokf */
+/* hash: 1s50e */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -12,11 +12,13 @@
 }
 :root {
     --gap-2xs: 4px;
+    --gap-m: 16px;
 }
 :root {
     --border-radius-s: 4px;
 }
 :root {
+    --calendar-width: 344px;
 
     /* Кнопки выбора месяцев и годов */
 
@@ -28,6 +30,8 @@
 
     /* highlighted */
 
+    /* holidays */
+
     /* range */
 
     /* selected */
@@ -40,35 +44,39 @@
     --calendar-input-icon-color: var(--color-light-graphic-primary);
     --calendar-input-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.calendar-input__component_15x5q {
+.calendar-input__component_1i7k6 {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_15x5q {
+.calendar-input__block_1i7k6 {
     width: 100%;
 }
-.calendar-input__calendarContainer_15x5q {
+.calendar-input__calendarContainer_1i7k6 {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_15x5q {
+.calendar-input__calendarContainer_1i7k6 {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_15x5q {
+.calendar-input__calendarResponsive_1i7k6 {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.calendar-input__calendarIcon_1i7k6 {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_15x5q:not(:only-child) {
+.calendar-input__calendarIcon_1i7k6:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_15x5q {
+.calendar-input__nativeInput_1i7k6 {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -79,9 +87,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_15x5q::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_1i7k6::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_15x5q::-webkit-inner-spin-button {
+.calendar-input__nativeInput_1i7k6::-webkit-inner-spin-button {
         display: none;
     }

package/dist/modern/index.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
+import '@alfalab/hooks';
 import '@alfalab/core-components-popover/dist/modern';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import '@alfalab/core-components-date-input/dist/modern';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-input",
-    "version": "6.4.0",
+    "version": "6.5.2",
     "description": "Calendar input component",
     "keywords": [],
     "license": "MIT",
@@ -19,12 +19,13 @@
         "react-dom": "^16.9.0 || ^17.0.1"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^5.4.0",
+        "@alfalab/core-components-calendar": "^5.5.2",
         "@alfalab/core-components-date-input": "^2.3.0",
-        "@alfalab/core-components-popover": "^5.7.0",
+        "@alfalab/core-components-popover": "^5.7.1",
+        "@alfalab/hooks": "^1.7.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.16.1",
         "react-merge-refs": "^1.1.0"
     },
-    "gitHead": "dcd5c0c8e25b7c374ff9311505ccf738a82e22c0"
+    "gitHead": "a1e54f5b2894447f4a6c80347706c27f855d5710"
 }