@alfalab/core-components 27.11.0 → 27.13.1

package/calendar/cssm/components/years-table/Component.js

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../tslib.es6-ce870b46.js');
+var tslib_es6 = require('../../tslib.es6-f8106a15.js');
 var React = require('react');
-require('classnames');
+var cn = require('classnames');
 require('../../../../button/cssm');
 require('../select-button/index.module.css');
 var components_selectButton_Component = require('../select-button/Component.js');
@@ -13,12 +13,14 @@ var styles = require('./index.module.css');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var isSameYear__default = /*#__PURE__*/_interopDefaultLegacy(isSameYear);
 var isThisYear__default = /*#__PURE__*/_interopDefaultLegacy(isThisYear);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
 var YearsTable = function (_a) {
-    var selectedYear = _a.selectedYear, _b = _a.years, years = _b === void 0 ? [] : _b, getYearProps = _a.getYearProps, onScroll = _a.onScroll;
+    var _b;
+    var selectedYear = _a.selectedYear, _c = _a.years, years = _c === void 0 ? [] : _c, getYearProps = _a.getYearProps, onScroll = _a.onScroll, responsive = _a.responsive;
     var ref = React.useRef(null);
     var view = React.useCallback(function (year) {
         if (selectedYear && isSameYear__default['default'](selectedYear, year))
@@ -40,7 +42,7 @@ var YearsTable = function (_a) {
             onScroll(listNode.scrollTop);
         }
     }, [onScroll, selectedYear]);
-    return (React__default['default'].createElement("div", { className: styles__default['default'].yearsTable, onScroll: handleScroll, ref: ref },
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].yearsTable, (_b = {}, _b[styles__default['default'].responsive] = responsive, _b)), onScroll: handleScroll, ref: ref },
         React__default['default'].createElement("div", { className: styles__default['default'].inner }, years.map(function (year) { return (React__default['default'].createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getYearProps(year), { key: year.getFullYear(), view: view(year), className: styles__default['default'].button }), year.getFullYear())); }))));
 };
 

package/calendar/cssm/components/years-table/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../tslib.es6-ce870b46.js');
+require('../../tslib.es6-f8106a15.js');
 require('react');
 require('classnames');
 require('../../../../button/cssm');

package/calendar/cssm/components/years-table/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);
@@ -765,29 +778,38 @@
     --calendar-marker-background: var(--color-light-graphic-primary);
     --calendar-marker-selected-background: var(--color-light-graphic-primary-inverted);
 }
-.yearsTable {
-    overflow: auto;
-    overflow-x: hidden;
-    width: 100%;
-}
-.inner {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    position: relative;
+:global(.cc-calendar) .yearsTable {
+        overflow: auto;
+        overflow-x: hidden;
+        width: 100%
+    }
+:global(.cc-calendar) .yearsTable.responsive {
+            justify-content: space-between
+        }
+:global(.cc-calendar) .yearsTable.responsive .inner {
+                left: auto;
+            }
+:global(.cc-calendar) .yearsTable.responsive .button {
+                width: 33%;
+                margin-right: 0;
+            }
+:global(.cc-calendar) .inner {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        position: relative;
 
-    /* (width - inner-width) / 2 */
-    left: 32px;
-    overflow: hidden
-}
+        /* (width - inner-width) / 2 */
+        left: 32px;
+        overflow: hidden
+    }
 @media (max-width: 374px) {
-.inner {
-        left: 16px
-}
+:global(.cc-calendar) .inner {
+            left: 16px
     }
+        }
 :global(.cc-calendar) .button {
-        /* 3 колонки с равными отступами */
-        width: calc((var(--calendar-inner-width) / 3) - (var(--gap-xs) / 3));
+        width: var(--calendar-select-button-width);
         margin-right: var(--gap-2xs);
         margin-bottom: var(--gap-xs)
     }
