@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/helperComponents/MobileCalendar/MobileCalendar.js

@@ -0,0 +1,308 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileCalendar = MobileCalendar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const utils_2 = require("../../utils");
+const hooks_2 = require("../CalendarBase/hooks");
+const CalendarContext_1 = require("../CalendarContext");
+const MobileFooter_1 = require("../MobileFooter");
+const MobilePeriodScroller_1 = require("../MobilePeriodScroller");
+const MobilePresetsScreen_1 = require("../MobilePresetsScreen");
+const MobileTimeScreen_1 = require("../MobileTimeScreen");
+const utils_3 = require("../PeriodPresetsList/utils");
+const WeekRow_1 = require("../WeekRow");
+const levelConfig_1 = require("./levelConfig");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Уровень, с которого открывается режим (как `CALENDAR_DEFAULT_MODE_MAP` десктопа). */
+const INITIAL_LEVEL = {
+    [constants_1.CALENDAR_MODE.Date]: constants_1.VIEW_MODE.Month,
+    [constants_1.CALENDAR_MODE.DateTime]: constants_1.VIEW_MODE.Month,
+    [constants_1.CALENDAR_MODE.DateRange]: constants_1.VIEW_MODE.Month,
+    [constants_1.CALENDAR_MODE.Month]: constants_1.VIEW_MODE.Year,
+    [constants_1.CALENDAR_MODE.MonthRange]: constants_1.VIEW_MODE.Year,
+    [constants_1.CALENDAR_MODE.Year]: constants_1.VIEW_MODE.Decade,
+    [constants_1.CALENDAR_MODE.YearRange]: constants_1.VIEW_MODE.Decade,
+};
+const noop = () => { };
+const refStub = { current: null };
+const keyboardNavStub = { current: { focusItem: noop } };
+const firstNotDisableCellStub = { current: [0, 0] };
+/**
+ * BottomSheet со скроллом периодов, дропдаун-шапкой уровня, футером. Один CalendarContext для всех экранов.
+ */
+function MobileCalendar({ open, onClose, mode, size = constants_1.SIZE.M, today: todayProp, showHolidays = false, showSeconds = true, buildCellProps, locale: localeProp, presets, value: valueProp, defaultValue, onChangeValue, onApply, onCurrent, closeOnApply = false, closeOnPopstate, 'data-test-id': testId, }) {
+    const { t, lang: ctxLang } = locale_1.calendarLocale.useTranslations();
+    const [committedValue, commit] = (0, utils_1.useUncontrolledProp)(valueProp, defaultValue, onChangeValue);
+    const committedRef = (0, react_1.useRef)(committedValue);
+    committedRef.current = committedValue;
+    const [draftRange, setDraftRange] = (0, react_1.useState)(committedValue);
+    const today = (0, react_1.useMemo)(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const [origin] = (0, react_1.useState)(() => committedValue?.[0] || today || new Date());
+    const locale = (0, react_1.useMemo)(() => (0, utils_2.getLocale)({ localeProp, ctxLang }), [ctxLang, localeProp]);
+    const drumRef = (0, react_1.useRef)(null);
+    const [level, setLevel] = (0, react_1.useState)(INITIAL_LEVEL[mode]);
+    const [anchorDate, setAnchorDate] = (0, react_1.useState)(origin);
+    const [headerDate, setHeaderDate] = (0, react_1.useState)(origin);
+    const [screen, setScreen] = (0, react_1.useState)('calendar');
+    const setValue = (0, react_1.useCallback)((dates) => setDraftRange((0, utils_2.normalizeRangeForMode)(mode, dates)), [mode]);
+    const { dateAndTime, setDateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = (0, hooks_1.useDateAndTime)({ showSeconds, value: undefined });
+    const dateAndTimeRef = (0, react_1.useRef)(dateAndTime);
+    dateAndTimeRef.current = dateAndTime;
+    const timeSnapshotRef = (0, react_1.useRef)(null);
+    (0, utils_1.useLayoutEffect)(() => {
+        if (open) {
+            const committed = committedRef.current;
+            const target = committed?.[0] ?? origin;
+            setScreen('calendar');
+            setLevel(INITIAL_LEVEL[mode]);
+            setAnchorDate(target);
+            setHeaderDate(target);
+            setDraftRange(committed);
+            timeSnapshotRef.current = null;
+            if (mode === constants_1.CALENDAR_MODE.DateTime) {
+                const c = committed?.[0];
+                setDateAndTime(c
+                    ? {
+                        year: c.getFullYear(),
+                        month: c.getMonth(),
+                        day: c.getDate(),
+                        hours: c.getHours(),
+                        minutes: c.getMinutes(),
+                        seconds: c.getSeconds(),
+                    }
+                    : {});
+            }
+        }
+    }, [open, mode, origin, setDateAndTime]);
+    (0, react_1.useEffect)(() => {
+        if (screen === 'time') {
+            const { hours, minutes, seconds } = dateAndTimeRef.current;
+            timeSnapshotRef.current = { hours, minutes, seconds };
+        }
+    }, [screen]);
+    const { preselectedRange, startPreselect, continuePreselect, restartPreselect, completePreselect } = (0, hooks_2.useRange)({
+        setValue,
+    });
+    const selectionValue = (0, react_1.useMemo)(() => {
+        if (mode === constants_1.CALENDAR_MODE.DateTime) {
+            if (!isDateFilled()) {
+                return undefined;
+            }
+            const d = new Date(dateAndTime.year ?? 0, dateAndTime.month ?? 0, dateAndTime.day ?? 0, dateAndTime.hours ?? 0, dateAndTime.minutes ?? 0, showSeconds ? (dateAndTime.seconds ?? 0) : 0);
+            return [d, d];
+        }
+        return draftRange;
+    }, [mode, draftRange, dateAndTime, isDateFilled, showSeconds]);
+    const getTestId = (0, react_1.useMemo)(() => (0, utils_2.getTestIdBuilder)(testId), [testId]);
+    const config = (0, react_1.useMemo)(() => (0, levelConfig_1.getLevelConfig)(level, origin, locale), [level, origin, locale]);
+    const presetsItems = (0, react_1.useMemo)(() => {
+        if (mode !== constants_1.CALENDAR_MODE.DateRange || buildCellProps || !presets?.enabled) {
+            return undefined;
+        }
+        if (presets.items && presets.items.length > 0) {
+            return presets.items;
+        }
+        return (0, utils_3.getDefaultPresets)(t, today);
+    }, [mode, buildCellProps, presets, t, today]);
+    const showPresetsAction = Boolean(presetsItems && presetsItems.length > 0);
+    const showTimeAction = mode === constants_1.CALENDAR_MODE.DateTime && level === constants_1.VIEW_MODE.Month;
+    const handlePresetSelect = (0, react_1.useCallback)((range) => {
+        setValue(range);
+        const target = range[0];
+        setAnchorDate(target);
+        setHeaderDate(target);
+        setScreen('calendar');
+    }, [setValue]);
+    const handleBack = (0, react_1.useCallback)(() => {
+        const snapshot = timeSnapshotRef.current;
+        if (snapshot) {
+            setDateAndTime(prev => ({ ...prev, ...snapshot }));
+            timeSnapshotRef.current = null;
+        }
+        setScreen('calendar');
+    }, [setDateAndTime]);
+    const handleTimeApply = (0, react_1.useCallback)(() => {
+        const flushed = drumRef.current?.flush();
+        if (flushed) {
+            onTimeChange({ hours: flushed.hours, minutes: flushed.minutes, seconds: flushed.seconds });
+        }
+        timeSnapshotRef.current = null;
+        setScreen('calendar');
+    }, [onTimeChange]);
+    const handleSelect = (0, react_1.useCallback)((date) => {
+        // Любой выбор/навигация переносит подпись шапки на этот период (selected, не scroll).
+        setHeaderDate(date);
+        if (level === constants_1.VIEW_MODE.Decade) {
+            if (mode === constants_1.CALENDAR_MODE.YearRange) {
+                preselectedRange ? completePreselect(date) : startPreselect(date);
+            }
+            else if (mode === constants_1.CALENDAR_MODE.Year) {
+                setValue([date, date]);
+            }
+            else {
+                setAnchorDate(date);
+                setLevel(constants_1.VIEW_MODE.Year);
+            }
+            return;
+        }
+        if (level === constants_1.VIEW_MODE.Year) {
+            if (mode === constants_1.CALENDAR_MODE.MonthRange) {
+                preselectedRange ? completePreselect(date) : startPreselect(date);
+            }
+            else if (mode === constants_1.CALENDAR_MODE.Month) {
+                setValue([date, date]);
+            }
+            else {
+                setAnchorDate(date);
+                setLevel(constants_1.VIEW_MODE.Month);
+            }
+            return;
+        }
+        // month level
+        if (mode === constants_1.CALENDAR_MODE.DateTime) {
+            onDateChange(date);
+            // Полный флоу: если время ещё не задано (свежее значение), сразу переводим на выбор времени.
+            if (!isTimeFilled()) {
+                setScreen('time');
+            }
+            return;
+        }
+        if (mode === constants_1.CALENDAR_MODE.DateRange) {
+            preselectedRange ? completePreselect(date) : startPreselect(date);
+            return;
+        }
+        setValue([date, date]);
+    }, [level, mode, preselectedRange, completePreselect, startPreselect, setValue, onDateChange, isTimeFilled]);
+    const levelUpDisabled = level === constants_1.VIEW_MODE.Decade;
+    const handleLevelUp = (0, react_1.useCallback)(() => {
+        // Вверх по уровню — от периода, который показывает шапка (а не от позиции скролла).
+        setAnchorDate(headerDate);
+        setLevel(prev => (prev === constants_1.VIEW_MODE.Month ? constants_1.VIEW_MODE.Year : constants_1.VIEW_MODE.Decade));
+    }, [headerDate]);
+    const applyDisabled = mode === constants_1.CALENDAR_MODE.DateTime ? !isDateAndTimeFilled() : !draftRange;
+    // Единственная точка коммита наружу (`onChangeValue`): собирает финальное значение из черновика.
+    // Экран времени в форму НЕ коммитит (его Apply лишь фиксирует время в черновик и возвращает сюда);
+    // коммит в форму — только здесь, кнопкой Apply экрана календаря (FF-8654, #4/#5).
+    const handleApply = (0, react_1.useCallback)(() => {
+        if (mode === constants_1.CALENDAR_MODE.DateTime) {
+            if (dateAndTime && isDateAndTimeFilled()) {
+                const todayDate = today || new Date();
+                const { year = todayDate.getFullYear(), month = todayDate.getMonth(), day = todayDate.getDate(), hours = 0, minutes = 0, seconds = 0, } = dateAndTime;
+                const next = new Date(year, month, day, hours, minutes, showSeconds ? seconds : 0);
+                commit((0, utils_2.normalizeRangeForMode)(mode, [next, next]));
+            }
+        }
+        else if (draftRange) {
+            commit(draftRange);
+        }
+        onApply?.();
+        if (closeOnApply) {
+            onClose();
+        }
+    }, [mode, dateAndTime, isDateAndTimeFilled, today, showSeconds, draftRange, commit, onApply, closeOnApply, onClose]);
+    const handleCurrent = (0, react_1.useCallback)(() => {
+        const todayDate = today || new Date();
+        if (screen === 'time') {
+            // На экране времени «Сейчас» правит только ВРЕМЯ в черновике (провизорно, как скролл барабана):
+            // уход назад откатит его по снапшоту, фиксация — кнопкой Apply экрана времени.
+            onTimeChange(todayDate);
+            onCurrent?.();
+            return;
+        }
+        if (mode === constants_1.CALENDAR_MODE.DateTime) {
+            // date-time: заполняем дату+время «сейчас» (значение коммитится по Apply календаря).
+            onDateAndTimeChange(todayDate);
+        }
+        else {
+            // Остальные режимы (date / month / year / *-range): выбираем текущий период.
+            // `normalizeRangeForMode` приведёт к границам месяца/года для соответствующих режимов.
+            setValue([todayDate, todayDate]);
+        }
+        setAnchorDate(new Date(todayDate));
+        setHeaderDate(new Date(todayDate));
+        setLevel(INITIAL_LEVEL[mode]);
+        onCurrent?.();
+    }, [today, screen, mode, onTimeChange, onDateAndTimeChange, setValue, onCurrent]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        size,
+        today,
+        referenceDate: origin,
+        viewDate: anchorDate,
+        showHolidays,
+        showSeconds,
+        fitToContainer: true,
+        value: selectionValue,
+        firstNotDisableCell: firstNotDisableCellStub,
+        mode,
+        preselectedRange,
+        viewMode: level,
+        viewShift: 0,
+        focus: undefined,
+        locale,
+        buildCellProps,
+        setFocus: noop,
+        setValue,
+        setViewMode: noop,
+        setViewShift: noop,
+        startPreselect,
+        restartPreselect,
+        continuePreselect,
+        completePreselect,
+        getTestId,
+        dateAndTime,
+        onDateChange,
+        onTimeChange,
+        onDateAndTimeChange,
+        isDateAndTimeFilled,
+        isTimeFilled,
+        isDateFilled,
+        applyButtonRef: refStub,
+        currentButtonRef: refStub,
+        hoursKeyboardNavigationRef: keyboardNavStub,
+        minutesKeyboardNavigationRef: keyboardNavStub,
+        secondsKeyboardNavigationRef: keyboardNavStub,
+    }), [
+        size,
+        today,
+        origin,
+        anchorDate,
+        showHolidays,
+        showSeconds,
+        selectionValue,
+        mode,
+        preselectedRange,
+        level,
+        locale,
+        buildCellProps,
+        setValue,
+        startPreselect,
+        restartPreselect,
+        continuePreselect,
+        completePreselect,
+        getTestId,
+        dateAndTime,
+        onDateChange,
+        onTimeChange,
+        onDateAndTimeChange,
+        isDateAndTimeFilled,
+        isTimeFilled,
+        isDateFilled,
+    ]);
+    // Шапка календаря — три фиксированных слота: пресеты слева (зарезервировано), селектор уровня по
+    // центру, время справа. Боковые слоты резервируют место (1fr) даже пустыми, чтобы селектор не «прыгал».
+    const calendarTitle = ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headerRow, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerSlotStart, children: showPresetsAction && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.FunctionSettingsSVG, {}), "aria-label": t('presets'), size: size, onClick: () => setScreen('presets'), "data-test-id": constants_1.TEST_IDS.calendarMobilePresetsButton })) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerSlotCenter, children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', label: config.label(headerDate), icon: levelUpDisabled ? undefined : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), iconPosition: 'after', size: size, disabled: levelUpDisabled, onClick: handleLevelUp, "data-test-id": constants_1.TEST_IDS.calendarMobileHeaderLevel }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headerSlotEnd, children: showTimeAction && ((0, jsx_runtime_1.jsx)(button_1.Button, { view: 'function', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.WatchSVG, {}), "aria-label": t('time'), size: size, onClick: () => setScreen('time'), "data-test-id": constants_1.TEST_IDS.calendarMobileTimeButton })) })] }));
+    const isTimeScreen = screen === 'time';
+    const isPresetsScreen = screen === 'presets';
+    return ((0, jsx_runtime_1.jsxs)(CalendarContext_1.CalendarContext.Provider, { value: contextValue, children: [(0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet, { open: open && !isTimeScreen, onClose: onClose, closeOnPopstate: closeOnPopstate, snapPoints: [1], bodyPadding: false, withDividers: true, "data-test-id": testId, title: isPresetsScreen ? t('presets') : undefined, onBackButtonClick: isPresetsScreen ? handleBack : undefined, slotSecondTitle: isPresetsScreen ? undefined : ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.calendarHeader, children: [calendarTitle, level === constants_1.VIEW_MODE.Month && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.weekRow, children: (0, jsx_runtime_1.jsx)(WeekRow_1.WeekRow, {}) }))] })), content: isPresetsScreen ? ((0, jsx_runtime_1.jsx)(MobilePresetsScreen_1.MobilePresetsScreen, { items: presetsItems ?? [], onSelect: handlePresetSelect })) : ((0, jsx_runtime_1.jsx)(MobilePeriodScroller_1.MobilePeriodScroller, { level: level, config: config, size: size, anchorDate: anchorDate, onSelect: handleSelect }, level)), footer: isPresetsScreen ? undefined : ((0, jsx_runtime_1.jsx)(MobileFooter_1.MobileFooter, { onApply: handleApply, onCurrent: handleCurrent, applyDisabled: applyDisabled })) }), (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheet, { withDividers: false, open: open && isTimeScreen, onClose: handleBack, closeOnPopstate: closeOnPopstate, title: t('time'), onBackButtonClick: handleBack, approveButton: { label: t('apply'), onClick: handleTimeApply }, additionalButton: { label: t('current'), view: 'function', onClick: handleCurrent }, footerTestIds: { approve: constants_1.TEST_IDS.calendarMobileApply, additional: constants_1.TEST_IDS.calendarMobileCurrent }, content: (0, jsx_runtime_1.jsx)(MobileTimeScreen_1.MobileTimeScreen, { size: size, drumRef: drumRef }) })] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__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 = (this && this.__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("./MobileCalendar"), exports);

