@alfalab/core-components 47.13.0-beta.1 → 47.14.0-beta.0

package/calendar/esm/useCalendar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { KeyboardEvent, MouseEvent, Ref, RefObject } from 'react';
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
 import { Day, DayAddons, Month, View } from "./typings";
 type UseCalendarProps = {
     /**
@@ -50,14 +50,8 @@ 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, resetCurrentClickedMonth, }: UseCalendarProps): {
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
     activeMonth: Date;
     weeks: Day[][];
     months: Month[];

package/calendar/esm/useCalendar.js

@@ -31,7 +31,7 @@ import 'date-fns/subMonths';
 import '../../shared/esm';
 
 function useCalendar(_a) {
-    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange, resetCurrentClickedMonth = _a.resetCurrentClickedMonth;
+    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
     var _c = useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
     var _d = useState(), highlighted = _d[0], setHighlighted = _d[1];
     var uncontrolled = month === undefined;
@@ -185,14 +185,11 @@ function useCalendar(_a) {
         setHighlighted(undefined);
     }, []);
     var handleDayClick = function (event) {
-        var _a;
         var date = event.currentTarget.dataset.date;
         if (date && onChange) {
             onChange(+date);
         }
         handleDayMouseLeave();
-        // сбрасываем выбранный месяц если выбираем дату вручную
-        (_a = resetCurrentClickedMonth === null || resetCurrentClickedMonth === void 0 ? void 0 : resetCurrentClickedMonth.current) === null || _a === void 0 ? void 0 : _a.resetCurrentClickedMonth();
     };
     var daysControls = useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },

package/calendar/modern/Component.responsive.js

@@ -8,7 +8,10 @@ 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/modern/mobile';
@@ -18,7 +21,6 @@ import '../../typography/modern';
 import './useCalendar.js';
 import 'date-fns/addMonths';
 import 'date-fns/addYears';
-import 'date-fns/isSameDay';
 import 'date-fns/isSameYear';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
@@ -31,7 +33,6 @@ import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -45,7 +46,6 @@ 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';
@@ -56,7 +56,6 @@ import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import './components/select-button/Component.js';
 import './components/months-table/Component.js';
-import 'date-fns/isThisMonth';
 import './components/period-slider/Component.js';
 import '../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-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, }: {
+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;
@@ -12,10 +11,6 @@ declare const CalendarMonthOnlyView: ({ value, mode, rangeBehavior, month: month
      * 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<{

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

@@ -1,11 +1,14 @@
-import React, { forwardRef, useState, useRef, useMemo, useImperativeHandle } from 'react';
+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/modern/mobile';
@@ -24,7 +27,6 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../../../../button/modern/desktop';
 import '../months-table/Component.js';
-import 'date-fns/isThisMonth';
 import '../period-slider/Component.js';
 import 'date-fns/endOfWeek';
 import 'date-fns/startOfWeek';
@@ -49,7 +51,6 @@ import 'date-fns/startOfYear';
 import '../years-table/Component.js';
 import 'date-fns/isSameYear';
 import 'date-fns/isThisYear';
-import 'date-fns/isSameDay';
 import 'date-fns/setYear';
 import 'date-fns/subYears';
 import '../../usePeriod.js';
@@ -58,14 +59,12 @@ import 'date-fns/eachMonthOfInterval';
 import 'date-fns/eachYearOfInterval';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 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';
 import 'date-fns/isEqual';
 import 'date-fns/isLastDayOfMonth';
 import 'date-fns/isWithinInterval';
@@ -83,8 +82,7 @@ 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, clickableMonth, resetCurrentClickedMonth, }) => {
-    const [activeMonthLabel, setActiveMonthLabel] = useState('');
+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,
@@ -117,7 +115,6 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
         events,
         onChange: range.onChange,
         dayAddons,
-        ...(clickableMonth && { resetCurrentClickedMonth }),
     });
     const activeMonths = useMemo(() => {
         const eventsMap = dateArrayToHashTable(events || []);
@@ -156,25 +153,52 @@ 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 handleClickMonthLabel = (index) => {
-        if (activeMonths[index].title !== activeMonthLabel || activeMonthLabel === '') {
-            setActiveMonthLabel(activeMonths[index].title);
+    // заголовок должен становиться активным если выбран весь доступный период в месяце
+    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;
+            }
         }
-        else {
-            setActiveMonthLabel('');
-            if (onChange) {
+        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 getMonthTitle = (index, isClickableMonth) => {
+    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 monthClicked = activeMonthLabel === activeMonths[index].title;
         const isAfterDate = isAfter(activeMonths[index].date, activeMonth);
         return (React.createElement("div", { className: styles.daysTable, id: `month-${index}` },
             onMonthTitleClick ? (
@@ -185,17 +209,12 @@ const CalendarMonthOnlyView = ({ value, mode = 'single', rangeBehavior = 'clarif
                     ...(clickableMonth && {
                         [styles.clickableMonth]: true,
                         [styles.rectangular]: shape === 'rectangular',
-                        [styles.active]: monthClicked,
+                        [styles.active]: isMonthActive(index),
                         [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 })));
+                }), ...(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 })));
     };
-    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 },
@@ -203,7 +222,6 @@ const CalendarMonthOnlyViewHeader = () => (React.createElement("table", { classN
         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 resetCurrentClickedMonth = useRef(null);
     const monthOnlyView = selectorView === 'month-only';
     const handleClose = () => {
         if (onClose)
@@ -216,7 +234,6 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
     const handleClear = () => {
         if (onChange)
             onChange();
-        resetCurrentClickedMonth?.current?.resetCurrentClickedMonth();
     };
     const renderDayNames = () => (monthOnlyView ? React.createElement(CalendarMonthOnlyViewHeader, null) : null);
     const renderContent = () => {
@@ -229,7 +246,7 @@ const CalendarMobile = forwardRef(({ hasHeader = true, allowSelectionFromEmptyRa
             selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, { yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth, ...commonProps, ...restProps }));
+            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 }));
     };

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

@@ -20,6 +20,7 @@
     /* Hard up */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */
     --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-pill: 99px;
 
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
@@ -97,7 +98,7 @@
 } .calendar__month_1rzwl.calendar__clickableMonth_1rzwl {
         padding: 10px var(--gap-m);
         align-self: flex-start;
-        border-radius: 999px;
+        border-radius: var(--border-radius-pill);
         background-color: var(--color-light-neutral-translucent-100);
         cursor: pointer;
         text-transform: unset

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

@@ -6,7 +6,10 @@ 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/modern/mobile';
@@ -17,10 +20,8 @@ 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';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../../../button/modern/desktop';
@@ -34,7 +35,6 @@ import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -47,7 +47,6 @@ import '../month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../months-table/Component.js';
-import 'date-fns/isThisMonth';
 import '../period-slider/Component.js';
 import '../../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

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

@@ -3,9 +3,6 @@ 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 = {
     /**
      * Обработчик клика на название месяца в мобильном календаре
@@ -50,4 +47,4 @@ type CalendarMobileProps = {
      */
     clickableMonth?: boolean;
 } & CalendarContentProps & Pick<CalendarDesktopProps, OmittedCalendarContentProps>;
-export { ResetCurrentClickedMonth, CalendarContentProps, CalendarMobileProps };
+export { CalendarContentProps, CalendarMobileProps };

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

@@ -54,14 +54,6 @@ 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,7 +1,6 @@
-import React, { useRef, useCallback, useEffect } from 'react';
+import React, { useRef, useCallback } 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';
@@ -37,11 +36,9 @@ const styles = {"daysTable":"calendar__daysTable_1c2lr","responsive":"calendar__
 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, monthClicked = false, onChange, }) => {
+const DaysTable = ({ weeks = [], activeMonth = new Date(), highlighted, selectedFrom, selectedTo, rangeComplete = selectedFrom && selectedTo, getDayProps, hasHeader = true, responsive, shape = 'rounded', withTransition = true, }) => {
     const activeMonthRef = useRef(activeMonth);
     const directionRef = useRef();
-    const currentStartMonth = useRef();
-    const currentEndPeriod = useRef();
     activeMonthRef.current = activeMonth;
     const prevActiveMonth = usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -81,15 +78,6 @@ 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, {
@@ -129,12 +117,6 @@ 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.js

@@ -2,7 +2,6 @@ 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,7 +32,6 @@ 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,7 +8,6 @@ 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

@@ -8,7 +8,10 @@ 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/modern/mobile';
@@ -19,10 +22,8 @@ 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';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../button/modern/desktop';
@@ -36,7 +37,6 @@ import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -49,7 +49,6 @@ import './components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import './components/select-button/Component.js';
 import './components/months-table/Component.js';
-import 'date-fns/isThisMonth';
 import './components/period-slider/Component.js';
 import '../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

package/calendar/modern/mobile/index.js

@@ -6,7 +6,10 @@ 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/modern/mobile';
@@ -17,10 +20,8 @@ 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';
 import 'date-fns/isToday';
 import 'date-fns/isWithinInterval';
 import '../../../button/modern/desktop';
@@ -34,7 +35,6 @@ import 'date-fns/endOfWeek';
 import 'date-fns/endOfYear';
 import 'date-fns/format';
 import 'date-fns/isBefore';
-import 'date-fns/lastDayOfMonth';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/parse';
@@ -47,7 +47,6 @@ import '../components/month-year-header/Component.js';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../components/select-button/Component.js';
 import '../components/months-table/Component.js';
-import 'date-fns/isThisMonth';
 import '../components/period-slider/Component.js';
 import '../../../icon-button/modern';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

package/calendar/modern/useCalendar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { KeyboardEvent, MouseEvent, Ref, RefObject } from 'react';
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
 import { Day, DayAddons, Month, View } from "./typings";
 type UseCalendarProps = {
     /**
@@ -50,14 +50,8 @@ 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, resetCurrentClickedMonth, }: UseCalendarProps): {
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
     activeMonth: Date;
     weeks: Day[][];
     months: Month[];

package/calendar/modern/useCalendar.js

@@ -30,7 +30,7 @@ import 'date-fns/subDays';
 import 'date-fns/subMonths';
 import '../../shared/modern';
 
-function useCalendar({ defaultMonth, month, minDate, view = 'days', maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, resetCurrentClickedMonth, }) {
+function useCalendar({ defaultMonth, month, minDate, view = 'days', maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }) {
     const [monthState, setMonthState] = useState(defaultMonth);
     const [highlighted, setHighlighted] = useState();
     const uncontrolled = month === undefined;
@@ -185,8 +185,6 @@ function useCalendar({ defaultMonth, month, minDate, view = 'days', maxDate, sel
             onChange(+date);
         }
         handleDayMouseLeave();
-        // сбрасываем выбранный месяц если выбираем дату вручную
-        resetCurrentClickedMonth?.current?.resetCurrentClickedMonth();
     };
     const daysControls = useMemo(() => ({
         ArrowLeft: () => focusDay('prev'),

package/calendar/useCalendar.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { KeyboardEvent, MouseEvent, Ref, RefObject } from 'react';
+import { KeyboardEvent, MouseEvent, Ref } from 'react';
 import { Day, DayAddons, Month, View } from "./typings";
 type UseCalendarProps = {
     /**
@@ -50,14 +50,8 @@ 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, resetCurrentClickedMonth, }: UseCalendarProps): {
+declare function useCalendar({ defaultMonth, month, minDate, view, maxDate, selected, events, offDays, holidays, dayAddons, onMonthChange, onChange, }: UseCalendarProps): {
     activeMonth: Date;
     weeks: Day[][];
     months: Month[];

package/calendar/useCalendar.js

@@ -25,7 +25,7 @@ var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 var subYears__default = /*#__PURE__*/_interopDefaultCompat(subYears);
 
 function useCalendar(_a) {
-    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange, resetCurrentClickedMonth = _a.resetCurrentClickedMonth;
+    var defaultMonth = _a.defaultMonth, month = _a.month, minDate = _a.minDate, _b = _a.view, view = _b === void 0 ? 'days' : _b, maxDate = _a.maxDate, selected = _a.selected, events = _a.events, offDays = _a.offDays, holidays = _a.holidays, dayAddons = _a.dayAddons, onMonthChange = _a.onMonthChange, onChange = _a.onChange;
     var _c = React.useState(defaultMonth), monthState = _c[0], setMonthState = _c[1];
     var _d = React.useState(), highlighted = _d[0], setHighlighted = _d[1];
     var uncontrolled = month === undefined;
@@ -179,14 +179,11 @@ function useCalendar(_a) {
         setHighlighted(undefined);
     }, []);
     var handleDayClick = function (event) {
-        var _a;
         var date = event.currentTarget.dataset.date;
         if (date && onChange) {
             onChange(+date);
         }
         handleDayMouseLeave();
-        // сбрасываем выбранный месяц если выбираем дату вручную
-        (_a = resetCurrentClickedMonth === null || resetCurrentClickedMonth === void 0 ? void 0 : resetCurrentClickedMonth.current) === null || _a === void 0 ? void 0 : _a.resetCurrentClickedMonth();
     };
     var daysControls = React.useMemo(function () { return ({
         ArrowLeft: function () { return focusDay('prev'); },