@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,78 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { KeyboardEventHandler } from 'react';
+import { CALENDAR_MODE, RANGE_POSITION, SIZE, VIEW_MODE } from './constants';
+export type RangePosition = ValueOf<typeof RANGE_POSITION>;
+export type ViewMode = ValueOf<typeof VIEW_MODE>;
+export type Size = ValueOf<typeof SIZE>;
+export type CalendarMode = ValueOf<typeof CALENDAR_MODE>;
+export type Range = [Date, Date];
+export type BaseGridItem = {
+    date: Date;
+    address: [number, number];
+};
+export type BaseGrid = BaseGridItem[][];
+export type Cell = {
+    /** Дата ячейки (для колбэков выбора) */
+    date: Date;
+    /** Адрес ячейки в сетке — синхронизация фокуса и клавиатуры */
+    address: [number, number];
+    /** Значение */
+    label: string;
+    /** Является ли сегодняшним днем */
+    current: boolean;
+    /** Выбран ли элемент */
+    checked: boolean;
+    /** Деактивирован ли */
+    disabled?: boolean;
+    /** Является ли выходным/праздником */
+    holiday?: boolean;
+    /**
+     * Относится ли к иному периоду (не к просматриваемому в данный момент)
+     */
+    another: boolean;
+    /**
+     * Является ли частью range
+     * @default out
+     */
+    rangePosition: RangePosition;
+    /** Индекс фокуса кнопки */
+    tabIndex: -1 | 0;
+    onSelect?(date: Date): void;
+    onPreselect?(date: Date): void;
+    onLeave?(): void;
+    onKeyDown?: KeyboardEventHandler;
+};
+export type FocusDirection = 'prev' | 'next';
+export type BuildCellProps = {
+    isDisabled?: boolean;
+    isHoliday?: boolean;
+};
+export type BuildCellPropsFunction = (date: Date, viewMode: ViewMode) => BuildCellProps;
+export type TimeValue = {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+};
+export type DateAndTime = TimeValue & {
+    year?: number;
+    month?: number;
+    day?: number;
+};
+export type PresetItem = {
+    /** Лейбл пресета */
+    label: string;
+    /** ID периода */
+    id: string;
+    /** Период */
+    range: Range;
+};
+export type PresetsOptions = {
+    /**
+     * Включение отображения секции с пресетами
+     * @default false
+     */
+    enabled?: boolean;
+    /** Кастомные пресеты быстрого выбора периода относительно текущего момента */
+    items?: PresetItem[];
+};
+export type OnKeyDownGetter = (id: number) => KeyboardEventHandler;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils.d.ts

@@ -0,0 +1,36 @@
+import { Lang } from '@cloud-ru/ds-locale';
+import { CalendarMode, DateAndTime, Range, RangePosition, TimeValue, ViewMode } from './types';
+export declare const isTheSameDecade: (date1: Date, date2: Date) => boolean;
+export declare const isTheSameYear: (date1: Date, date2: Date) => boolean;
+export declare const isTheSameMonth: (date1: Date, date2: Date) => boolean;
+export declare function isTheSameDate(date1: Date, date2: Date): boolean;
+export declare function timeValuesEqual(current: TimeValue | undefined, next: TimeValue): boolean;
+export declare const capitalize: (str: string) => string;
+export declare const getMonthName: (date: Date, locale?: Intl.Locale) => string;
+export declare const getDateLabel: (date: Date) => string;
+export declare const getYearLabel: (date: Date) => string;
+export declare const getMonthShift: (today: Date, targetDate: Date) => number;
+export declare const getYearShift: (today: Date, targetDate: Date) => number;
+export declare const getDecadeShift: (today: Date, targetDate: Date) => number;
+export declare const isTheSameItem: (viewMode: ViewMode, date1: Date, date2: Date) => boolean;
+export declare const sortDates: (dates: Date[]) => Date[];
+export declare const getInRangePosition: (date: Date, viewMode: ViewMode, range?: Range) => RangePosition;
+export declare const getEndOfTheDay: (date: Date) => Date;
+export declare const getStartOfTheMonth: (date: Date) => Date;
+export declare const getEndOfTheMonth: (date: Date) => Date;
+export declare const getStartOfTheYear: (date: Date) => Date;
+export declare const getEndOfTheYear: (date: Date) => Date;
+/**
+ * Нормализует выбранный период под границы режима (`setValue` десктопа и мобайла дают одинаковый результат):
+ * month/month-range — границы месяца, year/year-range — границы года, иначе — конец дня для верхней границы.
+ */
+export declare function normalizeRangeForMode(mode: CalendarMode | 'time', dates: Range): Range;
+export declare const getTestIdBuilder: (testId?: string) => (prefix: string) => string | undefined;
+export declare const getLocale: ({ localeProp, ctxLang }?: {
+    localeProp?: Intl.Locale;
+    ctxLang?: Lang;
+}) => Intl.Locale;
+export declare const getStartOfWeek: (locale: Intl.Locale) => import("weekstart").DayOfWeek;
+export declare const isWeekend: (date: Date, viewMode: ViewMode) => boolean;
+export declare function isTimePortionComplete(dateAndTime: Pick<DateAndTime, 'hours' | 'minutes' | 'seconds'>, showSeconds?: boolean): boolean;
+export declare const stringifyAddress: (address: [number, number]) => string;

