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

package/styled-components/es/components/Calendar/hooks/useCalendarNavigation.js

@@ -0,0 +1,90 @@
+import { useCallback } from 'react';
+import { ActionType, CalendarState } from '../store/types';
+import { YEAR_RENDER_COUNT } from '../utils';
+export var useCalendarNavigation = function useCalendarNavigation(_ref) {
+  var calendarState = _ref.calendarState,
+    dispatch = _ref.dispatch,
+    date = _ref.date;
+  var handlePrev = useCallback(function () {
+    var withShift = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (calendarState === CalendarState.Days) {
+      if (withShift) {
+        dispatch({
+          type: ActionType.PREVIOUS_YEAR,
+          payload: {
+            step: 1
+          }
+        });
+        return;
+      }
+      dispatch({
+        type: ActionType.PREVIOUS_MONTH,
+        payload: {
+          monthIndex: date.monthIndex,
+          year: date.year
+        }
+      });
+      return;
+    }
+    if (calendarState === CalendarState.Months || calendarState === CalendarState.Quarters) {
+      dispatch({
+        type: ActionType.PREVIOUS_YEAR,
+        payload: {
+          step: 1
+        }
+      });
+      return;
+    }
+    if (calendarState === CalendarState.Years) {
+      dispatch({
+        type: ActionType.PREVIOUS_START_YEAR,
+        payload: {
+          yearsCount: YEAR_RENDER_COUNT
+        }
+      });
+    }
+  }, [date, calendarState]);
+  var handleNext = useCallback(function () {
+    var withShift = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (calendarState === CalendarState.Days) {
+      if (withShift) {
+        dispatch({
+          type: ActionType.NEXT_YEAR,
+          payload: {
+            step: 1
+          }
+        });
+        return;
+      }
+      dispatch({
+        type: ActionType.NEXT_MONTH,
+        payload: {
+          monthIndex: date.monthIndex,
+          year: date.year
+        }
+      });
+      return;
+    }
+    if (calendarState === CalendarState.Months || calendarState === CalendarState.Quarters) {
+      dispatch({
+        type: ActionType.NEXT_YEAR,
+        payload: {
+          step: 1
+        }
+      });
+      return;
+    }
+    if (calendarState === CalendarState.Years) {
+      dispatch({
+        type: ActionType.NEXT_START_YEAR,
+        payload: {
+          yearsCount: YEAR_RENDER_COUNT
+        }
+      });
+    }
+  }, [date, calendarState]);
+  return {
+    handlePrev: handlePrev,
+    handleNext: handleNext
+  };
+};

package/styled-components/es/components/Calendar/hooks/useDays.js

@@ -9,7 +9,8 @@ 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 { useMemo } from 'react';
-import { getDateFromValue, getDaysInMonth, getMatrix, getNextDate, getOffsetDayInWeek, getPrevDate, IsCurrentDay, isDayInRange, isSelectedDay } from '../utils';
+import { getDatesWithModifications, getDaysInMonth, getMatrix, getNextDate, getOffsetDayInWeek, getPrevDate, IsCurrentDay, isDateInRange, isSelectedDay } from '../utils';
+import { CalendarState } from '../store/types';
 /**
  * Метод возвращающий массив дней в предыдущем месяце.
  */
@@ -24,7 +25,7 @@ var getDaysInPrevMonth = function getDaysInPrevMonth(date, offsetDayInWeek, valu
       isCurrent: false,
       isSelected: false,
       isDayInCurrentMonth: false,
-      inRange: Array.isArray(value) ? isDayInRange(prevYear, prevMonth, daysInPrevMonth - (offsetDayInWeek - i) + 1, value) : false,
+      inRange: Array.isArray(value) ? isDateInRange(prevYear, prevMonth, daysInPrevMonth - (offsetDayInWeek - i) + 1, value) : false,
       date: {
         day: daysInPrevMonth - (offsetDayInWeek - i) + 1,
         monthIndex: prevMonth,
@@ -45,7 +46,7 @@ var getDaysInCurrentMonth = function getDaysInCurrentMonth(date, daysInMonth, va
         return isSelectedDay(date, i + 1, v);
       })) : isSelectedDay(date, i + 1, value),
       isDayInCurrentMonth: true,
