@cloud-ru/ds-calendar 1.0.0

package/src/helperComponents/MobileCalendarDropdown/MobileCalendarDropdown.tsx

@@ -0,0 +1,85 @@
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo } from 'react';
+
+import { getNormalizedValue } from '../../components/Calendar/utils';
+import { CalendarDropdownProps } from '../../components/CalendarDropdown/CalendarDropdown';
+import { useOpenTrigger } from '../../hooks';
+import { CalendarMode, Range } from '../../types';
+import { MobileCalendar } from '../MobileCalendar';
+
+const SINGLE_VALUE_MODES: CalendarMode[] = ['date', 'date-time', 'month', 'year'];
+
+/**
+ * Адаптер: значение нормализуется в Range (внутри), наружу отдаётся в форме режима.
+ */
+export function MobileCalendarDropdown(props: CalendarDropdownProps) {
+  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<boolean>({ 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: Range) => {
+      if (SINGLE_VALUE_MODES.includes(mode)) {
+        (onChangeValue as ((value: Date) => void) | undefined)?.(next[0]);
+        return;
+      }
+      (onChangeValue as ((value: Range) => void) | undefined)?.(next);
+    },
+    [mode, onChangeValue],
+  );
+
+  const trigger = useOpenTrigger(children, handleOpen);
+
+  return (
+    <>
+      {trigger}
+      <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/src/helperComponents/MobileCalendarDropdown/index.ts

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

package/src/helperComponents/MobileFooter/MobileFooter.tsx

@@ -0,0 +1,58 @@
+import { APPEARANCE, ButtonGroup, VIEW } from '@cloud-ru/ds-button';
+
+import { TEST_IDS } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { calendarLocale } from '../../locale';
+import { formatSelectedValue } from './format';
+import styles from './styles.module.scss';
+
+export type MobileFooterProps = {
+  /** Подтверждение выбора. */
+  onApply(): void;
+  /** Сброс к «сейчас» / переход к текущей дате. */
+  onCurrent(): void;
+  /** Блокировка Apply (нет полного выбора). */
+  applyDisabled: boolean;
+};
+
+/**
+ * Строка «Выбрано:» (для всех режимов) + Current / Apply кнопки.
+ */
+export function MobileFooter({ onApply, onCurrent, applyDisabled }: MobileFooterProps) {
+  const { mode, value, dateAndTime, showSeconds, locale, getTestId } = useCalendarContext();
+  const { t } = calendarLocale.useTranslations();
+
+  const selected = formatSelectedValue({ mode, value, dateAndTime, showSeconds, locale });
+
+  return (
+    <div className={styles.footer}>
+      {/* Только когда выбрано (FF-8654, #3) */}
+      {selected && (
+        <div className={styles.selectedRow}>
+          <span className={styles.selectedLabel}>{t('selected')}</span>
+          <span className={styles.selectedValue} data-test-id={getTestId(TEST_IDS.calendarMobileSelected)}>
+            {selected}
+          </span>
+        </div>
+      )}
+      <ButtonGroup
+        break
+        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,
+        }}
+      />
+    </div>
+  );
+}

package/src/helperComponents/MobileFooter/format.ts

