@ozen-ui/kit 0.74.0 → 0.76.0

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';

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

@@ -1,6 +1,6 @@
 import type { MouseEvent, ReactElement, ReactNode } from 'react';
 import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
-import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { WithRequired, ExtendableComponentPropsWithRef } from '../../types';
 import type { WithDisplayName } from '../../types/react';
 import type { CALENDAR_DEFAULT_MODE } from './constants';
 export declare const calendarStepVariant: readonly ["days", "months", "years"];
@@ -18,6 +18,7 @@ export type CalendarPropRenderAdditionalControls<MODE extends CalendarModeVarian
     date?: MODE extends 'range' ? Date[] : Date;
 }) => ReactElement;
 export type CalendarPropCalendars = 1 | 2;
+export type CalendarSteps = CalendarStepVariant[];
 /**
  * @deprecated
  * Use the `CalendarPropOnChange` type to replace it.
@@ -44,6 +45,9 @@ export type CalendarExclude = CalendarPropExclude;
  * */
 export type CalendarStartDay = CalendarPropStartDay;
 export type CalendarRenderAdditionalControls<MODE extends CalendarModeVariant> = CalendarPropRenderAdditionalControls<MODE>;
+export type CalendarOnMonthClick = (event: MouseEvent<HTMLElement>, date: Date) => void;
+export type CalendarOnDayClick = (event: MouseEvent<HTMLElement>, date: Date) => void;
+export type CalendarOnYearClick = (event: MouseEvent<HTMLElement>, date: Date) => void;
 export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE> = ExtendableComponentPropsWithRef<{
     /** Способ выбора даты:
      * - `single` — позволяет выбрать одну дату (показывает один календарь).
@@ -75,11 +79,11 @@ export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEF
     /** Ограничение выбора дат по большей дате */
     maxDate?: Date;
     /** Обработчик нажатия на кнопку месяца */
-    onMonthClick?(e: MouseEvent<HTMLElement>, date: Date): void;
+    onMonthClick?: CalendarOnMonthClick;
     /** Обработчик нажатия на кнопку дня */
-    onDayClick?(e: MouseEvent<HTMLElement>, date: Date): void;
+    onDayClick?: CalendarOnDayClick;
     /** Обработчик нажатия на кнопку года */
-    onYearClick?(e: MouseEvent<HTMLElement>, date: Date): void;
+    onYearClick?: CalendarOnYearClick;
     /** Дополнительные контролы — рендер функция */
     renderAdditionalControls?: CalendarPropRenderAdditionalControls<MODE>;
     /** Функция форматирования атрибута `aria-label` для кнопок переключения периодов */
@@ -89,6 +93,10 @@ export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEF
     /** Количество отображаемых календарей в компоненте: один или два */
     calendars?: CalendarPropCalendars;
     children?: never;
+    /** Шаги календаря. Определяет порядок и наличие этапов выбора. */
+    steps?: CalendarSteps;
+    /** Изначальный шаг */
+    initialStep?: CalendarStepVariant;
 }, 'div'>;
 export type CalendarComponent = WithDisplayName<(<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE>(props: CalendarProps<MODE>) => ReactNode)>;
-export type CalendarModeComponent<MODE extends CalendarModeVariant> = WithDisplayName<(props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode>;
+export type CalendarModeComponent<MODE extends CalendarModeVariant> = WithDisplayName<(props: Omit<WithRequired<CalendarProps<MODE>, 'steps' | 'initialStep'>, 'mode'>) => ReactNode>;

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

@@ -1,3 +1,12 @@
-import type { CalendarProps } from './index';
+import type { CalendarProps, CalendarSteps } from './index';
 export declare const cnCalendar: import("@bem-react/classname").ClassNameFormatter;
 export declare const getPeriodSwitchAriaLabel: CalendarProps['getPeriodSwitchAriaLabel'];
+export declare const calculateStepsAvailability: (steps: CalendarSteps) => {
+    hasDaysStep: boolean;
+    hasMonthsStep: boolean;
+    hasYearsStep: boolean;
+};
+export declare const calculateStepsHelpers: (steps: CalendarSteps) => {
+    lastStep: "days" | "months" | "years";
+    firstStep: "days" | "months" | "years";
+};

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

@@ -9,3 +9,12 @@ export var getPeriodSwitchAriaLabel = function (step) {
     }
     return ['Previous period', 'Next period'];
 };
+export var calculateStepsAvailability = function (steps) { return ({
+    hasDaysStep: steps.includes('days'),
+    hasMonthsStep: steps.includes('months'),
+    hasYearsStep: steps.includes('years'),
+}); };
+export var calculateStepsHelpers = function (steps) { return ({
+    lastStep: steps[steps.length - 1],
+    firstStep: steps[0],
+}); };

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

@@ -12,7 +12,7 @@ export type DataListPayload<MULTIPLE extends boolean> = {
     name?: string;
     value: DataListSelected<MULTIPLE>;
 };
