@alfalab/core-components 36.4.0 → 36.5.1-beta.0

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

@@ -8,9 +8,9 @@ var startOfDay = require('date-fns/startOfDay');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsButton = require('../../../../button/cssm');
 var mobile = require('../../../../modal/cssm/mobile');
-var Component = require('../../Component.js');
-require('date-fns/differenceInDays');
+var Component_desktop = require('../../Component.desktop.js');
 require('@alfalab/hooks');
+require('date-fns/differenceInDays');
 var useCalendar = require('../../useCalendar.js');
 require('date-fns/endOfWeek');
 require('date-fns/startOfWeek');
@@ -64,7 +64,7 @@ require('../years-table/Component.js');
 require('date-fns/isSameYear');
 require('date-fns/isThisYear');
 require('../years-table/index.module.css');
-require('../../index.module.css');
+require('../../desktop.module.css');
 require('react-transition-group');
 require('date-fns/isEqual');
 require('date-fns/isLastDayOfMonth');
@@ -74,6 +74,15 @@ require('react-merge-refs');
 require('date-fns/setYear');
 require('date-fns/subYears');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var endOfDay__default = /*#__PURE__*/_interopDefaultCompat(endOfDay);
+var startOfDay__default = /*#__PURE__*/_interopDefaultCompat(startOfDay);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 // ResizeObserverPolyfill необходим для корректной работы react-virtuoso.
 if (typeof window !== 'undefined' && !window.ResizeObserver) {
     window.ResizeObserver = resizeObserver.ResizeObserver;
@@ -85,11 +94,11 @@ var CalendarMonthOnlyView = function (_a) {
         return yearsAmount * 12 + currentMonthIndex;
     }, [yearsAmount]);
     var month = React.useMemo(function () { return (monthTimestamp ? new Date(monthTimestamp) : undefined); }, [monthTimestamp]);
-    var minDate = React.useMemo(function () { return (minDateTimestamp ? startOfDay(minDateTimestamp) : undefined); }, [minDateTimestamp]);
-    var maxDate = React.useMemo(function () { return (maxDateTimestamp ? endOfDay(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
+    var minDate = React.useMemo(function () { return (minDateTimestamp ? startOfDay__default.default(minDateTimestamp) : undefined); }, [minDateTimestamp]);
+    var maxDate = React.useMemo(function () { return (maxDateTimestamp ? endOfDay__default.default(maxDateTimestamp) : undefined); }, [maxDateTimestamp]);
     var selected = React.useMemo(function () { return (value ? new Date(value) : undefined); }, [value]);
     var defaultMonth = React.useMemo(function () {
-        return startOfMonth(selected ||
+        return startOfMonth__default.default(selected ||
             utils.limitDate(defaultMonthTimestamp || Date.now(), minDateTimestamp, maxDateTimestamp));
     }, [defaultMonthTimestamp, maxDateTimestamp, minDateTimestamp, selected]);
     var _c = useCalendar.useCalendar({
@@ -130,10 +139,10 @@ var CalendarMonthOnlyView = function (_a) {
                 holidaysMap: holidaysMap,
             }), title: "".concat(utils.monthName(item.date), " ").concat(item.date.getFullYear()) })); });
     }, [events, offDays, holidays, months, yearsAmount, minDate, maxDate, selected]);
