@cloud-ru/ds-calendar 1.0.0

package/src/helperComponents/MobileTimePickerDropdown/MobileTimePickerDropdown.tsx

@@ -0,0 +1,126 @@
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { extractSupportProps, useLayoutEffect, useUncontrolledProp, useValueControl } from '@cloud-ru/ds-utils';
+import { useCallback, useMemo, useRef } from 'react';
+
+import { TimePickerDropdownProps } from '../../components/TimePickerDropdown/TimePickerDropdown';
+import { SIZE, TEST_IDS } from '../../constants';
+import { useDateAndTime, useOpenTrigger, useTimeDrumHandlers } from '../../hooks';
+import { calendarLocale } from '../../locale';
+import { TimeValue } from '../../types';
+import { TimePickerDrum, TimePickerDrumHandle } from '../TimePickerDrum';
+
+/**
+ * Черновик + Apply модель: правки берутся в локальный черновик, коммитятся наружу только по Apply.
+ * Закрытие/свайп = отмена (убирает авто-коммит после каждого оседания).
+ */
+export function MobileTimePickerDropdown({
+  children,
+  size = SIZE.M,
+  value,
+  defaultValue,
+  onChangeValue,
+  showSeconds = true,
+  today: todayProp,
+  closeOnApply = false,
+  onApply,
+  onCurrent,
+  open: openProp,
+  onOpenChange,
+  closeOnPopstate,
+  'data-test-id': testId,
+  ...rest
+}: TimePickerDropdownProps) {
+  const { t } = calendarLocale.useTranslations();
+  const [open, setOpen] = useValueControl<boolean>({ value: openProp, defaultValue: false, onChange: onOpenChange });
+
+  const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+
+  // Закоммиченное значение (внутренний state в uncontrolled-режиме); наружу коммитится только по Apply.
+  const [committedValue, commit] = useUncontrolledProp<TimeValue | undefined>(value, defaultValue, onChangeValue);
+  const committedRef = useRef(committedValue);
+  committedRef.current = committedValue;
+
+  const { dateAndTime, setDateAndTime, onTimeChange, isTimeFilled } = useDateAndTime({ showSeconds, value: undefined });
+  const drumRef = useRef<TimePickerDrumHandle>(null);
+
+  // При каждом открытии пересобираем черновик из закоммиченного значения (отмена незакоммиченных правок прошлой сессии).
+  useLayoutEffect(() => {
+    if (open) {
+      const v = committedRef.current;
+      setDateAndTime(
+        v
+          ? {
+              year: undefined,
+              month: undefined,
+              day: undefined,
+              hours: v.hours,
+              minutes: v.minutes,
+              seconds: v.seconds,
+            }
+          : {},
+      );
+    }
+  }, [open, setDateAndTime]);
+
+  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+  const handleOpen = useCallback(() => setOpen(true), [setOpen]);
+
+  const drumHandlers = useTimeDrumHandlers(dateAndTime, onTimeChange);
+
+  const handleCurrent = useCallback(() => {
+    onTimeChange(today ?? new Date());
+    onCurrent?.();
+  }, [onCurrent, onTimeChange, today]);
+
+  const handleApply = useCallback(() => {
+    // Форсим оседание незавершённого жеста барабана перед коммитом, иначе быстрый флик→Apply
+    // закоммитил бы значение до флика (FF-8654, #2). Кнопка активна только при заполненном времени.
+    const flushed = drumRef.current?.flush() ?? {
+      hours: dateAndTime.hours ?? 0,
+      minutes: dateAndTime.minutes ?? 0,
+      seconds: dateAndTime.seconds ?? 0,
+    };
+    commit({
+      hours: flushed.hours,
+      minutes: flushed.minutes,
+      seconds: showSeconds ? flushed.seconds : 0,
+    });
+    onApply?.();
+
+    if (closeOnApply) {
+      handleClose();
+    }
+  }, [dateAndTime, showSeconds, commit, onApply, closeOnApply, handleClose]);
+
+  const trigger = useOpenTrigger(children, handleOpen);
+
+  return (
+    <>
+      {trigger}
+      <BottomSheet
+        withDividers={false}
+        open={open ?? false}
+        onClose={handleClose}
+        onBackButtonClick={handleClose}
+        title={t('time')}
+        closeOnPopstate={closeOnPopstate}
+        approveButton={{ label: t('apply'), disabled: !isTimeFilled(), onClick: handleApply }}
+        additionalButton={{ label: t('current'), view: 'function', onClick: handleCurrent }}
+        footerTestIds={{ approve: TEST_IDS.timePickerMobileApply, additional: TEST_IDS.timePickerMobileCurrent }}
+        content={
+          <TimePickerDrum
+            ref={drumRef}
+            size={size}
+            showSeconds={showSeconds}
+            hours={dateAndTime?.hours ?? 0}
+            minutes={dateAndTime?.minutes ?? 0}
+            seconds={dateAndTime?.seconds ?? 0}
+            {...drumHandlers}
+          />
+        }
+        {...extractSupportProps(rest)}
+        data-test-id={testId}
+      />
+    </>
+  );
+}

