@ozen-ui/kit 0.74.0 → 0.75.0

package/__inner__/cjs/components/Calendar/Calendar.js

@@ -4,6 +4,8 @@ exports.Calendar = void 0;
 var tslib_1 = require("tslib");
 require("./Calendar.css");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
+var useDevEffect_1 = require("../../hooks/useDevEffect");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var getByMap_1 = require("../../utils/getByMap");
 var components_1 = require("./components");
@@ -18,9 +20,31 @@ exports.Calendar = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? constants_1.CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? constants_1.CALENDAR_DEFAULT_START_DAY : _c, _d = props.calendars, calendars = _d === void 0 ? constants_1.CALENDAR_DEFAULT_CALENDARS : _d, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "mode", "startDay", "calendars", "getPeriodSwitchAriaLabel"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? constants_1.CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? constants_1.CALENDAR_DEFAULT_START_DAY : _c, _d = props.calendars, calendars = _d === void 0 ? constants_1.CALENDAR_DEFAULT_CALENDARS : _d, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, stepsProp = props.steps, initialStepProp = props.initialStep, other = tslib_1.__rest(props, ["size", "mode", "startDay", "calendars", "getPeriodSwitchAriaLabel", "steps", "initialStep"]);
+    var initialStep = (function () {
+        if (initialStepProp) {
+            return initialStepProp;
+        }
+        if (stepsProp !== undefined && initialStepProp === undefined) {
+            return stepsProp[0];
+        }
+        return constants_1.CALENDAR_DEFAULT_INITIAL_STEP;
+    })();
+    var steps = stepsProp !== null && stepsProp !== void 0 ? stepsProp : constants_1.CALENDAR_DEFAULT_STEPS;
     var getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabelProp || utils_1.getPeriodSwitchAriaLabel;
     var Component = (0, getByMap_1.getByMap)(typeMap, mode);
-    return (react_1.default.createElement(Component, tslib_1.__assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (steps.length === 0) {
+            logger_1.logger.error('steps не может быть пустым массивом.');
+            return;
+        }
+        if (!steps.includes(initialStep)) {
+            logger_1.logger.error("initialStep \"".concat(initialStep, "\" \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D \u0432 steps [").concat(steps.map(function (step) { return "\"".concat(step, "\""); }).join(', '), "]."));
+        }
+        if (steps.length !== new Set(steps).size) {
+            logger_1.logger.error("\u0412 steps [".concat(steps.map(function (step) { return "\"".concat(step, "\""); }).join(', '), "] \u0435\u0441\u0442\u044C \u0434\u0443\u0431\u043B\u0438\u0440\u0443\u044E\u0449\u0438\u0435 \u0448\u0430\u0433\u0438, \u043F\u0435\u0440\u0435\u043F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u043F\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043C\u044B\u0435 \u0434\u0430\u043D\u043D\u044B\u0435."));
+        }
+    }, [steps, initialStep]);
+    return (react_1.default.createElement(Component, tslib_1.__assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel, steps: steps, initialStep: initialStep }, other, { ref: ref })));
 });
 exports.Calendar.displayName = 'Calendar';

