@alfalab/core-components 47.15.0-beta.0 → 47.15.0

package/button/moderncssm/vars.css

@@ -0,0 +1,83 @@
+/* */
+
+:root {
+    /* misc */
+
+    /* border-radius desktop */
+
+    /* primary */
+
+    /* accent */
+
+    /* secondary */
+
+    /* tertiary */
+
+    /* outlined */
+
+    /* ghost */
+
+    /* text */
+
+    /* link */
+
+    /* transparent */
+
+    /* loader */
+
+    /* primary inverted */
+
+    /* accent inverted */
+
+    /* secondary inverted */
+
+    /* tertiary inverted */
+
+    /* outlined inverted */
+
+    /* ghost inverted */
+
+    /* text inverted */
+
+    /* link inverted */
+
+    /* transparent inverted */
+
+    /* loader inverted */
+
+    /* border-radius mobile */
+
+    /* primary mobile */
+
+    /* primary inverted mobile */
+
+    /* secondary mobile */
+
+    /* secondary inverted mobile */
+
+    /* tertiary mobile */
+
+    /* tertiary inverted mobile */
+
+    /* outlined mobile */
+
+    /* outlined inverted mobile */
+
+    /* link mobile */
+
+    /* link inverted mobile */
+
+    /* transparent mobile */
+
+    /* transparent inverted mobile */
+
+    /* ghost mobile */
+
+    /* ghost mobile inverted */
+
+    /* text mobile */
+
+    /* text mobile inverted */
+
+    /* loader mobile */
+}

package/calendar/moderncssm/Component.responsive.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import React from 'react';
+import { CalendarMobileProps } from "./components/calendar-mobile/index";
+import { CalendarDesktopProps } from "./desktop/index";
+type ResponsiveCalendarProps = CalendarDesktopProps & CalendarMobileProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean);
+};
+declare const CalendarResponsive: React.ForwardRefExoticComponent<CalendarDesktopProps & {
+    title?: string | undefined;
+    open: boolean;
+    onClose?: (() => void) | undefined;
+    allowSelectionFromEmptyRange?: boolean | undefined;
+    hasHeader?: boolean | undefined;
+    onApply?: (() => void) | undefined;
+    clickableMonth?: boolean | undefined;
+} & {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number | undefined;
+    /**
+     * Значение по-умолчанию для хука useMatchMedia
+     */
+    defaultMatchMediaValue?: boolean | (() => boolean) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { ResponsiveCalendarProps, CalendarResponsive };

package/calendar/moderncssm/Component.responsive.js

@@ -0,0 +1,91 @@
+import React, { forwardRef } from 'react';
+import { useMatchMedia } from '../../mq/moderncssm';
+import { CalendarMobile } from './components/calendar-mobile/Component.js';
+import { CalendarDesktop } from './desktop/Component.desktop.js';
+import 'react-merge-refs';
+import 'react-virtuoso';
+import '@juggle/resize-observer';
+import 'classnames';
+import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
+import 'date-fns/isSameDay';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import '../../button/moderncssm/mobile';
+import '../../modal/moderncssm/mobile';
+import '../../shared/moderncssm';
+import '../../typography/moderncssm';
+import './useCalendar.js';
+import 'date-fns/addMonths';
+import 'date-fns/addYears';
+import 'date-fns/isSameYear';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import './utils.js';
+import 'date-fns/addDays';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/format';
+import 'date-fns/isBefore';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import './useRange.js';
+import './usePeriod.js';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
+import './components/days-table/Component.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import '../../button/moderncssm/desktop';
+import './components/days-table/index.module.css';
+import './components/calendar-mobile/backdrop-transitions.module.css';
+import './components/calendar-mobile/index.module.css';
+import './components/calendar-mobile/transitions.module.css';
+import './components/header/Component.js';
+import './components/header/index.module.css';
+import './components/month-year-header/Component.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import './components/select-button/Component.js';
+import './components/select-button/index.module.css';
+import './components/month-year-header/index.module.css';
+import './components/months-table/Component.js';
+import './components/months-table/index.module.css';
+import './components/period-slider/Component.js';
+import '../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import './components/period-slider/utils.js';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+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 './components/period-slider/index.module.css';
+import './components/years-table/Component.js';
+import 'date-fns/isThisYear';
+import './components/years-table/index.module.css';
+import './desktop/desktop.module.css';
+
+const CalendarResponsive = forwardRef(({ breakpoint = 1024, defaultMatchMediaValue, ...restProps }, ref) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(CalendarDesktop, { ...restProps, ref: ref })) : (React.createElement(CalendarMobile, { ...restProps, ref: ref }));
+});
+CalendarResponsive.displayName = 'CalendarResponsive';
+
+export { CalendarResponsive };

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import React from 'react';
+declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount, dayAddons, shape, scrollableContainer, clickableMonth, }: {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & {
+    /**
+     * FIXME нужно сделать для компонента CalendarMonthOnlyView отдельный тип пропсов, т.к. тип CalendarContentProps intersection для типа CalendarMobileProps
+     * FIXME это приводит к тому, что в доку сторибука попадают типы пропсов, которые нужны для работы компонента CalendarMonthOnlyView, но не нужны для компонента CalendarMobile
+     * TODO Вынести компонент CalendarMonthOnlyView в отдельный файл
+     */
+    clickableMonth?: boolean | undefined;
+}) => React.JSX.Element;
+declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
+declare const CalendarMobile: React.ForwardRefExoticComponent<{
+    title?: string | undefined;
+    open: boolean;
+    onClose?: (() => void) | undefined;
+    allowSelectionFromEmptyRange?: boolean | undefined;
+    hasHeader?: boolean | undefined;
+    onApply?: (() => void) | undefined;
+    clickableMonth?: boolean | undefined;
+} & {
+    onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
+    yearsAmount?: number | undefined;
+    scrollableContainer?: HTMLElement | undefined;
+} & Omit<import("../../desktop/index").CalendarDesktopProps, ("className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector") | ("contentClassName" | "headerClassName")> & Pick<import("../../desktop/index").CalendarDesktopProps, "className" | "dataTestId" | "hasHeader" | "defaultView" | "selectorView" | "rangeComplete" | "onMonthChange" | "onYearClick" | "onPeriodClick" | "responsive" | "showCurrentYearSelector"> & React.RefAttributes<HTMLDivElement>>;
+export { CalendarMonthOnlyView, CalendarMonthOnlyViewHeader, CalendarMobile };

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

