@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/helperComponents/MonthView/constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WEEK_STARTS_WITH_SUNDAY = exports.WEEK_STARTS_WITH_MONDAY = void 0;
+exports.WEEK_STARTS_WITH_MONDAY = [1, 2, 3, 4, 5, 6, 0];
+exports.WEEK_STARTS_WITH_SUNDAY = [0, 1, 2, 3, 4, 5, 6];

package/dist/cjs/helperComponents/MonthView/index.d.ts

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

package/dist/cjs/helperComponents/MonthView/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MonthView"), exports);

package/dist/cjs/helperComponents/MonthView/utils.d.ts

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

package/dist/cjs/helperComponents/MonthView/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildMonthGrid = void 0;
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const constants_2 = require("./constants");
+const buildMonthGrid = (date, locale) => {
+    const result = [];
+    const week = (0, utils_1.getStartOfWeek)(locale) === 0 ? constants_2.WEEK_STARTS_WITH_SUNDAY : constants_2.WEEK_STARTS_WITH_MONDAY;
+    const startGap = week.indexOf(date.getDay());
+    let currentDate = new Date(date.getFullYear(), date.getMonth(), 1 - startGap);
+    const { rows } = constants_1.GRID_SIZE[constants_1.VIEW_MODE.Month];
+    for (let i = 0; i < rows; i++) {
+        const row = [];
+        for (let j = 0; j < week.length; j++) {
+            row.push({ date: currentDate, address: [i, j] });
+            currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1);
+        }
+        result.push(row);
+    }
+    return result;
+};
+exports.buildMonthGrid = buildMonthGrid;

package/dist/cjs/helperComponents/NavButton/NavButton.d.ts

