@cloud-ru/ds-calendar 1.0.0

package/src/helperComponents/Header/constants.ts

@@ -0,0 +1,5 @@
+export const LEVEL_BUTTON_FOCUS_NAME = 'level';
+
+export const NEXT_PERIOD_BUTTON_FOCUS_NAME = 'next';
+
+export const PREV_PERIOD_BUTTON_FOCUS_NAME = 'prev';

package/src/helperComponents/Header/hooks.ts

@@ -0,0 +1,22 @@
+import { VIEW_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { getMonthName } from '../../utils';
+
+export function usePeriodName(): string {
+  const { viewDate, viewMode, locale } = useCalendarContext();
+
+  switch (viewMode) {
+    case VIEW_MODE.Month: {
+      const year = viewDate.getFullYear();
+      return `${getMonthName(viewDate, locale)} ${year}`;
+    }
+    case VIEW_MODE.Year:
+      return viewDate.getFullYear().toString();
+    case VIEW_MODE.Decade: {
+      const decadeStart = viewDate.getFullYear();
+      return `${decadeStart}-${decadeStart + 9}`;
+    }
+    default:
+      return '';
+  }
+}

package/src/helperComponents/Header/index.ts

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

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

@@ -0,0 +1,25 @@
+@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';
+
+.header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  align-self: stretch;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'header');
+    }
+  }
+}
+
+.scrollControlWrapper {
+  display: flex;
+  align-items: center;
+}

package/src/helperComponents/Header/utils.ts

@@ -0,0 +1,15 @@
+import { VIEW_MODE } from '../../constants';
+import { ViewMode } from '../../types';
+import { getDecadeShift, getYearShift } from '../../utils';
+
+export const getShift = (referenceDate: Date, viewDate: Date, currentViewLevel: ViewMode): number => {
+  switch (currentViewLevel) {
+    case VIEW_MODE.Month:
+      return getYearShift(referenceDate, viewDate);
+    case VIEW_MODE.Year:
+      return getDecadeShift(referenceDate, viewDate);
+    case VIEW_MODE.Decade:
+    default:
+      return 0;
+  }
+};

package/src/helperComponents/Item/Item.tsx