package/__inner__/cjs/components/Calendar/CalendarContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CalendarPropSize, CalendarProps } from './types';
+import type { CalendarPropSize, CalendarProps, CalendarSteps, CalendarStepVariant } from './types';
 export interface CalendarContextValue {
     minDate?: Date;
     maxDate?: Date;
@@ -8,6 +8,13 @@ export interface CalendarContextValue {
     onYearClick?: CalendarProps['onYearClick'];
     onMonthClick?: CalendarProps['onMonthClick'];
     getPeriodSwitchAriaLabel?: CalendarProps['getPeriodSwitchAriaLabel'];
+    steps: CalendarSteps;
+    initialStep: CalendarStepVariant;
+    hasDaysStep: boolean;
+    hasMonthsStep: boolean;
+    hasYearsStep: boolean;
+    lastStep: CalendarStepVariant;
+    firstStep: CalendarStepVariant;
 }
 export declare const CalendarContext: React.Context<CalendarContextValue>;
 export declare const useCalendar: () => CalendarContextValue;

package/__inner__/cjs/components/Calendar/CalendarContext.js

@@ -3,6 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendar = exports.CalendarContext = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-exports.CalendarContext = react_1.default.createContext({});
+var constants_1 = require("./constants");
+exports.CalendarContext = react_1.default.createContext({
+    steps: constants_1.CALENDAR_DEFAULT_STEPS,
+    initialStep: constants_1.CALENDAR_DEFAULT_INITIAL_STEP,
+    hasDaysStep: true,
+    hasMonthsStep: true,
+    hasYearsStep: true,
+    firstStep: 'years',
+    lastStep: 'days',
+});
 var useCalendar = function () { return (0, react_1.useContext)(exports.CalendarContext); };
 exports.useCalendar = useCalendar;

package/__inner__/cjs/components/Calendar/__tests__/utils.d.ts

@@ -0,0 +1,11 @@
+import type { CalendarStepVariant } from '../types';
+export declare const getRoot: () => HTMLDivElement;
+export declare const getFromCalendar: () => HTMLDivElement;
+export declare const getToCalendar: () => HTMLDivElement;
+export declare const getButtonPrevPeriod: () => HTMLDivElement;
+export declare const getButtonNextPeriod: () => HTMLDivElement;
+export declare const getDaysGrid: (root?: HTMLDivElement) => HTMLDivElement;
+export declare const getMonthsGrid: (root?: HTMLDivElement) => HTMLDivElement;
+export declare const getYearsGrid: (root?: HTMLDivElement) => HTMLDivElement;
+export declare const getStep: (root?: HTMLDivElement) => CalendarStepVariant;
+export declare const getGridButton: (text: string | number, root?: HTMLDivElement) => Element;

package/__inner__/cjs/components/Calendar/__tests__/utils.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGridButton = exports.getStep = exports.getYearsGrid = exports.getMonthsGrid = exports.getDaysGrid = exports.getButtonNextPeriod = exports.getButtonPrevPeriod = exports.getToCalendar = exports.getFromCalendar = exports.getRoot = void 0;
+var react_1 = require("@testing-library/react");
+var components_1 = require("../components");
+var utils_1 = require("../utils");
+var getRoot = function () { return react_1.screen.getByTestId('calendar'); };
+exports.getRoot = getRoot;
+var getFromCalendar = function () {
+    return (0, exports.getRoot)().querySelectorAll(".".concat((0, utils_1.cnCalendar)('MonthContainer')))[0];
+};
+exports.getFromCalendar = getFromCalendar;
+var getToCalendar = function () {
+    return (0, exports.getRoot)().querySelectorAll(".".concat((0, utils_1.cnCalendar)('MonthContainer')))[1];
+};
+exports.getToCalendar = getToCalendar;
+var getButtonPrevPeriod = function () {
+    return react_1.screen.getByLabelText('prev');
+};
+exports.getButtonPrevPeriod = getButtonPrevPeriod;
+var getButtonNextPeriod = function () {
+    return react_1.screen.getByLabelText('next');
+};
+exports.getButtonNextPeriod = getButtonNextPeriod;
+var getDaysGrid = function (root) {
+    return (root !== null && root !== void 0 ? root : (0, exports.getRoot)()).querySelector(".".concat((0, components_1.cnCalendarDays)()));
+};
+exports.getDaysGrid = getDaysGrid;
+var getMonthsGrid = function (root) {
+    return (root !== null && root !== void 0 ? root : (0, exports.getRoot)()).querySelector(".".concat((0, components_1.cnCalendarMoths)()));
+};
+exports.getMonthsGrid = getMonthsGrid;
+var getYearsGrid = function (root) {
+    return (root !== null && root !== void 0 ? root : (0, exports.getRoot)()).querySelector(".".concat((0, components_1.cnCalendarYears)()));
+};
+exports.getYearsGrid = getYearsGrid;
+var getStep = function (root) {
+    if ((0, exports.getDaysGrid)(root)) {
+        return 'days';
+    }
+    if ((0, exports.getMonthsGrid)(root)) {
+        return 'months';
+    }
+    if ((0, exports.getYearsGrid)(root)) {
+        return 'years';
+    }
+    throw new Error('Не удалось определить шаг календаря.');
+};
+exports.getStep = getStep;
+var getGridButton = function (text, root) {
+    var rootElement = root !== null && root !== void 0 ? root : (0, exports.getRoot)();
+    var button = Array.from(rootElement.querySelectorAll('.CalendarGridItem')).find(function (element) { var _a; return ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === String(text).toLowerCase(); });
+    if (!button) {
+        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043D\u0430\u0439\u0442\u0438 \u043A\u043D\u043E\u043F\u043A\u0443 \u0441 \u0442\u0435\u043A\u0441\u0442\u043E\u043C \"".concat(text, "\""));
+    }
+    return button;
+};
+exports.getGridButton = getGridButton;

