@snack-uikit/calendar 0.13.6 → 0.13.7

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.7 (2025-11-06)</small>
+
+* feat(PDS-1292): presets for calendar range mode ([45929bd](https://github.com/cloud-ru-tech/snack-uikit/commit/45929bd))
+
+
+
+
+
 ## <small>0.13.6 (2025-10-28)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -43,6 +43,7 @@ import { Calendar } from '@snack-uikit/calendar';
 | 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` |

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

@@ -1,7 +1,7 @@
 import { CSSProperties, RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { CALENDAR_MODE } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
+import { BuildCellPropsFunction, FocusDirection, PresetsOptions, Range, Size } from '../../types';
 type CommonCalendarProps = {
     /**
      * Размер
@@ -46,6 +46,8 @@ type CommonCalendarProps = {
     navigationStartRef?: RefObject<{
         focus(): void;
     }>;
+    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) */
+    presets?: PresetsOptions;
 };
 type DateCalendarProps = CommonCalendarProps & {
     /** Режим работы календаря: <br> - `date` - режим выбора даты */

package/dist/cjs/components/Calendar/Calendar.js

@@ -19,12 +19,10 @@ const CalendarBase_1 = require("../../helperComponents/CalendarBase");
 const utils_1 = require("./utils");
 function Calendar(props) {
   const {
-      className,
       onChangeValue,
-      buildCellProps,
       mode
     } = props,
-    rest = __rest(props, ["className", "onChangeValue", "buildCellProps", "mode"]);
+    rest = __rest(props, ["onChangeValue", "mode"]);
   const changeValueHandler = (0, react_1.useCallback)(value => {
     if (mode === constants_1.CALENDAR_MODE.Date || mode === constants_1.CALENDAR_MODE.Month || mode === constants_1.CALENDAR_MODE.Year || mode === constants_1.CALENDAR_MODE.DateTime) {
       const [date] = value;
@@ -35,10 +33,8 @@ function Calendar(props) {
   }, [onChangeValue, mode]);
   return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({}, rest, {
     mode: mode,
-    className: className,
     value: (0, utils_1.getNormalizedValue)(props.value),
     defaultValue: (0, utils_1.getNormalizedValue)(props.defaultValue),
-    onChangeValue: changeValueHandler,
-    buildCellProps: buildCellProps
+    onChangeValue: changeValueHandler
   }));
 }

package/dist/cjs/helperComponents/CalendarBase/CalendarBase.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, PresetsOptions, Range, Size } from '../../types';
 export type CalendarBaseProps = WithSupportProps<{
     mode: CalendarMode;
     onChangeValue(value: Range): void;
@@ -20,5 +20,6 @@ export type CalendarBaseProps = WithSupportProps<{
     navigationStartRef?: RefObject<{
         focus(): void;
     }>;
+    presets?: PresetsOptions;
 }>;
-export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, showSeconds, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, showSeconds, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, presets, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -21,6 +21,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const uncontrollable_1 = require("uncontrollable");
+const divider_1 = require("@snack-uikit/divider");
 const locale_1 = require("@snack-uikit/locale");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
@@ -31,6 +32,8 @@ const CalendarContext_1 = require("../CalendarContext");
 const CalendarNavigation_1 = require("../CalendarNavigation");
 const ColumnLabels_1 = require("../ColumnLabels");
 const Footer_1 = require("../Footer");
+const PeriodPresetsList_1 = require("../PeriodPresetsList");
+const utils_3 = require("../PeriodPresetsList/utils");
 const TimePickerBase_1 = require("../TimePickerBase");
 const hooks_2 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
@@ -69,13 +72,17 @@ function CalendarBase(_a) {
       onFocusLeave,
       buildCellProps,
       'data-test-id': testId,
-      navigationStartRef
+      navigationStartRef,
+      presets
     } = _a,
-    rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "showSeconds", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef"]);
+    rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "showSeconds", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef", "presets"]);
+  const {
+    t
+  } = (0, locale_1.useLocale)('Calendar');
   const [viewMode, setViewMode] = (0, react_1.useState)(CALENDAR_DEFAULT_MODE_MAP[mode]);
   const [viewShift, setViewShift] = (0, react_1.useState)(0);
   const [value, setValueState] = (0, uncontrollable_1.useUncontrolledProp)(valueProp, defaultValue, onChangeValue);
-  const today = typeof todayProp === 'number' ? new Date(todayProp) : todayProp;
+  const today = (0, react_1.useMemo)(() => typeof todayProp === 'number' ? new Date(todayProp) : todayProp, [todayProp]);
   const [referenceDate] = (0, react_1.useState)((value === null || value === void 0 ? void 0 : value[0]) || today || new Date());
   const viewDate = (0, hooks_2.useViewDate)(referenceDate, viewMode, viewShift);
   const [focus, setFocus] = (0, react_1.useState)(autofocus ? constants_1.AUTOFOCUS : undefined);
@@ -124,6 +131,16 @@ function CalendarBase(_a) {
     ctxLang
   }), [ctxLang, localeProp]);
   const firstNotDisableCell = (0, react_1.useRef)([0, 0]);
+  const presetsItems = (0, react_1.useMemo)(() => {
+    if ((presets === null || presets === void 0 ? void 0 : presets.items) && presets.items.length > 0) {
+      return presets.items;
+    }
+    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 onPresetClick = (0, react_1.useCallback)(selectedPeriod => {
+    setValue(selectedPeriod);
+  }, [setValue]);
   return (0, jsx_runtime_1.jsx)("div", {
     className: (0, classnames_1.default)(styles_module_scss_1.default.calendarWrapper, className),
     "data-fit-to-container": fitToContainer || undefined,
@@ -174,7 +191,17 @@ function CalendarBase(_a) {
         className: (0, classnames_1.default)(styles_module_scss_1.default.dateWrapper, DATE_WRAPPER_SIZE_MAP[size]),
         "data-size": size,
         "data-show-footer": mode === constants_1.CALENDAR_MODE.DateTime && viewMode === 'month' || undefined,
-        children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
+        children: [arePeriodPresetsDisplayed && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)(PeriodPresetsList_1.PeriodPresetsList, {
+            items: presetsItems,
+            onChange: onPresetClick,
+            showTitle: presets === null || presets === void 0 ? void 0 : presets.title,
+            "data-test-id": getTestId('presets')
+          }), (0, jsx_runtime_1.jsx)(divider_1.Divider, {
+            className: styles_module_scss_1.default.divider,
+            orientation: 'vertical'
+          })]
+        }), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
           className: (0, classnames_1.default)(styles_module_scss_1.default.calendar, CALENDAR_SIZE_MAP[size]),
           style: style,
           "data-size": size,

package/dist/cjs/helperComponents/CalendarBase/styles.module.css

@@ -94,4 +94,9 @@
 .rows[data-size=l]{
   padding-left:var(--space-calendar-container-l, 8px);
   padding-right:var(--space-calendar-container-l, 8px);
+}
+
+.divider{
+  flex-shrink:0;
+  height:auto;
 }

package/dist/cjs/helperComponents/PeriodPresetsList/PeriodPresetsList.d.ts

@@ -0,0 +1,16 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { PresetItem, Range } from '../../types';
+export type PresetsListProps = WithSupportProps<{
+    /** Действие при выборе пресета */
+    onChange(range: Range): void;
+    /** Список пресетов */
+    items: PresetItem[];
+    /**
+     * Скрытие заголовка списка
+     * @default true
+     */
+    showTitle?: boolean;
+    /** CSS-класс */
+    className?: string;
+}>;
+export declare function PeriodPresetsList({ items, onChange, showTitle, className, ...rest }: PresetsListProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/PeriodPresetsList/PeriodPresetsList.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PeriodPresetsList = PeriodPresetsList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const list_1 = require("@snack-uikit/list");
+const locale_1 = require("@snack-uikit/locale");
+const utils_1 = require("@snack-uikit/utils");
+const CalendarContext_1 = require("../CalendarContext");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function PeriodPresetsList(_a) {
+  var {
+      items,
+      onChange,
+      showTitle = true,
+      className
+    } = _a,
+    rest = __rest(_a, ["items", "onChange", "showTitle", "className"]);
+  const {
+    t
+  } = (0, locale_1.useLocale)('Calendar');
+  const {
+    size,
+    getTestId
+  } = (0, react_1.useContext)(CalendarContext_1.CalendarContext);
+  const listItems = (0, react_1.useMemo)(() => items.map(item => ({
+    id: item.id,
+    content: {
+      option: item.label
+    },
+    onClick() {
+      onChange(item.range);
+    },
+    checked: false
+  })), [items, onChange]);
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: [showTitle && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.header,
+      "data-size": size,
+      children: (0, jsx_runtime_1.jsx)("span", {
+        className: styles_module_scss_1.default.title,
+        "data-test-id": getTestId('presets-header'),
+        children: t('presets')
+      })
+    }), (0, jsx_runtime_1.jsx)(list_1.List, {
+      size: size,
+      items: listItems,
+      scroll: true,
+      selection: {
+        mode: 'single',
+        value: undefined
+      },
+      hasListInFocusChain: false
+    })]
+  }));
+}

package/dist/cjs/helperComponents/PeriodPresetsList/index.d.ts

@@ -0,0 +1 @@
+export * from './PeriodPresetsList';

package/dist/cjs/helperComponents/PeriodPresetsList/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./PeriodPresetsList"), exports);

package/dist/cjs/helperComponents/PeriodPresetsList/styles.module.css

@@ -0,0 +1,56 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+}
+
+.title{
+  display:flex;
+  align-items:center;
+}
+
+.header{
+  display:flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.header[data-size=s]{
+  padding-left:var(--space-calendar-container-s, 8px);
+  padding-right:var(--space-calendar-container-s, 8px);
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.header[data-size=s] .title{
+  height:var(--size-calendar-container-header-lines-height-s, 32px);
+}
+.header[data-size=m]{
+  padding-left:var(--space-calendar-container-m, 8px);
+  padding-right:var(--space-calendar-container-m, 8px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.header[data-size=m] .title{
+  height:var(--size-calendar-container-header-lines-height-m, 40px);
+}
+.header[data-size=l]{
+  padding-left:var(--space-calendar-container-l, 8px);
+  padding-right:var(--space-calendar-container-l, 8px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.header[data-size=l] .title{
+  height:var(--size-calendar-container-header-lines-height-l, 48px);
+}

package/dist/cjs/helperComponents/PeriodPresetsList/utils.d.ts

@@ -0,0 +1,5 @@
+import { useLocale } from '@snack-uikit/locale';
+import { PresetItem } from '../../types';
+type TFunction = ReturnType<typeof useLocale<'Calendar'>>['t'];
+export declare function getDefaultPresets(t: TFunction, today?: Date): PresetItem[];
+export {};

package/dist/cjs/helperComponents/PeriodPresetsList/utils.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultPresets = getDefaultPresets;
+const dayInMs = 24 * 60 * 60 * 1000;
+function getDefaultPresets(t, today) {
+  const now = today || new Date();
+  const nowInMs = now.getTime();
+  const calculatePeriodUpToNow = presetLimitInMs => {
+    const limit = new Date(now.getTime() + presetLimitInMs);
+    return nowInMs > limit.getTime() ? [limit, now] : [now, limit];
+  };
+  return [{
+    label: t('defaultPresets.lastWeek'),
+    id: 'week',
+    range: calculatePeriodUpToNow(dayInMs * -7)
+  }, {
+    label: t('defaultPresets.lastTwoWeeks'),
+    id: 'twoWeeks',
+    range: calculatePeriodUpToNow(dayInMs * -14)
+  }, {
+    label: t('defaultPresets.lastMonth'),
+    id: 'month',
+    range: calculatePeriodUpToNow(dayInMs * -30)
+  }, {
+    label: t('defaultPresets.lastQuarter'),
+    id: 'quarter',
+    range: calculatePeriodUpToNow(dayInMs * -90)
+  }, {
+    label: t('defaultPresets.lastThird'),
+    id: 'fourMonths',
+    range: calculatePeriodUpToNow(dayInMs * -120)
+  }, {
+    label: t('defaultPresets.lastYear'),
+    id: 'year',
+    range: calculatePeriodUpToNow(dayInMs * -365)
+  }, {
+    label: t('defaultPresets.lastTwoYears'),
+    id: 'twoYears',
+    range: calculatePeriodUpToNow(dayInMs * -365 * 2)
+  }];
+}

package/dist/cjs/types.d.ts

@@ -43,3 +43,25 @@ export type DateAndTime = TimeValue & {
     month?: number;
     day?: number;
 };
+export type PresetItem = {
+    /** Лейбл пресета */
+    label: string;
+    /** ID периода */
+    id: string;
+    /** Период */
+    range: Range;
+};
+export type PresetsOptions = {
+    /**
+     * Включение отображения секции с пресетами
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Отображение заголовка у секции с пресетами
+     * @default true
+     */
+    title?: boolean;
+    /** Кастомные пресеты быстрого выбора периода относительно текущего момента */
+    items?: PresetItem[];
+};

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

@@ -1,7 +1,7 @@
 import { CSSProperties, RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { CALENDAR_MODE } from '../../constants';
-import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
+import { BuildCellPropsFunction, FocusDirection, PresetsOptions, Range, Size } from '../../types';
 type CommonCalendarProps = {
     /**
      * Размер
@@ -46,6 +46,8 @@ type CommonCalendarProps = {
     navigationStartRef?: RefObject<{
         focus(): void;
     }>;
+    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) */
+    presets?: PresetsOptions;
 };
 type DateCalendarProps = CommonCalendarProps & {
     /** Режим работы календаря: <br> - `date` - режим выбора даты */

package/dist/esm/components/Calendar/Calendar.js

@@ -15,7 +15,7 @@ import { CALENDAR_MODE } from '../../constants';
 import { CalendarBase } from '../../helperComponents/CalendarBase';
 import { getNormalizedValue } from './utils';
 export function Calendar(props) {
-    const { className, onChangeValue, buildCellProps, mode } = props, rest = __rest(props, ["className", "onChangeValue", "buildCellProps", "mode"]);
+    const { onChangeValue, mode } = props, rest = __rest(props, ["onChangeValue", "mode"]);
     const changeValueHandler = useCallback((value) => {
         if (mode === CALENDAR_MODE.Date ||
             mode === CALENDAR_MODE.Month ||
@@ -27,5 +27,5 @@ export function Calendar(props) {
         }
         onChangeValue === null || onChangeValue === void 0 ? void 0 : onChangeValue(value);
     }, [onChangeValue, mode]);
-    return (_jsx(CalendarBase, Object.assign({}, rest, { mode: mode, className: className, value: getNormalizedValue(props.value), defaultValue: getNormalizedValue(props.defaultValue), onChangeValue: changeValueHandler, buildCellProps: buildCellProps })));
+    return (_jsx(CalendarBase, Object.assign({}, rest, { mode: mode, value: getNormalizedValue(props.value), defaultValue: getNormalizedValue(props.defaultValue), onChangeValue: changeValueHandler })));
 }

package/dist/esm/helperComponents/CalendarBase/CalendarBase.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, RefObject } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size } from '../../types';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, PresetsOptions, Range, Size } from '../../types';
 export type CalendarBaseProps = WithSupportProps<{
     mode: CalendarMode;
     onChangeValue(value: Range): void;
@@ -20,5 +20,6 @@ export type CalendarBaseProps = WithSupportProps<{
     navigationStartRef?: RefObject<{
         focus(): void;
     }>;
+    presets?: PresetsOptions;
 }>;
-export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, showSeconds, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, showSeconds, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, presets, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,10 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
+import { Divider } from '@snack-uikit/divider';
 import { useLocale } from '@snack-uikit/locale';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
@@ -23,6 +24,8 @@ import { CalendarContext } from '../CalendarContext';
 import { CalendarNavigation } from '../CalendarNavigation';
 import { ColumnLabels } from '../ColumnLabels';
 import { Footer } from '../Footer';
+import { PeriodPresetsList } from '../PeriodPresetsList';
+import { getDefaultPresets } from '../PeriodPresetsList/utils';
 import { TimePickerBase } from '../TimePickerBase';
 import { useRange, useViewDate } from './hooks';
 import styles from './styles.module.css';
@@ -44,11 +47,12 @@ const CALENDAR_DEFAULT_MODE_MAP = {
     [CALENDAR_MODE.Year]: VIEW_MODE.Decade,
 };
 export function CalendarBase(_a) {
-    var { className, mode, size = SIZE.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays = false, showSeconds = true, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef } = _a, rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "showSeconds", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef"]);
+    var { className, mode, size = SIZE.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays = false, showSeconds = true, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, presets } = _a, rest = __rest(_a, ["className", "mode", "size", "autofocus", "fitToContainer", "value", "defaultValue", "onChangeValue", "today", "showHolidays", "showSeconds", "style", "locale", "onFocusLeave", "buildCellProps", 'data-test-id', "navigationStartRef", "presets"]);
+    const { t } = useLocale('Calendar');
     const [viewMode, setViewMode] = useState(CALENDAR_DEFAULT_MODE_MAP[mode]);
     const [viewShift, setViewShift] = useState(0);
     const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
-    const today = typeof todayProp === 'number' ? new Date(todayProp) : todayProp;
+    const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
     const [referenceDate] = useState((value === null || value === void 0 ? void 0 : value[0]) || today || new Date());
     const viewDate = useViewDate(referenceDate, viewMode, viewShift);
     const [focus, setFocus] = useState(autofocus ? AUTOFOCUS : undefined);
@@ -69,6 +73,16 @@ export function CalendarBase(_a) {
     const { lang: ctxLang } = useLocale();
     const locale = useMemo(() => getLocale({ localeProp, ctxLang }), [ctxLang, localeProp]);
     const firstNotDisableCell = useRef([0, 0]);
+    const presetsItems = useMemo(() => {
+        if ((presets === null || presets === void 0 ? void 0 : presets.items) && presets.items.length > 0) {
+            return presets.items;
+        }
+        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 onPresetClick = useCallback((selectedPeriod) => {
+        setValue(selectedPeriod);
+    }, [setValue]);
     return (_jsx("div", { className: cn(styles.calendarWrapper, className), "data-fit-to-container": fitToContainer || undefined, "data-test-id": testId, children: _jsxs(CalendarContext.Provider, { value: {
                 locale,
                 size,
@@ -109,5 +123,5 @@ export function CalendarBase(_a) {
                 hoursKeyboardNavigationRef,
                 minutesKeyboardNavigationRef,
                 secondsKeyboardNavigationRef,
-            }, children: [_jsxs("div", { className: cn(styles.dateWrapper, DATE_WRAPPER_SIZE_MAP[size]), "data-size": size, "data-show-footer": (mode === CALENDAR_MODE.DateTime && viewMode === 'month') || undefined, children: [_jsxs("div", Object.assign({}, extractSupportProps(rest), { className: cn(styles.calendar, CALENDAR_SIZE_MAP[size]), style: style, "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: [_jsxs("div", { className: styles.header, "data-size": size, children: [_jsx(CalendarNavigation, {}), _jsx(ColumnLabels, {})] }), _jsx("div", { className: styles.body, children: _jsx("div", { className: styles.rows, "data-size": size, children: _jsx(CalendarBody, {}) }) })] })), mode === CALENDAR_MODE.DateTime && viewMode === 'month' && _jsx(TimePickerBase, {})] }), _jsx(Footer, {})] }) }));
+            }, children: [_jsxs("div", { className: cn(styles.dateWrapper, DATE_WRAPPER_SIZE_MAP[size]), "data-size": size, "data-show-footer": (mode === CALENDAR_MODE.DateTime && viewMode === 'month') || undefined, children: [arePeriodPresetsDisplayed && (_jsxs(_Fragment, { children: [_jsx(PeriodPresetsList, { items: presetsItems, onChange: onPresetClick, showTitle: presets === null || presets === void 0 ? void 0 : presets.title, "data-test-id": getTestId('presets') }), _jsx(Divider, { className: styles.divider, orientation: 'vertical' })] })), _jsxs("div", Object.assign({}, extractSupportProps(rest), { className: cn(styles.calendar, CALENDAR_SIZE_MAP[size]), style: style, "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: [_jsxs("div", { className: styles.header, "data-size": size, children: [_jsx(CalendarNavigation, {}), _jsx(ColumnLabels, {})] }), _jsx("div", { className: styles.body, children: _jsx("div", { className: styles.rows, "data-size": size, children: _jsx(CalendarBody, {}) }) })] })), mode === CALENDAR_MODE.DateTime && viewMode === 'month' && _jsx(TimePickerBase, {})] }), _jsx(Footer, {})] }) }));
 }

package/dist/esm/helperComponents/CalendarBase/styles.module.css

@@ -94,4 +94,9 @@
 .rows[data-size=l]{
   padding-left:var(--space-calendar-container-l, 8px);
   padding-right:var(--space-calendar-container-l, 8px);
+}
+
+.divider{
+  flex-shrink:0;
+  height:auto;
 }

package/dist/esm/helperComponents/PeriodPresetsList/PeriodPresetsList.d.ts

@@ -0,0 +1,16 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { PresetItem, Range } from '../../types';
+export type PresetsListProps = WithSupportProps<{
+    /** Действие при выборе пресета */
+    onChange(range: Range): void;
+    /** Список пресетов */
+    items: PresetItem[];
+    /**
+     * Скрытие заголовка списка
+     * @default true
+     */
+    showTitle?: boolean;
+    /** CSS-класс */
+    className?: string;
+}>;
+export declare function PeriodPresetsList({ items, onChange, showTitle, className, ...rest }: PresetsListProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/PeriodPresetsList/PeriodPresetsList.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useContext, useMemo } from 'react';
+import { List } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CalendarContext } from '../CalendarContext';
+import styles from './styles.module.css';
+export function PeriodPresetsList(_a) {
+    var { items, onChange, showTitle = true, className } = _a, rest = __rest(_a, ["items", "onChange", "showTitle", "className"]);
+    const { t } = useLocale('Calendar');
+    const { size, getTestId } = useContext(CalendarContext);
+    const listItems = useMemo(() => items.map(item => ({
+        id: item.id,
+        content: {
+            option: item.label,
+        },
+        onClick() {
+            onChange(item.range);
+        },
+        checked: false,
+    })), [items, onChange]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showTitle && (_jsx("div", { className: styles.header, "data-size": size, children: _jsx("span", { className: styles.title, "data-test-id": getTestId('presets-header'), children: t('presets') }) })), _jsx(List, { size: size, items: listItems, scroll: true, selection: { mode: 'single', value: undefined }, hasListInFocusChain: false })] })));
+}

package/dist/esm/helperComponents/PeriodPresetsList/index.d.ts

@@ -0,0 +1 @@
+export * from './PeriodPresetsList';

package/dist/esm/helperComponents/PeriodPresetsList/index.js

@@ -0,0 +1 @@
+export * from './PeriodPresetsList';

package/dist/esm/helperComponents/PeriodPresetsList/styles.module.css

@@ -0,0 +1,56 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+}
+
+.title{
+  display:flex;
+  align-items:center;
+}
+
+.header{
+  display:flex;
+  flex-grow:0;
+  flex-shrink:0;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.header[data-size=s]{
+  padding-left:var(--space-calendar-container-s, 8px);
+  padding-right:var(--space-calendar-container-s, 8px);
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}
+.header[data-size=s] .title{
+  height:var(--size-calendar-container-header-lines-height-s, 32px);
+}
+.header[data-size=m]{
+  padding-left:var(--space-calendar-container-m, 8px);
+  padding-right:var(--space-calendar-container-m, 8px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.header[data-size=m] .title{
+  height:var(--size-calendar-container-header-lines-height-m, 40px);
+}
+.header[data-size=l]{
+  padding-left:var(--space-calendar-container-l, 8px);
+  padding-right:var(--space-calendar-container-l, 8px);
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+}
+.header[data-size=l] .title{
+  height:var(--size-calendar-container-header-lines-height-l, 48px);
+}

package/dist/esm/helperComponents/PeriodPresetsList/utils.d.ts

@@ -0,0 +1,5 @@
+import { useLocale } from '@snack-uikit/locale';
+import { PresetItem } from '../../types';
+type TFunction = ReturnType<typeof useLocale<'Calendar'>>['t'];
+export declare function getDefaultPresets(t: TFunction, today?: Date): PresetItem[];
+export {};

package/dist/esm/helperComponents/PeriodPresetsList/utils.js

@@ -0,0 +1,46 @@
+const dayInMs = 24 * 60 * 60 * 1000;
+export function getDefaultPresets(t, today) {
+    const now = today || new Date();
+    const nowInMs = now.getTime();
+    const calculatePeriodUpToNow = (presetLimitInMs) => {
+        const limit = new Date(now.getTime() + presetLimitInMs);
+        return nowInMs > limit.getTime() ? [limit, now] : [now, limit];
+    };
+    return [
+        {
+            label: t('defaultPresets.lastWeek'),
+            id: 'week',
+            range: calculatePeriodUpToNow(dayInMs * -7),
+        },
+        {
+            label: t('defaultPresets.lastTwoWeeks'),
+            id: 'twoWeeks',
+            range: calculatePeriodUpToNow(dayInMs * -14),
+        },
+        {
+            label: t('defaultPresets.lastMonth'),
+            id: 'month',
+            range: calculatePeriodUpToNow(dayInMs * -30),
+        },
+        {
+            label: t('defaultPresets.lastQuarter'),
+            id: 'quarter',
+            range: calculatePeriodUpToNow(dayInMs * -90),
+        },
+        {
+            label: t('defaultPresets.lastThird'),
+            id: 'fourMonths',
+            range: calculatePeriodUpToNow(dayInMs * -120),
+        },
+        {
+            label: t('defaultPresets.lastYear'),
+            id: 'year',
+            range: calculatePeriodUpToNow(dayInMs * -365),
+        },
+        {
+            label: t('defaultPresets.lastTwoYears'),
+            id: 'twoYears',
+            range: calculatePeriodUpToNow(dayInMs * -365 * 2),
+        },
+    ];
+}

package/dist/esm/types.d.ts

@@ -43,3 +43,25 @@ export type DateAndTime = TimeValue & {
     month?: number;
     day?: number;
 };
+export type PresetItem = {
+    /** Лейбл пресета */
+    label: string;
+    /** ID периода */
+    id: string;
+    /** Период */
+    range: Range;
+};
+export type PresetsOptions = {
+    /**
+     * Включение отображения секции с пресетами
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Отображение заголовка у секции с пресетами
+     * @default true
+     */
+    title?: boolean;
+    /** Кастомные пресеты быстрого выбора периода относительно текущего момента */
+    items?: PresetItem[];
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Calendar",
-  "version": "0.13.6",
+  "version": "0.13.7",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -48,5 +48,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4b590b25862e58fae2addec0ca0ddbb56d6d39f5"
+  "gitHead": "6b989b5fe57383ddf2bd6c1186bf4e1652633da7"
 }

package/src/components/Calendar/Calendar.tsx

@@ -4,7 +4,7 @@ import { WithSupportProps } from '@snack-uikit/utils';
 
 import { CALENDAR_MODE } from '../../constants';
 import { CalendarBase } from '../../helperComponents/CalendarBase';
-import { BuildCellPropsFunction, FocusDirection, Range, Size } from '../../types';
+import { BuildCellPropsFunction, FocusDirection, PresetsOptions, Range, Size } from '../../types';
 import { getNormalizedValue } from './utils';
 
 type CommonCalendarProps = {
@@ -49,6 +49,8 @@ type CommonCalendarProps = {
   onFocusLeave?(direction: FocusDirection): void;
   /** Ссылка на управление первым элементом навигации */
   navigationStartRef?: RefObject<{ focus(): void }>;
+  /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'range' и отсутствии buildCellProps (временно PDS-3139) */
+  presets?: PresetsOptions;
 };
 
 type DateCalendarProps = CommonCalendarProps & {
@@ -113,7 +115,7 @@ export type CalendarProps = WithSupportProps<
 >;
 
 export function Calendar(props: CalendarProps) {
-  const { className, onChangeValue, buildCellProps, mode, ...rest } = props;
+  const { onChangeValue, mode, ...rest } = props;
 
   const changeValueHandler = useCallback(
     (value: Range) => {
@@ -136,11 +138,9 @@ export function Calendar(props: CalendarProps) {
     <CalendarBase
       {...rest}
       mode={mode}
-      className={className}
       value={getNormalizedValue(props.value)}
       defaultValue={getNormalizedValue(props.defaultValue)}
       onChangeValue={changeValueHandler}
-      buildCellProps={buildCellProps}
     />
   );
 }

package/src/helperComponents/CalendarBase/CalendarBase.tsx

@@ -2,19 +2,30 @@ import cn from 'classnames';
 import { CSSProperties, RefObject, useCallback, useMemo, useRef, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
+import { Divider } from '@snack-uikit/divider';
 import { ListProps } from '@snack-uikit/list';
 import { useLocale } from '@snack-uikit/locale';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants';
 import { useDateAndTime } from '../../hooks';
-import { BuildCellPropsFunction, CalendarMode, FocusDirection, Range, Size, ViewMode } from '../../types';
+import {
+  BuildCellPropsFunction,
+  CalendarMode,
+  FocusDirection,
+  PresetsOptions,
+  Range,
+  Size,
+  ViewMode,
+} from '../../types';
 import { getEndOfTheDay, getLocale, getTestIdBuilder, sortDates } from '../../utils';
 import { CalendarBody } from '../CalendarBody';
 import { CalendarContext } from '../CalendarContext';
 import { CalendarNavigation } from '../CalendarNavigation';
 import { ColumnLabels } from '../ColumnLabels';
 import { Footer } from '../Footer';
+import { PeriodPresetsList } from '../PeriodPresetsList';
+import { getDefaultPresets } from '../PeriodPresetsList/utils';
 import { TimePickerBase } from '../TimePickerBase';
 import { useRange, useViewDate } from './hooks';
 import styles from './styles.module.scss';
@@ -36,6 +47,7 @@ export type CalendarBaseProps = WithSupportProps<{
   autofocus?: boolean;
   locale?: Intl.Locale;
   navigationStartRef?: RefObject<{ focus(): void }>;
+  presets?: PresetsOptions;
 }>;
 
 const DATE_WRAPPER_SIZE_MAP: Record<Size, string> = {
@@ -76,12 +88,15 @@ export function CalendarBase({
   buildCellProps,
   'data-test-id': testId,
   navigationStartRef,
+  presets,
   ...rest
 }: CalendarBaseProps) {
+  const { t } = useLocale('Calendar');
+
   const [viewMode, setViewMode] = useState<ViewMode>(CALENDAR_DEFAULT_MODE_MAP[mode]);
   const [viewShift, setViewShift] = useState<number>(0);
   const [value, setValueState] = useUncontrolledProp<Range | undefined>(valueProp, defaultValue, onChangeValue);
-  const today = typeof todayProp === 'number' ? new Date(todayProp) : todayProp;
+  const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
   const [referenceDate] = useState(value?.[0] || today || new Date());
   const viewDate = useViewDate(referenceDate, viewMode, viewShift);
   const [focus, setFocus] = useState<string | undefined>(autofocus ? AUTOFOCUS : undefined);
@@ -122,6 +137,23 @@ export function CalendarBase({
 
   const firstNotDisableCell = useRef<[number, number]>([0, 0]);
 
+  const presetsItems = useMemo(() => {
+    if (presets?.items && presets.items.length > 0) {
+      return presets.items;
+    }
+
+    return getDefaultPresets(t, today);
+  }, [presets?.items, t, today]);
+
+  const arePeriodPresetsDisplayed = mode === 'range' && presets?.enabled && !buildCellProps; // TODO PDS-3139
+
+  const onPresetClick = useCallback(
+    (selectedPeriod: Range) => {
+      setValue(selectedPeriod);
+    },
+    [setValue],
+  );
+
   return (
     <div
       className={cn(styles.calendarWrapper, className)}
@@ -176,6 +208,17 @@ export function CalendarBase({
           data-size={size}
           data-show-footer={(mode === CALENDAR_MODE.DateTime && viewMode === 'month') || undefined}
         >
+          {arePeriodPresetsDisplayed && (
+            <>
+              <PeriodPresetsList
+                items={presetsItems}
+                onChange={onPresetClick}
+                showTitle={presets?.title}
+                data-test-id={getTestId('presets')}
+              />
+              <Divider className={styles.divider} orientation='vertical' />
+            </>
+          )}
           <div
             {...extractSupportProps(rest)}
             className={cn(styles.calendar, CALENDAR_SIZE_MAP[size])}

package/src/helperComponents/CalendarBase/styles.module.scss

@@ -91,3 +91,8 @@ $sizes: 's', 'm', 'l';
     }
   }
 }
+
+.divider {
+  flex-shrink: 0;
+  height: auto;
+}

package/src/helperComponents/PeriodPresetsList/PeriodPresetsList.tsx

@@ -0,0 +1,64 @@
+import cn from 'classnames';
+import React, { useContext, useMemo } from 'react';
+
+import { List, ListProps } from '@snack-uikit/list';
+import { useLocale } from '@snack-uikit/locale';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { PresetItem, Range } from '../../types';
+import { CalendarContext } from '../CalendarContext';
+import styles from './styles.module.scss';
+
+export type PresetsListProps = WithSupportProps<{
+  /** Действие при выборе пресета */
+  onChange(range: Range): void;
+  /** Список пресетов */
+  items: PresetItem[];
+  /**
+   * Скрытие заголовка списка
+   * @default true
+   */
+  showTitle?: boolean;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+export function PeriodPresetsList({ items, onChange, showTitle = true, className, ...rest }: PresetsListProps) {
+  const { t } = useLocale('Calendar');
+
+  const { size, getTestId } = useContext(CalendarContext);
+
+  const listItems: ListProps['items'] = useMemo(
+    () =>
+      items.map(item => ({
+        id: item.id,
+        content: {
+          option: item.label,
+        },
+        onClick() {
+          onChange(item.range);
+        },
+        checked: false,
+      })),
+    [items, onChange],
+  );
+
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      {showTitle && (
+        <div className={styles.header} data-size={size}>
+          <span className={styles.title} data-test-id={getTestId('presets-header')}>
+            {t('presets')}
+          </span>
+        </div>
+      )}
+      <List
+        size={size}
+        items={listItems}
+        scroll
+        selection={{ mode: 'single', value: undefined }}
+        hasListInFocusChain={false}
+      />
+    </div>
+  );
+}

package/src/helperComponents/PeriodPresetsList/index.ts

@@ -0,0 +1 @@
+export * from './PeriodPresetsList';

package/src/helperComponents/PeriodPresetsList/styles.module.scss

@@ -0,0 +1,39 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-calendar';
+
+$sizes: 's', 'm', 'l';
+
+$presets-header-typography: (
+  's': styles-tokens-calendar.$sans-label-m,
+  'm': styles-tokens-calendar.$sans-label-l,
+  'l': styles-tokens-calendar.$sans-label-l
+) ;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+}
+
+.header {
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+
+  color: styles-tokens-calendar.$sys-neutral-text-main;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include styles-tokens-calendar.composite-var(styles-tokens-calendar.$calendar, 'time', 'header', $size);
+      @include styles-tokens-calendar.composite-var($presets-header-typography, $size);
+
+      .title {
+        @include styles-tokens-calendar.composite-var(styles-tokens-calendar.$calendar, 'time', 'header', 'lines-height', $size);
+      }
+    }
+  }
+}

package/src/helperComponents/PeriodPresetsList/utils.ts

@@ -0,0 +1,54 @@
+import { useLocale } from '@snack-uikit/locale';
+
+import { PresetItem, Range } from '../../types';
+type TFunction = ReturnType<typeof useLocale<'Calendar'>>['t'];
+
+const dayInMs = 24 * 60 * 60 * 1000;
+
+export function getDefaultPresets(t: TFunction, today?: Date): PresetItem[] {
+  const now = today || new Date();
+  const nowInMs = now.getTime();
+
+  const calculatePeriodUpToNow = (presetLimitInMs: number): Range => {
+    const limit = new Date(now.getTime() + presetLimitInMs);
+    return nowInMs > limit.getTime() ? [limit, now] : [now, limit];
+  };
+
+  return [
+    {
+      label: t('defaultPresets.lastWeek'),
+      id: 'week',
+      range: calculatePeriodUpToNow(dayInMs * -7),
+    },
+    {
+      label: t('defaultPresets.lastTwoWeeks'),
+      id: 'twoWeeks',
+      range: calculatePeriodUpToNow(dayInMs * -14),
+    },
+    {
+      label: t('defaultPresets.lastMonth'),
+      id: 'month',
+      range: calculatePeriodUpToNow(dayInMs * -30),
+    },
+    {
+      label: t('defaultPresets.lastQuarter'),
+      id: 'quarter',
+      range: calculatePeriodUpToNow(dayInMs * -90),
+    },
+    {
+      label: t('defaultPresets.lastThird'),
+      id: 'fourMonths',
+      range: calculatePeriodUpToNow(dayInMs * -120),
+    },
+    {
+      label: t('defaultPresets.lastYear'),
+      id: 'year',
+      range: calculatePeriodUpToNow(dayInMs * -365),
+    },
+    {
+      label: t('defaultPresets.lastTwoYears'),
+      id: 'twoYears',
+      range: calculatePeriodUpToNow(dayInMs * -365 * 2),
+    },
+  ];
+}

package/src/types.ts

@@ -51,3 +51,27 @@ export type DateAndTime = TimeValue & {
   month?: number;
   day?: number;
 };
+
+export type PresetItem = {
+  /** Лейбл пресета */
+  label: string;
+  /** ID периода */
+  id: string;
+  /** Период */
+  range: Range;
+};
+
+export type PresetsOptions = {
+  /**
+   * Включение отображения секции с пресетами
+   * @default false
+   */
+  enabled?: boolean;
+  /**
+   * Отображение заголовка у секции с пресетами
+   * @default true
+   */
+  title?: boolean;
+  /** Кастомные пресеты быстрого выбора периода относительно текущего момента */
+  items?: PresetItem[];
+};