@@ -0,0 +1,82 @@
+import { CALENDAR_MODE } from '../../constants';
+import { CalendarMode, DateAndTime, Range } from '../../types';
+
+const DATE_FMT: Intl.DateTimeFormatOptions = { day: '2-digit', month: '2-digit', year: 'numeric' };
+const MONTH_FMT: Intl.DateTimeFormatOptions = { month: '2-digit', year: 'numeric' };
+const YEAR_FMT: Intl.DateTimeFormatOptions = { year: 'numeric' };
+
+const formatDate = (date: Date, locale?: string) => date.toLocaleDateString(locale, DATE_FMT);
+const formatMonth = (date: Date, locale?: string) => date.toLocaleDateString(locale, MONTH_FMT);
+const formatYear = (date: Date, locale?: string) => date.toLocaleDateString(locale, YEAR_FMT);
+const formatTime = (date: Date, showSeconds: boolean, locale?: string) =>
+  date.toLocaleTimeString(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+    ...(showSeconds ? { second: '2-digit' } : {}),
+  });
+
+export type FormatSelectedValueParams = {
+  mode: CalendarMode | 'time';
+  value?: Range;
+  dateAndTime?: DateAndTime;
+  showSeconds: boolean;
+  locale?: Intl.Locale;
+};
+
+/** Текст выбранного значения для строки «Выбрано:» в мобильном футере (зависит от режима, локализован). */
+export function formatSelectedValue({
+  mode,
+  value,
+  dateAndTime,
+  showSeconds,
+  locale,
+}: FormatSelectedValueParams): string {
+  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: string[] = [];
+    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/src/helperComponents/MobileFooter/index.ts

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

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

@@ -0,0 +1,39 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$selectedTypography: (
+  's': base.$sn-regular-body-s,
+  'm': base.$sn-regular-body-s,
+  'l': base.$sn-regular-body-m,
+);
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-12;
+  width: 100%;
+}
+
+.selectedRow {
+  display: flex;
+  gap: base.$sn-primitive-dimension-12;
+  align-items: baseline;
+  justify-content: space-between;
+
+  width: 100%;
+}
+
+.selectedLabel {
+  flex: 1 1 auto;
+  color: base.$sn-theme-color-available-version-textDisabled;
+
+  @include base.composite-var($selectedTypography, 'm');
+}
+
+.selectedValue {
+  flex-shrink: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+  text-align: right;
+  white-space: nowrap;
+
+  @include base.composite-var($selectedTypography, 'm');
+}

package/src/helperComponents/MobilePeriodBlock/MobilePeriodBlock.tsx

