@cloud-ru/ds-calendar 1.0.0

package/dist/esm/helperComponents/TimePickerDrum/utils.js

@@ -0,0 +1,114 @@
+import { SIZE } from '../../constants.js';
+/**
+ * Допустимые значения колонки: whitelist `allowed` (если после фильтра непустой),
+ * иначе диапазон от `min` до конца (`0 .. fullCount - 1`), иначе полный диапазон.
+ */
+export function buildColumnValues(fullCount, allowed, min) {
+    const max = fullCount - 1;
+    const fullRange = () => Array.from({ length: fullCount }, (_, i) => i);
+    if (allowed != null && allowed.length > 0) {
+        const uniq = new Set();
+        for (const raw of allowed) {
+            if (typeof raw !== 'number' || !Number.isFinite(raw)) {
+                continue;
+            }
+            const v = Math.trunc(raw);
+            if (v >= 0 && v <= max) {
+                uniq.add(v);
+            }
+        }
+        const list = [...uniq].sort((a, b) => a - b);
+        if (list.length > 0) {
+            return list;
+        }
+    }
+    if (min !== undefined && typeof min === 'number' && Number.isFinite(min)) {
+        const from = Math.min(max, Math.max(0, Math.trunc(min)));
+        return Array.from({ length: max - from + 1 }, (_, i) => from + i);
+    }
+    return fullRange();
+}
+/** `values` — отсортированный по возрастанию список без дубликатов. */
+export function nearestInSortedValues(values, target) {
+    if (values.length === 0) {
+        return target;
+    }
+    const t = typeof target === 'number' && Number.isFinite(target) ? target : 0;
+    const first = values[0];
+    const last = values[values.length - 1];
+    if (t <= first) {
+        return first;
+    }
+    if (t >= last) {
+        return last;
+    }
+    let lo = 0;
+    let hi = values.length - 1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        const m = values[mid];
+        if (m === t) {
+            return t;
+        }
+        if (m < t) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    const left = values[hi];
+    const right = values[lo];
+    return Math.abs(t - left) <= Math.abs(right - t) ? left : right;
+}
+/**
+ * Математический остаток `n` по модулю `m`: результат всегда в диапазоне `[0, m - 1]` при `m > 0`,
+ * в том числе для отрицательных и дробных `n` (после `%` в JS). Нужен для циклического индекса в колонке барабана.
+ *
+ * @param n делимое (часто индекс со сдвигом)
+ * @param m положительный модуль (длина списка `options`)
+ */
+export function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+/**
+ * Форматирует числовую часть времени для отображения: целое приводится к строке с ведущим нулём до двух знаков (`0` → `"00"`, `9` → `"09"`).
+ * Используется для часов, минут и секунд в дисплее и в подписях ячеек барабана.
+ *
+ * @param value целое в допустимом диапазоне колонки (часы, минуты или секунды)
+ */
+export function formatDisplayPart(value) {
+    return String(value).padStart(2, '0');
+}
+/** В блоке подписи показываем только календарную часть (время — в `timeRow`). */
+export function formatSelectedDateLabelForDisplay(text) {
+    const trimmed = text.trim();
+    if (trimmed === '') {
+        return '';
+    }
+    const parsed = Date.parse(trimmed);
+    if (!Number.isNaN(parsed)) {
+        return new Intl.DateTimeFormat('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+        }).format(new Date(parsed));
+    }
+    return trimmed;
+}
+/**
+ * Геометрия барабана времени по размеру календаря: высота одной строки (`itemHeight`) и высота окна колонок (`pickerHeight`) в пикселях.
+ * Соответствует ступенчатым значениям для `s` / `m` / `l` из дизайн-токенов `TimePickerDrum`.
+ *
+ * @param size размер по оси Figma (`SIZE.S` | `SIZE.M` | `SIZE.L`)
+ * @returns `itemHeight` — шаг строки и дискретизации жеста; `pickerHeight` — высота видимой области колонки
+ */
+export function getSizeLimits(size) {
+    if (size === SIZE.L) {
+        return { itemHeight: 56, pickerHeight: 280 };
+    }
+    if (size === SIZE.M) {
+        return { itemHeight: 48, pickerHeight: 240 };
+    }
+    return { itemHeight: 40, pickerHeight: 200 };
+}

package/dist/esm/helperComponents/WeekRow/WeekRow.d.ts

@@ -0,0 +1 @@
+export declare function WeekRow(): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/WeekRow/WeekRow.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { VIEW_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { Item } from '../Item/index.js';
+import styles from './styles.module.css';
+import { getWeekLabels } from './utils.js';
+export function WeekRow() {
+    const { viewMode, locale, size } = useCalendarContext();
+    const labels = useMemo(() => getWeekLabels(locale), [locale]);
+    if (viewMode === VIEW_MODE.Month) {
+        return (_jsx(_Fragment, { children: labels.map((label, index) => (_jsx(Item, { another: true, className: styles.cell, label: label, rangePosition: 'out', size: size, tabIndex: -1, testIdSegment: 'header-item' }, `${index}-${label}`))) }));
+    }
+    return null;
+}

package/dist/esm/helperComponents/WeekRow/index.d.ts

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

package/dist/esm/helperComponents/WeekRow/index.js

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

package/dist/esm/helperComponents/WeekRow/styles.module.css

@@ -0,0 +1,3 @@
+.cell{
+  pointer-events:none;
+}

package/dist/esm/helperComponents/WeekRow/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const MONDAY_DATE: Date;
+export declare const SUNDAY_DATE: Date;
+export declare const getWeekLabels: (locale: Intl.Locale) => string[];

package/dist/esm/helperComponents/WeekRow/utils.js

@@ -0,0 +1,12 @@
+import { capitalize, getStartOfWeek } from '../../utils.js';
+export const MONDAY_DATE = new Date(1970, 1, 2);
+export const SUNDAY_DATE = new Date(1970, 1, 1);
+export const getWeekLabels = (locale) => {
+    const labels = [];
+    const startDate = getStartOfWeek(locale) === 0 ? SUNDAY_DATE : MONDAY_DATE;
+    for (let i = 0; i < 7; i++) {
+        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i);
+        labels.push(capitalize(date.toLocaleString(locale, { weekday: 'short' })));
+    }
+    return labels;
+};

package/dist/esm/helperComponents/YearView/YearView.d.ts

@@ -0,0 +1 @@
+export declare function YearView(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/YearView/YearView.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { AUTOFOCUS, CALENDAR_MODE, VIEW_MODE } from '../../constants.js';
+import { useCalendarContext, useGrid } from '../../hooks/index.js';
+import { getMonthName, getMonthShift, isTheSameMonth, isTheSameYear } from '../../utils.js';
+import { Grid } from '../Grid/index.js';
+import { buildYearGrid } from './utils.js';
+export function YearView() {
+    const { referenceDate, setViewMode, setViewShift, setFocus, preselectedRange, continuePreselect, restartPreselect, locale, setValue, mode, startPreselect, completePreselect, } = useCalendarContext();
+    const getItemLabel = useCallback((date) => getMonthName(date, locale), [locale]);
+    const onSelect = useCallback((date) => {
+        if (mode === CALENDAR_MODE.Month) {
+            setValue([date, date]);
+            return;
+        }
+        if (mode === CALENDAR_MODE.MonthRange) {
+            preselectedRange ? completePreselect(date) : startPreselect(date);
+            return;
+        }
+        setFocus(AUTOFOCUS);
+        setViewShift(getMonthShift(referenceDate, date));
+        setViewMode(VIEW_MODE.Month);
+    }, [
+        completePreselect,
+        mode,
+        preselectedRange,
+        referenceDate,
+        setFocus,
+        setValue,
+        setViewMode,
+        setViewShift,
+        startPreselect,
+    ]);
+    const onPreselect = useCallback((date) => {
+        if (preselectedRange) {
+            continuePreselect(date);
+        }
+    }, [continuePreselect, preselectedRange]);
+    const onLeave = useCallback(() => {
+        if (preselectedRange) {
+            restartPreselect();
+        }
+    }, [preselectedRange, restartPreselect]);
+    const grid = useGrid({
+        buildGrid: buildYearGrid,
+        isTheSameItem: isTheSameMonth,
+        isInPeriod: isTheSameYear,
+        getItemLabel,
+        onSelect,
+        onPreselect,
+        onLeave,
+    });
+    return _jsx(Grid, { grid: grid });
+}

package/dist/esm/helperComponents/YearView/index.d.ts

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

package/dist/esm/helperComponents/YearView/index.js

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

package/dist/esm/helperComponents/YearView/utils.d.ts

@@ -0,0 +1,2 @@
+import { BaseGrid } from '../../types.js';
+export declare const buildYearGrid: (date: Date) => BaseGrid;

package/dist/esm/helperComponents/YearView/utils.js

@@ -0,0 +1,15 @@
+import { GRID_SIZE, VIEW_MODE } from '../../constants.js';
+export const buildYearGrid = (date) => {
+    const result = [];
+    const year = date.getFullYear();
+    let month = 0;
+    const { rows, columns } = GRID_SIZE[VIEW_MODE.Year];
+    for (let i = 0; i < rows; i++) {
+        const row = [];
+        for (let j = 0; j < columns; j++) {
+            row.push({ date: new Date(year, month++, 1), address: [i, j] });
+        }
+        result.push(row);
+    }
+    return result;
+};

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TimePickerBase/index.js';
+export * from './CalendarContext/index.js';
+export * from './Footer/index.js';
+export * from './CalendarBase/index.js';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,4 @@
+export * from './TimePickerBase/index.js';
+export * from './CalendarContext/index.js';
+export * from './Footer/index.js';
+export * from './CalendarBase/index.js';

package/dist/esm/hooks/classifyCell.d.ts

@@ -0,0 +1,34 @@
+import { BuildCellPropsFunction, CalendarMode, DateAndTime, Range, RangePosition, ViewMode } from '../types.js';
+/** Чистая классификация ячейки календаря (без побочных эффектов фокуса/`firstNotDisableCell`). */
+export type CellClassification = {
+    disabled: boolean;
+    holiday: boolean;
+    rangePosition: RangePosition;
+    checked: boolean;
+    current: boolean;
+    another: boolean;
+    label: string;
+};
+export type ClassifyCellParams = {
+    date: Date;
+    /** Дата периода, к которому относится сетка ячейки — определяет `another`. */
+    viewDate: Date;
+    viewMode: ViewMode;
+    mode: CalendarMode | 'time';
+    value?: Range;
+    preselectedRange?: Range;
+    dateAndTime?: DateAndTime;
+    isDateFilled(): boolean;
+    showHolidays: boolean;
+    today?: Date;
+    buildCellProps?: BuildCellPropsFunction;
+    isTheSameItem(date1: Date, date2: Date): boolean;
+    isInPeriod(viewDate: Date, date: Date): boolean;
+    getItemLabel(date: Date): string;
+};
+/**
+ * Классифицирует одну ячейку календаря (`checked` / `holiday` / `rangePosition` / `current` / `another` / `label`).
+ * Date-driven и переиспользуемая: один `viewDate` на сетку, без обращения к `CalendarContext`, фокусу и
+ * `firstNotDisableCell`. Используется и десктопным `useGrid`, и мобильными «стопками» сеток.
+ */
+export declare function classifyCell({ date, viewDate, viewMode, mode, value, preselectedRange, dateAndTime, isDateFilled, showHolidays, today, buildCellProps, isTheSameItem, isInPeriod, getItemLabel, }: ClassifyCellParams): CellClassification;

package/dist/esm/hooks/classifyCell.js

@@ -0,0 +1,42 @@
+import { CALENDAR_MODE, RANGE_POSITION } from '../constants.js';
+import { getInRangePosition, isWeekend } from '../utils.js';
+/**
+ * Классифицирует одну ячейку календаря (`checked` / `holiday` / `rangePosition` / `current` / `another` / `label`).
+ * Date-driven и переиспользуемая: один `viewDate` на сетку, без обращения к `CalendarContext`, фокусу и
+ * `firstNotDisableCell`. Используется и десктопным `useGrid`, и мобильными «стопками» сеток.
+ */
+export function classifyCell({ date, viewDate, viewMode, mode, value, preselectedRange, dateAndTime, isDateFilled, showHolidays, today, buildCellProps, isTheSameItem, isInPeriod, getItemLabel, }) {
+    let disabled = false;
+    let holiday;
+    let cellProps = { isDisabled: false };
+    if (buildCellProps) {
+        cellProps = buildCellProps(date, viewMode);
+        disabled = cellProps?.isDisabled ?? false;
+        holiday = cellProps.isHoliday;
+    }
+    if (holiday === undefined) {
+        holiday = showHolidays && isWeekend(date, viewMode);
+    }
+    const dateTimeSelectedValue = isDateFilled()
+        ? new Date(dateAndTime?.year ?? 0, dateAndTime?.month ?? 0, dateAndTime?.day ?? 0)
+        : undefined;
+    const isRangeMode = mode === CALENDAR_MODE.DateRange || mode === CALENDAR_MODE.MonthRange || mode === CALENDAR_MODE.YearRange;
+    const rangePosition = isRangeMode
+        ? getInRangePosition(date, viewMode, preselectedRange || value)
+        : RANGE_POSITION.Out;
+    const isSelectedValue = value && !preselectedRange && !dateTimeSelectedValue
+        ? isTheSameItem(value[0], date) || isTheSameItem(value[1], date)
+        : false;
+    const isPreselected = preselectedRange ? isTheSameItem(preselectedRange[0], date) : false;
+    const isDateTimeValueSelected = dateTimeSelectedValue ? isTheSameItem(dateTimeSelectedValue, date) : false;
+    const current = isTheSameItem(today || new Date(), date);
+    return {
+        disabled,
+        holiday: holiday ?? false,
+        rangePosition,
+        current,
+        another: !isInPeriod(viewDate, date),
+        label: getItemLabel(date),
+        checked: isSelectedValue || isPreselected || isDateTimeValueSelected || rangePosition !== RANGE_POSITION.Out,
+    };
+}

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './classifyCell.js';
+export * from './useDateAndTime.js';
+export * from './useGrid.js';
+export * from './useCalendarContext.js';
+export * from './useOpenTrigger.js';
+export * from './useTimeDrumHandlers.js';
+export * from './useTimePickerValueBridge.js';

package/dist/esm/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './classifyCell.js';
+export * from './useDateAndTime.js';
+export * from './useGrid.js';
+export * from './useCalendarContext.js';
+export * from './useOpenTrigger.js';
+export * from './useTimeDrumHandlers.js';
+export * from './useTimePickerValueBridge.js';

package/dist/esm/hooks/useCalendarContext.d.ts

@@ -0,0 +1 @@
+export declare function useCalendarContext(): import("../helperComponents").CalendarContextType;

package/dist/esm/hooks/useCalendarContext.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { CalendarContext } from '../helperComponents/index.js';
+export function useCalendarContext() {
+    return useContext(CalendarContext);
+}

package/dist/esm/hooks/useDateAndTime.d.ts

@@ -0,0 +1,14 @@
+import { DateAndTime, Range, TimeValue } from '../types.js';
+export declare function useDateAndTime({ showSeconds, value, }: {
+    showSeconds?: boolean;
+    value: Range | TimeValue | undefined;
+}): {
+    dateAndTime: DateAndTime;
+    setDateAndTime: import("react").Dispatch<import("react").SetStateAction<DateAndTime>>;
+    isDateAndTimeFilled: () => boolean;
+    isTimeFilled: () => boolean;
+    isDateFilled: () => boolean;
+    onDateChange: (value: Pick<DateAndTime, "year" | "month" | "day"> | Date) => void;
+    onTimeChange: (value: TimeValue | Date) => void;
+    onDateAndTimeChange: (value: DateAndTime | Date) => void;
+};

package/dist/esm/hooks/useDateAndTime.js

@@ -0,0 +1,108 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isTimePortionComplete } from '../utils.js';
+export function useDateAndTime({ showSeconds, value, }) {
+    const [dateAndTime, setDateAndTime] = useState(() => {
+        if (Array.isArray(value)) {
+            const initialValue = value[0];
+            return {
+                year: initialValue.getFullYear(),
+                month: initialValue.getMonth(),
+                day: initialValue.getDate(),
+                hours: initialValue.getHours(),
+                minutes: initialValue.getMinutes(),
+                seconds: initialValue.getSeconds(),
+            };
+        }
+        return {
+            year: undefined,
+            month: undefined,
+            day: undefined,
+            hours: value?.hours,
+            minutes: value?.minutes,
+            seconds: value?.seconds,
+        };
+    });
+    const isDateFilled = useCallback(() => {
+        const { year, month, day } = dateAndTime;
+        return [year, month, day].every(value => value !== undefined);
+    }, [dateAndTime]);
+    const isTimeFilled = useCallback(() => isTimePortionComplete(dateAndTime, showSeconds), [dateAndTime, showSeconds]);
+    const isDateAndTimeFilled = useCallback(() => isTimeFilled() && isDateFilled(), [isDateFilled, isTimeFilled]);
+    const onDateChange = useCallback((value) => {
+        if (value instanceof Date) {
+            setDateAndTime(prevDate => ({
+                ...prevDate,
+                year: value.getFullYear(),
+                month: value.getMonth(),
+                day: value.getDate(),
+            }));
+        }
+        else {
+            setDateAndTime(prevDate => ({ ...prevDate, ...value }));
+        }
+    }, []);
+    const onTimeChange = useCallback((value) => {
+        if (value instanceof Date) {
+            setDateAndTime(prevDate => ({
+                ...prevDate,
+                hours: value.getHours(),
+                minutes: value.getMinutes(),
+                seconds: value.getSeconds(),
+            }));
+        }
+        else {
+            setDateAndTime(prevDate => ({ ...prevDate, ...value }));
+        }
+    }, []);
+    const onDateAndTimeChange = useCallback((value) => {
+        if (value instanceof Date) {
+            setDateAndTime({
+                year: value.getFullYear(),
+                month: value.getMonth(),
+                day: value.getDate(),
+                hours: value.getHours(),
+                minutes: value.getMinutes(),
+                seconds: value.getSeconds(),
+            });
+        }
+        else {
+            setDateAndTime(value);
+        }
+    }, []);
+    /** Левый конец Range из пропа: полный sync только при новом instant, иначе не затираем время до onChange. */
+    const lastSyncedRangeStartMs = useRef(null);
+    const lastSyncedTimeValueKey = useRef(null);
+    useEffect(() => {
+        if (!value) {
+            lastSyncedRangeStartMs.current = null;
+            lastSyncedTimeValueKey.current = null;
+            setDateAndTime({});
+            return;
+        }
+        if (Array.isArray(value)) {
+            lastSyncedTimeValueKey.current = null;
+            const rangeStartMs = value[0].getTime();
+            if (lastSyncedRangeStartMs.current !== rangeStartMs) {
+                lastSyncedRangeStartMs.current = rangeStartMs;
+                onDateAndTimeChange(value[0]);
+            }
+            return;
+        }
+        lastSyncedRangeStartMs.current = null;
+        const timeKey = `${value.hours ?? ''}:${value.minutes ?? ''}:${value.seconds ?? ''}`;
+        if (lastSyncedTimeValueKey.current !== timeKey) {
+            lastSyncedTimeValueKey.current = timeKey;
+            onTimeChange(value);
+        }
+    }, [onDateAndTimeChange, onTimeChange, value]);
+    return {
+        dateAndTime,
+        setDateAndTime,
+        isDateAndTimeFilled,
+        isTimeFilled,
+        isDateFilled,
+        onDateChange,
+        onTimeChange,
+        onDateAndTimeChange,
+    };
+}

package/dist/esm/hooks/useGrid.d.ts

@@ -0,0 +1,13 @@
+import { KeyboardEventHandler } from 'react';
+import { BaseGrid, Cell } from '../types.js';
+export type UseGridParams = {
+    buildGrid(viewDate: Date): BaseGrid;
+    isTheSameItem(date1: Date, date2: Date): boolean;
+    isInPeriod(viewDate: Date, date: Date): boolean;
+    getItemLabel(date: Date): string;
+    onSelect?(date: Date): void;
+    onPreselect?(date: Date): void;
+    onLeave?(): void;
+    onKeyDown?: KeyboardEventHandler;
+};
+export declare function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameItem, getItemLabel, isInPeriod, onKeyDown, }: UseGridParams): Cell[][];

