@cloud-ru/ds-calendar 1.0.0

package/dist/esm/helperComponents/CalendarContext/CalendarContext.js

@@ -0,0 +1,44 @@
+import { createContext } from 'react';
+import { CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants.js';
+import { getLocale } from '../../utils.js';
+const stub = () => {
+    /* it is a stub */
+};
+const refStub = { current: null };
+const listKeyboardNavigationRefStub = {
+    current: { focusItem: stub },
+};
+const firstNotDisableCellStub = { current: [0, 0] };
+export const CalendarContext = createContext({
+    locale: getLocale(),
+    size: SIZE.M,
+    viewDate: new Date(),
+    referenceDate: new Date(),
+    mode: CALENDAR_MODE.Date,
+    viewMode: VIEW_MODE.Month,
+    viewShift: 0,
+    firstNotDisableCell: firstNotDisableCellStub, // TODO: validate that is required
+    setFocus: stub,
+    setValue: stub,
+    setViewMode: stub,
+    showHolidays: false,
+    showSeconds: true,
+    fitToContainer: true,
+    setViewShift: stub,
+    startPreselect: stub,
+    continuePreselect: stub,
+    completePreselect: stub,
+    restartPreselect: stub,
+    onDateAndTimeChange: stub,
+    onTimeChange: stub,
+    onDateChange: stub,
+    isDateAndTimeFilled: () => false,
+    isDateFilled: () => false,
+    isTimeFilled: () => false,
+    getTestId: () => undefined,
+    applyButtonRef: refStub,
+    currentButtonRef: refStub,
+    hoursKeyboardNavigationRef: listKeyboardNavigationRefStub,
+    minutesKeyboardNavigationRef: listKeyboardNavigationRefStub,
+    secondsKeyboardNavigationRef: listKeyboardNavigationRefStub,
+});

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

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

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

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

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

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

package/dist/esm/helperComponents/DecadeView/DecadeView.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CALENDAR_MODE, VIEW_MODE } from '../../constants.js';
+import { useCalendarContext, useGrid } from '../../hooks/index.js';
+import { getYearLabel, getYearShift, isTheSameDecade, isTheSameYear } from '../../utils.js';
+import { Grid } from '../Grid/index.js';
+import { buildDecadeGrid } from './utils.js';
+export function DecadeView() {
+    const { referenceDate, setViewMode, setViewShift, preselectedRange, continuePreselect, restartPreselect, mode, setValue, startPreselect, completePreselect, } = useCalendarContext();
+    const onSelect = useCallback((date) => {
+        if (mode === CALENDAR_MODE.YearRange) {
+            preselectedRange ? completePreselect(date) : startPreselect(date);
+            return;
+        }
+        if (mode === CALENDAR_MODE.Year) {
+            setValue([date, date]);
+            return;
+        }
+        setViewShift(getYearShift(referenceDate, date));
+        setViewMode(VIEW_MODE.Year);
+    }, [completePreselect, mode, preselectedRange, referenceDate, 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: buildDecadeGrid,
+        isTheSameItem: isTheSameYear,
+        isInPeriod: isTheSameDecade,
+        getItemLabel: getYearLabel,
+        onSelect,
+        onPreselect,
+        onLeave,
+    });
+    return _jsx(Grid, { grid: grid });
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { CalendarDropdownProps } from '../../components/CalendarDropdown/CalendarDropdown.js';
+export declare function DesktopCalendarDropdown({ children, closeOnApply, onApply, onCurrent, open: openProp, onOpenChange, triggerClassName, trigger, placement, hoverDelayOpen, hoverDelayClose, closeOnEscapeKey, triggerClickByKeys, triggerRef, outsideClick, fallbackPlacements, disableSpanWrapper, closeOnPopstate, className, 'data-test-id': testId, ...calendarProps }: CalendarDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/DesktopCalendarDropdown/DesktopCalendarDropdown.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useMemo } from 'react';
+import { Calendar } from '../../components/Calendar/index.js';
+import styles from '../../components/CalendarDropdown/styles.module.css';
+import { getTestIdBuilder } from '../../utils.js';
+import { Footer } from '../Footer/index.js';
+export function DesktopCalendarDropdown({ children, closeOnApply = false, onApply, onCurrent, open: openProp, onOpenChange, triggerClassName, trigger = 'click', placement = 'bottom-start', hoverDelayOpen, hoverDelayClose, closeOnEscapeKey, triggerClickByKeys, triggerRef, outsideClick, fallbackPlacements, disableSpanWrapper, closeOnPopstate, className, 'data-test-id': testId, ...calendarProps }) {
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+    const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+    const handleFooterApply = useCallback(() => {
+        onApply?.();
+        if (closeOnApply) {
+            setOpen(false);
+        }
+    }, [closeOnApply, onApply, setOpen]);
+    const content = (_jsx("div", { className: cn(styles.calendarDropdownContent, className), "data-test-id": getTestId('content'), children: _jsx(Calendar, { ...calendarProps, bottomSlot: _jsx(Footer, { inline: true, onApply: handleFooterApply, onCurrent: onCurrent }) }) }));
+    return (_jsx(Dropdown, { className: styles.dropdown, 
+        // Календарь сам управляет внутренними отступами (header/body/footer) — общий padding
+        // dropdown-контейнера в макете отсутствует.
+        bodyPadding: false, "data-test-id": testId, triggerClassName: triggerClassName, trigger: trigger, placement: placement, hoverDelayOpen: hoverDelayOpen, hoverDelayClose: hoverDelayClose, closeOnEscapeKey: closeOnEscapeKey, triggerClickByKeys: triggerClickByKeys, triggerRef: triggerRef, outsideClick: outsideClick, fallbackPlacements: fallbackPlacements, disableSpanWrapper: disableSpanWrapper, closeOnPopstate: closeOnPopstate, open: open, onOpenChange: setOpen, content: content, widthStrategy: 'gte', children: children }));
+}

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

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

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

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

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

@@ -0,0 +1,2 @@
+import { TimePickerDropdownProps } from '../../components/TimePickerDropdown/TimePickerDropdown.js';
+export declare function DesktopTimePickerDropdown({ className, size, fitToContainer, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds, today: todayProp, children, closeOnApply, onApply, onCurrent, open: openProp, onOpenChange, triggerClassName, trigger, placement, hoverDelayOpen, hoverDelayClose, closeOnEscapeKey, triggerClickByKeys, triggerRef, outsideClick, fallbackPlacements, disableSpanWrapper, closeOnPopstate, }: TimePickerDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/DesktopTimePickerDropdown/DesktopTimePickerDropdown.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { useLang } from '@cloud-ru/ds-locale';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { DEFAULT_LOCALE } from '../../components/TimePicker/constants.js';
+import styles from '../../components/TimePickerDropdown/styles.module.css';
+import { SIZE } from '../../constants.js';
+import { useTimePickerValueBridge } from '../../hooks/index.js';
+import { getLocale, getTestIdBuilder } from '../../utils.js';
+import { CalendarContext } from '../CalendarContext/index.js';
+import { Footer } from '../Footer/index.js';
+import { TimePickerBase } from '../TimePickerBase/index.js';
+const stubFunc = () => { };
+const stubBuildCellProps = () => ({ isDisabled: false, isHoliday: false });
+export function DesktopTimePickerDropdown({ className, size = SIZE.M, fitToContainer = false, value: valueProp, defaultValue, onChangeValue, onFocusLeave, 'data-test-id': testId, navigationStartRef, showSeconds = true, today: todayProp, children, closeOnApply = false, onApply, onCurrent, open: openProp, onOpenChange, triggerClassName, trigger = 'click', placement = 'bottom-start', hoverDelayOpen, hoverDelayClose, closeOnEscapeKey, triggerClickByKeys, triggerRef, outsideClick, fallbackPlacements, disableSpanWrapper, closeOnPopstate, }) {
+    const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+    const [focus, setFocus] = useState(undefined);
+    const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const { internalValue, setValue, dateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = useTimePickerValueBridge({ value: valueProp, defaultValue, onChangeValue, showSeconds });
+    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 handleApply = useCallback(() => {
+        onApply?.();
+        if (closeOnApply) {
+            setOpen(false);
+        }
+    }, [closeOnApply, onApply, setOpen]);
+    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,
+    ]);
+    const content = (_jsx("div", { className: cn(styles.timePickerDropdownContent, className), "data-size": size, "data-test-id": getTestId('content'), children: _jsx(CalendarContext.Provider, { value: calendarContextValue, children: _jsx(TimePickerBase, { className: styles.timePickerBaseLimited }) }) }));
+    // Футер вынесен в `bottomBar` дропдауна (`footer` + `footerDivider`) — divider и
+    // паддинги даёт сам Dropdown. Провайдер контекста дублируется здесь, т.к. `footer` —
+    // отдельный от `content` регион.
+    const footer = (_jsx(CalendarContext.Provider, { value: calendarContextValue, children: _jsx(Footer, { onApply: handleApply, onCurrent: onCurrent }) }));
+    return (_jsx(Dropdown, { className: styles.dropdown, "data-test-id": testId, triggerClassName: triggerClassName, trigger: trigger, placement: placement, hoverDelayOpen: hoverDelayOpen, hoverDelayClose: hoverDelayClose, closeOnEscapeKey: closeOnEscapeKey, triggerClickByKeys: triggerClickByKeys, triggerRef: triggerRef, outsideClick: outsideClick, fallbackPlacements: fallbackPlacements, disableSpanWrapper: disableSpanWrapper, closeOnPopstate: closeOnPopstate, open: open, onOpenChange: setOpen, content: content, footer: footer, footerDivider: true, bodyPadding: false, widthStrategy: 'gte', children: children }));
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+export type FooterProps = {
+    /** Колбек по клику на Apply */
+    onApply?(): void;
+    /** Колбек по клику на Current */
+    onCurrent?(): void;
+    /**
+     * Inline-раскладка: футер рендерится внутри тела дропдауна (bottomSlot календаря),
+     * поэтому сам рисует divider, паддинги и полную ширину. По умолчанию (`false`)
+     * возвращает голые кнопки для `bottomBar`-слота дропдауна (`footer` + `footerDivider`),
+     * где обвязку даёт сам Dropdown.
+     */
+    inline?: boolean;
+};
+/**
+ * Футер календарных дропдаунов (Apply / Current). Кнопки собираются общим
+ * `FooterActions` из `@cloud-ru/ds-bottom-sheet` — единый источник правды с футерами
+ * modal / drawer / bottom-sheet (Figma `popupDropdownFooter`). Читает состояние из
+ * `CalendarContext`, поэтому рендерится только внутри провайдера контекста.
+ */
+export declare function Footer({ onApply, onCurrent, inline }: FooterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/Footer/Footer.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FooterActions } from '@cloud-ru/ds-bottom-sheet';
+import { VIEW } from '@cloud-ru/ds-button';
+import { Divider } from '@cloud-ru/ds-divider';
+import { getDefaultItemId } from '@cloud-ru/ds-list';
+import { CALENDAR_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { calendarLocale } from '../../locale/index.js';
+import { getMonthShift } from '../../utils.js';
+import styles from './styles.module.css';
+/**
+ * Футер календарных дропдаунов (Apply / Current). Кнопки собираются общим
+ * `FooterActions` из `@cloud-ru/ds-bottom-sheet` — единый источник правды с футерами
+ * modal / drawer / bottom-sheet (Figma `popupDropdownFooter`). Читает состояние из
+ * `CalendarContext`, поэтому рендерится только внутри провайдера контекста.
+ */
+export function Footer({ onApply, onCurrent, inline = false }) {
+    const { viewMode, mode, today, setValue, dateAndTime, isTimeFilled, isDateAndTimeFilled, onDateAndTimeChange, applyButtonRef, currentButtonRef, hoursKeyboardNavigationRef, minutesKeyboardNavigationRef, secondsKeyboardNavigationRef, showSeconds, getTestId, referenceDate, setViewShift, onFocusLeave, size, } = useCalendarContext();
+    const { t } = calendarLocale.useTranslations();
+    if (![CALENDAR_MODE.DateTime, 'time'].includes(mode) || viewMode !== 'month') {
+        return null;
+    }
+    const isApplyButtonDisabled = mode === 'time' ? !isTimeFilled() : !isDateAndTimeFilled();
+    const handleCurrentKeyDown = event => {
+        if (event.key === 'Tab') {
+            if (event.shiftKey) {
+                event.preventDefault();
+                if (showSeconds) {
+                    secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(dateAndTime?.seconds ?? 0));
+                }
+                else {
+                    minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(dateAndTime?.minutes ?? 0));
+                }
+            }
+            else {
+                if (isApplyButtonDisabled) {
+                    onFocusLeave?.('next');
+                }
+            }
+        }
+    };
+    const handleApplyKeyDown = event => {
+        if (event.key === 'Tab' && !event.shiftKey) {
+            onFocusLeave?.('next');
+        }
+    };
+    const handleCurrentClick = () => {
+        const todayDate = today || new Date();
+        onDateAndTimeChange(todayDate);
+        setViewShift(getMonthShift(referenceDate, todayDate));
+        hoursKeyboardNavigationRef.current?.focusItem(getDefaultItemId(todayDate.getHours() ?? 0));
+        minutesKeyboardNavigationRef.current?.focusItem(getDefaultItemId(todayDate.getMinutes() ?? 0));
+        secondsKeyboardNavigationRef.current?.focusItem(getDefaultItemId(todayDate.getSeconds() ?? 0));
+        applyButtonRef.current?.focus();
+        onCurrent?.();
+    };
+    const handleApplySelection = () => {
+        if (!dateAndTime) {
+            return;
+        }
+        const todayDate = today || new Date();
+        const { year = todayDate.getFullYear(), month = todayDate.getMonth(), day = todayDate.getDay(), hours, minutes, seconds, } = dateAndTime;
+        const newDate = new Date(year, month, day, hours, minutes, showSeconds ? seconds : 0);
+        setValue([newDate, newDate]);
+        onApply?.();
+    };
+    const actions = (_jsx(FooterActions
+    // Кнопки футера следуют размеру календаря: в мастере дропдаунов они 24 / 32 / 40 при s / m / l.
+    , { 
+        // Кнопки футера следуют размеру календаря: в мастере дропдаунов они 24 / 32 / 40 при s / m / l.
+        size: size, approveButton: {
+            label: t('apply'),
+            disabled: isApplyButtonDisabled,
+            innerRef: applyButtonRef,
+            onClick: handleApplySelection,
+            onKeyDown: handleApplyKeyDown,
+        }, additionalButton: {
+            label: t('current'),
+            // `popupDropdownFooter` держит третью кнопку на `function`, а не на дефолтном
+            // из `FooterActions` `simple`: у `simple` остаётся горизонтальный паддинг.
+            view: VIEW.Function,
+            innerRef: currentButtonRef,
+            onClick: handleCurrentClick,
+            onKeyDown: handleCurrentKeyDown,
+        }, testIds: {
+            approve: getTestId('apply-button') ?? '',
+            additional: getTestId('current-button') ?? '',
+            cancel: '',
+        }, actionsClassName: inline ? styles.actions : undefined }));
+    if (!inline) {
+        return actions;
+    }
+    return (_jsxs("div", { className: styles.inline, children: [_jsx(Divider, { className: styles.divider }), actions] }));
+}

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

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

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

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

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

@@ -0,0 +1,15 @@
+.inline{
+  display:flex;
+  flex-direction:column;
+}
+
+.divider{
+  flex-shrink:0;
+}
+
+.actions{
+  padding-left:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-right:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingHorizontal, var(--sn-primitive-dimension-8, 8px));
+  padding-top:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingTop, var(--sn-primitive-dimension-8, 8px));
+  padding-bottom:var(--sn-popupPrivate-anatomy-dropdown-footer-paddingBottom, var(--sn-primitive-dimension-4, 4px));
+}

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

