@cloud-ru/ds-calendar 1.0.0

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SECONDS = exports.MINUTES = exports.HOURS = exports.TEST_IDS = exports.AUTOFOCUS = exports.GRID_SIZE = exports.SIZE = exports.RANGE_POSITION = exports.CALENDAR_MODE = exports.VIEW_MODE = void 0;
+exports.VIEW_MODE = {
+    Month: 'month',
+    Year: 'year',
+    Decade: 'decade',
+};
+exports.CALENDAR_MODE = {
+    Date: 'date',
+    DateTime: 'date-time',
+    DateRange: 'date-range',
+    Month: 'month',
+    MonthRange: 'month-range',
+    Year: 'year',
+    YearRange: 'year-range',
+};
+exports.RANGE_POSITION = {
+    Out: 'out',
+    Start: 'start',
+    In: 'in',
+    End: 'end',
+    StartEnd: 'start-end', // equals to 'out'
+};
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.GRID_SIZE = {
+    [exports.VIEW_MODE.Month]: { rows: 6, columns: 7 },
+    [exports.VIEW_MODE.Year]: { rows: 4, columns: 3 },
+    [exports.VIEW_MODE.Decade]: { rows: 4, columns: 3 },
+};
+exports.AUTOFOCUS = 'autofocus';
+/** Playground / E2E — синхронизировать со stories (`data-test-id`). */
+exports.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',
+};
+exports.HOURS = 24;
+exports.MINUTES = 60;
+exports.SECONDS = 60;

package/dist/cjs/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';
+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/cjs/helperComponents/CalendarBase/CalendarBase.js

