@alfalab/core-components 47.26.7 → 47.26.8-beta.9323

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

@@ -0,0 +1,202 @@
+import React, { useMemo, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+import cn from 'classnames';
+import endOfDay from 'date-fns/endOfDay';
+import isAfter from 'date-fns/isAfter';
+import isSameMonth from 'date-fns/isSameMonth';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import { Typography } from '../../../../typography/moderncssm';
+import { useCalendar } from '../../useCalendar.js';
+import { useRange } from '../../useRange.js';
+import { limitDate, dateArrayToHashTable, addonArrayToHashTable, generateMonths, generateWeeks, monthName, isRangeValue, getMonthStartTimestamp, getMonthEndTimestamp } from '../../utils.js';
+import { DaysTable } from '../days-table/Component.js';
+import styles from './index.module.css';
+import 'react-merge-refs';
+import 'date-fns/addMonths';
+import 'date-fns/addYears';
+import 'date-fns/isSameDay';
+import 'date-fns/isSameYear';
+import 'date-fns/setYear';
+import 'date-fns/subYears';
+import '../../usePeriod.js';
+import 'date-fns/differenceInDays';
+import '@alfalab/hooks';
+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/isThisMonth';
+import 'date-fns/lastDayOfMonth';
+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 '../../../../shared/moderncssm';
+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 '../days-table/index.module.css';
+
+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();
+        const index = activeMonths.findIndex((m) => isSameMonth(date, m.date));
+        return Math.max(index, 0);
+    }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
+    // заголовок должен становиться активным, если выбран весь доступный период в месяце
+    const isMonthActive = (currentMonthIndex) => {
+        if (!value || !isRangeValue(value) || !value.dateFrom || !value.dateTo) {
+            return false;
+        }
+        const { dateFrom, dateTo } = value;
+        const { date: currentMonthDate } = activeMonths[currentMonthIndex];
+        const monthStartTimestamp = getMonthStartTimestamp(currentMonthDate);
+        const monthEndTimestamp = getMonthEndTimestamp(currentMonthDate);
+        // Проверяем, что выбранный диапазон полностью покрывает месяц
+        return dateFrom <= monthStartTimestamp && dateTo >= monthEndTimestamp;
+    };
+    const handleClickMonthLabel = (index) => {
+        if (!onChange)
+            return;
+        const { date: dateActiveMonths } = activeMonths[index];
+        // Вычисляем начало и конец месяца, по которому был произведен клик
+        const clickedMonthStartTimestamp = getMonthStartTimestamp(dateActiveMonths);
+        const clickedMonthEndTimestamp = getMonthEndTimestamp(dateActiveMonths);
+        // Если значение не определено или не является диапазоном, то устанавливаем новый диапазон
+        if (!value || !isRangeValue(value) || !value.dateFrom || !value.dateTo) {
+            onChange(clickedMonthStartTimestamp, clickedMonthEndTimestamp);
+            return;
+        }
+        // Выбранный диапазон дат
+        const { dateFrom, dateTo } = value;
+        const selectedRangeStartDate = new Date(dateFrom);
+        const selectedRangeEndDate = new Date(dateTo);
+        const selectedRangeStartTimestamp = getMonthStartTimestamp(selectedRangeStartDate);
+        const selectedRangeEndTimestamp = getMonthEndTimestamp(selectedRangeEndDate);
+        // Проверяем, является ли выбранный диапазон одним и тем же месяцем
+        const isSingleMonthSelected = isSameMonth(selectedRangeStartDate, selectedRangeEndDate) &&
+            dateFrom <= selectedRangeStartTimestamp &&
+            dateTo >= selectedRangeEndTimestamp;
+        // Проверяем, является ли кликнутый месяц таким же, что и выбранный диапазон
+        const isSameMonthClicked = isSameMonth(selectedRangeStartDate, dateActiveMonths);
+        // Проверяем, находится ли кликнутый месяц внутри выбранного диапазона
+        const isClickedMonthInsideRange = clickedMonthEndTimestamp >= selectedRangeStartTimestamp &&
+            clickedMonthStartTimestamp <= selectedRangeEndTimestamp;
+        // Проверяем находится ли выбранный диапазон в пределах кликнутого месяца
+        const isRangeWithinSingleMonth = selectedRangeStartTimestamp === dateFrom && selectedRangeEndTimestamp === dateTo;
+        if (isSingleMonthSelected && isSameMonthClicked) {
+            onChange();
+        }
+        else if (isClickedMonthInsideRange || !isRangeWithinSingleMonth) {
+            onChange(clickedMonthStartTimestamp, clickedMonthEndTimestamp);
+        }
+        else {
+            const newDateFrom = Math.min(selectedRangeStartTimestamp, clickedMonthStartTimestamp);
+            const newDateTo = Math.max(selectedRangeEndTimestamp, clickedMonthEndTimestamp);
+            onChange(newDateFrom, newDateTo);
+        }
+    };
+    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, maxDate ?? new Date());
+        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 }));
+};
+
+export { CalendarMonthOnlyView };

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

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

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

