@ozen-ui/kit 0.74.0 → 0.76.0

package/__inner__/cjs/components/Calendar/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Calendar';
+export * from './constants';
 export * from './types';

package/__inner__/cjs/components/Calendar/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./Calendar"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
 tslib_1.__exportStar(require("./types"), exports);

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