package/dist/esm/hooks/useGrid.js

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import { stringifyAddress } from '../utils.js';
+import { classifyCell } from './classifyCell.js';
+import { useCalendarContext } from './useCalendarContext.js';
+export function useGrid({ onSelect, onPreselect, onLeave, buildGrid, isTheSameItem, getItemLabel, isInPeriod, onKeyDown, }) {
+    const { today, showHolidays, preselectedRange, value, dateAndTime, mode, viewDate, viewMode, focus, buildCellProps, firstNotDisableCell, isDateFilled, } = useCalendarContext();
+    return useMemo(() => {
+        let hasFocusInGrid = false;
+        let currentItem;
+        let hasFoundFirstNotDisableCell = false;
+        const result = buildGrid(viewDate).map(row => row.map(({ date, address }) => {
+            const classification = classifyCell({
+                date,
+                viewDate,
+                viewMode,
+                mode,
+                value,
+                preselectedRange,
+                dateAndTime,
+                isDateFilled,
+                showHolidays,
+                today,
+                buildCellProps,
+                isTheSameItem,
+                isInPeriod,
+                getItemLabel,
+            });
+            if (!classification.disabled) {
+                if (firstNotDisableCell && !hasFoundFirstNotDisableCell) {
+                    firstNotDisableCell.current = address;
+                    hasFoundFirstNotDisableCell = true;
+                }
+            }
+            const tabIndex = focus && stringifyAddress(address) === focus ? 0 : -1;
+            hasFocusInGrid = tabIndex === 0 || hasFocusInGrid;
+            const cell = {
+                ...classification,
+                date,
+                onLeave,
+                address,
+                tabIndex,
+                onSelect,
+                onPreselect,
+                onKeyDown,
+            };
+            if (classification.current) {
+                currentItem = cell;
+            }
+            return cell;
+        }));
+        if (!hasFocusInGrid) {
+            (currentItem || result[0][0]).tabIndex = 0;
+        }
+        return result;
+    }, [
+        buildCellProps,
+        buildGrid,
+        dateAndTime,
+        firstNotDisableCell,
+        focus,
+        getItemLabel,
+        isDateFilled,
+        isInPeriod,
+        isTheSameItem,
+        mode,
+        onKeyDown,
+        onLeave,
+        onPreselect,
+        onSelect,
+        preselectedRange,
+        showHolidays,
+        today,
+        value,
+        viewDate,
+        viewMode,
+    ]);
+}

