@snack-uikit/calendar 0.13.13 → 0.13.14

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.13.14 (2026-02-18)</small>
+
+* feat(PDS-2680)!: added mode "month-range" and "year-range" for calendar & rename "range" in "date-ra ([6fbf360](https://github.com/cloud-ru-tech/snack-uikit/commit/6fbf360))
+
+
+
+
+
 ## <small>0.13.13 (2026-01-19)</small>
 
 * chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))

package/README.md

@@ -16,10 +16,10 @@
 
 ### Description
 
-- `Calendar` — основной компонент для выбора дат и периодов: он может работать в режимах `date`, `range`, `month`, `year` и `date-time` (дата и время).
+- `Calendar` — основной компонент для выбора дат и периодов: он может работать в режимах `date`, `date-range`, `month`, `month-range`, `year-range`, `year` и `date-time` (дата и время).
 - Компонент поддерживает как контролируемый (`value` + `onChangeValue`), так и неконтролируемый (`defaultValue`) режимы и умеет подстраиваться под разные размеры через проп `size` (`s`, `m`, `l`).
 - С помощью колбека `buildCellProps` можно управлять доступностью и подсветкой отдельных ячеек (например, отключить прошлые даты или выделить праздничные дни), а опция `showHolidays` автоматически раскрашивает выходные.
-- Проп `presets` позволяет добавить панель с пресетами для быстрого выбора периода в режиме `range`, в том числе с собственным списком вариантов.
+- Проп `presets` позволяет добавить панель с пресетами для быстрого выбора периода в режиме `date-range`, в том числе с собственным списком вариантов.
 - Локаль (`locale`) задаёт язык подписей и первый день недели, при отсутствии явно переданного значения используется язык браузера пользователя.
 - Figma: [`Calendar`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A27244&mode=design).
 
