@alfalab/core-components 47.9.0-beta.1 → 47.10.0

package/calendar/modern/Component.responsive.js

@@ -7,12 +7,14 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
 import '../../shared/modern';
+import '../../typography/modern';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
@@ -28,7 +30,6 @@ 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/lastDayOfMonth';
 import 'date-fns/max';
@@ -44,6 +45,7 @@ import 'date-fns/differenceInDays';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isToday';

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

@@ -1,7 +1,22 @@
 /// <reference types="react" />
 import React from 'react';
-import { CalendarContentProps } from "./typings";
-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, }: CalendarContentProps) => React.JSX.Element;
+import { ResetCurrentClickedMonth } from "./typings";
+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, resetCurrentClickedMonth, }: {
+    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;
+    /**
+     * Ref для сброса заголовка clickableMonth
+     */
+    resetCurrentClickedMonth?: React.RefObject<ResetCurrentClickedMonth> | undefined;
+}) => React.JSX.Element;
 declare const CalendarMonthOnlyViewHeader: () => React.JSX.Element;
 declare const CalendarMobile: React.ForwardRefExoticComponent<{
     title?: string | undefined;
@@ -10,6 +25,7 @@ declare const CalendarMobile: React.ForwardRefExoticComponent<{
     allowSelectionFromEmptyRange?: boolean | undefined;
     hasHeader?: boolean | undefined;
     onApply?: (() => void) | undefined;
+    clickableMonth?: boolean | undefined;
 } & {
     onMonthTitleClick?: ((event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void) | undefined;
     yearsAmount?: number | undefined;

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

@@ -1,15 +1,17 @@
-import React, { forwardRef, useState, useMemo, useRef } from 'react';
+import React, { forwardRef, useState, useRef, useMemo, useImperativeHandle } 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 isSameMonth from 'date-fns/isSameMonth';
 import startOfDay from 'date-fns/startOfDay';
 import startOfMonth from 'date-fns/startOfMonth';
 import { ButtonMobile } from '../../../../button/modern/mobile';
 import { ModalMobile } from '../../../../modal/modern/mobile';
 import { getDataTestId } from '../../../../shared/modern';
+import { Typography } from '../../../../typography/modern';
 import { CalendarDesktop } from '../../desktop/Component.desktop.js';
 import { useCalendar } from '../../useCalendar.js';
 import { useRange } from '../../useRange.js';
@@ -55,7 +57,6 @@ import 'date-fns/eachDayOfInterval';
 import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
 import 'date-fns/format';
-import 'date-fns/isAfter';
 import 'date-fns/isBefore';
 import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
@@ -64,6 +65,7 @@ import 'date-fns/parse';
 import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
@@ -71,7 +73,7 @@ import 'date-fns/isWithinInterval';
 const backdropTransitionStyles = {"appear":"calendar__appear_y4uhk","enter":"calendar__enter_y4uhk","appearActive":"calendar__appearActive_y4uhk","enterActive":"calendar__enterActive_y4uhk","appearDone":"calendar__appearDone_y4uhk","enterDone":"calendar__enterDone_y4uhk","exit":"calendar__exit_y4uhk","exitActive":"calendar__exitActive_y4uhk","exitDone":"calendar__exitDone_y4uhk"};
 require('./backdrop-transitions.css');
 
-const styles = {"wrapper":"calendar__wrapper_ocx7c","withZIndex":"calendar__withZIndex_ocx7c","calendar":"calendar__calendar_ocx7c","dayNames":"calendar__dayNames_ocx7c","withHeader":"calendar__withHeader_ocx7c","month":"calendar__month_ocx7c","daysTable":"calendar__daysTable_ocx7c","dayName":"calendar__dayName_ocx7c","virtuoso":"calendar__virtuoso_ocx7c","contentModal":"calendar__contentModal_ocx7c","content":"calendar__content_ocx7c"};
+const styles = {"wrapper":"calendar__wrapper_ocx7c","withZIndex":"calendar__withZIndex_ocx7c","calendar":"calendar__calendar_ocx7c","dayNames":"calendar__dayNames_ocx7c","withHeader":"calendar__withHeader_ocx7c","month":"calendar__month_ocx7c","clickableMonth":"calendar__clickableMonth_ocx7c","rectangular":"calendar__rectangular_ocx7c","active":"calendar__active_ocx7c","monthTitle":"calendar__monthTitle_ocx7c","disabled":"calendar__disabled_ocx7c","daysTable":"calendar__daysTable_ocx7c","dayName":"calendar__dayName_ocx7c","virtuoso":"calendar__virtuoso_ocx7c","contentModal":"calendar__contentModal_ocx7c","content":"calendar__content_ocx7c"};
 require('./index.css');
 
 const transitionStyles = {"appear":"calendar__appear_kl8p5","enter":"calendar__enter_kl8p5","appearActive":"calendar__appearActive_kl8p5","enterActive":"calendar__enterActive_kl8p5","exit":"calendar__exit_kl8p5","exitActive":"calendar__exitActive_kl8p5","exitDone":"calendar__exitDone_kl8p5"};
@@ -81,7 +83,8 @@ require('./transitions.css');
 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, }) => {
+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, resetCurrentClickedMonth, }) => {
+    const [activeMonthLabel, setActiveMonthLabel] = useState('');
     const range = useRange({
         mode,
         value,
@@ -92,7 +95,13 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
     });
     const month = useMemo(() => (monthTimestamp ? new Date(monthTimestamp) : undefined), [monthTimestamp]);
     const minDate = useMemo(() => (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined), [minDateTimestamp]);
-    const maxDate = useMemo(() => (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined), [maxDateTimestamp]);
+    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 ||
@@ -108,6 +117,7 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
         events,
         onChange: range.onChange,
         dayAddons,
+        ...(clickableMonth && { resetCurrentClickedMonth }),
     });
     const activeMonths = useMemo(() => {
         const eventsMap = dateArrayToHashTable(events || []);
@@ -146,21 +156,54 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
         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 renderMonth = (index) => (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)) : (React.createElement("span", { className: styles.month },
-            " ",
-            activeMonths[index].title,
-            " ")),
-        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 })));
+    const handleClickMonthLabel = (index) => {
+        if (activeMonths[index].title !== activeMonthLabel || activeMonthLabel === '') {
+            setActiveMonthLabel(activeMonths[index].title);
+        }
+        else {
+            setActiveMonthLabel('');
+            if (onChange) {
+                onChange();
+            }
+        }
+    };
+    const getMonthTitle = (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 monthClicked = activeMonthLabel === activeMonths[index].title;
+        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]: monthClicked,
+                        [styles.disabled]: isAfterDate,
+                    }),
+                }), ...(clickableMonth && { onClick: () => handleClickMonthLabel(index) }) }, getMonthTitle(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, monthClicked: monthClicked, onChange: onChange })));
+    };
+    useImperativeHandle(resetCurrentClickedMonth, () => ({
+        resetCurrentClickedMonth: () => {
+            setActiveMonthLabel('');
+        },
+    }));
     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, ...restProps }, ref) => {
+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 resetCurrentClickedMonth = useRef(null);
     const monthOnlyView = selectorView === 'month-only';
     const handleClose = () => {
         if (onClose)
@@ -173,6 +216,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
     const handleClear = () => {
         if (onChange)
             onChange();
+        resetCurrentClickedMonth?.current?.resetCurrentClickedMonth();
     };
     const renderDayNames = () => (monthOnlyView ? React.createElement(CalendarMonthOnlyViewHeader, null) : null);
     const renderContent = () => {
@@ -185,7 +229,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
             selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, ...commonProps, ...restProps }));
