@ozen-ui/kit 0.74.0 → 0.75.0

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPeriodSwitchAriaLabel = exports.cnCalendar = void 0;
+exports.calculateStepsHelpers = exports.calculateStepsAvailability = exports.getPeriodSwitchAriaLabel = exports.cnCalendar = void 0;
 var classname_1 = require("../../utils/classname");
 exports.cnCalendar = (0, classname_1.cn)('Calendar');
 var getPeriodSwitchAriaLabel = function (step) {
@@ -13,3 +13,14 @@ var getPeriodSwitchAriaLabel = function (step) {
     return ['Previous period', 'Next period'];
 };
 exports.getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabel;
+var calculateStepsAvailability = function (steps) { return ({
+    hasDaysStep: steps.includes('days'),
+    hasMonthsStep: steps.includes('months'),
+    hasYearsStep: steps.includes('years'),
+}); };
+exports.calculateStepsAvailability = calculateStepsAvailability;
+var calculateStepsHelpers = function (steps) { return ({
+    lastStep: steps[steps.length - 1],
+    firstStep: steps[0],
+}); };
+exports.calculateStepsHelpers = calculateStepsHelpers;

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

@@ -4,10 +4,11 @@ exports.DateInput = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var utils_1 = require("../../../../utils");
 var Input_1 = require("../../../Input");
-var utils_1 = require("./utils");
+var utils_2 = require("./utils");
 exports.DateInput = (0, react_1.forwardRef)(function (_a, ref) {
-    var valueProp = _a.value, defaultValue = _a.defaultValue, other = tslib_1.__rest(_a, ["value", "defaultValue"]);
-    return (react_1.default.createElement(Input_1.Input, tslib_1.__assign({ value: (0, utils_1.dateInputMask)(valueProp), defaultValue: (0, utils_1.dateInputMask)(defaultValue) }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref]) })));
+    var valueProp = _a.value, defaultValue = _a.defaultValue, steps = _a.steps, placeholder = _a.placeholder, other = tslib_1.__rest(_a, ["value", "defaultValue", "steps", "placeholder"]);
+    return (react_1.default.createElement(Input_1.Input, tslib_1.__assign({ value: (0, utils_2.dateInputMask)(valueProp, steps), defaultValue: (0, utils_2.dateInputMask)(defaultValue, steps) }, other, { placeholder: (0, utils_1.isFunction)(placeholder) ? placeholder(steps) : placeholder, ref: (0, useMultiRef_1.useMultiRef)([ref]) })));
 });
 exports.DateInput.displayName = 'DateInput';

package/__inner__/cjs/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__/cjs/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__/cjs/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.js

@@ -1,18 +1,78 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dateInputMask = void 0;
-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;
+};
+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;
 };
 exports.dateInputMask = dateInputMask;

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

@@ -5,44 +5,47 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var useControlled_1 = require("../../../../hooks/useControlled");
 var useMultiRef_1 = require("../../../../hooks/useMultiRef");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
 var isKeys_1 = require("../../../../utils/isKeys");
 var Calendar_1 = require("../../../Calendar");
 var Popover_1 = require("../../../Popover");
+var constants_1 = require("../../constants");
 var index_1 = require("../../index");
 var utils_1 = require("../../utils");
 var index_2 = require("../index");
 exports.DatePickerModeDate = (0, react_1.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 = tslib_1.__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 ? constants_1.DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? constants_1.DATE_PICKER_DEFAULT_INITIAL_STEP : _c, other = tslib_1.__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 = (0, react_1.useRef)(null);
     var calendarInnerRef = (0, react_1.useRef)(null);
     var calendarRef = (0, useMultiRef_1.useMultiRef)([calendarInnerRef, calendarPropsProp === null || calendarPropsProp === void 0 ? void 0 : calendarPropsProp.ref]);
     var lastValidDate = (0, react_1.useRef)('');
-    var _b = tslib_1.__read((0, react_1.useState)(null), 2), offsetDate = _b[0], setOffsetDate = _b[1];
-    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _d = tslib_1.__read((0, react_1.useState)(null), 2), offsetDate = _d[0], setOffsetDate = _d[1];
+    var isWasPaste = (0, useStoredValue_1.useStoredValue)(false);
+    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
         value: undefined,
         defaultValue: '',
         name: 'DatePicker',
         state: 'inputValue',
-    }), 2), inputValue = _c[0], setInputValue = _c[1];
-    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), inputValue = _e[0], setInputValue = _e[1];
+    var _f = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'DatePicker',
         state: 'open',
