@ozen-ui/kit 0.74.0 → 0.76.0

package/__inner__/cjs/components/Select/types.d.ts

@@ -1,13 +1,14 @@
 import type { ReactElement, ReactNode, SyntheticEvent } from 'react';
-import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { ExtendableComponentPropsWithRef } from '../../types';
 import type { WithDisplayName } from '../../types/react';
 import type { DataListBaseProps, DataListOptionProps, DataListSelected } from '../DataList';
 import type { SelectInputProps, SelectInputRef } from './components';
-export type SelectPropSize = FormElementSizeVariant;
+import type { SelectOnClear, SelectRenderLeft, SelectRenderRight, SelectRenderRightLayout } from './entities';
+export declare const selectSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type SelectPropSize = (typeof selectSizeVariant)[number];
 export type SelectLabel<MULTIPLE extends boolean = false> = (MULTIPLE extends true ? DataListOptionProps['label'][] : DataListOptionProps['label']) | undefined;
 export type SelectPropValue<MULTIPLE extends boolean = false> = DataListSelected<MULTIPLE>;
-export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent) => void;
+export type SelectPropOnChange<MULTIPLE extends boolean = false> = (value: SelectPropValue<MULTIPLE>, e: SyntheticEvent | KeyboardEvent | MouseEvent) => void;
 export type SelectedOption<MULTIPLE extends boolean = false> = {
     label?: SelectLabel<MULTIPLE>;
     value?: SelectPropValue<MULTIPLE>;
@@ -60,6 +61,30 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
     renderValue?: SelectPropRenderValue<MULTIPLE>;
     /** Содержимое компонента */
     children?: ReactNode;
+    /** Layout правой части инпута.
+     * Определяет порядок и наличие элементов */
+    renderRightLayout?: SelectRenderRightLayout;
+    /** Функция обратного вызова, которая вызывается при очистке значения поля */
+    onClear?: SelectOnClear;
+    /** Текст для кнопки очистки поля */
+    clearText?: string;
+    /** Если `true`, то отображает кнопку закрытия */
+    showClearButton?: boolean;
+    /** Текст или иконка слева */
+    renderLeft?: SelectRenderLeft;
+    /** Текст или иконка справа */
+    renderRight?: SelectRenderRight;
+    /** Если `true` растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Если `true` предотвращает сокращение текста в значении и
+     * задает гибкую высоту контейнера компонента */
+    multiline?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Если `true` делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
     /** Свойства компонента DataList */
     dataListProps?: Partial<Omit<DataListBaseProps<MULTIPLE>, 'onClose' | 'open' | 'anchorRef' | 'multiple' | 'selected' | 'onSelect'>>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
@@ -70,6 +95,6 @@ export type SelectProps<MULTIPLE extends boolean = false> = ExtendableComponentP
     multiple?: MULTIPLE;
     /** Идентификатор компонента для тестов */
     'data-testid'?: string;
-} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disabled' | 'required' | 'disableStroke' | 'error' | 'hint' | 'fullWidth' | 'renderLeft' | 'renderRight' | 'multiline' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
+} & Pick<SelectInputProps, 'id' | 'name' | 'label' | 'placeholder' | 'disableStroke' | 'hint' | 'inputProps' | 'labelProps' | 'hintProps' | 'bodyProps' | 'inputRef' | 'labelRef' | 'bodyRef'> & SelectPropsDeprecated<MULTIPLE>, 'div'>;
 export type SelectComponent = WithDisplayName<(<MULTIPLE extends boolean = false>(props: SelectProps<MULTIPLE>) => ReactElement | null)>;
 export {};

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

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectSizeVariant = void 0;
+var types_1 = require("../../types");
+exports.selectSizeVariant = types_1.formElementSizeVariant;

package/__inner__/cjs/components/Stack/Stack.css

@@ -9,6 +9,9 @@
 .Stack-Item {
     display: inline-block;
   }
