@cloud-ru/ds-calendar 1.0.0

package/dist/esm/helperComponents/MobileCalendar/MobileCalendar.js

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { Button } from '@cloud-ru/ds-button';
+import { ChevronDownSVG, FunctionSettingsSVG, WatchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { useLayoutEffect, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CALENDAR_MODE, SIZE, TEST_IDS, VIEW_MODE } from '../../constants.js';
+import { useDateAndTime } from '../../hooks/index.js';
+import { calendarLocale } from '../../locale/index.js';
+import { getLocale, getTestIdBuilder, normalizeRangeForMode } from '../../utils.js';
+import { useRange } from '../CalendarBase/hooks.js';
+import { CalendarContext } from '../CalendarContext/index.js';
+import { MobileFooter } from '../MobileFooter/index.js';
+import { MobilePeriodScroller } from '../MobilePeriodScroller/index.js';
+import { MobilePresetsScreen } from '../MobilePresetsScreen/index.js';
+import { MobileTimeScreen } from '../MobileTimeScreen/index.js';
+import { getDefaultPresets } from '../PeriodPresetsList/utils.js';
+import { WeekRow } from '../WeekRow/index.js';
+import { getLevelConfig } from './levelConfig.js';
+import styles from './styles.module.css';
+/** Уровень, с которого открывается режим (как `CALENDAR_DEFAULT_MODE_MAP` десктопа). */
+const INITIAL_LEVEL = {
+    [CALENDAR_MODE.Date]: VIEW_MODE.Month,
+    [CALENDAR_MODE.DateTime]: VIEW_MODE.Month,
+    [CALENDAR_MODE.DateRange]: VIEW_MODE.Month,
+    [CALENDAR_MODE.Month]: VIEW_MODE.Year,
+    [CALENDAR_MODE.MonthRange]: VIEW_MODE.Year,
+    [CALENDAR_MODE.Year]: VIEW_MODE.Decade,
+    [CALENDAR_MODE.YearRange]: VIEW_MODE.Decade,
+};
+const noop = () => { };
+const refStub = { current: null };
+const keyboardNavStub = { current: { focusItem: noop } };
+const firstNotDisableCellStub = { current: [0, 0] };
+/**
+ * BottomSheet со скроллом периодов, дропдаун-шапкой уровня, футером. Один CalendarContext для всех экранов.
+ */
+export function MobileCalendar({ open, onClose, mode, size = 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 } = calendarLocale.useTranslations();
+    const [committedValue, commit] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
+    const committedRef = useRef(committedValue);
+    committedRef.current = committedValue;
+    const [draftRange, setDraftRange] = useState(committedValue);
+    const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const [origin] = useState(() => committedValue?.[0] || today || new Date());
+    const locale = useMemo(() => getLocale({ localeProp, ctxLang }), [ctxLang, localeProp]);
+    const drumRef = useRef(null);
+    const [level, setLevel] = useState(INITIAL_LEVEL[mode]);
+    const [anchorDate, setAnchorDate] = useState(origin);
+    const [headerDate, setHeaderDate] = useState(origin);
+    const [screen, setScreen] = useState('calendar');
+    const setValue = useCallback((dates) => setDraftRange(normalizeRangeForMode(mode, dates)), [mode]);
+    const { dateAndTime, setDateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = useDateAndTime({ showSeconds, value: undefined });
+    const dateAndTimeRef = useRef(dateAndTime);
+    dateAndTimeRef.current = dateAndTime;
+    const timeSnapshotRef = useRef(null);
+    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 === 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]);
+    useEffect(() => {
+        if (screen === 'time') {
+            const { hours, minutes, seconds } = dateAndTimeRef.current;
+            timeSnapshotRef.current = { hours, minutes, seconds };
+        }
+    }, [screen]);
+    const { preselectedRange, startPreselect, continuePreselect, restartPreselect, completePreselect } = useRange({
+        setValue,
+    });
+    const selectionValue = useMemo(() => {
+        if (mode === 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 = useMemo(() => getTestIdBuilder(testId), [testId]);
+    const config = useMemo(() => getLevelConfig(level, origin, locale), [level, origin, locale]);
+    const presetsItems = useMemo(() => {
+        if (mode !== CALENDAR_MODE.DateRange || buildCellProps || !presets?.enabled) {
+            return undefined;
+        }
+        if (presets.items && presets.items.length > 0) {
+            return presets.items;
+        }
+        return getDefaultPresets(t, today);
+    }, [mode, buildCellProps, presets, t, today]);
+    const showPresetsAction = Boolean(presetsItems && presetsItems.length > 0);
+    const showTimeAction = mode === CALENDAR_MODE.DateTime && level === VIEW_MODE.Month;
+    const handlePresetSelect = useCallback((range) => {
+        setValue(range);
+        const target = range[0];
+        setAnchorDate(target);
+        setHeaderDate(target);
+        setScreen('calendar');
+    }, [setValue]);
+    const handleBack = useCallback(() => {
+        const snapshot = timeSnapshotRef.current;
+        if (snapshot) {
+            setDateAndTime(prev => ({ ...prev, ...snapshot }));
+            timeSnapshotRef.current = null;
+        }
+        setScreen('calendar');
+    }, [setDateAndTime]);
+    const handleTimeApply = 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 = useCallback((date) => {
+        // Любой выбор/навигация переносит подпись шапки на этот период (selected, не scroll).
+        setHeaderDate(date);
+        if (level === VIEW_MODE.Decade) {
+            if (mode === CALENDAR_MODE.YearRange) {
+                preselectedRange ? completePreselect(date) : startPreselect(date);
+            }
+            else if (mode === CALENDAR_MODE.Year) {
+                setValue([date, date]);
+            }
+            else {
+                setAnchorDate(date);
+                setLevel(VIEW_MODE.Year);
+            }
+            return;
+        }
+        if (level === VIEW_MODE.Year) {
+            if (mode === CALENDAR_MODE.MonthRange) {
+                preselectedRange ? completePreselect(date) : startPreselect(date);
+            }
+            else if (mode === CALENDAR_MODE.Month) {
+                setValue([date, date]);
+            }
+            else {
+                setAnchorDate(date);
+                setLevel(VIEW_MODE.Month);
+            }
+            return;
+        }
+        // month level
+        if (mode === CALENDAR_MODE.DateTime) {
+            onDateChange(date);
+            // Полный флоу: если время ещё не задано (свежее значение), сразу переводим на выбор времени.
+            if (!isTimeFilled()) {
+                setScreen('time');
+            }
+            return;
+        }
+        if (mode === CALENDAR_MODE.DateRange) {
+            preselectedRange ? completePreselect(date) : startPreselect(date);
+            return;
+        }
+        setValue([date, date]);
+    }, [level, mode, preselectedRange, completePreselect, startPreselect, setValue, onDateChange, isTimeFilled]);
+    const levelUpDisabled = level === VIEW_MODE.Decade;
+    const handleLevelUp = useCallback(() => {
+        // Вверх по уровню — от периода, который показывает шапка (а не от позиции скролла).
+        setAnchorDate(headerDate);
+        setLevel(prev => (prev === VIEW_MODE.Month ? VIEW_MODE.Year : VIEW_MODE.Decade));
+    }, [headerDate]);
+    const applyDisabled = mode === CALENDAR_MODE.DateTime ? !isDateAndTimeFilled() : !draftRange;
+    // Единственная точка коммита наружу (`onChangeValue`): собирает финальное значение из черновика.
+    // Экран времени в форму НЕ коммитит (его Apply лишь фиксирует время в черновик и возвращает сюда);
+    // коммит в форму — только здесь, кнопкой Apply экрана календаря (FF-8654, #4/#5).
+    const handleApply = useCallback(() => {
+        if (mode === 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(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 = useCallback(() => {
+        const todayDate = today || new Date();
+        if (screen === 'time') {
+            // На экране времени «Сейчас» правит только ВРЕМЯ в черновике (провизорно, как скролл барабана):
+            // уход назад откатит его по снапшоту, фиксация — кнопкой Apply экрана времени.
+            onTimeChange(todayDate);
+            onCurrent?.();
+            return;
+        }
+        if (mode === 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 = 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 = (_jsxs("div", { className: styles.headerRow, children: [_jsx("div", { className: styles.headerSlotStart, children: showPresetsAction && (_jsx(Button, { view: 'function', appearance: 'neutral', icon: _jsx(FunctionSettingsSVG, {}), "aria-label": t('presets'), size: size, onClick: () => setScreen('presets'), "data-test-id": TEST_IDS.calendarMobilePresetsButton })) }), _jsx("div", { className: styles.headerSlotCenter, children: _jsx(Button, { view: 'function', appearance: 'neutral', label: config.label(headerDate), icon: levelUpDisabled ? undefined : _jsx(ChevronDownSVG, {}), iconPosition: 'after', size: size, disabled: levelUpDisabled, onClick: handleLevelUp, "data-test-id": TEST_IDS.calendarMobileHeaderLevel }) }), _jsx("div", { className: styles.headerSlotEnd, children: showTimeAction && (_jsx(Button, { view: 'function', appearance: 'neutral', icon: _jsx(WatchSVG, {}), "aria-label": t('time'), size: size, onClick: () => setScreen('time'), "data-test-id": TEST_IDS.calendarMobileTimeButton })) })] }));
+    const isTimeScreen = screen === 'time';
+    const isPresetsScreen = screen === 'presets';
+    return (_jsxs(CalendarContext.Provider, { value: contextValue, children: [_jsx(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 : (_jsxs("div", { className: styles.calendarHeader, children: [calendarTitle, level === VIEW_MODE.Month && (_jsx("div", { className: styles.weekRow, children: _jsx(WeekRow, {}) }))] })), content: isPresetsScreen ? (_jsx(MobilePresetsScreen, { items: presetsItems ?? [], onSelect: handlePresetSelect })) : (_jsx(MobilePeriodScroller, { level: level, config: config, size: size, anchorDate: anchorDate, onSelect: handleSelect }, level)), footer: isPresetsScreen ? undefined : (_jsx(MobileFooter, { onApply: handleApply, onCurrent: handleCurrent, applyDisabled: applyDisabled })) }), _jsx(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: TEST_IDS.calendarMobileApply, additional: TEST_IDS.calendarMobileCurrent }, content: _jsx(MobileTimeScreen, { size: size, drumRef: drumRef }) })] }));
+}

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { BaseGrid, ViewMode } from '../../types.js';
+/**
+ * Конфиг уровня скролла периодов (`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/esm/helperComponents/MobileCalendar/levelConfig.js

@@ -0,0 +1,66 @@
+import { VIEW_MODE } from '../../constants.js';
+import { getDateLabel, getMonthName, getYearLabel, isTheSameDate, isTheSameDecade, isTheSameMonth, isTheSameYear, } from '../../utils.js';
+import { buildDecadeGrid } from '../DecadeView/utils.js';
+import { buildMonthGrid } from '../MonthView/utils.js';
+import { buildYearGrid } from '../YearView/utils.js';
+// ±периодов от origin: широкие (±150 лет на месяцах), чтобы навигация почти не упиралась в край.
+const RADIUS = {
+    [VIEW_MODE.Month]: 1800,
+    [VIEW_MODE.Year]: 200,
+    [VIEW_MODE.Decade]: 200,
+};
+const decadeStart = (year) => Math.floor(year / 10) * 10;
+export function getLevelConfig(level, origin, locale) {
+    const centerIndex = RADIUS[level];
+    const count = centerIndex * 2 + 1;
+    switch (level) {
+        case VIEW_MODE.Year:
+            return {
+                count,
+                centerIndex,
+                dateAt: index => new Date(origin.getFullYear() + (index - centerIndex), 0, 1),
+                indexAt: date => centerIndex + (date.getFullYear() - origin.getFullYear()),
+                buildGrid: buildYearGrid,
+                columns: 3,
+                isTheSameItem: isTheSameMonth,
+                isInPeriod: isTheSameYear,
+                getItemLabel: date => getMonthName(date, locale),
+                label: date => date.getFullYear().toString(),
+                showWeekRow: false,
+            };
+        case 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: buildDecadeGrid,
+                columns: 3,
+                isTheSameItem: isTheSameYear,
+                isInPeriod: isTheSameDecade,
+                getItemLabel: getYearLabel,
+                label: date => {
+                    const start = decadeStart(date.getFullYear());
+                    return `${start}-${start + 9}`;
+                },
+                showWeekRow: false,
+            };
+        }
+        case 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 => buildMonthGrid(date, locale),
+                columns: 7,
+                isTheSameItem: isTheSameDate,
+                isInPeriod: isTheSameMonth,
+                getItemLabel: getDateLabel,
+                label: date => `${getMonthName(date, locale)} ${date.getFullYear()}`,
+                showWeekRow: true,
+            };
+    }
+}

package/dist/esm/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/esm/helperComponents/MobileCalendarDropdown/MobileCalendarDropdown.d.ts

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

package/dist/esm/helperComponents/MobileCalendarDropdown/MobileCalendarDropdown.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo } from 'react';
+import { getNormalizedValue } from '../../components/Calendar/utils.js';
+import { useOpenTrigger } from '../../hooks/index.js';
+import { MobileCalendar } from '../MobileCalendar/index.js';
+const SINGLE_VALUE_MODES = ['date', 'date-time', 'month', 'year'];
+/**
+ * Адаптер: значение нормализуется в Range (внутри), наружу отдаётся в форме режима.
+ */
+export 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] = useValueControl({ value: openProp, defaultValue: false, onChange: onOpenChange });
+    const handleClose = useCallback(() => setOpen(false), [setOpen]);
+    const handleOpen = useCallback(() => setOpen(true), [setOpen]);
+    const normalizedValue = useMemo(() => getNormalizedValue(value), [value]);
+    const normalizedDefaultValue = useMemo(() => getNormalizedValue(defaultValue), [defaultValue]);
+    const handleChangeValue = useCallback((next) => {
+        if (SINGLE_VALUE_MODES.includes(mode)) {
+            onChangeValue?.(next[0]);
+            return;
+        }
+        onChangeValue?.(next);
+    }, [mode, onChangeValue]);
+    const trigger = useOpenTrigger(children, handleOpen);
+    return (_jsxs(_Fragment, { children: [trigger, _jsx(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/esm/helperComponents/MobileCalendarDropdown/index.d.ts

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

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

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

package/dist/esm/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/esm/helperComponents/MobileFooter/MobileFooter.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { APPEARANCE, ButtonGroup, VIEW } from '@cloud-ru/ds-button';
+import { TEST_IDS } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { calendarLocale } from '../../locale/index.js';
+import { formatSelectedValue } from './format.js';
+import styles from './styles.module.css';
+/**
+ * Строка «Выбрано:» (для всех режимов) + Current / Apply кнопки.
+ */
+export function MobileFooter({ onApply, onCurrent, applyDisabled }) {
+    const { mode, value, dateAndTime, showSeconds, locale, getTestId } = useCalendarContext();
+    const { t } = calendarLocale.useTranslations();
+    const selected = formatSelectedValue({ mode, value, dateAndTime, showSeconds, locale });
+    return (_jsxs("div", { className: styles.footer, children: [selected && (_jsxs("div", { className: styles.selectedRow, children: [_jsx("span", { className: styles.selectedLabel, children: t('selected') }), _jsx("span", { className: styles.selectedValue, "data-test-id": getTestId(TEST_IDS.calendarMobileSelected), children: selected })] })), _jsx(ButtonGroup, { break: true, primaryAction: {
+                    label: t('apply'),
+                    appearance: APPEARANCE.Primary,
+                    view: VIEW.Filled,
+                    disabled: applyDisabled,
+                    onClick: onApply,
+                    'data-test-id': TEST_IDS.calendarMobileApply,
+                }, tertiaryAction: {
+                    label: t('current'),
+                    appearance: APPEARANCE.Neutral,
+                    view: VIEW.Function,
+                    onClick: onCurrent,
+                    'data-test-id': TEST_IDS.calendarMobileCurrent,
+                } })] }));
+}

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

@@ -0,0 +1,10 @@
+import { CalendarMode, DateAndTime, Range } from '../../types.js';
+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/esm/helperComponents/MobileFooter/format.js

@@ -0,0 +1,57 @@
+import { CALENDAR_MODE } from '../../constants.js';
+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' } : {}),
+});
+/** Текст выбранного значения для строки «Выбрано:» в мобильном футере (зависит от режима, локализован). */
+export function formatSelectedValue({ mode, value, dateAndTime, showSeconds, locale, }) {
+    const tag = locale?.toString();
+    if (mode === 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 CALENDAR_MODE.Date:
+            return formatDate(start, tag);
+        case CALENDAR_MODE.Month:
+            return formatMonth(start, tag);
+        case CALENDAR_MODE.Year:
+            return formatYear(start, tag);
+        case CALENDAR_MODE.DateRange:
+            return `${formatDate(start, tag)} – ${formatDate(end, tag)}`;
+        case CALENDAR_MODE.MonthRange:
+            return `${formatMonth(start, tag)} – ${formatMonth(end, tag)}`;
+        case CALENDAR_MODE.YearRange:
+            return `${formatYear(start, tag)} – ${formatYear(end, tag)}`;
+        default:
+            return '';
+    }
+}

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

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

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

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

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

@@ -0,0 +1,38 @@
+.footer{
+  display:flex;
+  flex-direction:column;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  width:100%;
+}
+
+.selectedRow{
+  display:flex;
+  gap:var(--sn-primitive-dimension-12, 12px);
+  align-items:baseline;
+  justify-content:space-between;
+  width:100%;
+}
+
+.selectedLabel{
+  flex:1 1 auto;
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+
+.selectedValue{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  text-align:right;
+  white-space:nowrap;
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}