@cloud-ru/ds-fields 1.0.0

package/src/components/FieldDate/mask.ts

@@ -0,0 +1,123 @@
+import { DATE_MODE } from './constants';
+
+/** Маска поддерживает только `date` / `date-time` (range собирается из двух одиночных масок). */
+export type MaskMode = typeof DATE_MODE.Date | typeof DATE_MODE.DateTime;
+
+const DATE_LEN = 8;
+const DATE_TIME_LEN = 12;
+const DATE_TIME_SECONDS_LEN = 14;
+
+// Плейсхолдер по умолчанию — RU (ДД.ММ.ГГГГ), как в легаси @snack-uikit/fields и Figma.
+// Структура парсинга остаётся числовой (DD/MM/YYYY[/HH/mm/ss]) — плейсхолдер только визуальный.
+const RU_DATE = 'ДД.ММ.ГГГГ';
+// Время отделяется запятой (паритет с легаси `ДД.ММ.ГГГГ, чч:мм:сс`).
+const TIME_SEPARATOR = ', ';
+
+function totalLen(mode: MaskMode, showSeconds: boolean): number {
+  if (mode === DATE_MODE.Date) {
+    return DATE_LEN;
+  }
+
+  return showSeconds ? DATE_TIME_SECONDS_LEN : DATE_TIME_LEN;
+}
+
+export function getMaskString(mode: MaskMode, showSeconds = true): string {
+  if (mode === DATE_MODE.Date) {
+    return RU_DATE;
+  }
+
+  return showSeconds ? `${RU_DATE}${TIME_SEPARATOR}чч:мм:сс` : `${RU_DATE}${TIME_SEPARATOR}чч:мм`;
+}
+
+type Segment = { len: number; max: number; separator: string };
+
+function buildSegments(mode: MaskMode, showSeconds: boolean): Segment[] {
+  const base: Segment[] = [
+    { len: 2, max: 31, separator: '' }, // day
+    { len: 2, max: 12, separator: '.' }, // month
+    { len: 4, max: 9999, separator: '.' }, // year
+  ];
+  if (mode === DATE_MODE.DateTime) {
+    base.push({ len: 2, max: 23, separator: TIME_SEPARATOR }); // hour
+    base.push({ len: 2, max: 59, separator: ':' }); // minute
+    if (showSeconds) {
+      base.push({ len: 2, max: 59, separator: ':' }); // second
+    }
+  }
+  return base;
+}
+
+/**
+ * Принимает любую строку, оставляет только цифры и форматирует под `DD.MM.YYYY[, HH:mm[:ss]]`.
+ *
+ * Две UX-механики, призванные не дать пользователю набрать невалидный сегмент:
+ * 1. **Авто-prefix `0`**: если первая цифра 2-цифрового сегмента превышает максимально допустимую
+ *    «десятку» (`day` → > 3, `month` → > 1, `hour` → > 2, `minute`/`second` → > 5), цифра трактуется
+ *    как «единицы» и в начало сегмента добавляется ноль. Пример: `5` для day → `05.`,
+ *    фокус автоматически уезжает на следующий сегмент.
+ * 2. **Clamp полной двойки**: если набрано две цифры и значение превышает `max` сегмента —
+ *    значение прижимается к верхней границе. Пример: `55` для day → `31`, `99` для month → `12`.
+ */
+export function formatMask(input: string, mode: MaskMode, showSeconds = true): string {
+  const maxLen = totalLen(mode, showSeconds);
+  const segments = buildSegments(mode, showSeconds);
+  let stream = input.replace(/\D/g, '').slice(0, maxLen);
+  let out = '';
+  for (const seg of segments) {
+    if (stream.length === 0) break;
+    out += seg.separator;
+    // Auto-zero-prefix: если первая цифра > floor(max/10), сегмент не может начаться этой цифрой —
+    // считаем её цифрой «единиц» и дописываем `0` перед ней.
+    if (seg.len === 2) {
+      const first = Number(stream[0]);
+      const firstMax = Math.floor(seg.max / 10);
+      if (first > firstMax) {
+        out += `0${stream[0]}`;
+        stream = stream.slice(1);
+        continue;
+      }
+    }
+    const raw = stream.slice(0, seg.len);
+    stream = stream.slice(seg.len);
+    if (raw.length === seg.len) {
+      const n = Number(raw);
+      out += n > seg.max ? String(seg.max).padStart(seg.len, '0') : raw;
+    } else {
+      out += raw;
+    }
+  }
+  return out;
+}
+
+/** Парсит `DD.MM.YYYY` или `DD.MM.YYYY, HH:mm[:ss]` в `Date`. Возвращает `undefined` при невалидной/неполной строке. */
+export function parseMask(input: string, mode: MaskMode, showSeconds = true): Date | undefined {
+  const digits = input.replace(/\D/g, '');
+  const expected = totalLen(mode, showSeconds);
+  if (digits.length !== expected) return undefined;
+
+  const day = Number(digits.slice(0, 2));
+  const month = Number(digits.slice(2, 4)) - 1;
+  const year = Number(digits.slice(4, 8));
+  const hour = mode === DATE_MODE.DateTime ? Number(digits.slice(8, 10)) : 0;
+  const minute = mode === DATE_MODE.DateTime ? Number(digits.slice(10, 12)) : 0;
+  const second = mode === DATE_MODE.DateTime && showSeconds ? Number(digits.slice(12, 14)) : 0;
+
+  if (year < 1 || month < 0 || month > 11 || day < 1 || day > 31) return undefined;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59 || second < 0 || second > 59) return undefined;
+
+  const d = new Date(year, month, day, hour, minute, second);
+  // Отбраковать «перетекание» вроде 30 февраля → 2 марта.
+  if (d.getDate() !== day || d.getMonth() !== month || d.getFullYear() !== year) return undefined;
+  return d;
+}
+
+/** Форматирует `Date` в строку под маску — для синхронизации с input при внешнем onChange. */
+export function dateToMaskString(value: Date, mode: MaskMode, showSeconds = true): string {
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const head = `${pad(value.getDate())}.${pad(value.getMonth() + 1)}.${value.getFullYear()}`;
+  if (mode !== DATE_MODE.DateTime) {
+    return head;
+  }
+  const time = `${pad(value.getHours())}:${pad(value.getMinutes())}${showSeconds ? `:${pad(value.getSeconds())}` : ''}`;
+  return `${head}${TIME_SEPARATOR}${time}`;
+}

