@ozen-ui/kit 0.74.0 → 0.75.0

package/__inner__/cjs/utils/array/createFilled/createFilledArray.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFilledArray = void 0;
+var isFunction_1 = require("../../isFunction");
 var createFilledArray = function (length, value) {
-    return new Array(length).fill(value);
+    var array = [];
+    for (var i = 0; i < length; i++) {
+        array.push((0, isFunction_1.isFunction)(value) ? value(i) : value);
+    }
+    return array;
 };
 exports.createFilledArray = createFilledArray;

package/__inner__/esm/components/Calendar/Calendar.js

@@ -1,10 +1,12 @@
 import { __assign, __rest } from "tslib";
 import './Calendar.css';
 import React, { forwardRef } from 'react';
+import { logger } from '@ozen-ui/logger';
+import { useDevEffect } from '../../hooks/useDevEffect';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { getByMap } from '../../utils/getByMap';
 import { CalendarModeRange, CalendarModeSingle } from './components';
-import { CALENDAR_DEFAULT_CALENDARS, CALENDAR_DEFAULT_MODE, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, } from './constants';
+import { CALENDAR_DEFAULT_CALENDARS, CALENDAR_DEFAULT_MODE, CALENDAR_DEFAULT_SIZE, CALENDAR_DEFAULT_START_DAY, CALENDAR_DEFAULT_STEPS, CALENDAR_DEFAULT_INITIAL_STEP, } from './constants';
 import { getPeriodSwitchAriaLabel as createPeriodSwitchAriaLabel } from './utils';
 var typeMap = {
     range: CalendarModeRange,
@@ -15,9 +17,31 @@ export var Calendar = forwardRef(function (inProps, ref) {
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? CALENDAR_DEFAULT_START_DAY : _c, _d = props.calendars, calendars = _d === void 0 ? CALENDAR_DEFAULT_CALENDARS : _d, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = __rest(props, ["size", "mode", "startDay", "calendars", "getPeriodSwitchAriaLabel"]);
+    var _a = props.size, size = _a === void 0 ? CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? CALENDAR_DEFAULT_START_DAY : _c, _d = props.calendars, calendars = _d === void 0 ? CALENDAR_DEFAULT_CALENDARS : _d, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, stepsProp = props.steps, initialStepProp = props.initialStep, other = __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 CALENDAR_DEFAULT_INITIAL_STEP;
+    })();
+    var steps = stepsProp !== null && stepsProp !== void 0 ? stepsProp : CALENDAR_DEFAULT_STEPS;
     var getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabelProp || createPeriodSwitchAriaLabel;
     var Component = getByMap(typeMap, mode);
-    return (React.createElement(Component, __assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
+    useDevEffect(function () {
+        if (steps.length === 0) {
+            logger.error('steps не может быть пустым массивом.');
+            return;
+        }
+        if (!steps.includes(initialStep)) {
+            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.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.createElement(Component, __assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel, steps: steps, initialStep: initialStep }, other, { ref: ref })));
 });
 Calendar.displayName = 'Calendar';

package/__inner__/esm/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__/esm/components/Calendar/CalendarContext.js

@@ -1,3 +1,12 @@
 import React, { useContext } from 'react';
-export var CalendarContext = React.createContext({});
+import { CALENDAR_DEFAULT_STEPS, CALENDAR_DEFAULT_INITIAL_STEP, } from './constants';
+export var CalendarContext = React.createContext({
+    steps: CALENDAR_DEFAULT_STEPS,
+    initialStep: CALENDAR_DEFAULT_INITIAL_STEP,
+    hasDaysStep: true,
+    hasMonthsStep: true,
+    hasYearsStep: true,
+    firstStep: 'years',
+    lastStep: 'days',
+});
 export var useCalendar = function () { return useContext(CalendarContext); };

package/__inner__/esm/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__/esm/components/Calendar/__tests__/utils.js

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react';
+import { cnCalendarDays, cnCalendarMoths, cnCalendarYears, } from '../components';
+import { cnCalendar } from '../utils';
+export var getRoot = function () { return screen.getByTestId('calendar'); };
+export var getFromCalendar = function () {
+    return getRoot().querySelectorAll(".".concat(cnCalendar('MonthContainer')))[0];
+};
+export var getToCalendar = function () {
+    return getRoot().querySelectorAll(".".concat(cnCalendar('MonthContainer')))[1];
+};
+export var getButtonPrevPeriod = function () {
+    return screen.getByLabelText('prev');
+};
+export var getButtonNextPeriod = function () {
+    return screen.getByLabelText('next');
+};
+export var getDaysGrid = function (root) {
+    return (root !== null && root !== void 0 ? root : getRoot()).querySelector(".".concat(cnCalendarDays()));
+};
+export var getMonthsGrid = function (root) {
+    return (root !== null && root !== void 0 ? root : getRoot()).querySelector(".".concat(cnCalendarMoths()));
+};
+export var getYearsGrid = function (root) {
+    return (root !== null && root !== void 0 ? root : getRoot()).querySelector(".".concat(cnCalendarYears()));
+};
+export var getStep = function (root) {
+    if (getDaysGrid(root)) {
+        return 'days';
+    }
+    if (getMonthsGrid(root)) {
+        return 'months';
+    }
+    if (getYearsGrid(root)) {
+        return 'years';
+    }
+    throw new Error('Не удалось определить шаг календаря.');
+};
+export var getGridButton = function (text, root) {
+    var rootElement = root !== null && root !== void 0 ? root : 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;
+};

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

@@ -15,18 +15,19 @@ export var cnCalendarMoths = cn('CalendarMonths');
 export var cnCalendarYears = cn('CalendarYears');
 export var CalendarGrid = forwardRef(function () {
     var _a = useCalendar(), size = _a.size, onYearClick = _a.onYearClick, onDayClick = _a.onDayClick, onMonthClick = _a.onMonthClick;
-    var _b = useCalendarItem(), step = _b.step, goStep = _b.goStep, calendar = _b.calendar;
+    var _b = useCalendarItem(), step = _b.step, toNextStep = _b.toNextStep, calendar = _b.calendar;
     var _c = 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.createElement(React.Fragment, null,

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

@@ -1,17 +1,35 @@
 import { __assign, __read } from "tslib";
 import React, { forwardRef, useState } from 'react';
 import { Divider } from '../../../Divider';
+import { useCalendar } from '../../CalendarContext';
 import { cnCalendar } from '../../utils';
 import { CalendarGrid, CalendarSwitcher } from '../index';
 import { CalendarItemContext } from './CalendarItemContext';
 import { CalendarItemNextMonth, CalendarItemPreviousMonth } from './components';
 export var CalendarItem = forwardRef(function (_a, ref) {
     var calendar = _a.calendar, type = _a.type;
-    var _b = __read(useState('days'), 2), step = _b[0], setStep = _b[1];
+    var _b = useCalendar(), steps = _b.steps, initialStep = _b.initialStep;
+    var _c = __read(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 {
@@ -37,7 +55,12 @@ export var CalendarItem = forwardRef(function (_a, ref) {
             nextButton: React.createElement("div", null),
         };
     };
-    return (React.createElement(CalendarItemContext.Provider, { value: { step: step, goStep: goStep, calendar: calendar } },
+    return (React.createElement(CalendarItemContext.Provider, { value: {
+            step: step,
+            goStep: goStep,
+            toNextStep: toNextStep,
+            calendar: calendar,
+        } },
         React.createElement("div", { ref: ref, className: cnCalendar('MonthContainer') },
             React.createElement(CalendarSwitcher, __assign({}, getActions(type))),
             React.createElement(Divider, { color: "secondary" }),

package/__inner__/esm/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__/esm/components/Calendar/components/CalendarItem/CalendarItemContext.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 export var CalendarItemContext = React.createContext({
     step: 'days',
+    toNextStep: function () { },
 });
 export var useCalendarItem = function () { return useContext(CalendarItemContext); };

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

@@ -1,18 +1,39 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { DatePickerProvider } from '@rehookify/datepicker';
 import { useControlled } from '../../../../hooks/useControlled';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { CalendarContext } from '../../CalendarContext';
-import { cnCalendar } from '../../utils';
+import { calculateStepsAvailability, calculateStepsHelpers, cnCalendar, } from '../../utils';
 import { Calendars } from '../index';
 import { CalendarAdditionalControls } from './components';
+var isSameDayMonthYear = function (date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+};
 export var CalendarModeRange = forwardRef(function (inProps, ref) {
     var props = 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 = __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 = __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 = 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 = useMemo(function () { return calculateStepsHelpers(steps); }, [steps]);
+    var stepsAvailability = useMemo(function () { return calculateStepsAvailability(steps); }, [steps]);
     var _a = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
@@ -26,14 +47,56 @@ export var CalendarModeRange = 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: __assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
@@ -56,15 +119,7 @@ export var CalendarModeRange = forwardRef(function (inProps, ref) {
         offsetDate: offsetDate || undefined,
     };
     return (React.createElement(DatePickerProvider, { config: config },
-        React.createElement(CalendarContext.Provider, { value: {
-                size: size,
-                minDate: minDate,
-                maxDate: maxDate,
-                onDayClick: onDayClick,
-                onYearClick: onYearClick,
-                onMonthClick: onMonthClick,
-                getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-            } },
+        React.createElement(CalendarContext.Provider, { value: __assign(__assign({ size: size, minDate: minDate, maxDate: maxDate, onDayClick: onDayClick, onYearClick: onYearClick, onMonthClick: onMonthClick, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel, steps: steps, initialStep: initialStep }, stepsHelpers), stepsAvailability) },
             React.createElement("div", __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
                 React.createElement(Calendars, { onCalendarsChange: onCalendarsChange }),
                 React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));

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

@@ -1,13 +1,32 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { DatePickerProvider } from '@rehookify/datepicker';
 import { useControlled } from '../../../../hooks/useControlled';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
 import { CalendarContext } from '../../CalendarContext';
-import { cnCalendar } from '../../utils';
+import { calculateStepsAvailability, calculateStepsHelpers, cnCalendar, } from '../../utils';
 import { Calendars } from '../index';
 import { CalendarAdditionalControls } from './components';
+var isSameDayMonthYear = function (date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+};
 export var CalendarModeSingle = 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 = __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 = __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 = 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 = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
@@ -20,16 +39,51 @@ export var CalendarModeSingle = forwardRef(function (props, ref) {
         name: 'Calendar',
         state: 'offsetDate',
     }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
+    var stepsHelpers = useMemo(function () { return calculateStepsHelpers(steps); }, [steps]);
+    var stepsAvailability = useMemo(function () { return 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: __assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
@@ -47,15 +101,7 @@ export var CalendarModeSingle = forwardRef(function (props, ref) {
         selectedDates: value ? [value] : [],
     };
     return (React.createElement(DatePickerProvider, { config: config },
-        React.createElement(CalendarContext.Provider, { value: {
-                size: size,
-                minDate: minDate,
-                maxDate: maxDate,
-                onDayClick: onDayClick,
-                onYearClick: onYearClick,
-                onMonthClick: onMonthClick,
-                getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-            } },
+        React.createElement(CalendarContext.Provider, { value: __assign(__assign({ size: size, minDate: minDate, maxDate: maxDate, onDayClick: onDayClick, onYearClick: onYearClick, onMonthClick: onMonthClick, steps: steps, initialStep: initialStep, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, stepsHelpers), stepsAvailability) },
             React.createElement("div", __assign({ className: cnCalendar({ size: size }, [className]) }, other, { ref: ref }),
                 React.createElement(Calendars, { onCalendarsChange: onCalendarsChange }),
                 React.createElement(CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));

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

@@ -7,14 +7,14 @@ import { capitalizeFirstLetter as capitalize } from '../../../../utils/capitaliz
 import { cn } from '../../../../utils/classname';
 import { Button } from '../../../ButtonNext';
 import { IconButton } from '../../../IconButtonNext';
-import { Typography } from '../../../Typography';
 import { useCalendar } from '../../CalendarContext';
 import { useCalendarItem } from '../CalendarItem/CalendarItemContext';
+import { CalendarSwitcherText } from './components';
 export var cnCalendarSwitcher = cn('CalendarSwitcher');
 export var CalendarSwitcher = forwardRef(function (_a, ref) {
     var _b, _c;
     var className = _a.className, prevButton = _a.prevButton, nextButton = _a.nextButton, other = __rest(_a, ["className", "prevButton", "nextButton"]);
-    var _d = useCalendar(), size = _d.size, getPeriodSwitchAriaLabel = _d.getPeriodSwitchAriaLabel;
+    var _d = useCalendar(), size = _d.size, getPeriodSwitchAriaLabel = _d.getPeriodSwitchAriaLabel, hasMonthsStep = _d.hasMonthsStep, hasYearsStep = _d.hasYearsStep;
     var _e = useCalendarItem(), step = _e.step, goStep = _e.goStep, calendar = _e.calendar;
     var _f = 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;
@@ -29,18 +29,17 @@ export var CalendarSwitcher = forwardRef(function (_a, ref) {
         step === 'days' && (React.createElement(React.Fragment, null,
             prevButton,
             React.createElement("div", { className: cnCalendarSwitcher('Actions') },
-                React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && capitalize(month)),
-                React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
+                hasMonthsStep ? (React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnMonths, size: size }, month && capitalize(month))) : (React.createElement(CalendarSwitcherText, null, month && capitalize(month))),
+                hasYearsStep ? (React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)) : (React.createElement(CalendarSwitcherText, null, year))),
             nextButton)),
         step === 'months' && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
-                React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)),
+            React.createElement("div", { className: cnCalendarSwitcher('StartActions') }, hasYearsStep ? (React.createElement(Button, { variant: "function", type: "button", color: "primary", onClick: handleClickOnYears, size: size }, year)) : (React.createElement(CalendarSwitcherText, null, year))),
             React.createElement("div", { className: cnCalendarSwitcher('EndActions') },
                 React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronLeftIcon, size: size, "aria-label": PREVIOUS, title: PREVIOUS }, subtractOffset({ years: 1 }))),
                 React.createElement(IconButton, __assign({ variant: "function", type: "button", color: "primary", icon: ChevronRightIcon, size: size, "aria-label": NEXT, title: NEXT }, addOffset({ years: 1 })))))),
         step === 'years' && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: cnCalendarSwitcher('StartActions') },
-                React.createElement(Typography, __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.createElement(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__/esm/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__/esm/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/CalendarSwitcherText.js

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import React from 'react';
+import { Typography } from '../../../../../Typography';
+import { useCalendar } from '../../../../CalendarContext';
+export var CalendarSwitcherText = function (_a) {
+    var children = _a.children;
+    var size = useCalendar().size;
+    return (React.createElement(Typography, __assign({ color: "primary" }, (size && { variant: "text-".concat(size) })), children));
+};

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

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

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

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

package/__inner__/esm/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__/esm/components/Calendar/components/CalendarSwitcher/components/CalendarSwitcherText/types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/__inner__/esm/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__/esm/components/Calendar/constants.js

@@ -2,3 +2,9 @@ export var CALENDAR_DEFAULT_START_DAY = 1;
 export var CALENDAR_DEFAULT_SIZE = 'm';
 export var CALENDAR_DEFAULT_MODE = 'single';
 export var CALENDAR_DEFAULT_CALENDARS = 1;
+export var CALENDAR_DEFAULT_STEPS = [
+    'years',
+    'months',
+    'days',
+];
+export var CALENDAR_DEFAULT_INITIAL_STEP = 'days';

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

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

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

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