@cloud-ru/ds-calendar 1.0.0

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

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

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

@@ -0,0 +1,12 @@
+.timePickerWrapper{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.timePickerWrapper[data-fit-to-container]{
+  min-width:100%;
+  height:100%;
+}

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

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

package/dist/esm/components/TimePickerDropdown/TimePickerDropdown.js

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+.dropdown{
+  width:-moz-fit-content;
+  width:fit-content;
+}
+
+.timePickerDropdownContent{
+  display:flex;
+  flex-direction:column;
+}
+
+.timePickerBaseLimited[data-size=s]{
+  height:257px;
+}
+.timePickerBaseLimited[data-size=m]{
+  height:265px;
+}
+.timePickerBaseLimited[data-size=l]{
+  height:337px;
+}

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

@@ -0,0 +1,4 @@
+export * from './Calendar/index.js';
+export * from './CalendarDropdown/index.js';
+export * from './TimePicker/index.js';
+export * from './TimePickerDropdown/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,4 @@
+export * from './Calendar/index.js';
+export * from './CalendarDropdown/index.js';
+export * from './TimePicker/index.js';
+export * from './TimePickerDropdown/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,68 @@
+export declare const VIEW_MODE: {
+    readonly Month: "month";
+    readonly Year: "year";
+    readonly Decade: "decade";
+};
+export declare const CALENDAR_MODE: {
+    readonly Date: "date";
+    readonly DateTime: "date-time";
+    readonly DateRange: "date-range";
+    readonly Month: "month";
+    readonly MonthRange: "month-range";
+    readonly Year: "year";
+    readonly YearRange: "year-range";
+};
+export declare const RANGE_POSITION: {
+    readonly Out: "out";
+    readonly Start: "start";
+    readonly In: "in";
+    readonly End: "end";
+    readonly StartEnd: "start-end";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const GRID_SIZE: {
+    readonly month: {
+        readonly rows: 6;
+        readonly columns: 7;
+    };
+    readonly year: {
+        readonly rows: 4;
+        readonly columns: 3;
+    };
+    readonly decade: {
+        readonly rows: 4;
+        readonly columns: 3;
+    };
+};
+export declare const AUTOFOCUS = "autofocus";
+/** Playground / E2E — синхронизировать со stories (`data-test-id`). */
+export declare const TEST_IDS: {
+    readonly calendarPlayground: "calendar-playground";
+    readonly calendarValueHolder: "calendar-value-holder";
+    readonly calendarDropdown: "calendar-dropdown";
+    readonly calendarDropdownTrigger: "calendar-dropdown-trigger";
+    readonly calendarDropdownContent: "content-calendar-dropdown";
+    readonly timePickerPlayground: "timepicker-playground";
+    readonly timePickerValueHolder: "timepicker-value-holder";
+    readonly timePickerDropdown: "time-picker-dropdown";
+    readonly timePickerDropdownTrigger: "time-picker-dropdown-trigger";
+    readonly timePickerDropdownContent: "content-time-picker-dropdown";
+    readonly timePickerDrum: "time-picker-drum";
+    readonly calendarItem: "calendar-item";
+    readonly timePickerMobileApply: "time-picker-mobile-apply";
+    readonly timePickerMobileCurrent: "time-picker-mobile-current";
+    readonly calendarMobileHeaderLevel: "calendar-mobile-header-level";
+    readonly calendarMobileTimeButton: "calendar-mobile-time-button";
+    readonly calendarMobilePresetsButton: "calendar-mobile-presets-button";
+    readonly calendarMobilePeriodBlock: "calendar-mobile-period-block";
+    readonly calendarMobileApply: "calendar-mobile-apply";
+    readonly calendarMobileCurrent: "calendar-mobile-current";
+    readonly calendarMobileSelected: "selected";
+};
+export declare const HOURS = 24;
+export declare const MINUTES = 60;
+export declare const SECONDS = 60;

package/dist/esm/constants.js

@@ -0,0 +1,61 @@
+export const VIEW_MODE = {
+    Month: 'month',
+    Year: 'year',
+    Decade: 'decade',
+};
+export const CALENDAR_MODE = {
+    Date: 'date',
+    DateTime: 'date-time',
+    DateRange: 'date-range',
+    Month: 'month',
+    MonthRange: 'month-range',
+    Year: 'year',
+    YearRange: 'year-range',
+};
+export const RANGE_POSITION = {
+    Out: 'out',
+    Start: 'start',
+    In: 'in',
+    End: 'end',
+    StartEnd: 'start-end', // equals to 'out'
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const GRID_SIZE = {
+    [VIEW_MODE.Month]: { rows: 6, columns: 7 },
+    [VIEW_MODE.Year]: { rows: 4, columns: 3 },
+    [VIEW_MODE.Decade]: { rows: 4, columns: 3 },
+};
+export const AUTOFOCUS = 'autofocus';
+/** Playground / E2E — синхронизировать со stories (`data-test-id`). */
+export const TEST_IDS = {
+    calendarPlayground: 'calendar-playground',
+    calendarValueHolder: 'calendar-value-holder',
+    calendarDropdown: 'calendar-dropdown',
+    calendarDropdownTrigger: 'calendar-dropdown-trigger',
+    calendarDropdownContent: 'content-calendar-dropdown',
+    timePickerPlayground: 'timepicker-playground',
+    timePickerValueHolder: 'timepicker-value-holder',
+    timePickerDropdown: 'time-picker-dropdown',
+    timePickerDropdownTrigger: 'time-picker-dropdown-trigger',
+    timePickerDropdownContent: 'content-time-picker-dropdown',
+    timePickerDrum: 'time-picker-drum',
+    calendarItem: 'calendar-item',
+    // Mobile (bottom-sheet) surfaces — FF-8654.
+    timePickerMobileApply: 'time-picker-mobile-apply',
+    timePickerMobileCurrent: 'time-picker-mobile-current',
+    calendarMobileHeaderLevel: 'calendar-mobile-header-level',
+    calendarMobileTimeButton: 'calendar-mobile-time-button',
+    calendarMobilePresetsButton: 'calendar-mobile-presets-button',
+    calendarMobilePeriodBlock: 'calendar-mobile-period-block',
+    calendarMobileApply: 'calendar-mobile-apply',
+    calendarMobileCurrent: 'calendar-mobile-current',
+    // Префикс для `getTestId` (даёт `selected-<testId>` на строке «Выбрано:»).
+    calendarMobileSelected: 'selected',
+};
+export const HOURS = 24;
+export const MINUTES = 60;
+export const SECONDS = 60;

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

@@ -0,0 +1,27 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { BuildCellPropsFunction, CalendarMode, FocusDirection, PresetsOptions, Range, Size } from '../../types.js';
+export type CalendarBaseProps = WithSupportProps<{
+    mode: CalendarMode;
+    onChangeValue(value: Range): void;
+    onFocusLeave?(direction: FocusDirection): void;
+    size?: Size;
+    value?: Range;
+    today?: Date | number;
+    buildCellProps?: BuildCellPropsFunction;
+    showHolidays?: boolean;
+    showSeconds?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    defaultValue?: Range;
+    fitToContainer?: boolean;
+    autofocus?: boolean;
+    locale?: Intl.Locale;
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
+    presets?: PresetsOptions;
+    /** Рендерится после основной разметки календаря, внутри `CalendarContext` (например футер с Apply в дропдауне). */
+    bottomSlot?: ReactNode;
+}>;
+export declare function CalendarBase({ className, mode, size, autofocus, fitToContainer, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays, showSeconds, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, presets, bottomSlot, ...rest }: CalendarBaseProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/CalendarBase/CalendarBase.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { Divider } from '@cloud-ru/ds-divider';
+import { ChevronDownSVG } from '@cloud-ru/ds-icons/interface/system';
+import { extractSupportProps, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { AUTOFOCUS, CALENDAR_MODE, SIZE, VIEW_MODE } from '../../constants.js';
+import { useDateAndTime } from '../../hooks/index.js';
+import { calendarLocale } from '../../locale/index.js';
+import { getLocale, getTestIdBuilder, normalizeRangeForMode } from '../../utils.js';
+import { CalendarBody } from '../CalendarBody/index.js';
+import { CalendarContext } from '../CalendarContext/index.js';
+import { Header } from '../Header/index.js';
+import { PeriodPresetsList } from '../PeriodPresetsList/index.js';
+import { getDefaultPresets } from '../PeriodPresetsList/utils.js';
+import { TimePickerBase } from '../TimePickerBase/index.js';
+import { useGetViewDate, useRange } from './hooks.js';
+import styles from './styles.module.css';
+const CALENDAR_DEFAULT_MODE_MAP = {
+    [CALENDAR_MODE.Date]: VIEW_MODE.Month,
+    [CALENDAR_MODE.DateTime]: VIEW_MODE.Month,
+    [CALENDAR_MODE.DateRange]: VIEW_MODE.Month,
+    [CALENDAR_MODE.MonthRange]: VIEW_MODE.Year,
+    [CALENDAR_MODE.Month]: VIEW_MODE.Year,
+    [CALENDAR_MODE.YearRange]: VIEW_MODE.Decade,
+    [CALENDAR_MODE.Year]: VIEW_MODE.Decade,
+};
+export function CalendarBase({ className, mode, size = SIZE.M, autofocus, fitToContainer = true, value: valueProp, defaultValue, onChangeValue, today: todayProp, showHolidays = false, showSeconds = true, style, locale: localeProp, onFocusLeave, buildCellProps, 'data-test-id': testId, navigationStartRef, presets, bottomSlot, ...rest }) {
+    const { t, lang: ctxLang } = calendarLocale.useTranslations();
+    const [viewMode, setViewMode] = useState(CALENDAR_DEFAULT_MODE_MAP[mode]);
+    const [viewShift, setViewShift] = useState(0);
+    const [value, setValueState] = useUncontrolledProp(valueProp, defaultValue, onChangeValue);
+    const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const [referenceDate] = useState(value?.[0] || today || new Date());
+    const viewDate = useGetViewDate(referenceDate, viewMode, viewShift);
+    const [focus, setFocus] = useState(autofocus ? AUTOFOCUS : undefined);
+    const { dateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = useDateAndTime({ showSeconds, value: mode === CALENDAR_MODE.DateTime ? value : undefined });
+    const applyButtonRef = useRef(null);
+    const currentButtonRef = useRef(null);
+    const hoursKeyboardNavigationRef = useRef({ focusItem: () => { } });
+    const minutesKeyboardNavigationRef = useRef({ focusItem: () => { } });
+    const secondsKeyboardNavigationRef = useRef({ focusItem: () => { } });
+    const setValue = useCallback((dates) => {
+        setValueState(normalizeRangeForMode(mode, dates));
+    }, [mode, setValueState]);
+    const { preselectedRange, continuePreselect, completePreselect, restartPreselect, startPreselect } = useRange({
+        setValue,
+    });
+    const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+    const locale = useMemo(() => getLocale({ localeProp, ctxLang }), [ctxLang, localeProp]);
+    const firstNotDisableCell = useRef([0, 0]);
+    const presetsItems = useMemo(() => {
+        if (!presets?.enabled) {
+            return undefined;
+        }
+        if (presets?.items && presets.items.length > 0) {
+            return presets.items;
+        }
+        return getDefaultPresets(t, today);
+    }, [presets, t, today]);
+    const showPresets = mode === CALENDAR_MODE.DateRange && !buildCellProps && presets?.enabled && presetsItems && presetsItems?.length > 0; // TODO PDS-3139
+    const showTimePicker = mode === CALENDAR_MODE.DateTime && viewMode === VIEW_MODE.Month;
+    const onPresetClick = useCallback((selectedPeriod) => {
+        setValue(selectedPeriod);
+    }, [setValue]);
+    const calendarContextValue = useMemo(() => ({
+        locale,
+        size,
+        value,
+        firstNotDisableCell,
+        fitToContainer,
+        today,
+        showHolidays,
+        viewDate,
+        referenceDate,
+        preselectedRange,
+        mode,
+        viewMode,
+        viewShift,
+        focus,
+        setValue,
+        setViewMode,
+        setViewShift,
+        startPreselect,
+        continuePreselect,
+        completePreselect,
+        restartPreselect,
+        setFocus,
+        getTestId,
+        onFocusLeave,
+        buildCellProps,
+        navigationStartRef,
+        showSeconds,
+        dateAndTime,
+        onTimeChange,
+        onDateChange,
+        onDateAndTimeChange,
+        isDateAndTimeFilled,
+        isDateFilled,
+        isTimeFilled,
+        applyButtonRef,
+        currentButtonRef,
+        hoursKeyboardNavigationRef,
+        minutesKeyboardNavigationRef,
+        secondsKeyboardNavigationRef,
+    }), [
+        applyButtonRef,
+        buildCellProps,
+        completePreselect,
+        continuePreselect,
+        dateAndTime,
+        firstNotDisableCell,
+        fitToContainer,
+        focus,
+        getTestId,
+        isDateAndTimeFilled,
+        isDateFilled,
+        isTimeFilled,
+        locale,
+        mode,
+        navigationStartRef,
+        onDateAndTimeChange,
+        onDateChange,
+        onFocusLeave,
+        onTimeChange,
+        preselectedRange,
+        referenceDate,
+        restartPreselect,
+        setFocus,
+        setValue,
+        setViewMode,
+        setViewShift,
+        showHolidays,
+        showSeconds,
+        size,
+        startPreselect,
+        today,
+        value,
+        viewDate,
+        viewMode,
+        viewShift,
+    ]);
+    return (_jsx("div", { className: cn(styles.root, className), "data-fit-to-container": fitToContainer || undefined, "data-mode": mode, "data-show-holidays": showHolidays || undefined, "data-show-seconds": mode === CALENDAR_MODE.DateTime ? String(showSeconds) : undefined, "data-size": size, "data-test-id": testId, children: _jsxs(CalendarContext.Provider, { value: calendarContextValue, children: [_jsxs("div", { className: styles.dateWrapper, children: [showPresets && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.leftPanel, children: [_jsx("div", { className: styles.leftPanelHeader, "data-size": size, children: _jsx(Button, { label: t('presets'), view: 'function', appearance: 'neutral', icon: _jsx(ChevronDownSVG, {}), iconPosition: 'after', size: size, "data-test-id": getTestId('presets-header') }) }), _jsx(Divider, { orientation: 'horizontal' }), _jsx(PeriodPresetsList, { items: presetsItems, className: styles.presetsList, onChange: onPresetClick, "data-test-id": getTestId('presets') })] }), _jsx("div", { className: styles.verticalDividerWrap, children: _jsx(Divider, { orientation: 'vertical' }) })] })), _jsxs("div", { className: styles.calendarWrapper, ...extractSupportProps(rest), style: style, "data-fit-to-container": fitToContainer || undefined, children: [_jsx(Header, {}), _jsx(Divider, { orientation: 'horizontal' }), _jsx("div", { className: styles.body, "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: _jsx(CalendarBody, {}) })] }), showTimePicker && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.verticalDividerWrap, children: _jsx(Divider, { orientation: 'vertical' }) }), _jsx(TimePickerBase, { fixedWidth: true })] }))] }), bottomSlot] }) }));
+}

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

@@ -0,0 +1,11 @@
+import { Range, ViewMode } from '../../types.js';
+export declare function useGetViewDate(referenceDate: Date, viewMode: ViewMode, viewShift: number): Date;
+export declare function useRange({ setValue }: {
+    setValue(value: Range): void;
+}): {
+    preselectedRange: Range | undefined;
+    startPreselect: (date: Date) => void;
+    continuePreselect: (date: Date) => void;
+    restartPreselect: () => void;
+    completePreselect: (date: Date) => void;
+};

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

@@ -0,0 +1,36 @@
+import { useCallback, useMemo, useState } from 'react';
+import { VIEW_MODE } from '../../constants.js';
+export function useGetViewDate(referenceDate, viewMode, viewShift) {
+    return useMemo(() => {
+        switch (viewMode) {
+            case VIEW_MODE.Decade: {
+                const decadeFirstYear = Math.floor(referenceDate.getFullYear() / 10) * 10;
+                return new Date(decadeFirstYear + viewShift * 10, 0, 1);
+            }
+            case VIEW_MODE.Year:
+                return new Date(referenceDate.getFullYear() + viewShift, 0, 1);
+            case VIEW_MODE.Month:
+            default:
+                return new Date(referenceDate.getFullYear(), referenceDate.getMonth() + viewShift, 1);
+        }
+    }, [referenceDate, viewMode, viewShift]);
+}
+export function useRange({ setValue }) {
+    const [preselectedRange, setPreselectedRange] = useState();
+    const startPreselect = useCallback((date) => {
+        setPreselectedRange([date, date]);
+    }, []);
+    const continuePreselect = useCallback((date) => {
+        setPreselectedRange(prevState => prevState && [prevState[0], date]);
+    }, []);
+    const restartPreselect = useCallback(() => {
+        setPreselectedRange(prevState => prevState && [prevState[0], prevState[0]]);
+    }, []);
+    const completePreselect = useCallback((date) => {
+        if (preselectedRange) {
+            setPreselectedRange(undefined);
+            setValue([preselectedRange[0], date]);
+        }
+    }, [preselectedRange, setValue]);
+    return { preselectedRange, startPreselect, continuePreselect, restartPreselect, completePreselect };
+}

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

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

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

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

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

@@ -0,0 +1,100 @@
+.root{
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:-moz-fit-content;
+  width:fit-content;
+}
+.root[data-fit-to-container]{
+  min-width:100%;
+  height:100%;
+}
+
+.dateWrapper{
+  display:flex;
+  height:100%;
+}
+
+.calendarWrapper{
+  display:flex;
+  flex-direction:column;
+}
+.calendarWrapper[data-fit-to-container]{
+  width:100%;
+}
+
+.body{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+}
+.body[data-size=s]{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  width:232px;
+  min-height:224px;
+}
+.body[data-size=m]{
+  min-width:232px;
+  min-height:224px;
+  padding-left:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  width:232px;
+  min-height:224px;
+}
+.body[data-size=l]{
+  min-width:296px;
+  min-height:280px;
+  padding-left:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-gridDate-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  width:296px;
+  min-height:280px;
+}
+.body[data-fit-to-container]{
+  width:100%;
+}
+
+.divider{
+  flex-shrink:0;
+  height:auto;
+}
+
+.verticalDividerWrap{
+  flex-shrink:0;
+  align-self:stretch;
+}
+
+.leftPanel{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+}
+
+.leftPanelHeader{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.leftPanelHeader[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));
+}
+.leftPanelHeader[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));
+}
+.leftPanelHeader[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));
+}
+
+.presetsList{
+  width:144px;
+}

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

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

package/dist/esm/helperComponents/CalendarBody/CalendarBody.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VIEW_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { DecadeView } from '../DecadeView/index.js';
+import { MonthView } from '../MonthView/index.js';
+import { YearView } from '../YearView/index.js';
+export function CalendarBody() {
+    const { viewMode } = useCalendarContext();
+    switch (viewMode) {
+        case VIEW_MODE.Decade:
+            return _jsx(DecadeView, {});
+        case VIEW_MODE.Year:
+            return _jsx(YearView, {});
+        case VIEW_MODE.Month:
+        default:
+            return _jsx(MonthView, {});
+    }
+}

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

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

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

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

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

@@ -0,0 +1,51 @@
+import { ListProps } from '@cloud-ru/ds-list';
+import { MutableRefObject, RefObject } from 'react';
+import { BuildCellPropsFunction, CalendarMode, DateAndTime, FocusDirection, Range, Size, TimeValue, ViewMode } from '../../types.js';
+export type CalendarContextType = {
+    size: Size;
+    /** Дата текущего дня */
+    today?: Date;
+    /** Дата базового дня,  */
+    referenceDate: Date;
+    /** Дата начала текущего видимого периода, высчитывается от referenceDate, viewShift и viewMode */
+    viewDate: Date;
+    showHolidays: boolean;
+    showSeconds: boolean;
+    fitToContainer: boolean;
+    value?: Range;
+    firstNotDisableCell?: MutableRefObject<[number, number]>;
+    mode: CalendarMode | 'time';
+    /** Предвыбранный период, когда выбрана первая дата, а вторая под ховером или фокусом */
+    preselectedRange?: Range;
+    viewMode: ViewMode;
+    viewShift: number;
+    focus?: string;
+    locale: Intl.Locale;
+    onFocusLeave?(direction: FocusDirection): void;
+    buildCellProps?: BuildCellPropsFunction;
+    setFocus(address: string | undefined): void;
+    setValue(value: Range): void;
+    setViewMode(viewMode: ViewMode): void;
+    setViewShift(shift: number): void;
+    startPreselect(date: Date): void;
+    restartPreselect(): void;
+    continuePreselect(date: Date): void;
+    completePreselect(date: Date): void;
+    getTestId(prefix: string): string | undefined;
+    navigationStartRef?: RefObject<{
+        focus(): void;
+    }>;
+    dateAndTime?: DateAndTime;
+    onDateChange(dateAndTime: Date | DateAndTime): void;
+    onTimeChange(dateAndTime: Date | TimeValue): void;
+    onDateAndTimeChange(dateAndTime: Date | DateAndTime): void;
+    isDateAndTimeFilled(): boolean;
+    isTimeFilled(): boolean;
+    isDateFilled(): boolean;
+    applyButtonRef: RefObject<HTMLButtonElement | null>;
+    currentButtonRef: RefObject<HTMLButtonElement | null>;
+    hoursKeyboardNavigationRef: NonNullable<ListProps['keyboardNavigationRef']>;
+    minutesKeyboardNavigationRef: NonNullable<ListProps['keyboardNavigationRef']>;
+    secondsKeyboardNavigationRef: NonNullable<ListProps['keyboardNavigationRef']>;
+};
+export declare const CalendarContext: import("react").Context<CalendarContextType>;