@salutejs/plasma-new-hope 0.109.0-canary.1310.10007111729.0 → 0.109.0-dev.0

package/styled-components/es/components/Calendar/store/reducer.js

@@ -12,16 +12,35 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { getDateFromValue, getNextDate, getPrevDate, getStartYear } from '../utils';
 import { ActionType } from './types';
-export var getInitialState = function getInitialState(value, size, calendarState) {
+export var sizeMap = {
+  Days: {
+    single: [5, 6],
+    "double": [11, 6]
+  },
+  Months: {
+    single: [3, 2],
+    "double": [7, 2]
+  },
+  Years: {
+    single: [3, 2],
+    "double": [7, 2]
+  },
+  Quarters: {
+    single: [1, 1],
+    "double": [3, 1]
+  }
+};
+export var getInitialState = function getInitialState(value, calendarState, isDouble) {
   var initDate = value || new Date();
   var date = getDateFromValue(initDate);
+  var resSize = isDouble ? sizeMap[calendarState]["double"] : sizeMap[calendarState].single;
   return {
     date: _objectSpread(_objectSpread({}, date), {}, {
       day: value !== undefined ? date.day : 0
     }),
     startYear: getStartYear(date.year),
     calendarState: calendarState,
-    size: size
+    size: resSize
   };
 };
 export var reducer = function reducer(state, action) {
@@ -128,8 +147,10 @@ export var reducer = function reducer(state, action) {
       {
         var _action$payload4 = action.payload,
           _calendarState = _action$payload4.calendarState,
-          _year2 = _action$payload4.year;
+          _year2 = _action$payload4.year,
+          _size = _action$payload4.size;
         return _objectSpread(_objectSpread({}, state), {}, {
+          size: _size,
           calendarState: _calendarState,
           date: {
             day: state.date.day,
@@ -142,10 +163,10 @@ export var reducer = function reducer(state, action) {
       {
         var _action$payload5 = action.payload,
           _calendarState2 = _action$payload5.calendarState,
-          _size = _action$payload5.size;
+          _size2 = _action$payload5.size;
         return _objectSpread(_objectSpread({}, state), {}, {
           calendarState: _calendarState2,
-          size: _size || state.size
+          size: _size2 || state.size
         });
       }
     default:

package/styled-components/es/components/Calendar/store/types.js

@@ -2,6 +2,7 @@ export var CalendarState = /*#__PURE__*/function (CalendarState) {
   CalendarState["Days"] = "Days";
   CalendarState["Months"] = "Months";
   CalendarState["Years"] = "Years";
+  CalendarState["Quarters"] = "Quarters";
   return CalendarState;
 }({});
 export var ActionType = /*#__PURE__*/function (ActionType) {

package/styled-components/es/components/Calendar/ui/CalendarDays/CalendarDays.js

@@ -1,4 +1,8 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _StyledCalendarDaysHi;
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -8,7 +12,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useDays } from '../../hooks';
 import { canSelectDate, FULL_DAY_NAMES, getInRange, getSideInRange, isSameDay, isSelectProcess, ROW_STEP, SHORT_DAY_NAMES } from '../../utils';
-import { CalendarDayItem } from '../CalendarDayItem/CalendarDayItem';
+import { DateStructureItem } from '../DateStructureItem/DateStructureItem';
+import { innerTokens, tokens } from '../../Calendar.tokens';
 import { StyledCalendarDays, StyledCalendarDaysHint, StyledFlex } from './CalendarDays.styles';
 /**
  * Компонент дней в календаре.
@@ -30,13 +35,22 @@ export var CalendarDays = function CalendarDays(_ref) {
     onHoverDay = _ref.onHoverDay,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
-  var _useDays = useDays(currentDate, value, eventList, disabledList, min, max, includeEdgeDates),
+  var _useDays = useDays({
+      date: currentDate,
+      value: value,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: max,
+      includeEdgeDates: includeEdgeDates
+    }),
     _useDays2 = _slicedToArray(_useDays, 2),
     days = _useDays2[0],
     selected = _useDays2[1];
   var selectedRef = useRef(selected);
   var onSetSelectedRef = useRef(onSetSelected);
   var offset = isSecond ? ROW_STEP : 0;
+  var dayItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarDayFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarDayFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarDayFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarDayFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarDayFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarDayFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarDaySelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarDayItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarDayItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarDayItemBorderRadius, ")"));
   var getSelectedDate = useCallback(function (event) {
     var _event$currentTarget$ = event.currentTarget.dataset,
       day = _event$currentTarget$.day,
@@ -72,14 +86,11 @@ export var CalendarDays = function CalendarDays(_ref) {
     }
     onHoverDay === null || onHoverDay === void 0 || onHoverDay(selectedDate);
   }, [getSelectedDate, onHoverDay, value]);
-  var handleOnFocusDay = useCallback(function () {
-    // заглушка будет убрана при реализации доступности
-  }, []);
-  var getRefs = useCallback(function (element, isDayInCurrentMonth, i, j) {
+  var getRefs = function getRefs(element, isDayInCurrentMonth, i, j) {
     if (isDayInCurrentMonth) {
       outerRefs.current[i + offset][j] = element;
     }
-  }, [offset, outerRefs]);
+  };
   useEffect(function () {
     if (selectedRef.current) {
       var _onSetSelectedRef$cur;
@@ -95,13 +106,14 @@ export var CalendarDays = function CalendarDays(_ref) {
   }, "\u0414\u043B\u044F \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0442\u043E\u043B\u044C\u043A\u043E \u043F\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u043C \u0434\u0430\u0442\u0430\u043C \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0439\u0442\u0435 \u043A\u043B\u0430\u0432\u0438\u0448\u0443 Shift.")), /*#__PURE__*/React.createElement(StyledFlex, {
     role: "row"
   }, SHORT_DAY_NAMES.map(function (name) {
-    return /*#__PURE__*/React.createElement(CalendarDayItem, {
+    return /*#__PURE__*/React.createElement(DateStructureItem, {
       role: "columnheader",
       "aria-label": FULL_DAY_NAMES[name],
       key: name,
       dayOfWeek: true,
-      day: name
-    });
+      day: name,
+      style: dayItemTokens
+    }, name);
   })), days.map(function (day, i) {
     return /*#__PURE__*/React.createElement(StyledFlex, {
       role: "row",
@@ -117,11 +129,12 @@ export var CalendarDays = function CalendarDays(_ref) {
         _ref2$isOutOfMinMaxRa = _ref2.isOutOfMinMaxRange,
         isOutOfMinMaxRange = _ref2$isOutOfMinMaxRa === void 0 ? false : _ref2$isOutOfMinMaxRa,
         disabledArrowKey = _ref2.disabledArrowKey,
-        disabledMonths = _ref2.disabledMonths;
-      return /*#__PURE__*/React.createElement(CalendarDayItem, {
+        disabledDates = _ref2.disabledDates;
+      return /*#__PURE__*/React.createElement(DateStructureItem, {
         ref: function ref(element) {
-          return getRefs(element, isDayInCurrentMonth, i, j);
+          return getRefs(element, Boolean(isDayInCurrentMonth), i, j);
         },
+        style: dayItemTokens,
         eventList: events,
         disabled: disabled,
         day: date.day,
@@ -137,12 +150,11 @@ export var CalendarDays = function CalendarDays(_ref) {
         sideInRange: getSideInRange(value, date, hoveredDay, isSelected),
         onClick: disabled ? undefined : handleOnChangeDay(i, j),
         onMouseOver: disabled ? undefined : handleOnHoverDay,
-        onFocus: handleOnFocusDay,
-        key: "StyledDay-".concat(j),
+        key: "StyledDay-".concat(i, "-").concat(j),
         role: "gridcell",
         disabledArrowKey: disabledArrowKey,
-        disabledMonths: disabledMonths
-      });
+        disabledMonths: disabledDates
+      }, date.day);
     }));
   }));
 };

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.js

@@ -3,6 +3,7 @@ import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from
 import { CalendarState } from '../../store/types';
 import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils';
 import { classes } from '../../Calendar.tokens';
+import { sizeMap } from '../../store/reducer';
 import { StyledArrow, StyledArrows, StyledCalendarHeader, StyledDoubleHeaderWrapper, StyledHeader, StyledHeaderDate, StyledHeaderDouble, StyledNavigation } from './CalendarHeader.styles';
 
 /**
@@ -21,14 +22,15 @@ export var CalendarHeader = function CalendarHeader(_ref) {
     onNext = _ref.onNext,
     onUpdateCalendarState = _ref.onUpdateCalendarState;
   var handleCalendarState = useCallback(function () {
+    var newSize = isDouble ? sizeMap.Months["double"] : sizeMap.Months.single;
     if (type === CalendarState.Days) {
-      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(CalendarState.Months, [3, 2]);
+      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(CalendarState.Months, newSize);
     }
-    if (type === CalendarState.Months) {
-      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(CalendarState.Years, [3, 2]);
+    if (type === CalendarState.Months || type === CalendarState.Quarters) {
+      onUpdateCalendarState === null || onUpdateCalendarState === void 0 || onUpdateCalendarState(CalendarState.Years, newSize);
     }
   }, [type, onUpdateCalendarState]);
-  var getHeaderContent = useCallback(function (date) {
+  var getHeaderContent = useCallback(function (date, secondPart) {
     if (!date) {
       return '';
     }
@@ -38,21 +40,22 @@ export var CalendarHeader = function CalendarHeader(_ref) {
         size: size === 'xs' ? 'xs' : 's'
       })));
     }
-    if (type === CalendarState.Months) {
+    if (type === CalendarState.Months || type === CalendarState.Quarters) {
       return /*#__PURE__*/React.createElement(StyledHeaderDate, null, date.year, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       }));
     }
     if (type === CalendarState.Years) {
-      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, startYear, "\u2014", startYear + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
+      var yearValue = secondPart ? startYear + 12 : startYear;
+      return /*#__PURE__*/React.createElement(StyledHeaderDate, null, yearValue, "\u2014", yearValue + YEAR_RENDER_COUNT - 1, /*#__PURE__*/React.createElement(IconDisclosureDownFill, {
         color: "inherit",
         size: size === 'xs' ? 'xs' : 's'
       }));
     }
     return '';
   }, [type, startYear, size]);
-  var currentCalendarType = getCalendarType(isDouble ? CalendarState.Days : type);
+  var currentCalendarType = getCalendarType(type);
   var PreviousButton = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledArrow, {
       "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 ".concat(currentCalendarType),
@@ -76,12 +79,14 @@ export var CalendarHeader = function CalendarHeader(_ref) {
     }));
   }, [currentCalendarType, size, onNext]);
   return /*#__PURE__*/React.createElement(StyledCalendarHeader, null, isDouble ? /*#__PURE__*/React.createElement(StyledNavigation, null, /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, null, PreviousButton, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
+    onClick: handleCalendarState,
     "aria-live": "polite"
   }, getHeaderContent(firstDate))), /*#__PURE__*/React.createElement(StyledDoubleHeaderWrapper, {
     className: classes.doubleHeaderLastDateWrapper
   }, /*#__PURE__*/React.createElement(StyledHeaderDouble, {
+    onClick: handleCalendarState,
     "aria-live": "polite"
-  }, getHeaderContent(secondDate)), NextButton)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
+  }, getHeaderContent(secondDate, true)), NextButton)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeader, {
     type: "button",
     "aria-live": "polite",
     id: "id-grid-label",

package/styled-components/es/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.js

@@ -33,7 +33,12 @@ export var StyledNavigation = /*#__PURE__*/styled.div.withConfig({
 })(["width:100%;", ";"], flexCenter);
 export var StyledDoubleHeaderWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-6"
-})(["width:100%;display:grid;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
-export var StyledHeaderDouble = /*#__PURE__*/styled.h4.withConfig({
+})(["width:100%;display:grid;align-items:center;grid-template-columns:var(", ") 1fr var(", ");grid-template-areas:'a b c';", "{grid-area:a;}&.", " ", "{grid-area:c;}"], tokens.iconButtonWidth, tokens.iconButtonWidth, StyledArrow, classes.doubleHeaderLastDateWrapper, StyledArrow);
+export var StyledHeaderDouble = /*#__PURE__*/styled.button.withConfig({
   componentId: "plasma-new-hope__sc-186pzg3-7"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarHeaderDateGap, /*#__PURE__*/String(flexCenter));
+})(["border:none;background-color:transparent;padding:0;outline:none;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");grid-area:b;justify-self:center;cursor:pointer;display:flex;gap:var(", ");justify-content:space-between;align-items:center;margin:0;height:fit-content;", ";", ";"], tokens.calendarHeaderFontFamily, tokens.calendarHeaderFontSize, tokens.calendarHeaderFontStyle, tokens.calendarHeaderFontWeightBold, tokens.calendarHeaderFontLetterSpacing, tokens.calendarHeaderFontLineHeight, tokens.calendarContentPrimaryColor, tokens.calendarHeaderDateGap, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addFocus({
+  outlineSize: '0.063rem',
+  outlineOffset: '-0.125rem',
+  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
+  outlineRadius: '0.563rem'
+}));

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.js

