@alfalab/core-components 27.7.1-beta.0 → 27.9.0-beta.0

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

@@ -12,7 +12,6 @@
 :root {
     --calendar-height: 340px;
     --calendar-width: 344px;
-    --calendar-inner-width: 280px;
     --calendar-mobile-inner-width: 256px;
 
     /* Кнопки выбора месяцев и годов */
@@ -71,7 +70,7 @@
 }
     }
 .period {
-    width: var(--calendar-inner-width)
+    width: 100%
 }
 @media (max-width: 374px) {
 .period {
@@ -81,7 +80,7 @@
 }
     }
 .monthYear {
-    width: var(--calendar-inner-width)
+    width: 100%
 }
 @media (max-width: 374px) {
 .monthYear {

package/calendar/cssm/useCalendar.d.ts

@@ -57,11 +57,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

@@ -196,7 +196,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/esm/Component.d.ts

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

package/calendar/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __assign } from './tslib.es6-4a77933a.js';
+import { _ as __assign } from './tslib.es6-39912b88.js';
 import React, { forwardRef, useState, useMemo, useCallback } from 'react';
 import cn from 'classnames';
 import startOfDay from 'date-fns/startOfDay';
@@ -60,14 +60,14 @@ import { useCalendar } from './useCalendar.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import { MonthYearHeader } from './components/month-year-header/Component.js';
 
-var styles = {"component":"calendar__component_qbnvz","container":"calendar__container_qbnvz","sixWeeks":"calendar__sixWeeks_qbnvz","period":"calendar__period_qbnvz","monthYear":"calendar__monthYear_qbnvz"};
+var styles = {"component":"calendar__component_bfg73","container":"calendar__container_bfg73","sixWeeks":"calendar__sixWeeks_bfg73","period":"calendar__period_bfg73","monthYear":"calendar__monthYear_bfg73"};
 require('./index.css');
 
 var Calendar = forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, isMonthAndYearSelectable = _a.isMonthAndYearSelectable, showCurrentYearSelector = _a.showCurrentYearSelector, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
-    var _f = useState(defaultView), view = _f[0], setView = _f[1];
-    var _g = useState(false), scrolled = _g[0], setScrolled = _g[1];
+    var className = _a.className, _c = _a.defaultView, defaultView = _c === void 0 ? 'days' : _c, _d = _a.selectorView, selectorView = _d === void 0 ? 'full' : _d, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _e = _a.defaultMonth, defaultMonthTimestamp = _e === void 0 ? +new Date() : _e, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f;
+    var _g = useState(defaultView), view = _g[0], setView = _g[1];
+    var _h = useState(false), scrolled = _h[0], setScrolled = _h[1];
     var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = useMemo(function () {
         return startOfMonth(selected ||
@@ -82,7 +82,7 @@ var Calendar = forwardRef(function (_a, ref) {
     var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [
         maxDateTimestamp,
     ]);
-    var _h = useCalendar({
+    var _j = useCalendar({
         month: month,
         defaultMonth: defaultMonth,
         view: view,
@@ -93,7 +93,7 @@ var Calendar = forwardRef(function (_a, ref) {
         events: events,
         onChange: onChange,
         onMonthChange: onMonthChange,
-    }), activeMonth = _h.activeMonth, weeks = _h.weeks, months = _h.months, years = _h.years, canSetPrevMonth = _h.canSetPrevMonth, canSetNextMonth = _h.canSetNextMonth, setMonthByDate = _h.setMonthByDate, setPrevMonth = _h.setPrevMonth, setNextMonth = _h.setNextMonth, highlighted = _h.highlighted, getDayProps = _h.getDayProps, getMonthProps = _h.getMonthProps, getYearProps = _h.getYearProps, getRootProps = _h.getRootProps;
+    }), activeMonth = _j.activeMonth, weeks = _j.weeks, months = _j.months, years = _j.years, canSetPrevMonth = _j.canSetPrevMonth, canSetNextMonth = _j.canSetNextMonth, setMonthByDate = _j.setMonthByDate, setPrevMonth = _j.setPrevMonth, setNextMonth = _j.setNextMonth, highlighted = _j.highlighted, getDayProps = _j.getDayProps, getMonthProps = _j.getMonthProps, getYearProps = _j.getYearProps, getRootProps = _j.getRootProps;
     var toggleView = useCallback(function (newView) {
         setView(view === newView ? 'days' : newView);
     }, [view]);
@@ -134,7 +134,7 @@ var Calendar = forwardRef(function (_a, ref) {
     return (React.createElement("div", __assign({}, getRootProps({ ref: ref }), { className: cn('cc-calendar', styles.component, className, (_b = {},
             _b[styles.sixWeeks] = weeks.length === 6,
             _b)), "data-test-id": dataTestId }),
-        React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, isMonthAndYearSelectable: isMonthAndYearSelectable, showCurrentYearSelector: showCurrentYearSelector, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick, onMonthClick: handleMonthClick, onYearClick: handleYearClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick }))),
+        hasHeader && (React.createElement(Header, { view: selectorView, withShadow: scrolled }, selectorView === 'month-only' ? (React.createElement(PeriodSlider, { className: styles.period, value: activeMonth, periodType: 'month', prevArrowDisabled: !canSetPrevMonth, nextArrowDisabled: !canSetNextMonth, hideDisabledArrows: true, onPrevArrowClick: handlePrevArrowClick, onNextArrowClick: handleNextArrowClick })) : (React.createElement(MonthYearHeader, { className: styles.monthYear, value: activeMonth, onMonthClick: handleMonthClick, onYearClick: handleYearClick })))),
         React.createElement("div", { className: cn(styles.container, styles[view]) },
             view === 'days' && (React.createElement(DaysTable, { weeks: weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete })),
             view === 'months' && (React.createElement(MonthsTable, { selectedMonth: activeMonth, months: months, getMonthProps: getMonthProps })),

package/calendar/esm/Context-bdb4c6b9.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { BaseModalContext } from "./index-bdb4c6b9";
+declare const ModalContext: import("react").Context<BaseModalContext>;
+export { ModalContext };

package/calendar/esm/components/calendar-mobile/Component.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarProps } from "../../index";
+type CalendarMobileProps = CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: () => void;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number;
+};
+declare const CalendarMobile: React.ForwardRefExoticComponent<CalendarProps & {
+    /**
+     * Управление видимостью модалки
+     */
+    open: boolean;
+    /**
+     * Заголовок календаря
+     */
+    title?: string | undefined;
+    /**
+     * Обработчик закрытия модалки
+     */
+    onClose?: (() => void) | undefined;
+    /**
+     * Количество лет для генерации в обе стороны от текущего года
+     */
+    yearsAmount?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMobileProps, CalendarMobile };

package/calendar/esm/components/calendar-mobile/Component.js

@@ -0,0 +1,192 @@
+import { b as __spreadArrays } from '../../tslib.es6-39912b88.js';
+import React, { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import endOfDay from 'date-fns/endOfDay';
+import '@alfalab/hooks';
+import '../header/Component.js';
+import { Button } from '../../../../button/esm';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import 'react-transition-group';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfYear';
+import 'date-fns/endOfYear';
+import 'date-fns/isBefore';
+import 'date-fns/isAfter';
+import 'date-fns/min';
+import 'date-fns/max';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'date-fns/format';
+import 'date-fns/parse';
+import { limitDate, generateMonths, WEEKDAYS, monthName, generateWeeks } from '../../utils.js';
+import { DaysTable } from '../days-table/Component.js';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import '../select-button/Component.js';
+import '../months-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '../years-table/Component.js';
+import '../../../../icon-button/esm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import '../period-slider/utils.js';
+import '../period-slider/Component.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import 'react-merge-refs';
+import { useCalendar } from '../../useCalendar.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../month-year-header/Component.js';
+import { Calendar } from '../../Component.js';
+import 'date-fns/differenceInDays';
+import { Virtuoso } from 'react-virtuoso';
+import { ModalMobile } from '../../../../modal/esm/mobile';
+
+var styles = {"wrapper":"calendar__wrapper_czdzi","modalHeader":"calendar__modalHeader_czdzi","modalFooter":"calendar__modalFooter_czdzi","calendar":"calendar__calendar_czdzi","calendarHeader":"calendar__calendarHeader_czdzi","month":"calendar__month_czdzi","daysTable":"calendar__daysTable_czdzi","dayName":"calendar__dayName_czdzi"};
+require('./index.css');
+
+var CalendarMobile = forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.defaultView, defaultView = _b === void 0 ? 'days' : _b, _c = _a.selectorView, selectorView = _c === void 0 ? 'full' : _c, value = _a.value, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, _d = _a.defaultMonth, defaultMonthTimestamp = _d === void 0 ? +new Date() : _d, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, rangeComplete = _a.rangeComplete, offDays = _a.offDays, events = _a.events, onChange = _a.onChange, onMonthChange = _a.onMonthChange, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _e = _a.title, title = _e === void 0 ? 'Календарь' : _e, _f = _a.yearsAmount, yearsAmount = _f === void 0 ? 10 : _f;
+    var modalRef = useRef(null);
+    var initialMonthIndex = useMemo(function () {
+        var currentMonthIndex = new Date().getMonth();
+        return yearsAmount * 12 + currentMonthIndex;
+    }, [yearsAmount]);
+    var monthOnlyView = useMemo(function () { return selectorView === 'month-only'; }, [selectorView]);
+    var month = useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [
+        monthTimestamp,
+    ]);
+    var minDate = useMemo(function () { return (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined); }, [minDateTimestamp]);
+    var maxDate = useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [
+        maxDateTimestamp,
+    ]);
+    var selected = useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
+    var defaultMonth = useMemo(function () {
+        return startOfMonth(selected ||
+            limitDate(defaultMonthTimestamp, minDateTimestamp, maxDateTimestamp));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    var _g = useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: defaultView,
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        onChange: onChange,
+        onMonthChange: onMonthChange,
+    }), activeMonth = _g.activeMonth, months = _g.months, highlighted = _g.highlighted, getDayProps = _g.getDayProps;
+    var _h = useState(months), activeMonths = _h[0], setActiveMonths = _h[1];
+    var generateInitialMonths = useCallback(function () {
+        var prevMonths = [];
+        var nextMonths = [];
+        for (var i = 0; i < yearsAmount; i++) {
+            var prevYear = new Date().setFullYear(new Date().getFullYear() - (i + 1));
+            var nextYear = new Date().setFullYear(new Date().getFullYear() + (i + 1));
+            var prevYearMonths = generateMonths(new Date(prevYear), {});
+            var nextYearMonths = generateMonths(new Date(nextYear), {});
+            prevMonths.unshift.apply(prevMonths, prevYearMonths);
+            nextMonths.push.apply(nextMonths, nextYearMonths);
+        }
+        setActiveMonths(function (prevState) { return __spreadArrays(prevMonths, prevState, nextMonths); });
+    }, [yearsAmount]);
+    var handleClose = useCallback(function () {
+        if (onClose)
+            onClose();
+    }, [onClose]);
+    var handleClear = useCallback(function () {
+        if (onChange)
+            onChange();
+    }, [onChange]);
+    useEffect(function () {
+        generateInitialMonths();
+    }, [generateInitialMonths]);
+    var renderHeader = useCallback(function () { return (React.createElement("table", { className: styles.calendarHeader },
+        React.createElement("thead", null,
+            React.createElement("tr", null, WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); }, []);
+    var renderMonth = useCallback(function (index, key) {
+        return (React.createElement("div", { className: styles.daysTable, id: "month-" + index, key: key },
+            React.createElement("span", { className: styles.month }, monthName(activeMonths[index].date) + " " + activeMonths[index].date.getFullYear()),
+            React.createElement(DaysTable, { weeks: generateWeeks(activeMonths[index].date, {
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    selected: selected,
+                }), activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false })));
+    }, [
+        activeMonths,
+        minDate,
+        maxDate,
+        selected,
+        activeMonth,
+        selectedFrom,
+        selectedTo,
+        getDayProps,
+        highlighted,
+        rangeComplete,
+    ]);
+    var renderContent = useCallback(function () {
+        if (monthOnlyView) {
+            return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, overscan: { main: 1000, reverse: 1000 }, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
+        }
+        return (React.createElement(Calendar, { value: value, onChange: onChange, offDays: offDays, events: events, defaultView: defaultView, selectorView: selectorView, className: styles.calendar, onMonthClick: onMonthClick, onYearClick: onYearClick, selectedFrom: selectedFrom, selectedTo: selectedTo }));
+    }, [
+        monthOnlyView,
+        activeMonths,
+        selectedFrom,
+        selectedTo,
+        value,
+        onChange,
+        offDays,
+        events,
+        defaultView,
+        selectorView,
+        onMonthClick,
+        onYearClick,
+        renderMonth,
+        initialMonthIndex,
+    ]);
+    var renderFooter = useCallback(function () {
+        if (selectedFrom || selectedTo) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: !selectedFrom || !selectedTo }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"),
+                React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")));
+        }
+        if (value) {
+            return (React.createElement(Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+        }
+        return (React.createElement(Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+    }, [value, selectedFrom, selectedTo, handleClose, handleClear]);
+    return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
+        React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.wrapper },
+            React.createElement(ModalMobile.Header, { hasCloser: true, title: title, align: 'center', leftAddons: React.createElement("div", null), sticky: true, className: styles.modalHeader }),
+            monthOnlyView && renderHeader(),
+            React.createElement(ModalMobile.Content, { flex: true, className: styles.modalContent }, renderContent()),
+            React.createElement(ModalMobile.Footer, { sticky: true, className: styles.modalFooter }, renderFooter()))));
+});
+
+export { CalendarMobile };