-    }), 2), open = _d[0], setOpen = _d[1];
-    var _e = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), open = _f[0], setOpen = _f[1];
+    var _g = tslib_1.__read((0, useControlled_1.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 = (0, utils_1.getCommonPopoverProps)(tslib_1.__assign(tslib_1.__assign({}, props), { popoverProps: popoverPropsProp }));
     var calendarProps = (0, utils_1.getCommonCalendarProps)(tslib_1.__assign(tslib_1.__assign({}, props), { calendarProps: calendarPropsProp, ref: calendarRef }));
     var onOffsetDateChange = function (date) {
         setOffsetDate(date);
     };
     var callOnChange = function (value) {
-        var formattedDate = (0, utils_1.formatStringToDate)(value);
+        var formattedDate = (0, utils_1.formatStringToDate)(value, steps);
         setValue(formattedDate);
         onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
         lastValidDate.current = value;
@@ -50,9 +53,9 @@ exports.DatePickerModeDate = (0, react_1.forwardRef)(function (props, ref) {
     var changeInputValue = function (e, value) {
         setInputValue(value);
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
-        if ((0, utils_1.isValidDateString)(value)) {
+        if ((0, utils_1.isValidDateString)(value, steps)) {
             callOnChange(value);
-            onOffsetDateChange((0, utils_1.formatStringToDate)(value));
+            onOffsetDateChange((0, utils_1.formatStringToDate)(value, steps));
         }
     };
     var handleExited = function () {
@@ -74,7 +77,7 @@ exports.DatePickerModeDate = (0, react_1.forwardRef)(function (props, ref) {
     }, [autoFocus]);
     /** Эффект — синхронизируем значение текстового поля со значением в списке */
     (0, react_1.useEffect)(function () {
-        var formattedDate = (0, utils_1.formatDateToString)(value);
+        var formattedDate = (0, utils_1.formatDateToString)(value, steps);
         if (formattedDate !== inputValue) {
             setInputValue(formattedDate);
             onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
@@ -130,7 +133,7 @@ exports.DatePickerModeDate = (0, react_1.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 (!(0, utils_1.isValidDateString)(inputValue))
+        if (!(0, utils_1.isValidDateString)(inputValue, steps))
             changeInputValue(null, lastValidDate.current);
     };
     /** Очистка поля */
@@ -138,22 +141,31 @@ exports.DatePickerModeDate = (0, react_1.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
+            ? (0, utils_1.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 = (0, utils_1.formatDateToString)(date);
+        var formattedDate = (0, utils_1.formatDateToString)(date, steps);
         changeInputValue(null, formattedDate);
         if (!disableCloseOnSelect)
             handleClose();
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_2.DateInput, tslib_1.__assign({ size: size, disabled: disabled, label: label }, other, { className: (0, index_1.cnDatePicker)({ mode: 'date' }, className), renderRight: react_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onChange: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, onKeyDown: handleKeyDown, ref: ref })),
+        react_1.default.createElement(index_2.DateInput, tslib_1.__assign({ size: size, disabled: disabled, label: label }, other, { steps: steps, className: (0, index_1.cnDatePicker)({ mode: 'date' }, className), renderRight: react_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onChange: handleChangeInput, onPaste: handlePasteInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, onKeyDown: handleKeyDown, ref: ref })),
         react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { disableEnforceFocus: !enableEnforceFocus, onExited: handleExited }),
-            react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ calendars: calendars }, calendarProps, { mode: "single", value: value || null, offsetDate: offsetDate, onOffsetDateChange: onOffsetDateChange, onChange: handleChangeCalendar })))));
+            react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ calendars: calendars }, calendarProps, { steps: steps, initialStep: initialStep, mode: "single", value: value || null, offsetDate: offsetDate, onOffsetDateChange: onOffsetDateChange, onChange: handleChangeCalendar })))));
 });
 exports.DatePickerModeDate.displayName = 'DatePickerModeDate';

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

