@cloud-ru/ds-calendar 1.0.0

package/dist/cjs/helperComponents/DecadeView/DecadeView.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecadeView = DecadeView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+const Grid_1 = require("../Grid");
+const utils_2 = require("./utils");
+function DecadeView() {
+    const { referenceDate, setViewMode, setViewShift, preselectedRange, continuePreselect, restartPreselect, mode, setValue, startPreselect, completePreselect, } = (0, hooks_1.useCalendarContext)();
+    const onSelect = (0, react_1.useCallback)((date) => {
+        if (mode === constants_1.CALENDAR_MODE.YearRange) {
+            preselectedRange ? completePreselect(date) : startPreselect(date);
+            return;
+        }
+        if (mode === constants_1.CALENDAR_MODE.Year) {
+            setValue([date, date]);
+            return;
+        }
+        setViewShift((0, utils_1.getYearShift)(referenceDate, date));
+        setViewMode(constants_1.VIEW_MODE.Year);
+    }, [completePreselect, mode, preselectedRange, referenceDate, setValue, setViewMode, setViewShift, startPreselect]);
+    const onPreselect = (0, react_1.useCallback)((date) => {
+        if (preselectedRange) {
+            continuePreselect(date);
+        }
+    }, [continuePreselect, preselectedRange]);
+    const onLeave = (0, react_1.useCallback)(() => {
+        if (preselectedRange) {
+            restartPreselect();
+        }
+    }, [preselectedRange, restartPreselect]);
+    const grid = (0, hooks_1.useGrid)({
+        buildGrid: utils_2.buildDecadeGrid,
+        isTheSameItem: utils_1.isTheSameYear,
+        isInPeriod: utils_1.isTheSameDecade,
+        getItemLabel: utils_1.getYearLabel,
+        onSelect,
+        onPreselect,
+        onLeave,
+    });
+    return (0, jsx_runtime_1.jsx)(Grid_1.Grid, { grid: grid });
+}

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildDecadeGrid = void 0;
+const constants_1 = require("../../constants");
+const buildDecadeGrid = (date) => {
+    const result = [];
+    const year = date.getFullYear();
+    let shift = -1;
+    const { rows, columns } = constants_1.GRID_SIZE[constants_1.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;
+};
+exports.buildDecadeGrid = buildDecadeGrid;

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

@@ -0,0 +1,2 @@
+import { CalendarDropdownProps } from '../../components/CalendarDropdown/CalendarDropdown';
+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/cjs/helperComponents/DesktopCalendarDropdown/DesktopCalendarDropdown.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopCalendarDropdown = DesktopCalendarDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("@cloud-ru/ds-dropdown");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const Calendar_1 = require("../../components/Calendar");
+const styles_module_scss_1 = __importDefault(require('../../components/CalendarDropdown/styles.module.css'));
+const utils_2 = require("../../utils");
+const Footer_1 = require("../Footer");
+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] = (0, utils_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const getTestId = (0, react_1.useMemo)(() => (0, utils_2.getTestIdBuilder)(testId), [testId]);
+    const handleFooterApply = (0, react_1.useCallback)(() => {
+        onApply?.();
+        if (closeOnApply) {
+            setOpen(false);
+        }
+    }, [closeOnApply, onApply, setOpen]);
+    const content = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.calendarDropdownContent, className), "data-test-id": getTestId('content'), children: (0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...calendarProps, bottomSlot: (0, jsx_runtime_1.jsx)(Footer_1.Footer, { inline: true, onApply: handleFooterApply, onCurrent: onCurrent }) }) }));
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: styles_module_scss_1.default.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/cjs/helperComponents/DesktopCalendarDropdown/index.d.ts

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

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

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

@@ -0,0 +1,2 @@
+import { TimePickerDropdownProps } from '../../components/TimePickerDropdown/TimePickerDropdown';
+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/cjs/helperComponents/DesktopTimePickerDropdown/DesktopTimePickerDropdown.js

