@alfalab/core-components 27.11.0 → 27.13.1

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_1ga77","block":"calendar-input__block_1ga77","calendarContainer":"calendar-input__calendarContainer_1ga77","calendarIcon":"calendar-input__calendarIcon_1ga77","nativeInput":"calendar-input__nativeInput_1ga77"};
+var styles = {"component":"calendar-input__component_tulgc","block":"calendar-input__block_tulgc","calendarContainer":"calendar-input__calendarContainer_tulgc","calendarResponsive":"calendar-input__calendarResponsive_tulgc","calendarIcon":"calendar-input__calendarIcon_tulgc","nativeInput":"calendar-input__nativeInput_tulgc"};
 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/calendar-input/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: zv7pm */
+/* hash: 92qwh */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -727,8 +727,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);
 
@@ -748,6 +758,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);
@@ -770,35 +783,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_1ga77 {
+.calendar-input__component_tulgc {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ga77 {
+.calendar-input__block_tulgc {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ga77 {
+.calendar-input__calendarContainer_tulgc {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ga77 {
+.calendar-input__calendarContainer_tulgc {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ga77 {
+.calendar-input__calendarResponsive_tulgc {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.calendar-input__calendarIcon_tulgc {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ga77:not(:only-child) {
+.calendar-input__calendarIcon_tulgc:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ga77 {
+.calendar-input__nativeInput_tulgc {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -809,9 +826,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ga77::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_tulgc::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ga77::-webkit-inner-spin-button {
+.calendar-input__nativeInput_tulgc::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/esm/index.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
+import '@alfalab/hooks';
 import '../../popover/esm';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import '../../date-input/esm';

package/calendar-input/index.css

@@ -1,4 +1,4 @@
-/* hash: zv7pm */
+/* hash: 92qwh */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -727,8 +727,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);
 
@@ -748,6 +758,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);
@@ -770,35 +783,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_1ga77 {
+.calendar-input__component_tulgc {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ga77 {
+.calendar-input__block_tulgc {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ga77 {
+.calendar-input__calendarContainer_tulgc {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ga77 {
+.calendar-input__calendarContainer_tulgc {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ga77 {
+.calendar-input__calendarResponsive_tulgc {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.calendar-input__calendarIcon_tulgc {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ga77:not(:only-child) {
+.calendar-input__calendarIcon_tulgc:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ga77 {
+.calendar-input__nativeInput_tulgc {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -809,9 +826,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ga77::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_tulgc::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ga77::-webkit-inner-spin-button {
+.calendar-input__nativeInput_tulgc::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/index.js

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

package/calendar-input/modern/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/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 { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import 'date-fns/format';
 import 'date-fns/isSameDay';
 import { Popover } from '../../popover/modern';
 import { parseDateString, isCompleteDateInput, formatDate, DateInput } from '../../date-input/modern';
-import { Calendar, dateInLimits } from '../../calendar/modern';
+import { Calendar, dateInLimits, CalendarMobile } from '../../calendar/modern';
 import { SUPPORTS_INPUT_TYPE_DATE } from './utils.js';
 
-var styles = {"component":"calendar-input__component_1ga77","block":"calendar-input__block_1ga77","calendarContainer":"calendar-input__calendarContainer_1ga77","calendarIcon":"calendar-input__calendarIcon_1ga77","nativeInput":"calendar-input__nativeInput_1ga77"};
+var styles = {"component":"calendar-input__component_tulgc","block":"calendar-input__block_tulgc","calendarContainer":"calendar-input__calendarContainer_tulgc","calendarResponsive":"calendar-input__calendarResponsive_tulgc","calendarIcon":"calendar-input__calendarIcon_tulgc","nativeInput":"calendar-input__nativeInput_tulgc"};
 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/calendar-input/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: zv7pm */
+/* hash: 92qwh */
 :root {
     --color-dark-indigo: #0b1f35;
     --color-dark-indigo-60: rgba(11, 31, 53, 0.6);
@@ -727,8 +727,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);
 
@@ -748,6 +758,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);
@@ -770,35 +783,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_1ga77 {
+.calendar-input__component_tulgc {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.calendar-input__block_1ga77 {
+.calendar-input__block_tulgc {
     width: 100%;
 }
-.calendar-input__calendarContainer_1ga77 {
+.calendar-input__calendarContainer_tulgc {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-input-popover-border-radius)
 }
 @media (max-width: 374px) {
-.calendar-input__calendarContainer_1ga77 {
+.calendar-input__calendarContainer_tulgc {
         width: 100%;
         min-width: 288px
 }
     }
-.calendar-input__calendarIcon_1ga77 {
+.calendar-input__calendarResponsive_tulgc {
+    width: var(--calendar-width);
+    padding: 0 var(--gap-m);
+}
+.calendar-input__calendarIcon_tulgc {
     width: 24px;
     height: 24px;
     display: block;
     color: var(--calendar-input-icon-color)
 }
-.calendar-input__calendarIcon_1ga77:not(:only-child) {
+.calendar-input__calendarIcon_tulgc:not(:only-child) {
         margin-right: var(--gap-2xs);
     }
-.calendar-input__nativeInput_1ga77 {
+.calendar-input__nativeInput_tulgc {
     opacity: 0;
     position: absolute;
     top: 0;
@@ -809,9 +826,9 @@
             appearance: none;
     z-index: 1
 }
-.calendar-input__nativeInput_1ga77::-webkit-calendar-picker-indicator {
+.calendar-input__nativeInput_tulgc::-webkit-calendar-picker-indicator {
         display: none;
     }
-.calendar-input__nativeInput_1ga77::-webkit-inner-spin-button {
+.calendar-input__nativeInput_tulgc::-webkit-inner-spin-button {
         display: none;
     }

package/calendar-input/modern/index.js

@@ -1,6 +1,7 @@
 import 'react';
 import 'classnames';
 import 'react-merge-refs';
+import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
 import 'date-fns/parse';
 import 'date-fns/format';

package/calendar-range/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_module = require('./index.module-28642721.js');
+var index_module = require('./index.module-c71a2d34.js');
 var React = require('react');
 require('classnames');
 require('date-fns/startOfMonth');

package/calendar-range/cssm/views/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);