-    var renderMonth = function (index) { return (React.createElement("div", { className: styles.daysTable, id: "month-".concat(index) },
-        React.createElement("span", { className: styles.month }, activeMonths[index].title),
-        React.createElement(components_daysTable_Component.DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true }))); };
-    return (React.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, increaseViewportBy: 800, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
+    var renderMonth = function (index) { return (React__default.default.createElement("div", { className: styles__default.default.daysTable, id: "month-".concat(index) },
+        React__default.default.createElement("span", { className: styles__default.default.month }, activeMonths[index].title),
+        React__default.default.createElement(components_daysTable_Component.DaysTable, { weeks: activeMonths[index].weeks, activeMonth: activeMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, getDayProps: getDayProps, highlighted: highlighted, rangeComplete: rangeComplete, hasHeader: false, responsive: true }))); };
+    return (React__default.default.createElement(reactVirtuoso.Virtuoso, { totalCount: activeMonths.length, itemContent: renderMonth, initialTopMostItemIndex: initialMonthIndex, increaseViewportBy: 800, itemSize: function (el) { return el.getBoundingClientRect().height + 32; } }));
 };
 var CalendarMobile = React.forwardRef(function (_a, ref) {
     var _b, _c;
@@ -148,9 +157,9 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
         if (onChange)
             onChange();
     };
-    var renderDayNames = function () { return (React.createElement("table", { className: styles.dayNames },
-        React.createElement("thead", null,
-            React.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); }))))); };
+    var renderDayNames = function () { return (React__default.default.createElement("table", { className: styles__default.default.dayNames },
+        React__default.default.createElement("thead", null,
+            React__default.default.createElement("tr", null, utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles__default.default.dayName, key: dayName }, dayName)); }))))); };
     var renderContent = function () {
         var commonProps = {
             value: value,
@@ -161,9 +170,9 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             selectedTo: selectedTo,
         };
         if (monthOnlyView) {
-            return (React.createElement(CalendarMonthOnlyView, tslib_es6.__assign({ open: open, yearsAmount: yearsAmount }, commonProps, restProps)));
+            return (React__default.default.createElement(CalendarMonthOnlyView, tslib_es6.__assign({ open: open, yearsAmount: yearsAmount }, commonProps, restProps)));
         }
-        return (React.createElement(Component.Calendar, tslib_es6.__assign({ responsive: true, className: styles.calendar }, commonProps, restProps)));
+        return (React__default.default.createElement(Component_desktop.CalendarDesktop, tslib_es6.__assign({ responsive: true, className: styles__default.default.calendar }, commonProps, restProps)));
     };
     var renderFooter = function () {
         if (selectedFrom || selectedTo) {
@@ -171,21 +180,21 @@ var CalendarMobile = React.forwardRef(function (_a, ref) {
             if (allowSelectionFromEmptyRange) {
                 selectButtonDisabled = !selectedFrom;
             }
-            return (React.createElement(React.Fragment, null,
-                React.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"),
-                React.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")));
+            return (React__default.default.createElement(React__default.default.Fragment, null,
+                React__default.default.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose, disabled: selectButtonDisabled }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"),
+                React__default.default.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClear }, "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C")));
         }
         if (value) {
-            return (React.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
+            return (React__default.default.createElement(coreComponentsButton.Button, { view: 'primary', size: 's', block: true, onClick: handleClose }, "\u0412\u044B\u0431\u0440\u0430\u0442\u044C"));
         }
-        return (React.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
+        return (React__default.default.createElement(coreComponentsButton.Button, { view: 'secondary', size: 's', block: true, onClick: handleClose }, "\u041E\u0442\u043C\u0435\u043D\u0430"));
     };
-    return (React.createElement("div", { className: cn(className, styles.component), ref: ref, "data-test-id": dataTestId },
-        React.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles.modal, wrapperClassName: styles.wrapper },
-            hasHeader && (React.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, align: 'center', leftAddons: React.createElement("div", null), sticky: true, className: cn((_b = {}, _b[styles.withZIndex] = selectorView === 'full', _b)) })),
+    return (React__default.default.createElement("div", { className: cn__default.default(className, styles__default.default.component), ref: ref, "data-test-id": dataTestId },
+        React__default.default.createElement(mobile.ModalMobile, { open: open, onClose: handleClose, ref: modalRef, className: styles__default.default.modal, wrapperClassName: styles__default.default.wrapper },
+            hasHeader && (React__default.default.createElement(mobile.ModalMobile.Header, { hasCloser: true, title: title, align: 'center', leftAddons: React__default.default.createElement("div", null), sticky: true, className: cn__default.default((_b = {}, _b[styles__default.default.withZIndex] = selectorView === 'full', _b)) })),
             monthOnlyView && renderDayNames(),
-            React.createElement(mobile.ModalMobile.Content, { flex: true }, renderContent()),
-            React.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn((_c = {}, _c[styles.withZIndex] = selectorView === 'full', _c)) }, renderFooter()))));
+            React__default.default.createElement(mobile.ModalMobile.Content, { flex: true }, renderContent()),
+            React__default.default.createElement(mobile.ModalMobile.Footer, { sticky: true, className: cn__default.default((_c = {}, _c[styles__default.default.withZIndex] = selectorView === 'full', _c)) }, renderFooter()))));
 });
 
 exports.CalendarMobile = CalendarMobile;

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

@@ -9,7 +9,7 @@ require('date-fns/startOfDay');
 require('date-fns/startOfMonth');
 require('../../../../button/cssm');
 require('../../../../modal/cssm/mobile');
