@cloud-ru/ds-calendar 1.0.0

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

@@ -0,0 +1,53 @@
+const dayInMs = 24 * 60 * 60 * 1000;
+export function getDefaultPresets(t, today) {
+    const now = today || new Date();
+    const nowInMs = now.getTime();
+    const monthsAgo = (n) => {
+        const d = new Date(now);
+        d.setMonth(d.getMonth() - n);
+        return d;
+    };
+    const yearsAgo = (n) => {
+        const d = new Date(now);
+        d.setFullYear(d.getFullYear() - n);
+        return d;
+    };
+    const calculatePeriodUpToNow = (limit) => (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/dist/esm/helperComponents/TimeList/TimeList.d.ts

@@ -0,0 +1,16 @@
+import { ListProps } from '@cloud-ru/ds-list';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { RefObject } from 'react';
+import { OnKeyDownGetter } from '../../types.js';
+export type TimeListProps = WithSupportProps<{
+    numberOfItems: number;
+    value?: number;
+    onChange(value: number): void;
+    className?: string;
+    onKeyDownGetter?: OnKeyDownGetter;
+    keyboardNavigationRef?: ListProps['keyboardNavigationRef'];
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
+}>;
+export declare function TimeList({ numberOfItems, value, onChange, className, onKeyDownGetter, keyboardNavigationRef, navigationStartRef, 'data-test-id': dataTestId, ...rest }: TimeListProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TimeList/TimeList.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getDefaultItemId, List } from '@cloud-ru/ds-list';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { createRef, useImperativeHandle, useMemo } from 'react';
+import { useCalendarContext } from '../../hooks/index.js';
+import styles from './styles.module.css';
+export function TimeList({ numberOfItems, value, onChange, className, onKeyDownGetter, keyboardNavigationRef, navigationStartRef, 'data-test-id': dataTestId, ...rest }) {
+    const { size } = useCalendarContext();
+    const itemsRef = useMemo(() => new Array(numberOfItems).fill(null).map(() => createRef()), [numberOfItems]);
+    useImperativeHandle(navigationStartRef, () => ({
+        focus: () => {
+            keyboardNavigationRef?.current?.focusItem(getDefaultItemId(value ? value : 0));
+        },
+    }), [keyboardNavigationRef, value]);
+    const items = useMemo(() => new Array(numberOfItems).fill(undefined).map((_, index) => ({
+        id: index,
+        content: (_jsx("span", { className: styles.label, "data-size": size, children: String(index).padStart(2, '0') })),
+        'data-test-id': `${dataTestId}-${index}`,
+        onKeyDown: onKeyDownGetter?.(index),
+        itemRef: itemsRef[index],
+    })), [dataTestId, itemsRef, numberOfItems, onKeyDownGetter, size]);
+    return (_jsx(List, { ...extractSupportProps(rest), size: size, items: items, scroll: true, keyboardNavigationRef: keyboardNavigationRef, selection: { mode: 'single', value, onChange: id => onChange(Number(id)) }, className: className, hasListInFocusChain: false, scrollToSelectedItem: true, marker: false }));
+}

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

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

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

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

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

@@ -0,0 +1,29 @@
+.label{
+  display:block;
+  width:100%;
+  text-align:center;
+}
+.label[data-size=s]{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.label[data-size=m]{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.label[data-size=l]{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}

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

@@ -0,0 +1,7 @@
+export type TimePickerBaseProps = {
+    /** CSS-класс */
+    className?: string;
+    /** Фиксированная ширина (оверрайдит fitToContainer) */
+    fixedWidth?: boolean;
+};
+export declare function TimePickerBase({ className, fixedWidth }: TimePickerBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TimePickerBase/TimePickerBase.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Divider } from '@cloud-ru/ds-divider';
+import { getDefaultItemId } from '@cloud-ru/ds-list';
+import cn from 'classnames';
+import { useCallback, useMemo } from 'react';
+import { AUTOFOCUS, HOURS, MINUTES, SECONDS } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { TimeList } from '../TimeList/index.js';
+import styles from './styles.module.css';
+export function TimePickerBase({ className, fixedWidth }) {
+    const { size, mode, fitToContainer, showSeconds, dateAndTime, onTimeChange, applyButtonRef, currentButtonRef, hoursKeyboardNavigationRef, minutesKeyboardNavigationRef, secondsKeyboardNavigationRef, setFocus, getTestId, navigationStartRef, onFocusLeave, } = useCalendarContext();
+    const hours = dateAndTime?.hours;
+    const minutes = dateAndTime?.minutes;
+    const seconds = dateAndTime?.seconds;
+    const getTimeChangeHandler = useCallback((propName) => (value) => {
+        onTimeChange({
+            hours: dateAndTime?.hours ?? 0,
+            minutes: dateAndTime?.minutes ?? 0,
+            seconds: dateAndTime?.seconds ?? 0,
+            [propName]: value ?? dateAndTime?.[propName] ?? 0,
+        });
+    }, [dateAndTime, onTimeChange]);
+    const onHoursChange = getTimeChangeHandler('hours');
+    const onMinutesChange = getTimeChangeHandler('minutes');
+    const onSecondsChange = getTimeChangeHandler('seconds');
+    const onHourKeyDownGetter = useCallback(id => event => {
+        switch (event.key) {
+            case 'Tab':
+                if (mode === 'time' && event.shiftKey) {
+                    onFocusLeave?.('prev');
+                    break;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    setFocus(AUTOFOCUS);
+                }
+                else {
+                    minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
+                }
+                break;
+            case 'Enter':
+                minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
+                break;
+            case 'ArrowUp':
+                if (mode === 'time' && id === 0) {
+                    onFocusLeave?.('prev');
+                    break;
+                }
+                break;
+            default:
+                break;
+        }
+    }, [minutes, minutesKeyboardNavigationRef, mode, onFocusLeave, setFocus]);
+    const onMinuteKeyDownGetter = useCallback(() => event => {
+        switch (event.key) {
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    hoursKeyboardNavigationRef.current?.focusItem(getDefaultItemId(hours ?? 0));
+                }
+                else {
+                    if (showSeconds) {
+                        secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(seconds ?? 0));
+                    }
+                    else {
+                        currentButtonRef.current?.focus();
+                    }
+                }
+                break;
+            case 'Enter':
+                if (showSeconds) {
+                    secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(seconds ?? 0));
+                }
+                else {
+                    applyButtonRef.current?.focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [
+        applyButtonRef,
+        currentButtonRef,
+        hours,
+        hoursKeyboardNavigationRef,
+        seconds,
+        secondsKeyboardNavigationRef,
+        showSeconds,
+    ]);
+    const onSecondKeyDownGetter = useCallback(() => event => {
+        switch (event.key) {
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(minutes ?? 0));
+                }
+                else {
+                    currentButtonRef.current?.focus();
+                }
+                break;
+            case 'Enter':
+                applyButtonRef.current?.focus();
+                break;
+            default:
+                break;
+        }
+    }, [applyButtonRef, currentButtonRef, minutes, minutesKeyboardNavigationRef]);
+    const timeValue = useMemo(() => {
+        const selectedTime = [hours, minutes];
+        if (showSeconds) {
+            selectedTime.push(seconds);
+        }
+        return selectedTime
+            .map(value => {
+            if (value) {
+                return value.toString().padStart(2, '0');
+            }
+            return '00';
+        })
+            .join(':');
+    }, [hours, minutes, seconds, showSeconds]);
+    return (_jsxs("div", { className: cn(styles.root, className), "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: [_jsx("div", { className: styles.header, "data-size": size, children: _jsx("div", { className: styles.time, "data-size": size, children: timeValue }) }), _jsx(Divider, { className: styles.divider, orientation: 'horizontal' }), _jsxs("div", { className: styles.listTimeDesktop, "data-size": size, "data-fit-to-container": fitToContainer || undefined, "data-fixed-width": fixedWidth || undefined, children: [_jsx(TimeList, { className: styles.timeListColumn, value: hours, onChange: onHoursChange, "data-test-id": getTestId('hours'), numberOfItems: HOURS, onKeyDownGetter: onHourKeyDownGetter, keyboardNavigationRef: hoursKeyboardNavigationRef, navigationStartRef: mode === 'time' ? navigationStartRef : undefined }), _jsx(TimeList, { className: styles.timeListColumn, value: minutes, onChange: onMinutesChange, "data-test-id": getTestId('minutes'), numberOfItems: MINUTES, onKeyDownGetter: onMinuteKeyDownGetter, keyboardNavigationRef: minutesKeyboardNavigationRef }), showSeconds && (_jsx(TimeList, { className: styles.timeListColumn, value: seconds, onChange: onSecondsChange, "data-test-id": getTestId('seconds'), numberOfItems: SECONDS, onKeyDownGetter: onSecondKeyDownGetter, keyboardNavigationRef: secondsKeyboardNavigationRef }))] })] }));
+}

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

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

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

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

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

@@ -0,0 +1,108 @@
+.divider{
+  flex-shrink:0;
+  height:auto;
+}
+
+.root{
+  display:inline-flex;
+  flex-direction:column;
+  height:100%;
+}
+
+.listTimeDesktop{
+  display:flex;
+  flex-grow:1;
+}
+.listTimeDesktop[data-size=s]{
+  min-width:160px;
+  height:224px;
+  padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.listTimeDesktop[data-size=m]{
+  min-width:192px;
+  height:224px;
+  padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.listTimeDesktop[data-size=l]{
+  min-width:224px;
+  height:280px;
+  padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}
+.listTimeDesktop:not([data-fixed-width])[data-fit-to-container]{
+  width:100%;
+}
+
+.timeListColumn{
+  flex:1;
+}
+.timeListColumn [role=menuitem]{
+  align-items:center;
+}
+.timeListColumn [role=menuitem][data-size=s]{
+  min-height:calc(224px / 7);
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.timeListColumn [role=menuitem][data-size=m]{
+  min-height:calc(224px / 7);
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.timeListColumn [role=menuitem][data-size=l]{
+  min-height:calc(280px / 7);
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+
+.header{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+}
+.header[data-size=s]{
+  padding-left:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  padding-right:var(--sn-calendar-anatomy-size-s-header-paddingHorizontal, var(--sn-primitive-dimension-6, 6px));
+  height:var(--sn-calendar-anatomy-size-s-header-height, var(--sn-primitive-dimension-32, 32px));
+}
+.header[data-size=m]{
+  padding-left:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-calendar-anatomy-size-m-header-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  height:var(--sn-calendar-anatomy-size-m-header-height, var(--sn-primitive-dimension-40, 40px));
+}
+.header[data-size=l]{
+  padding-left:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  padding-right:var(--sn-calendar-anatomy-size-l-header-paddingHorizontal, var(--sn-primitive-dimension-12, 12px));
+  height:var(--sn-calendar-anatomy-size-l-header-height, var(--sn-primitive-dimension-56, 56px));
+}
+
+.time{
+  display:flex;
+  align-items:center;
+  height:var(--sn-primitive-dimension-24, 24px);
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  text-align:center;
+}
+.time[data-size=s]{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+.time[data-size=m]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.time[data-size=l]{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}

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

@@ -0,0 +1,24 @@
+/** Императивный интерфейс барабана: форсит «оседание» всех колонок (см. FF-8654, комментарий #2). */
+export type TimePickerDrumHandle = {
+    /** Синхронно завершает незакоммиченные жесты во всех колонках и возвращает итоговое время. */
+    flush(): {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+};
+export declare const TimePickerDrum: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    size?: import("../..").Size;
+    showSeconds?: boolean;
+    selectedDateLabel?: string;
+    hours: number;
+    minutes: number;
+    seconds?: number;
+    onHoursChange(value: number): void;
+    onMinutesChange(value: number): void;
+    onSecondsChange?(value: number): void;
+    customOptions?: import("./types").TimePickerDrumCustomOptions;
+    className?: string;
+} & import("react").RefAttributes<TimePickerDrumHandle>>;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { HOURS, MINUTES, SECONDS, SIZE } from '../../constants.js';
+import { noop, TEST_IDS } from './constants.js';
+import styles from './styles.module.css';
+import { TimePickerDrumWheelColumn } from './TimePickerDrumWheelColumn.js';
+import { buildColumnValues, formatDisplayPart, formatSelectedDateLabelForDisplay, getSizeLimits, nearestInSortedValues, } from './utils.js';
+export const TimePickerDrum = forwardRef(function TimePickerDrum({ size = SIZE.M, showSeconds = true, selectedDateLabel, hours, minutes, seconds, onHoursChange, onMinutesChange, onSecondsChange, customOptions, className, 'data-test-id': dataTestId, ...rest }, ref) {
+    const { itemHeight, pickerHeight } = useMemo(() => getSizeLimits(size), [size]);
+    const hoursColumnRef = useRef(null);
+    const minutesColumnRef = useRef(null);
+    const secondsColumnRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        flush: () => ({
+            hours: hoursColumnRef.current?.flush() ?? hours,
+            minutes: minutesColumnRef.current?.flush() ?? minutes,
+            seconds: secondsColumnRef.current?.flush() ?? seconds ?? 0,
+        }),
+    }), [hours, minutes, seconds]);
+    const hourValues = useMemo(() => buildColumnValues(HOURS, customOptions?.allowedHours, customOptions?.minHour), [customOptions?.allowedHours, customOptions?.minHour]);
+    const minuteValues = useMemo(() => buildColumnValues(MINUTES, customOptions?.allowedMinutes, customOptions?.minMinute), [customOptions?.allowedMinutes, customOptions?.minMinute]);
+    const secondValues = useMemo(() => buildColumnValues(SECONDS, customOptions?.allowedSeconds, customOptions?.minSecond), [customOptions?.allowedSeconds, customOptions?.minSecond]);
+    /**
+     * Подгонка `hours` / `minutes` / `seconds` под `customOptions`: при несовпадении с допустимым набором
+     * вызывается ближайший `on*Change`. В контролируемом режиме колбэк обязан обновить проп до этого значения;
+     * иначе эффект будет срабатывать на каждом рендере (риск цикла обновлений).
+     */
+    useEffect(() => {
+        const next = nearestInSortedValues(hourValues, hours);
+        if (!Number.isFinite(next) || next === hours) {
+            return;
+        }
+        onHoursChange(next);
+    }, [hourValues, hours, onHoursChange]);
+    useEffect(() => {
+        const next = nearestInSortedValues(minuteValues, minutes);
+        if (!Number.isFinite(next) || next === minutes) {
+            return;
+        }
+        onMinutesChange(next);
+    }, [minuteValues, minutes, onMinutesChange]);
+    useEffect(() => {
+        if (!showSeconds || onSecondsChange == null) {
+            return;
+        }
+        const s = seconds ?? 0;
+        const next = nearestInSortedValues(secondValues, s);
+        if (!Number.isFinite(next) || next === s) {
+            return;
+        }
+        onSecondsChange(next);
+    }, [onSecondsChange, secondValues, seconds, showSeconds]);
+    const timeDisplay = useMemo(() => {
+        const h = formatDisplayPart(hours);
+        const m = formatDisplayPart(minutes);
+        if (showSeconds) {
+            const s = formatDisplayPart(seconds ?? 0);
+            return { main: `${h}:${m}`, secondsPart: `:${s}` };
+        }
+        return { main: `${h}:${m}`, secondsPart: undefined };
+    }, [hours, minutes, seconds, showSeconds]);
+    const selectedDateLabelDisplay = useMemo(() => {
+        if (!selectedDateLabel) {
+            return '';
+        }
+        return formatSelectedDateLabelForDisplay(selectedDateLabel);
+    }, [selectedDateLabel]);
+    return (_jsxs("div", { className: cn(styles.root, className), "data-size": size, "data-show-seconds": showSeconds || undefined, "data-bottom-sheet-no-drag": true, "data-test-id": dataTestId ?? TEST_IDS.root, ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.selectedTime, "data-test-id": TEST_IDS.selectedTime, children: [selectedDateLabelDisplay !== '' && (_jsx("div", { className: styles.dateLabel, "data-test-id": TEST_IDS.selectedDate, children: selectedDateLabelDisplay })), _jsxs("div", { className: styles.timeRow, children: [_jsx("span", { className: styles.timeMain, children: timeDisplay.main }), timeDisplay.secondsPart != null && _jsx("span", { className: styles.timeSeconds, children: timeDisplay.secondsPart })] })] }), _jsxs("div", { className: styles.drum, "data-test-id": TEST_IDS.drum, children: [_jsx(TimePickerDrumWheelColumn, { ref: hoursColumnRef, className: styles.column, value: hours, options: hourValues, formatLabel: formatDisplayPart, height: pickerHeight, itemHeight: itemHeight, "data-test-id": TEST_IDS.hoursColumn, onChange: onHoursChange }), _jsx(TimePickerDrumWheelColumn, { ref: minutesColumnRef, className: styles.column, value: minutes, options: minuteValues, formatLabel: formatDisplayPart, height: pickerHeight, itemHeight: itemHeight, "data-test-id": TEST_IDS.minutesColumn, onChange: onMinutesChange }), showSeconds && (_jsx(TimePickerDrumWheelColumn, { ref: secondsColumnRef, className: styles.column, value: seconds ?? 0, options: secondValues, formatLabel: formatDisplayPart, height: pickerHeight, itemHeight: itemHeight, "data-test-id": TEST_IDS.secondsColumn, onChange: onSecondsChange ?? noop }))] })] }));
+});

package/dist/esm/helperComponents/TimePickerDrum/TimePickerDrumWheelColumn.d.ts

@@ -0,0 +1,34 @@
+export type TimePickerDrumWheelColumnProps = {
+    /**
+     * Допустимые значения колонки: отсортированный по возрастанию список без дубликатов.
+     * Циклическая прокрутка выполняется только по индексам этого массива.
+     */
+    options: number[];
+    /** Текущее выбранное значение; должно входить в `options` (иначе для отображения берётся ближайшее из списка). */
+    value: number;
+    /** Вызывается при смене значения после жеста (отпускание / `lostpointercapture`) или после паузы при прокрутке колесом. */
+    onChange(value: number): void;
+    /** Высота одной строки барабана в пикселях (шаг дискретизации при перетаскивании и колесе). */
+    itemHeight: number;
+    /** Высота видимой области колонки («окна») в пикселях. */
+    height: number;
+    /** Форматирование подписи в ячейке (например с ведущим нулём для минут). */
+    formatLabel(value: number): string;
+    /** Дополнительный CSS-класс корневого элемента колонки (обёртка с обработчиками указателя). */
+    className?: string;
+    /** Идентификатор для автотестов на корневом элементе колонки. */
+    'data-test-id'?: string;
+};
+/** Императивный интерфейс колонки: форсит «оседание» незавершённого жеста (инерция/колесо) в `onChange`. */
+export type TimePickerDrumWheelColumnHandle = {
+    /**
+     * Синхронно завершает незакоммиченный жест (инерцию и/или колесо), вызывая `onChange` немедленно,
+     * и возвращает итоговое значение колонки. Нужен, чтобы быстрое закрытие/переход не терял значение,
+     * которое иначе закоммитилось бы только после доворота (см. FF-8654, комментарий #2).
+     */
+    flush(): number;
+};
+/**
+ * Колонка «барабана»: 5 строк в DOM, значения по кругу в пределах `options`.
+ */
+export declare const TimePickerDrumWheelColumn: import("react").ForwardRefExoticComponent<TimePickerDrumWheelColumnProps & import("react").RefAttributes<TimePickerDrumWheelColumnHandle>>;