package/__inner__/cjs/components/Calendar/components/CalendarGrid/CalendarGrid.js

@@ -18,18 +18,19 @@ exports.cnCalendarMoths = (0, classname_1.cn)('CalendarMonths');
 exports.cnCalendarYears = (0, classname_1.cn)('CalendarYears');
 exports.CalendarGrid = (0, react_1.forwardRef)(function () {
     var _a = (0, CalendarContext_1.useCalendar)(), size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
-    var _b = (0, CalendarItemContext_1.useCalendarItem)(), step = _b.step, goStep = _b.goStep, calendar = _b.calendar;
+    var _b = (0, CalendarItemContext_1.useCalendarItem)(), step = _b.step, toNextStep = _b.toNextStep, calendar = _b.calendar;
     var _c = (0, datepicker_1.useDatePickerContext)(), _d = _c.data, weekDays = _d.weekDays, years = _d.years, months = _d.months, _e = _c.propGetters, dayButton = _e.dayButton, monthButton = _e.monthButton, yearButton = _e.yearButton;
     var _f = calendar || {}, days = _f.days, month = _f.month;
     var handleClickOnDay = function (e, date) {
+        toNextStep();
         onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(e, date);
     };
     var handleClickOnMonth = function (e, date) {
-        goStep === null || goStep === void 0 ? void 0 : goStep('days');
+        toNextStep();
         onMonthClick === null || onMonthClick === void 0 ? void 0 : onMonthClick(e, date);
     };
     var handleClickOnYear = function (e, date) {
-        goStep === null || goStep === void 0 ? void 0 : goStep('months');
+        toNextStep();
         onYearClick === null || onYearClick === void 0 ? void 0 : onYearClick(e, date);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItem.js

@@ -4,17 +4,35 @@ exports.CalendarItem = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var Divider_1 = require("../../../Divider");
+var CalendarContext_1 = require("../../CalendarContext");
 var utils_1 = require("../../utils");
 var index_1 = require("../index");
 var CalendarItemContext_1 = require("./CalendarItemContext");
 var components_1 = require("./components");
 exports.CalendarItem = (0, react_1.forwardRef)(function (_a, ref) {
     var calendar = _a.calendar, type = _a.type;
-    var _b = tslib_1.__read((0, react_1.useState)('days'), 2), step = _b[0], setStep = _b[1];
+    var _b = (0, CalendarContext_1.useCalendar)(), steps = _b.steps, initialStep = _b.initialStep;
+    var _c = tslib_1.__read((0, react_1.useState)(function () {
+        if (!steps.includes(initialStep)) {
+            return steps[0];
+        }
+        return initialStep;
+    }), 2), step = _c[0], setStep = _c[1];
     // Управление представлениями календаря
     var goStep = function (step) {
         setStep(step);
     };
+    var toNextStep = function () {
+        var currentStepIndex = steps.indexOf(step);
+        if (currentStepIndex === -1) {
+            return;
+        }
+        var nextStep = steps[currentStepIndex + 1];
+        if (!nextStep) {
+            return;
+        }
+        setStep(nextStep);
+    };
     var getActions = function (type) {
         if (type === 'single') {
             return {
@@ -40,7 +58,12 @@ exports.CalendarItem = (0, react_1.forwardRef)(function (_a, ref) {
             nextButton: react_1.default.createElement("div", null),
         };
     };
-    return (react_1.default.createElement(CalendarItemContext_1.CalendarItemContext.Provider, { value: { step: step, goStep: goStep, calendar: calendar } },
+    return (react_1.default.createElement(CalendarItemContext_1.CalendarItemContext.Provider, { value: {
+            step: step,
+            goStep: goStep,
+            toNextStep: toNextStep,
+            calendar: calendar,
+        } },
         react_1.default.createElement("div", { ref: ref, className: (0, utils_1.cnCalendar)('MonthContainer') },
             react_1.default.createElement(index_1.CalendarSwitcher, tslib_1.__assign({}, getActions(type))),
             react_1.default.createElement(Divider_1.Divider, { color: "secondary" }),

package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItemContext.d.ts

@@ -4,6 +4,7 @@ import type { CalendarStepVariant } from '../../index';
 export interface CalendarItemContextValue {
     step: CalendarStepVariant;
     goStep?: (step: CalendarStepVariant) => void;
+    toNextStep: () => void;
     calendar?: DPCalendar;
 }
 export declare const CalendarItemContext: React.Context<CalendarItemContextValue>;

package/__inner__/cjs/components/Calendar/components/CalendarItem/CalendarItemContext.js

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 exports.CalendarItemContext = react_1.default.createContext({
     step: 'days',
+    toNextStep: function () { },
 });
 var useCalendarItem = function () { return (0, react_1.useContext)(exports.CalendarItemContext); };
 exports.useCalendarItem = useCalendarItem;

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/CalendarModeRange.js

@@ -5,17 +5,38 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var datepicker_1 = require("@rehookify/datepicker");
 var useControlled_1 = require("../../../../hooks/useControlled");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var CalendarContext_1 = require("../../CalendarContext");
 var utils_1 = require("../../utils");
 var index_1 = require("../index");
 var components_1 = require("./components");
+var isSameDayMonthYear = function (date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+};
 exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'Calendar',
     });
-    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onCalendarsChange = props.onCalendarsChange, onOffsetDateChangeProp = props.onOffsetDateChange, calendars = props.calendars, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onCalendarsChange", "onOffsetDateChange", "calendars", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
+    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onCalendarsChange = props.onCalendarsChange, onOffsetDateChangeProp = props.onOffsetDateChange, calendars = props.calendars, onMonthClickProp = props.onMonthClick, onDayClickProp = props.onDayClick, onYearClickProp = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, steps = props.steps, initialStep = props.initialStep, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onCalendarsChange", "onOffsetDateChange", "calendars", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel", "steps", "initialStep"]);
+    var lastClickedStep = (0, useStoredValue_1.useStoredValue)(null);
+    var onMonthClick = function (event, date) {
+        lastClickedStep.current = 'months';
+        onMonthClickProp === null || onMonthClickProp === void 0 ? void 0 : onMonthClickProp(event, date);
+    };
+    var onDayClick = function (event, date) {
+        lastClickedStep.current = 'days';
+        onDayClickProp === null || onDayClickProp === void 0 ? void 0 : onDayClickProp(event, date);
+    };
+    var onYearClick = function (event, date) {
+        lastClickedStep.current = 'years';
+        onYearClickProp === null || onYearClickProp === void 0 ? void 0 : onYearClickProp(event, date);
+    };
+    var stepsHelpers = (0, react_1.useMemo)(function () { return (0, utils_1.calculateStepsHelpers)(steps); }, [steps]);
+    var stepsAvailability = (0, react_1.useMemo)(function () { return (0, utils_1.calculateStepsAvailability)(steps); }, [steps]);
     var _a = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
@@ -29,14 +50,56 @@ exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
         state: 'offsetDate',
     }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
     var onOffsetChange = function (date) {
-        setOffsetDateState(date);
-        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+        var lastStep = lastClickedStep.current;
+        lastClickedStep.current = null;
+        var updateOffsetDate = function () {
+            setOffsetDateState(date);
+            onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+        };
+        var isYearLastStep = stepsHelpers.lastStep === 'years';
+        var isMonthLastStep = stepsHelpers.lastStep === 'months';
+        var isFinishingImpossible = !isYearLastStep && !isMonthLastStep;
+        // Если произошло переключение через стрелки по датам
+        // Или финиш с текущей конфигурацией steps невозможен
+        if (!lastStep || isFinishingImpossible) {
+            updateOffsetDate();
+            return;
+        }
+        var isMonthStep = lastStep === 'months';
+        var isYearStep = lastStep === 'years';
+        var isFinish = (isMonthStep && isMonthLastStep) || (isYearStep && isYearLastStep);
+        if (isFinish) {
+            var previousDateFirstDate = value === null || value === void 0 ? void 0 : value[0];
+            var isEqualFirstDate = previousDateFirstDate &&
+                isSameDayMonthYear(previousDateFirstDate, date);
+            var previousDateLastDate = value === null || value === void 0 ? void 0 : value[1];
+            var isEqualLastDate = previousDateLastDate &&
+                isSameDayMonthYear(previousDateLastDate, date);
+            if (isEqualFirstDate && isEqualLastDate) {
+                return;
+            }
+            var newValue = previousDateFirstDate
+                ? [previousDateFirstDate, date]
+                : [date];
+            setValue(newValue);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+        }
+        updateOffsetDate();
     };
     var onDatesChange = function (data) {
-        if (data) {
+        var isFinishChange = stepsHelpers.lastStep === 'days';
+        if (isFinishChange) {
             setValue(data);
             onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(data);
         }
+        else {
+            var firstDate = data[0];
+            if (!firstDate) {
+                return;
+            }
+            setOffsetDateState(firstDate);
+            onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(firstDate);
+        }
     };
     var config = {
         calendar: tslib_1.__assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
@@ -59,15 +122,7 @@ exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
         offsetDate: offsetDate || undefined,
     };
     return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
-        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: {
-                size: size,
-                minDate: minDate,
-                maxDate: maxDate,
-                onDayClick: onDayClick,
-                onYearClick: onYearClick,
-                onMonthClick: onMonthClick,
-                getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-            } },
+        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: tslib_1.__assign(tslib_1.__assign({ size: size, minDate: minDate, maxDate: maxDate, onDayClick: onDayClick, onYearClick: onYearClick, onMonthClick: onMonthClick, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel, steps: steps, initialStep: initialStep }, stepsHelpers), stepsAvailability) },
             react_1.default.createElement("div", tslib_1.__assign({ className: (0, utils_1.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
                 react_1.default.createElement(index_1.Calendars, { onCalendarsChange: onCalendarsChange }),
                 react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/CalendarModeSingle.js

@@ -5,12 +5,31 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var datepicker_1 = require("@rehookify/datepicker");
 var useControlled_1 = require("../../../../hooks/useControlled");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
 var CalendarContext_1 = require("../../CalendarContext");
 var utils_1 = require("../../utils");
 var index_1 = require("../index");
 var components_1 = require("./components");
+var isSameDayMonthYear = function (date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+};
 exports.CalendarModeSingle = (0, react_1.forwardRef)(function (props, ref) {
-    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, onCalendarsChange = props.onCalendarsChange, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, calendars = props.calendars, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "onCalendarsChange", "defaultOffsetDate", "exclude", "minDate", "maxDate", "calendars", "className", "getPeriodSwitchAriaLabel"]);
+    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClickProp = props.onMonthClick, onDayClickProp = props.onDayClick, onYearClickProp = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, onCalendarsChange = props.onCalendarsChange, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, calendars = props.calendars, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, steps = props.steps, initialStep = props.initialStep, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "onCalendarsChange", "defaultOffsetDate", "exclude", "minDate", "maxDate", "calendars", "className", "getPeriodSwitchAriaLabel", "steps", "initialStep"]);
+    var lastClickedStep = (0, useStoredValue_1.useStoredValue)(null);
+    var onMonthClick = function (event, date) {
+        lastClickedStep.current = 'months';
+        onMonthClickProp === null || onMonthClickProp === void 0 ? void 0 : onMonthClickProp(event, date);
+    };
+    var onDayClick = function (event, date) {
+        lastClickedStep.current = 'days';
+        onDayClickProp === null || onDayClickProp === void 0 ? void 0 : onDayClickProp(event, date);
+    };
+    var onYearClick = function (event, date) {
+        lastClickedStep.current = 'years';
+        onYearClickProp === null || onYearClickProp === void 0 ? void 0 : onYearClickProp(event, date);
+    };
     var _a = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
@@ -23,16 +42,51 @@ exports.CalendarModeSingle = (0, react_1.forwardRef)(function (props, ref) {
         name: 'Calendar',
         state: 'offsetDate',
     }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
+    var stepsHelpers = (0, react_1.useMemo)(function () { return (0, utils_1.calculateStepsHelpers)(steps); }, [steps]);
+    var stepsAvailability = (0, react_1.useMemo)(function () { return (0, utils_1.calculateStepsAvailability)(steps); }, [steps]);
     var onDatesChange = function (data) {
-        var value = data[0];
-        if (value) {
-            setValue(value);
-            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(value);
+        var newValue = data[0];
+        if (!newValue) {
+            return;
+        }
+        var isFinishChange = stepsHelpers.lastStep === 'days';
+        if (isFinishChange) {
+            setValue(newValue);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+        }
+        else {
+            setOffsetDateState(newValue);
+            onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(newValue);
         }
     };
     var onOffsetChange = function (date) {
-        setOffsetDateState(date);
-        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+        var lastStep = lastClickedStep.current;
+        lastClickedStep.current = null;
+        var updateOffsetDate = function () {
+            setOffsetDateState(date);
+            onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+        };
+        var isYearLastStep = stepsHelpers.lastStep === 'years';
+        var isMonthLastStep = stepsHelpers.lastStep === 'months';
+        var isFinishingImpossible = !isYearLastStep && !isMonthLastStep;
+        // Если произошло переключение через стрелки по датам
+        // Или финиш с текущей конфигурацией steps невозможен
+        if (!lastStep || isFinishingImpossible) {
+            updateOffsetDate();
+            return;
+        }
+        var isMonthStep = lastStep === 'months';
+        var isYearStep = lastStep === 'years';
+        var isFinish = (isMonthStep && isMonthLastStep) || (isYearStep && isYearLastStep);
+        if (isFinish) {
+            var previousDate = value;
+            if (previousDate && isSameDayMonthYear(previousDate, date)) {
+                return;
+            }
+            setValue(date);
+            onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(date);
+        }
+        updateOffsetDate();
     };
     var config = {
         calendar: tslib_1.__assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
@@ -50,15 +104,7 @@ exports.CalendarModeSingle = (0, react_1.forwardRef)(function (props, ref) {
         selectedDates: value ? [value] : [],
     };
     return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
-        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: {
-                size: size,
-                minDate: minDate,
-                maxDate: maxDate,
-                onDayClick: onDayClick,
-                onYearClick: onYearClick,
-                onMonthClick: onMonthClick,
-                getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-            } },
+        react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: tslib_1.__assign(tslib_1.__assign({ size: size, minDate: minDate, maxDate: maxDate, onDayClick: onDayClick, onYearClick: onYearClick, onMonthClick: onMonthClick, steps: steps, initialStep: initialStep, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, stepsHelpers), stepsAvailability) },
             react_1.default.createElement("div", tslib_1.__assign({ className: (0, utils_1.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
                 react_1.default.createElement(index_1.Calendars, { onCalendarsChange: onCalendarsChange }),
                 react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/CalendarSwitcher.js

@@ -10,14 +10,14 @@ var capitalizeFirstLetter_1 = require("../../../../utils/capitalizeFirstLetter")
 var classname_1 = require("../../../../utils/classname");
 var ButtonNext_1 = require("../../../ButtonNext");
 var IconButtonNext_1 = require("../../../IconButtonNext");
-var Typography_1 = require("../../../Typography");
 var CalendarContext_1 = require("../../CalendarContext");
 var CalendarItemContext_1 = require("../CalendarItem/CalendarItemContext");
+var components_1 = require("./components");
 exports.cnCalendarSwitcher = (0, classname_1.cn)('CalendarSwitcher');
 exports.CalendarSwitcher = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c;
     var className = _a.className, prevButton = _a.prevButton, nextButton = _a.nextButton, other = tslib_1.__rest(_a, ["className", "prevButton", "nextButton"]);
-    var _d = (0, CalendarContext_1.useCalendar)(), size = _d.size, getPeriodSwitchAriaLabel = _d.getPeriodSwitchAriaLabel;
+    var _d = (0, CalendarContext_1.useCalendar)(), size = _d.size, getPeriodSwitchAriaLabel = _d.getPeriodSwitchAriaLabel, hasMonthsStep = _d.hasMonthsStep, hasYearsStep = _d.hasYearsStep;
     var _e = (0, CalendarItemContext_1.useCalendarItem)(), step = _e.step, goStep = _e.goStep, calendar = _e.calendar;
     var _f = (0, datepicker_1.useDatePickerContext)(), years = _f.data.years, _g = _f.propGetters, addOffset = _g.addOffset, subtractOffset = _g.subtractOffset, nextYearsButton = _g.nextYearsButton, previousYearsButton = _g.previousYearsButton;
     var _h = calendar || {}, year = _h.year, month = _h.month;
@@ -32,18 +32,17 @@ exports.CalendarSwitcher = (0, react_1.forwardRef)(function (_a, ref) {
         step === 'days' && (react_1.default.createElement(react_1.default.Fragment, null,
             prevButton,
             react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('Actions') },
-                react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(month)),
-                react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
+                hasMonthsStep ? (react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(month))) : (react_1.default.createElement(components_1.CalendarSwitcherText, null, month && (0, capitalizeFirstLetter_1.capitalizeFirstLetter)(month))),
+                hasYearsStep ? (react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)) : (react_1.default.createElement(components_1.CalendarSwitcherText, null, year))),
             nextButton)),
         step === 'months' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('StartActions') },
-                react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
+            react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('StartActions') }, hasYearsStep ? (react_1.default.createElement(ButtonNext_1.Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)) : (react_1.default.createElement(components_1.CalendarSwitcherText, null, year))),
             react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('EndActions') },
                 react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "function", type: "button", color: "primary", icon: icons_1.ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, subtractOffset({ years: 1 }))),
                 react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({ variant: "function", type: "button", color: "primary", icon: icons_1.ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ years: 1 })))))),
         step === 'years' && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, exports.cnCalendarSwitcher)('StartActions') },