@@ -1,27 +1,22 @@
-export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader } from './Component.js';
+export { CalendarMobile, CalendarMonthOnlyViewHeader } from './Component.js';
+export { CalendarMonthOnlyView } from './calendarMonthOnlyView.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 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
 import '../days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../../../button/moderncssm/desktop';
@@ -34,7 +29,10 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
+import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -52,6 +50,7 @@ import '../select-button/index.module.css';
 import '../month-year-header/index.module.css';
 import '../month-year-header/mobile.module.css';
 import '../months-table/Component.js';
+import 'date-fns/isSameMonth';
 import '../months-table/index.module.css';
 import '../period-slider/Component.js';
 import '../../../../icon-button/moderncssm';
@@ -81,3 +80,5 @@ import '../../desktop/desktop.module.css';
 import './backdrop-transitions.module.css';
 import './index.module.css';
 import './transitions.module.css';
+import 'react-virtuoso';
+import '../../../../typography/moderncssm';

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

@@ -46,5 +46,20 @@ type CalendarMobileProps = {
      * При клике на месяц будут выбраны все доступные дни месяца
      */
     clickableMonth?: boolean;
+    /**
+     * Контент кнопки "Отмена"
+     * @default Отмена
+     */
+    cancelButtonContent?: string;
+    /**
+     * Контент кнопки "Выбрать"
+     * @default Выбрать
+     */
+    selectButtonContent?: string;
+    /**
+     * Контент кнопки "Сбросить"
+     * @default Сбросить
+     */
+    resetButtonContent?: string;
 } & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
 export { CalendarContentProps, CalendarMobileProps };

package/calendar/moderncssm/components/days-table/Component.js

@@ -22,6 +22,7 @@ import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/components/days-table/index.js

@@ -22,6 +22,7 @@ import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/components/month-year-header/Component.js

@@ -17,6 +17,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/components/month-year-header/index.js

@@ -15,6 +15,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/components/period-slider/Component.js

@@ -20,6 +20,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/components/period-slider/index.js

@@ -20,6 +20,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/components/period-slider/utils.js

@@ -25,6 +25,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/desktop/index.js

@@ -25,6 +25,7 @@ import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
@@ -44,7 +45,6 @@ import '../components/month-year-header/index.module.css';
 import '../components/month-year-header/mobile.module.css';
 import '../components/months-table/Component.js';
 import 'date-fns/isSameMonth';
-import 'date-fns/isThisMonth';
 import '../components/months-table/index.module.css';
 import '../components/period-slider/Component.js';
 import '../../../icon-button/moderncssm';

package/calendar/moderncssm/index.js

@@ -1,29 +1,23 @@
 export { CalendarResponsive as Calendar } from './Component.responsive.js';
 import 'react';
 import '../../mq/moderncssm';
-import '../../shared/moderncssm';
 import './components/calendar-mobile/Component.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 '../../typography/moderncssm';
+import '../../shared/moderncssm';
 import './desktop/Component.desktop.js';
+import 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/moderncssm/desktop';
@@ -36,7 +30,10 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
+import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -54,6 +51,7 @@ import './components/select-button/index.module.css';
 import './components/month-year-header/index.module.css';
 import './components/month-year-header/mobile.module.css';
 import './components/months-table/Component.js';
+import 'date-fns/isSameMonth';
 import './components/months-table/index.module.css';
 import './components/period-slider/Component.js';
 import '../../icon-button/moderncssm';
@@ -80,6 +78,9 @@ import 'date-fns/subYears';
 import './useRange.js';
 import './usePeriod.js';
 import './desktop/desktop.module.css';
-import './components/calendar-mobile/backdrop-transitions.module.css';
+import './components/calendar-mobile/calendarMonthOnlyView.js';
+import 'react-virtuoso';
+import '../../typography/moderncssm';
 import './components/calendar-mobile/index.module.css';
+import './components/calendar-mobile/backdrop-transitions.module.css';
 import './components/calendar-mobile/transitions.module.css';

package/calendar/moderncssm/mobile/index.js