@@ -0,0 +1,175 @@
+import { focusWithoutScroll, useLayoutEffect } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useRef } from 'react';
+
+import { AUTOFOCUS, RANGE_POSITION } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { Cell, Size } from '../../types';
+import { stringifyAddress } from '../../utils';
+import { useKeyboardFocus } from './hooks';
+import styles from './styles.module.scss';
+
+type RequiredCellProps = Pick<Cell, 'label'>;
+type OptionalCellProps = Partial<Omit<Cell, 'label'>>;
+
+export type CalendarItemProps = RequiredCellProps &
+  OptionalCellProps & {
+    /**
+     * Сегмент для `data-test-id` (`getTestId(segment)`). По умолчанию `item`;
+     * подписи дней недели в `WeekRow` используют `header-item`.
+     */
+    testIdSegment?: string;
+    /** Размер */
+    size: Size;
+    /**
+     * Отображается ли в интерфейсе (ячейка без содержимого для мобильной сетки)
+     * @default true
+     */
+    visible?: boolean;
+    /** CSS-класс */
+    className?: string;
+  };
+
+export function Item({
+  label,
+  testIdSegment,
+  size,
+  checked,
+  rangePosition = RANGE_POSITION.Out,
+  disabled,
+  holiday,
+  another,
+  current,
+  visible = true,
+  className,
+  tabIndex,
+  address,
+  date,
+  onSelect,
+  onPreselect,
+  onLeave,
+  onKeyDown,
+}: CalendarItemProps) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const { focus, setFocus, getTestId } = useCalendarContext();
+
+  const dataTestId = getTestId(testIdSegment ?? 'item');
+
+  const navigationEnabled = Boolean(address);
+
+  const keyDownHandler = useKeyboardFocus({
+    address: address ?? [0, 0],
+    onKeyDown,
+    enabled: navigationEnabled,
+  });
+
+  useLayoutEffect(() => {
+    if (!address) {
+      return;
+    }
+    if (stringifyAddress(address) === focus) {
+      // preventScroll: ячейка всегда видна в открытом календаре; без него браузер при
+      // программном focus прокручивает страницу к ячейке (виден как «скролл от стрелок»).
+      focusWithoutScroll(ref.current);
+    }
+  }, [focus, address]);
+
+  useLayoutEffect(() => {
+    if (!address) {
+      return;
+    }
+    if (tabIndex === 0 && focus === AUTOFOCUS) {
+      focusWithoutScroll(ref.current);
+    }
+  }, [focus, tabIndex, address]);
+
+  const attributes = {
+    'data-size': size,
+    'data-visible': visible || undefined,
+    'data-checked': checked || undefined,
+    'data-disabled': disabled || undefined,
+    'data-another': another || undefined,
+    'data-holiday': holiday || undefined,
+    'data-current': current || undefined,
+    'data-range-position': rangePosition,
+  };
+
+  const handleSelect = () => {
+    if (!disabled && date && onSelect) {
+      onSelect(date);
+    }
+  };
+
+  const showMarker = !disabled && !another && visible && current;
+
+  return (
+    <div className={cn(styles.root, className)} {...attributes}>
+      <button
+        type='button'
+        aria-disabled={disabled}
+        className={styles.container}
+        onClick={handleSelect}
+        onMouseEnter={() => !disabled && date && onPreselect?.(date)}
+        onFocus={() => {
+          if (address) {
+            setFocus(stringifyAddress(address));
+          }
+          if (!disabled && date) {
+            onPreselect?.(date);
+          }
+        }}
+        onMouseLeave={onLeave}
+        onBlur={() => {
+          if (address) {
+            setFocus(undefined);
+          }
+          onLeave?.();
+        }}
+        onKeyDown={keyDownHandler}
+        ref={ref}
+        data-disabled={attributes['data-disabled']}
+        data-another={attributes['data-another']}
+        data-checked={attributes['data-checked']}
+        data-range-position={attributes['data-range-position']}
+        {...(dataTestId ? { 'data-test-id': dataTestId } : {})}
+        tabIndex={tabIndex}
+      >
+        {/* Ячейки соседнего месяца (`another`), попавшие в выбранный период, тоже получают
+            activated-заливку — иначе полоса диапазона обрывается на границе месяца. Одиночный
+            выбор (rangePosition='out') у соседнего месяца остаётся без заливки. */}
+        <div
+          className={styles.stateLayer}
+          data-state={
+            checked && (!another || rangePosition !== RANGE_POSITION.Out)
+              ? 'activatedOnBackground'
+              : 'emptyNeutralOnBackground'
+          }
+        />
+        <div className={styles.labelWrapper}>
+          <span
+            className={styles.label}
+            data-disabled={attributes['data-disabled']}
+            data-another={attributes['data-another']}
+            data-checked={attributes['data-checked']}
+            data-range-position={attributes['data-range-position']}
+            data-holiday={attributes['data-holiday']}
+          >
+            {label}
+          </span>
+          {showMarker && (
+            <div className={styles.marker}>
+              <div
+                className={styles.markerLine}
+                data-checked={attributes['data-checked']}
+                data-range-position={attributes['data-range-position']}
+                data-holiday={attributes['data-holiday']}
+              />
+            </div>
+          )}
+        </div>
+        <div className={styles.focusLayer} />
+      </button>
+    </div>
+  );
+}

package/src/helperComponents/Item/hooks.ts