@@ -1,3 +1,7 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -5,40 +9,90 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React, { useCallback, useEffect, useRef } from 'react';
-import { cx } from '../../../../utils';
 import { useMonths } from '../../hooks';
-import { classes } from '../../Calendar.tokens';
-import { StyledCalendarMonths, StyledFlex, StyledMonth, StyledMonthRoot } from './CalendarMonths.styles';
+import { innerTokens, tokens } from '../../Calendar.tokens';
+import { ROW_MONTH_STEP, canSelectDate, getInRange, getSideInRange, isSameDay, isSelectProcess } from '../../utils';
+import { DateStructureItem } from '../DateStructureItem/DateStructureItem';
+import { StyledCalendarMonths, StyledFlex } from './CalendarMonths.styles';
 
 /**
  * Компонент месяцев в календаре.
  */
 export var CalendarMonths = function CalendarMonths(_ref) {
   var currentDate = _ref.date,
+    value = _ref.value,
     selectIndexes = _ref.selectIndexes,
+    eventList = _ref.eventList,
+    disabledList = _ref.disabledList,
+    min = _ref.min,
+    max = _ref.max,
     outerRefs = _ref.outerRefs,
+    isDouble = _ref.isDouble,
+    isSecond = _ref.isSecond,
+    hoveredMonth = _ref.hoveredMonth,
     onChangeMonth = _ref.onChangeMonth,
+    onHoverMonth = _ref.onHoverMonth,
     onSetSelected = _ref.onSetSelected,
     onKeyDown = _ref.onKeyDown;
-  var _useMonths = useMonths(currentDate),
+  var _useMonths = useMonths({
+      date: currentDate,
+      value: value,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: max
+    }),
     _useMonths2 = _slicedToArray(_useMonths, 2),
     months = _useMonths2[0],
     selected = _useMonths2[1];
   var selectedRef = useRef(selected);
   var onSetSelectedRef = useRef(onSetSelected);
-  var handleOnChangeMonth = useCallback(function (event) {
-    /**
-     * нужно вызвать stopImmediatePropagation для случаев, когда
-     * обработчик события onClick навешивается снаружи.
-     * Как, например, в компоненте Popup
-     */
-    event.nativeEvent.stopImmediatePropagation();
-    var monthIndex = event.currentTarget.dataset.monthIndex;
-    onChangeMonth(Number(monthIndex));
-  }, [onChangeMonth]);
+  var offset = isSecond ? ROW_MONTH_STEP : 0;
+  var monthItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarMonthFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarMonthFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarMonthFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarMonthFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarMonthFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarMonthFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarMonthSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarMonthItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarMonthItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarMonthItemBorderRadius, ")"));
+  var getSelectedDate = useCallback(function (event) {
+    var _event$currentTarget$ = event.currentTarget.dataset,
+      day = _event$currentTarget$.day,
+      monthIndex = _event$currentTarget$.monthIndex,
+      year = _event$currentTarget$.year;
+    var selectedDate = {
+      day: Number(day),
+      monthIndex: Number(monthIndex),
+      year: Number(year)
+    };
+    if (!canSelectDate(selectedDate, value, disabledList)) {
+      return;
+    }
+    return selectedDate;
+  }, [disabledList, value]);
+  var handleOnChangeMonth = useCallback(function (i, j) {
+    return function (event) {
+      /**
+       * нужно вызвать stopImmediatePropagation для случаев, когда
+       * обработчик события onClick навешивается снаружи.
+       * Как, например, в компоненте Popup
+       */
+      event.nativeEvent.stopImmediatePropagation();
+      var selectedDate = getSelectedDate(event);
+      if (!selectedDate) {
+        return;
+      }
+      onChangeMonth(selectedDate, [i + offset, j]);
+      if (isSelectProcess(value)) {
+        onHoverMonth === null || onHoverMonth === void 0 || onHoverMonth(undefined);
+      }
+    };
+  }, [getSelectedDate, onChangeMonth, offset, value, onHoverMonth]);
+  var handleOnHoverMonth = useCallback(function (event) {
+    var selectedDate = getSelectedDate(event);
+    var isSelectedDone = Array.isArray(value) && value[0] && value[1];
+    if (!selectedDate || !Array.isArray(value) || isSelectedDone) {
+      return;
+    }
+    onHoverMonth === null || onHoverMonth === void 0 || onHoverMonth(selectedDate);
+  }, [getSelectedDate, onHoverMonth, value]);
   var getRefs = useCallback(function (element, i, j) {
-    outerRefs.current[i][j] = element;
-  }, [outerRefs]);
+    outerRefs.current[i + offset][j] = element;
+  }, [offset, outerRefs]);
   useEffect(function () {
     if (selectedRef.current) {
       var _onSetSelectedRef$cur;
@@ -58,23 +112,40 @@ export var CalendarMonths = function CalendarMonths(_ref) {
         monthIndex = _ref2.monthIndex,
         isSelected = _ref2.isSelected,
         isCurrent = _ref2.isCurrent,
-        monthFullName = _ref2.monthFullName;
-      var selectedClass = isSelected ? classes.selectedItem : undefined;
-      var currentClass = isCurrent ? classes.currentItem : undefined;
-      return /*#__PURE__*/React.createElement(StyledMonthRoot, {
-        id: "month-test-".concat(i, "-").concat(j),
-        className: cx(selectedClass, currentClass, classes.selectableItem),
+        monthFullName = _ref2.monthFullName,
+        date = _ref2.date,
+        events = _ref2.events,
+        isOutOfMinMaxRange = _ref2.isOutOfMinMaxRange,
+        inRange = _ref2.inRange,
+        disabled = _ref2.disabled,
+        disabledArrowKey = _ref2.disabledArrowKey,
+        disabledDates = _ref2.disabledDates;
+      return /*#__PURE__*/React.createElement(DateStructureItem, {
         ref: function ref(element) {
           return getRefs(element, i, j);
         },
-        tabIndex: i === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[0]) && j === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[1]) ? 0 : -1,
-        onClick: handleOnChangeMonth,
-        "data-month-index": monthIndex,
-        "aria-selected": isSelected,
-        role: "gridcell",
+        style: monthItemTokens,
+        eventList: events,
+        disabled: disabled,
+        day: date.day,
+        year: date.year,
+        monthIndex: monthIndex,
+        isFocused: i + offset === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[0]) && j === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[1]) && !isOutOfMinMaxRange,
+        isSelected: isSelected,
+        isCurrent: isCurrent,
+        isDouble: isDouble,
+        isHovered: isSameDay(date, hoveredMonth),
+        inRange: getInRange(value, date, hoveredMonth, inRange),
+        sideInRange: getSideInRange(value, date, hoveredMonth, isSelected),
+        onClick: disabled ? undefined : handleOnChangeMonth(i, j),
+        onMouseOver: disabled ? undefined : handleOnHoverMonth,
         key: "StyledMonth-".concat(i, "-").concat(j),
-        "aria-label": monthFullName
-      }, /*#__PURE__*/React.createElement(StyledMonth, null, monthName));
+        role: "gridcell",
+        "aria-label": monthFullName,
+        disabledArrowKey: disabledArrowKey,
+        disabledMonths: disabledDates,
+        isDayInCurrentMonth: true
+      }, monthName);
     }));
   }));
 };