-                react_1.default.createElement(Typography_1.Typography, tslib_1.__assign({ color: "primary" }, (size && { variant: "text-".concat(size) })), (_b = years === null || years === void 0 ? void 0 : years[0]) === null || _b === void 0 ? void 0 :
+                react_1.default.createElement(components_1.CalendarSwitcherText, null, (_b = years === null || years === void 0 ? void 0 : years[0]) === null || _b === void 0 ? void 0 :
                     _b.year,
                     " - ", (_c = years === null || years === void 0 ? void 0 : years[years.length - 1]) === null || _c === void 0 ? void 0 :
                     _c.year)),

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/CalendarSwitcherText.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CalendarSwitcherTextProps } from './types';
+export declare const CalendarSwitcherText: ({ children, }: CalendarSwitcherTextProps) => React.JSX.Element;

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/CalendarSwitcherText.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalendarSwitcherText = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Typography_1 = require("../../../../../Typography");
+var CalendarContext_1 = require("../../../../CalendarContext");
+var CalendarSwitcherText = function (_a) {
+    var children = _a.children;
+    var size = (0, CalendarContext_1.useCalendar)().size;
+    return (react_1.default.createElement(Typography_1.Typography, tslib_1.__assign({ color: "primary" }, (size && { variant: "text-".concat(size) })), children));
+};
+exports.CalendarSwitcherText = CalendarSwitcherText;

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CalendarSwitcherText';
+export * from './types';

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarSwitcherText"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/types.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export type CalendarSwitcherTextProps = {
+    children: ReactNode;
+};

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/index.d.ts

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

