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

package/amount-input/modern/utils/index.js

@@ -50,5 +50,10 @@ function getCurrencyCodeWithFormat(currency, codeFormat) {
     }
     return codeFormat === 'symbolic' ? getCurrencySymbol(currency) : currency;
 }
+const getVisiblePlaceholder = (placeholder, label, labelView) => {
+    if (!label)
+        return placeholder;
+    return labelView === 'outer' ? placeholder : undefined;
+};
 
-export { getAmountValueFromStr, getCurrencyCodeWithFormat, getFormattedValue };
+export { getAmountValueFromStr, getCurrencyCodeWithFormat, getFormattedValue, getVisiblePlaceholder };

package/amount-input/utils/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * https://github.com/core-ds/utils
  * TODO: нужно перенести утилиты в этот проект, когда он будет готов
@@ -13,4 +14,5 @@ import { AmountInputProps } from "../Component";
 declare function getFormattedValue(enteredValue: string, currency: CurrencyCodes, minority: number): string;
 declare function getAmountValueFromStr(str: string, minority: number): number | null;
 declare function getCurrencyCodeWithFormat(currency: CurrencyCodes, codeFormat: AmountInputProps['codeFormat']): string;
-export { getFormattedValue, getAmountValueFromStr, getCurrencyCodeWithFormat };
+declare const getVisiblePlaceholder: (placeholder: string, label: React.ReactNode, labelView?: string) => string | undefined;
+export { getFormattedValue, getAmountValueFromStr, getCurrencyCodeWithFormat, getVisiblePlaceholder };

package/amount-input/utils/index.js

@@ -52,7 +52,13 @@ function getCurrencyCodeWithFormat(currency, codeFormat) {
     }
     return codeFormat === 'symbolic' ? utils.getCurrencySymbol(currency) : currency;
 }
+var getVisiblePlaceholder = function (placeholder, label, labelView) {
+    if (!label)
+        return placeholder;
+    return labelView === 'outer' ? placeholder : undefined;
+};
 
 exports.getAmountValueFromStr = getAmountValueFromStr;
 exports.getCurrencyCodeWithFormat = getCurrencyCodeWithFormat;
 exports.getFormattedValue = getFormattedValue;
+exports.getVisiblePlaceholder = getVisiblePlaceholder;

package/bottom-sheet/components/header/index.css

@@ -28,9 +28,9 @@
 
     /* header */
     --bottom-sheet-header-border-bottom: 1px solid var(--color-light-neutral-300);
-    --bottom-sheet-title-font-size: 18px;
-    --bottom-sheet-title-font-weight: 700;
-    --bottom-sheet-title-line-height: 24px;
+    --bottom-sheet-title-font-size: 20px;
+    --bottom-sheet-title-font-weight: 600;
+    --bottom-sheet-title-line-height: 28px;
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
@@ -59,7 +59,7 @@
 } .bottom-sheet__addonFixed_c0279 {
     position: fixed;
 } .bottom-sheet__title_c0279 {
-    padding: var(--gap-s) var(--gap-xs);
+    padding: 10px var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);

package/bottom-sheet/cssm/components/header/index.module.css

@@ -27,9 +27,9 @@
 
     /* header */
     --bottom-sheet-header-border-bottom: 1px solid var(--color-light-neutral-300);
-    --bottom-sheet-title-font-size: 18px;
-    --bottom-sheet-title-font-weight: 700;
-    --bottom-sheet-title-line-height: 24px;
+    --bottom-sheet-title-font-size: 20px;
+    --bottom-sheet-title-font-weight: 600;
+    --bottom-sheet-title-line-height: 28px;
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
@@ -58,7 +58,7 @@
 } .addonFixed {
     position: fixed;
 } .title {
-    padding: var(--gap-s) var(--gap-xs);
+    padding: 10px var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);

package/bottom-sheet/esm/components/header/index.css

@@ -28,9 +28,9 @@
 
     /* header */
     --bottom-sheet-header-border-bottom: 1px solid var(--color-light-neutral-300);
-    --bottom-sheet-title-font-size: 18px;
-    --bottom-sheet-title-font-weight: 700;
-    --bottom-sheet-title-line-height: 24px;
+    --bottom-sheet-title-font-size: 20px;
+    --bottom-sheet-title-font-weight: 600;
+    --bottom-sheet-title-line-height: 28px;
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
@@ -59,7 +59,7 @@
 } .bottom-sheet__addonFixed_c0279 {
     position: fixed;
 } .bottom-sheet__title_c0279 {
-    padding: var(--gap-s) var(--gap-xs);
+    padding: 10px var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);