-require('../../Component.js');
+require('../../Component.desktop.js');
 require('@alfalab/hooks');
 require('../days-table/Component.js');
 require('react-transition-group');
@@ -71,7 +71,7 @@ require('../../useCalendar.js');
 require('react-merge-refs');
 require('date-fns/setYear');
 require('date-fns/subYears');
-require('../../index.module.css');
+require('../../desktop.module.css');
 require('date-fns/differenceInDays');
 require('./index.module.css');
 

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

@@ -32,6 +32,18 @@ require('date-fns/startOfYear');
 require('date-fns/subDays');
 require('date-fns/subMonths');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
+var isLastDayOfMonth__default = /*#__PURE__*/_interopDefaultCompat(isLastDayOfMonth);
+var isSameDay__default = /*#__PURE__*/_interopDefaultCompat(isSameDay);
+var isToday__default = /*#__PURE__*/_interopDefaultCompat(isToday);
+var isWithinInterval__default = /*#__PURE__*/_interopDefaultCompat(isWithinInterval);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+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;
@@ -41,35 +53,35 @@ var DaysTable = function (_a) {
     var direction = prevActiveMonth && (activeMonth < prevActiveMonth ? 'right' : 'left');
     var selection = utils.getSelectionRange(selectedFrom, selectedTo, highlighted);
     var renderHeader = React.useCallback(function () {
-        return utils.WEEKDAYS.map(function (dayName) { return (React.createElement("th", { className: styles.dayName, key: dayName }, dayName)); });
+        return utils.WEEKDAYS.map(function (dayName) { return (React__default.default.createElement("th", { className: styles__default.default.dayName, key: dayName }, dayName)); });
     }, []);
     var renderDay = function (day, dayIdx) {
         var _a, _b;
         if (!day)
-            return React.createElement("td", { key: dayIdx });
+            return React__default.default.createElement("td", { key: dayIdx });
         var daySelected = day.selected ||
-            (selectedFrom && isSameDay(day.date, selectedFrom)) ||
-            (selectedTo && isSameDay(day.date, selectedTo));
-        var dayHighlighted = highlighted && isEqual(day.date, highlighted);
-        var inRange = selection && isWithinInterval(day.date, selection);
+            (selectedFrom && isSameDay__default.default(day.date, selectedFrom)) ||
+            (selectedTo && isSameDay__default.default(day.date, selectedTo));
+        var dayHighlighted = highlighted && isEqual__default.default(day.date, highlighted);
+        var inRange = selection && isWithinInterval__default.default(day.date, selection);
         var firstDayOfMonth = day.date.getDate() === 1;
-        var lastDayOfMonth = isLastDayOfMonth(day.date);
+        var lastDayOfMonth = isLastDayOfMonth__default.default(day.date);
         var firstDayOfWeek = utils.russianWeekDay(day.date) === 0;
         var lastDayOfWeek = utils.russianWeekDay(day.date) === 6;
         var transitLeft = firstDayOfMonth && inRange && selection && day.date > selection.start;
         var transitRight = lastDayOfMonth && inRange && selection && day.date < selection.end;
-        var rangeStart = selection && isSameDay(day.date, selection.start);
-        var rangeEnd = selection && isSameDay(day.date, selection.end);
+        var rangeStart = selection && isSameDay__default.default(day.date, selection.start);
+        var rangeEnd = selection && isSameDay__default.default(day.date, selection.end);
         var sharpTransitLeft = firstDayOfWeek &&
             firstDayOfMonth &&
             inRange &&
             selection &&
-            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
+            (isSameDay__default.default(day.date, selection.start) || isSameDay__default.default(day.date, selection.end));
         var sharpTransitRight = lastDayOfWeek &&
             lastDayOfMonth &&
             inRange &&
             selection &&
-            (isSameDay(day.date, selection.start) || isSameDay(day.date, selection.end));
+            (isSameDay__default.default(day.date, selection.start) || isSameDay__default.default(day.date, selection.end));
         var dayProps = getDayProps(day);
         var onClick = dayProps.onClick;
         var handleDayClick = function (e) {
@@ -78,49 +90,49 @@ var DaysTable = function (_a) {
         };
         return (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-        React.createElement("td", tslib_es6.__assign({}, dayProps, { key: day.date.getTime(), className: cn(styles.dayWrapper, (_a = {},
-                _a[styles.range] = inRange,
-                _a[styles.rangeComplete] = inRange && rangeComplete,
-                _a[styles.transitLeft] = transitLeft,
-                _a[styles.transitRight] = transitRight,
-                _a[styles.sharpTransitLeft] = sharpTransitLeft,
-                _a[styles.sharpTransitRight] = sharpTransitRight,
-                _a[styles.rangeStart] = rangeStart,
-                _a[styles.rangeEnd] = rangeEnd,
-                _a[styles.cursorPointer] = !day.disabled,
+        React__default.default.createElement("td", tslib_es6.__assign({}, dayProps, { key: day.date.getTime(), className: cn__default.default(styles__default.default.dayWrapper, (_a = {},
+                _a[styles__default.default.range] = inRange,
+                _a[styles__default.default.rangeComplete] = inRange && rangeComplete,
+                _a[styles__default.default.transitLeft] = transitLeft,
+                _a[styles__default.default.transitRight] = transitRight,
+                _a[styles__default.default.sharpTransitLeft] = sharpTransitLeft,
+                _a[styles__default.default.sharpTransitRight] = sharpTransitRight,
+                _a[styles__default.default.rangeStart] = rangeStart,
+                _a[styles__default.default.rangeEnd] = rangeEnd,
+                _a[styles__default.default.cursorPointer] = !day.disabled,
                 _a)), align: 'center', ref: function (node) {
                 /**
                  * После анимации реф-коллбэк вызывается еще раз, и в него передается null и старый activeMonth.
                  * Поэтому приходится хранить актуальный месяц в рефе и сравнивать с ним.
                  */
-                if (startOfMonth(day.date).getTime() === activeMonthRef.current.getTime()) {
+                if (startOfMonth__default.default(day.date).getTime() === activeMonthRef.current.getTime()) {
                     dayProps.ref(node);
                 }
             }, onClick: handleDayClick }),
-            React.createElement(coreComponentsButton.Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn(styles.day, (_b = {},
-                    _b[styles.selected] = daySelected,
-                    _b[styles.today] = isToday(day.date),
-                    _b[styles.disabled] = day.disabled,
-                    _b[styles.holiday] = !day.disabled && day.holiday,
-                    _b[styles.highlighted] = dayHighlighted,
+            React__default.default.createElement(coreComponentsButton.Button, { type: 'button', view: 'ghost', size: 'xs', disabled: day.disabled, className: cn__default.default(styles__default.default.day, (_b = {},
+                    _b[styles__default.default.selected] = daySelected,
+                    _b[styles__default.default.today] = isToday__default.default(day.date),
+                    _b[styles__default.default.disabled] = day.disabled,
+                    _b[styles__default.default.holiday] = !day.disabled && day.holiday,
+                    _b[styles__default.default.highlighted] = dayHighlighted,
                     _b)) },
-                day.event && React.createElement("span", { className: styles.dot }),
+                day.event && React__default.default.createElement("span", { className: styles__default.default.dot }),
                 day.date.getDate())));
     };
-    var renderWeek = function (week, weekIdx) { return (React.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
-    return (React.createElement("table", { className: cn(styles.daysTable, direction && styles[direction], (_b = {},
-            _b[styles.responsive] = responsive,
+    var renderWeek = function (week, weekIdx) { return (React__default.default.createElement("tr", { key: weekIdx }, week.map(renderDay))); };
+    return (React__default.default.createElement("table", { className: cn__default.default(styles__default.default.daysTable, direction && styles__default.default[direction], (_b = {},
+            _b[styles__default.default.responsive] = responsive,
             _b)) },
-        hasHeader && (React.createElement("thead", null,
-            React.createElement("tr", null, renderHeader()))),
-        React.createElement(reactTransitionGroup.TransitionGroup, { component: null },
-            React.createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
-                    enter: styles.daysEnter,
-                    enterActive: styles.daysEnterActive,
-                    exit: styles.daysExit,
-                    exitActive: styles.daysExitActive,
+        hasHeader && (React__default.default.createElement("thead", null,
+            React__default.default.createElement("tr", null, renderHeader()))),
+        React__default.default.createElement(reactTransitionGroup.TransitionGroup, { component: null },
+            React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: activeMonth.getTime(), timeout: 300, classNames: {
+                    enter: styles__default.default.daysEnter,
+                    enterActive: styles__default.default.daysEnterActive,
+                    exit: styles__default.default.daysExit,
+                    exitActive: styles__default.default.daysExitActive,
                 } },
-                React.createElement("tbody", null, weeks.map(renderWeek))))));
+                React__default.default.createElement("tbody", null, weeks.map(renderWeek))))));
 };
 
 exports.DaysTable = DaysTable;

package/calendar/cssm/components/header/Component.js

@@ -2,12 +2,18 @@ var React = require('react');
 var cn = require('classnames');
 var styles = require('./index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var Header = function (_a) {
     var _b;
     var _c = _a.view, view = _c === void 0 ? 'full' : _c, withShadow = _a.withShadow, children = _a.children;
-    return (React.createElement("div", { className: cn(styles.header, (_b = {},
-            _b[styles.monthOnly] = view === 'month-only',
-            _b[styles.withShadow] = withShadow,
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.header, (_b = {},
+            _b[styles__default.default.monthOnly] = view === 'month-only',
+            _b[styles__default.default.withShadow] = withShadow,
             _b)), "aria-live": 'polite' }, children));
 };
 

package/calendar/cssm/components/month-year-header/Component.js

@@ -29,19 +29,25 @@ require('../../tslib.es6-0e9bf404.js');
 require('../../../../button/cssm');
 require('../select-button/index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var MonthYearHeader = function (_a) {
     var value = _a.value, className = _a.className, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
     var month = value ? utils.monthName(value) : undefined;
     var year = value ? value.getFullYear().toString() : undefined;
-    return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
-        React.createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn(styles.button, styles.month), onClick: onMonthClick },
-            React.createElement("span", { className: styles.buttonContent },
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
+        React__default.default.createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn__default.default(styles__default.default.button, styles__default.default.month), onClick: onMonthClick },
+            React__default.default.createElement("span", { className: styles__default.default.buttonContent },
                 month,
-                React.createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, { className: styles.upDownIcon }))),
-        React.createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn(styles.button, styles.year), onClick: onYearClick },
-            React.createElement("span", { className: styles.buttonContent },
+                React__default.default.createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, { className: styles__default.default.upDownIcon }))),
+        React__default.default.createElement(components_selectButton_Component.SelectButton, { view: 'filled', className: cn__default.default(styles__default.default.button, styles__default.default.year), onClick: onYearClick },
+            React__default.default.createElement("span", { className: styles__default.default.buttonContent },
                 year,
-                React.createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, { className: styles.upDownIcon })))));
+                React__default.default.createElement(ChevronDownCompactSIcon.ChevronDownCompactSIcon, { className: styles__default.default.upDownIcon })))));
 };
 
 exports.MonthYearHeader = MonthYearHeader;