+            return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth, ...commonProps, ...restProps }));
         }
         return (React.createElement(CalendarDesktop, { responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile'), ...commonProps, ...restProps }));
     };
@@ -201,7 +245,11 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
                 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")));
         }
-        if (value) {
+        /**
+         * 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"));

package/calendar/modern/components/calendar-mobile/index.css

@@ -1,10 +1,14 @@
 /* hash: 2uyon */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
+    --color-light-accent-secondary: #212124;
     --color-light-modal-bg-primary: #fff;
     --color-light-neutral-300: #e7e8eb;
+    --color-light-neutral-translucent-100: rgba(38, 55, 88, 0.06);
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
-    --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-text-secondary: rgba(4, 4, 19, 0.55);
+    --color-light-text-tertiary: rgba(5, 8, 29, 0.38); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root {
@@ -14,7 +18,8 @@
     /* Up */
 
     /* Hard up */
-} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
@@ -88,8 +93,25 @@
     letter-spacing: 1.25px;
     text-transform: uppercase;
     color: var(--color-light-text-primary);
-    margin-bottom: var(--gap-xs);
-} .calendar__daysTable_ocx7c {
+    margin-bottom: var(--gap-xs)
+} .calendar__month_ocx7c.calendar__clickableMonth_ocx7c {
+        padding: 10px var(--gap-m);
+        align-self: flex-start;
+        border-radius: 999px;
+        background-color: var(--color-light-neutral-translucent-100);
+        cursor: pointer;
+        text-transform: unset
+    } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__rectangular_ocx7c {
+            border-radius: var(--border-radius-l);
+        } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__active_ocx7c {
+            background-color: var(--color-light-accent-secondary)
+        } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__active_ocx7c .calendar__monthTitle_ocx7c {
+                color: var(--color-light-text-primary-inverted);
+            } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__disabled_ocx7c {
+            pointer-events: none
+        } .calendar__month_ocx7c.calendar__clickableMonth_ocx7c.calendar__disabled_ocx7c .calendar__monthTitle_ocx7c {
+                color: var(--color-light-text-tertiary);
+            } .calendar__daysTable_ocx7c {
     display: flex;
     flex-direction: column;
     margin-top: var(--gap-2xl);

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

@@ -5,16 +5,19 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../../button/modern/mobile';
 import '../../../../modal/modern/mobile';
 import '../../../../shared/modern';
+import '../../../../typography/modern';
 import '../../desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import '../days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
@@ -30,7 +33,6 @@ 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/lastDayOfMonth';
 import 'date-fns/max';

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

@@ -3,6 +3,9 @@ import React from 'react';
 import { CalendarDesktopProps } from "../../desktop/index";
 type OmittedCalendarProps = 'headerClassName' | 'contentClassName';
 type OmittedCalendarContentProps = 'className' | 'defaultView' | 'selectorView' | 'rangeComplete' | 'onMonthChange' | 'onYearClick' | 'onPeriodClick' | 'dataTestId' | 'hasHeader' | 'responsive' | 'showCurrentYearSelector';
+type ResetCurrentClickedMonth = {
+    resetCurrentClickedMonth: () => void;
+};
 type CalendarContentProps = {
     /**
      * Обработчик клика на название месяца в мобильном календаре
@@ -42,5 +45,9 @@ type CalendarMobileProps = {
      * Обработчик клика на кнопку выбрать
      */
     onApply?: () => void;
+    /**
+     * При клике на месяц будут выбраны все доступные дни месяца
+     */
+    clickableMonth?: boolean;
 } & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
-export { CalendarContentProps, CalendarMobileProps };
+export { ResetCurrentClickedMonth, CalendarContentProps, CalendarMobileProps };

package/calendar/modern/components/days-table/Component.d.ts

@@ -54,6 +54,14 @@ type DaysTableProps = {
      * Рендерит компонент, обернутый в Transition
      */
     withTransition?: boolean;
+    /**
+     * При клике на месяц будут выбраны все доступные дни месяца
+     */
+    monthClicked?: boolean;
+    /**
+     * Обработчик выбора даты
+     */
+    onChange?: (date?: number, dateTo?: number) => void;
 };
 declare const DaysTable: FC<DaysTableProps>;
 export { DaysTableProps, DaysTable };

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

@@ -1,6 +1,7 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useEffect } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
+import { getTime } from 'date-fns';
 import isEqual from 'date-fns/isEqual';
 import isLastDayOfMonth from 'date-fns/isLastDayOfMonth';
 import isSameDay from 'date-fns/isSameDay';
@@ -32,13 +33,15 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../../../../shared/modern';
 
-const styles = {"daysTable":"calendar__daysTable_1opka","responsive":"calendar__responsive_1opka","dayName":"calendar__dayName_1opka","day":"calendar__day_1opka","rounded":"calendar__rounded_1opka","rectangular":"calendar__rectangular_1opka","highlighted":"calendar__highlighted_1opka","range":"calendar__range_1opka","disabled":"calendar__disabled_1opka","holiday":"calendar__holiday_1opka","today":"calendar__today_1opka","rangeComplete":"calendar__rangeComplete_1opka","selected":"calendar__selected_1opka","dayWrapper":"calendar__dayWrapper_1opka","cursorPointer":"calendar__cursorPointer_1opka","rangeEnd":"calendar__rangeEnd_1opka","rangeStart":"calendar__rangeStart_1opka","transitLeft":"calendar__transitLeft_1opka","transitRight":"calendar__transitRight_1opka","sharpTransitLeft":"calendar__sharpTransitLeft_1opka","sharpTransitRight":"calendar__sharpTransitRight_1opka","daysEnter":"calendar__daysEnter_1opka","left":"calendar__left_1opka","daysEnterActive":"calendar__daysEnterActive_1opka","daysExit":"calendar__daysExit_1opka","daysExitActive":"calendar__daysExitActive_1opka","right":"calendar__right_1opka","dayAddons":"calendar__dayAddons_1opka","dayContent":"calendar__dayContent_1opka","addons":"calendar__addons_1opka","dot":"calendar__dot_1opka","bottomAddon":"calendar__bottomAddon_1opka"};
+const styles = {"daysTable":"calendar__daysTable_1opka","responsive":"calendar__responsive_1opka","dayName":"calendar__dayName_1opka","day":"calendar__day_1opka","rounded":"calendar__rounded_1opka","rectangular":"calendar__rectangular_1opka","highlighted":"calendar__highlighted_1opka","range":"calendar__range_1opka","disabled":"calendar__disabled_1opka","holiday":"calendar__holiday_1opka","today":"calendar__today_1opka","rangeComplete":"calendar__rangeComplete_1opka","selected":"calendar__selected_1opka","dayWrapper":"calendar__dayWrapper_1opka","cursorPointer":"calendar__cursorPointer_1opka","rangeEnd":"calendar__rangeEnd_1opka","shapeRectangular":"calendar__shapeRectangular_1opka","rangeStart":"calendar__rangeStart_1opka","transitLeft":"calendar__transitLeft_1opka","transitRight":"calendar__transitRight_1opka","sharpTransitLeft":"calendar__sharpTransitLeft_1opka","sharpTransitRight":"calendar__sharpTransitRight_1opka","daysEnter":"calendar__daysEnter_1opka","left":"calendar__left_1opka","daysEnterActive":"calendar__daysEnterActive_1opka","daysExit":"calendar__daysExit_1opka","daysExitActive":"calendar__daysExitActive_1opka","right":"calendar__right_1opka","dayAddons":"calendar__dayAddons_1opka","dayContent":"calendar__dayContent_1opka","addons":"calendar__addons_1opka","dot":"calendar__dot_1opka","bottomAddon":"calendar__bottomAddon_1opka"};
 require('./index.css');
 
 /* eslint-disable complexity */
-const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, responsive, shape = 'rounded', withTransition = true, }) => {
+const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, responsive, shape = 'rounded', withTransition = true, monthClicked = false, onChange, }) => {
     const activeMonthRef = useRef(activeMonth);
     const directionRef = useRef();
+    const currentStartMonth = useRef();
+    const currentEndPeriod = useRef();
     activeMonthRef.current = activeMonth;
     const prevActiveMonth = usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -78,6 +81,15 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
             if (!day.disabled)
                 onClick(e);
         };