@@ -0,0 +1,151 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarBase = CalendarBase;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const divider_1 = require("@cloud-ru/ds-divider");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const utils_2 = require("../../utils");
+const CalendarBody_1 = require("../CalendarBody");
+const CalendarContext_1 = require("../CalendarContext");
+const Header_1 = require("../Header");
+const PeriodPresetsList_1 = require("../PeriodPresetsList");
+const utils_3 = require("../PeriodPresetsList/utils");
+const TimePickerBase_1 = require("../TimePickerBase");
+const hooks_2 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const CALENDAR_DEFAULT_MODE_MAP = {
+    [constants_1.CALENDAR_MODE.Date]: constants_1.VIEW_MODE.Month,
+    [constants_1.CALENDAR_MODE.DateTime]: constants_1.VIEW_MODE.Month,
+    [constants_1.CALENDAR_MODE.DateRange]: constants_1.VIEW_MODE.Month,
+    [constants_1.CALENDAR_MODE.MonthRange]: constants_1.VIEW_MODE.Year,
+    [constants_1.CALENDAR_MODE.Month]: constants_1.VIEW_MODE.Year,
+    [constants_1.CALENDAR_MODE.YearRange]: constants_1.VIEW_MODE.Decade,
+    [constants_1.CALENDAR_MODE.Year]: constants_1.VIEW_MODE.Decade,
+};
+function CalendarBase({ className, mode, size = constants_1.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 } = locale_1.calendarLocale.useTranslations();
+    const [viewMode, setViewMode] = (0, react_1.useState)(CALENDAR_DEFAULT_MODE_MAP[mode]);
+    const [viewShift, setViewShift] = (0, react_1.useState)(0);
+    const [value, setValueState] = (0, utils_1.useUncontrolledProp)(valueProp, defaultValue, onChangeValue);
+    const today = (0, react_1.useMemo)(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const [referenceDate] = (0, react_1.useState)(value?.[0] || today || new Date());
+    const viewDate = (0, hooks_2.useGetViewDate)(referenceDate, viewMode, viewShift);
+    const [focus, setFocus] = (0, react_1.useState)(autofocus ? constants_1.AUTOFOCUS : undefined);
+    const { dateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = (0, hooks_1.useDateAndTime)({ showSeconds, value: mode === constants_1.CALENDAR_MODE.DateTime ? value : undefined });
+    const applyButtonRef = (0, react_1.useRef)(null);
+    const currentButtonRef = (0, react_1.useRef)(null);
+    const hoursKeyboardNavigationRef = (0, react_1.useRef)({ focusItem: () => { } });
+    const minutesKeyboardNavigationRef = (0, react_1.useRef)({ focusItem: () => { } });
+    const secondsKeyboardNavigationRef = (0, react_1.useRef)({ focusItem: () => { } });
+    const setValue = (0, react_1.useCallback)((dates) => {
+        setValueState((0, utils_2.normalizeRangeForMode)(mode, dates));
+    }, [mode, setValueState]);
+    const { preselectedRange, continuePreselect, completePreselect, restartPreselect, startPreselect } = (0, hooks_2.useRange)({
+        setValue,
+    });
+    const getTestId = (0, react_1.useMemo)(() => (0, utils_2.getTestIdBuilder)(testId), [testId]);
+    const locale = (0, react_1.useMemo)(() => (0, utils_2.getLocale)({ localeProp, ctxLang }), [ctxLang, localeProp]);
+    const firstNotDisableCell = (0, react_1.useRef)([0, 0]);
+    const presetsItems = (0, react_1.useMemo)(() => {
+        if (!presets?.enabled) {
+            return undefined;
+        }
+        if (presets?.items && presets.items.length > 0) {
+            return presets.items;
+        }
+        return (0, utils_3.getDefaultPresets)(t, today);
+    }, [presets, t, today]);
+    const showPresets = mode === constants_1.CALENDAR_MODE.DateRange && !buildCellProps && presets?.enabled && presetsItems && presetsItems?.length > 0; // TODO PDS-3139
+    const showTimePicker = mode === constants_1.CALENDAR_MODE.DateTime && viewMode === constants_1.VIEW_MODE.Month;
+    const onPresetClick = (0, react_1.useCallback)((selectedPeriod) => {
+        setValue(selectedPeriod);
+    }, [setValue]);
+    const calendarContextValue = (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-fit-to-container": fitToContainer || undefined, "data-mode": mode, "data-show-holidays": showHolidays || undefined, "data-show-seconds": mode === constants_1.CALENDAR_MODE.DateTime ? String(showSeconds) : undefined, "data-size": size, "data-test-id": testId, children: (0, jsx_runtime_1.jsxs)(CalendarContext_1.CalendarContext.Provider, { value: calendarContextValue, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.dateWrapper, children: [showPresets && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftPanel, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftPanelHeader, "data-size": size, children: (0, jsx_runtime_1.jsx)(button_1.Button, { label: t('presets'), view: 'function', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), iconPosition: 'after', size: size, "data-test-id": getTestId('presets-header') }) }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), (0, jsx_runtime_1.jsx)(PeriodPresetsList_1.PeriodPresetsList, { items: presetsItems, className: styles_module_scss_1.default.presetsList, onChange: onPresetClick, "data-test-id": getTestId('presets') })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.verticalDividerWrap, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) })] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.calendarWrapper, ...(0, utils_1.extractSupportProps)(rest), style: style, "data-fit-to-container": fitToContainer || undefined, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, {}), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, "data-size": size, "data-fit-to-container": fitToContainer || undefined, children: (0, jsx_runtime_1.jsx)(CalendarBody_1.CalendarBody, {}) })] }), showTimePicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.verticalDividerWrap, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }) }), (0, jsx_runtime_1.jsx)(TimePickerBase_1.TimePickerBase, { fixedWidth: true })] }))] }), bottomSlot] }) }));
+}

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

@@ -0,0 +1,11 @@
+import { Range, ViewMode } from '../../types';
+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/cjs/helperComponents/CalendarBase/hooks.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGetViewDate = useGetViewDate;
+exports.useRange = useRange;
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+function useGetViewDate(referenceDate, viewMode, viewShift) {
+    return (0, react_1.useMemo)(() => {
+        switch (viewMode) {
+            case constants_1.VIEW_MODE.Decade: {
+                const decadeFirstYear = Math.floor(referenceDate.getFullYear() / 10) * 10;
+                return new Date(decadeFirstYear + viewShift * 10, 0, 1);
+            }
+            case constants_1.VIEW_MODE.Year:
+                return new Date(referenceDate.getFullYear() + viewShift, 0, 1);
+            case constants_1.VIEW_MODE.Month:
+            default:
+                return new Date(referenceDate.getFullYear(), referenceDate.getMonth() + viewShift, 1);
+        }
+    }, [referenceDate, viewMode, viewShift]);
+}
+function useRange({ setValue }) {
+    const [preselectedRange, setPreselectedRange] = (0, react_1.useState)();
+    const startPreselect = (0, react_1.useCallback)((date) => {
+        setPreselectedRange([date, date]);
+    }, []);
+    const continuePreselect = (0, react_1.useCallback)((date) => {
+        setPreselectedRange(prevState => prevState && [prevState[0], date]);
+    }, []);
+    const restartPreselect = (0, react_1.useCallback)(() => {
+        setPreselectedRange(prevState => prevState && [prevState[0], prevState[0]]);
+    }, []);
+    const completePreselect = (0, react_1.useCallback)((date) => {
+        if (preselectedRange) {
+            setPreselectedRange(undefined);
+            setValue([preselectedRange[0], date]);
+        }
+    }, [preselectedRange, setValue]);
+    return { preselectedRange, startPreselect, continuePreselect, restartPreselect, completePreselect };
+}

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

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

package/dist/cjs/helperComponents/CalendarBase/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("./CalendarBase"), exports);

package/dist/cjs/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/cjs/helperComponents/CalendarBody/CalendarBody.d.ts

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

package/dist/cjs/helperComponents/CalendarBody/CalendarBody.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarBody = CalendarBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const DecadeView_1 = require("../DecadeView");
+const MonthView_1 = require("../MonthView");
+const YearView_1 = require("../YearView");
+function CalendarBody() {
+    const { viewMode } = (0, hooks_1.useCalendarContext)();
+    switch (viewMode) {
+        case constants_1.VIEW_MODE.Decade:
+            return (0, jsx_runtime_1.jsx)(DecadeView_1.DecadeView, {});
+        case constants_1.VIEW_MODE.Year:
+            return (0, jsx_runtime_1.jsx)(YearView_1.YearView, {});
+        case constants_1.VIEW_MODE.Month:
+        default:
+            return (0, jsx_runtime_1.jsx)(MonthView_1.MonthView, {});
+    }
+}

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

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

package/dist/cjs/helperComponents/CalendarBody/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("./CalendarBody"), exports);

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

package/dist/cjs/helperComponents/CalendarContext/CalendarContext.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarContext = void 0;
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const utils_1 = require("../../utils");
+const stub = () => {
+    /* it is a stub */
+};
+const refStub = { current: null };
+const listKeyboardNavigationRefStub = {
+    current: { focusItem: stub },
+};
+const firstNotDisableCellStub = { current: [0, 0] };
+exports.CalendarContext = (0, react_1.createContext)({
+    locale: (0, utils_1.getLocale)(),
+    size: constants_1.SIZE.M,
+    viewDate: new Date(),
+    referenceDate: new Date(),
+    mode: constants_1.CALENDAR_MODE.Date,
+    viewMode: constants_1.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/cjs/helperComponents/CalendarContext/index.d.ts

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

package/dist/cjs/helperComponents/CalendarContext/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("./CalendarContext"), exports);

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

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