+.Stack_display_block {
+    display: flex;
+  }
 .Stack_direction_row {
     flex-direction: row;
   }

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

@@ -16,7 +16,7 @@ exports.Stack = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(f
         props: inProps,
         name: 'Stack',
     });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = tslib_1.__rest(props, ["as", "direction", "divider", "shouldWrapChildren", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, _d = props.display, display = _d === void 0 ? constants_1.STACK_DEFAULT_DISPLAY : _d, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = tslib_1.__rest(props, ["as", "direction", "divider", "shouldWrapChildren", "display", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
     var childNodes = react_1.Children.toArray(children);
     if (!childNodes.length) {
         return null;
@@ -38,6 +38,7 @@ exports.Stack = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(f
             justify: justify,
             fullWidth: fullWidth,
             wrap: wrap,
+            display: display === 'inline' ? undefined : display,
         }), (0, utils_1.generateDirectionCn)(exports.cnStack, direction), (0, utils_1.generateGapCn)(exports.cnStack, gap), className), ref: ref }), resolveChildren()));
 });
 exports.Stack.displayName = 'Stack';

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

@@ -1 +1,2 @@
 export declare const STACK_DEFAULT_TAG = "div";
+export declare const STACK_DEFAULT_DISPLAY = "inline";

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

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STACK_DEFAULT_TAG = void 0;
+exports.STACK_DEFAULT_DISPLAY = exports.STACK_DEFAULT_TAG = void 0;
 exports.STACK_DEFAULT_TAG = 'div';
+exports.STACK_DEFAULT_DISPLAY = 'inline';

package/__inner__/cjs/components/Stack/types.d.ts

@@ -3,6 +3,7 @@ import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { STACK_DEFAULT_TAG } from './constants';
 export declare const stackGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export declare const stackDisplayVariant: readonly ["inline", "block"];
 export declare const stackDirectionVariant: readonly ["row", "column", "rowReverse", "columnReverse"];
 export declare const stackAlignVariant: readonly ["center", "start", "end", "baseline"];
 export declare const stackJustifyVariant: readonly ["start", "center", "end", "spaceBetween", "spaceAround"];
@@ -10,9 +11,12 @@ export type StackGapVariant = (typeof stackGapVariant)[number];
 export type StackDirectionVariant = (typeof stackDirectionVariant)[number];
 export type StackAlignVariant = (typeof stackAlignVariant)[number];
 export type StackJustifyVariant = (typeof stackJustifyVariant)[number];
+export type StackDisplayVariant = (typeof stackDisplayVariant)[number];
 export type StackBaseProps = {
     /** Направление */
     direction?: ResponsiveValue<StackDirectionVariant>;
+    /** Display */
+    display?: StackDisplayVariant;
     /** Выравнивание */
     align?: StackAlignVariant;
     /** Пространство между элементами */

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/useIntersectionObserver.js

@@ -19,7 +19,7 @@ options) {
     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)(function () { return new IntersectionObserver(function () { }); });
+    var observer = (0, useStoredValue_1.useStoredValue)(null);
     var connect = (0, react_1.useCallback)(function () {
         if (!isEnabled) {
             return;
@@ -63,7 +63,8 @@ options) {
         isEnabled,
     ]);
     var disconnect = (0, react_1.useCallback)(function () {
-        observer.current.disconnect();
+        var _a;
+        (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
     }, [observer]);
     var reconnect = (0, react_1.useCallback)(function () {
         disconnect();

package/__inner__/cjs/locale/locale.js

@@ -90,7 +90,22 @@ 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('.');
+            },
+        },
+        Select: {
+            clearText: 'Очистить',
         },
     },
 };
@@ -182,7 +197,22 @@ 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('.');
+            },
+        },
+        Select: {
+            clearText: 'Тазалау',
         },
     },
 };