package/dist/cjs/helperComponents/MobileCalendar/levelConfig.d.ts

@@ -0,0 +1,30 @@
+import { BaseGrid, ViewMode } from '../../types';
+/**
+ * Конфиг уровня скролла периодов (`month` / `year` / `decade`): индекс ↔ дата от фиксированного
+ * `origin` (симметричный диапазон ±radius, без bidirectional-prepend), сетка, колонки, предикаты, подписи.
+ */
+export type LevelConfig = {
+    /** Полное число периодов в виртуальном списке. */
+    count: number;
+    /** Индекс периода, соответствующего `origin`. */
+    centerIndex: number;
+    /** Дата периода по индексу. */
+    dateAt(index: number): Date;
+    /** Индекс периода, содержащего дату. */
+    indexAt(date: Date): number;
+    /** Сетка периода (`BaseGrid`). */
+    buildGrid(date: Date): BaseGrid;
+    /** Число колонок CSS-grid'а блока. */
+    columns: number;
+    /** Совпадение ячейки с выбранным значением на гранулярности уровня. */
+    isTheSameItem(date1: Date, date2: Date): boolean;
+    /** Принадлежит ли ячейка периоду блока (иначе `another` — скрывается на mobile). */
+    isInPeriod(viewDate: Date, date: Date): boolean;
+    /** Подпись ячейки (день / месяц / год). */
+    getItemLabel(date: Date): string;
+    /** Подпись периода (шапка блока и дропдаун уровня). */
+    label(date: Date): string;
+    /** Рисовать ли строку дней недели (только `month`). */
+    showWeekRow: boolean;
+};
+export declare function getLevelConfig(level: ViewMode, origin: Date, locale: Intl.Locale): LevelConfig;

