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

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

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/desktop/Component.desktop.js

@@ -43,7 +43,7 @@ var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
 var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
 var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
 
-var styles = {"component":"calendar__component_1a5m2","responsive":"calendar__responsive_1a5m2","period":"calendar__period_1a5m2","monthYear":"calendar__monthYear_1a5m2","container":"calendar__container_1a5m2","customScrollbar":"calendar__customScrollbar_1a5m2","nativeScrollbar":"calendar__nativeScrollbar_1a5m2","sixWeeks":"calendar__sixWeeks_1a5m2"};
+var styles = {"component":"calendar__component_xy86k","responsive":"calendar__responsive_xy86k","period":"calendar__period_xy86k","monthYear":"calendar__monthYear_xy86k","container":"calendar__container_xy86k","customScrollbar":"calendar__customScrollbar_xy86k","nativeScrollbar":"calendar__nativeScrollbar_xy86k","sixWeeks":"calendar__sixWeeks_xy86k"};
 require('./desktop.css');
 
 var useCustomWebkitScrollbar = coreComponentsShared.hooks.useCustomWebkitScrollbar;

package/calendar/desktop/desktop.css

@@ -48,26 +48,26 @@
     /* disabled */
 
     /* marker */
-} .calendar__component_1a5m2 {
+} .calendar__component_xy86k {
     width: var(--calendar-width);
     height: var(--calendar-height);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     outline: none
-} @media (max-width: 374px) { .calendar__component_1a5m2 {
+} @media (max-width: 374px) { .calendar__component_xy86k {
         align-items: center;
         width: 100%
 }
-    } .calendar__component_1a5m2.calendar__responsive_1a5m2 {
+    } .calendar__component_xy86k.calendar__responsive_xy86k {
         width: 100%
-    } .calendar__component_1a5m2.calendar__responsive_1a5m2 .calendar__period_1a5m2 {
+    } .calendar__component_xy86k.calendar__responsive_xy86k .calendar__period_xy86k {
             width: 100%;
-        } .calendar__component_1a5m2.calendar__responsive_1a5m2 .calendar__monthYear_1a5m2 {
+        } .calendar__component_xy86k.calendar__responsive_xy86k .calendar__monthYear_xy86k {
             width: 100%;
-        } .calendar__component_1a5m2.calendar__responsive_1a5m2 .calendar__container_1a5m2 {
+        } .calendar__component_xy86k.calendar__responsive_xy86k .calendar__container_xy86k {
             width: 100%;
-        } .calendar__container_1a5m2 {
+        } .calendar__container_xy86k {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -75,65 +75,65 @@
     box-sizing: border-box;
     flex-grow: 1;
     overflow: hidden
-} .calendar__container_1a5m2.calendar__customScrollbar_1a5m2 {
+} .calendar__container_xy86k.calendar__customScrollbar_xy86k {
         overflow: auto;
         cursor: auto;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar {
         width: 12px;
         height: 12px;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-track {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-track {
         background-color: transparent;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-track-piece {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-track-piece {
         background-color: transparent;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-thumb {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-thumb {
         background-color: var(--color-light-neutral-translucent-500);
         border-color: transparent;
         border-style: solid;
         border-width: 4px;
         background-clip: padding-box;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-thumb:vertical {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-thumb:vertical {
         border-radius: var(--border-radius-circle) / 6px;
         min-height: 40px;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-thumb:vertical:hover {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-thumb:vertical:hover {
         border-radius: var(--border-radius-circle) / 7px;
         border-width: 4px 3px;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-thumb:horizontal {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-thumb:horizontal {
         border-radius: 6px / var(--border-radius-circle);
         min-width: 40px;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-thumb:horizontal:hover {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-thumb:horizontal:hover {
         border-radius: 7px / var(--border-radius-circle);
         border-width: 3px 4px;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-thumb:active {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-thumb:active {
         background-color: var(--color-light-text-secondary);
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-resizer {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-resizer {
         background: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="%2386868a" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.64645 0.646447C8.84171 0.841709 8.84171 1.15829 8.64645 1.35355L1.35355 8.64645C1.15829 8.84171 0.841709 8.84171 0.646447 8.64645C0.451184 8.45118 0.451184 8.1346 0.646447 7.93934L7.93934 0.646447C8.1346 0.451184 8.45118 0.451184 8.64645 0.646447ZM8.64645 3.64645C8.84171 3.84171 8.84171 4.15829 8.64645 4.35355L4.35355 8.64645C4.15829 8.84171 3.84171 8.84171 3.64645 8.64645C3.45118 8.45118 3.45118 8.1346 3.64645 7.93934L7.93934 3.64645C8.1346 3.45118 8.45118 3.45118 8.64645 3.64645Z" /></svg>')
             no-repeat right bottom;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-button,
-    .calendar__container_1a5m2.calendar__customScrollbar_1a5m2::-webkit-scrollbar-corner {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-button,
+    .calendar__container_xy86k.calendar__customScrollbar_xy86k::-webkit-scrollbar-corner {
         display: none;
-    } .calendar__container_1a5m2.calendar__customScrollbar_1a5m2 {
+    } .calendar__container_xy86k.calendar__customScrollbar_xy86k {
 
         display: block;
         padding-right: var(--gap-2xs);
         overflow: hidden auto;
         scrollbar-gutter: stable;
-    } .calendar__container_1a5m2.calendar__nativeScrollbar_1a5m2 {
+    } .calendar__container_xy86k.calendar__nativeScrollbar_xy86k {
         overflow: hidden auto;
-    } @media (max-width: 374px) { .calendar__container_1a5m2 {
+    } @media (max-width: 374px) { .calendar__container_xy86k {
         width: 288px
 }
-    } .calendar__sixWeeks_1a5m2 {
+    } .calendar__sixWeeks_xy86k {
     height: 388px;
-} .calendar__period_1a5m2 {
+} .calendar__period_xy86k {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__period_1a5m2 {
+} @media (max-width: 374px) { .calendar__period_xy86k {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto
 }
-    } .calendar__monthYear_1a5m2 {
+    } .calendar__monthYear_xy86k {
     width: var(--calendar-inner-width)
-} @media (max-width: 374px) { .calendar__monthYear_1a5m2 {
+} @media (max-width: 374px) { .calendar__monthYear_xy86k {
         justify-content: space-between;
         width: var(--calendar-mobile-inner-width);
         margin: 0 auto

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<{