@@ -275,7 +305,22 @@ 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('.');
+            },
+        },
+        Select: {
+            clearText: 'Clear',
         },
     },
 };

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/array/generatePermutations/generatePermutations.d.ts

@@ -0,0 +1 @@
+export declare const generatePermutations: <Item>(array: Item[] | Readonly<Item[]>, withSubsetSizes?: boolean) => Item[][];

package/__inner__/cjs/utils/array/generatePermutations/generatePermutations.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatePermutations = void 0;
+var tslib_1 = require("tslib");
+var lodash_isequal_1 = tslib_1.__importDefault(require("lodash.isequal"));
+var generatePermutations = function (array, withSubsetSizes) {
+    if (withSubsetSizes === void 0) { withSubsetSizes = false; }
+    var result = [];
+    var permute = function (array, current) {
+        if (current === void 0) { current = []; }
+        if (array.length === 0) {
+            if (!result.some(function (r) { return (0, lodash_isequal_1.default)(r, current); })) {
+                result.push(tslib_1.__spreadArray([], tslib_1.__read(current), false));
+            }
+        }
+        else {
+            for (var i = 0; i < array.length; i++) {
+                var newArray = tslib_1.__spreadArray([], tslib_1.__read(array), false);
+                var next = newArray.splice(i, 1);
+                permute(newArray, current.concat(next));
+            }
+        }
+    };
+    var subsetsOfSize = function (array, k, start, subset) {
+        if (start === void 0) { start = 0; }
+        if (subset === void 0) { subset = []; }
+        if (subset.length === k) {
+            permute(subset);
+            return;
+        }
+        for (var i = start; i < array.length; i++) {
+            subset.push(array[i]);
+            subsetsOfSize(array, k, i + 1, subset);
+            subset.pop();
+        }
+    };
+    if (withSubsetSizes) {
+        for (var size = array.length; size >= 1; size--) {
+            subsetsOfSize(array, size);
+        }
+    }
+    else {
+        permute(array);
+    }
+    return result;
+};
+exports.generatePermutations = generatePermutations;

package/__inner__/cjs/utils/array/generatePermutations/index.d.ts

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

package/__inner__/cjs/utils/array/generatePermutations/index.js

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

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

@@ -1,3 +1,4 @@
 export * from './createEmpty';
 export * from './createFilled';
+export * from './generatePermutations';
 export * from './isArray';

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

@@ -3,4 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./createEmpty"), exports);
 tslib_1.__exportStar(require("./createFilled"), exports);
+tslib_1.__exportStar(require("./generatePermutations"), exports);
 tslib_1.__exportStar(require("./isArray"), exports);

package/__inner__/esm/components/Autocomplete/helper.d.ts

@@ -9,7 +9,7 @@ export declare function withDefaultGetters<OPTION>(props: AutocompleteProps<OPTI
     defaultValue?: import("./types").AutocompletePropValue<OPTION>;
     open?: boolean;
     defaultOpen?: boolean;
-    onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent, value: OPTION | null) => void) | undefined;
+    onChange?: ((e: import("react").SyntheticEvent | KeyboardEvent | MouseEvent, value: OPTION | null) => void) | undefined;
     inputValue?: string;
     onInputChange?: (e: import("react").ChangeEvent<HTMLInputElement> | null, value: string) => void;
     renderInput?: import("./types").AutocompleteRenderInput;

package/__inner__/esm/components/Autocomplete/types.d.ts

@@ -35,7 +35,7 @@ export type AutocompleteProps<OPTION = AutocompleteDefaultOption> = {
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
-    onChange?: (e: SyntheticEvent | KeyboardEvent, value: OPTION | null) => void;
+    onChange?: (e: SyntheticEvent | KeyboardEvent | MouseEvent, value: OPTION | null) => void;
     /** Введённое значение в текстовом поле */
     inputValue?: string;
     /** Функция обратного вызова, которая будет вызвана при вводе значения с клавиатуры */

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