package/dist/cjs/helperComponents/MobileCalendar/levelConfig.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLevelConfig = getLevelConfig;
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const utils_2 = require("../DecadeView/utils");
+const utils_3 = require("../MonthView/utils");
+const utils_4 = require("../YearView/utils");
+// ±периодов от origin: широкие (±150 лет на месяцах), чтобы навигация почти не упиралась в край.
+const RADIUS = {
+    [constants_1.VIEW_MODE.Month]: 1800,
+    [constants_1.VIEW_MODE.Year]: 200,
+    [constants_1.VIEW_MODE.Decade]: 200,
+};
+const decadeStart = (year) => Math.floor(year / 10) * 10;
+function getLevelConfig(level, origin, locale) {
+    const centerIndex = RADIUS[level];
+    const count = centerIndex * 2 + 1;
+    switch (level) {
+        case constants_1.VIEW_MODE.Year:
+            return {
+                count,
+                centerIndex,
+                dateAt: index => new Date(origin.getFullYear() + (index - centerIndex), 0, 1),
+                indexAt: date => centerIndex + (date.getFullYear() - origin.getFullYear()),
+                buildGrid: utils_4.buildYearGrid,
+                columns: 3,
+                isTheSameItem: utils_1.isTheSameMonth,
+                isInPeriod: utils_1.isTheSameYear,
+                getItemLabel: date => (0, utils_1.getMonthName)(date, locale),
+                label: date => date.getFullYear().toString(),
+                showWeekRow: false,
+            };
+        case constants_1.VIEW_MODE.Decade: {
+            const originDecade = decadeStart(origin.getFullYear());
+            return {
+                count,
+                centerIndex,
+                dateAt: index => new Date(originDecade + (index - centerIndex) * 10, 0, 1),
+                indexAt: date => centerIndex + (decadeStart(date.getFullYear()) - originDecade) / 10,
+                buildGrid: utils_2.buildDecadeGrid,
+                columns: 3,
+                isTheSameItem: utils_1.isTheSameYear,
+                isInPeriod: utils_1.isTheSameDecade,
+                getItemLabel: utils_1.getYearLabel,
+                label: date => {
+                    const start = decadeStart(date.getFullYear());
+                    return `${start}-${start + 9}`;
+                },
+                showWeekRow: false,
+            };
+        }
+        case constants_1.VIEW_MODE.Month:
+        default:
+            return {
+                count,
+                centerIndex,
+                dateAt: index => new Date(origin.getFullYear(), origin.getMonth() + (index - centerIndex), 1),
+                indexAt: date => centerIndex + (date.getFullYear() - origin.getFullYear()) * 12 + (date.getMonth() - origin.getMonth()),
+                buildGrid: date => (0, utils_3.buildMonthGrid)(date, locale),
+                columns: 7,
+                isTheSameItem: utils_1.isTheSameDate,
+                isInPeriod: utils_1.isTheSameMonth,
+                getItemLabel: utils_1.getDateLabel,
+                label: date => `${(0, utils_1.getMonthName)(date, locale)} ${date.getFullYear()}`,
+                showWeekRow: true,
+            };
+    }
+}

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