package/calendar/cssm/components/months-table/Component.js

@@ -30,17 +30,25 @@ require('date-fns/subMonths');
 require('../../../../button/cssm');
 require('../select-button/index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var isSameMonth__default = /*#__PURE__*/_interopDefaultCompat(isSameMonth);
+var isThisMonth__default = /*#__PURE__*/_interopDefaultCompat(isThisMonth);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var MonthsTable = function (_a) {
     var _b;
     var selectedMonth = _a.selectedMonth, _c = _a.months, months = _c === void 0 ? [] : _c, getMonthProps = _a.getMonthProps, responsive = _a.responsive;
     var view = React.useCallback(function (month) {
-        if (selectedMonth && isSameMonth(selectedMonth, month.date))
+        if (selectedMonth && isSameMonth__default.default(selectedMonth, month.date))
             return 'selected';
-        if (isThisMonth(month.date))
+        if (isThisMonth__default.default(month.date))
             return 'outlined';
         return 'default';
     }, [selectedMonth]);
-    return (React.createElement("div", { className: cn(styles.monthsTable, (_b = {}, _b[styles.responsive] = responsive, _b)) }, months.map(function (month) { return (React.createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getMonthProps(month), { key: month.date.getTime(), className: styles.button, view: view(month) }), utils.monthName(month.date))); })));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.monthsTable, (_b = {}, _b[styles__default.default.responsive] = responsive, _b)) }, months.map(function (month) { return (React__default.default.createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getMonthProps(month), { key: month.date.getTime(), className: styles__default.default.button, view: view(month) }), utils.monthName(month.date))); })));
 };
 
 exports.MonthsTable = MonthsTable;

