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

package/calendar/cssm/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/cssm/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/cssm/components/days-table/Component.js

@@ -4,7 +4,6 @@ var tslib = require('tslib');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
-var dateFns = require('date-fns');
 var isEqual = require('date-fns/isEqual');
 var isLastDayOfMonth = require('date-fns/isLastDayOfMonth');
 var isSameDay = require('date-fns/isSameDay');
@@ -30,11 +29,9 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var DaysTable = function (_a) {
     var _b;
-    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.withTransition, withTransition = _h === void 0 ? true : _h, _j = _a.monthClicked, monthClicked = _j === void 0 ? false : _j, onChange = _a.onChange;
+    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.withTransition, withTransition = _h === void 0 ? true : _h;
     var activeMonthRef = React.useRef(activeMonth);
     var directionRef = React.useRef();
-    var currentStartMonth = React.useRef();
-    var currentEndPeriod = React.useRef();
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = hooks.usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -77,15 +74,6 @@ var DaysTable = function (_a) {
             if (!day.disabled)
                 onClick(e);
         };
-        if (dayIdx === 0) {
-            currentStartMonth.current = startOfMonth__default.default(day.date).getTime();
-        }
-        if (isToday__default.default(day.date)) {
-            currentEndPeriod.current = dateFns.getTime(day.date);
-        }
-        else if (!currentEndPeriod.current && isLastDayOfMonth__default.default(day.date)) {
-            currentEndPeriod.current = dateFns.getTime(day.date);
-        }
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         React__default.default.createElement("td", tslib.__assign({}, dayProps, { key: day.date.getTime(), className: cn__default.default(styles__default.default.dayWrapper, (_a = {},
@@ -125,12 +113,6 @@ var DaysTable = function (_a) {
     };
     var renderWeek = function (week, weekIdx) { return (React__default.default.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     var renderMonth = function () { return React__default.default.createElement("tbody", null, weeks.map(renderWeek)); };
-    React.useEffect(function () {
-        if (monthClicked && onChange) {
-            onChange(currentStartMonth.current, currentEndPeriod.current);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [monthClicked]);
     return (React__default.default.createElement("table", { className: cn__default.default(styles__default.default.daysTable, directionRef.current && styles__default.default[directionRef.current], (_b = {},
             _b[styles__default.default.responsive] = responsive,
             _b)) },

package/calendar/cssm/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/cssm/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'); },

package/calendar/esm/Component.responsive.js

@@ -9,7 +9,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/esm/mobile';
@@ -19,7 +22,6 @@ import '../../typography/esm';
 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';
@@ -32,7 +34,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';
@@ -46,7 +47,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';
@@ -57,7 +57,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/esm';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

package/calendar/esm/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/esm/components/calendar-mobile/Component.js

@@ -1,12 +1,15 @@
-import { __rest, __assign, __spreadArray } from 'tslib';
-import React, { forwardRef, useState, useRef, useMemo, useImperativeHandle } from 'react';
+import { __rest, __spreadArray, __assign } from 'tslib';
+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/esm/mobile';
@@ -25,7 +28,6 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '../select-button/Component.js';
 import '../../../../button/esm/desktop';
 import '../months-table/Component.js';
-import 'date-fns/isThisMonth';
 import '../period-slider/Component.js';
 import 'date-fns/endOfWeek';
 import 'date-fns/startOfWeek';
@@ -50,7 +52,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';
@@ -59,14 +60,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';
@@ -85,8 +84,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = ResizeObserver;
 }
 var CalendarMonthOnlyView = function (_a) {
-    var value = _a.value, _b = _a.mode, mode = _b === void 0 ? 'single' : _b, _c = _a.rangeBehavior, rangeBehavior = _c === void 0 ? 'clarification' : _c, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.yearsAmount, yearsAmount = _d === void 0 ? 3 : _d, dayAddons = _a.dayAddons, _e = _a.shape, shape = _e === void 0 ? 'rounded' : _e, scrollableContainer = _a.scrollableContainer, clickableMonth = _a.clickableMonth, resetCurrentClickedMonth = _a.resetCurrentClickedMonth;
-    var _f = useState(''), activeMonthLabel = _f[0], setActiveMonthLabel = _f[1];
+    var value = _a.value, _b = _a.mode, mode = _b === void 0 ? 'single' : _b, _c = _a.rangeBehavior, rangeBehavior = _c === void 0 ? 'clarification' : _c, monthTimestamp = _a.month, minDateTimestamp = _a.minDate, maxDateTimestamp = _a.maxDate, defaultMonthTimestamp = _a.defaultMonth, offDays = _a.offDays, events = _a.events, holidays = _a.holidays, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _d = _a.yearsAmount, yearsAmount = _d === void 0 ? 3 : _d, dayAddons = _a.dayAddons, _e = _a.shape, shape = _e === void 0 ? 'rounded' : _e, scrollableContainer = _a.scrollableContainer, clickableMonth = _a.clickableMonth;
     var range = useRange({
         mode: mode,
         value: value,
@@ -110,7 +108,18 @@ var CalendarMonthOnlyView = function (_a) {
         return startOfMonth(selected ||
             limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    var _g = useCalendar(__assign({ month: month, defaultMonth: defaultMonth, view: 'months', minDate: minDate, maxDate: maxDate, selected: selected, offDays: offDays, events: events, onChange: range.onChange, dayAddons: dayAddons }, (clickableMonth && { resetCurrentClickedMonth: resetCurrentClickedMonth }))), activeMonth = _g.activeMonth, highlighted = _g.highlighted, getDayProps = _g.getDayProps;
+    var _f = useCalendar({
+        month: month,
+        defaultMonth: defaultMonth,
+        view: 'months',
+        minDate: minDate,
+        maxDate: maxDate,
+        selected: selected,
+        offDays: offDays,
+        events: events,
+        onChange: range.onChange,
+        dayAddons: dayAddons,
+    }), activeMonth = _f.activeMonth, highlighted = _f.highlighted, getDayProps = _f.getDayProps;
     var activeMonths = useMemo(function () {
         var eventsMap = dateArrayToHashTable(events || []);
         var offDaysMap = dateArrayToHashTable(offDays || []);
@@ -144,18 +153,46 @@ var CalendarMonthOnlyView = function (_a) {
         var date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth(date, m.date); });
     }, [range.value, range.selectedFrom, activeMonth, activeMonths]);
-    var handleClickMonthLabel = function (index) {
-        if (activeMonths[index].title !== activeMonthLabel || activeMonthLabel === '') {
-            setActiveMonthLabel(activeMonths[index].title);
+    // заголовок должен становиться активным если выбран весь доступный период в месяце
+    var isMonthActive = function (currentMonthIndex) {
+        if (value && isRangeValue(value)) {
+            var initialMonthDate = activeMonths[initialMonthIndex].date;
+            var currentMonthDate = activeMonths[currentMonthIndex].date;
+            var firstAvailableDayOfMonth = startOfMonth(initialMonthDate).getTime();
+            /**
+             * последний доступный день месяца в timestamp
+             * представлен в виде последнего календарного дня, либо в виде текущей даты для актуального месяца
+             */
+            var lastAvailableDayOfMonth = isThisMonth(initialMonthDate)
+                ? startOfDay(new Date()).getTime()
+                : lastDayOfMonth(initialMonthDate).getTime();
+            var dateFrom = value.dateFrom, dateTo = value.dateTo;
+            if (dateFrom &&
+                dateTo &&
+                isSameMonth(initialMonthDate, currentMonthDate) &&
+                isSameDay(firstAvailableDayOfMonth, dateFrom) &&
+                isSameDay(lastAvailableDayOfMonth, dateTo)) {
+                return true;
+            }
         }
-        else {
-            setActiveMonthLabel('');
-            if (onChange) {
+        return false;
+    };
+    var handleClickMonthLabel = function (index) {
+        if (onChange) {
+            var date = activeMonths[index].date;
+            var firstAvailableDayOfMonth = startOfMonth(date).getTime();
+            var lastAvailableDayOfMonth = isThisMonth(date)
+                ? startOfDay(new Date()).getTime()
+                : lastDayOfMonth(date).getTime();
+            if (isMonthActive(index)) {
                 onChange();
             }
+            else {
+                onChange(firstAvailableDayOfMonth, lastAvailableDayOfMonth);
+            }
         }
     };
-    var getMonthTitle = function (index, isClickableMonth) {
+    var getMonthLabel = function (index, isClickableMonth) {
         if (isClickableMonth) {
             return (React.createElement(Typography.Text, { className: styles.monthTitle, view: 'primary-small', color: 'primary' }, activeMonths[index].title));
         }
@@ -163,7 +200,6 @@ var CalendarMonthOnlyView = function (_a) {
     };
     var renderMonth = function (index) {
         var _a;
-        var monthClicked = activeMonthLabel === activeMonths[index].title;
         var isAfterDate = isAfter(activeMonths[index].date, activeMonth);
         return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
             onMonthTitleClick ? (
@@ -173,16 +209,11 @@ var CalendarMonthOnlyView = function (_a) {
             React.createElement("span", __assign({ className: cn(styles.month, __assign({}, (clickableMonth && (_a = {},
                     _a[styles.clickableMonth] = true,
                     _a[styles.rectangular] = shape === 'rectangular',
-                    _a[styles.active] = monthClicked,
+                    _a[styles.active] = isMonthActive(index),
                     _a[styles.disabled] = isAfterDate,
-                    _a)))) }, (clickableMonth && { onClick: function () { return 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 })));
+                    _a)))) }, (clickableMonth && { onClick: function () { return 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, function () { return ({
-        resetCurrentClickedMonth: function () {
-            setActiveMonthLabel('');
-        },
-    }); });
     return (React.createElement(Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: { index: initialMonthIndex !== null && initialMonthIndex !== void 0 ? initialMonthIndex : 0, align: 'center' }, increaseViewportBy: 500, itemSize: function (el) { return el.getBoundingClientRect().height + 32; }, customScrollParent: scrollableContainer, useWindowScroll: true, className: styles.virtuoso }));
 };
 var CalendarMonthOnlyViewHeader = function () { return (React.createElement("table", { className: styles.dayNames },
@@ -192,7 +223,6 @@ var CalendarMobile = forwardRef(function (_a, ref) {
     var _b, _c;
     var _d = _a.hasHeader, hasHeader = _d === void 0 ? true : _d, _e = _a.allowSelectionFromEmptyRange, allowSelectionFromEmptyRange = _e === void 0 ? false : _e, className = _a.className, _f = _a.defaultView, defaultView = _f === void 0 ? 'days' : _f, _g = _a.selectorView, selectorView = _g === void 0 ? 'full' : _g, value = _a.value, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, onChange = _a.onChange, onMonthTitleClick = _a.onMonthTitleClick, dataTestId = _a.dataTestId, open = _a.open, onClose = _a.onClose, _h = _a.title, title = _h === void 0 ? 'Календарь' : _h, _j = _a.yearsAmount, yearsAmount = _j === void 0 ? 3 : _j, onApply = _a.onApply, clickableMonth = _a.clickableMonth, restProps = __rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply", "clickableMonth"]);
     var _k = useState(), modalRef = _k[0], setModalRef = _k[1];
-    var resetCurrentClickedMonth = useRef(null);
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
@@ -203,10 +233,8 @@ var CalendarMobile = forwardRef(function (_a, ref) {
         handleClose === null || handleClose === void 0 ? void 0 : handleClose();
     };
     var handleClear = function () {
-        var _a;
         if (onChange)
             onChange();
-        (_a = resetCurrentClickedMonth === null || resetCurrentClickedMonth === void 0 ? void 0 : resetCurrentClickedMonth.current) === null || _a === void 0 ? void 0 : _a.resetCurrentClickedMonth();
     };
     var renderDayNames = function () { return (monthOnlyView ? React.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
@@ -219,7 +247,7 @@ var CalendarMobile = forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, __assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth }, commonProps, restProps)));
+            return (React.createElement(CalendarMonthOnlyView, __assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth }, commonProps, restProps)));
         }
         return (React.createElement(CalendarDesktop, __assign({ responsive: true, className: cn(className, styles.calendar), contentClassName: styles.content, dataTestId: getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };

package/calendar/esm/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/esm/components/calendar-mobile/index.js

@@ -7,7 +7,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/esm/mobile';
@@ -18,10 +21,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/esm/desktop';
@@ -35,7 +36,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';
@@ -48,7 +48,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/esm';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

package/calendar/esm/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/esm/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/esm/components/days-table/Component.js

@@ -1,8 +1,7 @@
 import { __assign } from 'tslib';
-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';
@@ -39,11 +38,9 @@ require('./index.css');
 
 var DaysTable = function (_a) {
     var _b;
-    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.withTransition, withTransition = _h === void 0 ? true : _h, _j = _a.monthClicked, monthClicked = _j === void 0 ? false : _j, onChange = _a.onChange;
+    var _c = _a.weeks, weeks = _c === void 0 ? [] : _c, _d = _a.activeMonth, activeMonth = _d === void 0 ? new Date() : _d, highlighted = _a.highlighted, selectedFrom = _a.selectedFrom, selectedTo = _a.selectedTo, _e = _a.rangeComplete, rangeComplete = _e === void 0 ? selectedFrom && selectedTo : _e, getDayProps = _a.getDayProps, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, responsive = _a.responsive, _g = _a.shape, shape = _g === void 0 ? 'rounded' : _g, _h = _a.withTransition, withTransition = _h === void 0 ? true : _h;
     var activeMonthRef = useRef(activeMonth);
     var directionRef = useRef();
-    var currentStartMonth = useRef();
-    var currentEndPeriod = useRef();
     activeMonthRef.current = activeMonth;
     var prevActiveMonth = usePrevious(activeMonth);
     if (prevActiveMonth && prevActiveMonth !== activeMonth) {
@@ -86,15 +83,6 @@ var DaysTable = function (_a) {
             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", __assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
@@ -134,12 +122,6 @@ var DaysTable = function (_a) {
     };
     var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
     var renderMonth = function () { return React.createElement("tbody", null, weeks.map(renderWeek)); };
-    useEffect(function () {
-        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], (_b = {},
             _b[styles.responsive] = responsive,
             _b)) },

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

@@ -3,7 +3,6 @@ import 'tslib';
 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/esm/desktop/Component.desktop.js

@@ -33,7 +33,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/esm/desktop/index.js

@@ -9,7 +9,6 @@ import '../../../shared/esm';
 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/esm/index.js

@@ -9,7 +9,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/esm/mobile';
@@ -20,10 +23,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/esm/desktop';
@@ -37,7 +38,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';
@@ -50,7 +50,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/esm';
 import '@alfalab/icons-glyph/ChevronBackMIcon';

package/calendar/esm/mobile/index.js

@@ -7,7 +7,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/esm/mobile';
@@ -18,10 +21,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/esm/desktop';
@@ -35,7 +36,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';
@@ -48,7 +48,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/esm';
 import '@alfalab/icons-glyph/ChevronBackMIcon';