@@ -41,7 +41,7 @@ function CalendarExample() {
 
       {/* Выбор периода c пресетами */}
       <Calendar
-        mode='range'
+        mode='date-range'
         presets={{
           enabled: true,
           title: true,
@@ -102,7 +102,7 @@ function TimePickerExample() {
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mode* | "date" \| "date-time" \| "range" \| "month" \| "year" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `range` - режим выбора периода <br> - `month` - режим выбора месяца <br> - `date-time` - режим выбора даты и времени <br> - `year` - режим выбора года |
+| mode* | "date" \| "date-time" \| "date-range" \| "month" \| "month-range" \| "year" \| "year-range" | - | Режим работы календаря: <br> - `date` - режим выбора даты <br> - `date-range` - режим выбора периода <br> - `month-range` - режим выбора периода из месяцев <br> - `year-range` - режим выбора периода из лет <br> - `month` - режим выбора месяца <br> - `date-time` - режим выбора даты и времени <br> - `year` - режим выбора года |
 | size | enum Size: `"s"`, `"m"`, `"l"` | m | Размер |
 | today | `number \| Date` | - | Дата сегодняшнего дня |
 | showHolidays | `boolean` | - | Раскрашивает субботу и воскресенье |
@@ -114,10 +114,10 @@ function TimePickerExample() {
 | locale | `Intl.Locale` | Проставляется в соответствие с языком в настройках браузера | Локаль, в соответствие с которой выставляется язык названий и первый день недели |
 | onFocusLeave | `(direction: FocusDirection) => void` | - | Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. |
 | navigationStartRef | `RefObject<{ focus(): void; }>` | - | Ссылка на управление первым элементом навигации |
-| presets | `PresetsOptions` | - | Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) |
-| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) <br> - в режиме month тип `Date` <br> - в режиме date-time тип `Date` <br> - в режиме year тип `Date` |
-| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме range тип `Range` (`[Date, Date]`) <br> - в режиме month тип `Date` <br> - в режиме date-time тип `Date` <br> - в режиме year тип `Date` |
-| onChangeValue | `((value: Date) => void) \| ((value: Range) => void) \| ((value: Date) => void) \| ((value: Date) => void) \| ((value: Date) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме range принимает тип `Range` <br> - в режиме month принимает тип `Date` <br> - в режиме date-time принимает тип `Date` <br> - в режиме year принимает тип `Date` |
+| presets | `PresetsOptions` | - | Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'date-range' и отсутствии buildCellProps (временно PDS-3139) |
+| value | `Date \| Range` | - | Выбранное значение.<br> - в режиме date тип `Date` <br> - в режиме date-range тип `Range` (`[Date, Date]`) <br> - в режиме month-range тип `Range` (`[Date, Date]`) <br> - в режиме year-range тип `Range` (`[Date, Date]`) <br> - в режиме month тип `Date` <br> - в режиме date-time тип `Date` <br> - в режиме year тип `Date` |
+| defaultValue | `Date \| Range` | - | Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` <br> - в режиме date-range тип `Range` (`[Date, Date]`) <br> - в режиме month-range тип `Range` (`[Date, Date]`) <br> - в режиме year-range тип `Range` (`[Date, Date]`) <br> - в режиме month тип `Date` <br> - в режиме date-time тип `Date` <br> - в режиме year тип `Date` |
+| onChangeValue | `((value: Date) => void) \| ((value: Range) => void) \| ((value: Range) => void) \| ((value: Range) => void) \| ((value: Date) => void) \| ((value: Date) => void) \| ((value: Date) => void)` | - | Колбек выбора значения.<br> - в режиме date принимает тип `Date` <br> - в режиме date-range принимает тип `Range` <br> - в режиме month-range принимает тип `Range` <br> - в режиме year-range принимает тип `Range` <br> - в режиме month принимает тип `Date` <br> - в режиме date-time принимает тип `Date` <br> - в режиме year принимает тип `Date` |
 | showSeconds | `boolean` | - | Показывать ли секунды (только в режиме date-time) |
 ## TimePicker
 ### Props

package/dist/cjs/components/Calendar/Calendar.d.ts

@@ -46,7 +46,7 @@ type CommonCalendarProps = {
     navigationStartRef?: RefObject<{
         focus(): void;
     }>;
-    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) */
+    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'date-range' и отсутствии buildCellProps (временно PDS-3139) */
     presets?: PresetsOptions;
 };
 type DateCalendarProps = CommonCalendarProps & {
@@ -92,15 +92,35 @@ type DateTimeCalendarProps = CommonCalendarProps & {
     showSeconds?: boolean;
 };
 type RangeCalendarProps = CommonCalendarProps & {
-    /** <br> - `range` - режим выбора периода */
-    mode: typeof CALENDAR_MODE.Range;
-    /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
+    /** <br> - `date-range` - режим выбора периода */
+    mode: typeof CALENDAR_MODE.DateRange;
+    /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
     value?: Range;
-    /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
+    /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
     defaultValue?: Range;
-    /** <br> - в режиме range принимает тип `Range` */
+    /** <br> - в режиме date-range принимает тип `Range` */
     onChangeValue?(value: Range): void;
 };
-export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps | YearCalendarProps>;
+type MonthRangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `month-range` - режим выбора периода из месяцев */
+    mode: typeof CALENDAR_MODE.MonthRange;
+    /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме month-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+type YearRangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `year-range` - режим выбора периода из лет */
+    mode: typeof CALENDAR_MODE.YearRange;
+    /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме year-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthRangeCalendarProps | YearRangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps | YearCalendarProps>;
 export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/constants.d.ts

@@ -6,9 +6,11 @@ export declare const VIEW_MODE: {
 export declare const CALENDAR_MODE: {
     readonly Date: "date";
     readonly DateTime: "date-time";
-    readonly Range: "range";
+    readonly DateRange: "date-range";
     readonly Month: "month";
+    readonly MonthRange: "month-range";
     readonly Year: "year";
+    readonly YearRange: "year-range";
 };
 export declare const IN_RANGE_POSITION: {
     readonly Out: "out";

package/dist/cjs/constants.js

@@ -12,9 +12,11 @@ exports.VIEW_MODE = {
 exports.CALENDAR_MODE = {
   Date: 'date',
   DateTime: 'date-time',
-  Range: 'range',
+  DateRange: 'date-range',
   Month: 'month',
-  Year: 'year'
+  MonthRange: 'month-range',
+  Year: 'year',
+  YearRange: 'year-range'
 };
 exports.IN_RANGE_POSITION = {
   Out: 'out',

package/dist/cjs/helperComponents/CalendarBase/CalendarBase.js

@@ -50,8 +50,10 @@ const CALENDAR_SIZE_MAP = {
 const CALENDAR_DEFAULT_MODE_MAP = {
   [constants_1.CALENDAR_MODE.Date]: constants_1.VIEW_MODE.Month,
   [constants_1.CALENDAR_MODE.DateTime]: constants_1.VIEW_MODE.Month,
-  [constants_1.CALENDAR_MODE.Range]: constants_1.VIEW_MODE.Month,
+  [constants_1.CALENDAR_MODE.DateRange]: constants_1.VIEW_MODE.Month,
+  [constants_1.CALENDAR_MODE.MonthRange]: constants_1.VIEW_MODE.Year,
   [constants_1.CALENDAR_MODE.Month]: constants_1.VIEW_MODE.Year,
+  [constants_1.CALENDAR_MODE.YearRange]: constants_1.VIEW_MODE.Decade,
   [constants_1.CALENDAR_MODE.Year]: constants_1.VIEW_MODE.Decade
 };
 function CalendarBase(_a) {
@@ -111,8 +113,16 @@ function CalendarBase(_a) {
   });
   const setValue = (0, react_1.useCallback)(dates => {
     const [first, last] = (0, utils_2.sortDates)(dates);
+    if (mode === constants_1.CALENDAR_MODE.MonthRange) {
+      setValueState([(0, utils_2.getStartOfTheMonth)(first), (0, utils_2.getEndOfTheMonth)(last)]);
+      return;
+    }
+    if (mode === constants_1.CALENDAR_MODE.YearRange) {
+      setValueState([(0, utils_2.getStartOfTheYear)(first), (0, utils_2.getEndOfTheYear)(last)]);
+      return;
+    }
     setValueState([first, (0, utils_2.getEndOfTheDay)(last)]);
-  }, [setValueState]);
+  }, [mode, setValueState]);
   const {
     preselectedRange,
     continuePreselect,
@@ -137,7 +147,7 @@ function CalendarBase(_a) {
     }
     return (0, utils_3.getDefaultPresets)(t, today);
   }, [presets === null || presets === void 0 ? void 0 : presets.items, t, today]);
-  const arePeriodPresetsDisplayed = mode === 'range' && (presets === null || presets === void 0 ? void 0 : presets.enabled) && !buildCellProps; // TODO PDS-3139
+  const arePeriodPresetsDisplayed = mode === constants_1.CALENDAR_MODE.DateRange && (presets === null || presets === void 0 ? void 0 : presets.enabled) && !buildCellProps; // TODO PDS-3139
   const onPresetClick = (0, react_1.useCallback)(selectedPeriod => {
     setValue(selectedPeriod);
   }, [setValue]);

package/dist/cjs/helperComponents/DecadeView/DecadeView.js

@@ -21,7 +21,9 @@ function DecadeView() {
     continuePreselect,
     restartPreselect,
     mode,
-    setValue
+    setValue,
+    startPreselect,
+    completePreselect
   } = (0, react_1.useContext)(CalendarContext_1.CalendarContext);
   const grid = (0, hooks_1.useGrid)({
     buildGrid: utils_2.buildDecadeGrid,
@@ -29,6 +31,10 @@ function DecadeView() {
     isInPeriod: utils_1.isTheSameDecade,
     getItemLabel: utils_1.getYearLabel,
     onSelect(date) {
+      if (mode === constants_1.CALENDAR_MODE.YearRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
       if (mode === constants_1.CALENDAR_MODE.Year) {
         setValue([date, date]);
         return;

package/dist/cjs/helperComponents/MonthView/MonthView.js

@@ -61,7 +61,7 @@ function MonthView() {
         onDateChange(date);
         return;
       }
-      if (mode === constants_1.CALENDAR_MODE.Range) {
+      if (mode === constants_1.CALENDAR_MODE.DateRange) {
         preselectedRange ? completePreselect(date) : startPreselect(date);
         return;
       }

package/dist/cjs/helperComponents/YearView/YearView.js

@@ -23,7 +23,9 @@ function YearView() {
     restartPreselect,
     locale,
     setValue,
-    mode
+    mode,
+    startPreselect,
+    completePreselect
   } = (0, react_1.useContext)(CalendarContext_1.CalendarContext);
   const grid = (0, hooks_1.useGrid)({
     buildGrid: utils_2.buildYearGrid,
@@ -35,6 +37,10 @@ function YearView() {
         setValue([date, date]);
         return;
       }
+      if (mode === constants_1.CALENDAR_MODE.MonthRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
       setFocus(constants_1.AUTOFOCUS);
       setViewShift((0, utils_1.getMonthShift)(referenceDate, date));
       setViewMode(constants_1.VIEW_MODE.Month);

package/dist/cjs/hooks.js

@@ -66,7 +66,8 @@ function useGrid(_ref) {
         }
       }
       const dateTimeSelectedValue = isDateFilled() ? new Date((_b = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.year) !== null && _b !== void 0 ? _b : 0, (_c = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.month) !== null && _c !== void 0 ? _c : 0, (_d = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.day) !== null && _d !== void 0 ? _d : 0) : undefined;
-      const inRangePosition = mode === constants_1.CALENDAR_MODE.Range ? (0, utils_2.getInRangePosition)(date, viewMode, preselectedRange || value) : constants_1.IN_RANGE_POSITION.Out;
+      const isRangeMode = mode === constants_1.CALENDAR_MODE.DateRange || mode === constants_1.CALENDAR_MODE.MonthRange || mode === constants_1.CALENDAR_MODE.YearRange;
+      const inRangePosition = isRangeMode ? (0, utils_2.getInRangePosition)(date, viewMode, preselectedRange || value) : constants_1.IN_RANGE_POSITION.Out;
       const isSelectedValue = value && !preselectedRange && !dateTimeSelectedValue ? isTheSameItem(value[0], date) || isTheSameItem(value[1], date) : false;
       const isPreselected = preselectedRange ? isTheSameItem(preselectedRange[0], date) : false;
       const isDateTimeValueSelected = dateTimeSelectedValue ? isTheSameItem(dateTimeSelectedValue, date) : false;

package/dist/cjs/utils.d.ts

@@ -15,6 +15,10 @@ export declare const isTheSameItem: (viewMode: ViewMode, date1: Date, date2: Dat
 export declare const sortDates: (dates: Date[]) => Date[];
 export declare const getInRangePosition: (date: Date, viewMode: ViewMode, range?: Range) => InRangePosition;
 export declare const getEndOfTheDay: (date: Date) => Date;
+export declare const getStartOfTheMonth: (date: Date) => Date;
+export declare const getEndOfTheMonth: (date: Date) => Date;
+export declare const getStartOfTheYear: (date: Date) => Date;
+export declare const getEndOfTheYear: (date: Date) => Date;
 export declare const getTestIdBuilder: (testId?: string) => (prefix: string) => string | undefined;
 export declare const getLocale: ({ localeProp, ctxLang }?: {
     localeProp?: Intl.Locale;

package/dist/cjs/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isWeekend = exports.getStartOfWeek = exports.getLocale = exports.getTestIdBuilder = exports.getEndOfTheDay = exports.getInRangePosition = exports.sortDates = exports.isTheSameItem = exports.getDecadeShift = exports.getYearShift = exports.getMonthShift = exports.getYearLabel = exports.getDateLabel = exports.getMonthName = exports.capitalize = exports.isTheSameMonth = exports.isTheSameYear = exports.isTheSameDecade = void 0;
+exports.isWeekend = exports.getStartOfWeek = exports.getLocale = exports.getTestIdBuilder = exports.getEndOfTheYear = exports.getStartOfTheYear = exports.getEndOfTheMonth = exports.getStartOfTheMonth = exports.getEndOfTheDay = exports.getInRangePosition = exports.sortDates = exports.isTheSameItem = exports.getDecadeShift = exports.getYearShift = exports.getMonthShift = exports.getYearLabel = exports.getDateLabel = exports.getMonthName = exports.capitalize = exports.isTheSameMonth = exports.isTheSameYear = exports.isTheSameDecade = void 0;
 exports.isTheSameDate = isTheSameDate;
 const weekstart_1 = require("weekstart");
 const utils_1 = require("@snack-uikit/utils");
@@ -77,6 +77,14 @@ const getInRangePosition = (date, viewMode, range) => {
 exports.getInRangePosition = getInRangePosition;
 const getEndOfTheDay = date => new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);
 exports.getEndOfTheDay = getEndOfTheDay;
+const getStartOfTheMonth = date => new Date(new Date(date.getFullYear(), date.getMonth(), 1).valueOf());
+exports.getStartOfTheMonth = getStartOfTheMonth;
+const getEndOfTheMonth = date => new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).valueOf() - 1);
+exports.getEndOfTheMonth = getEndOfTheMonth;
+const getStartOfTheYear = date => new Date(new Date(date.getFullYear(), 0, 1).valueOf());
+exports.getStartOfTheYear = getStartOfTheYear;
+const getEndOfTheYear = date => new Date(new Date(date.getFullYear() + 1, 0, 1).valueOf() - 1);
+exports.getEndOfTheYear = getEndOfTheYear;
 const getTestIdBuilder = testId => prefix => testId ? `${prefix}-${testId}` : undefined;
 exports.getTestIdBuilder = getTestIdBuilder;
 const getNavigatorLocale = () => {

package/dist/esm/components/Calendar/Calendar.d.ts

@@ -46,7 +46,7 @@ type CommonCalendarProps = {
     navigationStartRef?: RefObject<{
         focus(): void;
     }>;
-    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) */
+    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'date-range' и отсутствии buildCellProps (временно PDS-3139) */
     presets?: PresetsOptions;
 };
 type DateCalendarProps = CommonCalendarProps & {
@@ -92,15 +92,35 @@ type DateTimeCalendarProps = CommonCalendarProps & {
     showSeconds?: boolean;
 };
 type RangeCalendarProps = CommonCalendarProps & {
-    /** <br> - `range` - режим выбора периода */
-    mode: typeof CALENDAR_MODE.Range;
-    /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
+    /** <br> - `date-range` - режим выбора периода */
+    mode: typeof CALENDAR_MODE.DateRange;
+    /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
     value?: Range;
-    /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
+    /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
     defaultValue?: Range;
-    /** <br> - в режиме range принимает тип `Range` */
+    /** <br> - в режиме date-range принимает тип `Range` */
     onChangeValue?(value: Range): void;
 };
-export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps | YearCalendarProps>;
+type MonthRangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `month-range` - режим выбора периода из месяцев */
+    mode: typeof CALENDAR_MODE.MonthRange;
+    /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме month-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+type YearRangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `year-range` - режим выбора периода из лет */
+    mode: typeof CALENDAR_MODE.YearRange;
+    /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме year-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthRangeCalendarProps | YearRangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps | YearCalendarProps>;
 export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/constants.d.ts

@@ -6,9 +6,11 @@ export declare const VIEW_MODE: {
 export declare const CALENDAR_MODE: {
     readonly Date: "date";
     readonly DateTime: "date-time";
-    readonly Range: "range";
+    readonly DateRange: "date-range";
     readonly Month: "month";
+    readonly MonthRange: "month-range";
     readonly Year: "year";
+    readonly YearRange: "year-range";
 };
 export declare const IN_RANGE_POSITION: {
     readonly Out: "out";

package/dist/esm/constants.js

@@ -6,9 +6,11 @@ export const VIEW_MODE = {
 export const CALENDAR_MODE = {
     Date: 'date',
     DateTime: 'date-time',
-    Range: 'range',
+    DateRange: 'date-range',
     Month: 'month',
+    MonthRange: 'month-range',
     Year: 'year',
+    YearRange: 'year-range',
 };
 export const IN_RANGE_POSITION = {
     Out: 'out',

package/dist/esm/helperComponents/CalendarBase/CalendarBase.js

@@ -18,7 +18,7 @@ import { useLocale } from '@snack-uikit/locale';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
 import { useDateAndTime } from '../../hooks';
-import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
+import { getEndOfTheDay, getEndOfTheMonth, getEndOfTheYear, getLocale, getStartOfTheMonth, getStartOfTheYear, getTestIdBuilder, sortDates, } from '../../utils';
 import { CalendarBody } from '../CalendarBody';
 import { CalendarContext } from '../CalendarContext';
 import { CalendarNavigation } from '../CalendarNavigation';
@@ -42,8 +42,10 @@ const CALENDAR_SIZE_MAP = {
 const CALENDAR_DEFAULT_MODE_MAP = {
     [CALENDAR_MODE.Date]: VIEW_MODE.Month,
     [CALENDAR_MODE.DateTime]: VIEW_MODE.Month,
-    [CALENDAR_MODE.Range]: VIEW_MODE.Month,
+    [CALENDAR_MODE.DateRange]: VIEW_MODE.Month,
+    [CALENDAR_MODE.MonthRange]: VIEW_MODE.Year,
     [CALENDAR_MODE.Month]: VIEW_MODE.Year,
+    [CALENDAR_MODE.YearRange]: VIEW_MODE.Decade,
     [CALENDAR_MODE.Year]: VIEW_MODE.Decade,
 };
 export function CalendarBase(_a) {
@@ -64,8 +66,16 @@ export function CalendarBase(_a) {
     const secondsKeyboardNavigationRef = useRef({ focusItem: () => { } });
     const setValue = useCallback((dates) => {
         const [first, last] = sortDates(dates);
+        if (mode === CALENDAR_MODE.MonthRange) {
+            setValueState([getStartOfTheMonth(first), getEndOfTheMonth(last)]);
+            return;
+        }
+        if (mode === CALENDAR_MODE.YearRange) {
+            setValueState([getStartOfTheYear(first), getEndOfTheYear(last)]);
+            return;
+        }
         setValueState([first, getEndOfTheDay(last)]);
-    }, [setValueState]);
+    }, [mode, setValueState]);
     const { preselectedRange, continuePreselect, completePreselect, restartPreselect, startPreselect } = useRange({
         setValue,
     });
@@ -79,7 +89,7 @@ export function CalendarBase(_a) {
         }
         return getDefaultPresets(t, today);
     }, [presets === null || presets === void 0 ? void 0 : presets.items, t, today]);
-    const arePeriodPresetsDisplayed = mode === 'range' && (presets === null || presets === void 0 ? void 0 : presets.enabled) && !buildCellProps; // TODO PDS-3139
+    const arePeriodPresetsDisplayed = mode === CALENDAR_MODE.DateRange && (presets === null || presets === void 0 ? void 0 : presets.enabled) && !buildCellProps; // TODO PDS-3139
     const onPresetClick = useCallback((selectedPeriod) => {
         setValue(selectedPeriod);
     }, [setValue]);

package/dist/esm/helperComponents/DecadeView/DecadeView.js

@@ -7,13 +7,17 @@ import { CalendarContext } from '../CalendarContext';
 import { Grid } from '../Grid';
 import { buildDecadeGrid } from './utils';
 export function DecadeView() {
-    const { referenceDate, setViewMode, setViewShift, preselectedRange, continuePreselect, restartPreselect, mode, setValue, } = useContext(CalendarContext);
+    const { referenceDate, setViewMode, setViewShift, preselectedRange, continuePreselect, restartPreselect, mode, setValue, startPreselect, completePreselect, } = useContext(CalendarContext);
     const grid = useGrid({
         buildGrid: buildDecadeGrid,
         isTheSameItem: isTheSameYear,
         isInPeriod: isTheSameDecade,
         getItemLabel: getYearLabel,
         onSelect(date) {
+            if (mode === CALENDAR_MODE.YearRange) {
+                preselectedRange ? completePreselect(date) : startPreselect(date);
+                return;
+            }
             if (mode === CALENDAR_MODE.Year) {
                 setValue([date, date]);
                 return;

package/dist/esm/helperComponents/MonthView/MonthView.js

@@ -39,7 +39,7 @@ export function MonthView() {
                 onDateChange(date);
                 return;
             }
-            if (mode === CALENDAR_MODE.Range) {
+            if (mode === CALENDAR_MODE.DateRange) {
                 preselectedRange ? completePreselect(date) : startPreselect(date);
                 return;
             }

package/dist/esm/helperComponents/YearView/YearView.js

@@ -7,7 +7,7 @@ import { CalendarContext } from '../CalendarContext';
 import { Grid } from '../Grid';
 import { buildYearGrid } from './utils';
 export function YearView() {
-    const { referenceDate, setViewMode, setViewShift, setFocus, preselectedRange, continuePreselect, restartPreselect, locale, setValue, mode, } = useContext(CalendarContext);
+    const { referenceDate, setViewMode, setViewShift, setFocus, preselectedRange, continuePreselect, restartPreselect, locale, setValue, mode, startPreselect, completePreselect, } = useContext(CalendarContext);
     const grid = useGrid({
         buildGrid: buildYearGrid,
         isTheSameItem: isTheSameMonth,
@@ -18,6 +18,10 @@ export function YearView() {
                 setValue([date, date]);
                 return;
             }
+            if (mode === CALENDAR_MODE.MonthRange) {
+                preselectedRange ? completePreselect(date) : startPreselect(date);
+                return;
+            }
             setFocus(AUTOFOCUS);
             setViewShift(getMonthShift(referenceDate, date));
             setViewMode(VIEW_MODE.Month);

package/dist/esm/hooks.js

@@ -31,7 +31,8 @@ export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameIt
             const dateTimeSelectedValue = isDateFilled()
                 ? new Date((_b = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.year) !== null && _b !== void 0 ? _b : 0, (_c = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.month) !== null && _c !== void 0 ? _c : 0, (_d = dateAndTime === null || dateAndTime === void 0 ? void 0 : dateAndTime.day) !== null && _d !== void 0 ? _d : 0)
                 : undefined;
-            const inRangePosition = mode === CALENDAR_MODE.Range
+            const isRangeMode = mode === CALENDAR_MODE.DateRange || mode === CALENDAR_MODE.MonthRange || mode === CALENDAR_MODE.YearRange;
+            const inRangePosition = isRangeMode
                 ? getInRangePosition(date, viewMode, preselectedRange || value)
                 : IN_RANGE_POSITION.Out;
             const isSelectedValue = value && !preselectedRange && !dateTimeSelectedValue

package/dist/esm/utils.d.ts

@@ -15,6 +15,10 @@ export declare const isTheSameItem: (viewMode: ViewMode, date1: Date, date2: Dat
 export declare const sortDates: (dates: Date[]) => Date[];
 export declare const getInRangePosition: (date: Date, viewMode: ViewMode, range?: Range) => InRangePosition;
 export declare const getEndOfTheDay: (date: Date) => Date;
+export declare const getStartOfTheMonth: (date: Date) => Date;
+export declare const getEndOfTheMonth: (date: Date) => Date;
+export declare const getStartOfTheYear: (date: Date) => Date;
+export declare const getEndOfTheYear: (date: Date) => Date;
 export declare const getTestIdBuilder: (testId?: string) => (prefix: string) => string | undefined;
 export declare const getLocale: ({ localeProp, ctxLang }?: {
     localeProp?: Intl.Locale;

package/dist/esm/utils.js

@@ -54,6 +54,10 @@ export const getInRangePosition = (date, viewMode, range) => {
     return date.valueOf() >= start && date.valueOf() <= end ? IN_RANGE_POSITION.In : IN_RANGE_POSITION.Out;
 };
 export const getEndOfTheDay = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);
+export const getStartOfTheMonth = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), 1).valueOf());
+export const getEndOfTheMonth = (date) => new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).valueOf() - 1);
+export const getStartOfTheYear = (date) => new Date(new Date(date.getFullYear(), 0, 1).valueOf());
+export const getEndOfTheYear = (date) => new Date(new Date(date.getFullYear() + 1, 0, 1).valueOf() - 1);
 export const getTestIdBuilder = (testId) => (prefix) => (testId ? `${prefix}-${testId}` : undefined);
 const getNavigatorLocale = () => { var _a; return (isBrowser() ? ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.language) !== null && _a !== void 0 ? _a : 'ru-RU') : 'ru-RU'); };
 export const getLocale = ({ localeProp, ctxLang } = {}) => localeProp || new Intl.Locale(ctxLang ? ctxLang.replace('_', '-') : getNavigatorLocale());

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Calendar",
-  "version": "0.13.13",
+  "version": "0.13.14",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,8 +38,8 @@
   "dependencies": {
     "@snack-uikit/button": "0.19.17",
     "@snack-uikit/divider": "3.2.11",
-    "@snack-uikit/icons": "0.27.5",
-    "@snack-uikit/list": "0.32.12",
+    "@snack-uikit/icons": "0.27.6",
+    "@snack-uikit/list": "0.32.13",
     "@snack-uikit/utils": "4.0.1",
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4",
@@ -48,5 +48,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
+  "gitHead": "17b72086167d3d6503e4e74142358765230478c8"
 }

package/src/components/Calendar/Calendar.tsx

@@ -49,7 +49,7 @@ type CommonCalendarProps = {
   onFocusLeave?(direction: FocusDirection): void;
   /** Ссылка на управление первым элементом навигации */
   navigationStartRef?: RefObject<{ focus(): void }>;
-  /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) */
+  /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'date-range' и отсутствии buildCellProps (временно PDS-3139) */
   presets?: PresetsOptions;
 };
 
@@ -100,18 +100,46 @@ type DateTimeCalendarProps = CommonCalendarProps & {
 };
 
 type RangeCalendarProps = CommonCalendarProps & {
-  /** <br> - `range` - режим выбора периода */
-  mode: typeof CALENDAR_MODE.Range;
-  /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
+  /** <br> - `date-range` - режим выбора периода */
+  mode: typeof CALENDAR_MODE.DateRange;
+  /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
   value?: Range;
-  /** <br> - в режиме range тип `Range` (`[Date, Date]`) */
+  /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
   defaultValue?: Range;
-  /** <br> - в режиме range принимает тип `Range` */
+  /** <br> - в режиме date-range принимает тип `Range` */
+  onChangeValue?(value: Range): void;
+};
+
+type MonthRangeCalendarProps = CommonCalendarProps & {
+  /** <br> - `month-range` - режим выбора периода из месяцев */
+  mode: typeof CALENDAR_MODE.MonthRange;
+  /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+  value?: Range;
+  /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+  defaultValue?: Range;
+  /** <br> - в режиме month-range принимает тип `Range` */
+  onChangeValue?(value: Range): void;
+};
+
+type YearRangeCalendarProps = CommonCalendarProps & {
+  /** <br> - `year-range` - режим выбора периода из лет */
+  mode: typeof CALENDAR_MODE.YearRange;
+  /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+  value?: Range;
+  /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+  defaultValue?: Range;
+  /** <br> - в режиме year-range принимает тип `Range` */
   onChangeValue?(value: Range): void;
 };
 
 export type CalendarProps = WithSupportProps<
-  DateCalendarProps | RangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps | YearCalendarProps
+  | DateCalendarProps
+  | RangeCalendarProps
+  | MonthRangeCalendarProps
+  | YearRangeCalendarProps
+  | MonthCalendarProps
+  | DateTimeCalendarProps
+  | YearCalendarProps
 >;
 
 export function Calendar(props: CalendarProps) {

package/src/constants.ts

@@ -7,9 +7,11 @@ export const VIEW_MODE = {
 export const CALENDAR_MODE = {
   Date: 'date',
   DateTime: 'date-time',
-  Range: 'range',
+  DateRange: 'date-range',
   Month: 'month',
+  MonthRange: 'month-range',
   Year: 'year',
+  YearRange: 'year-range',
 } as const;
 
 export const IN_RANGE_POSITION = {

package/src/helperComponents/CalendarBase/CalendarBase.tsx

@@ -18,7 +18,16 @@ import {
   Size,
   ViewMode,
 } from '../../types';
-import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
+import {
+  getEndOfTheDay,
+  getEndOfTheMonth,
+  getEndOfTheYear,
+  getLocale,
+  getStartOfTheMonth,
+  getStartOfTheYear,
+  getTestIdBuilder,
+  sortDates,
+} from '../../utils';
 import { CalendarBody } from '../CalendarBody';
 import { CalendarContext } from '../CalendarContext';
 import { CalendarNavigation } from '../CalendarNavigation';
@@ -65,8 +74,10 @@ const CALENDAR_SIZE_MAP: Record<Size, string> = {
 const CALENDAR_DEFAULT_MODE_MAP: Record<CalendarMode, ViewMode> = {
   [CALENDAR_MODE.Date]: VIEW_MODE.Month,
   [CALENDAR_MODE.DateTime]: VIEW_MODE.Month,
-  [CALENDAR_MODE.Range]: VIEW_MODE.Month,
+  [CALENDAR_MODE.DateRange]: VIEW_MODE.Month,
+  [CALENDAR_MODE.MonthRange]: VIEW_MODE.Year,
   [CALENDAR_MODE.Month]: VIEW_MODE.Year,
+  [CALENDAR_MODE.YearRange]: VIEW_MODE.Decade,
   [CALENDAR_MODE.Year]: VIEW_MODE.Decade,
 };
 
@@ -113,16 +124,27 @@ export function CalendarBase({
 
   const applyButtonRef = useRef<HTMLButtonElement>(null);
   const currentButtonRef = useRef<HTMLButtonElement>(null);
-  const hoursKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
-  const minutesKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
-  const secondsKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+  const hoursKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => { } });
+  const minutesKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => { } });
+  const secondsKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => { } });
 
   const setValue = useCallback(
     (dates: Range) => {
       const [first, last] = sortDates(dates);
+
+      if (mode === CALENDAR_MODE.MonthRange) {
+        setValueState([getStartOfTheMonth(first), getEndOfTheMonth(last)]);
+        return;
+      }
+
+      if (mode === CALENDAR_MODE.YearRange) {
+        setValueState([getStartOfTheYear(first), getEndOfTheYear(last)]);
+        return;
+      }
+
       setValueState([first, getEndOfTheDay(last)]);
     },
-    [setValueState],
+    [mode, setValueState],
   );
 
   const { preselectedRange, continuePreselect, completePreselect, restartPreselect, startPreselect } = useRange({
@@ -145,7 +167,7 @@ export function CalendarBase({
     return getDefaultPresets(t, today);
   }, [presets?.items, t, today]);
 
-  const arePeriodPresetsDisplayed = mode === 'range' && presets?.enabled && !buildCellProps; // TODO PDS-3139
+  const arePeriodPresetsDisplayed = mode === CALENDAR_MODE.DateRange && presets?.enabled && !buildCellProps; // TODO PDS-3139
 
   const onPresetClick = useCallback(
     (selectedPeriod: Range) => {

package/src/helperComponents/DecadeView/DecadeView.tsx

@@ -17,6 +17,8 @@ export function DecadeView() {
     restartPreselect,
     mode,
     setValue,
+    startPreselect,
+    completePreselect,
   } = useContext(CalendarContext);
 
   const grid = useGrid({
@@ -26,6 +28,11 @@ export function DecadeView() {
     getItemLabel: getYearLabel,
 
     onSelect(date: Date) {
+      if (mode === CALENDAR_MODE.YearRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
+
       if (mode === CALENDAR_MODE.Year) {
         setValue([date, date]);
         return;

package/src/helperComponents/MonthView/MonthView.tsx

@@ -62,7 +62,7 @@ export function MonthView() {
         return;
       }
 
-      if (mode === CALENDAR_MODE.Range) {
+      if (mode === CALENDAR_MODE.DateRange) {
         preselectedRange ? completePreselect(date) : startPreselect(date);
         return;
       }

package/src/helperComponents/YearView/YearView.tsx

@@ -19,6 +19,8 @@ export function YearView() {
     locale,
     setValue,
     mode,
+    startPreselect,
+    completePreselect,
   } = useContext(CalendarContext);
 
   const grid = useGrid({
@@ -33,6 +35,11 @@ export function YearView() {
         return;
       }
 
+      if (mode === CALENDAR_MODE.MonthRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
+
       setFocus(AUTOFOCUS);
       setViewShift(getMonthShift(referenceDate, date));
       setViewMode(VIEW_MODE.Month);

package/src/hooks.ts

@@ -72,10 +72,11 @@ export function useGrid({
           ? new Date(dateAndTime?.year ?? 0, dateAndTime?.month ?? 0, dateAndTime?.day ?? 0)
           : undefined;
 
-        const inRangePosition =
-          mode === CALENDAR_MODE.Range
-            ? getInRangePosition(date, viewMode, preselectedRange || value)
-            : IN_RANGE_POSITION.Out;
+        const isRangeMode =
+          mode === CALENDAR_MODE.DateRange || mode === CALENDAR_MODE.MonthRange || mode === CALENDAR_MODE.YearRange;
+        const inRangePosition = isRangeMode
+          ? getInRangePosition(date, viewMode, preselectedRange || value)
+          : IN_RANGE_POSITION.Out;
 
         const isSelectedValue =
           value && !preselectedRange && !dateTimeSelectedValue

package/src/utils.ts

@@ -85,6 +85,15 @@ export const getInRangePosition = (date: Date, viewMode: ViewMode, range?: Range
 export const getEndOfTheDay = (date: Date) =>
   new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);
 
+export const getStartOfTheMonth = (date: Date) => new Date(new Date(date.getFullYear(), date.getMonth(), 1).valueOf());
+
+export const getEndOfTheMonth = (date: Date) =>
+  new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).valueOf() - 1);
+
+export const getStartOfTheYear = (date: Date) => new Date(new Date(date.getFullYear(), 0, 1).valueOf());
+
+export const getEndOfTheYear = (date: Date) => new Date(new Date(date.getFullYear() + 1, 0, 1).valueOf() - 1);
+
 export const getTestIdBuilder = (testId?: string) => (prefix: string) => (testId ? `${prefix}-${testId}` : undefined);
 
 const getNavigatorLocale = () => (isBrowser() ? (navigator?.language ?? 'ru-RU') : 'ru-RU');