package/styled-components/es/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.js

@@ -1,36 +1,9 @@
 import styled from 'styled-components';
-import { classes, tokens } from '../../Calendar.tokens';
-import { addFocus } from '../../../../mixins';
-import { addSelected, flexCenter } from '../../mixins';
+import { tokens } from '../../Calendar.tokens';
+import { flexCenter } from '../../mixins';
 export var StyledCalendarMonths = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-0"
 })(["padding:var(", ");box-sizing:border-box;"], tokens.calendarMonthsPadding);
 export var StyledFlex = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-mx5ps9-1"
-})(["", ";"], /*#__PURE__*/String(flexCenter));
-export var StyledMonth = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-mx5ps9-2"
-})(["border-radius:calc(var(", ") - 0.125rem);", ";"], tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter));
-export var StyledMonthRoot = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-mx5ps9-3"
-})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");position:relative;box-sizing:border-box;min-height:var(", ");min-width:var(", ");border-radius:var(", ");", ";", ";", ";&.", "{", ";}"], tokens.calendarMonthFontFamily, tokens.calendarMonthFontSize, tokens.calendarMonthFontStyle, tokens.calendarMonthFontWeight, tokens.calendarMonthFontLetterSpacing, tokens.calendarMonthFontLineHeight, tokens.calendarMonthItemHeight, tokens.calendarMonthItemWidth, tokens.calendarMonthItemBorderRadius, /*#__PURE__*/String(flexCenter), /*#__PURE__*/addSelected({
-  minWidth: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemWidth, ") - 0.25rem)"),
-  minHeight: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemHeight, ") - 0.25rem)"),
-  selectedFontWeight: /*#__PURE__*/"var(".concat(tokens.calendarMonthSelectedFontWeight, ")"),
-  selectedBackground: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemBackground, ")"),
-  selectedColor: /*#__PURE__*/"var(".concat(tokens.calendarSelectedItemColor, ")"),
-  selectableBackgroundHover: /*#__PURE__*/"var(".concat(tokens.calendarSelectableItemBackgroundHover, ")"),
-  currentBorderColor: /*#__PURE__*/"var(".concat(tokens.calendarCurrentItemBorderColor, ")"),
-  activeBackground: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemBackground, ")"),
-  activeColor: /*#__PURE__*/"var(".concat(tokens.calendarActiveItemColor, ")")
-}), /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.125rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
-}), classes.currentItem, /*#__PURE__*/addFocus({
-  outlineSize: '0.063rem',
-  outlineOffset: '-0.1875rem',
-  outlineColor: /*#__PURE__*/"var(".concat(tokens.calendarOutlineFocusColor, ")"),
-  outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.calendarMonthItemBorderRadius, ") + 0.125rem)")
-}));
+})(["", ";"], /*#__PURE__*/String(flexCenter));

