@ozen-ui/kit 0.74.0 → 0.76.0

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

@@ -2,44 +2,47 @@ import { __assign, __read, __rest } from "tslib";
 import React, { useEffect, useState, forwardRef, useRef } from 'react';
 import { useControlled } from '../../../../hooks/useControlled';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
 import { isKeys } from '../../../../utils/isKeys';
 import { Calendar } from '../../../Calendar';
 import { Popover } from '../../../Popover';
+import { DATE_PICKER_DEFAULT_INITIAL_STEP, DATE_PICKER_DEFAULT_STEPS, } from '../../constants';
 import { cnDatePicker } from '../../index';
-import { formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isInExclude, isValidDateString, isOutOfRange, useCalendarKeyboard, } from '../../utils';
+import { maskPastedDate, formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isInExclude, isValidDateString, isOutOfRange, useCalendarKeyboard, } from '../../utils';
 import { DateInput, DatePickerRenderRight } from '../index';
 export var DatePickerModeDate = forwardRef(function (props, ref) {
-    var size = props.size, valueProp = props.value, label = props.label, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, inputProps = props.inputProps, renderRight = props.renderRight, className = props.className, _a = props.calendars, calendars = _a === void 0 ? 1 : _a, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, autoFocus = props.autoFocus, disableCloseOnSelect = props.disableCloseOnSelect, popoverPropsProp = props.popoverProps, calendarPropsProp = props.calendarProps, onError = props.onError, other = __rest(props, ["size", "value", "label", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "inputProps", "renderRight", "className", "calendars", "disableClearButton", "onChange", "onKeyDown", "autoFocus", "disableCloseOnSelect", "popoverProps", "calendarProps", "onError"]);
+    var size = props.size, valueProp = props.value, label = props.label, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, inputProps = props.inputProps, renderRight = props.renderRight, className = props.className, _a = props.calendars, calendars = _a === void 0 ? 1 : _a, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, autoFocus = props.autoFocus, disableCloseOnSelect = props.disableCloseOnSelect, popoverPropsProp = props.popoverProps, calendarPropsProp = props.calendarProps, onError = props.onError, _b = props.steps, steps = _b === void 0 ? DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? DATE_PICKER_DEFAULT_INITIAL_STEP : _c, other = __rest(props, ["size", "value", "label", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "inputProps", "renderRight", "className", "calendars", "disableClearButton", "onChange", "onKeyDown", "autoFocus", "disableCloseOnSelect", "popoverProps", "calendarProps", "onError", "steps", "initialStep"]);
     var anchorRef = useRef(null);
     var calendarInnerRef = useRef(null);
     var calendarRef = useMultiRef([calendarInnerRef, calendarPropsProp === null || calendarPropsProp === void 0 ? void 0 : calendarPropsProp.ref]);
     var lastValidDate = useRef('');
-    var _b = __read(useState(null), 2), offsetDate = _b[0], setOffsetDate = _b[1];
-    var _c = __read(useControlled({
+    var _d = __read(useState(null), 2), offsetDate = _d[0], setOffsetDate = _d[1];
+    var isWasPaste = useStoredValue(false);
+    var _e = __read(useControlled({
         value: undefined,
         defaultValue: '',
         name: 'DatePicker',
         state: 'inputValue',
-    }), 2), inputValue = _c[0], setInputValue = _c[1];
-    var _d = __read(useControlled({
+    }), 2), inputValue = _e[0], setInputValue = _e[1];
+    var _f = __read(useControlled({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'DatePicker',
         state: 'open',
-    }), 2), open = _d[0], setOpen = _d[1];
-    var _e = __read(useControlled({
+    }), 2), open = _f[0], setOpen = _f[1];
+    var _g = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'DatePicker',
         state: 'value',
-    }), 2), value = _e[0], setValue = _e[1];
+    }), 2), value = _g[0], setValue = _g[1];
     var popoverProps = getCommonPopoverProps(__assign(__assign({}, props), { popoverProps: popoverPropsProp }));
     var calendarProps = getCommonCalendarProps(__assign(__assign({}, props), { calendarProps: calendarPropsProp, ref: calendarRef }));
     var onOffsetDateChange = function (date) {
         setOffsetDate(date);
     };
     var callOnChange = function (value) {
-        var formattedDate = formatStringToDate(value);
+        var formattedDate = formatStringToDate(value, steps);
         setValue(formattedDate);
         onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
         lastValidDate.current = value;
@@ -47,9 +50,9 @@ export var DatePickerModeDate = forwardRef(function (props, ref) {
     var changeInputValue = function (e, value) {
         setInputValue(value);
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
-        if (isValidDateString(value)) {
+        if (isValidDateString(value, steps)) {
             callOnChange(value);
-            onOffsetDateChange(formatStringToDate(value));
+            onOffsetDateChange(formatStringToDate(value, steps));
         }
     };
     var handleExited = function () {
@@ -71,7 +74,7 @@ export var DatePickerModeDate = forwardRef(function (props, ref) {
     }, [autoFocus]);
     /** Эффект — синхронизируем значение текстового поля со значением в списке */
     useEffect(function () {
-        var formattedDate = formatDateToString(value);
+        var formattedDate = formatDateToString(value, steps);
         if (formattedDate !== inputValue) {
             setInputValue(formattedDate);
             onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
@@ -127,7 +130,7 @@ export var DatePickerModeDate = forwardRef(function (props, ref) {
         (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
         if (!inputValue)
             return;
-        if (!isValidDateString(inputValue))
+        if (!isValidDateString(inputValue, steps))
             changeInputValue(null, lastValidDate.current);
     };
     /** Очистка поля */
@@ -135,22 +138,31 @@ export var DatePickerModeDate = forwardRef(function (props, ref) {
         changeInputValue(null, '');
     };
     /** Событие ввода значения в текстовом поле */
-    var handleChangeInput = function (e) {
+    var handleChangeInput = function (event) {
+        var _a;
+        var value = event.target.value.trim();
+        var preparedValue = isWasPaste.current
+            ? maskPastedDate(value, steps)
+            : value;
+        changeInputValue(event, preparedValue);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
+        isWasPaste.current = false;
+    };
+    var handlePasteInput = function (event) {
         var _a;
-        var value = e.target.value;
-        changeInputValue(e, value);
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        isWasPaste.current = true;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onPaste) === null || _a === void 0 ? void 0 : _a.call(inputProps, event);
     };
     /** Событие выбора значения из календаря */
     var handleChangeCalendar = function (date) {
-        var formattedDate = formatDateToString(date);
+        var formattedDate = formatDateToString(date, steps);
         changeInputValue(null, formattedDate);
         if (!disableCloseOnSelect)
             handleClose();
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(DateInput, __assign({ size: size, disabled: disabled, label: label }, other, { className: cnDatePicker({ mode: 'date' }, className), renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onChange: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, onKeyDown: handleKeyDown, ref: ref })),
+        React.createElement(DateInput, __assign({ size: size, disabled: disabled, label: label }, other, { steps: steps, className: cnDatePicker({ mode: 'date' }, className), renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onChange: handleChangeInput, onPaste: handlePasteInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, onKeyDown: handleKeyDown, ref: ref })),
         React.createElement(Popover, __assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { disableEnforceFocus: !enableEnforceFocus, onExited: handleExited }),
-            React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { mode: "single", value: value || null, offsetDate: offsetDate, onOffsetDateChange: onOffsetDateChange, onChange: handleChangeCalendar })))));
+            React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { steps: steps, initialStep: initialStep, mode: "single", value: value || null, offsetDate: offsetDate, onOffsetDateChange: onOffsetDateChange, onChange: handleChangeCalendar })))));
 });
 DatePickerModeDate.displayName = 'DatePickerModeDate';

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