package/src/components/FieldDate/styles.module.scss

@@ -0,0 +1,56 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
+
+$sizes: 's', 'm', 'l';
+
+.trigger {
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    cursor: not-allowed;
+  }
+
+  &[data-readonly='true'] {
+    cursor: default;
+  }
+}
+
+.rangeInputs {
+  display: inline-flex;
+  flex: 1 1 0;
+  align-items: center;
+  min-width: 0;
+
+  @each $size in $sizes {
+    [data-size='#{$size}'] & {
+      gap: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'inputLine', 'gap');
+    }
+  }
+}
+
+// From-инпут периода прижат к первой дате слева, разделитель идёт сразу за ним,
+// to-инпут (flex: 1 1 0) забирает остаток.
+// Fallback: ширина резервируется по длине маски (--field-date-mask-ch — длина placeholderMask,
+// пробрасывается компонентом на .rangeInputs) в ch (масштабируется со шрифтом, без px-хардкода).
+// ch считается по моноширинному `0`, а реальные цифры/точки уже → остаётся небольшой хвост справа,
+// но ввод идёт слева направо (естественно).
+.rangeInputFrom {
+  flex: 0 0 auto;
+  width: calc(var(--field-date-mask-ch, 10) * 1ch);
+  text-align: start;
+}
+
+// Где поддерживается field-sizing — инпут сам ужимается ровно по контенту: хвоста нет,
+// разделитель прижат к дате, ввод по-прежнему слева направо. max-width страхует от переполнения.
+@supports (field-sizing: content) {
+  .rangeInputFrom {
+    field-sizing: content;
+    width: auto;
+    max-width: calc(var(--field-date-mask-ch, 10) * 1ch);
+  }
+}
+
+.rangeSeparator {
+  flex-shrink: 0;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}

package/src/components/FieldDate/types.ts