@@ -0,0 +1,82 @@
+import { TEST_IDS } from '../../constants';
+import { classifyCell, useCalendarContext } from '../../hooks';
+import { Size, ViewMode } from '../../types';
+import { Item } from '../Item';
+import { LevelConfig } from '../MobileCalendar/levelConfig';
+import styles from './styles.module.scss';
+
+export type MobilePeriodBlockProps = {
+  /** Дата периода блока (1-е число месяца / 1 января года / 1 января старта декады). */
+  date: Date;
+  /** Текущий уровень (определяет сетку и гранулярность ячеек). */
+  level: ViewMode;
+  /** Конфиг уровня. */
+  config: LevelConfig;
+  /** Размер ячеек. */
+  size: Size;
+  /** Выбор ячейки (tap). */
+  onSelect(date: Date): void;
+};
+
+/**
+ * Один период скролла: заголовок + грид ячеек. Ячейки соседних периодов скрыты.
+ */
+export function MobilePeriodBlock({ date, level, config, size, onSelect }: MobilePeriodBlockProps) {
+  const { mode, value, preselectedRange, dateAndTime, isDateFilled, showHolidays, today, buildCellProps, getTestId } =
+    useCalendarContext();
+
+  const classifiedRows = config.buildGrid(date).map(row =>
+    row.map(({ date: cellDate }) => ({
+      cellDate,
+      cell: classifyCell({
+        date: cellDate,
+        viewDate: date,
+        viewMode: level,
+        mode,
+        value,
+        preselectedRange,
+        dateAndTime,
+        isDateFilled,
+        showHolidays,
+        today,
+        buildCellProps,
+        isTheSameItem: config.isTheSameItem,
+        isInPeriod: config.isInPeriod,
+        getItemLabel: config.getItemLabel,
+      }),
+    })),
+  );
+
+  // Строки целиком из соседнего периода (ведущие/замыкающие) не рендерим — блок месяца сжимается до
+  // реально занятых недель, иначе пустой «хвост» создаёт зазор и сбивает подпись активного периода.
+  const cells = classifiedRows.filter(row => row.some(({ cell }) => !cell.another)).flat();
+
+  return (
+    <div className={styles.block} data-size={size} data-test-id={getTestId(TEST_IDS.calendarMobilePeriodBlock)}>
+      <div className={styles.caption}>{config.label(date)}</div>
+      <div
+        className={styles.grid}
+        data-level={level}
+        style={{ gridTemplateColumns: `repeat(${config.columns}, minmax(0, 1fr))` }}
+      >
+        {cells.map(({ cellDate, cell }) => (
+          <Item
+            key={cellDate.getTime()}
+            size={size}
+            label={cell.label}
+            checked={cell.checked}
+            disabled={cell.disabled}
+            holiday={cell.holiday}
+            another={cell.another}
+            current={cell.current}
+            rangePosition={cell.rangePosition}
+            visible={!cell.another}
+            date={cellDate}
+            tabIndex={-1}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/MobilePeriodBlock/index.ts

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

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

@@ -0,0 +1,37 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/calendar.module' as calendar;
+
+$sizes: 's', 'm', 'l';
+
+$captionTypography: (
+  's': base.$sn-regular-body-s,
+  'm': base.$sn-regular-body-m,
+  'l': base.$sn-regular-body-l,
+);
+
+.block {
+  display: flex;
+  flex-direction: column;
+}
+
+.caption {
+  padding: base.$sn-primitive-dimension-6 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+  text-align: center;
+
+  @each $size in $sizes {
+    .block[data-size='#{$size}'] & {
+      @include base.composite-var($captionTypography, $size);
+    }
+  }
+}
+
+.grid {
+  display: grid;
+
+  @each $size in $sizes {
+    .block[data-size='#{$size}'] & {
+      @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'gridDate');
+    }
+  }
+}

package/src/helperComponents/MobilePeriodScroller/MobilePeriodScroller.tsx

@@ -0,0 +1,129 @@
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { CSSProperties, useCallback, useRef, useState } from 'react';
+
+import { Size, ViewMode } from '../../types';
+import { LevelConfig } from '../MobileCalendar/levelConfig';
+import { MobilePeriodBlock } from '../MobilePeriodBlock';
+import styles from './styles.module.scss';
+
+/**
+ * Первичная оценка высоты блока (px) по размеру — до первого замера. Взята по самому высокому блоку
+ * (6-недельный месяц) на каждом размере, чтобы оценка НЕ была меньше реального блока: иначе на первом
+ * кадре строки позиционируются с шагом меньше их высоты и налезают друг на друга (заметно на size L —
+ * FF-8654). Точная высота каждой строки уточняется `measureElement`; занижение исключено running-max'ом.
+ */
+const ESTIMATE_BY_SIZE: Record<Size, number> = {
+  s: 276,
+  m: 328,
+  l: 376,
+};
+
+export type MobilePeriodScrollerProps = {
+  level: ViewMode;
+  config: LevelConfig;
+  size: Size;
+  /** Дата, на период которой центрируется скролл (при маунте и смене). */
+  anchorDate: Date;
+  /** Выбор ячейки (tap). */
+  onSelect(date: Date): void;
+};
+
+/**
+ * Вертикальный скролл периодов (диапазон широкий — воспринимается безграничным). Скролл-контейнер — `@cloud-ru/ds-scroll` (DS-пилюля); его
+ * OverlayScrollbars-viewport берётся виртуализатором как scroll-элемент. Хост `@cloud-ru/ds-scroll` заполняет
+ * body sheet'а (`.scrollHost` height:100%), поэтому именно viewport (computed `overflow-y:auto`)
+ * резолвится drag-движком bottom-sheet'а как scrollable-ancestor — handoff drag-vs-scroll сохраняется.
+ * Диапазон фиксирован и симметричен (см. `levelConfig`), на маунте центрируется на `anchorDate`.
+ *
+ * Ключуется по `level` родителем — смена уровня даёт чистый remount (и реинициализацию OS).
+ */
+export function MobilePeriodScroller({ level, config, size, anchorDate, onSelect }: MobilePeriodScrollerProps) {
+  // `@cloud-ru/ds-scroll` (OverlayScrollbars) разрешает ref в viewport только после инициализации инстанса;
+  // до этого `innerScrollRef.current === null`, и виртуализатор рендерит пустой контейнер. Флаг
+  // поднимается из `onInitialized` и форсит повторное чтение scroll-элемента + `measure()`.
+  const innerScrollRef = useRef<HTMLElement | null>(null);
+  const [scrollElementReady, setScrollElementReady] = useState(false);
+  // Оценка высоты строки = МАКСИМУМ измеренных блоков, не «первый»: блоки разной высоты (5- и
+  // 6-недельные месяцы), и если оценить по 5-недельному, то более высокий 6-недельный, прокрученный
+  // в вид, на кадр налезал бы. Растёт по мере появления более высоких блоков; занижение исключено.
+  const [maxRowSize, setMaxRowSize] = useState<number | null>(null);
+  // Однократный ре-скролл к anchorDate после первого замера. Сбрасывается при смене anchorDate.
+  const didInitialScrollRef = useRef(false);
+
+  const virtualizer = useVirtualizer({
+    count: config.count,
+    getScrollElement: () => (scrollElementReady ? innerScrollRef.current : null),
+    estimateSize: () => maxRowSize ?? ESTIMATE_BY_SIZE[size],
+    overscan: 4,
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  const handleInitialized = useCallback(() => setScrollElementReady(true), []);
+
+  // Смена anchorDate (drill / level-up / Current) — центрируем заново.
+  useLayoutEffect(() => {
+    didInitialScrollRef.current = false;
+  }, [anchorDate]);
+
+  // Центрирование на anchorDate. Первичный `scrollToIndex` идёт по грубой оценке и «промахивается»,
+  // поэтому повторяется после первого замера (`maxRowSize`), затем фиксируется флагом — чтобы рост
+  // оценки при свободной прокрутке не дёргал пользователя обратно к anchorDate.
+  useLayoutEffect(() => {
+    if (!scrollElementReady || didInitialScrollRef.current) {
+      return;
+    }
+    virtualizer.measure();
+    // indexAt далёкой от origin даты может выйти за [0, count-1] — клампим.
+    const target = Math.max(0, Math.min(config.count - 1, config.indexAt(anchorDate)));
+    virtualizer.scrollToIndex(target, { align: 'start' });
+    if (maxRowSize !== null) {
+      didInitialScrollRef.current = true;
+    }
+  }, [scrollElementReady, anchorDate, config, virtualizer, maxRowSize]);
+
+  // Running-max реальных высот блоков в виду — точная оценка без «скачка» и без занижения (как в
+  // ListPrivate, но по максимуму, а не по первому блоку).
+  useLayoutEffect(() => {
+    if (!scrollElementReady) {
+      return;
+    }
+    const rows = innerScrollRef.current?.querySelectorAll<HTMLElement>('[data-index]');
+    if (!rows?.length) {
+      return;
+    }
+    let max = 0;
+    rows.forEach(row => {
+      max = Math.max(max, row.offsetHeight);
+    });
+    if (max > 0) {
+      setMaxRowSize(prev => (prev === null || max > prev ? max : prev));
+    }
+  }, [scrollElementReady, virtualItems.length]);
+
+  return (
+    <Scroll ref={innerScrollRef} className={styles.scrollHost} onInitialized={handleInitialized}>
+      <div className={styles.virtualContainer} style={{ height: virtualizer.getTotalSize() }}>
+        {virtualItems.map(virtualRow => (
+          <div
+            key={virtualRow.key}
+            data-index={virtualRow.index}
+            ref={virtualizer.measureElement}
+            className={styles.virtualRow}
+            style={{ '--virtual-row-offset': `${virtualRow.start}px` } as CSSProperties}
+          >
+            <MobilePeriodBlock
+              date={config.dateAt(virtualRow.index)}
+              level={level}
+              config={config}
+              size={size}
+              onSelect={onSelect}
+            />
+          </div>
+        ))}
+      </div>
+    </Scroll>
+  );
+}

package/src/helperComponents/MobilePeriodScroller/index.ts

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

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

@@ -0,0 +1,23 @@
+// Хост @cloud-ru/ds-scroll заполняет body sheet'а: его OverlayScrollbars-viewport владеет вертикальным
+// скроллом списка (DS-пилюля), а body (тоже overflow-y:auto) при height:100% хоста не переполняется,
+// поэтому drag-движок sheet'а резолвит именно viewport как ближайший scrollable-ancestor.
+.scrollHost {
+  width: 100%;
+  height: 100%;
+}
+
+// Виртуальный список: контейнер на полную высоту totalSize, строки абсолютным позиционированием.
+.virtualContainer {
+  position: relative;
+  width: 100%;
+}
+
+.virtualRow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  // Смещение строки виртуализатора приходит из JS переменной `--virtual-row-offset` (px).
+  transform: translateY(var(--virtual-row-offset, 0));
+
+  width: 100%;
+}

package/src/helperComponents/MobilePresetsScreen/MobilePresetsScreen.tsx

@@ -0,0 +1,11 @@
+import { PresetItem, Range } from '../../types';
+import { PeriodPresetsList } from '../PeriodPresetsList';
+
+export type MobilePresetsScreenProps = {
+  items: PresetItem[];
+  onSelect(range: Range): void;
+};
+
+export function MobilePresetsScreen({ items, onSelect }: MobilePresetsScreenProps) {
+  return <PeriodPresetsList items={items} onChange={onSelect} />;
+}

package/src/helperComponents/MobilePresetsScreen/index.ts

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