@ozen-ui/kit 0.73.0 → 0.75.0

package/__inner__/cjs/components/Stack/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stackJustifyVariant = exports.stackAlignVariant = exports.stackDirectionVariant = exports.stackGapVariant = void 0;
+exports.stackJustifyVariant = exports.stackAlignVariant = exports.stackDirectionVariant = exports.stackDisplayVariant = exports.stackGapVariant = void 0;
 exports.stackGapVariant = [
     '0',
     'xs',
@@ -16,6 +16,7 @@ exports.stackGapVariant = [
     '7xl',
     '8xl',
 ];
+exports.stackDisplayVariant = ['inline', 'block'];
 exports.stackDirectionVariant = [
     'row',
     'column',

package/__inner__/cjs/hooks/useDevEffect/index.d.ts

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

package/__inner__/cjs/hooks/useDevEffect/index.js

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

package/__inner__/cjs/hooks/useDevEffect/useDevEffect.d.ts

@@ -0,0 +1,3 @@
+import type { EffectCallback, DependencyList } from 'react';
+/** Эффект, отрабатывающий только в dev-режиме */
+export declare const useDevEffect: (effect: EffectCallback, deps: DependencyList) => void;

package/__inner__/cjs/hooks/useDevEffect/useDevEffect.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDevEffect = void 0;
+var react_1 = require("react");
+var environment_1 = require("../../constants/environment");
+/** Эффект, отрабатывающий только в dev-режиме */
+var useDevEffect = function (effect, deps) {
+    if (environment_1.isDev) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useEffect)(effect, deps);
+    }
+};
+exports.useDevEffect = useDevEffect;

package/__inner__/cjs/hooks/useIntersectionObserver/index.d.ts

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

package/__inner__/cjs/hooks/useIntersectionObserver/index.js

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

package/__inner__/cjs/hooks/useIntersectionObserver/types.d.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { StoredValue } from '../useStoredValue';
+export type UseIntersectionObserverElement = RefObject<Element | null | undefined> | Element | undefined | null;
+export type UseIntersectionObserverOnEntryChange = (entry: IntersectionObserverEntry | null) => void;
+export type UseIntersectionObserverOnViewChange = (inView: boolean) => void;
+export type UseIntersectionObserverOnShow = () => void;
+export type UseIntersectionObserverOnHidden = () => void;
+export type UseIntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
+    /** Вызывается при изменении entry наблюдателя */
+    onEntryChange?: UseIntersectionObserverOnEntryChange;
+    /** Вызывается при входе/выходе элемента из viewport */
+    onViewChange?: UseIntersectionObserverOnViewChange;
+    /** Вызывается при входе элемента во viewport */
+    onShow?: UseIntersectionObserverOnShow;
+    /** Вызывается при выходе элемента из viewport */
+    onHidden?: UseIntersectionObserverOnHidden;
+    /** Если `true`, то включен */
+    enabled?: boolean;
+    /** Root наблюдателя */
+    root?: UseIntersectionObserverElement;
+};
+export type UseIntersectionObserverReturn = {
+    /** Entry наблюдателя */
+    entry: StoredValue<IntersectionObserverEntry | undefined>;
+    /** Если `true`, то элемент находится во viewport */
+    inView: StoredValue<boolean>;
+    /** Функция для переподключения к наблюдателю */
+    reconnect: () => void;
+};

package/__inner__/cjs/hooks/useIntersectionObserver/types.js

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

package/__inner__/cjs/hooks/useIntersectionObserver/useIntersectionObserver.d.ts

@@ -0,0 +1,6 @@
+import type { UseIntersectionObserverElement, UseIntersectionObserverOptions, UseIntersectionObserverReturn } from './types';
+export declare function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target: UseIntersectionObserverElement, 
+/** Параметры отслеживания */
+options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;