@@ -0,0 +1,288 @@
+import React, { forwardRef, useState, useMemo, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { Virtuoso } from 'react-virtuoso';
+import { ResizeObserver } from '@juggle/resize-observer';
+import cn from 'classnames';
+import endOfDay from 'date-fns/endOfDay';
+import isAfter from 'date-fns/isAfter';
+import isSameDay from 'date-fns/isSameDay';
+import isSameMonth from 'date-fns/isSameMonth';
+import isThisMonth from 'date-fns/isThisMonth';
+import lastDayOfMonth from 'date-fns/lastDayOfMonth';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import { ButtonMobile } from '../../../../button/moderncssm/mobile';
+import { ModalMobile } from '../../../../modal/moderncssm/mobile';
+import { getDataTestId } from '../../../../shared/moderncssm';
+import { Typography } from '../../../../typography/moderncssm';
+import { CalendarDesktop } from '../../desktop/Component.desktop.js';
+import { useCalendar } from '../../useCalendar.js';
+import { useRange } from '../../useRange.js';
+import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, WEEKDAYS, isRangeValue } from '../../utils.js';
+import { DaysTable } from '../days-table/Component.js';
+import backdropTransitionStyles from './backdrop-transitions.module.css';
+import styles from './index.module.css';
+import transitionStyles from './transitions.module.css';
+import '@alfalab/hooks';
+import '../header/Component.js';
+import '../header/index.module.css';
+import '../month-year-header/Component.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../select-button/Component.js';
+import '../../../../button/moderncssm/desktop';
+import '../select-button/index.module.css';
+import '../month-year-header/index.module.css';
+import '../months-table/Component.js';
+import '../months-table/index.module.css';
+import '../period-slider/Component.js';
+import 'date-fns/endOfWeek';
+import 'date-fns/startOfWeek';
+import '../../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import '../period-slider/utils.js';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/differenceInDays';
+import 'date-fns/endOfMonth';
+import 'date-fns/endOfQuarter';
+import 'date-fns/endOfYear';
+import 'date-fns/getQuarter';
+import 'date-fns/getYear';
+import 'date-fns/isToday';
+import 'date-fns/isYesterday';
+import 'date-fns/startOfQuarter';
+import 'date-fns/startOfYear';
+import '../period-slider/index.module.css';
+import '../years-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '../years-table/index.module.css';
+import '../../desktop/desktop.module.css';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import '../../usePeriod.js';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/format';
+import 'date-fns/isBefore';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isWithinInterval';
+import '../days-table/index.module.css';
+
+// ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
+if (typeof window !== 'undefined' && !window.ResizeObserver) {
+    window.ResizeObserver = ResizeObserver;
+}
+const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarification', month: monthTimestamp, minDate: minDateTimestamp, maxDate: maxDateTimestamp, defaultMonth: defaultMonthTimestamp, offDays, events, holidays, onChange, onMonthTitleClick, selectedFrom, selectedTo, yearsAmount = 3, dayAddons, shape = 'rounded', scrollableContainer, clickableMonth, }) => {
+    const range = useRange({
+        mode,
+        value,
+        selectedFrom,
+        selectedTo,
+        rangeBehavior,
+        onChange,
+    });
+    const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
+    const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
+    const maxDate = useMemo(() => {
+        // блокируем последующие дни после текущего
+        if (clickableMonth && !maxDateTimestamp) {
+            return new Date();
+        }
+        return maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined;
+    }, [maxDateTimestamp, clickableMonth]);
+    const selected = useMemo(() => (range.value ? new Date(range.value) : undefined), [range.value]);
+    const startingDate = useRef(range.value);
+    const defaultMonth = useMemo(() => startOfMonth(selected ||
+        limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp)), [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
+    const { activeMonth, highlighted, getDayProps } = useCalendar({
+        month,
+        defaultMonth,
+        view: 'months',
+        minDate,
+        maxDate,
+        selected,
+        offDays,
+        events,
+        onChange: range.onChange,
+        dayAddons,
+    });
+    const activeMonths = useMemo(() => {
+        const eventsMap = dateArrayToHashTable(events || []);
+        const offDaysMap = dateArrayToHashTable(offDays || []);
+        const holidaysMap = dateArrayToHashTable(holidays || []);
+        const dayAddonsMap = addonArrayToHashTable(dayAddons || []);
+        const prevMonths = [];
+        const nextMonths = [];
+        const date = startingDate.current ? new Date(startingDate.current) : new Date();
+        const currentYear = date.getFullYear();
+        const currYearMonths = generateMonths(date, {});
+        for (let i = 0; i < yearsAmount; i++) {
+            const prevYear = date.setFullYear(currentYear - (i + 1));
+            const nextYear = date.setFullYear(currentYear + (i + 1));
+            const prevYearMonths = generateMonths(new Date(prevYear), {});
+            const nextYearMonths = generateMonths(new Date(nextYear), {});
+            prevMonths.unshift(...prevYearMonths);
+            nextMonths.push(...nextYearMonths);
+        }
+        const generatedMonths = [...prevMonths, ...currYearMonths, ...nextMonths];
+        return generatedMonths.map((item) => ({
+            ...item,
+            weeks: generateWeeks(item.date, {
+                minDate,
+                maxDate,
+                selected,
+                eventsMap,
+                offDaysMap,
+                holidaysMap,
+                dayAddonsMap,
+            }),
+            title: `${monthName(item.date)} ${item.date.getFullYear()}`,
+        }));
+    }, [events, offDays, holidays, dayAddons, minDate, maxDate, yearsAmount, selected]);
+    const initialMonthIndex = useMemo(() => {
+        const date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
+        return activeMonths.findIndex((m) => isSameMonth(date, m.date));
+    }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
+    // заголовок должен становиться активным если выбран весь доступный период в месяце
+    const isMonthActive = (currentMonthIndex) => {
+        if (value && isRangeValue(value)) {
+            const { date: initialMonthDate } = activeMonths[initialMonthIndex];
+            const { date: currentMonthDate } = activeMonths[currentMonthIndex];
+            const firstAvailableDayOfMonth = startOfMonth(initialMonthDate).getTime();
+            /**
+             * последний доступный день месяца в timestamp
+             * представлен в виде последнего календарного дня, либо в виде текущей даты для актуального месяца
+             */
+            const lastAvailableDayOfMonth = isThisMonth(initialMonthDate)
+                ? startOfDay(new Date()).getTime()
+                : lastDayOfMonth(initialMonthDate).getTime();
+            const { dateFrom, dateTo } = value;
+            if (dateFrom &&
+                dateTo &&
+                isSameMonth(initialMonthDate, currentMonthDate) &&
+                isSameDay(firstAvailableDayOfMonth, dateFrom) &&
+                isSameDay(lastAvailableDayOfMonth, dateTo)) {
+                return true;
+            }
+        }
+        return false;
+    };
+    const handleClickMonthLabel = (index) => {
+        if (onChange) {
+            const { date } = activeMonths[index];
+            const firstAvailableDayOfMonth = startOfMonth(date).getTime();
+            const lastAvailableDayOfMonth = isThisMonth(date)
+                ? startOfDay(new Date()).getTime()
+                : lastDayOfMonth(date).getTime();
+            if (isMonthActive(index)) {
+                onChange();
+            }
+            else {
+                onChange(firstAvailableDayOfMonth, lastAvailableDayOfMonth);
+            }
+        }
+    };
+    const getMonthLabel = (index, isClickableMonth) => {
+        if (isClickableMonth) {
+            return (React.createElement(Typography.Text, { className: styles.monthTitle, view: 'primary-small', color: 'primary' }, activeMonths[index].title));
+        }
+        return `\u00A0${activeMonths[index].title}\u00A0`;
+    };
+    const renderMonth = (index) => {
+        const isAfterDate = isAfter(activeMonths[index].date, activeMonth);
+        return (React.createElement("div", { className: styles.daysTable, id: `month-${index}` },
+            onMonthTitleClick ? (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React.createElement("span", { className: styles.month, onClick: onMonthTitleClick, tabIndex: 0, role: 'button' }, activeMonths[index].title)) : (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            React.createElement("span", { className: cn(styles.month, {
+                    ...(clickableMonth && {
+                        [styles.clickableMonth]: true,
+                        [styles.rectangular]: shape === 'rectangular',
+                        [styles.active]: isMonthActive(index),
+                        [styles.disabled]: isAfterDate,
+                    }),
+                }), ...(clickableMonth && { onClick: () => handleClickMonthLabel(index) }) }, getMonthLabel(index, clickableMonth))),
+            React.createElement(DaysTable, { withTransition: false, weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: range.selectedFrom, selectedTo: range.selectedTo, getDayProps: getDayProps, highlighted: highlighted, hasHeader: false, responsive: true, shape: shape })));
+    };
+    return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex ?? 0, align: 'center' }, increaseViewportBy: 500, itemSize: (el) => el.getBoundingClientRect().height + 32, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
+};
+const CalendarMonthOnlyViewHeader = () => (React.createElement("table", { className: styles.dayNames },
+    React.createElement("thead", null,
+        React.createElement("tr", null, WEEKDAYS.map((dayName) => (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)))))));
+const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRange = false, className, defaultView = 'days', selectorView = 'full', value, selectedFrom, selectedTo, onChange, onMonthTitleClick, dataTestId, open, onClose, title = 'Календарь', yearsAmount = 3, onApply, clickableMonth, ...restProps }, ref) => {
+    const [modalRef, setModalRef] = useState();
+    const monthOnlyView = selectorView === 'month-only';
+    const handleClose = () => {
+        if (onClose)
+            onClose();
+    };
+    const handleApply = () => {
+        onApply?.();
+        handleClose?.();
+    };
+    const handleClear = () => {
+        if (onChange)
+            onChange();
+    };
+    const renderDayNames = () => (monthOnlyView ? React.createElement(CalendarMonthOnlyViewHeader, null) : null);
+    const renderContent = () => {
+        const commonProps = {
+            value,
+            onChange,
+            defaultView,
+            selectorView,
+            selectedFrom,
+            selectedTo,
+        };
+        if (monthOnlyView) {
+            return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, ...commonProps, ...restProps }));
+        }
+        return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile'), ...commonProps, ...restProps }));
+    };
+    const renderFooter = () => {
+        const valueFrom = isRangeValue(value) ? value.dateFrom : selectedFrom;
+        const valueTo = isRangeValue(value) ? value.dateTo : selectedTo;
+        if (valueFrom || valueTo) {
+            let selectButtonDisabled = !valueFrom || !valueTo;
+            if (allowSelectionFromEmptyRange) {
+                selectButtonDisabled = !valueFrom;
+            }
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClear, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C"),
+                React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, disabled: selectButtonDisabled, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C")));
+        }
+        /**
+         * value может быть числом и объектом, для текущего кейса проверяем на typeof number
+         * иначе может приводить к багу, когда выводится кнопка "Выбрать" для дефолтного значения календаря
+         */
+        if (value && typeof value === 'number') {
+            return (React.createElement(ButtonMobile, { view: 'primary', size: 'm', block: true, onClick: handleApply, dataTestId: getDataTestId(dataTestId, 'btn-apply') }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+        }
+        return (React.createElement(ButtonMobile, { view: 'secondary', size: 'm', block: true, onClick: handleClose, dataTestId: getDataTestId(dataTestId, 'btn-reset') }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+    };
+    return (React.createElement(ModalMobile, { open: open, onClose: handleClose, ref: mergeRefs([(node) => setModalRef(node), ref]), className: className, wrapperClassName: styles.wrapper, transitionProps: {
+            timeout: 360,
+            classNames: transitionStyles,
+        }, backdropProps: {
+            transitionClassNames: backdropTransitionStyles,
+            timeout: 360,
+        }, dataTestId: dataTestId },
+        hasHeader && (React.createElement(ModalMobile.Header, { hasCloser: true, title: title, sticky: true, bottomAddons: renderDayNames(), className: cn({ [styles.withZIndex]: selectorView === 'full' }) })),
+        React.createElement(ModalMobile.Content, { className: styles.contentModal, flex: true }, renderContent()),
+        React.createElement(ModalMobile.Footer, { sticky: true, className: cn({ [styles.withZIndex]: selectorView === 'full' }) }, renderFooter())));
+});
+
+export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader };

package/calendar/moderncssm/components/calendar-mobile/backdrop-transitions.module.css

@@ -0,0 +1,25 @@
+/* */
+
+.appear,
+.enter {
+    background-color: transparent;
+}
+
+.appearActive,
+.enterActive,
+.appearDone,
+.enterDone {
+    background-color: var(--color-light-neutral-translucent-300);
+    transition: background-color 80ms linear;
+}
+
+.exit {
+    background-color: var(--color-light-neutral-translucent-300);
+}
+
+.exitActive,
+.exitDone {
+    background-color: transparent;
+    transition: background-color 80ms linear;
+    transition-delay: 280ms;
+}

package/calendar/moderncssm/components/calendar-mobile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component";
+export * from "./typings";

package/calendar/moderncssm/components/calendar-mobile/index.js

@@ -0,0 +1,82 @@
+export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader } from './Component.js';
+import 'react';
+import 'react-merge-refs';
+import 'react-virtuoso';
+import '@juggle/resize-observer';
+import 'classnames';
+import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
+import 'date-fns/isSameDay';
+import 'date-fns/isSameMonth';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
+import '../../../../button/moderncssm/mobile';
+import '../../../../modal/moderncssm/mobile';
+import '../../../../shared/moderncssm';
+import '../../../../typography/moderncssm';
+import '../../desktop/Component.desktop.js';
+import '@alfalab/hooks';
+import '../days-table/Component.js';
+import 'react-transition-group';
+import 'date-fns/isEqual';
+import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isToday';
+import 'date-fns/isWithinInterval';
+import '../../../../button/moderncssm/desktop';
+import '../../utils.js';
+import 'date-fns/addDays';
+import 'date-fns/addMonths';
+import 'date-fns/eachDayOfInterval';
+import 'date-fns/eachMonthOfInterval';
+import 'date-fns/eachYearOfInterval';
+import 'date-fns/endOfWeek';
+import 'date-fns/endOfYear';
+import 'date-fns/format';
+import 'date-fns/isBefore';
+import 'date-fns/max';
+import 'date-fns/min';
+import 'date-fns/parse';
+import 'date-fns/startOfWeek';
+import 'date-fns/startOfYear';
+import 'date-fns/subDays';
+import 'date-fns/subMonths';
+import '../days-table/index.module.css';
+import '../header/Component.js';
+import '../header/index.module.css';
+import '../month-year-header/Component.js';
+import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
+import '../select-button/Component.js';
+import '../select-button/index.module.css';
+import '../month-year-header/index.module.css';
+import '../months-table/Component.js';
+import '../months-table/index.module.css';
+import '../period-slider/Component.js';
+import '../../../../icon-button/moderncssm';
+import '@alfalab/icons-glyph/ChevronBackMIcon';
+import '../period-slider/utils.js';
+import 'date-fns/addQuarters';
+import 'date-fns/addWeeks';
+import 'date-fns/addYears';
+import 'date-fns/differenceInDays';
+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/index.module.css';
+import '../years-table/Component.js';
+import 'date-fns/isSameYear';
+import 'date-fns/isThisYear';
+import '../years-table/index.module.css';
+import '../../useCalendar.js';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import '../../useRange.js';
+import '../../usePeriod.js';
+import '../../desktop/desktop.module.css';
+import './backdrop-transitions.module.css';
+import './index.module.css';
+import './transitions.module.css';