@alfalab/core-components 27.10.0 → 27.13.0

package/calendar-input/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../popover";
 import { DateInputProps } from "../date-input";
-import { CalendarProps } from "../calendar";
+import { CalendarProps, CalendarMobileProps } from "../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/calendar-input/Component.js

@@ -3,6 +3,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('../popover');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var coreComponentsDateInput = require('../date-input');
@@ -57,18 +58,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_m8qzn","block":"calendar-input__block_m8qzn","calendarContainer":"calendar-input__calendarContainer_m8qzn","calendarResponsive":"calendar-input__calendarResponsive_m8qzn","calendarIcon":"calendar-input__calendarIcon_m8qzn","nativeInput":"calendar-input__nativeInput_m8qzn"};
 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)
@@ -95,17 +103,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();
@@ -132,13 +144,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]);
@@ -147,22 +166,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 = {},
@@ -172,7 +179,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/calendar-input/cssm/Component.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../../popover";
 import { DateInputProps } from "../../date-input";
-import { CalendarProps } from "../../calendar";
+import { CalendarProps, CalendarMobileProps } from "../../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/calendar-input/cssm/Component.js

@@ -3,6 +3,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('../../popover/cssm');
 var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
 var coreComponentsDateInput = require('../../date-input/cssm');
@@ -60,14 +61,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)
@@ -94,17 +102,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();
@@ -131,13 +143,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]);
@@ -146,22 +165,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 = {},
@@ -171,7 +178,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/calendar-input/cssm/index.js

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

package/calendar-input/cssm/index.module.css

@@ -726,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -747,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);
@@ -788,6 +801,10 @@
         min-width: 288px
 }
     }
+.calendarResponsive {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
 .calendarIcon {
     width: 24px;
     height: 24px;

package/calendar-input/cssm/stories.module.css

@@ -726,8 +726,18 @@
     --calendar-width: 344px;
     --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
+    --calendar-inner-third-part-width: calc(var(--calendar-inner-width) / 3);
+    --calendar-mobile-inner-half-width: calc(var(--calendar-mobile-inner-width) / 2);
 
     /* Кнопки выбора месяцев и годов */
+    --calendar-select-button-gap: calc(var(--gap-xs) / 3);
+    --calendar-mobile-select-button-gap: calc(var(--gap-2xs) / 2);
+    --calendar-mobile-select-button-width: calc(
+        var(--calendar-mobile-inner-half-width) - var(--calendar-mobile-select-button-gap)
+    );
+    --calendar-select-button-width: calc(
+        var(--calendar-inner-third-part-width) - var(--calendar-select-button-gap)
+    );
     --calendar-select-button-today-border-color: var(--color-light-border-key);
     --calendar-select-button-selected-background: var(--color-light-bg-primary-inverted);
 
@@ -747,6 +757,9 @@
     --calendar-highlighted-color: var(--color-light-text-primary);
     --calendar-highlighted-background: var(--color-light-graphic-quaternary);
 
+    /* holidays */
+    --calendar-holiday-color: var(--color-light-text-accent);
+
     /* range */
     --calendar-range-color: var(--color-light-text-primary);
     --calendar-range-background: var(--color-light-specialbg-component);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { ChangeEvent, MouseEvent, ElementType } from "react";
 import { PopoverProps } from "../../popover";
 import { DateInputProps } from "../../date-input";
-import { CalendarProps } from "../../calendar";
+import { CalendarProps, CalendarMobileProps } from "../../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/calendar-input/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 '../../popover/esm';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '../../date-input/esm';
-import { dateInLimits, Calendar } from '../../calendar/esm';
+import { dateInLimits, CalendarMobile, Calendar } from '../../calendar/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_m8qzn","block":"calendar-input__block_m8qzn","calendarContainer":"calendar-input__calendarContainer_m8qzn","calendarResponsive":"calendar-input__calendarResponsive_m8qzn","calendarIcon":"calendar-input__calendarIcon_m8qzn","nativeInput":"calendar-input__nativeInput_m8qzn"};
 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 };