package/__inner__/cjs/hooks/useIntersectionObserver/useIntersectionObserver.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIntersectionObserver = useIntersectionObserver;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("../../utils");
+var useMutableRef_1 = require("../useMutableRef");
+var useStoredValue_1 = require("../useStoredValue");
+function useIntersectionObserver(
+/** Отслеживаемый компонент */
+target, 
+/** Параметры отслеживания */
+options) {
+    var _a;
+    var isEnabled = (_a = options === null || options === void 0 ? void 0 : options.enabled) !== null && _a !== void 0 ? _a : true;
+    var savedOnEntryChange = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onEntryChange);
+    var savedOnViewChange = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onViewChange);
+    var savedOnShow = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onShow);
+    var savedOnHidden = (0, useMutableRef_1.useMutableRef)(options === null || options === void 0 ? void 0 : options.onHidden);
+    var entry = (0, useStoredValue_1.useStoredValue)(undefined);
+    var inView = (0, useStoredValue_1.useStoredValue)(false);
+    var observer = (0, useStoredValue_1.useStoredValue)(null);
+    var connect = (0, react_1.useCallback)(function () {
+        if (!isEnabled) {
+            return;
+        }
+        var element = (0, utils_1.isRef)(target) ? target.current : target;
+        if (!element) {
+            return;
+        }
+        var root = (function () {
+            var root = options === null || options === void 0 ? void 0 : options.root;
+            if (!root) {
+                return document;
+            }
+            return (0, utils_1.isRef)(options.root) ? options.root.current : options.root;
+        })();
+        observer.current = new IntersectionObserver(function (_a) {
+            var _b, _c, _d, _e, _f;
+            var _g = tslib_1.__read(_a, 1), newEntry = _g[0];
+            var previousInView = !!((_b = entry.current) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+            var currentInView = !!(newEntry === null || newEntry === void 0 ? void 0 : newEntry.isIntersecting);
+            entry.current = newEntry;
+            inView.current = currentInView;
+            (_c = savedOnEntryChange.current) === null || _c === void 0 ? void 0 : _c.call(savedOnEntryChange, newEntry !== null && newEntry !== void 0 ? newEntry : null);
+            if (previousInView === currentInView) {
+                return;
+            }
+            (_d = savedOnViewChange.current) === null || _d === void 0 ? void 0 : _d.call(savedOnViewChange, currentInView);
+            if (currentInView) {
+                (_e = savedOnShow.current) === null || _e === void 0 ? void 0 : _e.call(savedOnShow);
+            }
+            else {
+                (_f = savedOnHidden.current) === null || _f === void 0 ? void 0 : _f.call(savedOnHidden);
+            }
+        }, tslib_1.__assign(tslib_1.__assign({}, options), { root: root }));
+        observer.current.observe(element);
+    }, [
+        (0, utils_1.isRef)(target) ? target.current : target,
+        options === null || options === void 0 ? void 0 : options.rootMargin,
+        options === null || options === void 0 ? void 0 : options.threshold,
+        options === null || options === void 0 ? void 0 : options.root,
+        isEnabled,
+    ]);
+    var disconnect = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }, [observer]);
+    var reconnect = (0, react_1.useCallback)(function () {
+        disconnect();
+        connect();
+    }, [disconnect, connect]);
+    (0, react_1.useEffect)(function () {
+        reconnect();
+    }, [connect]);
+    (0, react_1.useEffect)(function () { return function () {
+        disconnect();
+    }; }, []);
+    return { entry: entry, inView: inView, reconnect: reconnect };
+}

package/__inner__/cjs/locale/locale.js

@@ -90,7 +90,19 @@ exports.ruRU = {
         },
         DatePicker: {
             clearText: 'Очистить',
-            placeholder: 'ДД.ММ.ГГГГ',
+            placeholder: function (steps) {
+                var parts = [];
+                if (steps.includes('days')) {
+                    parts.push('ДД');
+                }
+                if (steps.includes('months')) {
+                    parts.push('ММ');
+                }
+                if (steps.includes('years')) {
+                    parts.push('ГГГГ');
+                }
+                return parts.join('.');
+            },
         },
     },
 };
@@ -182,7 +194,19 @@ exports.kkKZ = {
         },
         DatePicker: {
             clearText: 'Тазалау',
-            placeholder: 'КК.АА.ЖЖЖЖ',
+            placeholder: function (steps) {
+                var parts = [];
+                if (steps.includes('days')) {
+                    parts.push('КК');
+                }
+                if (steps.includes('months')) {
+                    parts.push('АА');
+                }
+                if (steps.includes('years')) {
+                    parts.push('ЖЖЖЖ');
+                }
+                return parts.join('.');
+            },
         },
     },
 };
@@ -275,7 +299,19 @@ exports.enUS = {
         },
         DatePicker: {
             clearText: 'Clear',
-            placeholder: 'DD.MM.YYYY',
+            placeholder: function (steps) {
+                var parts = [];
+                if (steps.includes('days')) {
+                    parts.push('DD');
+                }
+                if (steps.includes('months')) {
+                    parts.push('MM');
+                }
+                if (steps.includes('years')) {
+                    parts.push('YYYY');
+                }
+                return parts.join('.');
+            },
         },
     },
 };

package/__inner__/cjs/utils/array/createFilled/createFilledArray.d.ts

@@ -1 +1 @@
-export declare const createFilledArray: <Value>(length: number, value: Value) => Value[];
+export declare const createFilledArray: <Value>(length: number, value: Value | ((index: number) => Value)) => Value[];

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__/cjs/utils/react/extractRef.d.ts

@@ -0,0 +1,2 @@
+import type { RefObject } from 'react';
+export declare const extractRef: <Element extends HTMLElement>(element: RefObject<Element | null> | Element | null | undefined) => Element | null;

package/__inner__/cjs/utils/react/extractRef.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractRef = void 0;
+var isRef_1 = require("./isRef");
+var extractRef = function (element) {
+    if ((0, isRef_1.isRef)(element)) {
+        return element.current;
+    }
+    return element !== null && element !== void 0 ? element : null;
+};
+exports.extractRef = extractRef;

package/__inner__/cjs/utils/react/index.d.ts

@@ -1,4 +1,5 @@
 export * from './extractElementsFromChildren';
+export * from './extractRef';
 export * from './isNodeWithDisplayName';
 export * from './isRef';
 export * from './resolveChildren';

package/__inner__/cjs/utils/react/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./extractElementsFromChildren"), exports);
+tslib_1.__exportStar(require("./extractRef"), exports);
 tslib_1.__exportStar(require("./isNodeWithDisplayName"), exports);
 tslib_1.__exportStar(require("./isRef"), exports);
 tslib_1.__exportStar(require("./resolveChildren"), exports);

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); };