package/bottom-sheet/modern/components/header/index.css

@@ -28,9 +28,9 @@
 
     /* header */
     --bottom-sheet-header-border-bottom: 1px solid var(--color-light-neutral-300);
-    --bottom-sheet-title-font-size: 18px;
-    --bottom-sheet-title-font-weight: 700;
-    --bottom-sheet-title-line-height: 24px;
+    --bottom-sheet-title-font-size: 20px;
+    --bottom-sheet-title-font-weight: 600;
+    --bottom-sheet-title-line-height: 28px;
     --bottom-sheet-title-font-family: var(--font-family-system);
 
     /* footer */
@@ -59,7 +59,7 @@
 } .bottom-sheet__addonFixed_c0279 {
     position: fixed;
 } .bottom-sheet__title_c0279 {
-    padding: var(--gap-s) var(--gap-xs);
+    padding: 10px var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);

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

@@ -8,7 +8,10 @@ var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var endOfDay = require('date-fns/endOfDay');
 var isAfter = require('date-fns/isAfter');
+var isSameDay = require('date-fns/isSameDay');
 var isSameMonth = require('date-fns/isSameMonth');
+var isThisMonth = require('date-fns/isThisMonth');
+var lastDayOfMonth = require('date-fns/lastDayOfMonth');
 var startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var mobile$1 = require('../../../button/mobile');
@@ -28,7 +31,10 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
 var isAfter__default = /*#__PURE__*/_interopDefaultCompat(isAfter);
+var isSameDay__default = /*#__PURE__*/_interopDefaultCompat(isSameDay);
 var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