@@ -8,27 +8,30 @@ var useBoolean_1 = require("../../../../hooks/useBoolean");
 var useControlled_1 = require("../../../../hooks/useControlled");
 var useMultiRef_1 = require("../../../../hooks/useMultiRef");
 var useMutableRef_1 = require("../../../../hooks/useMutableRef");
-var isKeys_1 = require("../../../../utils/isKeys");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
+var utils_1 = require("../../../../utils");
 var Calendar_1 = require("../../../Calendar");
 var FieldHint_1 = require("../../../FieldHint");
 var Popover_1 = require("../../../Popover");
 var Stack_1 = require("../../../Stack");
+var constants_1 = require("../../constants");
 var index_1 = require("../../index");
-var utils_1 = require("../../utils");
+var utils_2 = require("../../utils");
 var index_2 = require("../index");
-var utils_2 = require("./utils");
+var utils_3 = require("./utils");
 exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref) {
     var size = props.size, error = props.error, openProp = props.open, label = props.label, onKeyDown = props.onKeyDown, onInputChange = props.onInputChange, renderLeft = props.renderLeft, renderRight = props.renderRight, required = props.required, fullWidth = props.fullWidth, placeholder = props.placeholder, hint = props.hint, disableStroke = props.disableStroke, hintProps = props.hintProps, onChange = props.onChange, labelProps = props.labelProps, popoverPropsProp = props.popoverProps, calendarPropsProp = props.calendarProps, defaultOpen = props.defaultOpen, onCloseProp = props.onClose, defaultValue = props.defaultValue, valueProp = props.value, inputProps = props.inputProps, disabled = props.disabled, className = props.className, _a = props.calendars, calendars = _a === void 0 ? 2 : _a, onError = props.onError, clearText = props.clearText, disableCloseOnSelect = props.disableCloseOnSelect, disableClearButton = props.disableClearButton, onOpenProp = props.onOpen, fieldsProps = props.fieldsProps, 
     // 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 = tslib_1.__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 = tslib_1.__read((0, utils_2.getValueForDoubleProp)(label), 2), labelFrom = _b[0], labelTo = _b[1];
-    var _c = tslib_1.__read((0, utils_2.getValueForDoubleProp)(renderLeft), 2), renderLeftFrom = _c[0], renderLeftTo = _c[1];
-    var _d = tslib_1.__read((0, utils_2.getValueForDoubleProp)(renderRight), 2), renderRightFrom = _d[0], renderRightTo = _d[1];
-    var _e = tslib_1.__read((0, utils_2.getValueForDoubleProp)(placeholder), 2), placeholderFrom = _e[0], placeholderTo = _e[1];
-    var _f = tslib_1.__read((0, utils_2.getValueForDoubleProp)(inputProps), 2), inputPropsFrom = _f[0], inputPropsTo = _f[1];
-    var _g = tslib_1.__read((0, utils_2.getValueForDoubleProp)(labelProps), 2), labelPropsFrom = _g[0], labelPropsTo = _g[1];
+    maxDate = props.maxDate, _b = props.steps, steps = _b === void 0 ? constants_1.DATE_PICKER_DEFAULT_STEPS : _b, _c = props.initialStep, initialStep = _c === void 0 ? constants_1.DATE_PICKER_DEFAULT_INITIAL_STEP : _c, other = tslib_1.__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 = tslib_1.__read((0, utils_3.getValueForDoubleProp)(label), 2), labelFrom = _d[0], labelTo = _d[1];
+    var _e = tslib_1.__read((0, utils_3.getValueForDoubleProp)(renderLeft), 2), renderLeftFrom = _e[0], renderLeftTo = _e[1];
+    var _f = tslib_1.__read((0, utils_3.getValueForDoubleProp)(renderRight), 2), renderRightFrom = _f[0], renderRightTo = _f[1];
+    var _g = tslib_1.__read((0, utils_3.getValueForDoubleProp)(placeholder), 2), placeholderFrom = _g[0], placeholderTo = _g[1];
+    var _h = tslib_1.__read((0, utils_3.getValueForDoubleProp)(inputProps), 2), inputPropsFrom = _h[0], inputPropsTo = _h[1];
+    var _j = tslib_1.__read((0, utils_3.getValueForDoubleProp)(labelProps), 2), labelPropsFrom = _j[0], labelPropsTo = _j[1];
+    var isWasPaste = (0, useStoredValue_1.useStoredValue)(false);
     var containerRef = (0, react_1.useRef)(null);
     var anchorRef = (0, react_1.useRef)(null);
     var calendarInnerRef = (0, react_1.useRef)(null);
@@ -36,34 +39,34 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     var calendarRef = (0, useMultiRef_1.useMultiRef)([calendarInnerRef, calendarPropsProp === null || calendarPropsProp === void 0 ? void 0 : calendarPropsProp.ref]);
     var fieldsRef = (0, useMultiRef_1.useMultiRef)([anchorRef, fieldsProps === null || fieldsProps === void 0 ? void 0 : fieldsProps.ref]);
     var rootRef = (0, useMultiRef_1.useMultiRef)([ref, containerRef]);
-    var _h = tslib_1.__read((0, react_1.useState)(null), 2), offsetDate = _h[0], setOffsetDate = _h[1];
-    var _j = tslib_1.__read((0, react_1.useState)(null), 2), calendarPeriod = _j[0], setCalendarPeriod = _j[1];
+    var _k = tslib_1.__read((0, react_1.useState)(null), 2), offsetDate = _k[0], setOffsetDate = _k[1];
+    var _l = tslib_1.__read((0, react_1.useState)(null), 2), calendarPeriod = _l[0], setCalendarPeriod = _l[1];
     var savedCalendarPeriod = (0, useMutableRef_1.useMutableRef)(calendarPeriod);
     var lastValidDate = (0, react_1.useRef)(['', '']);
-    var _k = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focusInputFrom = _k[0], setFocusInputFrom = _k[1];
-    var _l = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focusInputTo = _l[0], setFocusInputTo = _l[1];
-    var _m = tslib_1.__read((0, useControlled_1.useControlled)({
+    var _m = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focusInputFrom = _m[0], setFocusInputFrom = _m[1];
+    var _o = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), focusInputTo = _o[0], setFocusInputTo = _o[1];
+    var _p = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'DatePicker',
         state: 'value',
-    }), 2), value = _m[0], setValue = _m[1];
-    var _o = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), value = _p[0], setValue = _p[1];
+    var _q = tslib_1.__read((0, useControlled_1.useControlled)({
         value: undefined,
         defaultValue: [],
         name: 'DatePicker',
         state: 'inputValue',
-    }), 2), inputValue = _o[0], setInputValue = _o[1];
-    var _p = tslib_1.__read(value || [], 2), valueFrom = _p[0], valueTo = _p[1];
-    var _q = tslib_1.__read(inputValue || [], 2), _r = _q[0], inputValueFrom = _r === void 0 ? '' : _r, _s = _q[1], inputValueTo = _s === void 0 ? '' : _s;
-    var _t = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), inputValue = _q[0], setInputValue = _q[1];
+    var _r = tslib_1.__read(value || [], 2), valueFrom = _r[0], valueTo = _r[1];
+    var _s = tslib_1.__read(inputValue || [], 2), _t = _s[0], inputValueFrom = _t === void 0 ? '' : _t, _u = _s[1], inputValueTo = _u === void 0 ? '' : _u;
+    var _v = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
         name: 'DatePicker',
         state: 'open',