@@ -5,13 +5,15 @@ import { useBoolean } from '../../../../hooks/useBoolean';
 import { useControlled } from '../../../../hooks/useControlled';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useMutableRef } from '../../../../hooks/useMutableRef';
-import { isKeys } from '../../../../utils/isKeys';
+import { useStoredValue } from '../../../../hooks/useStoredValue';
+import { isKeys } from '../../../../utils';
 import { Calendar } from '../../../Calendar';
 import { FieldHint } from '../../../FieldHint';
 import { Popover } from '../../../Popover';
 import { Stack } from '../../../Stack';
+import { DATE_PICKER_DEFAULT_INITIAL_STEP, DATE_PICKER_DEFAULT_STEPS, } from '../../constants';
 import { cnDatePicker } from '../../index';
-import { formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isValidDateString, useCalendarKeyboard, } from '../../utils';
+import { maskPastedDate, formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isValidDateString, useCalendarKeyboard, } from '../../utils';
 import { DateInput, DatePickerRenderRight } from '../index';
 import { formatDateForCalendar, getOffsetDateInRange, getValueForDoubleProp, } from './utils';
 export var DatePickerModeDateRange = forwardRef(function (props, ref) {
@@ -19,13 +21,14 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     minDate = props.minDate, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    maxDate = props.maxDate, other = __rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps", "minDate", "maxDate"]);
-    var _b = __read(getValueForDoubleProp(label), 2), labelFrom = _b[0], labelTo = _b[1];
-    var _c = __read(getValueForDoubleProp(renderLeft), 2), renderLeftFrom = _c[0], renderLeftTo = _c[1];
-    var _d = __read(getValueForDoubleProp(renderRight), 2), renderRightFrom = _d[0], renderRightTo = _d[1];
-    var _e = __read(getValueForDoubleProp(placeholder), 2), placeholderFrom = _e[0], placeholderTo = _e[1];
-    var _f = __read(getValueForDoubleProp(inputProps), 2), inputPropsFrom = _f[0], inputPropsTo = _f[1];
-    var _g = __read(getValueForDoubleProp(labelProps), 2), labelPropsFrom = _g[0], labelPropsTo = _g[1];
+    maxDate = props.maxDate, _b = props.steps, steps = _b === void 0 ? DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? DATE_PICKER_DEFAULT_INITIAL_STEP : _c, other = __rest(props, ["size", "error", "open", "label", "onKeyDown", "onInputChange", "renderLeft", "renderRight", "required", "fullWidth", "placeholder", "hint", "disableStroke", "hintProps", "onChange", "labelProps", "popoverProps", "calendarProps", "defaultOpen", "onClose", "defaultValue", "value", "inputProps", "disabled", "className", "calendars", "onError", "clearText", "disableCloseOnSelect", "disableClearButton", "onOpen", "fieldsProps", "minDate", "maxDate", "steps", "initialStep"]);
+    var _d = __read(getValueForDoubleProp(label), 2), labelFrom = _d[0], labelTo = _d[1];
+    var _e = __read(getValueForDoubleProp(renderLeft), 2), renderLeftFrom = _e[0], renderLeftTo = _e[1];
+    var _f = __read(getValueForDoubleProp(renderRight), 2), renderRightFrom = _f[0], renderRightTo = _f[1];
+    var _g = __read(getValueForDoubleProp(placeholder), 2), placeholderFrom = _g[0], placeholderTo = _g[1];
+    var _h = __read(getValueForDoubleProp(inputProps), 2), inputPropsFrom = _h[0], inputPropsTo = _h[1];
+    var _j = __read(getValueForDoubleProp(labelProps), 2), labelPropsFrom = _j[0], labelPropsTo = _j[1];
+    var isWasPaste = useStoredValue(false);
     var containerRef = useRef(null);
     var anchorRef = useRef(null);
     var calendarInnerRef = useRef(null);
@@ -33,32 +36,32 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     var calendarRef = useMultiRef([calendarInnerRef, calendarPropsProp === null || calendarPropsProp === void 0 ? void 0 : calendarPropsProp.ref]);
     var fieldsRef = useMultiRef([anchorRef, fieldsProps === null || fieldsProps === void 0 ? void 0 : fieldsProps.ref]);
     var rootRef = useMultiRef([ref, containerRef]);
-    var _h = __read(useState(null), 2), offsetDate = _h[0], setOffsetDate = _h[1];
-    var _j = __read(useState(null), 2), calendarPeriod = _j[0], setCalendarPeriod = _j[1];
+    var _k = __read(useState(null), 2), offsetDate = _k[0], setOffsetDate = _k[1];
+    var _l = __read(useState(null), 2), calendarPeriod = _l[0], setCalendarPeriod = _l[1];
     var savedCalendarPeriod = useMutableRef(calendarPeriod);
     var lastValidDate = useRef(['', '']);
-    var _k = __read(useBoolean(false), 2), focusInputFrom = _k[0], setFocusInputFrom = _k[1];
-    var _l = __read(useBoolean(false), 2), focusInputTo = _l[0], setFocusInputTo = _l[1];
-    var _m = __read(useControlled({
+    var _m = __read(useBoolean(false), 2), focusInputFrom = _m[0], setFocusInputFrom = _m[1];
+    var _o = __read(useBoolean(false), 2), focusInputTo = _o[0], setFocusInputTo = _o[1];
+    var _p = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'DatePicker',
         state: 'value',
-    }), 2), value = _m[0], setValue = _m[1];
-    var _o = __read(useControlled({
+    }), 2), value = _p[0], setValue = _p[1];
+    var _q = __read(useControlled({
         value: undefined,
         defaultValue: [],
         name: 'DatePicker',
         state: 'inputValue',
-    }), 2), inputValue = _o[0], setInputValue = _o[1];
-    var _p = __read(value || [], 2), valueFrom = _p[0], valueTo = _p[1];
-    var _q = __read(inputValue || [], 2), _r = _q[0], inputValueFrom = _r === void 0 ? '' : _r, _s = _q[1], inputValueTo = _s === void 0 ? '' : _s;
-    var _t = __read(useControlled({
+    }), 2), inputValue = _q[0], setInputValue = _q[1];
+    var _r = __read(value || [], 2), valueFrom = _r[0], valueTo = _r[1];
+    var _s = __read(inputValue || [], 2), _t = _s[0], inputValueFrom = _t === void 0 ? '' : _t, _u = _s[1], inputValueTo = _u === void 0 ? '' : _u;
+    var _v = __read(useControlled({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'DatePicker',
         state: 'open',
-    }), 2), open = _t[0], setOpen = _t[1];
+    }), 2), open = _v[0], setOpen = _v[1];
     var popoverProps = getCommonPopoverProps(__assign(__assign({}, props), { popoverProps: popoverPropsProp }));
     var calendarProps = getCommonCalendarProps(__assign(__assign({}, props), { calendarProps: calendarPropsProp, ref: calendarRef }));
     var onOffsetDateChange = function (date) {
@@ -76,8 +79,8 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     var disableEnforceFocus = !enableEnforceFocusTo;
     /** Эффект — синхронизируем значение текстового поля со значением в списке */
     useEffect(function () {
-        var formattedDateFrom = formatDateToString(valueFrom);
-        var formattedDateTo = formatDateToString(valueTo);
+        var formattedDateFrom = formatDateToString(valueFrom, steps);
+        var formattedDateTo = formatDateToString(valueTo, steps);
         if (formattedDateFrom !== inputValueFrom ||
             formattedDateTo !== inputValueTo) {
             setInputValue([formattedDateFrom, formattedDateTo]);
@@ -93,13 +96,13 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     }, [onError]);
     /** Calendar offset when interacting with inputs */
     useEffect(function () {
-        if (!isValidDateString(inputValueFrom) ||
-            !isValidDateString(inputValueTo) ||
+        if (!isValidDateString(inputValueFrom, steps) ||
+            !isValidDateString(inputValueTo, steps) ||
             !savedCalendarPeriod.current)
             return;
         if ((focusInputFrom || focusInputTo) && open && (calendarPeriod === null || calendarPeriod === void 0 ? void 0 : calendarPeriod.length)) {
-            var firstDate = formatStringToDate(inputValueFrom);
-            var secondDate = formatStringToDate(inputValueTo);
+            var firstDate = formatStringToDate(inputValueFrom, steps);
+            var secondDate = formatStringToDate(inputValueTo, steps);
             var offset = getOffsetDateInRange(__assign(__assign({}, (focusInputTo && { type: 'end' })), { calendarPeriod: savedCalendarPeriod.current, value: [firstDate || undefined, secondDate || undefined] }));
             setOffsetDate(offset);
         }
@@ -125,8 +128,8 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     };
     var callOnChange = function (value) {
         var _a = __read(value || [], 2), dateFrom = _a[0], dateTo = _a[1];
-        var formattedDateFrom = formatStringToDate(dateFrom) || undefined;
-        var formattedDateTo = formatStringToDate(dateTo) || undefined;
+        var formattedDateFrom = formatStringToDate(dateFrom, steps) || undefined;
+        var formattedDateTo = formatStringToDate(dateTo, steps) || undefined;
         if (formattedDateTo &&
             formattedDateFrom &&
             (formattedDateFrom === null || formattedDateFrom === void 0 ? void 0 : formattedDateFrom.getTime()) > (formattedDateTo === null || formattedDateTo === void 0 ? void 0 : formattedDateTo.getTime())) {
@@ -141,7 +144,8 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
         setInputValue(value);
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
         var _a = __read(value || [], 2), valueFrom = _a[0], valueTo = _a[1];
-        if (isValidDateString(valueFrom) && isValidDateString(valueTo))
+        if (isValidDateString(valueFrom, steps) &&
+            isValidDateString(valueTo, steps))
             callOnChange([valueFrom, valueTo]);
     };
     var handleExited = function () {
@@ -150,12 +154,20 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
         setCalendarPeriod(null);
         (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
     };
+    var prepareInputValue = function (value) {
+        var trimmed = value.trim();
+        if (isWasPaste.current) {
+            return maskPastedDate(trimmed, steps);
+        }
+        return trimmed;
+    };
     /** Событие ввода значения в текстовом поле */
-    var handleChangeInputFrom = function (e) {
+    var handleChangeInputFrom = function (event) {
         var _a;
-        var value = e.target.value;
-        (_a = inputPropsFrom === null || inputPropsFrom === void 0 ? void 0 : inputPropsFrom.onChange) === null || _a === void 0 ? void 0 : _a.call(inputPropsFrom, e);
-        changeInputValue(e, [value, inputValueTo]);
+        var value = prepareInputValue(event.target.value);
+        (_a = inputPropsFrom === null || inputPropsFrom === void 0 ? void 0 : inputPropsFrom.onChange) === null || _a === void 0 ? void 0 : _a.call(inputPropsFrom, event);
+        changeInputValue(event, [value, inputValueTo]);
+        isWasPaste.current = false;
     };
     /** Очистка поля */
     var handleClear = function (type) { return function () {
@@ -177,7 +189,7 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
         setFocusInputFrom.off();
         if (!inputValue)
             return;
-        if (!isValidDateString(inputValueFrom)) {
+        if (!isValidDateString(inputValueFrom, steps)) {
             changeInputValue(null, lastValidDate.current);
         }
     };
@@ -187,15 +199,26 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
         setFocusInputTo.off();
         if (!inputValue)
             return;
-        if (!isValidDateString(inputValueTo))
+        if (!isValidDateString(inputValueTo, steps))
             changeInputValue(null, lastValidDate.current);
     };
     /** Событие ввода значения в текстовом поле */
-    var handleChangeInputTo = function (e) {
+    var handleChangeInputTo = function (event) {
+        var _a;
+        var value = prepareInputValue(event.target.value);
+        (_a = inputPropsTo === null || inputPropsTo === void 0 ? void 0 : inputPropsTo.onChange) === null || _a === void 0 ? void 0 : _a.call(inputPropsTo, event);
+        changeInputValue(event, [inputValueFrom, value]);
+        isWasPaste.current = false;
+    };
+    var handlePasteInputFrom = function (event) {
+        var _a;
+        isWasPaste.current = true;
+        (_a = inputPropsFrom === null || inputPropsFrom === void 0 ? void 0 : inputPropsFrom.onPaste) === null || _a === void 0 ? void 0 : _a.call(inputPropsFrom, event);
+    };
+    var handlePasteInputTo = function (event) {
         var _a;
-        var value = e.target.value;
-        (_a = inputPropsTo === null || inputPropsTo === void 0 ? void 0 : inputPropsTo.onChange) === null || _a === void 0 ? void 0 : _a.call(inputPropsTo, e);
-        changeInputValue(e, [inputValueFrom, value]);
+        isWasPaste.current = true;
+        (_a = inputPropsTo === null || inputPropsTo === void 0 ? void 0 : inputPropsTo.onPaste) === null || _a === void 0 ? void 0 : _a.call(inputPropsTo, event);
     };
     /** Открытие списка по клику на текстовом поле */
     var handleClickOnInputFrom = function (e) {
@@ -221,8 +244,8 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
     var handleChangeCalendar = function (date) {
         var _a = __read(date || [], 2), dateFrom = _a[0], dateTo = _a[1];
         var formattedDate = [
-            formatDateToString(dateFrom),
-            formatDateToString(dateTo),
+            formatDateToString(dateFrom, steps),
+            formatDateToString(dateTo, steps),
         ];
         changeInputValue(null, formattedDate);
         if (!disableCloseOnSelect && dateFrom && dateTo)
@@ -238,10 +261,10 @@ export var DatePickerModeDateRange = forwardRef(function (props, ref) {
             disableStroke: disableStroke,
         }, [className]) }, other, { ref: rootRef }),
         React.createElement(Stack, __assign({ gap: "l", className: cnDatePicker('Fields', [fieldsProps === null || fieldsProps === void 0 ? void 0 : fieldsProps.className]) }, fieldsProps, { ref: fieldsRef }),
-            React.createElement(DateInput, { size: size, error: error, label: labelFrom, required: required, disabled: disabled, value: inputValueFrom, onKeyDown: handleKeyDown, renderLeft: renderLeftFrom, labelProps: labelPropsFrom, disableStroke: disableStroke, placeholder: placeholderFrom, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
-            React.createElement(DateInput, { size: size, error: error, label: labelTo, required: required, disabled: disabled, value: inputValueTo, onKeyDown: handleKeyDown, renderLeft: renderLeftTo, labelProps: labelPropsTo, placeholder: placeholderTo, disableStroke: disableStroke, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
+            React.createElement(DateInput, { size: size, error: error, label: labelFrom, required: required, disabled: disabled, value: inputValueFrom, onKeyDown: handleKeyDown, renderLeft: renderLeftFrom, labelProps: labelPropsFrom, disableStroke: disableStroke, steps: steps, placeholder: placeholderFrom, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom, onPaste: handlePasteInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
+            React.createElement(DateInput, { size: size, error: error, label: labelTo, required: required, disabled: disabled, value: inputValueTo, onKeyDown: handleKeyDown, renderLeft: renderLeftTo, labelProps: labelPropsTo, placeholder: placeholderTo, disableStroke: disableStroke, steps: steps, renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: __assign(__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo, onPaste: handlePasteInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
         React.createElement(FieldHint, __assign({ size: size, error: error, disabled: disabled }, hintProps), hint),
         React.createElement(Popover, __assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { onExited: handleExited, ignoreClickOutsideRefs: [containerRef], disableEnforceFocus: disableEnforceFocus }),
-            React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: formatDateForCalendar(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));
+            React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { initialStep: initialStep, steps: steps, mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: formatDateForCalendar(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));
 });
 DatePickerModeDateRange.displayName = 'DatePickerModeDateRange';

package/__inner__/esm/components/DatePicker/constants.d.ts

@@ -1,2 +1,4 @@
 export declare const DATE_PICKER_DEFAULT_SIZE = "m";
 export declare const DATE_PICKER_DEFAULT_MODE = "date";
+export declare const DATE_PICKER_DEFAULT_STEPS: ("days" | "months" | "years")[];
+export declare const DATE_PICKER_DEFAULT_INITIAL_STEP = "days";

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

@@ -1,2 +1,5 @@
+import { CALENDAR_DEFAULT_INITIAL_STEP, CALENDAR_DEFAULT_STEPS, } from '../Calendar';
 export var DATE_PICKER_DEFAULT_SIZE = 'm';
 export var DATE_PICKER_DEFAULT_MODE = 'date';
+export var DATE_PICKER_DEFAULT_STEPS = CALENDAR_DEFAULT_STEPS;
+export var DATE_PICKER_DEFAULT_INITIAL_STEP = CALENDAR_DEFAULT_INITIAL_STEP;

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

@@ -1,11 +1,11 @@
 import type { ChangeEvent, ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { WithDisplayName } from '../../types/react';
-import type { CalendarProps } from '../Calendar';
+import type { CalendarPropCalendars, CalendarProps, CalendarSteps } from '../Calendar';
 import type { FieldHintProps } from '../FieldHint';
 import type { FieldInputProps } from '../FieldInput';
 import type { FieldLabelProps } from '../FieldLabel';
-import type { InputProps, InputSizeVariant } from '../Input';
+import type { InputProps } from '../Input';
 import type { PopoverBaseProps } from '../Popover';
 import type { StackProps } from '../Stack';
 import type { DATE_PICKER_DEFAULT_MODE } from './constants';
@@ -19,7 +19,11 @@ export type DatePickerPropOnChange<MODE extends DatePickerModeVariant> = (date:
 type InputPropLabel = InputProps['label'];
 type InputPropRenderLeft = InputProps['renderLeft'];
 type InputPropRenderRight = InputProps['renderRight'];
-type InputPropPlaceholder = InputProps['placeholder'];
+type InputPropPlaceholderString = InputProps['placeholder'];
+type InputPropPlaceholderFunction = (steps: CalendarSteps) => InputPropPlaceholderString;
+export type InputPropPlaceholder = InputPropPlaceholderString | InputPropPlaceholderFunction;
+export declare const datePickerSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type DatePickerSizeVariant = (typeof datePickerSizeVariant)[number];
 export type DatePickerPropLabel<MODE> = MODE extends Range ? [InputPropLabel?, InputPropLabel?] | InputPropLabel : InputPropLabel;
 export type DatePickerPropRenderLeft<MODE> = MODE extends Range ? [InputPropRenderLeft?, InputPropRenderLeft?] | InputPropRenderLeft : InputPropRenderLeft;
 export type DatePickerPropRenderRight<MODE> = MODE extends Range ? [InputPropRenderRight?, InputPropRenderRight?] | InputPropRenderRight : InputPropRenderRight;
@@ -96,7 +100,7 @@ export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PIC
     /** Cвойства FieldHint */
     hintProps?: Omit<FieldHintProps, 'children'>;
     /** Размер компонента */
-    size?: InputSizeVariant;
+    size?: DatePickerSizeVariant;
     /** Если `true` растягивает поле на всю ширину */
     fullWidth?: boolean;
     /** Если `true` делает элемент обязательным к заполнению */
@@ -108,8 +112,8 @@ export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PIC
     /** Свойства обертки для текстовых полей. Принимает свойства компонента [Stack](https://ozen-ui.bereke.tech/?path=/docs/components-stack--docs) */
     fieldsProps?: DatePickerPropFieldsProps<MODE>;
     /** Количество отображаемых календарей в компоненте: один или два */
-    calendars?: 1 | 2;
-} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
+    calendars?: CalendarPropCalendars;
+} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'steps' | 'initialStep'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
 export type DatePickerComponent = WithDisplayName<(<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode)>;
 export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = WithDisplayName<(props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode>;
 export {};

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

@@ -1 +1,3 @@
+import { formElementSizeVariant } from '../../types';
 export var datePickerModeVariant = ['date', 'date-range'];
+export var datePickerSizeVariant = formElementSizeVariant;

package/__inner__/esm/components/DatePicker/utils/formatDateToString/formatDateToString.d.ts

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

package/__inner__/esm/components/DatePicker/utils/formatDateToString/formatDateToString.js

@@ -1,9 +1,22 @@
-export var formatDateToString = function (date) {
+export var formatDateToString = function (date, steps) {
     if (!date) {
         return '';
     }
-    var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
-    var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
-    var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
-    return "".concat(day, ".").concat(month, ".").concat(year);
+    var hasYearsStep = steps.includes('years');
+    var hasMonthsStep = steps.includes('months');
+    var hasDaysStep = steps.includes('days');
+    var parts = [];
+    if (hasDaysStep) {
+        var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+        parts.push(day);
+    }
+    if (hasMonthsStep) {
+        var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
+        parts.push(month);
+    }
+    if (hasYearsStep) {
+        var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
+        parts.push(year);
+    }
+    return parts.join('.');
 };

package/__inner__/esm/components/DatePicker/utils/formatStringToDate/formatStringToDate.d.ts

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

package/__inner__/esm/components/DatePicker/utils/formatStringToDate/formatStringToDate.js

@@ -1,8 +1,9 @@
-import { __read } from "tslib";
-export var formatStringToDate = function (value) {
-    var _a = __read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
-    if (!(date && month && year)) {
+import { parseDateString } from '../parseDateString';
+export var formatStringToDate = function (value, steps) {
+    var parsedDate = parseDateString(value, steps);
+    if (!parsedDate) {
         return null;
     }
-    return new Date(+year, +month - 1, +date);
+    var day = parsedDate.day, month = parsedDate.month, year = parsedDate.year;
+    return new Date(+year, +month - 1, +day);
 };

package/__inner__/esm/components/DatePicker/utils/getCommonCalendarProps/getCommonCalendarProps.js

@@ -1,12 +1,12 @@
 import { __assign } from "tslib";
 import { getCalendarSizeToFormElement } from '../getCalendarSizeToFormElement';
 export var getCommonCalendarProps = function (props) {
-    var minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, _a = props.size, size = _a === void 0 ? 'm' : _a, ref = props.ref, calendarProps = props.calendarProps;
+    var minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, _a = props.size, size = _a === void 0 ? 'm' : _a, ref = props.ref, calendarProps = props.calendarProps, steps = props.steps, initialStep = props.initialStep;
     /** Соотношение размера календаря к размеру элемента контроля */
     var calendarSize = getCalendarSizeToFormElement(size);
     /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
     var handleMouseDownCalendar = function (e) {
         e.preventDefault();
     };
-    return __assign(__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize }, calendarProps), { ref: ref, onMouseDown: handleMouseDownCalendar });
+    return __assign(__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize }, calendarProps), { ref: ref, onMouseDown: handleMouseDownCalendar, steps: steps, initialStep: initialStep });
 };

package/__inner__/esm/components/DatePicker/utils/index.d.ts

@@ -6,4 +6,6 @@ export * from './isInExclude';
 export * from './getCommonPopoverProps';
 export * from './getCommonCalendarProps';
 export * from './isValidDateString';
+export * from './maskPastedDate';
+export * from './parseDateString';
 export * from './useCalendarKeyboard';

package/__inner__/esm/components/DatePicker/utils/index.js

@@ -6,4 +6,6 @@ export * from './isInExclude';
 export * from './getCommonPopoverProps';
 export * from './getCommonCalendarProps';
 export * from './isValidDateString';
+export * from './maskPastedDate';
+export * from './parseDateString';
 export * from './useCalendarKeyboard';

package/__inner__/esm/components/DatePicker/utils/isValidDateString/isValidDateString.d.ts

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

package/__inner__/esm/components/DatePicker/utils/isValidDateString/isValidDateString.js

@@ -1,11 +1,12 @@
-import { __read } from "tslib";
-import { isValidDate } from '../../../../utils/date';
-import { isNotNil } from '../../../../utils/isNotNil';
-export var isValidDateString = function (value) {
+import { isNotNil } from '../../../../utils';
+import { parseDateString } from '../parseDateString';
+export var isValidDateString = function (value, steps) {
     if (!isNotNil(value)) {
         return false;
     }
-    var _a = __read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
-    return (value === '' ||
-        (value.length === 10 && isValidDate("".concat(year, "-").concat(month, "-").concat(date))));
+    if (value === '') {
+        return true;
+    }
+    var parsedDate = parseDateString(value, steps);
+    return !!parsedDate;
 };

package/__inner__/esm/components/DatePicker/utils/maskPastedDate/index.d.ts

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

package/__inner__/esm/components/DatePicker/utils/maskPastedDate/index.js

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

package/__inner__/esm/components/DatePicker/utils/maskPastedDate/maskPastedDate.d.ts

@@ -0,0 +1,6 @@
+import type { CalendarSteps } from '../../../Calendar';
+/**
+ * Функция для обработки вставленного значения.
+ * Умеет обрабатывать форматы DD.MM.YYYY/DDMMYYYY, либо сочетания вида DDMM/DD.MM.
+ */
+export declare const maskPastedDate: (value: string, steps: CalendarSteps) => string;

package/__inner__/esm/components/DatePicker/utils/maskPastedDate/maskPastedDate.js

@@ -0,0 +1,39 @@
+/**
+ * Функция для обработки вставленного значения.
+ * Умеет обрабатывать форматы DD.MM.YYYY/DDMMYYYY, либо сочетания вида DDMM/DD.MM.
+ */
+export var maskPastedDate = function (value, steps) {
+    var digits = value.replace(/\D/g, '').slice(0, 8); // максимум 8 цифр
+    var hasYearsStep = steps.includes('years');
+    var hasMonthsStep = steps.includes('months');
+    var hasDaysStep = steps.includes('days');
+    // DD
+    if (hasDaysStep && !hasMonthsStep && !hasYearsStep) {
+        return digits.slice(0, 2);
+    }
+    // MM
+    if (!hasDaysStep && hasMonthsStep && !hasYearsStep) {
+        return digits.slice(0, 2);
+    }
+    // YYYY
+    if (!hasDaysStep && !hasMonthsStep && hasYearsStep) {
+        return digits.slice(0, 4);
+    }
+    // DD.MM.YYYY
+    if (hasDaysStep && hasMonthsStep && hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 4), ".").concat(digits.slice(4, 8));
+    }
+    // DD.MM
+    if (hasDaysStep && hasMonthsStep && !hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 4));
+    }
+    // DD.YYYY
+    if (hasDaysStep && !hasMonthsStep && hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 6));
+    }
+    // MM.YYYY
+    if (!hasDaysStep && hasMonthsStep && hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 6));
+    }
+    throw new Error('Не удалось сделать маску для значения');
+};

package/__inner__/esm/components/DatePicker/utils/parseDateString/index.d.ts

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

package/__inner__/esm/components/DatePicker/utils/parseDateString/index.js

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

package/__inner__/esm/components/DatePicker/utils/parseDateString/parseDateString.d.ts

@@ -0,0 +1,6 @@
+import type { CalendarSteps } from '../../../Calendar';
+export declare const parseDateString: (value: string | null | undefined, steps: CalendarSteps) => {
+    year: string;
+    month: string;
+    day: string;
+} | null;