+var isThisMonth__default = /*#__PURE__*/_interopDefaultCompat(isThisMonth);
+var lastDayOfMonth__default = /*#__PURE__*/_interopDefaultCompat(lastDayOfMonth);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
@@ -46,8 +52,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = 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 = React.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.useRange({
         mode: mode,
         value: value,
@@ -71,7 +76,18 @@ var CalendarMonthOnlyView = function (_a) {
         return startOfMonth__default.default(selected ||
             utils.limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    var _g = useCalendar.useCalendar(tslib.__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.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 = React.useMemo(function () {
         var eventsMap = utils.dateArrayToHashTable(events || []);
         var offDaysMap = utils.dateArrayToHashTable(offDays || []);
@@ -105,18 +121,46 @@ var CalendarMonthOnlyView = function (_a) {
         var date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth__default.default(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 && utils.isRangeValue(value)) {
+            var initialMonthDate = activeMonths[initialMonthIndex].date;
+            var currentMonthDate = activeMonths[currentMonthIndex].date;
+            var firstAvailableDayOfMonth = startOfMonth__default.default(initialMonthDate).getTime();
+            /**
+             * последний доступный день месяца в timestamp
+             * представлен в виде последнего календарного дня, либо в виде текущей даты для актуального месяца
+             */
+            var lastAvailableDayOfMonth = isThisMonth__default.default(initialMonthDate)
+                ? startOfDay__default.default(new Date()).getTime()
+                : lastDayOfMonth__default.default(initialMonthDate).getTime();
+            var dateFrom = value.dateFrom, dateTo = value.dateTo;
+            if (dateFrom &&
+                dateTo &&
+                isSameMonth__default.default(initialMonthDate, currentMonthDate) &&
+                isSameDay__default.default(firstAvailableDayOfMonth, dateFrom) &&
+                isSameDay__default.default(lastAvailableDayOfMonth, dateTo)) {
+                return true;
+            }
         }
-        else {
-            setActiveMonthLabel('');
-            if (onChange) {
+        return false;
+    };
+    var handleClickMonthLabel = function (index) {
+        if (onChange) {
+            var date = activeMonths[index].date;
+            var firstAvailableDayOfMonth = startOfMonth__default.default(date).getTime();
+            var lastAvailableDayOfMonth = isThisMonth__default.default(date)
+                ? startOfDay__default.default(new Date()).getTime()
+                : lastDayOfMonth__default.default(date).getTime();
+            if (isMonthActive(index)) {
                 onChange();
             }
+            else {
+                onChange(firstAvailableDayOfMonth, lastAvailableDayOfMonth);
+            }
         }
     };
-    var getMonthTitle = function (index, isClickableMonth) {
+    var getMonthLabel = function (index, isClickableMonth) {
         if (isClickableMonth) {
             return (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles.monthTitle, view: 'primary-small', color: 'primary' }, activeMonths[index].title));
         }
@@ -124,7 +168,6 @@ var CalendarMonthOnlyView = function (_a) {
     };
     var renderMonth = function (index) {
         var _a;
-        var monthClicked = activeMonthLabel === activeMonths[index].title;
         var isAfterDate = isAfter__default.default(activeMonths[index].date, activeMonth);
         return (React__default.default.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
             onMonthTitleClick ? (
@@ -134,16 +177,11 @@ var CalendarMonthOnlyView = function (_a) {
             React__default.default.createElement("span", tslib.__assign({ className: cn__default.default(styles.month, tslib.__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__default.default.createElement(components_daysTable_Component.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__default.default.createElement(components_daysTable_Component.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 })));
     };
-    React.useImperativeHandle(resetCurrentClickedMonth, function () { return ({
-        resetCurrentClickedMonth: function () {
-            setActiveMonthLabel('');
-        },
-    }); });
     return (React__default.default.createElement(reactVirtuoso.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__default.default.createElement("table", { className: styles.dayNames },
@@ -153,7 +191,6 @@ var CalendarMobile = React.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 = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply", "clickableMonth"]);
     var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
-    var resetCurrentClickedMonth = React.useRef(null);
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
@@ -164,10 +201,8 @@ var CalendarMobile = React.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__default.default.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
@@ -180,7 +215,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth }, commonProps, restProps)));
         }
         return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles.calendar), contentClassName: styles.content, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };

package/calendar/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/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/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/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');
@@ -31,11 +30,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 = 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) {
@@ -78,15 +75,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.dayWrapper, (_a = {},
@@ -126,12 +114,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.daysTable, directionRef.current && styles[directionRef.current], (_b = {},
             _b[styles.responsive] = responsive,
             _b)) },

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

@@ -8,7 +8,10 @@ var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
 var endOfDay = require('date-fns/endOfDay');
 var isAfter = require('date-fns/isAfter');
+var isSameDay = require('date-fns/isSameDay');
 var isSameMonth = require('date-fns/isSameMonth');
+var isThisMonth = require('date-fns/isThisMonth');
+var lastDayOfMonth = require('date-fns/lastDayOfMonth');
 var startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var mobile$1 = require('../../../../button/cssm/mobile');
@@ -31,7 +34,10 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
 var isAfter__default = /*#__PURE__*/_interopDefaultCompat(isAfter);
+var isSameDay__default = /*#__PURE__*/_interopDefaultCompat(isSameDay);
 var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
+var isThisMonth__default = /*#__PURE__*/_interopDefaultCompat(isThisMonth);
+var lastDayOfMonth__default = /*#__PURE__*/_interopDefaultCompat(lastDayOfMonth);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 var backdropTransitionStyles__default = /*#__PURE__*/_interopDefaultCompat(backdropTransitionStyles);
@@ -43,8 +49,7 @@ if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = 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 = React.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.useRange({
         mode: mode,
         value: value,
@@ -68,7 +73,18 @@ var CalendarMonthOnlyView = function (_a) {
         return startOfMonth__default.default(selected ||
             utils.limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
-    var _g = useCalendar.useCalendar(tslib.__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.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 = React.useMemo(function () {
         var eventsMap = utils.dateArrayToHashTable(events || []);
         var offDaysMap = utils.dateArrayToHashTable(offDays || []);
@@ -102,18 +118,46 @@ var CalendarMonthOnlyView = function (_a) {
         var date = range.value || range.selectedFrom || activeMonth.getTime() || Date.now();
         return activeMonths.findIndex(function (m) { return isSameMonth__default.default(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 && utils.isRangeValue(value)) {
+            var initialMonthDate = activeMonths[initialMonthIndex].date;
+            var currentMonthDate = activeMonths[currentMonthIndex].date;
+            var firstAvailableDayOfMonth = startOfMonth__default.default(initialMonthDate).getTime();
+            /**
+             * последний доступный день месяца в timestamp
+             * представлен в виде последнего календарного дня, либо в виде текущей даты для актуального месяца
+             */
+            var lastAvailableDayOfMonth = isThisMonth__default.default(initialMonthDate)
+                ? startOfDay__default.default(new Date()).getTime()
+                : lastDayOfMonth__default.default(initialMonthDate).getTime();
+            var dateFrom = value.dateFrom, dateTo = value.dateTo;
+            if (dateFrom &&
+                dateTo &&
+                isSameMonth__default.default(initialMonthDate, currentMonthDate) &&
+                isSameDay__default.default(firstAvailableDayOfMonth, dateFrom) &&
+                isSameDay__default.default(lastAvailableDayOfMonth, dateTo)) {
+                return true;
+            }
         }
-        else {
-            setActiveMonthLabel('');
-            if (onChange) {
+        return false;
+    };
+    var handleClickMonthLabel = function (index) {
+        if (onChange) {
+            var date = activeMonths[index].date;
+            var firstAvailableDayOfMonth = startOfMonth__default.default(date).getTime();
+            var lastAvailableDayOfMonth = isThisMonth__default.default(date)
+                ? startOfDay__default.default(new Date()).getTime()
+                : lastDayOfMonth__default.default(date).getTime();
+            if (isMonthActive(index)) {
                 onChange();
             }
+            else {
+                onChange(firstAvailableDayOfMonth, lastAvailableDayOfMonth);
+            }
         }
     };
-    var getMonthTitle = function (index, isClickableMonth) {
+    var getMonthLabel = function (index, isClickableMonth) {
         if (isClickableMonth) {
             return (React__default.default.createElement(coreComponentsTypography.Typography.Text, { className: styles__default.default.monthTitle, view: 'primary-small', color: 'primary' }, activeMonths[index].title));
         }
@@ -121,7 +165,6 @@ var CalendarMonthOnlyView = function (_a) {
     };
     var renderMonth = function (index) {
         var _a;
-        var monthClicked = activeMonthLabel === activeMonths[index].title;
         var isAfterDate = isAfter__default.default(activeMonths[index].date, activeMonth);
         return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
             onMonthTitleClick ? (
@@ -131,16 +174,11 @@ var CalendarMonthOnlyView = function (_a) {
             React__default.default.createElement("span", tslib.__assign({ className: cn__default.default(styles__default.default.month, tslib.__assign({}, (clickableMonth && (_a = {},
                     _a[styles__default.default.clickableMonth] = true,
                     _a[styles__default.default.rectangular] = shape === 'rectangular',
-                    _a[styles__default.default.active] = monthClicked,
+                    _a[styles__default.default.active] = isMonthActive(index),
                     _a[styles__default.default.disabled] = isAfterDate,
-                    _a)))) }, (clickableMonth && { onClick: function () { return handleClickMonthLabel(index); } })), getMonthTitle(index, clickableMonth))),
-            React__default.default.createElement(components_daysTable_Component.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__default.default.createElement(components_daysTable_Component.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 })));
     };
-    React.useImperativeHandle(resetCurrentClickedMonth, function () { return ({
-        resetCurrentClickedMonth: function () {
-            setActiveMonthLabel('');
-        },
-    }); });
     return (React__default.default.createElement(reactVirtuoso.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__default.default.virtuoso }));
 };
 var CalendarMonthOnlyViewHeader = function () { return (React__default.default.createElement("table", { className: styles__default.default.dayNames },
@@ -150,7 +188,6 @@ var CalendarMobile = React.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 = tslib.__rest(_a, ["hasHeader", "allowSelectionFromEmptyRange", "className", "defaultView", "selectorView", "value", "selectedFrom", "selectedTo", "onChange", "onMonthTitleClick", "dataTestId", "open", "onClose", "title", "yearsAmount", "onApply", "clickableMonth"]);
     var _k = React.useState(), modalRef = _k[0], setModalRef = _k[1];
-    var resetCurrentClickedMonth = React.useRef(null);
     var monthOnlyView = selectorView === 'month-only';
     var handleClose = function () {
         if (onClose)
@@ -161,10 +198,8 @@ var CalendarMobile = React.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__default.default.createElement(CalendarMonthOnlyViewHeader, null) : null); };
     var renderContent = function () {
@@ -177,7 +212,7 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth, resetCurrentClickedMonth: resetCurrentClickedMonth }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib.__assign({ yearsAmount: yearsAmount, scrollableContainer: modalRef, onMonthTitleClick: onMonthTitleClick, clickableMonth: clickableMonth }, commonProps, restProps)));
         }
         return (React__default.default.createElement(desktop_Component_desktop.CalendarDesktop, tslib.__assign({ responsive: true, className: cn__default.default(className, styles__default.default.calendar), contentClassName: styles__default.default.content, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'mobile') }, commonProps, restProps)));
     };

package/calendar/cssm/components/calendar-mobile/index.module.css

@@ -19,6 +19,7 @@
     /* Hard up */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */
     --border-radius-l: 12px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+    --border-radius-pill: 99px;
 
     /* новые значения, используйте их */
 } :root { /* deprecated */ /* deprecated */
@@ -96,7 +97,7 @@
 } .month.clickableMonth {
         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