@@ -1,27 +1,22 @@
-export { CalendarMobile, CalendarMonthOnlyView, CalendarMonthOnlyViewHeader } from '../components/calendar-mobile/Component.js';
+export { CalendarMobile, CalendarMonthOnlyViewHeader } from '../components/calendar-mobile/Component.js';
+export { CalendarMonthOnlyView } from '../components/calendar-mobile/calendarMonthOnlyView.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 'date-fns/endOfDay';
+import 'date-fns/startOfDay';
+import 'date-fns/startOfMonth';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';
 import 'react-transition-group';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
+import 'date-fns/isSameDay';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../../button/moderncssm/desktop';
@@ -34,7 +29,10 @@ import 'date-fns/eachYearOfInterval';
 import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
+import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
+import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -52,6 +50,7 @@ import '../components/select-button/index.module.css';
 import '../components/month-year-header/index.module.css';
 import '../components/month-year-header/mobile.module.css';
 import '../components/months-table/Component.js';
+import 'date-fns/isSameMonth';
 import '../components/months-table/index.module.css';
 import '../components/period-slider/Component.js';
 import '../../../icon-button/moderncssm';
@@ -81,3 +80,5 @@ import '../desktop/desktop.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 'react-virtuoso';
+import '../../../typography/moderncssm';

package/calendar/moderncssm/shared/index.js

@@ -15,6 +15,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/useCalendar.js

@@ -19,6 +19,7 @@ import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/useRange.js

@@ -15,6 +15,7 @@ import 'date-fns/format';
 import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/isSameDay';
+import 'date-fns/isThisMonth';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';

package/calendar/moderncssm/utils.d.ts

@@ -101,4 +101,6 @@ declare function isRangeValue(value: CalendarProps['value']): value is {
     dateFrom?: number | undefined;
     dateTo?: number | undefined;
 };
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue };
+declare const getMonthStartTimestamp: (date: Date) => number;
+declare const getMonthEndTimestamp: (date: Date) => number;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue, getMonthStartTimestamp, getMonthEndTimestamp };

package/calendar/moderncssm/utils.js

@@ -10,6 +10,7 @@ import format from 'date-fns/format';
 import isAfter from 'date-fns/isAfter';
 import isBefore from 'date-fns/isBefore';
 import isSameDay from 'date-fns/isSameDay';
+import isThisMonth from 'date-fns/isThisMonth';
 import lastDayOfMonth from 'date-fns/lastDayOfMonth';
 import max from 'date-fns/max';
 import min from 'date-fns/min';
@@ -218,5 +219,7 @@ function getCalendarMobileTestIds(dataTestId) {
 function isRangeValue(value) {
     return Boolean(value) && typeof value === 'object';
 }
+const getMonthStartTimestamp = (date) => startOfMonth(date).getTime();
+const getMonthEndTimestamp = (date) => isThisMonth(date) ? startOfDay(new Date()).getTime() : lastDayOfMonth(date).getTime();
 
-export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, NATIVE_DATE_FORMAT, SUNDAY_INDEX, WEEKDAYS, addonArrayToHashTable, buildDay, buildMonth, dateArrayToHashTable, dateInLimits, formatDate, generateMonths, generateWeeks, generateYears, getCalendarMobileTestIds, getSelectionRange, isRangeValue, limitDate, modifyDateByShift, monthName, parseDateString, russianWeekDay, simulateTab };
+export { DATE_FORMAT, DAYS_IN_WEEK, MONTHS, MONTHS_IN_YEAR, NATIVE_DATE_FORMAT, SUNDAY_INDEX, WEEKDAYS, addonArrayToHashTable, buildDay, buildMonth, dateArrayToHashTable, dateInLimits, formatDate, generateMonths, generateWeeks, generateYears, getCalendarMobileTestIds, getMonthEndTimestamp, getMonthStartTimestamp, getSelectionRange, isRangeValue, limitDate, modifyDateByShift, monthName, parseDateString, russianWeekDay, simulateTab };

package/calendar/utils.d.ts

@@ -101,4 +101,6 @@ declare function isRangeValue(value: CalendarProps['value']): value is {
     dateFrom?: number | undefined;
     dateTo?: number | undefined;
 };
-export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue };
+declare const getMonthStartTimestamp: (date: Date) => number;
+declare const getMonthEndTimestamp: (date: Date) => number;
+export { DAYS_IN_WEEK, MONTHS_IN_YEAR, SUNDAY_INDEX, DATE_FORMAT, NATIVE_DATE_FORMAT, WEEKDAYS, MONTHS, russianWeekDay, generateWeeks, generateMonths, generateYears, buildDay, buildMonth, limitDate, dateInLimits, monthName, dateArrayToHashTable, addonArrayToHashTable, getSelectionRange, modifyDateByShift, simulateTab, formatDate, parseDateString, getCalendarMobileTestIds, isRangeValue, getMonthStartTimestamp, getMonthEndTimestamp };