package/dist/cjs/utils.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringifyAddress = exports.isWeekend = exports.getStartOfWeek = exports.getLocale = exports.getTestIdBuilder = exports.getEndOfTheYear = exports.getStartOfTheYear = exports.getEndOfTheMonth = exports.getStartOfTheMonth = exports.getEndOfTheDay = exports.getInRangePosition = exports.sortDates = exports.isTheSameItem = exports.getDecadeShift = exports.getYearShift = exports.getMonthShift = exports.getYearLabel = exports.getDateLabel = exports.getMonthName = exports.capitalize = exports.isTheSameMonth = exports.isTheSameYear = exports.isTheSameDecade = void 0;
+exports.isTheSameDate = isTheSameDate;
+exports.timeValuesEqual = timeValuesEqual;
+exports.normalizeRangeForMode = normalizeRangeForMode;
+exports.isTimePortionComplete = isTimePortionComplete;
+const utils_1 = require("@cloud-ru/ds-utils");
+const weekstart_1 = require("weekstart");
+const constants_1 = require("./constants");
+const isTheSameDecade = (date1, date2) => Math.floor(date1.getFullYear() / 10) === Math.floor(date2.getFullYear() / 10);
+exports.isTheSameDecade = isTheSameDecade;
+const isTheSameYear = (date1, date2) => date1.getFullYear() === date2.getFullYear();
+exports.isTheSameYear = isTheSameYear;
+const isTheSameMonth = (date1, date2) => (0, exports.isTheSameYear)(date1, date2) && date1.getMonth() === date2.getMonth();
+exports.isTheSameMonth = isTheSameMonth;
+function isTheSameDate(date1, date2) {
+    return (0, exports.isTheSameMonth)(date1, date2) && date1.getDate() === date2.getDate();
+}
+function timeValuesEqual(current, next) {
+    if (current === undefined) {
+        return false;
+    }
+    return ((current.hours ?? 0) === (next.hours ?? 0) &&
+        (current.minutes ?? 0) === (next.minutes ?? 0) &&
+        (current.seconds ?? 0) === (next.seconds ?? 0));
+}
+const capitalize = (str) => str.substring(0, 1).toUpperCase() + str.substring(1);
+exports.capitalize = capitalize;
+const getMonthName = (date, locale) => {
+    const monthName = date.toLocaleString(locale, { month: 'long' });
+    return (0, exports.capitalize)(monthName);
+};
+exports.getMonthName = getMonthName;
+const getDateLabel = (date) => date.getDate().toString();
+exports.getDateLabel = getDateLabel;
+const getYearLabel = (date) => date.getFullYear().toString();
+exports.getYearLabel = getYearLabel;
+const getMonthShift = (today, targetDate) => {
+    const overYearDiff = (targetDate.getFullYear() - today.getFullYear()) * 12;
+    const monthsDiff = targetDate.getMonth() - today.getMonth();
+    return overYearDiff + monthsDiff;
+};
+exports.getMonthShift = getMonthShift;
+const getYearShift = (today, targetDate) => targetDate.getFullYear() - today.getFullYear();
+exports.getYearShift = getYearShift;
+const getDecadeShift = (today, targetDate) => Math.trunc((targetDate.getFullYear() - today.getFullYear()) / 10);
+exports.getDecadeShift = getDecadeShift;
+const isTheSameItem = (viewMode, date1, date2) => {
+    switch (viewMode) {
+        case constants_1.VIEW_MODE.Month:
+            return isTheSameDate(date1, date2);
+        case constants_1.VIEW_MODE.Year:
+            return (0, exports.isTheSameMonth)(date1, date2);
+        case constants_1.VIEW_MODE.Decade:
+            return (0, exports.isTheSameYear)(date1, date2);
+        default:
+            return false;
+    }
+};
+exports.isTheSameItem = isTheSameItem;
+const sortDates = (dates) => [...dates].sort((d1, d2) => d1.valueOf() - d2.valueOf());
+exports.sortDates = sortDates;
+const getInRangePosition = (date, viewMode, range) => {
+    if (!range) {
+        return constants_1.RANGE_POSITION.Out;
+    }
+    const [startDate, endDate] = (0, exports.sortDates)(range);
+    const isStart = (0, exports.isTheSameItem)(viewMode, date, startDate);
+    const isEnd = (0, exports.isTheSameItem)(viewMode, date, endDate);
+    if (isStart && isEnd) {
+        return constants_1.RANGE_POSITION.StartEnd;
+    }
+    if (isStart) {
+        return constants_1.RANGE_POSITION.Start;
+    }
+    if (isEnd) {
+        return constants_1.RANGE_POSITION.End;
+    }
+    const [start, end] = [startDate.valueOf(), endDate.valueOf()];
+    return date.valueOf() >= start && date.valueOf() <= end ? constants_1.RANGE_POSITION.In : constants_1.RANGE_POSITION.Out;
+};
+exports.getInRangePosition = getInRangePosition;
+const getEndOfTheDay = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1).valueOf() - 1);
+exports.getEndOfTheDay = getEndOfTheDay;
+const getStartOfTheMonth = (date) => new Date(new Date(date.getFullYear(), date.getMonth(), 1).valueOf());
+exports.getStartOfTheMonth = getStartOfTheMonth;
+const getEndOfTheMonth = (date) => new Date(new Date(date.getFullYear(), date.getMonth() + 1, 1).valueOf() - 1);
+exports.getEndOfTheMonth = getEndOfTheMonth;
+const getStartOfTheYear = (date) => new Date(new Date(date.getFullYear(), 0, 1).valueOf());
+exports.getStartOfTheYear = getStartOfTheYear;
+const getEndOfTheYear = (date) => new Date(new Date(date.getFullYear() + 1, 0, 1).valueOf() - 1);
+exports.getEndOfTheYear = getEndOfTheYear;
+/**
+ * Нормализует выбранный период под границы режима (`setValue` десктопа и мобайла дают одинаковый результат):
+ * month/month-range — границы месяца, year/year-range — границы года, иначе — конец дня для верхней границы.
+ */
+function normalizeRangeForMode(mode, dates) {
+    const [first, last] = (0, exports.sortDates)(dates);
+    switch (mode) {
+        case constants_1.CALENDAR_MODE.Month:
+        case constants_1.CALENDAR_MODE.MonthRange:
+            return [(0, exports.getStartOfTheMonth)(first), (0, exports.getEndOfTheMonth)(last)];
+        case constants_1.CALENDAR_MODE.Year:
+        case constants_1.CALENDAR_MODE.YearRange:
+            return [(0, exports.getStartOfTheYear)(first), (0, exports.getEndOfTheYear)(last)];
+        default:
+            return [first, (0, exports.getEndOfTheDay)(last)];
+    }
+}
+const getTestIdBuilder = (testId) => (prefix) => (testId ? `${prefix}-${testId}` : undefined);
+exports.getTestIdBuilder = getTestIdBuilder;
+const getNavigatorLocale = () => ((0, utils_1.isBrowser)() ? (navigator?.language ?? 'ru-RU') : 'ru-RU');
+const getLocale = ({ localeProp, ctxLang } = {}) => localeProp || new Intl.Locale(ctxLang ? ctxLang.replace('_', '-') : getNavigatorLocale());
+exports.getLocale = getLocale;
+const getStartOfWeek = (locale) => (0, weekstart_1.getWeekStartByLocale)(locale.language);
+exports.getStartOfWeek = getStartOfWeek;
+const isWeekend = (date, viewMode) => {
+    if (viewMode === 'month') {
+        return date.getDay() === 0 || date.getDay() === 6;
+    }
+    return false;
+};
+exports.isWeekend = isWeekend;
+function isTimePortionComplete(dateAndTime, showSeconds) {
+    const { hours, minutes, seconds } = dateAndTime;
+    return [hours, minutes, ...(showSeconds ? [seconds] : [])].every(v => v !== undefined);
+}
+const stringifyAddress = (address) => address.join('-');
+exports.stringifyAddress = stringifyAddress;