@@ -0,0 +1,91 @@
+import { preventScrollOnArrowKeys } from '@cloud-ru/ds-utils';
+import { KeyboardEvent, KeyboardEventHandler, useCallback } from 'react';
+
+import { CALENDAR_MODE, GRID_SIZE, VIEW_MODE } from '../../constants';
+import { useCalendarContext } from '../../hooks';
+import { stringifyAddress } from '../../utils';
+
+/**
+ * Параметры хука {@link useKeyboardFocus}.
+ */
+type UseKeyboardFocusProps = {
+  /** Индекс строки и столбца `[row, column]` ячейки в сетке текущего представления (`viewMode`). */
+  address: [number, number];
+  /** Дополнительный обработчик клавиш; вызывается до встроенной навигации по сетке. */
+  onKeyDown?: KeyboardEventHandler;
+  /**
+   * Включить встроенную навигацию (стрелки, Tab по правилам контекста календаря).
+   * При `false` остаётся только вызов `onKeyDown` — например, если у ячейки нет адреса в сетке и перемещаться стрелками некуда.
+   */
+  enabled: boolean;
+};
+
+/**
+ * Возвращает мемоизированный обработчик `onKeyDown` для клавиатурной навигации по ячейкам сетки календаря.
+ *
+ * Сначала вызывается переданный `onKeyDown` (если есть). Затем при `enabled === true` обрабатываются:
+ * `ArrowLeft` / `ArrowRight` — сдвиг фокуса по колонкам в пределах текущего `viewMode`;
+ * `ArrowUp` / `ArrowDown` — сдвиг по строкам; на границе сетки меняется `viewShift` и фокус переносится на противоположную строку той же колонки;
+ * `Tab` без Shift — в режимах, отличных от месячного вида в `CALENDAR_MODE.DateTime`, вызывается `onFocusLeave('next')` для выхода из сетки.
+ *
+ * @param props.address Координаты ячейки `[row, column]` в сетке текущего представления.
+ * @param props.onKeyDown Дополнительный обработчик клавиш; выполняется до встроенной навигации.
+ * @param props.enabled При `false` встроенная навигация стрелками и Tab не выполняется (остаётся только вызов `onKeyDown`).
+ * @returns Обработчик `KeyboardEvent<HTMLButtonElement>` для привязки к ячейке.
+ */
+export function useKeyboardFocus({ address: [row, column], onKeyDown, enabled = true }: UseKeyboardFocusProps) {
+  const { viewMode, viewShift, setViewShift, setFocus, onFocusLeave, mode } = useCalendarContext();
+
+  const { rows, columns } = GRID_SIZE[viewMode];
+
+  return useCallback(
+    (e: KeyboardEvent<HTMLButtonElement>) => {
+      onKeyDown?.(e);
+
+      if (!enabled) {
+        return;
+      }
+
+      // Стрелки навигации по сетке гасим: без preventDefault нативное поведение прокручивает
+      // страницу (фокус в ячейке-кнопке, событие иначе уходит за календарь).
+      preventScrollOnArrowKeys(e);
+
+      switch (e.key) {
+        case 'ArrowLeft':
+          if (column) {
+            setFocus(stringifyAddress([row, column - 1]));
+          }
+          return;
+        case 'ArrowRight':
+          if (column < columns - 1) {
+            setFocus(stringifyAddress([row, column + 1]));
+          }
+          return;
+        case 'ArrowUp':
+          if (row) {
+            setFocus(stringifyAddress([row - 1, column]));
+          } else {
+            setViewShift(viewShift - 1);
+            setFocus(stringifyAddress([rows - 1, column]));
+          }
+          return;
+        case 'ArrowDown':
+          if (row < rows - 1) {
+            setFocus(stringifyAddress([row + 1, column]));
+          } else {
+            setViewShift(viewShift + 1);
+            setFocus(stringifyAddress([0, column]));
+          }
+          return;
+        case 'Tab':
+          if (!e.shiftKey && (mode !== CALENDAR_MODE.DateTime || viewMode !== VIEW_MODE.Month)) {
+            onFocusLeave?.('next');
+          }
+          return;
+        default:
+        // do nothing
+      }
+    },
+    [column, columns, enabled, mode, onFocusLeave, onKeyDown, row, rows, setFocus, setViewShift, viewMode, viewShift],
+  );
+}

package/src/helperComponents/Item/index.ts

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

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