@@ -0,0 +1,15 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { JSX } from 'react';
+export type ButtonProps = WithSupportProps<{
+    focusName?: string;
+    label?: string;
+    onClick?(): void;
+    onLeftArrowKeyDown?(): void;
+    onRightArrowKeyDown?(): void;
+    onDownArrowKeyDown?(): void;
+    tabIndex?: 0 | -1;
+    disabled?: boolean;
+    icon?: JSX.Element;
+    useNavigationStartRef?: boolean;
+}>;
+export declare function NavButton({ label, icon, onClick, focusName, tabIndex, onLeftArrowKeyDown, onRightArrowKeyDown, onDownArrowKeyDown, disabled, useNavigationStartRef, 'aria-label': ariaLabel, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/NavButton/NavButton.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavButton = NavButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+function NavButton({ label, icon, onClick, focusName, tabIndex, onLeftArrowKeyDown, onRightArrowKeyDown, onDownArrowKeyDown, disabled, useNavigationStartRef, 'aria-label': ariaLabel, ...rest }) {
+    const ref = (0, react_1.useRef)(null);
+    const { size, focus, setFocus, onFocusLeave, navigationStartRef } = (0, hooks_1.useCalendarContext)();
+    (0, utils_1.useLayoutEffect)(() => {
+        if (focus && focus === focusName) {
+            (0, utils_1.focusWithoutScroll)(ref.current);
+        }
+    }, [focus, focusName]);
+    const onKeyDownHandler = (0, react_1.useCallback)((e) => {
+        // Стрелки навигации по календарю гасим: иначе нативное поведение прокручивает страницу
+        // (фокус на header-кнопке, событие уходит за календарь).
+        (0, utils_1.preventScrollOnArrowKeys)(e);
+        switch (e.key) {
+            case 'ArrowLeft':
+                onLeftArrowKeyDown?.();
+                break;
+            case 'ArrowRight':
+                onRightArrowKeyDown?.();
+                break;
+            case 'ArrowDown':
+                onDownArrowKeyDown?.();
+                break;
+            case 'ArrowUp':
+                onFocusLeave?.('prev');
+                break;
+            case 'Tab':
+                if (e.shiftKey) {
+                    onFocusLeave?.('prev');
+                }
+                break;
+            default:
+                break;
+        }
+    }, [onDownArrowKeyDown, onFocusLeave, onLeftArrowKeyDown, onRightArrowKeyDown]);
+    (0, react_1.useImperativeHandle)(useNavigationStartRef && navigationStartRef ? navigationStartRef : null, () => ({
+        focus: () => {
+            (0, utils_1.focusWithoutScroll)(ref.current);
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { label: label, view: 'function', appearance: 'neutral', icon: icon, iconPosition: 'after', size: size, tabIndex: tabIndex, innerRef: ref, onClick: onClick, onKeyDown: onKeyDownHandler, onFocus: () => setFocus(focusName), onBlur: () => setFocus(undefined), disabled: disabled, "aria-label": ariaLabel, ...(0, utils_1.extractSupportProps)(rest) }));
+}

package/dist/cjs/helperComponents/NavButton/index.d.ts

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

package/dist/cjs/helperComponents/NavButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NavButton"), exports);

package/dist/cjs/helperComponents/PeriodPresetsList/PeriodPresetsList.d.ts

@@ -0,0 +1,10 @@
+import { PresetItem, Range } from '../../types';
+export type PresetsListProps = {
+    /** Действие при выборе пресета */
+    onChange(range: Range): void;
+    /** Список пресетов */
+    items: PresetItem[];
+    /** CSS-класс */
+    className?: string;
+};
+export declare function PeriodPresetsList({ items, onChange, className }: PresetsListProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/PeriodPresetsList/PeriodPresetsList.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PeriodPresetsList = PeriodPresetsList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@cloud-ru/ds-list");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+function PeriodPresetsList({ items, onChange, className }) {
+    const { size } = (0, hooks_1.useCalendarContext)();
+    const listItems = (0, react_1.useMemo)(() => items.map(item => ({
+        id: item.id,
+        content: {
+            label: item.label,
+        },
+        onClick() {
+            onChange(item.range);
+        },
+        checked: false,
+    })), [items, onChange]);
+    return ((0, jsx_runtime_1.jsx)(list_1.List, { className: className, size: size, items: listItems, scroll: true, selection: { mode: 'single', value: undefined }, hasListInFocusChain: false }));
+}

package/dist/cjs/helperComponents/PeriodPresetsList/index.d.ts

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

package/dist/cjs/helperComponents/PeriodPresetsList/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PeriodPresetsList"), exports);

package/dist/cjs/helperComponents/PeriodPresetsList/utils.d.ts

@@ -0,0 +1,5 @@
+import { calendarLocale } from '../../locale';
+import { PresetItem } from '../../types';
+type TFunction = ReturnType<typeof calendarLocale.useTranslations>['t'];
+export declare function getDefaultPresets(t: TFunction, today?: Date): PresetItem[];
+export {};

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultPresets = getDefaultPresets;
+const dayInMs = 24 * 60 * 60 * 1000;
+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/cjs/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';
+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/cjs/helperComponents/TimeList/TimeList.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeList = TimeList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const list_1 = require("@cloud-ru/ds-list");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TimeList({ numberOfItems, value, onChange, className, onKeyDownGetter, keyboardNavigationRef, navigationStartRef, 'data-test-id': dataTestId, ...rest }) {
+    const { size } = (0, hooks_1.useCalendarContext)();
+    const itemsRef = (0, react_1.useMemo)(() => new Array(numberOfItems).fill(null).map(() => (0, react_1.createRef)()), [numberOfItems]);
+    (0, react_1.useImperativeHandle)(navigationStartRef, () => ({
+        focus: () => {
+            keyboardNavigationRef?.current?.focusItem((0, list_1.getDefaultItemId)(value ? value : 0));
+        },
+    }), [keyboardNavigationRef, value]);
+    const items = (0, react_1.useMemo)(() => new Array(numberOfItems).fill(undefined).map((_, index) => ({
+        id: index,
+        content: ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.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 ((0, jsx_runtime_1.jsx)(list_1.List, { ...(0, utils_1.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/cjs/helperComponents/TimeList/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TimeList"), exports);

package/dist/cjs/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/cjs/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/cjs/helperComponents/TimePickerBase/TimePickerBase.js

@@ -0,0 +1,132 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePickerBase = TimePickerBase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const divider_1 = require("@cloud-ru/ds-divider");
+const list_1 = require("@cloud-ru/ds-list");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const TimeList_1 = require("../TimeList");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TimePickerBase({ className, fixedWidth }) {
+    const { size, mode, fitToContainer, showSeconds, dateAndTime, onTimeChange, applyButtonRef, currentButtonRef, hoursKeyboardNavigationRef, minutesKeyboardNavigationRef, secondsKeyboardNavigationRef, setFocus, getTestId, navigationStartRef, onFocusLeave, } = (0, hooks_1.useCalendarContext)();
+    const hours = dateAndTime?.hours;
+    const minutes = dateAndTime?.minutes;
+    const seconds = dateAndTime?.seconds;
+    const getTimeChangeHandler = (0, react_1.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 = (0, react_1.useCallback)(id => event => {
+        switch (event.key) {
+            case 'Tab':
+                if (mode === 'time' && event.shiftKey) {
+                    onFocusLeave?.('prev');
+                    break;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    setFocus(constants_1.AUTOFOCUS);
+                }
+                else {
+                    minutesKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(minutes ?? 0));
+                }
+                break;
+            case 'Enter':
+                minutesKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(minutes ?? 0));
+                break;
+            case 'ArrowUp':
+                if (mode === 'time' && id === 0) {
+                    onFocusLeave?.('prev');
+                    break;
+                }
+                break;
+            default:
+                break;
+        }
+    }, [minutes, minutesKeyboardNavigationRef, mode, onFocusLeave, setFocus]);
+    const onMinuteKeyDownGetter = (0, react_1.useCallback)(() => event => {
+        switch (event.key) {
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    hoursKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(hours ?? 0));
+                }
+                else {
+                    if (showSeconds) {
+                        secondsKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(seconds ?? 0));
+                    }
+                    else {
+                        currentButtonRef.current?.focus();
+                    }
+                }
+                break;
+            case 'Enter':
+                if (showSeconds) {
+                    secondsKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(seconds ?? 0));
+                }
+                else {
+                    applyButtonRef.current?.focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }, [
+        applyButtonRef,
+        currentButtonRef,
+        hours,
+        hoursKeyboardNavigationRef,
+        seconds,
+        secondsKeyboardNavigationRef,
+        showSeconds,
+    ]);
+    const onSecondKeyDownGetter = (0, react_1.useCallback)(() => event => {
+        switch (event.key) {
+            case 'Tab':
+                event.stopPropagation();
+                event.preventDefault();
+                if (event.shiftKey) {
+                    minutesKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(minutes ?? 0));
+                }
+                else {
+                    currentButtonRef.current?.focus();
+                }
+                break;
+            case 'Enter':
+                applyButtonRef.current?.focus();
+                break;
+            default:
+                break;
+        }
+    }, [applyButtonRef, currentButtonRef, minutes, minutesKeyboardNavigationRef]);
+    const timeValue = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.header, "data-size": size, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.time, "data-size": size, children: timeValue }) }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider, orientation: 'horizontal' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.listTimeDesktop, "data-size": size, "data-fit-to-container": fitToContainer || undefined, "data-fixed-width": fixedWidth || undefined, children: [(0, jsx_runtime_1.jsx)(TimeList_1.TimeList, { className: styles_module_scss_1.default.timeListColumn, value: hours, onChange: onHoursChange, "data-test-id": getTestId('hours'), numberOfItems: constants_1.HOURS, onKeyDownGetter: onHourKeyDownGetter, keyboardNavigationRef: hoursKeyboardNavigationRef, navigationStartRef: mode === 'time' ? navigationStartRef : undefined }), (0, jsx_runtime_1.jsx)(TimeList_1.TimeList, { className: styles_module_scss_1.default.timeListColumn, value: minutes, onChange: onMinutesChange, "data-test-id": getTestId('minutes'), numberOfItems: constants_1.MINUTES, onKeyDownGetter: onMinuteKeyDownGetter, keyboardNavigationRef: minutesKeyboardNavigationRef }), showSeconds && ((0, jsx_runtime_1.jsx)(TimeList_1.TimeList, { className: styles_module_scss_1.default.timeListColumn, value: seconds, onChange: onSecondsChange, "data-test-id": getTestId('seconds'), numberOfItems: constants_1.SECONDS, onKeyDownGetter: onSecondKeyDownGetter, keyboardNavigationRef: secondsKeyboardNavigationRef }))] })] }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TimePickerBase"), exports);

package/dist/cjs/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));
+}