package/src/helperComponents/MobileTimePickerDropdown/index.ts

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

package/src/helperComponents/MobileTimeScreen/MobileTimeScreen.tsx

@@ -0,0 +1,38 @@
+import { Ref } from 'react';
+
+import { useCalendarContext, useTimeDrumHandlers } from '../../hooks';
+import { Size } from '../../types';
+import { TimePickerDrum, TimePickerDrumHandle } from '../TimePickerDrum';
+
+export type MobileTimeScreenProps = {
+  size: Size;
+  /** Ref барабана — для форс-коммита незавершённого жеста при уходе с экрана (см. FF-8654, комментарий #2). */
+  drumRef?: Ref<TimePickerDrumHandle>;
+};
+
+export function MobileTimeScreen({ size, drumRef }: MobileTimeScreenProps) {
+  const { dateAndTime, onTimeChange, showSeconds, isDateFilled, locale } = useCalendarContext();
+
+  const drumHandlers = useTimeDrumHandlers(dateAndTime, onTimeChange);
+
+  const selectedDateLabel =
+    isDateFilled() && dateAndTime
+      ? new Date(dateAndTime.year ?? 0, dateAndTime.month ?? 0, dateAndTime.day ?? 0).toLocaleDateString(
+          locale?.toString(),
+          { day: 'numeric', month: 'long', year: 'numeric' },
+        )
+      : undefined;
+
+  return (
+    <TimePickerDrum
+      ref={drumRef}
+      size={size}
+      showSeconds={showSeconds}
+      selectedDateLabel={selectedDateLabel}
+      hours={dateAndTime?.hours ?? 0}
+      minutes={dateAndTime?.minutes ?? 0}
+      seconds={dateAndTime?.seconds ?? 0}
+      {...drumHandlers}
+    />
+  );
+}

package/src/helperComponents/MobileTimeScreen/index.ts

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

package/src/helperComponents/MonthView/MonthView.tsx

@@ -0,0 +1,114 @@
+import { getDefaultItemId } from '@cloud-ru/ds-list';
+import { KeyboardEventHandler, useCallback, useEffect, useRef } from 'react';
+
+import { CALENDAR_MODE } from '../../constants';
+import { useCalendarContext, useGrid } from '../../hooks';
+import { getDateLabel, isTheSameDate, isTheSameMonth } from '../../utils';
+import { Grid } from '../Grid';
+import { buildMonthGrid } from './utils';
+
+export function MonthView() {
+  const {
+    mode,
+    viewMode,
+    dateAndTime,
+    setValue,
+    preselectedRange,
+    startPreselect,
+    continuePreselect,
+    completePreselect,
+    restartPreselect,
+    onDateChange,
+    locale,
+    hoursKeyboardNavigationRef,
+  } = useCalendarContext();
+
+  const enterFocusTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(enterFocusTimeoutRef.current);
+    },
+    [],
+  );
+
+  const onDayKeyDown: KeyboardEventHandler = useCallback(
+    e => {
+      if (mode !== CALENDAR_MODE.DateTime || viewMode !== 'month') {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Tab':
+          if (!e.shiftKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            hoursKeyboardNavigationRef.current?.focusItem(getDefaultItemId(dateAndTime?.hours ?? 0));
+          }
+
+          break;
+        case 'Enter':
+          window.clearTimeout(enterFocusTimeoutRef.current);
+          enterFocusTimeoutRef.current = setTimeout(() => {
+            enterFocusTimeoutRef.current = undefined;
+            hoursKeyboardNavigationRef.current?.focusItem(getDefaultItemId(dateAndTime?.hours ?? 0));
+          }, 0);
+          break;
+        default:
+          break;
+      }
+    },
+    [dateAndTime?.hours, hoursKeyboardNavigationRef, mode, viewMode],
+  );
+
+  const buildGrid = useCallback((date: Date) => buildMonthGrid(date, locale), [locale]);
+
+  const onSelect = useCallback(
+    (date: Date) => {
+      if (mode === CALENDAR_MODE.DateTime) {
+        onDateChange(date);
+        return;
+      }
+
+      if (mode === CALENDAR_MODE.DateRange) {
+        preselectedRange ? completePreselect(date) : startPreselect(date);
+        return;
+      }
+
+      if (mode === CALENDAR_MODE.Date) {
+        setValue([date, date]);
+      }
+    },
+    [completePreselect, mode, onDateChange, preselectedRange, setValue, startPreselect],
+  );
+
+  const onPreselect = useCallback(
+    (date: Date) => {
+      if (preselectedRange) {
+        continuePreselect(date);
+      }
+    },
+    [continuePreselect, preselectedRange],
+  );
+
+  const onLeave = useCallback(() => {
+    if (preselectedRange) {
+      restartPreselect();
+    }
+  }, [preselectedRange, restartPreselect]);
+
+  const grid = useGrid({
+    buildGrid,
+    isTheSameItem: isTheSameDate,
+    isInPeriod: isTheSameMonth,
+    getItemLabel: getDateLabel,
+
+    onSelect,
+    onPreselect,
+    onLeave,
+
+    onKeyDown: onDayKeyDown,
+  });
+
+  return <Grid grid={grid} />;
+}