package/__inner__/cjs/components/Calendar/components/CalendarSwitcher/components/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./CalendarSwitcherText"), exports);

package/__inner__/cjs/components/Calendar/constants.d.ts

@@ -2,3 +2,5 @@ export declare const CALENDAR_DEFAULT_START_DAY = 1;
 export declare const CALENDAR_DEFAULT_SIZE = "m";
 export declare const CALENDAR_DEFAULT_MODE = "single";
 export declare const CALENDAR_DEFAULT_CALENDARS = 1;
+export declare const CALENDAR_DEFAULT_STEPS: ("days" | "months" | "years")[];
+export declare const CALENDAR_DEFAULT_INITIAL_STEP = "days";

package/__inner__/cjs/components/Calendar/constants.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CALENDAR_DEFAULT_CALENDARS = exports.CALENDAR_DEFAULT_MODE = exports.CALENDAR_DEFAULT_SIZE = exports.CALENDAR_DEFAULT_START_DAY = void 0;
+exports.CALENDAR_DEFAULT_INITIAL_STEP = exports.CALENDAR_DEFAULT_STEPS = exports.CALENDAR_DEFAULT_CALENDARS = exports.CALENDAR_DEFAULT_MODE = exports.CALENDAR_DEFAULT_SIZE = exports.CALENDAR_DEFAULT_START_DAY = void 0;
 exports.CALENDAR_DEFAULT_START_DAY = 1;
 exports.CALENDAR_DEFAULT_SIZE = 'm';
 exports.CALENDAR_DEFAULT_MODE = 'single';
 exports.CALENDAR_DEFAULT_CALENDARS = 1;
+exports.CALENDAR_DEFAULT_STEPS = [
+    'years',
+    'months',
+    'days',
+];
+exports.CALENDAR_DEFAULT_INITIAL_STEP = 'days';

package/__inner__/cjs/components/Calendar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Calendar';
+export * from './constants';
 export * from './types';

package/__inner__/cjs/components/Calendar/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Calendar"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./types"), exports);