package/styled-components/es/components/Calendar/ui/CalendarQuarters/CalendarQuarters.js

@@ -0,0 +1,149 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useQuarters } from '../../hooks';
+import { innerTokens, tokens } from '../../Calendar.tokens';
+import { ROW_QUARTER_STEP, canSelectDate, getInRange, getSideInRange, isSameDay, isSelectProcess } from '../../utils';
+import { DateStructureItem } from '../DateStructureItem/DateStructureItem';
+import { StyledCalendarQuarters, StyledFlex } from './CalendarQuarters.styles';
+
+/**
+ * Компонент кварталов в календаре.
+ */
+export var CalendarQuarters = function CalendarQuarters(_ref) {
+  var currentDate = _ref.date,
+    value = _ref.value,
+    selectIndexes = _ref.selectIndexes,
+    eventList = _ref.eventList,
+    disabledList = _ref.disabledList,
+    min = _ref.min,
+    max = _ref.max,
+    outerRefs = _ref.outerRefs,
+    isDouble = _ref.isDouble,
+    isSecond = _ref.isSecond,
+    hoveredQuarter = _ref.hoveredQuarter,
+    onChangeQuarter = _ref.onChangeQuarter,
+    onHoverQuarter = _ref.onHoverQuarter,
+    onSetSelected = _ref.onSetSelected,
+    onKeyDown = _ref.onKeyDown;
+  var _useQuarters = useQuarters({
+      date: currentDate,
+      value: value,
+      eventList: eventList,
+      disabledList: disabledList,
+      min: min,
+      max: max
+    }),
+    _useQuarters2 = _slicedToArray(_useQuarters, 2),
+    quarters = _useQuarters2[0],
+    selected = _useQuarters2[1];
+  var selectedRef = useRef(selected);
+  var onSetSelectedRef = useRef(onSetSelected);
+  var offset = isSecond ? ROW_QUARTER_STEP : 0;
+  var quarterItemTokens = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(innerTokens.dateStructureFontFamily), "var(".concat(tokens.calendarQuarterFontFamily, ")")), "".concat(innerTokens.dateStructureFontSize), "var(".concat(tokens.calendarQuarterFontSize, ")")), "".concat(innerTokens.dateStructureFontWeight), "var(".concat(tokens.calendarQuarterFontWeight, ")")), "".concat(innerTokens.dateStructureFontLineHeight), "var(".concat(tokens.calendarQuarterFontLineHeight, ")")), "".concat(innerTokens.dateStructureFontLetterSpacing), "var(".concat(tokens.calendarQuarterFontLetterSpacing, ")")), "".concat(innerTokens.dateStructureFontStyle), "var(".concat(tokens.calendarQuarterFontStyle, ")")), "".concat(innerTokens.dateStructureSelectedFontWeight), "var(".concat(tokens.calendarQuarterSelectedFontWeight, ")")), "".concat(innerTokens.dateStructureWidth), "var(".concat(tokens.calendarQuarterItemWidth, ")")), "".concat(innerTokens.dateStructureHeight), "var(".concat(tokens.calendarQuarterItemHeight, ")")), "".concat(innerTokens.dateStructureBorderRadius), "var(".concat(tokens.calendarQuarterItemBorderRadius, ")"));
+  var getSelectedDate = useCallback(function (event) {
+    var _event$currentTarget$ = event.currentTarget.dataset,
+      day = _event$currentTarget$.day,
+      monthIndex = _event$currentTarget$.monthIndex,
+      year = _event$currentTarget$.year;
+    var selectedDate = {
+      day: Number(day),
+      monthIndex: Number(monthIndex),
+      year: Number(year)
+    };
+    if (!canSelectDate(selectedDate, value, disabledList)) {
+      return;
+    }
+    return selectedDate;
+  }, [disabledList, value]);
+  var handleOnChangeQuarter = useCallback(function (i, j, quarterName) {
+    return function (event) {
+      /**
+       * нужно вызвать stopImmediatePropagation для случаев, когда
+       * обработчик события onClick навешивается снаружи.
+       * Как, например, в компоненте Popup
+       */
+      event.nativeEvent.stopImmediatePropagation();
+      var selectedDate = getSelectedDate(event);
+      if (!selectedDate) {
+        return;
+      }
+      onChangeQuarter(selectedDate, [i + offset, j], quarterName);
+      if (isSelectProcess(value)) {
+        onHoverQuarter === null || onHoverQuarter === void 0 || onHoverQuarter(undefined);
+      }
+    };
+  }, [getSelectedDate, onChangeQuarter, offset, value, onHoverQuarter]);
+  var handleOnHoverQuarter = useCallback(function (event) {
+    var selectedDate = getSelectedDate(event);
+    var isSelectedDone = Array.isArray(value) && value[0] && value[1];
+    if (!selectedDate || !Array.isArray(value) || isSelectedDone) {
+      return;
+    }
+    onHoverQuarter === null || onHoverQuarter === void 0 || onHoverQuarter(selectedDate);
+  }, [getSelectedDate, onHoverQuarter, value]);
+  var getRefs = useCallback(function (element, i, j) {
+    outerRefs.current[i + offset][j] = element;
+  }, [offset, outerRefs]);
+  useEffect(function () {
+    if (selectedRef.current) {
+      var _onSetSelectedRef$cur;
+      (_onSetSelectedRef$cur = onSetSelectedRef.current) === null || _onSetSelectedRef$cur === void 0 || _onSetSelectedRef$cur.call(onSetSelectedRef, selectedRef.current);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledCalendarQuarters, {
+    role: "grid",
+    "aria-labelledby": "id-grid-label",
+    onKeyDown: onKeyDown
+  }, quarters.map(function (quarter, i) {
+    return /*#__PURE__*/React.createElement(StyledFlex, {
+      role: "row",
+      key: i
+    }, quarter.map(function (_ref2, j) {
+      var quarterName = _ref2.quarterName,
+        isSelected = _ref2.isSelected,
+        isCurrent = _ref2.isCurrent,
+        date = _ref2.date,
+        events = _ref2.events,
+        isOutOfMinMaxRange = _ref2.isOutOfMinMaxRange,
+        inRange = _ref2.inRange,
+        disabled = _ref2.disabled,
+        disabledArrowKey = _ref2.disabledArrowKey,
+        disabledDates = _ref2.disabledDates;
+      return /*#__PURE__*/React.createElement(DateStructureItem, {
+        ref: function ref(element) {
+          return getRefs(element, i, j);
+        },
+        style: quarterItemTokens,
+        eventList: events,
+        disabled: disabled,
+        day: date.day,
+        year: date.year,
+        monthIndex: date.monthIndex,
+        isFocused: i + offset === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[0]) && j === (selectIndexes === null || selectIndexes === void 0 ? void 0 : selectIndexes[1]) && !isOutOfMinMaxRange,
+        isSelected: isSelected,
+        isCurrent: isCurrent,
+        isDouble: isDouble,
+        isHovered: isSameDay(date, hoveredQuarter),
+        inRange: getInRange(value, date, hoveredQuarter, inRange),
+        sideInRange: getSideInRange(value, date, hoveredQuarter, isSelected),
+        onClick: disabled ? undefined : handleOnChangeQuarter(i, j, String(quarterName)),
+        onMouseOver: disabled ? undefined : handleOnHoverQuarter,
+        key: "StyledQuarter-".concat(i, "-").concat(j),
+        role: "gridcell",
+        "aria-label": quarterName,
+        disabledArrowKey: disabledArrowKey,
+        disabledMonths: disabledDates,
+        isDayInCurrentMonth: true
+      }, quarterName);
+    }));
+  }));
+};