+        if (dayIdx === 0) {
+            currentStartMonth.current = startOfMonth(day.date).getTime();
+        }
+        if (isToday(day.date)) {
+            currentEndPeriod.current = getTime(day.date);
+        }
+        else if (!currentEndPeriod.current && isLastDayOfMonth(day.date)) {
+            currentEndPeriod.current = getTime(day.date);
+        }
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         React.createElement("td", { ...dayProps, key: day.date.getTime(), className: cn(styles.dayWrapper, {
@@ -90,6 +102,7 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
                 [styles.rangeStart]: rangeStart,
                 [styles.rangeEnd]: rangeEnd,
                 [styles.cursorPointer]: !day.disabled,
+                [styles.shapeRectangular]: shape === 'rectangular',
             }), align: 'center', ref: (node) => {
                 /**
                  * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
@@ -116,6 +129,12 @@ const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selected
     };
     const renderWeek = (week, weekIdx) => (React.createElement("tr", { key: weekIdx }, week.map(renderDay)));
     const renderMonth = () => React.createElement("tbody", null, weeks.map(renderWeek));
+    useEffect(() => {
+        if (monthClicked && onChange) {
+            onChange(currentStartMonth.current, currentEndPeriod.current);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [monthClicked]);
     return (React.createElement("table", { className: cn(styles.daysTable, directionRef.current && styles[directionRef.current], {
             [styles.responsive]: responsive,
         }) },

package/calendar/modern/components/days-table/index.css

@@ -161,12 +161,20 @@
         width: calc(50% + 20px);
         border-top-right-radius: var(--calendar-day-border-radius);
         border-bottom-right-radius: var(--calendar-day-border-radius);
+    } .calendar__rangeEnd_1opka.calendar__shapeRectangular_1opka:before {
+        width: calc(50% + 22px);
+        border-top-right-radius: var(--border-radius-m);
+        border-bottom-right-radius: var(--border-radius-m);
     } .calendar__rangeStart_1opka:before {
         left: auto;
         right: 0;
         width: calc(50% + 20px);
         border-top-left-radius: var(--calendar-day-border-radius);
         border-bottom-left-radius: var(--calendar-day-border-radius);
+    } .calendar__rangeStart_1opka.calendar__shapeRectangular_1opka:before {
+        width: calc(50% + 22px);
+        border-top-left-radius: var(--border-radius-m);
+        border-bottom-left-radius: var(--border-radius-m);
     } .calendar__rangeComplete_1opka:before {
         background: var(--calendar-range-complete-background);
     } .calendar__transitLeft_1opka:after, .calendar__transitRight_1opka:after {

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

@@ -2,6 +2,7 @@ export { DaysTable } from './Component.js';
 import 'react';
 import 'react-transition-group';
 import 'classnames';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';

package/calendar/modern/desktop/Component.desktop.js

@@ -32,6 +32,7 @@ import { YearsTable } from '../components/years-table/Component.js';
 import { useCalendar } from '../useCalendar.js';
 import { useRange } from '../useRange.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';

package/calendar/modern/desktop/index.js

@@ -8,6 +8,7 @@ import '../../../shared/modern';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';

package/calendar/modern/index.js

@@ -7,16 +7,19 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../button/modern/mobile';
 import '../../modal/modern/mobile';
 import '../../shared/modern';
+import '../../typography/modern';
 import './desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import './components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
@@ -32,7 +35,6 @@ 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/lastDayOfMonth';
 import 'date-fns/max';

package/calendar/modern/mobile/index.js

@@ -5,16 +5,19 @@ import 'react-virtuoso';
 import '@juggle/resize-observer';
 import 'classnames';
 import 'date-fns/endOfDay';
+import 'date-fns/isAfter';
 import 'date-fns/isSameMonth';
 import 'date-fns/startOfDay';
 import 'date-fns/startOfMonth';
 import '../../../button/modern/mobile';
 import '../../../modal/modern/mobile';
 import '../../../shared/modern';
+import '../../../typography/modern';
 import '../desktop/Component.desktop.js';
 import '@alfalab/hooks';
 import '../components/days-table/Component.js';
 import 'react-transition-group';
+import 'date-fns';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isSameDay';
@@ -30,7 +33,6 @@ 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/lastDayOfMonth';
 import 'date-fns/max';

package/calendar/modern/useCalendar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { KeyboardEvent, MouseEvent, Ref } from 'react';
+import { KeyboardEvent, MouseEvent, Ref, RefObject } from 'react';
 import { Day, DayAddons, Month, View } from "./typings";
 type UseCalendarProps = {
     /**
@@ -50,8 +50,14 @@ type UseCalendarProps = {
      * Дополнительный контент под числом
      */
     dayAddons?: DayAddons[];
+    /**
+     * Ref для сброса заголовка clickableMonth
+     */
+    resetCurrentClickedMonth?: RefObject<{
+        resetCurrentClickedMonth: () => void;
+    }>;
 };
-declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, resetCurrentClickedMonth, }: UseCalendarProps): {
     activeMonth: Date;
     weeks: Day[][];
     months: Month[];