@@ -0,0 +1,124 @@
+import { CalendarDropdownProps } from '@cloud-ru/ds-calendar';
+import { FieldDecoratorProps, Size, ValidationState } from '@cloud-ru/ds-field-decorator';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { FocusEvent, ReactNode } from 'react';
+
+import { FieldLayoutPresets } from '../../hooks';
+import { DATE_MODE } from './constants';
+
+export type DateMode = ValueOf<typeof DATE_MODE>;
+
+/** Значение одиночной даты/даты-времени. */
+export type DateValue = Date | undefined;
+
+/** Значение периода (`[from, to]`). */
+export type DateRangeValue = [DateValue, DateValue];
+
+type FieldDateDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
+
+type CalendarPassthrough = Pick<
+  CalendarDropdownProps,
+  | 'today'
+  | 'showHolidays'
+  | 'buildCellProps'
+  | 'locale'
+  | 'presets'
+  | 'placement'
+  | 'closeOnApply'
+  | 'closeOnPopstate'
+  | 'open'
+  | 'onOpenChange'
+>;
+
+type CommonFieldDateProps = WithSupportProps<
+  FieldDateDecoratorProps &
+    CalendarPassthrough & {
+      /** Размер */
+      size?: Size;
+      /** Состояние валидации */
+      validationState?: ValidationState;
+      /** CSS-класс корня `FieldDecorator` */
+      className?: string;
+      /** CSS-класс оболочки поля */
+      fieldClassName?: string;
+      /** Placeholder в триггере, когда нет значения */
+      placeholder?: string;
+      /**
+       * `aria-label` поля начала периода (режим `date-range`).
+       * @default 'Начало периода'
+       */
+      labelFrom?: string;
+      /**
+       * `aria-label` поля конца периода (режим `date-range`).
+       * @default 'Конец периода'
+       */
+      labelTo?: string;
+      /** Иконка перед текстом (если не задано — `CalendarSVG`) */
+      iconBefore?: ReactNode;
+      /** Деактивировано */
+      disabled?: boolean;
+      /** Read-only режим */
+      readonly?: boolean;
+      /**
+       * Фон поля (acrylic)
+       * @default true
+       */
+      background?: boolean;
+      /**
+       * Показывать кнопку очистки значения (✕). Активна, когда есть значение и поле не disabled/readonly.
+       * @default true
+       */
+      showClearButton?: boolean;
+      /**
+       * Показывать кнопку копирования значения (только при `readonly` и непустом значении).
+       * @default true
+       */
+      showCopyButton?: boolean;
+      /** Колбек после копирования значения в буфер */
+      onCopyButtonClick?(): void;
+      /**
+       * Показывать секунды в режиме `date-time` (в маске и в выпадающем календаре).
+       * @default true
+       */
+      showSeconds?: boolean;
+      /** HTML-атрибут `id` для input (и `for` у label) */
+      id?: string;
+      /** HTML-атрибут `name` для input */
+      name?: string;
+      /** Автофокус input при монтировании. На mobile выключается адаптивно (см. `layoutPresets`) */
+      autoFocus?: boolean;
+      /**
+       * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+       * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+       */
+      layoutPresets?: FieldLayoutPresets;
+      /** Колбек фокуса input */
+      onFocus?(event: FocusEvent<HTMLInputElement>): void;
+      /** Колбек блюра input */
+      onBlur?(event: FocusEvent<HTMLInputElement>): void;
+    }
+>;
+
+export type FieldDateSingleProps = CommonFieldDateProps & {
+  /** Режим выбора даты. По умолчанию `'date'`. */
+  mode?: typeof DATE_MODE.Date | typeof DATE_MODE.DateTime;
+  /** Управляемое значение */
+  value?: DateValue;
+  /** Неуправляемое значение по умолчанию */
+  defaultValue?: DateValue;
+  /** Колбек смены значения */
+  onChange?(value: DateValue): void;
+};
+
+export type FieldDateRangeProps = CommonFieldDateProps & {
+  /** Режим выбора периода */
+  mode: typeof DATE_MODE.DateRange;
+  /** Управляемое значение */
+  value?: DateRangeValue;
+  /** Неуправляемое значение по умолчанию */
+  defaultValue?: DateRangeValue;
+  /** Колбек смены значения */
+  onChange?(value: DateRangeValue): void;
+};
+
+export type FieldDateProps = FieldDateSingleProps | FieldDateRangeProps;

package/src/components/FieldDate/utils.ts

@@ -0,0 +1,7 @@
+import { DATE_MODE } from './constants';
+import { FieldDateProps, FieldDateRangeProps } from './types';
+
+/** Type-guard: режим выбора периода (range) против одиночной даты/даты-времени. */
+export function isRange(props: FieldDateProps): props is FieldDateRangeProps {
+  return props.mode === DATE_MODE.DateRange;
+}