package/dist/esm/components/Calendar/Calendar.d.ts

@@ -0,0 +1,128 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { CALENDAR_MODE } from '../../constants.js';
+import { BuildCellPropsFunction, FocusDirection, PresetsOptions, Range, Size } from '../../types.js';
+type CommonCalendarProps = {
+    /**
+     * Размер
+     * @default m
+     */
+    size?: Size;
+    /** Дата сегодняшнего дня */
+    today?: Date | number;
+    /** Раскрашивает субботу и воскресенье */
+    showHolidays?: boolean;
+    /**
+     * Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра:
+     * <br> `Date` - дата ячейки
+     * <br> `ViewMode`:
+     * <br>  - `month` отображение месяца, каждая ячейка - 1 день
+     * <br>  - `year` отображение года, каждая ячейка - 1 месяц
+     * <br>  - `decade` отображение декады, каждая ячейка - 1 год
+     * <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки.
+     * @type (date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };
+     */
+    buildCellProps?: BuildCellPropsFunction;
+    /** CSS-класс контейнера */
+    className?: string;
+    /**
+     * Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
+     * @default true
+     */
+    fitToContainer?: boolean;
+    /** Объект со стилями на контейнер. */
+    style?: CSSProperties;
+    /** Автофокус */
+    autofocus?: boolean;
+    /**
+     * Локаль, в соответствие с которой выставляется язык названий и первый день недели
+     * @default Проставляется в соответствие с языком в настройках браузера
+     * @type Intl.Locale
+     */
+    locale?: Intl.Locale;
+    /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
+    onFocusLeave?(direction: FocusDirection): void;
+    /** Ссылка на управление первым элементом навигации */
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
+    /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'date-range' и отсутствии buildCellProps (временно PDS-3139) */
+    presets?: PresetsOptions;
+    /** Рендерится после основной разметки календаря, внутри `CalendarContext` (например футер с Apply в дропдауне). */
+    bottomSlot?: ReactNode;
+};
+type DateCalendarProps = CommonCalendarProps & {
+    /** Режим работы календаря: <br> - `date` - режим выбора даты */
+    mode: typeof CALENDAR_MODE.Date;
+    /** Выбранное значение.<br> - в режиме date тип `Date` */
+    value?: Date;
+    /** Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` */
+    defaultValue?: Date;
+    /** Колбек выбора значения.<br> - в режиме date принимает тип `Date` */
+    onChangeValue?(value: Date): void;
+};
+type MonthCalendarProps = CommonCalendarProps & {
+    /** <br> - `month` - режим выбора месяца */
+    mode: typeof CALENDAR_MODE.Month;
+    /** <br> - в режиме month тип `Date` */
+    value?: Date;
+    /** <br> - в режиме month тип `Date` */
+    defaultValue?: Date;
+    /** <br> - в режиме month принимает тип `Date` */
+    onChangeValue?(value: Date): void;
+};
+type YearCalendarProps = CommonCalendarProps & {
+    /** <br> - `year` - режим выбора года */
+    mode: typeof CALENDAR_MODE.Year;
+    /** <br> - в режиме year тип `Date` */
+    value?: Date;
+    /** <br> - в режиме year тип `Date` */
+    defaultValue?: Date;
+    /** <br> - в режиме year принимает тип `Date` */
+    onChangeValue?(value: Date): void;
+};
+type DateTimeCalendarProps = CommonCalendarProps & {
+    /** <br> - `date-time` - режим выбора даты и времени */
+    mode: typeof CALENDAR_MODE.DateTime;
+    /** <br> - в режиме date-time тип `Date` */
+    value?: Date;
+    /** <br> - в режиме date-time тип `Date` */
+    defaultValue?: Date;
+    /** <br> - в режиме date-time принимает тип `Date` */
+    onChangeValue?(value: Date): void;
+    /** Показывать ли секунды (только в режиме date-time) */
+    showSeconds?: boolean;
+};
+type RangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `date-range` - режим выбора периода */
+    mode: typeof CALENDAR_MODE.DateRange;
+    /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме date-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+type MonthRangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `month-range` - режим выбора периода из месяцев */
+    mode: typeof CALENDAR_MODE.MonthRange;
+    /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме month-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+type YearRangeCalendarProps = CommonCalendarProps & {
+    /** <br> - `year-range` - режим выбора периода из лет */
+    mode: typeof CALENDAR_MODE.YearRange;
+    /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+    value?: Range;
+    /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+    defaultValue?: Range;
+    /** <br> - в режиме year-range принимает тип `Range` */
+    onChangeValue?(value: Range): void;
+};
+export type CalendarProps = WithSupportProps<DateCalendarProps | RangeCalendarProps | MonthRangeCalendarProps | YearRangeCalendarProps | MonthCalendarProps | DateTimeCalendarProps | YearCalendarProps>;
+export declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/Calendar/Calendar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { CALENDAR_MODE } from '../../constants.js';
+import { CalendarBase } from '../../helperComponents/index.js';
+import { getNormalizedValue } from './utils.js';
+export function Calendar(props) {
+    const { onChangeValue, mode, ...rest } = props;
+    const changeValueHandler = useCallback((value) => {
+        if (mode === CALENDAR_MODE.Date ||
+            mode === CALENDAR_MODE.Month ||
+            mode === CALENDAR_MODE.Year ||
+            mode === CALENDAR_MODE.DateTime) {
+            const [date] = value;
+            onChangeValue?.(date);
+            return;
+        }
+        onChangeValue?.(value);
+    }, [onChangeValue, mode]);
+    const value = useMemo(() => getNormalizedValue(props.value), [props.value]);
+    const defaultValue = useMemo(() => getNormalizedValue(props.defaultValue), [props.defaultValue]);
+    return (_jsx(CalendarBase, { ...rest, mode: mode, value: value, defaultValue: defaultValue, onChangeValue: changeValueHandler }));
+}