package/dist/esm/hooks/useOpenTrigger.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+/** Триггер открытия mobile-dropdown'а: valid element клонируется с onClick, остальное — span с Enter/Space. */
+export declare function useOpenTrigger(children: ReactNode, onOpen: () => void): ReactNode;

package/dist/esm/hooks/useOpenTrigger.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+/** Триггер открытия mobile-dropdown'а: valid element клонируется с onClick, остальное — span с Enter/Space. */
+export function useOpenTrigger(children, onOpen) {
+    if (isValidElement(children)) {
+        return cloneElement(children, {
+            onClick: (event) => {
+                children.props.onClick?.(event);
+                onOpen();
+            },
+        });
+    }
+    if (children == null) {
+        return null;
+    }
+    return (_jsx("span", { role: 'button', tabIndex: 0, onClick: onOpen, onKeyDown: (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onOpen();
+            }
+        }, children: children }));
+}

package/dist/esm/hooks/useTimeDrumHandlers.d.ts

@@ -0,0 +1,8 @@
+import { DateAndTime, TimeValue } from '../types.js';
+export type TimeDrumHandlers = {
+    onHoursChange(next: number): void;
+    onMinutesChange(next: number): void;
+    onSecondsChange(next: number): void;
+};
+/** Обработчики колонок `TimePickerDrum`: меняют одну часть в `dateAndTime`, остальные сохраняют. */
+export declare function useTimeDrumHandlers(dateAndTime: DateAndTime | undefined, onTimeChange: (value: TimeValue | Date) => void): TimeDrumHandlers;

package/dist/esm/hooks/useTimeDrumHandlers.js

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+/** Обработчики колонок `TimePickerDrum`: меняют одну часть в `dateAndTime`, остальные сохраняют. */
+export function useTimeDrumHandlers(dateAndTime, onTimeChange) {
+    const getTimeChangeHandler = useCallback((part) => (next) => {
+        onTimeChange({
+            hours: dateAndTime?.hours ?? 0,
+            minutes: dateAndTime?.minutes ?? 0,
+            seconds: dateAndTime?.seconds ?? 0,
+            [part]: next ?? dateAndTime?.[part] ?? 0,
+        });
+    }, [dateAndTime, onTimeChange]);
+    return {
+        onHoursChange: getTimeChangeHandler('hours'),
+        onMinutesChange: getTimeChangeHandler('minutes'),
+        onSecondsChange: getTimeChangeHandler('seconds'),
+    };
+}