package/src/helperComponents/MonthView/constants.ts

@@ -0,0 +1,3 @@
+export const WEEK_STARTS_WITH_MONDAY = [1, 2, 3, 4, 5, 6, 0];
+
+export const WEEK_STARTS_WITH_SUNDAY = [0, 1, 2, 3, 4, 5, 6];

package/src/helperComponents/MonthView/index.ts

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

package/src/helperComponents/MonthView/utils.ts

@@ -0,0 +1,25 @@
+import { GRID_SIZE, VIEW_MODE } from '../../constants';
+import { BaseGrid, BaseGridItem } from '../../types';
+import { getStartOfWeek } from '../../utils';
+import { WEEK_STARTS_WITH_MONDAY, WEEK_STARTS_WITH_SUNDAY } from './constants';
+
+export const buildMonthGrid = (date: Date, locale: Intl.Locale): BaseGrid => {
+  const result: BaseGrid = [];
+  const week = getStartOfWeek(locale) === 0 ? WEEK_STARTS_WITH_SUNDAY : WEEK_STARTS_WITH_MONDAY;
+  const startGap = week.indexOf(date.getDay());
+  let currentDate = new Date(date.getFullYear(), date.getMonth(), 1 - startGap);
+  const { rows } = GRID_SIZE[VIEW_MODE.Month];
+
+  for (let i = 0; i < rows; i++) {
+    const row: BaseGridItem[] = [];
+
+    for (let j = 0; j < week.length; j++) {
+      row.push({ date: currentDate, address: [i, j] });
+      currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1);
+    }
+
+    result.push(row);
+  }
+
+  return result;
+};

package/src/helperComponents/NavButton/NavButton.tsx