@@ -0,0 +1,35 @@
+.calendarHeader{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+
+.headerRow{
+  display:grid;
+  grid-template-columns:1fr auto 1fr;
+  align-items:center;
+  width:100%;
+}
+
+.headerSlotStart{
+  display:flex;
+  justify-content:flex-start;
+  min-width:0;
+}
+
+.headerSlotCenter{
+  display:flex;
+  justify-content:center;
+  min-width:0;
+}
+
+.headerSlotEnd{
+  display:flex;
+  justify-content:flex-end;
+  min-width:0;
+}
+
+.weekRow{
+  display:grid;
+  grid-template-columns:repeat(7, minmax(0, 1fr));
+}

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

@@ -0,0 +1,5 @@
+import { CalendarDropdownProps } from '../../components/CalendarDropdown/CalendarDropdown';
+/**
+ * Адаптер: значение нормализуется в Range (внутри), наружу отдаётся в форме режима.
+ */
+export declare function MobileCalendarDropdown(props: CalendarDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileCalendarDropdown/MobileCalendarDropdown.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileCalendarDropdown = MobileCalendarDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const utils_2 = require("../../components/Calendar/utils");
+const hooks_1 = require("../../hooks");
+const MobileCalendar_1 = require("../MobileCalendar");
+const SINGLE_VALUE_MODES = ['date', 'date-time', 'month', 'year'];
+/**
+ * Адаптер: значение нормализуется в Range (внутри), наружу отдаётся в форме режима.
+ */
+function MobileCalendarDropdown(props) {
+    const { children, mode, value, defaultValue, onChangeValue, closeOnApply = false, onApply, onCurrent, open: openProp, onOpenChange, closeOnPopstate, size, today, showHolidays, buildCellProps, locale, presets, 'data-test-id': testId, } = props;
+    // `showSeconds` есть только у date-time-члена дискриминированного union'а.
+    const showSeconds = 'showSeconds' in props ? props.showSeconds : undefined;
+    const [open, setOpen] = (0, utils_1.useValueControl)({ value: openProp, defaultValue: false, onChange: onOpenChange });
+    const handleClose = (0, react_1.useCallback)(() => setOpen(false), [setOpen]);
+    const handleOpen = (0, react_1.useCallback)(() => setOpen(true), [setOpen]);
+    const normalizedValue = (0, react_1.useMemo)(() => (0, utils_2.getNormalizedValue)(value), [value]);
+    const normalizedDefaultValue = (0, react_1.useMemo)(() => (0, utils_2.getNormalizedValue)(defaultValue), [defaultValue]);
+    const handleChangeValue = (0, react_1.useCallback)((next) => {
+        if (SINGLE_VALUE_MODES.includes(mode)) {
+            onChangeValue?.(next[0]);
+            return;
+        }
+        onChangeValue?.(next);
+    }, [mode, onChangeValue]);
+    const trigger = (0, hooks_1.useOpenTrigger)(children, handleOpen);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, (0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { open: open ?? false, onClose: handleClose, mode: mode, size: size, today: today, showHolidays: showHolidays, showSeconds: showSeconds, buildCellProps: buildCellProps, locale: locale, presets: presets, value: normalizedValue, defaultValue: normalizedDefaultValue, onChangeValue: handleChangeValue, onApply: onApply, onCurrent: onCurrent, closeOnApply: closeOnApply, closeOnPopstate: closeOnPopstate, "data-test-id": testId })] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__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 = (this && this.__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("./MobileCalendarDropdown"), exports);

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

@@ -0,0 +1,12 @@
+export type MobileFooterProps = {
+    /** Подтверждение выбора. */
+    onApply(): void;
+    /** Сброс к «сейчас» / переход к текущей дате. */
+    onCurrent(): void;
+    /** Блокировка Apply (нет полного выбора). */
+    applyDisabled: boolean;
+};
+/**
+ * Строка «Выбрано:» (для всех режимов) + Current / Apply кнопки.
+ */
+export declare function MobileFooter({ onApply, onCurrent, applyDisabled }: MobileFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/MobileFooter/MobileFooter.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileFooter = MobileFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const format_1 = require("./format");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Строка «Выбрано:» (для всех режимов) + Current / Apply кнопки.
+ */
+function MobileFooter({ onApply, onCurrent, applyDisabled }) {
+    const { mode, value, dateAndTime, showSeconds, locale, getTestId } = (0, hooks_1.useCalendarContext)();
+    const { t } = locale_1.calendarLocale.useTranslations();
+    const selected = (0, format_1.formatSelectedValue)({ mode, value, dateAndTime, showSeconds, locale });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, children: [selected && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.selectedRow, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectedLabel, children: t('selected') }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.selectedValue, "data-test-id": getTestId(constants_1.TEST_IDS.calendarMobileSelected), children: selected })] })), (0, jsx_runtime_1.jsx)(button_1.ButtonGroup, { break: true, primaryAction: {
+                    label: t('apply'),
+                    appearance: button_1.APPEARANCE.Primary,
+                    view: button_1.VIEW.Filled,
+                    disabled: applyDisabled,
+                    onClick: onApply,
+                    'data-test-id': constants_1.TEST_IDS.calendarMobileApply,
+                }, tertiaryAction: {
+                    label: t('current'),
+                    appearance: button_1.APPEARANCE.Neutral,
+                    view: button_1.VIEW.Function,
+                    onClick: onCurrent,
+                    'data-test-id': constants_1.TEST_IDS.calendarMobileCurrent,
+                } })] }));
+}