package/dist/esm/components/Calendar/index.d.ts

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

package/dist/esm/components/Calendar/index.js

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

package/dist/esm/components/Calendar/utils.d.ts

@@ -0,0 +1,3 @@
+import { Range } from '../../types.js';
+import { CalendarProps } from './Calendar.js';
+export declare const getNormalizedValue: (value: CalendarProps["value"]) => Range | undefined;

package/dist/esm/components/Calendar/utils.js

@@ -0,0 +1,15 @@
+function isRangeValue(value) {
+    return Array.isArray(value) && value.length === 2 && value[0] instanceof Date && value[1] instanceof Date;
+}
+function isDateValue(value) {
+    return value instanceof Date;
+}
+export const getNormalizedValue = (value) => {
+    if (isRangeValue(value)) {
+        return value;
+    }
+    if (isDateValue(value)) {
+        return [value, value];
+    }
+    return value;
+};

package/dist/esm/components/CalendarDropdown/CalendarDropdown.d.ts

@@ -0,0 +1,22 @@
+import { DropdownProps } from '@cloud-ru/ds-dropdown';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+import { CalendarProps } from '../Calendar/index.js';
+type DropdownBridgeProps = Pick<DropdownProps, 'triggerClassName' | 'trigger' | 'placement' | 'hoverDelayOpen' | 'hoverDelayClose' | 'closeOnEscapeKey' | 'triggerClickByKeys' | 'triggerRef' | 'outsideClick' | 'fallbackPlacements' | 'disableSpanWrapper' | 'closeOnPopstate' | 'open' | 'onOpenChange'>;
+/**
+ * Адаптивный календарь в триггере. На desktop открывается в popover (`@cloud-ru/ds-dropdown`), на mobile —
+ * в `@cloud-ru/ds-bottom-sheet` (раскладка берётся из `@cloud-ru/ds-adaptive`; собственного пропа `layoutType` нет).
+ * Пропы позиционирования popover (`placement`, `fallbackPlacements`, `triggerRef`, …) на mobile игнорируются.
+ */
+export type CalendarDropdownProps = WithSupportProps<CalendarProps & DropdownBridgeProps & {
+    /** Элемент открытия dropdown (триггер). */
+    children?: ReactNode;
+    /** Закрыть dropdown после нажатия Apply. */
+    closeOnApply?: boolean;
+    /** Колбек после подтверждения в футере. */
+    onApply?(): void;
+    /** Колбек по кнопке Current в футере. */
+    onCurrent?(): void;
+}>;
+export declare function CalendarDropdown(props: CalendarDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/CalendarDropdown/CalendarDropdown.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DesktopCalendarDropdown } from '../../helperComponents/DesktopCalendarDropdown/index.js';
+import { MobileCalendarDropdown } from '../../helperComponents/MobileCalendarDropdown/index.js';
+export function CalendarDropdown(props) {
+    const { layoutType } = useAdaptiveLayout();
+    return isMobileLayout(layoutType) ? _jsx(MobileCalendarDropdown, { ...props }) : _jsx(DesktopCalendarDropdown, { ...props });
+}