@@ -0,0 +1,117 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesktopTimePickerDropdown = DesktopTimePickerDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("@cloud-ru/ds-dropdown");
+const locale_1 = require("@cloud-ru/ds-locale");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../components/TimePicker/constants");
+const styles_module_scss_1 = __importDefault(require('../../components/TimePickerDropdown/styles.module.css'));
+const constants_2 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const utils_2 = require("../../utils");
+const CalendarContext_1 = require("../CalendarContext");
+const Footer_1 = require("../Footer");
+const TimePickerBase_1 = require("../TimePickerBase");
+const stubFunc = () => { };
+const stubBuildCellProps = () => ({ isDisabled: false, isHoliday: false });
+function DesktopTimePickerDropdown({ className, size = constants_2.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] = (0, utils_1.useUncontrolledProp)(openProp, false, onOpenChange);
+    const [focus, setFocus] = (0, react_1.useState)(undefined);
+    const today = (0, react_1.useMemo)(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+    const { internalValue, setValue, dateAndTime, onTimeChange, onDateChange, onDateAndTimeChange, isDateFilled, isTimeFilled, isDateAndTimeFilled, } = (0, hooks_1.useTimePickerValueBridge)({ value: valueProp, defaultValue, onChangeValue, showSeconds });
+    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 getTestId = (0, react_1.useMemo)(() => (0, utils_2.getTestIdBuilder)(testId), [testId]);
+    const ctxLang = (0, locale_1.useLang)();
+    const locale = (0, react_1.useMemo)(() => (0, utils_2.getLocale)({ localeProp: constants_1.DEFAULT_LOCALE, ctxLang }), [ctxLang]);
+    const handleApply = (0, react_1.useCallback)(() => {
+        onApply?.();
+        if (closeOnApply) {
+            setOpen(false);
+        }
+    }, [closeOnApply, onApply, setOpen]);
+    const calendarContextValue = (0, react_1.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 = ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.timePickerDropdownContent, className), "data-size": size, "data-test-id": getTestId('content'), children: (0, jsx_runtime_1.jsx)(CalendarContext_1.CalendarContext.Provider, { value: calendarContextValue, children: (0, jsx_runtime_1.jsx)(TimePickerBase_1.TimePickerBase, { className: styles_module_scss_1.default.timePickerBaseLimited }) }) }));
+    // Футер вынесен в `bottomBar` дропдауна (`footer` + `footerDivider`) — divider и
+    // паддинги даёт сам Dropdown. Провайдер контекста дублируется здесь, т.к. `footer` —
+    // отдельный от `content` регион.
+    const footer = ((0, jsx_runtime_1.jsx)(CalendarContext_1.CalendarContext.Provider, { value: calendarContextValue, children: (0, jsx_runtime_1.jsx)(Footer_1.Footer, { onApply: handleApply, onCurrent: onCurrent }) }));
+    return ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { className: styles_module_scss_1.default.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/cjs/helperComponents/DesktopTimePickerDropdown/index.d.ts

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

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

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

@@ -0,0 +1,100 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = Footer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const button_1 = require("@cloud-ru/ds-button");
+const divider_1 = require("@cloud-ru/ds-divider");
+const list_1 = require("@cloud-ru/ds-list");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const utils_1 = require("../../utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/**
+ * Футер календарных дропдаунов (Apply / Current). Кнопки собираются общим
+ * `FooterActions` из `@cloud-ru/ds-bottom-sheet` — единый источник правды с футерами
+ * modal / drawer / bottom-sheet (Figma `popupDropdownFooter`). Читает состояние из
+ * `CalendarContext`, поэтому рендерится только внутри провайдера контекста.
+ */
+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, } = (0, hooks_1.useCalendarContext)();
+    const { t } = locale_1.calendarLocale.useTranslations();
+    if (![constants_1.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((0, list_1.getDefaultItemId)(dateAndTime?.seconds ?? 0));
+                }
+                else {
+                    minutesKeyboardNavigationRef.current?.focusItem((0, list_1.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((0, utils_1.getMonthShift)(referenceDate, todayDate));
+        hoursKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(todayDate.getHours() ?? 0));
+        minutesKeyboardNavigationRef.current?.focusItem((0, list_1.getDefaultItemId)(todayDate.getMinutes() ?? 0));
+        secondsKeyboardNavigationRef.current?.focusItem((0, list_1.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 = ((0, jsx_runtime_1.jsx)(bottom_sheet_1.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: button_1.VIEW.Function,
+            innerRef: currentButtonRef,
+            onClick: handleCurrentClick,
+            onKeyDown: handleCurrentKeyDown,
+        }, testIds: {
+            approve: getTestId('apply-button') ?? '',
+            additional: getTestId('current-button') ?? '',
+            cancel: '',
+        }, actionsClassName: inline ? styles_module_scss_1.default.actions : undefined }));
+    if (!inline) {
+        return actions;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inline, children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: styles_module_scss_1.default.divider }), actions] }));
+}

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

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

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

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

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