package/calendar/cssm/components/period-slider/Component.js

@@ -38,6 +38,14 @@ require('date-fns/isToday');
 require('date-fns/isYesterday');
 require('date-fns/startOfQuarter');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var endOfWeek__default = /*#__PURE__*/_interopDefaultCompat(endOfWeek);
+var startOfWeek__default = /*#__PURE__*/_interopDefaultCompat(startOfWeek);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var PeriodSlider = function (_a) {
     var value = _a.value, _b = _a.periodType, periodType = _b === void 0 ? 'month' : _b, className = _a.className, _c = _a.periodFormatter, periodFormatter = _c === void 0 ? components_periodSlider_utils.formatPeriod : _c, _d = _a.prevArrowDisabled, prevArrowDisabled = _d === void 0 ? false : _d, _e = _a.nextArrowDisabled, nextArrowDisabled = _e === void 0 ? false : _e, _f = _a.hideDisabledArrows, hideDisabledArrows = _f === void 0 ? false : _f, _g = _a.isMonthAndYearSelectable, isMonthAndYearSelectable = _g === void 0 ? false : _g, _h = _a.showCurrentYearSelector, showCurrentYearSelector = _h === void 0 ? false : _h, _j = _a.onPrevArrowClick, onPrevArrowClick = _j === void 0 ? function () { return null; } : _j, _k = _a.onNextArrowClick, onNextArrowClick = _k === void 0 ? function () { return null; } : _k, onMonthClick = _a.onMonthClick, onYearClick = _a.onYearClick, dataTestId = _a.dataTestId;
     var _l = React.useMemo(function () {
@@ -52,8 +60,8 @@ var PeriodSlider = function (_a) {
         else {
             _a = [value, value], from = _a[0], to = _a[1];
             if (periodType === 'week') {
-                from = startOfWeek(from, { weekStartsOn: 1 });
-                to = endOfWeek(from, { weekStartsOn: 1 });
+                from = startOfWeek__default.default(from, { weekStartsOn: 1 });
+                to = endOfWeek__default.default(from, { weekStartsOn: 1 });
             }
         }
         return [from, to];
@@ -90,16 +98,16 @@ var PeriodSlider = function (_a) {
     };
     var renderHeader = function () {
         if (!(valueFrom && valueTo)) {
-            return React.createElement("span", { className: cn(styles.period, styles.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
+            return React__default.default.createElement("span", { className: cn__default.default(styles__default.default.period, styles__default.default.empty) }, "\u0423\u043A\u0430\u0436\u0438\u0442\u0435 \u043F\u0435\u0440\u0438\u043E\u0434");
         }
-        return periodType === 'month' && isMonthAndYearSelectable ? (React.createElement("div", null,
-            React.createElement(coreComponentsButton.Button, { className: styles.period, view: 'ghost', size: 'l', onClick: onMonthClick }, utils.monthName(valueFrom)),
-            yearSelectorValue && (React.createElement(coreComponentsButton.Button, { className: cn(styles.yearSelectorButton, styles.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React.createElement("span", { className: styles.period }, periodFormatter(valueFrom, valueTo, periodType)));
+        return periodType === 'month' && isMonthAndYearSelectable ? (React__default.default.createElement("div", null,
+            React__default.default.createElement(coreComponentsButton.Button, { className: styles__default.default.period, view: 'ghost', size: 'l', onClick: onMonthClick }, utils.monthName(valueFrom)),
+            yearSelectorValue && (React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles__default.default.yearSelectorButton, styles__default.default.period), view: 'ghost', size: 'l', onClick: onYearClick }, yearSelectorValue)))) : (React__default.default.createElement("span", { className: styles__default.default.period }, periodFormatter(valueFrom, valueTo, periodType)));
     };
-    return (React.createElement("div", { className: cn(styles.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
-        showArrow('prev') && (React.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "aria-live": 'polite', "data-test-id": dataTestId },
+        showArrow('prev') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handlePrevArrowClick, disabled: prevArrowDisabled || !valueFrom, "aria-label": '\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' })),
         renderHeader(),
-        showArrow('next') && (React.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
+        showArrow('next') && (React__default.default.createElement(coreComponentsIconButton.IconButton, { size: 'xs', className: styles__default.default.arrow, icon: ChevronBackMIcon.ChevronBackMIcon, onClick: handleNextArrowClick, disabled: nextArrowDisabled || !valueFrom, "aria-label": '\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043F\u0435\u0440\u0438\u043E\u0434' }))));
 };
 
 exports.PeriodSlider = PeriodSlider;

package/calendar/cssm/components/period-slider/utils.js

@@ -31,25 +31,45 @@ require('date-fns/startOfDay');
 require('date-fns/subDays');
 require('date-fns/subMonths');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var addDays__default = /*#__PURE__*/_interopDefaultCompat(addDays);
+var addMonths__default = /*#__PURE__*/_interopDefaultCompat(addMonths);
+var addQuarters__default = /*#__PURE__*/_interopDefaultCompat(addQuarters);
+var addWeeks__default = /*#__PURE__*/_interopDefaultCompat(addWeeks);
+var addYears__default = /*#__PURE__*/_interopDefaultCompat(addYears);
+var endOfMonth__default = /*#__PURE__*/_interopDefaultCompat(endOfMonth);
+var endOfQuarter__default = /*#__PURE__*/_interopDefaultCompat(endOfQuarter);
+var endOfWeek__default = /*#__PURE__*/_interopDefaultCompat(endOfWeek);
+var endOfYear__default = /*#__PURE__*/_interopDefaultCompat(endOfYear);
+var getQuarter__default = /*#__PURE__*/_interopDefaultCompat(getQuarter);
+var getYear__default = /*#__PURE__*/_interopDefaultCompat(getYear);
+var isToday__default = /*#__PURE__*/_interopDefaultCompat(isToday);
+var isYesterday__default = /*#__PURE__*/_interopDefaultCompat(isYesterday);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var startOfQuarter__default = /*#__PURE__*/_interopDefaultCompat(startOfQuarter);
+var startOfWeek__default = /*#__PURE__*/_interopDefaultCompat(startOfWeek);
+var startOfYear__default = /*#__PURE__*/_interopDefaultCompat(startOfYear);
+
 var formatPeriod = function (valueFrom, valueTo, periodType) {
     if (periodType === 'day') {
-        if (isToday(valueFrom))
+        if (isToday__default.default(valueFrom))
             return 'Сегодня';
-        if (isYesterday(valueFrom))
+        if (isYesterday__default.default(valueFrom))
             return 'Вчера';
         return utils.formatDate(valueFrom);
     }
     if (periodType === 'month') {
-        var year = getYear(valueFrom);
-        return year === getYear(new Date())
+        var year = getYear__default.default(valueFrom);
+        return year === getYear__default.default(new Date())
             ? utils.monthName(valueFrom)
-            : "".concat(utils.monthName(valueFrom), " ").concat(getYear(valueFrom));
+            : "".concat(utils.monthName(valueFrom), " ").concat(getYear__default.default(valueFrom));
     }
     if (periodType === 'quarter') {
-        return "".concat(getQuarter(valueFrom), " \u043A\u0432\u0430\u0440\u0442\u0430\u043B ").concat(getYear(valueFrom));
+        return "".concat(getQuarter__default.default(valueFrom), " \u043A\u0432\u0430\u0440\u0442\u0430\u043B ").concat(getYear__default.default(valueFrom));
     }
     if (periodType === 'year') {
-        return "".concat(getYear(valueFrom), " \u0433\u043E\u0434");
+        return "".concat(getYear__default.default(valueFrom), " \u0433\u043E\u0434");
     }
     return "".concat(utils.formatDate(valueFrom), " - ").concat(utils.formatDate(valueTo));
 };
@@ -57,8 +77,8 @@ var getYearSelectorValue = function (valueFrom, showCurrentYear) {
     if (!valueFrom) {
         return '';
     }
-    var year = getYear(valueFrom);
-    if (year === getYear(new Date())) {
+    var year = getYear__default.default(valueFrom);
+    if (year === getYear__default.default(new Date())) {
         return showCurrentYear ? year : '';
     }
     return year;
@@ -69,24 +89,24 @@ var shiftValues = function (valueFrom, valueTo, periodType, direction) {
     var amount = direction === 'next' ? 1 : -1;
     switch (periodType) {
         case 'day':
-            newValueFrom = addDays(valueFrom, amount);
-            newValueTo = addDays(valueFrom, amount);
+            newValueFrom = addDays__default.default(valueFrom, amount);
+            newValueTo = addDays__default.default(valueFrom, amount);
             break;
         case 'week':
-            newValueFrom = startOfWeek(addWeeks(valueFrom, amount), { weekStartsOn: 1 });
-            newValueTo = endOfWeek(newValueFrom, { weekStartsOn: 1 });
+            newValueFrom = startOfWeek__default.default(addWeeks__default.default(valueFrom, amount), { weekStartsOn: 1 });
+            newValueTo = endOfWeek__default.default(newValueFrom, { weekStartsOn: 1 });
             break;
         case 'month':
-            newValueFrom = startOfMonth(addMonths(valueFrom, amount));
-            newValueTo = endOfMonth(newValueFrom);
+            newValueFrom = startOfMonth__default.default(addMonths__default.default(valueFrom, amount));
+            newValueTo = endOfMonth__default.default(newValueFrom);
             break;
         case 'quarter':
-            newValueFrom = startOfQuarter(addQuarters(valueFrom, amount));
-            newValueTo = endOfQuarter(newValueFrom);
+            newValueFrom = startOfQuarter__default.default(addQuarters__default.default(valueFrom, amount));
+            newValueTo = endOfQuarter__default.default(newValueFrom);
             break;
         case 'year':
-            newValueFrom = startOfYear(addYears(valueFrom, amount));
-            newValueTo = endOfYear(newValueFrom);
+            newValueFrom = startOfYear__default.default(addYears__default.default(valueFrom, amount));
+            newValueTo = endOfYear__default.default(newValueFrom);
             break;
     }
     return {

package/calendar/cssm/components/select-button/Component.js

@@ -4,9 +4,15 @@ var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');
 var styles = require('./index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var SelectButton = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, _b = _a.view, view = _b === void 0 ? 'default' : _b, restProps = tslib_es6.__rest(_a, ["className", "children", "view"]);
-    return (React.createElement(coreComponentsButton.Button, tslib_es6.__assign({}, restProps, { ref: ref, view: 'ghost', size: 'xs', className: cn(styles.button, styles[view], className) }), children));
+    return (React__default.default.createElement(coreComponentsButton.Button, tslib_es6.__assign({}, restProps, { ref: ref, view: 'ghost', size: 'xs', className: cn__default.default(styles__default.default.button, styles__default.default[view], className) }), children));
 });
 
 exports.SelectButton = SelectButton;

package/calendar/cssm/components/years-table/Component.js

@@ -8,14 +8,22 @@ var styles = require('./index.module.css');
 require('../../../../button/cssm');
 require('../select-button/index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var isSameYear__default = /*#__PURE__*/_interopDefaultCompat(isSameYear);
+var isThisYear__default = /*#__PURE__*/_interopDefaultCompat(isThisYear);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var YearsTable = function (_a) {
     var _b;
     var selectedYear = _a.selectedYear, _c = _a.years, years = _c === void 0 ? [] : _c, getYearProps = _a.getYearProps, onScroll = _a.onScroll, responsive = _a.responsive;
     var ref = React.useRef(null);
     var view = React.useCallback(function (year) {
-        if (selectedYear && isSameYear(selectedYear, year))
+        if (selectedYear && isSameYear__default.default(selectedYear, year))
             return 'selected';
-        if (isThisYear(year))
+        if (isThisYear__default.default(year))
             return 'outlined';
         return 'default';
     }, [selectedYear]);
@@ -24,7 +32,7 @@ var YearsTable = function (_a) {
     }, [onScroll]);
     React.useLayoutEffect(function () {
         var listNode = ref.current;
-        var selector = ".".concat(styles.button, "[tabIndex=\"0\"]");
+        var selector = ".".concat(styles__default.default.button, "[tabIndex=\"0\"]");
         var selectedYearNode = listNode && listNode.querySelector(selector);
         if (listNode && selectedYearNode) {
             var topIndent = listNode.clientHeight / 2 - selectedYearNode.clientHeight / 2;
@@ -32,8 +40,8 @@ var YearsTable = function (_a) {
             onScroll(listNode.scrollTop);
         }
     }, [onScroll, selectedYear]);
-    return (React.createElement("div", { className: cn(styles.yearsTable, (_b = {}, _b[styles.responsive] = responsive, _b)), onScroll: handleScroll, ref: ref },
-        React.createElement("div", { className: styles.inner }, years.map(function (year) { return (React.createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getYearProps(year), { key: year.getFullYear(), view: view(year), className: styles.button }), year.getFullYear())); }))));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.yearsTable, (_b = {}, _b[styles__default.default.responsive] = responsive, _b)), onScroll: handleScroll, ref: ref },
+        React__default.default.createElement("div", { className: styles__default.default.inner }, years.map(function (year) { return (React__default.default.createElement(components_selectButton_Component.SelectButton, tslib_es6.__assign({}, getYearProps(year), { key: year.getFullYear(), view: view(year), className: styles__default.default.button }), year.getFullYear())); }))));
 };
 
 exports.YearsTable = YearsTable;

package/calendar/cssm/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};