-    }), 2), open = _t[0], setOpen = _t[1];
-    var popoverProps = (0, utils_1.getCommonPopoverProps)(tslib_1.__assign(tslib_1.__assign({}, props), { popoverProps: popoverPropsProp }));
-    var calendarProps = (0, utils_1.getCommonCalendarProps)(tslib_1.__assign(tslib_1.__assign({}, props), { calendarProps: calendarPropsProp, ref: calendarRef }));
+    }), 2), open = _v[0], setOpen = _v[1];
+    var popoverProps = (0, utils_2.getCommonPopoverProps)(tslib_1.__assign(tslib_1.__assign({}, props), { popoverProps: popoverPropsProp }));
+    var calendarProps = (0, utils_2.getCommonCalendarProps)(tslib_1.__assign(tslib_1.__assign({}, props), { calendarProps: calendarPropsProp, ref: calendarRef }));
     var onOffsetDateChange = function (date) {
         setOffsetDate(date);
     };
@@ -71,7 +74,7 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
         setCalendarPeriod(date);
     }, []);
     /** Enables calendar keyboard interaction */
-    var enableEnforceFocusTo = (0, utils_1.useCalendarKeyboard)({
+    var enableEnforceFocusTo = (0, utils_2.useCalendarKeyboard)({
         controlRef: dateInputToRef,
         calendarRef: calendarInnerRef,
         active: open,
@@ -79,8 +82,8 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     var disableEnforceFocus = !enableEnforceFocusTo;
     /** Эффект — синхронизируем значение текстового поля со значением в списке */
     (0, react_1.useEffect)(function () {
-        var formattedDateFrom = (0, utils_1.formatDateToString)(valueFrom);
-        var formattedDateTo = (0, utils_1.formatDateToString)(valueTo);
+        var formattedDateFrom = (0, utils_2.formatDateToString)(valueFrom, steps);
+        var formattedDateTo = (0, utils_2.formatDateToString)(valueTo, steps);
         if (formattedDateFrom !== inputValueFrom ||
             formattedDateTo !== inputValueTo) {
             setInputValue([formattedDateFrom, formattedDateTo]);
@@ -96,14 +99,14 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     }, [onError]);
     /** Calendar offset when interacting with inputs */
     (0, react_1.useEffect)(function () {
-        if (!(0, utils_1.isValidDateString)(inputValueFrom) ||
-            !(0, utils_1.isValidDateString)(inputValueTo) ||
+        if (!(0, utils_2.isValidDateString)(inputValueFrom, steps) ||
+            !(0, utils_2.isValidDateString)(inputValueTo, steps) ||
             !savedCalendarPeriod.current)
             return;
         if ((focusInputFrom || focusInputTo) && open && (calendarPeriod === null || calendarPeriod === void 0 ? void 0 : calendarPeriod.length)) {
-            var firstDate = (0, utils_1.formatStringToDate)(inputValueFrom);
-            var secondDate = (0, utils_1.formatStringToDate)(inputValueTo);
-            var offset = (0, utils_2.getOffsetDateInRange)(tslib_1.__assign(tslib_1.__assign({}, (focusInputTo && { type: 'end' })), { calendarPeriod: savedCalendarPeriod.current, value: [firstDate || undefined, secondDate || undefined] }));
+            var firstDate = (0, utils_2.formatStringToDate)(inputValueFrom, steps);
+            var secondDate = (0, utils_2.formatStringToDate)(inputValueTo, steps);
+            var offset = (0, utils_3.getOffsetDateInRange)(tslib_1.__assign(tslib_1.__assign({}, (focusInputTo && { type: 'end' })), { calendarPeriod: savedCalendarPeriod.current, value: [firstDate || undefined, secondDate || undefined] }));
             setOffsetDate(offset);
         }
     }, [
@@ -128,8 +131,8 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     };
     var callOnChange = function (value) {
         var _a = tslib_1.__read(value || [], 2), dateFrom = _a[0], dateTo = _a[1];
-        var formattedDateFrom = (0, utils_1.formatStringToDate)(dateFrom) || undefined;
-        var formattedDateTo = (0, utils_1.formatStringToDate)(dateTo) || undefined;
+        var formattedDateFrom = (0, utils_2.formatStringToDate)(dateFrom, steps) || undefined;
+        var formattedDateTo = (0, utils_2.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())) {
@@ -144,7 +147,8 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
         setInputValue(value);
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
         var _a = tslib_1.__read(value || [], 2), valueFrom = _a[0], valueTo = _a[1];
-        if ((0, utils_1.isValidDateString)(valueFrom) && (0, utils_1.isValidDateString)(valueTo))
+        if ((0, utils_2.isValidDateString)(valueFrom, steps) &&
+            (0, utils_2.isValidDateString)(valueTo, steps))
             callOnChange([valueFrom, valueTo]);
     };
     var handleExited = function () {
@@ -153,12 +157,20 @@ exports.DatePickerModeDateRange = (0, react_1.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 (0, utils_2.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 () {
@@ -180,7 +192,7 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
         setFocusInputFrom.off();
         if (!inputValue)
             return;
-        if (!(0, utils_1.isValidDateString)(inputValueFrom)) {
+        if (!(0, utils_2.isValidDateString)(inputValueFrom, steps)) {
             changeInputValue(null, lastValidDate.current);
         }
     };
@@ -190,15 +202,26 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
         setFocusInputTo.off();
         if (!inputValue)
             return;
-        if (!(0, utils_1.isValidDateString)(inputValueTo))
+        if (!(0, utils_2.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) {
@@ -214,7 +237,7 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     };
     /** Управление элементом контроля через клавиатуру */
     var handleKeyDown = function (event) {
-        if ((0, isKeys_1.isKeys)(event, ['ArrowDown', 'ArrowUp'])) {
+        if ((0, utils_1.isKeys)(event, ['ArrowDown', 'ArrowUp'])) {
             event.preventDefault();
             handleOpen();
         }
@@ -224,8 +247,8 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
     var handleChangeCalendar = function (date) {
         var _a = tslib_1.__read(date || [], 2), dateFrom = _a[0], dateTo = _a[1];
         var formattedDate = [
-            (0, utils_1.formatDateToString)(dateFrom),
-            (0, utils_1.formatDateToString)(dateTo),
+            (0, utils_2.formatDateToString)(dateFrom, steps),
+            (0, utils_2.formatDateToString)(dateTo, steps),
         ];
         changeInputValue(null, formattedDate);
         if (!disableCloseOnSelect && dateFrom && dateTo)
@@ -241,10 +264,10 @@ exports.DatePickerModeDateRange = (0, react_1.forwardRef)(function (props, ref)
             disableStroke: disableStroke,
         }, [className]) }, other, { ref: rootRef }),
         react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({ gap: "l", className: (0, index_1.cnDatePicker)('Fields', [fieldsProps === null || fieldsProps === void 0 ? void 0 : fieldsProps.className]) }, fieldsProps, { ref: fieldsRef }),
-            react_1.default.createElement(index_2.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_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
-            react_1.default.createElement(index_2.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_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsTo), { onBlur: handleBlurInputTo, onFocus: handleFocusInputTo, onClick: handleClickOnInputTo, onChange: handleChangeInputTo }), "data-testid": "date-input-to", bodyProps: { ref: dateInputToRef, 'aria-expanded': open } })),
+            react_1.default.createElement(index_2.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_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueFrom, clearText: clearText, renderRight: renderRightFrom, onClear: handleClear('from'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__assign({ autoComplete: 'off' }, inputPropsFrom), { onBlur: handleBlurInputFrom, onFocus: handleFocusInputFrom, onClick: handleClickOnInputFrom, onChange: handleChangeInputFrom, onPaste: handlePasteInputFrom }), "data-testid": "date-input-from", bodyProps: { 'aria-expanded': open } }),
+            react_1.default.createElement(index_2.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_1.default.createElement(index_2.DatePickerRenderRight, { size: size, open: open, hasValue: !!valueTo, clearText: clearText, renderRight: renderRightTo, onClear: handleClear('to'), disableClearButton: disableClearButton }), inputProps: tslib_1.__assign(tslib_1.__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_1.default.createElement(FieldHint_1.FieldHint, tslib_1.__assign({ size: size, error: error, disabled: disabled }, hintProps), hint),
         react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { onExited: handleExited, ignoreClickOutsideRefs: [containerRef], disableEnforceFocus: disableEnforceFocus }),
-            react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ calendars: calendars }, calendarProps, { mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: (0, utils_2.formatDateForCalendar)(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));
+            react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ calendars: calendars }, calendarProps, { initialStep: initialStep, steps: steps, mode: "range", offsetDate: offsetDate, onChange: handleChangeCalendar, value: (0, utils_3.formatDateForCalendar)(value), onCalendarsChange: onCalendarsChange, onOffsetDateChange: onOffsetDateChange })))));
 });
 exports.DatePickerModeDateRange.displayName = 'DatePickerModeDateRange';

package/__inner__/cjs/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";