package/dist/cjs/helperComponents/Grid/Grid.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = Grid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const Item_1 = require("../Item");
+const WeekRow_1 = require("../WeekRow");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Grid({ grid }) {
+    const { size, viewMode, fitToContainer } = (0, hooks_1.useCalendarContext)();
+    const gridConfig = (0, react_1.useMemo)(() => {
+        const { columns } = constants_1.GRID_SIZE[viewMode];
+        return {
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+        };
+    }, [viewMode]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.grid, "data-fit-to-container": fitToContainer || undefined, style: gridConfig, children: [viewMode === constants_1.VIEW_MODE.Month && (0, jsx_runtime_1.jsx)(WeekRow_1.WeekRow, {}), grid.map((row, rowIndex) => row.map((cell, colIndex) => ((0, jsx_runtime_1.jsx)(Item_1.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/cjs/helperComponents/Grid/index.d.ts

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

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

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

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

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

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

package/dist/cjs/helperComponents/Header/Header.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const locale_1 = require("../../locale");
+const utils_1 = require("../../utils");
+const NavButton_1 = require("../NavButton");
+const constants_2 = require("./constants");
+const hooks_2 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+const VIEW_MODE_MAP = {
+    [constants_1.VIEW_MODE.Month]: constants_1.VIEW_MODE.Year,
+    [constants_1.VIEW_MODE.Year]: constants_1.VIEW_MODE.Decade,
+    [constants_1.VIEW_MODE.Decade]: constants_1.VIEW_MODE.Decade,
+};
+const PERIOD_NAV_ARIA_KEYS = {
+    prev: {
+        [constants_1.VIEW_MODE.Month]: 'prevPeriodMonth',
+        [constants_1.VIEW_MODE.Year]: 'prevPeriodYear',
+        [constants_1.VIEW_MODE.Decade]: 'prevPeriodDecade',
+    },
+    next: {
+        [constants_1.VIEW_MODE.Month]: 'nextPeriodMonth',
+        [constants_1.VIEW_MODE.Year]: 'nextPeriodYear',
+        [constants_1.VIEW_MODE.Decade]: 'nextPeriodDecade',
+    },
+};
+const ICONS = {
+    UP: {
+        [constants_1.SIZE.S]: (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, { size: 16 }),
+        [constants_1.SIZE.M]: (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}),
+        [constants_1.SIZE.L]: (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}),
+    },
+    DOWN: {
+        [constants_1.SIZE.S]: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, { size: 16 }),
+        [constants_1.SIZE.M]: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}),
+        [constants_1.SIZE.L]: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}),
+    },
+};
+function Header() {
+    const { referenceDate, viewDate, viewShift, setViewShift, viewMode, setViewMode, focus, setFocus, getTestId, size, firstNotDisableCell, } = (0, hooks_1.useCalendarContext)();
+    const periodName = (0, hooks_2.usePeriodName)();
+    const { t } = locale_1.calendarLocale.useTranslations();
+    const prevPeriodAriaLabel = t(PERIOD_NAV_ARIA_KEYS.prev[viewMode]);
+    const nextPeriodAriaLabel = t(PERIOD_NAV_ARIA_KEYS.next[viewMode]);
+    const levelButtonDisabled = viewMode === constants_1.VIEW_MODE.Decade;
+    const isArrowButtonFocused = focus && [constants_2.NEXT_PERIOD_BUTTON_FOCUS_NAME, constants_2.PREV_PERIOD_BUTTON_FOCUS_NAME].includes(focus);
+    const gridForMode = constants_1.GRID_SIZE[viewMode];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.header, "data-size": size, children: [(0, jsx_runtime_1.jsx)(NavButton_1.NavButton, { disabled: levelButtonDisabled, onClick: () => {
+                    if (viewMode === constants_1.VIEW_MODE.Year) {
+                        setFocus(constants_2.PREV_PERIOD_BUTTON_FOCUS_NAME);
+                    }
+                    setViewShift((0, utils_2.getShift)(referenceDate, viewDate, viewMode));
+                    setViewMode(VIEW_MODE_MAP[viewMode]);
+                }, label: periodName, "data-test-id": getTestId('period-level'), focusName: constants_2.LEVEL_BUTTON_FOCUS_NAME, tabIndex: levelButtonDisabled || isArrowButtonFocused ? -1 : 0, icon: viewMode !== constants_1.VIEW_MODE.Decade ? ICONS.DOWN[size] : undefined, onRightArrowKeyDown: () => setFocus(constants_2.PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => setFocus((0, utils_1.stringifyAddress)(firstNotDisableCell?.current ?? [0, 0])), useNavigationStartRef: true }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.scrollControlWrapper, children: [(0, jsx_runtime_1.jsx)(NavButton_1.NavButton, { onClick: () => setViewShift(viewShift - 1), "aria-label": prevPeriodAriaLabel, "data-test-id": getTestId('period-prev'), focusName: constants_2.PREV_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === constants_2.PREV_PERIOD_BUTTON_FOCUS_NAME || (levelButtonDisabled && focus !== constants_2.NEXT_PERIOD_BUTTON_FOCUS_NAME)
+                            ? 0
+                            : -1, icon: ICONS.UP[size], onRightArrowKeyDown: () => setFocus(constants_2.NEXT_PERIOD_BUTTON_FOCUS_NAME), onLeftArrowKeyDown: () => setFocus(constants_2.LEVEL_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => {
+                            const rightGap = viewMode === constants_1.VIEW_MODE.Month ? 2 : 1;
+                            setFocus((0, utils_1.stringifyAddress)([0, gridForMode.columns - rightGap]));
+                        } }), (0, jsx_runtime_1.jsx)(NavButton_1.NavButton, { onClick: () => setViewShift(viewShift + 1), "aria-label": nextPeriodAriaLabel, "data-test-id": getTestId('period-next'), focusName: constants_2.NEXT_PERIOD_BUTTON_FOCUS_NAME, tabIndex: focus === constants_2.NEXT_PERIOD_BUTTON_FOCUS_NAME ? 0 : -1, icon: ICONS.DOWN[size], onLeftArrowKeyDown: () => setFocus(constants_2.PREV_PERIOD_BUTTON_FOCUS_NAME), onDownArrowKeyDown: () => setFocus((0, utils_1.stringifyAddress)([0, gridForMode.columns - 1])) })] })] }));
+}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREV_PERIOD_BUTTON_FOCUS_NAME = exports.NEXT_PERIOD_BUTTON_FOCUS_NAME = exports.LEVEL_BUTTON_FOCUS_NAME = void 0;
+exports.LEVEL_BUTTON_FOCUS_NAME = 'level';
+exports.NEXT_PERIOD_BUTTON_FOCUS_NAME = 'next';
+exports.PREV_PERIOD_BUTTON_FOCUS_NAME = 'prev';

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

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

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePeriodName = usePeriodName;
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const utils_1 = require("../../utils");
+function usePeriodName() {
+    const { viewDate, viewMode, locale } = (0, hooks_1.useCalendarContext)();
+    switch (viewMode) {
+        case constants_1.VIEW_MODE.Month: {
+            const year = viewDate.getFullYear();
+            return `${(0, utils_1.getMonthName)(viewDate, locale)} ${year}`;
+        }
+        case constants_1.VIEW_MODE.Year:
+            return viewDate.getFullYear().toString();
+        case constants_1.VIEW_MODE.Decade: {
+            const decadeStart = viewDate.getFullYear();
+            return `${decadeStart}-${decadeStart + 9}`;
+        }
+        default:
+            return '';
+    }
+}

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

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