package/dist/esm/components/CalendarDropdown/index.d.ts

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

package/dist/esm/components/CalendarDropdown/index.js

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

package/dist/esm/components/CalendarDropdown/styles.module.css

@@ -0,0 +1,9 @@
+.dropdown{
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.calendarDropdownContent{
+  display:flex;
+  flex-direction:column;
+}

package/dist/esm/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,34 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { RefObject } from 'react';
+import { FocusDirection, Size, TimeValue } from '../../types.js';
+export type TimePickerProps = WithSupportProps<{
+    /** Выбранное значение.*/
+    value?: TimeValue;
+    /** Дата сегодняшнего дня */
+    today?: Date | number;
+    /** Значение по-умолчанию для uncontrolled. */
+    defaultValue?: TimeValue;
+    /** Колбек выбора значения */
+    onChangeValue?(value?: TimeValue): void;
+    /** Показывать ли секунды */
+    showSeconds?: boolean;
+    /**
+     * Размер
+     * @default m
+     */
+    size?: Size;
+    /** CSS-класс контейнера */
+    className?: string;
+    /**
+     * Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
+     * @default true
+     */
+    fitToContainer?: boolean;
+    /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
+    onFocusLeave?(direction: FocusDirection): void;
+    /** Ссылка на управление первым элементом навигации */
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
+}>;
+export declare function TimePicker({ className, size, fitToContainer, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds, today: todayProp, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/TimePicker/TimePicker.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLang } from '@cloud-ru/ds-locale';
+import { useEventHandler, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SIZE } from '../../constants.js';
+import { CalendarContext, TimePickerBase } from '../../helperComponents/index.js';
+import { useDateAndTime } from '../../hooks/index.js';
+import { getLocale, getTestIdBuilder, isTimePortionComplete, timeValuesEqual } from '../../utils.js';
+import { DEFAULT_LOCALE } from './constants.js';
+import styles from './styles.module.css';
+const stubFunc = () => { };
+const stubBuildCellProps = () => ({ isDisabled: false, isHoliday: false });
+export function TimePicker({ className, size = SIZE.M, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds = true, today: todayProp, }) {
+    const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
+    const setValueEventHandler = useEventHandler(setValueState);
+    const [internalValue, setInternalValue] = useState();
+    const [focus, setFocus] = useState(undefined);
+    const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        if (!internalValue?.[0]) {
+            return;
+        }
+        const hours = internalValue[0].getHours() ?? 0;
+        const minutes = internalValue[0].getMinutes() ?? 0;
+        const seconds = internalValue[0].getSeconds() ?? 0;
+        setValueEventHandler({ hours, minutes, seconds });
+    }, [internalValue, setValueEventHandler]);
+    const setValue = useCallback((dates) => {
+        const newDate = dates[0];
+        setInternalValue([newDate, newDate]);
+    }, []);
+    const { dateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = useDateAndTime({ showSeconds, value });
+    useEffect(() => {
+        const wasValueCleared = value === undefined && previousValueRef.current !== undefined;
+        previousValueRef.current = value;
+        if (wasValueCleared) {
+            return;
+        }
+        if (!isTimePortionComplete(dateAndTime, showSeconds)) {
+            return;
+        }
+        const next = {
+            hours: dateAndTime.hours ?? 0,
+            minutes: dateAndTime.minutes ?? 0,
+            seconds: dateAndTime.seconds ?? 0,
+        };
+        if (timeValuesEqual(value, next)) {
+            return;
+        }
+        setValueEventHandler(next);
+    }, [dateAndTime, showSeconds, setValueEventHandler, value]);
+    const applyButtonRef = useRef(null);
+    const currentButtonRef = useRef(null);
+    const hoursKeyboardNavigationRef = useRef({ focusItem: () => { } });
+    const minutesKeyboardNavigationRef = useRef({ focusItem: () => { } });
+    const secondsKeyboardNavigationRef = useRef({ focusItem: () => { } });
+    const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+    const ctxLang = useLang();
+    const locale = useMemo(() => getLocale({ localeProp: DEFAULT_LOCALE, ctxLang }), [ctxLang]);
+    const calendarContextValue = useMemo(() => {
+        const stubDate = new Date();
+        return {
+            mode: 'time',
+            locale,
+            size,
+            value: internalValue,
+            fitToContainer,
+            focus,
+            setValue,
+            setFocus,
+            getTestId,
+            onFocusLeave,
+            navigationStartRef,
+            showSeconds,
+            dateAndTime,
+            onTimeChange,
+            onDateAndTimeChange,
+            isTimeFilled,
+            applyButtonRef,
+            currentButtonRef,
+            hoursKeyboardNavigationRef,
+            minutesKeyboardNavigationRef,
+            secondsKeyboardNavigationRef,
+            today,
+            // Stub props
+            viewMode: 'month',
+            showHolidays: false,
+            viewDate: stubDate,
+            referenceDate: stubDate,
+            preselectedRange: undefined,
+            viewShift: 0,
+            setViewMode: stubFunc,
+            setViewShift: stubFunc,
+            startPreselect: stubFunc,
+            continuePreselect: stubFunc,
+            completePreselect: stubFunc,
+            restartPreselect: stubFunc,
+            buildCellProps: stubBuildCellProps,
+            onDateChange,
+            isDateAndTimeFilled,
+            isDateFilled,
+        };
+    }, [
+        applyButtonRef,
+        currentButtonRef,
+        dateAndTime,
+        fitToContainer,
+        focus,
+        getTestId,
+        hoursKeyboardNavigationRef,
+        internalValue,
+        isDateAndTimeFilled,
+        isDateFilled,
+        isTimeFilled,
+        locale,
+        minutesKeyboardNavigationRef,
+        navigationStartRef,
+        onDateAndTimeChange,
+        onDateChange,
+        onFocusLeave,
+        onTimeChange,
+        secondsKeyboardNavigationRef,
+        setFocus,
+        setValue,
+        showSeconds,
+        size,
+        today,
+    ]);
+    return (_jsx("div", { className: cn(styles.timePickerWrapper, className), "data-fit-to-container": fitToContainer || undefined, "data-show-seconds": String(showSeconds), "data-size": size, "data-test-id": testId, children: _jsx(CalendarContext.Provider, { value: calendarContextValue, children: _jsx(TimePickerBase, {}) }) }));
+}

package/dist/esm/components/TimePicker/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_LOCALE: Intl.Locale;

package/dist/esm/components/TimePicker/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/dist/esm/components/TimePicker/index.d.ts

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