@@ -796,7 +818,7 @@
         }
 @media (max-width: 374px) {
 :global(.cc-calendar) .button {
-            width: calc((var(--calendar-mobile-inner-width) / 2) - (var(--gap-2xs) / 2))
+            width: var(--calendar-mobile-select-button-width)
     }
 
             :global(.cc-calendar) .button:nth-child(3n) {

package/calendar/cssm/index-bdb4c6b9.d.ts

@@ -0,0 +1,221 @@
+/// <reference types="react-transition-group" />
+/// <reference types="react" />
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import React from "react";
+import { MouseEvent, KeyboardEvent, ReactNode, Ref, FC, MutableRefObject, RefObject } from "react";
+import { TransitionProps } from "react-transition-group/Transition";
+import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
+type PortalProps = {
+    /** Контент */
+    children?: ReactNode;
+    /**
+     * Функция, возвращающая контейнер, в который будут рендериться дочерние элементы
+     */
+    getPortalContainer?: () => Element;
+};
+type BackdropProps = Partial<TransitionProps> & {
+    /**
+     * Прозрачный бэкдроп
+     */
+    invisible?: boolean;
+    /**
+     * Управляет видимостью компонента
+     */
+    open: boolean;
+    /**
+     * Обработчик клика по бэкдропу
+     */
+    onClose?: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Классы анимации
+     *
+     * http://reactcommunity.org/react-transition-group/css-transition#CSSTransition-prop-classNames
+     */
+    transitionClassNames?: string | CSSTransitionClassNames;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+};
+type BaseModalProps = {
+    /**
+     * Контент
+     */
+    children?: ReactNode;
+    /**
+     * Компонент бэкдропа
+     */
+    Backdrop?: FC<BackdropProps>;
+    /**
+     * Свойства для Бэкдропа
+     */
+    backdropProps?: Partial<BackdropProps> & Record<string, unknown>;
+    /**
+     * Нода, компонент или функция возвращающая их
+     *
+     * Контейнер к которому будут добавляться порталы
+     */
+    container?: PortalProps["getPortalContainer"];
+    /**
+     * Отключает автоматический перевод фокуса на модалку при открытии
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает ловушку фокуса
+     * @default false
+     */
+    disableFocusLock?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия модалки
+     * @default false
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `callback` при нажатии Escape
+     * @default false
+     */
+    disableEscapeKeyDown?: boolean;
+    /**
+     * Отключает вызов `callback` при клике на бэкдроп
+     * @default false
+     */
+    disableBackdropClick?: boolean;
+    /**
+     * Содержимое модалки всегда в DOM
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс
+     */
+    contentClassName?: string;
+    /**
+     * Дополнительный класс для обертки (Modal)
+     */
+    wrapperClassName?: string;
+    /**
+     * Обработчик скролла контента
+     */
+    scrollHandler?: "wrapper" | "content" | MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Пропсы для анимации (CSSTransition)
+     */
+    transitionProps?: Partial<TransitionProps>;
+    /**
+     * Обработчик события нажатия на бэкдроп
+     */
+    onBackdropClick?: (event: MouseEvent) => void;
+    /**
+     * Обработчик события нажатия на Escape
+     *
+     * Если `disableEscapeKeyDown` - false и модальное окно в фокусе
+     */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Обработчик закрытия
+     */
+    onClose?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>, reason?: "backdropClick" | "escapeKeyDown" | "closerClick") => void;
+    /**
+     * Обработчик события onEntered компонента Transition
+     */
+    onMount?: () => void;
+    /**
+     * Обработчик события onExited компонента Transition
+     */
+    onUnmount?: () => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * z-index компонента
+     */
+    zIndex?: number;
+    /**
+     * Реф, который должен быть установлен компонентной области
+     */
+    componentRef?: MutableRefObject<HTMLDivElement | null>;
+};
+type BaseModalContext = {
+    hasFooter?: boolean;
+    hasHeader?: boolean;
+    hasScroll?: boolean;
+    headerHighlighted?: boolean;
+    footerHighlighted?: boolean;
+    headerOffset?: number;
+    setHeaderOffset: (offset: number) => void;
+    contentRef: Ref<HTMLElement>;
+    setHasHeader: (exists: boolean) => void;
+    setHasFooter: (exists: boolean) => void;
+    onClose: Required<BaseModalProps>["onClose"];
+};
+declare const BaseModalContext: React.Context<BaseModalContext>;
+declare const BaseModal: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+declare function isScrolledToTop(target: HTMLElement): boolean;
+declare function isScrolledToBottom(target: HTMLElement): boolean;
+declare function hasScrollbar(target: HTMLElement): boolean;
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement | undefined) => void;
+/**
+ * Набор констант для z-index соответствующих классов компонентов.
+ * Значения выбраны по приоритету.
+ */
+declare const stackingOrder: {
+    FOCUSED: number;
+    DEFAULT: number;
+    POPOVER: number;
+    MODAL: number;
+    TOAST: number;
+};
+declare const StackingContext: import("react").Context<number>;
+type StackProps = {
+    /**
+     * Render prop, в который передается функция.
+     * Функция принимает аргумент со значением z-index из текущего контекста.
+     */
+    children: (value: number) => ReactNode;
+    /**
+     * Исходное значение для z-index.
+     * @default 5
+     */
+    value?: number;
+};
+declare const Stack: FC<StackProps>;
+declare const PORTAL_CONTAINER_ATTRIBUTE = "alfa-portal-container";
+declare const getDefaultPortalContainer: () => Element;
+declare function setRef<T>(ref: RefObject<T> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+type SavedStyle = {
+    value: string;
+    key: string;
+    el: HTMLElement;
+};
+type RestoreStyle = {
+    container: HTMLElement;
+    modals: number;
+    styles: SavedStyle[];
+};
+declare class ModalStore {
+    private readonly restoreStyles;
+    constructor();
+    getRestoreStyles: () => RestoreStyle[];
+}
+declare const getModalStore: () => ModalStore;
+declare class GlobalStore {
+    private readonly modalStore;
+    constructor();
+    getModalStore: () => ModalStore;
+}
+export { BaseModalProps, BaseModalContext, BaseModal, isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer, stackingOrder, StackingContext, StackProps, Stack, PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef, SavedStyle, getModalStore, GlobalStore };

package/calendar/cssm/index.d.ts

@@ -2,4 +2,5 @@ export * from "./Component";
 export { usePeriod, usePeriodWithReset } from "./usePeriod";
 export { useCalendar } from "./useCalendar";
 export * from "./components/period-slider/index";
+export * from "./components/calendar-mobile/index";
 export { russianWeekDay, dateInLimits, limitDate, monthName, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, SUNDAY_INDEX, WEEKDAYS, DATE_FORMAT } from "./utils";

package/calendar/cssm/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-ce870b46.js');
+require('./tslib.es6-f8106a15.js');
 require('react');
 require('classnames');
 require('date-fns/startOfDay');
@@ -65,13 +65,17 @@ require('date-fns/setYear');
 require('date-fns/subYears');
 require('react-merge-refs');
 var useCalendar = require('./useCalendar.js');
-require('./index.module.css');
 require('@alfalab/icons-glyph/ChevronDownCompactSIcon');
 require('./components/month-year-header/index.module.css');
 require('./components/month-year-header/Component.js');
+require('./index.module.css');
 var Component = require('./Component.js');
 require('date-fns/differenceInDays');
 var usePeriod = require('./usePeriod.js');
+require('react-virtuoso');
+require('../../modal/cssm/mobile');
+require('./components/calendar-mobile/index.module.css');
+var components_calendarMobile_Component = require('./components/calendar-mobile/Component.js');
 
 
 
@@ -91,3 +95,4 @@ exports.useCalendar = useCalendar.useCalendar;
 exports.Calendar = Component.Calendar;
 exports.usePeriod = usePeriod.usePeriod;
 exports.usePeriodWithReset = usePeriod.usePeriodWithReset;
+exports.CalendarMobile = components_calendarMobile_Component.CalendarMobile;

package/calendar/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);
@@ -780,6 +793,15 @@
         height: 320px
 }
     }