@@ -0,0 +1,5 @@
+import { Cell } from '../../types.js';
+export type GridProps = {
+    grid: Cell[][];
+};
+export declare function Grid({ grid }: GridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Grid/Grid.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { GRID_SIZE, VIEW_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { Item } from '../Item/index.js';
+import { WeekRow } from '../WeekRow/index.js';
+import styles from './styles.module.css';
+export function Grid({ grid }) {
+    const { size, viewMode, fitToContainer } = useCalendarContext();
+    const gridConfig = useMemo(() => {
+        const { columns } = GRID_SIZE[viewMode];
+        return {
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        };
+    }, [viewMode]);
+    return (_jsxs("div", { className: styles.grid, "data-fit-to-container": fitToContainer || undefined, style: gridConfig, children: [viewMode === VIEW_MODE.Month && _jsx(WeekRow, {}), grid.map((row, rowIndex) => row.map((cell, colIndex) => (_jsx(Item, { label: cell.label, size: size, checked: cell.checked, rangePosition: cell.rangePosition, disabled: cell.disabled, holiday: cell.holiday, another: cell.another, current: cell.current, visible: true, tabIndex: cell.tabIndex, address: cell.address, date: cell.date, onSelect: cell.onSelect, onPreselect: cell.onPreselect, onLeave: cell.onLeave, onKeyDown: cell.onKeyDown }, `${cell.label}_${rowIndex}_${colIndex}`))))] }));
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+.grid{
+  display:grid;
+  width:100%;
+  height:100%;
+}

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

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

package/dist/esm/helperComponents/Header/Header.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { GRID_SIZE, SIZE, VIEW_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { calendarLocale } from '../../locale/index.js';
+import { stringifyAddress } from '../../utils.js';
+import { NavButton } from '../NavButton/index.js';
+import { LEVEL_BUTTON_FOCUS_NAME, NEXT_PERIOD_BUTTON_FOCUS_NAME, PREV_PERIOD_BUTTON_FOCUS_NAME } from './constants.js';
+import { usePeriodName } from './hooks.js';
+import styles from './styles.module.css';
+import { getShift } from './utils.js';
+const VIEW_MODE_MAP = {
+    [VIEW_MODE.Month]: VIEW_MODE.Year,
+    [VIEW_MODE.Year]: VIEW_MODE.Decade,
+    [VIEW_MODE.Decade]: VIEW_MODE.Decade,
+};
+const PERIOD_NAV_ARIA_KEYS = {
+    prev: {
+        [VIEW_MODE.Month]: 'prevPeriodMonth',
+        [VIEW_MODE.Year]: 'prevPeriodYear',
+        [VIEW_MODE.Decade]: 'prevPeriodDecade',
+    },
+    next: {
+        [VIEW_MODE.Month]: 'nextPeriodMonth',
+        [VIEW_MODE.Year]: 'nextPeriodYear',
+        [VIEW_MODE.Decade]: 'nextPeriodDecade',
+    },
+};
+const ICONS = {
+    UP: {
+        [SIZE.S]: _jsx(ChevronUpSVG, { size: 16 }),
+        [SIZE.M]: _jsx(ChevronUpSVG, {}),
+        [SIZE.L]: _jsx(ChevronUpSVG, {}),
+    },
+    DOWN: {
+        [SIZE.S]: _jsx(ChevronDownSVG, { size: 16 }),
+        [SIZE.M]: _jsx(ChevronDownSVG, {}),
+        [SIZE.L]: _jsx(ChevronDownSVG, {}),
+    },
+};
+export function Header() {
+    const { referenceDate, viewDate, viewShift, setViewShift, viewMode, setViewMode, focus, setFocus, getTestId, size, firstNotDisableCell, } = useCalendarContext();
+    const periodName = usePeriodName();
+    const { t } = calendarLocale.useTranslations();
+    const prevPeriodAriaLabel = t(PERIOD_NAV_ARIA_KEYS.prev[viewMode]);
+    const nextPeriodAriaLabel = t(PERIOD_NAV_ARIA_KEYS.next[viewMode]);
+    const levelButtonDisabled = viewMode === VIEW_MODE.Decade;
+    const isArrowButtonFocused = focus && [NEXT_PERIOD_BUTTON_FOCUS_NAME, PREV_PERIOD_BUTTON_FOCUS_NAME].includes(focus);
+    const gridForMode = GRID_SIZE[viewMode];
+    return (_jsxs("div", { className: styles.header, "data-size": size, children: [_jsx(NavButton, { disabled: levelButtonDisabled, onClick: () => {
+                    if (viewMode === VIEW_MODE.Year) {
+                        setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME);
+                    }
+                    setViewShift(getShift(referenceDate, viewDate, viewMode));
+                    setViewMode(VIEW_MODE_MAP[viewMode]);
+                }, label: periodName, "data-test-id": getTestId('period-level'), focusName: LEVEL_BUTTON_FOCUS_NAME, tabIndex: levelButtonDisabled || isArrowButtonFocused ? -1 : 0, icon: viewMode !== VIEW_MODE.Decade ? ICONS.DOWN[size] : undefined, onRightArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => setFocus(stringifyAddress(firstNotDisableCell?.current ?? [0, 0])), useNavigationStartRef: true }), _jsxs("div", { className: styles.scrollControlWrapper, children: [_jsx(NavButton, { onClick: () => setViewShift(viewShift - 1), "aria-label": prevPeriodAriaLabel, "data-test-id": getTestId('period-prev'), focusName: PREV_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== NEXT_PERIOD_BUTTON_FOCUS_NAME)
+                            ? 0
+                            : -1, icon: ICONS.UP[size], onRightArrowKeyDown: () => setFocus(NEXT_PERIOD_BUTTON_FOCUS_NAME), onLeftArrowKeyDown: () => setFocus(LEVEL_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => {
+                            const rightGap = viewMode === VIEW_MODE.Month ? 2 : 1;
+                            setFocus(stringifyAddress([0, gridForMode.columns - rightGap]));
+                        } }), _jsx(NavButton, { onClick: () => setViewShift(viewShift + 1), "aria-label": nextPeriodAriaLabel, "data-test-id": getTestId('period-next'), focusName: NEXT_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === NEXT_PERIOD_BUTTON_FOCUS_NAME ? 0 : -1, icon: ICONS.DOWN[size], onLeftArrowKeyDown: () => setFocus(PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => setFocus(stringifyAddress([0, gridForMode.columns - 1])) })] })] }));
+}

package/dist/esm/helperComponents/Header/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const LEVEL_BUTTON_FOCUS_NAME = "level";
+export declare const NEXT_PERIOD_BUTTON_FOCUS_NAME = "next";
+export declare const PREV_PERIOD_BUTTON_FOCUS_NAME = "prev";

package/dist/esm/helperComponents/Header/constants.js

@@ -0,0 +1,3 @@
+export const LEVEL_BUTTON_FOCUS_NAME = 'level';
+export const NEXT_PERIOD_BUTTON_FOCUS_NAME = 'next';
+export const PREV_PERIOD_BUTTON_FOCUS_NAME = 'prev';

package/dist/esm/helperComponents/Header/hooks.d.ts

@@ -0,0 +1 @@
+export declare function usePeriodName(): string;

package/dist/esm/helperComponents/Header/hooks.js

@@ -0,0 +1,20 @@
+import { VIEW_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { getMonthName } from '../../utils.js';
+export function usePeriodName() {
+    const { viewDate, viewMode, locale } = useCalendarContext();
+    switch (viewMode) {
+        case VIEW_MODE.Month: {
+            const year = viewDate.getFullYear();
+            return `${getMonthName(viewDate, locale)} ${year}`;
+        }
+        case VIEW_MODE.Year:
+            return viewDate.getFullYear().toString();
+        case VIEW_MODE.Decade: {
+            const decadeStart = viewDate.getFullYear();
+            return `${decadeStart}-${decadeStart + 9}`;
+        }
+        default:
+            return '';
+    }
+}

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

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

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

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

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

@@ -0,0 +1,28 @@
+.header{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:space-between;
+  box-sizing:border-box;
+}
+.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));
+}
+
+.scrollControlWrapper{
+  display:flex;
+  align-items:center;
+}

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

@@ -0,0 +1,2 @@
+import { ViewMode } from '../../types.js';
+export declare const getShift: (referenceDate: Date, viewDate: Date, currentViewLevel: ViewMode) => number;

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

@@ -0,0 +1,13 @@
+import { VIEW_MODE } from '../../constants.js';
+import { getDecadeShift, getYearShift } from '../../utils.js';
+export const getShift = (referenceDate, viewDate, currentViewLevel) => {
+    switch (currentViewLevel) {
+        case VIEW_MODE.Month:
+            return getYearShift(referenceDate, viewDate);
+        case VIEW_MODE.Year:
+            return getDecadeShift(referenceDate, viewDate);
+        case VIEW_MODE.Decade:
+        default:
+            return 0;
+    }
+};