package/dist/cjs/helperComponents/MobileFooter/format.d.ts

@@ -0,0 +1,10 @@
+import { CalendarMode, DateAndTime, Range } from '../../types';
+export type FormatSelectedValueParams = {
+    mode: CalendarMode | 'time';
+    value?: Range;
+    dateAndTime?: DateAndTime;
+    showSeconds: boolean;
+    locale?: Intl.Locale;
+};
+/** Текст выбранного значения для строки «Выбрано:» в мобильном футере (зависит от режима, локализован). */
+export declare function formatSelectedValue({ mode, value, dateAndTime, showSeconds, locale, }: FormatSelectedValueParams): string;

package/dist/cjs/helperComponents/MobileFooter/format.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatSelectedValue = formatSelectedValue;
+const constants_1 = require("../../constants");
+const DATE_FMT = { day: '2-digit', month: '2-digit', year: 'numeric' };
+const MONTH_FMT = { month: '2-digit', year: 'numeric' };
+const YEAR_FMT = { year: 'numeric' };
+const formatDate = (date, locale) => date.toLocaleDateString(locale, DATE_FMT);
+const formatMonth = (date, locale) => date.toLocaleDateString(locale, MONTH_FMT);
+const formatYear = (date, locale) => date.toLocaleDateString(locale, YEAR_FMT);
+const formatTime = (date, showSeconds, locale) => date.toLocaleTimeString(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+    ...(showSeconds ? { second: '2-digit' } : {}),
+});
+/** Текст выбранного значения для строки «Выбрано:» в мобильном футере (зависит от режима, локализован). */
+function formatSelectedValue({ mode, value, dateAndTime, showSeconds, locale, }) {
+    const tag = locale?.toString();
+    if (mode === constants_1.CALENDAR_MODE.DateTime) {
+        // Показываем то, что уже выбрано, даже частично: время видно сразу, не дожидаясь даты (и наоборот),
+        // а строка целиком скрывается только когда не выбрано ничего (FF-8654, #note_3706918).
+        if (!dateAndTime) {
+            return '';
+        }
+        const { year, month, day, hours, minutes, seconds } = dateAndTime;
+        const dateFilled = year != null && month != null && day != null;
+        const timeFilled = hours != null && minutes != null && (!showSeconds || seconds != null);
+        if (!dateFilled && !timeFilled) {
+            return '';
+        }
+        const parts = [];
+        if (dateFilled) {
+            parts.push(formatDate(new Date(year ?? 0, month ?? 0, day ?? 0), tag));
+        }
+        if (timeFilled) {
+            parts.push(formatTime(new Date(2000, 0, 1, hours ?? 0, minutes ?? 0, showSeconds ? (seconds ?? 0) : 0), showSeconds, tag));
+        }
+        return parts.join(' ');
+    }
+    if (!value) {
+        return '';
+    }
+    const [start, end] = value;
+    switch (mode) {
+        case constants_1.CALENDAR_MODE.Date:
+            return formatDate(start, tag);
+        case constants_1.CALENDAR_MODE.Month:
+            return formatMonth(start, tag);
+        case constants_1.CALENDAR_MODE.Year:
+            return formatYear(start, tag);
+        case constants_1.CALENDAR_MODE.DateRange:
+            return `${formatDate(start, tag)} – ${formatDate(end, tag)}`;
+        case constants_1.CALENDAR_MODE.MonthRange:
+            return `${formatMonth(start, tag)} – ${formatMonth(end, tag)}`;
+        case constants_1.CALENDAR_MODE.YearRange:
+            return `${formatYear(start, tag)} – ${formatYear(end, tag)}`;
+        default:
+            return '';
+    }
+}

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

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