-export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent, payload: DataListPayload<MULTIPLE>) => void;
+export type DataListOnSelect<MULTIPLE extends boolean> = (event: SyntheticEvent | KeyboardEvent | MouseEvent, payload: DataListPayload<MULTIPLE>) => void;
 export type DataListBaseProps<MULTIPLE extends boolean = false> = {
     /** Имя списка */
     name?: string;

package/__inner__/esm/components/DatePicker/components/DateInput/DateInput.js

@@ -1,10 +1,11 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { isFunction } from '../../../../utils';
 import { Input } from '../../../Input';
 import { dateInputMask } from './utils';
 export var DateInput = forwardRef(function (_a, ref) {
-    var valueProp = _a.value, defaultValue = _a.defaultValue, other = __rest(_a, ["value", "defaultValue"]);
-    return (React.createElement(Input, __assign({ value: dateInputMask(valueProp), defaultValue: dateInputMask(defaultValue) }, other, { ref: useMultiRef([ref]) })));
+    var valueProp = _a.value, defaultValue = _a.defaultValue, steps = _a.steps, placeholder = _a.placeholder, other = __rest(_a, ["value", "defaultValue", "steps", "placeholder"]);
+    return (React.createElement(Input, __assign({ value: dateInputMask(valueProp, steps), defaultValue: dateInputMask(defaultValue, steps) }, other, { placeholder: isFunction(placeholder) ? placeholder(steps) : placeholder, ref: useMultiRef([ref]) })));
 });
 DateInput.displayName = 'DateInput';

package/__inner__/esm/components/DatePicker/components/DateInput/types.d.ts

@@ -1,9 +1,13 @@
 import type { ComponentRef } from 'react';
-import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
+import type { ExtendableComponentPropsWithRef } from '../../../../types';
+import type { CalendarSteps } from '../../../Calendar';
 import type { FIELD_CONTROL_DEFAULT_TAG } from '../../../FieldControl';
 import type { InputProps } from '../../../Input';
+import type { InputPropPlaceholder } from '../../types';
 export type DateInputRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
 export type DateInputProps = ExtendableComponentPropsWithRef<{
+    steps: CalendarSteps;
     value?: string;
     defaultValue?: string;
-} & Omit<InputProps, 'value' | 'defaultValue'>, typeof FIELD_CONTROL_DEFAULT_TAG>;
+    placeholder?: InputPropPlaceholder;
+} & Omit<InputProps, 'value' | 'defaultValue' | 'placeholder'>, typeof FIELD_CONTROL_DEFAULT_TAG>;

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.d.ts

@@ -1 +1,2 @@
-export declare const dateInputMask: (value: string | undefined) => string | undefined;
+import type { CalendarSteps } from '../../../../../Calendar';
+export declare const dateInputMask: (value: string | undefined, steps: CalendarSteps) => string | undefined;

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.js

@@ -1,14 +1,74 @@
-export var dateInputMask = function (value) {
+var onlyOneDot = function (value) {
+    // Разрешить только первую точку, остальные убрать
+    var firstDotIndex = value.indexOf('.');
+    if (firstDotIndex === -1) {
+        return value;
+    }
+    // Сохраняем первую часть и одну точку
+    var beforeDot = value.slice(0, firstDotIndex + 1);
+    var afterDot = value.slice(firstDotIndex + 1).replace(/\./g, '');
+    return beforeDot + afterDot;
+};
+export var dateInputMask = function (value, steps) {
     if (!value) {
         return value;
     }
+    var hasDaysStep = steps.includes('days');
+    var hasMonthsStep = steps.includes('months');
+    var hasYearsStep = steps.includes('years');
+    var maxLength = 0;
     var newValue = value.replace(/[^0-9.]/g, ''); // Запрещаем ввод, кроме цифр и точек
     newValue = newValue.replace(/\.\.+/g, '..'); // Удаляем лишние точки
-    newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в D.
-    newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.M
-    newValue = newValue.replace(/^(\d\d)\.(\d)\.$/g, '$1.0$2.'); // Добавляем 0 в DD.M.
-    newValue = newValue.replace(/^(\d\d\.\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.MM.Y
-    if (newValue.length > 10)
-        newValue = newValue.slice(0, 10); // Ограничиваем длину
+    // DD
+    if (hasDaysStep && !hasMonthsStep && !hasYearsStep) {
+        maxLength = 2;
+        newValue = newValue.replace('.', '');
+    }
+    // MM
+    if (!hasDaysStep && hasMonthsStep && !hasYearsStep) {
+        maxLength = 2;
+        newValue = newValue.replace('.', '');
+    }
+    // YYYY
+    if (!hasDaysStep && !hasMonthsStep && hasYearsStep) {
+        maxLength = 4;
+        newValue = newValue.replace('.', '');
+    }
+    // DD.MM.YYYY
+    if (hasDaysStep && hasMonthsStep && hasYearsStep) {
+        newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в D.
+        newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.M
+        newValue = newValue.replace(/^(\d\d)\.(\d)\.$/g, '$1.0$2.'); // Добавляем 0 в DD.M.
+        newValue = newValue.replace(/^(\d\d\.\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.MM.Y
+        // + 2, так как одно соединение в виде "."
+        maxLength = 8 + 2;
+    }
+    // DD.MM
+    if (hasDaysStep && hasMonthsStep && !hasYearsStep) {
+        newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в D.
+        newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.M
+        newValue = onlyOneDot(newValue); // Разрешаем только одну точку
+        // + 1, так как одно соединение в виде "."
+        maxLength = 4 + 1;
+    }
+    // DD.YYYY
+    if (hasDaysStep && !hasMonthsStep && hasYearsStep) {
+        newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в D.
+        newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в DD.Y
+        newValue = onlyOneDot(newValue);
+        // + 1, так как одно соединение в виде "."
+        maxLength = 6 + 1;
+    }
+    // MM.YYYY
+    if (!hasDaysStep && hasMonthsStep && hasYearsStep) {
+        newValue = newValue.replace(/^(\d)\.$/g, '0$1.'); // Добавляем 0 в M.
+        newValue = newValue.replace(/^(\d\d)(\d)$/g, '$1.$2'); // Добавляем точку в MM.Y
+        newValue = onlyOneDot(newValue);
+        // + 1, так как одно соединение в виде "."
+        maxLength = 6 + 1;
+    }
+    if (newValue.length > maxLength) {
+        newValue = newValue.slice(0, maxLength); // Ограничиваем длину
+    }
     return newValue;
 };