+.component.responsive {
+        width: 100%
+    }
+.component.responsive .period {
+            width: 100%;
+        }
+.component.responsive .monthYear {
+            width: 100%;
+        }
 .container {
     display: flex;
     flex-direction: column;

package/calendar/cssm/typings.d.ts

@@ -4,6 +4,7 @@ type Day = {
     disabled?: boolean;
     event?: boolean;
     selected?: boolean;
+    holiday?: boolean;
 };
 type Month = {
     date: Date;

package/calendar/cssm/useCalendar.d.ts

@@ -31,9 +31,13 @@ type UseCalendarProps = {
      */
     events?: Array<Date | number>;
     /**
-     * Список выходных дней
+     * Список отключенных для выбора дней
      */
     offDays?: Array<Date | number>;
+    /**
+     * Список выходных дней
+     */
+    holidays?: Array<Date | number>;
     /**
      * Обработчик изменения месяца (или года)
      */
@@ -43,7 +47,7 @@ type UseCalendarProps = {
      */
     onChange?: (date: number) => void;
 };
-declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, onMonthChange, onChange, }: UseCalendarProps): {
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, onMonthChange, onChange, }: UseCalendarProps): {
     activeMonth: Date;
     weeks: Day[][];
     months: Month[];
@@ -57,11 +61,11 @@ declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, sele
     getDayProps: (day: Day) => {
         'data-date': number;
         'aria-selected': boolean | undefined;
-        ref: (node: HTMLButtonElement) => void;
+        ref: (node: HTMLTableDataCellElement) => void;
         tabIndex: number;
-        onMouseEnter: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onMouseEnter: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
         onMouseLeave: () => void;
-        onClick: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void;
+        onClick: (event: MouseEvent<HTMLTableDataCellElement, globalThis.MouseEvent>) => void;
     };
     getMonthProps: (month: Month) => {
         'data-date': number;

package/calendar/cssm/useCalendar.js

@@ -43,7 +43,7 @@ var subYears__default = /*#__PURE__*/_interopDefaultLegacy(subYears);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
 function useCalendar(_a) {
-    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
+    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
     var _c = React.useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
     var _d = React.useState(), highlighted = _d[0], setHighlighted = _d[1];
     var uncontrolled = month === undefined;
@@ -56,7 +56,17 @@ function useCalendar(_a) {
     var canSetNextMonth = maxMonth ? activeMonth < maxMonth : true;
     var eventsMap = React.useMemo(function () { return utils.dateArrayToHashTable(events || []); }, [events]);
     var offDaysMap = React.useMemo(function () { return utils.dateArrayToHashTable(offDays || []); }, [offDays]);
-    var weeks = React.useMemo(function () { return utils.generateWeeks(activeMonth, { minDate: minDate, maxDate: maxDate, selected: selected, eventsMap: eventsMap, offDaysMap: offDaysMap }); }, [maxDate, minDate, selected, activeMonth, eventsMap, offDaysMap]);
+    var holidaysMap = React.useMemo(function () { return utils.dateArrayToHashTable(holidays || []); }, [holidays]);
+    var weeks = React.useMemo(function () {
+        return utils.generateWeeks(activeMonth, {
+            minDate: minDate,
+            maxDate: maxDate,
+            selected: selected,
+            eventsMap: eventsMap,
+            offDaysMap: offDaysMap,
+            holidaysMap: holidaysMap,
+        });
+    }, [maxDate, minDate, selected, activeMonth, eventsMap, offDaysMap, holidaysMap]);
     var months = React.useMemo(function () { return utils.generateMonths(activeMonth, { minMonth: minMonth, maxMonth: maxMonth }); }, [
         minMonth,
         maxMonth,
@@ -196,7 +206,8 @@ function useCalendar(_a) {
         if (date && onChange) {
             onChange(+date);
         }
-    }, [onChange]);
+        handleDayMouseLeave();
+    }, [onChange, handleDayMouseLeave]);
     var daysControls = React.useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },
         ArrowRight: function () { return focusDay('next'); },

package/calendar/cssm/utils.d.ts

@@ -19,6 +19,7 @@ declare function generateWeeks(month: Date, options: {
     selected?: Date;
     eventsMap?: SpecialDays;
     offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
 }): Day[][];
 /**
  * Возвращает массив с месяцами для переданного года
@@ -40,6 +41,7 @@ declare function buildDay(day: Date, options: {
     selected?: Date;
     eventsMap?: SpecialDays;
     offDaysMap?: SpecialDays;
+    holidaysMap?: SpecialDays;
 }): Day;
 /**
  * Добавляет метаданные для переданного месяца

package/calendar/cssm/utils.js

@@ -113,13 +113,14 @@ function generateYears(minYear, maxYear) {
  * Добавляет метаданные для переданного дня
  */
 function buildDay(day, options) {
-    var minDate = options.minDate, maxDate = options.maxDate, selected = options.selected, _a = options.eventsMap, eventsMap = _a === void 0 ? {} : _a, _b = options.offDaysMap, offDaysMap = _b === void 0 ? {} : _b;
+    var minDate = options.minDate, maxDate = options.maxDate, selected = options.selected, _a = options.eventsMap, eventsMap = _a === void 0 ? {} : _a, _b = options.offDaysMap, offDaysMap = _b === void 0 ? {} : _b, _c = options.holidaysMap, holidaysMap = _c === void 0 ? {} : _c;
     var off = offDaysMap[day.getTime()];
     var disabled = (minDate && isBefore__default['default'](day, minDate)) || (maxDate && isAfter__default['default'](day, maxDate));
     return {
         date: day,
         disabled: disabled || off,
         event: eventsMap[day.getTime()],
+        holiday: holidaysMap[day.getTime()],
         selected: selected && isSameDay__default['default'](day, selected),
     };
 }

package/calendar/cssm/vars.css

@@ -3,8 +3,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);
 
@@ -24,6 +34,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/esm/Component.d.ts

@@ -15,14 +15,6 @@ type CalendarProps = {
      * Вид шапки — месяц и год или только месяц
      */
     selectorView?: SelectorView;
-    /**
-     * Возможность выбора месяца и года, если selectorView 'month-only'
-     */
-    isMonthAndYearSelectable?: boolean;
-    /**
-     * Отображать ли текущий год, если isMonthAndYearSelectable true
-     */
-    showCurrentYearSelector?: boolean;
     /**
      * Выбранная дата (timestamp)
      */
@@ -60,9 +52,13 @@ type CalendarProps = {
      */
     events?: Array<Date | number>;
     /**
-     * Список выходных
+     * Список отключенных для выбора дней.
      */
     offDays?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    holidays?: Array<Date | number>;
     /**
      * Обработчик изменения месяца (или года)
      */
@@ -70,7 +66,7 @@ type CalendarProps = {
     /**
      * Обработчик выбора даты
      */
-    onChange?: (date: number) => void;
+    onChange?: (date?: number) => void;
     /**
      * Обработчик нажатия на кнопку месяца
      */
@@ -83,6 +79,14 @@ type CalendarProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Нужно ли рендерить шапку календаря
+     */
+    hasHeader?: boolean;
+    /**
+     * Должен ли календарь подстраиваться под ширину родителя.
+     */
+    responsive?: boolean;
 };
 declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
 export { CalendarProps, Calendar };