@@ -0,0 +1,109 @@
+import { Button } from '@cloud-ru/ds-button';
+import {
+  extractSupportProps,
+  focusWithoutScroll,
+  preventScrollOnArrowKeys,
+  useLayoutEffect,
+  WithSupportProps,
+} from '@cloud-ru/ds-utils';
+import { JSX, KeyboardEvent, useCallback, useImperativeHandle, useRef } from 'react';
+
+import { useCalendarContext } from '../../hooks';
+
+export type ButtonProps = WithSupportProps<{
+  focusName?: string;
+  label?: string;
+  onClick?(): void;
+  onLeftArrowKeyDown?(): void;
+  onRightArrowKeyDown?(): void;
+  onDownArrowKeyDown?(): void;
+  tabIndex?: 0 | -1;
+  disabled?: boolean;
+  icon?: JSX.Element;
+  useNavigationStartRef?: boolean;
+}>;
+
+export function NavButton({
+  label,
+  icon,
+  onClick,
+  focusName,
+  tabIndex,
+  onLeftArrowKeyDown,
+  onRightArrowKeyDown,
+  onDownArrowKeyDown,
+  disabled,
+  useNavigationStartRef,
+  'aria-label': ariaLabel,
+  ...rest
+}: ButtonProps) {
+  const ref = useRef<HTMLButtonElement | null>(null);
+  const { size, focus, setFocus, onFocusLeave, navigationStartRef } = useCalendarContext();
+
+  useLayoutEffect(() => {
+    if (focus && focus === focusName) {
+      focusWithoutScroll(ref.current);
+    }
+  }, [focus, focusName]);
+
+  const onKeyDownHandler = useCallback(
+    (e: KeyboardEvent<HTMLButtonElement>) => {
+      // Стрелки навигации по календарю гасим: иначе нативное поведение прокручивает страницу
+      // (фокус на header-кнопке, событие уходит за календарь).
+      preventScrollOnArrowKeys(e);
+
+      switch (e.key) {
+        case 'ArrowLeft':
+          onLeftArrowKeyDown?.();
+          break;
+        case 'ArrowRight':
+          onRightArrowKeyDown?.();
+          break;
+        case 'ArrowDown':
+          onDownArrowKeyDown?.();
+          break;
+        case 'ArrowUp':
+          onFocusLeave?.('prev');
+          break;
+        case 'Tab':
+          if (e.shiftKey) {
+            onFocusLeave?.('prev');
+          }
+          break;
+        default:
+          break;
+      }
+    },
+    [onDownArrowKeyDown, onFocusLeave, onLeftArrowKeyDown, onRightArrowKeyDown],
+  );
+
+  useImperativeHandle(
+    useNavigationStartRef && navigationStartRef ? navigationStartRef : null,
+    () => ({
+      focus: () => {
+        focusWithoutScroll(ref.current);
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Button
+      label={label}
+      view='function'
+      appearance='neutral'
+      icon={icon}
+      iconPosition='after'
+      size={size}
+      tabIndex={tabIndex}
+      innerRef={ref}
+      onClick={onClick}
+      onKeyDown={onKeyDownHandler}
+      onFocus={() => setFocus(focusName)}
+      onBlur={() => setFocus(undefined)}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      {...extractSupportProps(rest)}
+    />
+  );
+}

package/src/helperComponents/NavButton/index.ts

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

package/src/helperComponents/PeriodPresetsList/PeriodPresetsList.tsx

@@ -0,0 +1,44 @@
+import { List, ListProps } from '@cloud-ru/ds-list';
+import { useMemo } from 'react';
+
+import { useCalendarContext } from '../../hooks';
+import { PresetItem, Range } from '../../types';
+
+export type PresetsListProps = {
+  /** Действие при выборе пресета */
+  onChange(range: Range): void;
+  /** Список пресетов */
+  items: PresetItem[];
+  /** CSS-класс */
+  className?: string;
+};
+
+export function PeriodPresetsList({ items, onChange, className }: PresetsListProps) {
+  const { size } = useCalendarContext();
+
+  const listItems: ListProps['items'] = useMemo(
+    () =>
+      items.map(item => ({
+        id: item.id,
+        content: {
+          label: item.label,
+        },
+        onClick() {
+          onChange(item.range);
+        },
+        checked: false,
+      })),
+    [items, onChange],
+  );
+
+  return (
+    <List
+      className={className}
+      size={size}
+      items={listItems}
+      scroll
+      selection={{ mode: 'single', value: undefined }}
+      hasListInFocusChain={false}
+    />
+  );
+}

package/src/helperComponents/PeriodPresetsList/index.ts

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

package/src/helperComponents/PeriodPresetsList/utils.ts

@@ -0,0 +1,63 @@
+import { calendarLocale } from '../../locale';
+import { PresetItem, Range } from '../../types';
+
+type TFunction = ReturnType<typeof calendarLocale.useTranslations>['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 monthsAgo = (n: number): Date => {
+    const d = new Date(now);
+    d.setMonth(d.getMonth() - n);
+    return d;
+  };
+
+  const yearsAgo = (n: number): Date => {
+    const d = new Date(now);
+    d.setFullYear(d.getFullYear() - n);
+    return d;
+  };
+
+  const calculatePeriodUpToNow = (limit: Date): Range => (nowInMs > limit.getTime() ? [limit, now] : [now, limit]);
+
+  return [
+    {
+      label: t('defaultPresets.lastWeek'),
+      id: 'week',
+      range: calculatePeriodUpToNow(new Date(now.getTime() + dayInMs * -7)),
+    },
+    {
+      label: t('defaultPresets.lastTwoWeeks'),
+      id: 'twoWeeks',
+      range: calculatePeriodUpToNow(new Date(now.getTime() + dayInMs * -14)),
+    },
+    {
+      label: t('defaultPresets.lastMonth'),
+      id: 'month',
+      range: calculatePeriodUpToNow(monthsAgo(1)),
+    },
+    {
+      label: t('defaultPresets.lastQuarter'),
+      id: 'quarter',
+      range: calculatePeriodUpToNow(monthsAgo(3)),
+    },
+    {
+      label: t('defaultPresets.lastThird'),
+      id: 'fourMonths',
+      range: calculatePeriodUpToNow(monthsAgo(4)),
+    },
+    {
+      label: t('defaultPresets.lastYear'),
+      id: 'year',
+      range: calculatePeriodUpToNow(yearsAgo(1)),
+    },
+    {
+      label: t('defaultPresets.lastTwoYears'),
+      id: 'twoYears',
+      range: calculatePeriodUpToNow(yearsAgo(2)),
+    },
+  ];
+}

package/src/helperComponents/TimeList/TimeList.tsx

@@ -0,0 +1,77 @@
+import { BaseItemProps, getDefaultItemId, ItemProps, List, ListProps } from '@cloud-ru/ds-list';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import { createRef, RefObject, useImperativeHandle, useMemo } from 'react';
+
+import { useCalendarContext } from '../../hooks';
+import { OnKeyDownGetter } from '../../types';
+import styles from './styles.module.scss';
+
+export type TimeListProps = WithSupportProps<{
+  numberOfItems: number;
+  value?: number;
+  onChange(value: number): void;
+  className?: string;
+  onKeyDownGetter?: OnKeyDownGetter;
+  keyboardNavigationRef?: ListProps['keyboardNavigationRef'];
+  navigationStartRef?: RefObject<{ focus(): void }>;
+}>;
+
+export function TimeList({
+  numberOfItems,
+  value,
+  onChange,
+  className,
+  onKeyDownGetter,
+  keyboardNavigationRef,
+  navigationStartRef,
+  'data-test-id': dataTestId,
+  ...rest
+}: TimeListProps) {
+  const { size } = useCalendarContext();
+
+  const itemsRef = useMemo(
+    () => new Array(numberOfItems).fill(null).map(() => createRef<HTMLElement>()),
+    [numberOfItems],
+  );
+
+  useImperativeHandle(
+    navigationStartRef,
+    () => ({
+      focus: () => {
+        keyboardNavigationRef?.current?.focusItem(getDefaultItemId(value ? value : 0));
+      },
+    }),
+    [keyboardNavigationRef, value],
+  );
+
+  const items = useMemo<ItemProps[]>(
+    () =>
+      new Array(numberOfItems).fill(undefined).map((_, index) => ({
+        id: index,
+        content: (
+          <span className={styles.label} data-size={size}>
+            {String(index).padStart(2, '0')}
+          </span>
+        ),
+        'data-test-id': `${dataTestId}-${index}`,
+        onKeyDown: onKeyDownGetter?.(index),
+        itemRef: itemsRef[index] as BaseItemProps['itemRef'],
+      })),
+    [dataTestId, itemsRef, numberOfItems, onKeyDownGetter, size],
+  );
+
+  return (
+    <List
+      {...extractSupportProps(rest)}
+      size={size}
+      items={items}
+      scroll
+      keyboardNavigationRef={keyboardNavigationRef}
+      selection={{ mode: 'single', value, onChange: id => onChange(Number(id)) }}
+      className={className}
+      hasListInFocusChain={false}
+      scrollToSelectedItem
+      marker={false}
+    />
+  );
+}

package/src/helperComponents/TimeList/index.ts

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

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

@@ -0,0 +1,19 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$sizes: 's', 'm', 'l';
+
+// Подпись значения времени. Сам элемент списка (`@cloud-ru/ds-list`) рисует hover/selected на всю ширину
+// колонки (зелёная `activatedOnBackground` у выбранного) — поэтому здесь только типографика числа,
+// без собственного интерактивного контейнера (иначе серый hover был бы узким и смещённым).
+.label {
+  // Блочный, чтобы заполнить ширину `.content` (`@cloud-ru/ds-list`) — иначе инлайн-span прижимается влево.
+  display: block;
+  width: 100%;
+  text-align: center;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', $size);
+    }
+  }
+}