package/calendar/utils.js

@@ -12,6 +12,7 @@ var format = require('date-fns/format');
 var isAfter = require('date-fns/isAfter');
 var isBefore = require('date-fns/isBefore');
 var isSameDay = require('date-fns/isSameDay');
+var isThisMonth = require('date-fns/isThisMonth');
 var lastDayOfMonth = require('date-fns/lastDayOfMonth');
 var max = require('date-fns/max');
 var min = require('date-fns/min');
@@ -38,6 +39,7 @@ var format__default = /*#__PURE__*/_interopDefaultCompat(format);
 var isAfter__default = /*#__PURE__*/_interopDefaultCompat(isAfter);
 var isBefore__default = /*#__PURE__*/_interopDefaultCompat(isBefore);
 var isSameDay__default = /*#__PURE__*/_interopDefaultCompat(isSameDay);
+var isThisMonth__default = /*#__PURE__*/_interopDefaultCompat(isThisMonth);
 var lastDayOfMonth__default = /*#__PURE__*/_interopDefaultCompat(lastDayOfMonth);
 var max__default = /*#__PURE__*/_interopDefaultCompat(max);
 var min__default = /*#__PURE__*/_interopDefaultCompat(min);
@@ -254,6 +256,10 @@ function getCalendarMobileTestIds(dataTestId) {
 function isRangeValue(value) {
     return Boolean(value) && typeof value === 'object';
 }
+var getMonthStartTimestamp = function (date) { return startOfMonth__default.default(date).getTime(); };
+var getMonthEndTimestamp = function (date) {
+    return isThisMonth__default.default(date) ? startOfDay__default.default(new Date()).getTime() : lastDayOfMonth__default.default(date).getTime();
+};
 
 exports.DATE_FORMAT = DATE_FORMAT;
 exports.DAYS_IN_WEEK = DAYS_IN_WEEK;
@@ -272,6 +278,8 @@ exports.generateMonths = generateMonths;
 exports.generateWeeks = generateWeeks;
 exports.generateYears = generateYears;
 exports.getCalendarMobileTestIds = getCalendarMobileTestIds;
+exports.getMonthEndTimestamp = getMonthEndTimestamp;
+exports.getMonthStartTimestamp = getMonthStartTimestamp;
 exports.getSelectionRange = getSelectionRange;
 exports.isRangeValue = isRangeValue;
 exports.limitDate = limitDate;

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

@@ -7,6 +7,10 @@ type CalendarInputResponsiveProps = Omit<CalendarInputProps, 'view'> & {
      * @default 1024
      */
     breakpoint?: number;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: 'desktop' | 'mobile';
 };
 type CalendarInputMedia = 'desktop' | 'mobile';
 /**
@@ -19,5 +23,9 @@ declare const CalendarInputResponsive: React.ForwardRefExoticComponent<Omit<Cale
      * @default 1024
      */
     breakpoint?: number | undefined;
+    /**
+     * Версия, которая будет использоваться при серверном рендеринге
+     */
+    client?: "desktop" | "mobile" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { CalendarInputResponsiveProps, CalendarInputMedia, CalendarInputResponsive };

package/calendar-input/Component.responsive.js

@@ -2,8 +2,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var coreComponentsShared = require('../shared');
-var hooks = require('@alfalab/hooks');
+var coreComponentsMq = require('../mq');
 var desktop_Component_desktop = require('./desktop/Component.desktop.js');
 var mobile_Component_mobile = require('./mobile/Component.mobile.js');
 
@@ -16,12 +15,9 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
  * use UniversalDateInput instead
  */
 var CalendarInputResponsive = React.forwardRef(function (_a, ref) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? coreComponentsShared.getComponentBreakpoint() : _b, restProps = tslib.__rest(_a, ["breakpoint"]);
-    var view = hooks.useMedia([
-        ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
-        ['desktop', "(min-width: ".concat(breakpoint, "px)")],
-    ], 'desktop')[0];
-    return view === 'desktop' ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
+    var breakpoint = _a.breakpoint, client = _a.client, restProps = tslib.__rest(_a, ["breakpoint", "client"]);
+    var isDesktop = coreComponentsMq.useIsDesktop(breakpoint, client === 'desktop');
+    return isDesktop ? (React__default.default.createElement(desktop_Component_desktop.CalendarInputDesktop, tslib.__assign({}, restProps, { ref: ref }))) : (React__default.default.createElement(mobile_Component_mobile.CalendarInputMobile, tslib.__assign({}, restProps, { ref: ref })));
 });
 
 exports.CalendarInputResponsive = CalendarInputResponsive;