-      inRange: Array.isArray(value) ? isDayInRange(date.year, date.monthIndex, i + 1, value) : false,
+      inRange: Array.isArray(value) ? isDateInRange(date.year, date.monthIndex, i + 1, value) : false,
       date: {
         day: i + 1,
         monthIndex: date.monthIndex,
@@ -70,7 +71,7 @@ var getDaysInNextMonth = function getDaysInNextMonth(date, daysInMonth, offsetDa
       isCurrent: false,
       isSelected: false,
       isDayInCurrentMonth: false,
-      inRange: Array.isArray(value) ? isDayInRange(nextYear, nextMonthIndex, i + 1, value) : false,
+      inRange: Array.isArray(value) ? isDateInRange(nextYear, nextMonthIndex, i + 1, value) : false,
       date: {
         day: i + 1,
         monthIndex: nextMonthIndex,
@@ -79,143 +80,18 @@ var getDaysInNextMonth = function getDaysInNextMonth(date, daysInMonth, offsetDa
     };
   });
 };
-var isDisabledArrowLeft = function isDisabledArrowLeft(date, min) {
-  var currentDate = new Date(date);
-  currentDate.setDate(currentDate.getDate() - 1);
-  return min && min >= currentDate || min && min >= date;
-};
-var isDisabledArrowRight = function isDisabledArrowRight(date, max) {
-  var currentDate = new Date(date);
-  currentDate.setDate(currentDate.getDate() + 1);
-  return max && max <= currentDate || max && max <= date;
-};
-var isDisabledArrowUp = function isDisabledArrowUp(date, min) {
-  var currentDate = new Date(date);
-  currentDate.setDate(date.getDate() - 7);
-  return min && min >= currentDate;
-};
-var isDisabledArrowDown = function isDisabledArrowDown(date, max) {
-  var currentDate = new Date(date);
-  currentDate.setDate(date.getDate() + 7);
-  return max && max <= currentDate;
-};
-var isDisabledNextMonth = function isDisabledNextMonth(_ref, max) {
-  var year = _ref.year,
-    monthIndex = _ref.monthIndex,
-    day = _ref.day;
-  if (!max) {
-    return false;
-  }
-  var currentDate = new Date(year, monthIndex, day);
-  currentDate.setDate(currentDate.getDate() + 1);
-  var isOut = true;
-  while (isOut && currentDate <= max) {
-    isOut = max <= currentDate;
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-  return isOut;
-};
-var isDisabledPreviousMonth = function isDisabledPreviousMonth(_ref2, min) {
-  var year = _ref2.year,
-    monthIndex = _ref2.monthIndex,
-    day = _ref2.day;
-  if (!min) {
-    return false;
-  }
-  var currentDate = new Date(year, monthIndex, day);
-  currentDate.setDate(currentDate.getDate() - 1);
-  var isOut = true;
-  while (isOut && currentDate >= min) {
-    isOut = min >= currentDate;
-    currentDate.setDate(currentDate.getDate() - 1);
-  }
-  return isOut;
-};
-var getDisabledArrowKey = function getDisabledArrowKey(currentDate, min, max) {
-  var disabledArrowKey = [];
-  if (isDisabledArrowLeft(currentDate, min)) {
-    disabledArrowKey.push('left');
-  }
-  if (isDisabledArrowRight(currentDate, max)) {
-    disabledArrowKey.push('right');
-  }
-  if (isDisabledArrowDown(currentDate, max)) {
-    disabledArrowKey.push('down');
-  }
-  if (isDisabledArrowUp(currentDate, min)) {
-    disabledArrowKey.push('up');
-  }
-  return disabledArrowKey.join(',');
-};
-var getDisabledMonths = function getDisabledMonths(list, min, max) {
-  var disabledMonth = [];
-  if (isDisabledPreviousMonth(list[0], min)) {
-    disabledMonth.push('previous');
-  }
-  if (isDisabledNextMonth(list[list.length - 1], max)) {
-    disabledMonth.push('next');
-  }
-  return disabledMonth.join(',');
-};
-
-/**
- * Метод для получения набора неповторяющихся дат.
- */
-var getPropsMap = function getPropsMap(props) {
-  return props.reduce(function (acc, prop) {
-    var _getDateFromValue = getDateFromValue(prop.date),
-      year = _getDateFromValue.year,
-      monthIndex = _getDateFromValue.monthIndex,
-      day = _getDateFromValue.day;
-    var key = "".concat(year, "-").concat(monthIndex, "-").concat(day);
-    var propList = acc.get(key) || [];
-    propList.push(prop);
-    return acc.set(key, propList);
-  }, new Map());
-};
-
-/**
- * Метод модифицирующий дни (добавляющий свойства events и disabled).
- */
-var getDaysWithModifications = function getDaysWithModifications(days) {
-  var eventList = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var disabledList = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  var min = arguments.length > 3 ? arguments[3] : undefined;
-  var max = arguments.length > 4 ? arguments[4] : undefined;
-  var includeEdgeDates = arguments.length > 5 ? arguments[5] : undefined;
-  var eventsMap = getPropsMap(eventList);
-  var disabledDaysMap = getPropsMap(disabledList);
-  var daysList = days.filter(function (_ref3) {
-    var isDayInCurrentMonth = _ref3.isDayInCurrentMonth;
-    return isDayInCurrentMonth;
-  }).map(function (_ref4) {
-    var date = _ref4.date;
-    return date;
-  });
-  var disabledMonths = getDisabledMonths(daysList, min, max);
-  return days.map(function (dayItem) {
-    var date = dayItem.date;
-    var year = date.year,
-      monthIndex = date.monthIndex,
-      day = date.day;
-    var keyDay = "".concat(year, "-").concat(monthIndex, "-").concat(day);
-    var currentDate = new Date(year, monthIndex, day);
-    var minValue = min && (includeEdgeDates ? min > currentDate : min >= currentDate);
-    var maxValue = max && (includeEdgeDates ? max < currentDate : max <= currentDate);
-    var isOutOfMinMaxRange = minValue || maxValue;
-    dayItem.events = eventsMap.get(keyDay);
-    dayItem.disabled = disabledDaysMap.has(keyDay) || isOutOfMinMaxRange;
-    dayItem.isOutOfMinMaxRange = isOutOfMinMaxRange;
-    dayItem.disabledArrowKey = getDisabledArrowKey(currentDate, min, max);
-    dayItem.disabledMonths = disabledMonths;
-    return dayItem;
-  });
-};
 
 /**
  * Хук для получения списка дней.
  */
-export var useDays = function useDays(date, value, eventList, disabledList, min, max, includeEdgeDates) {
+export var useDays = function useDays(_ref) {
+  var date = _ref.date,
+    value = _ref.value,
+    eventList = _ref.eventList,
+    disabledList = _ref.disabledList,
+    min = _ref.min,
+    max = _ref.max,
+    includeEdgeDates = _ref.includeEdgeDates;
   return useMemo(function () {
     var monthIndex = date.monthIndex,
       year = date.year;
@@ -223,7 +99,15 @@ export var useDays = function useDays(date, value, eventList, disabledList, min,
     var offsetDayInWeek = getOffsetDayInWeek(monthIndex, year);
     var days = [].concat(_toConsumableArray(getDaysInPrevMonth(date, offsetDayInWeek, value)), _toConsumableArray(getDaysInCurrentMonth(date, daysInMonth, value)), _toConsumableArray(getDaysInNextMonth(date, daysInMonth, offsetDayInWeek, value)));
     if (eventList !== null && eventList !== void 0 && eventList.length || disabledList !== null && disabledList !== void 0 && disabledList.length || max || min) {
-      var modifiedDays = getDaysWithModifications(days, eventList, disabledList, min, max, includeEdgeDates);
+      var modifiedDays = getDatesWithModifications({
+        dates: days,
+        type: CalendarState.Days,
+        includeEdgeDates: includeEdgeDates,
+        min: min,
+        max: max,
+        eventList: eventList,
+        disabledList: disabledList
+      });
       return getMatrix(modifiedDays);
     }
     return getMatrix(days);

package/styled-components/es/components/Calendar/hooks/useKeyNavigation.js

@@ -12,16 +12,16 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { Keys } from '../Calendar.types';
-import { ROW_STEP } from '../utils';
-
+import { offsetMap } from '../utils';
+import { sizeMap } from '../store/reducer';
 /**
  * Метод для получения стороны двойного календаря.
  */
-var getDoubleCalendarSide = function getDoubleCalendarSide(currentIndexWeek) {
-  if (currentIndexWeek >= 0 && currentIndexWeek < ROW_STEP) {
+var getDoubleCalendarSide = function getDoubleCalendarSide(currentIndex, calendarState) {
+  if (currentIndex >= 0 && currentIndex < offsetMap[calendarState]) {
     return 'first';
   }
-  if (currentIndexWeek >= ROW_STEP && currentIndexWeek < ROW_STEP * 2) {
+  if (currentIndex >= offsetMap[calendarState] && currentIndex < offsetMap[calendarState] * 2) {
     return 'second';
   }
   return '';
@@ -151,7 +151,7 @@ function getCorrectColumnIndex(_ref7) {
     return item;
   }) - 1;
 }
-var getCorrectIndexes = function getCorrectIndexes(refs, _ref8, rowSize, columnSize, withShift, defaultState) {
+var getCorrectIndexes = function getCorrectIndexes(refs, _ref8, rowSize, columnSize, withShift, defaultState, calendarState) {
   var _refs$current7;
   var _ref9 = _slicedToArray(_ref8, 2),
     rowIndex = _ref9[0],
@@ -175,13 +175,13 @@ var getCorrectIndexes = function getCorrectIndexes(refs, _ref8, rowSize, columnS
     }
   }
   if (newRowIndex === minColumnIndex - 1) {
-    newRowIndex = ROW_STEP - 1;
+    newRowIndex = offsetMap[calendarState] - 1;
     while (newRowIndex > minRowIndex && !isVisible(refs, newRowIndex, newColumnIndex)) {
       newRowIndex--;
     }
   }
   if (newRowIndex === rowSize + 1) {
-    newRowIndex = rowSize + 1 - ROW_STEP;
+    newRowIndex = rowSize + 1 - offsetMap[calendarState];
     while (newRowIndex <= maxRowIndex && !isVisible(refs, newRowIndex, newColumnIndex)) {
       newRowIndex++;
     }
@@ -219,7 +219,8 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
     isDouble = _ref10$isDouble === void 0 ? false : _ref10$isDouble,
     size = _ref10.size,
     onPrev = _ref10.onPrev,
-    onNext = _ref10.onNext;
+    onNext = _ref10.onNext,
+    calendarState = _ref10.calendarState;
   var _size = _slicedToArray(size, 2),
     rowSize = _size[0],
     columnSize = _size[1];
@@ -246,12 +247,13 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
       var refs = outerRefs.current;
       var isSecond = isDouble && isNext;
       var isFirst = isDouble && !isNext;
+      var firstEndIndex = Math.floor(sizeMap[calendarState]["double"][0] / 2);
 
       // Определяем какую часть сдвоенного календаря взять
       if (isFirst) {
-        refs = outerRefs.current.slice(0, 5);
+        refs = outerRefs.current.slice(0, firstEndIndex);
       } else if (isSecond) {
-        refs = outerRefs.current.slice(5, 12);
+        refs = outerRefs.current.slice(firstEndIndex, sizeMap[calendarState]["double"][1]);
       }
       var refsList = (_refs = refs) === null || _refs === void 0 ? void 0 : _refs.flatMap(function (items) {
         return items.filter(Boolean);
@@ -294,7 +296,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         return;
       }
     }
-    var _getCorrectIndexes = getCorrectIndexes(outerRefs, selectIndexes, rowSize, columnSize, withShiftState.current, currentIndexes.current),
+    var _getCorrectIndexes = getCorrectIndexes(outerRefs, selectIndexes, rowSize, columnSize, withShiftState.current, currentIndexes.current, calendarState),
       _getCorrectIndexes2 = _slicedToArray(_getCorrectIndexes, 2),
       newRowIndex = _getCorrectIndexes2[0],
       newColumnIndex = _getCorrectIndexes2[1];
@@ -314,7 +316,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
     if (item) {
       item.focus();
     }
-  }, [selectIndexes]);
+  }, [selectIndexes, outerRefs]);
   var onKeyDown = useCallback(function (event) {
     setIsOutOfMinMaxRange(false);
     var keyCode = event.keyCode,
@@ -341,6 +343,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
     switch (keyCode) {
       case Keys.pageUp:
         {
+          event.preventDefault();
           var isDisabledPreviousMonth = hasDisabledMonths({
             item: outerRefs.current[currentRowIndex][currentColumnIndex],
             key: 'previous'
@@ -354,6 +357,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.pageDown:
         {
+          event.preventDefault();
           var isDisabledNextMonth = hasDisabledMonths({
             item: outerRefs.current[currentRowIndex][currentColumnIndex],
             key: 'next'
@@ -367,6 +371,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.home:
         {
+          event.preventDefault();
           newColumnIndex = minColumnIndex;
           if (isVisible(outerRefs, newRowIndex, newColumnIndex)) {
             break;
@@ -376,6 +381,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.end:
         {
+          event.preventDefault();
           newColumnIndex = columnSize;
           if (isVisible(outerRefs, newRowIndex, newColumnIndex)) {
             break;
@@ -385,6 +391,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.left:
         {
+          event.preventDefault();
           newRowIndex = prevColumnIndex < minColumnIndex ? prevRowIndex : currentRowIndex;
           newColumnIndex = prevColumnIndex < minColumnIndex ? columnSize : prevColumnIndex;
           withShiftState.current = withShift;
@@ -419,7 +426,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
           if (isVisible(outerRefs, newRowIndex, newColumnIndex)) {
             break;
           }
-          if (!isDouble || getDoubleCalendarSide(currentRowIndex) === 'first') {
+          if (!isDouble || getDoubleCalendarSide(currentRowIndex, calendarState) === 'first') {
             if (isCurrentDateDisabledArrowLeft) {
               newRowIndex = currentRowIndex;
               newColumnIndex = currentColumnIndex;
@@ -432,6 +439,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.up:
         {
+          event.preventDefault();
           newRowIndex = prevRowIndex < minRowIndex ? rowSize : prevRowIndex;
           withShiftState.current = withShift;
           var isCurrentDateDisabledArrowUp = hasDisabledArrowKey({
@@ -470,7 +478,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
           if (isVisible(outerRefs, newRowIndex, newColumnIndex)) {
             break;
           }
-          if (!isDouble || getDoubleCalendarSide(currentRowIndex) === 'first') {
+          if (!isDouble || getDoubleCalendarSide(currentRowIndex, calendarState) === 'first') {
             if (isCurrentDateDisabledArrowUp) {
               newRowIndex = currentRowIndex;
               newColumnIndex = currentColumnIndex;
@@ -483,6 +491,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.right:
         {
+          event.preventDefault();
           newRowIndex = nextColumnIndex > columnSize ? nextRowIndex : currentRowIndex;
           newColumnIndex = nextColumnIndex > columnSize ? minColumnIndex : nextColumnIndex;
           withShiftState.current = withShift;
@@ -515,7 +524,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
           if (isVisible(outerRefs, newRowIndex, newColumnIndex)) {
             break;
           }
-          if (!isDouble || getDoubleCalendarSide(currentRowIndex) === 'second') {
+          if (!isDouble || getDoubleCalendarSide(currentRowIndex, calendarState) === 'second') {
             if (isCurrentDateDisabledArrowRight) {
               newRowIndex = currentRowIndex;
               newColumnIndex = currentColumnIndex;
@@ -528,6 +537,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
         }
       case Keys.down:
         {
+          event.preventDefault();
           newRowIndex = nextRowIndex > rowSize ? minRowIndex : nextRowIndex;
           withShiftState.current = withShift;
           var isCurrentDateDisabledArrowDown = hasDisabledArrowKey({
@@ -566,7 +576,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref10) {
           if (isVisible(outerRefs, newRowIndex, newColumnIndex)) {
             break;
           }
-          if (!isDouble || getDoubleCalendarSide(currentRowIndex) === 'second') {
+          if (!isDouble || getDoubleCalendarSide(currentRowIndex, calendarState) === 'second') {
             if (isCurrentDateDisabledArrowDown) {
               newRowIndex = currentRowIndex;
               newColumnIndex = currentColumnIndex;

package/styled-components/es/components/Calendar/hooks/useMonths.js

@@ -1,20 +1,45 @@
 import { useMemo } from 'react';
-import { SHORT_MONTH_NAME, isSelectedMonth, isCurrentMonth, getMatrix, MONTH_NAMES } from '../utils';
-
+import { SHORT_MONTH_NAME, isSelectedMonth, isCurrentMonth, getMatrix, MONTH_NAMES, isDateInRange, getDatesWithModifications } from '../utils';
+import { CalendarState } from '../store/types';
 /**
  * Хук для получения списка месяцев.
  */
-export var useMonths = function useMonths(date) {
+export var useMonths = function useMonths(_ref) {
+  var date = _ref.date,
+    value = _ref.value,
+    eventList = _ref.eventList,
+    disabledList = _ref.disabledList,
+    min = _ref.min,
+    max = _ref.max;
   return useMemo(function () {
-    var result = SHORT_MONTH_NAME.map(function (monthName, monthIndex) {
+    var months = SHORT_MONTH_NAME.map(function (monthName, monthIndex) {
       return {
         monthName: monthName,
         monthIndex: monthIndex,
         isCurrent: isCurrentMonth(date, monthIndex),
-        isSelected: isSelectedMonth(date, monthIndex),
-        monthFullName: MONTH_NAMES[monthIndex]
+        isSelected: Array.isArray(value) ? Boolean(value.find(function (v) {
+          return isSelectedMonth(date, monthIndex, v);
+        })) : isSelectedMonth(date, monthIndex, value),
+        inRange: Array.isArray(value) ? isDateInRange(date.year, monthIndex, 1, value) : false,
+        monthFullName: MONTH_NAMES[monthIndex],
+        date: {
+          year: date.year,
+          monthIndex: monthIndex,
+          day: 1
+        }
       };
     });
-    return getMatrix(result, 3);
-  }, [date]);
+    if (eventList !== null && eventList !== void 0 && eventList.length || disabledList !== null && disabledList !== void 0 && disabledList.length || max || min) {
+      var modifiedMonths = getDatesWithModifications({
+        dates: months,
+        type: CalendarState.Months,
+        min: min,
+        max: max,
+        eventList: eventList,
+        disabledList: disabledList
+      });
+      return getMatrix(modifiedMonths, 3);
+    }
+    return getMatrix(months, 3);
+  }, [date, value, eventList, disabledList, max, min]);
 };

package/styled-components/es/components/Calendar/hooks/useQuarters.js

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+import { QUARTER_NAMES, getMatrix, isDateInRange, getDatesWithModifications, quarterDates, isSelectedMonth as isSelectedQuarter, isCurrentMonth as isCurrentQuarter } from '../utils';
+import { CalendarState } from '../store/types';
+/**
+ * Хук для получения списка месяцев.
+ */
+export var useQuarters = function useQuarters(_ref) {
+  var date = _ref.date,
+    value = _ref.value,
+    eventList = _ref.eventList,
+    disabledList = _ref.disabledList,
+    min = _ref.min,
+    max = _ref.max;
+  return useMemo(function () {
+    var quarters = QUARTER_NAMES.map(function (quarterName) {
+      var _quarterDates$quarter = quarterDates[quarterName],
+        monthIndex = _quarterDates$quarter.monthIndex,
+        day = _quarterDates$quarter.day;
+      return {
+        quarterName: quarterName,
+        isCurrent: isCurrentQuarter(date, monthIndex),
+        isSelected: Array.isArray(value) ? Boolean(value.find(function (v) {
+          return isSelectedQuarter(date, monthIndex, v);
+        })) : isSelectedQuarter(date, monthIndex, value),
+        inRange: Array.isArray(value) ? isDateInRange(date.year, monthIndex, day, value) : false,
+        date: {
+          year: date.year,
+          monthIndex: monthIndex,
+          day: 1
+        }
+      };
+    });
+    if (eventList !== null && eventList !== void 0 && eventList.length || disabledList !== null && disabledList !== void 0 && disabledList.length || max || min) {
+      var modifiedQuarters = getDatesWithModifications({
+        dates: quarters,
+        type: CalendarState.Quarters,
+        min: min,
+        max: max,
+        eventList: eventList,
+        disabledList: disabledList
+      });
+      return getMatrix(modifiedQuarters, 2);
+    }
+    return getMatrix(quarters, 2);
+  }, [date, value, eventList, disabledList, max, min]);
+};

package/styled-components/es/components/Calendar/hooks/useYears.js

@@ -1,18 +1,46 @@
 import { useMemo } from 'react';
-import { YEAR_RENDER_COUNT, isCurrentYear, isSelectedYear, getMatrix } from '../utils';
+import { YEAR_RENDER_COUNT, isCurrentYear, isSelectedYear, getMatrix, isDateInRange, getDatesWithModifications } from '../utils';
+import { CalendarState } from '../store/types';
 /**
  * Хук для получения списка годов.
  */
-export var useYears = function useYears(date, startYear) {
+export var useYears = function useYears(_ref) {
+  var date = _ref.date,
+    value = _ref.value,
+    startYear = _ref.startYear,
+    eventList = _ref.eventList,
+    disabledList = _ref.disabledList,
+    min = _ref.min,
+    max = _ref.max;
   return useMemo(function () {
     // type-coverage:ignore-next-line
-    var result = Array.from(Array(YEAR_RENDER_COUNT), function (_, i) {
+    var years = Array.from(Array(YEAR_RENDER_COUNT), function (_, i) {
+      var yearValue = startYear + i;
       return {
         isCurrent: isCurrentYear(startYear + i),
-        isSelected: isSelectedYear(date, startYear + i),
-        yearValue: startYear + i
+        isSelected: Array.isArray(value) ? Boolean(value.find(function (v) {
+          return isSelectedYear(yearValue, v);
+        })) : isSelectedYear(yearValue, value),
+        inRange: Array.isArray(value) ? isDateInRange(yearValue, 0, 1, value) : false,
+        date: {
+          year: yearValue,
+          monthIndex: 0,
+          day: 1
+        },
+        yearValue: yearValue
       };
     });
-    return getMatrix(result, 3);
-  }, [date, startYear]);
+    if (eventList !== null && eventList !== void 0 && eventList.length || disabledList !== null && disabledList !== void 0 && disabledList.length || max || min) {
+      var modifiedMonths = getDatesWithModifications({
+        dates: years,
+        type: CalendarState.Years,
+        min: min,
+        max: max,
+        eventList: eventList,
+        disabledList: disabledList
+      });
+      return getMatrix(modifiedMonths, 3);
+    }
+    return getMatrix(years, 3);
+  }, [date, startYear, value, eventList, disabledList, max, min]);
 };

package/styled-components/es/components/Calendar/mixins/selected.js

@@ -1,5 +1,4 @@
 import { classes } from '../Calendar.tokens';
-import { addActive } from './active';
 export var addSelected = function addSelected(args) {
   var minWidth = args.minWidth,
     minHeight = args.minHeight,
@@ -7,12 +6,6 @@ export var addSelected = function addSelected(args) {
     selectedBackground = args.selectedBackground,
     selectedColor = args.selectedColor,
     selectableBackgroundHover = args.selectableBackgroundHover,
-    currentBorderColor = args.currentBorderColor,
-    activeBackground = args.activeBackground,
-    activeColor = args.activeColor;
-  return "\n        outline: none;\n        cursor: pointer;\n\n        &:hover {\n            background-color: ".concat(selectableBackgroundHover, ";\n        };\n        \n\n        &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: pointer;\n            font-weight: ").concat(selectedFontWeight, ";\n        }\n\n        &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n            border: 0;\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: default;\n            font-weight: ").concat(selectedFontWeight, ";\n        };\n        \n        ").concat(addActive({
-    activeBackground: activeBackground,
-    activeColor: activeColor,
-    activeFontWeight: selectedFontWeight
-  }), ";\n\n        &.").concat(classes.currentItem, " {\n            border: 0.063rem solid ").concat(currentBorderColor, ";\n\n            &.").concat(classes.selectedItem, " {\n                background-color: initial;\n                color: ").concat(selectedColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n        };\n    ");
+    currentBorderColor = args.currentBorderColor;
+  return "\n        outline: none;\n        cursor: pointer;\n\n        &:hover {\n            background-color: ".concat(selectableBackgroundHover, ";\n        };\n        \n\n        &.").concat(classes.hoveredItem, ", &.").concat(classes.hoveredItem, ":hover {\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: pointer;\n            font-weight: ").concat(selectedFontWeight, ";\n        }\n\n        &.").concat(classes.selectedItem, ":not(.").concat(classes.currentItem, ") {\n            border: 0;\n            background-color: ").concat(selectedBackground, ";\n            color: ").concat(selectedColor, ";\n            cursor: default;\n            font-weight: ").concat(selectedFontWeight, ";\n        };\n\n        &.").concat(classes.currentItem, " {\n            border: 0.063rem solid ").concat(currentBorderColor, ";\n\n            &.").concat(classes.selectedItem, " {\n                background-color: initial;\n                color: ").concat(selectedColor, ";\n                font-weight: ").concat(selectedFontWeight, ";\n\n                & > div:first-of-type {\n                    background-color: ").concat(selectedBackground, ";\n                    min-width: ").concat(minWidth, ";\n                    min-height: ").concat(minHeight, ";\n                }\n            }\n        };\n    ");
 };