@@ -0,0 +1,284 @@
+@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;
+@use '@cloud-ru/ds-materials' as m;
+
+$sizes: 's', 'm', 'l';
+
+// For reference only
+$rangePositions: 'out', 'start', 'in', 'end', 'start-end'; // data-range-position
+
+.stateLayer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  visibility: initial;
+}
+
+.focusLayer {
+  position: absolute;
+  inset: 0;
+
+  display: none;
+
+  width: 100%;
+  height: 100%;
+  // Ячейка календаря — не полеподобный контрол: в мастере stroke 2 INSIDE,
+  // `focusLine/field` (3px) сюда не относится.
+  border: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
+  border-radius: 0;
+}
+
+// TODO FF-8727: соседние ячейки наезжают друг на друга — фон checked/hover-ячейки
+// перекрывает соседнюю (воспроизводится в доке, платформа Spacious).
+.container {
+  position: relative;
+
+  display: flex;
+  flex: 1 0 0;
+  align-items: center;
+  align-self: stretch;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0 solid transparent;
+
+  background-color: transparent;
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    background-color: base.$sn-theme-color-neutral-background;
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    .focusLayer {
+      display: initial;
+    }
+  }
+
+  &:not([data-disabled]) {
+    cursor: pointer;
+
+    @include m.has-state-layer-as-child(#{stateLayer});
+
+    &:not([data-another]) {
+      &[data-checked] {
+        background-color: base.$sn-theme-color-primary-accent;
+      }
+
+      &[data-range-position='in'] {
+        background-color: transparent;
+      }
+    }
+
+    // Cap'ы диапазона (start/end/start-end), попавшие на ячейку соседнего месяца, тоже
+    // заливаются accent'ом, чтобы период визуально продолжался за границу месяца. In-range
+    // соседнего месяца остаётся прозрачным — подсветку рисует state-layer (см. Item.tsx).
+    &[data-another][data-checked] {
+      &[data-range-position='start'],
+      &[data-range-position='end'],
+      &[data-range-position='start-end'] {
+        background-color: base.$sn-theme-color-primary-accent;
+      }
+    }
+  }
+}
+
+.label {
+  text-align: center;
+
+  &[data-another] {
+    color: base.$sn-theme-color-available-version-textTertiary;
+
+    // Cap диапазона на ячейке соседнего месяца залит accent'ом — текст белый для контраста.
+    &[data-checked]:not([data-range-position='in'], [data-range-position='out']) {
+      color: base.$sn-theme-color-available-onComplementary;
+    }
+  }
+
+  &[data-disabled] {
+    color: base.$sn-theme-color-available-version-textDisabled;
+  }
+
+  &:not([data-disabled], [data-another]) {
+    &[data-checked] {
+      &:not([data-range-position='in']) {
+        color: base.$sn-theme-color-available-onComplementary;
+      }
+
+      &[data-range-position='in'] {
+        color: base.$sn-theme-color-available-version-textMain;
+
+        &[data-holiday] {
+          color: base.$sn-theme-color-red-text;
+        }
+      }
+    }
+
+    &:not([data-checked]) {
+      color: base.$sn-theme-color-available-version-textMain;
+
+      &[data-holiday] {
+        color: base.$sn-theme-color-red-text;
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    &:not([data-disabled], [data-another]) {
+      &:not([data-holiday]) {
+        color: base.$sn-theme-color-available-version-textMain;
+      }
+
+      &[data-holiday] {
+        color: base.$sn-theme-color-red-text;
+      }
+    }
+  }
+}
+
+.marker {
+  position: absolute;
+  right: 0;
+  bottom: -2px;
+  left: 0;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.markerLine {
+  flex-shrink: 0;
+
+  &[data-holiday] {
+    background-color: base.$sn-theme-color-red-accent;
+  }
+
+  &[data-checked] {
+    &:not([data-range-position='in']) {
+      background-color: base.$sn-theme-color-primary-onAccent;
+    }
+
+    &[data-range-position='in'] {
+      background-color: base.$sn-theme-color-primary-accent;
+
+      &[data-holiday] {
+        background-color: base.$sn-theme-color-red-accent;
+      }
+    }
+  }
+
+  &:not([data-checked]) {
+    background-color: base.$sn-theme-color-primary-accent;
+
+    &[data-holiday] {
+      background-color: base.$sn-theme-color-red-accent;
+    }
+  }
+}
+
+.labelWrapper {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  &:not([data-visible]) {
+    pointer-events: none;
+    visibility: hidden;
+
+    .stateLayer {
+      display: none;
+    }
+  }
+
+  &[data-disabled] {
+    .stateLayer {
+      display: none;
+    }
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'itemCalendar');
+
+      .container {
+        @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'itemCalendar', 'container');
+
+        $borderRadius: base.simple-var(calendar.$calendar, 'anatomy', 'size', $size, 'itemCalendar', 'container', 'border-radius');
+
+        &[data-range-position='start'] {
+          border-radius: $borderRadius 0 0 $borderRadius;
+        }
+
+        &[data-range-position='in'] {
+          border-radius: 0;
+        }
+
+        &[data-range-position='end'] {
+          border-radius: 0 $borderRadius $borderRadius 0;
+        }
+
+        &[data-range-position='out'],
+        &[data-range-position='start-end'] {
+          border-radius: $borderRadius;
+        }
+      }
+
+      .labelWrapper {
+        @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'itemCalendar', 'container', 'labelWrapper');
+      }
+
+      .label {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', $size);
+      }
+
+      .markerLine {
+        @include base.composite-var(calendar.$calendar, 'anatomy', 'size', $size, 'itemCalendar', 'container', 'labelWrapper', 'marker');
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled], [data-another]) {
+      .container {
+        background-color: transparent;
+      }
+
+      .label {
+        &:not([data-holiday]) {
+          color: base.$sn-theme-color-available-version-textMain;
+        }
+
+        &[data-holiday] {
+          color: base.$sn-theme-color-red-text;
+        }
+      }
+
+      .markerLine {
+        &:not([data-holiday]) {
+          background-color: base.$sn-theme-color-primary-accent;
+        }
+
+        &[data-holiday] {
+          background-color: base.$sn-theme-color-red-accent;
+        }
+      }
+    }
+  }
+}
+