@ozen-ui/kit 0.60.0 → 0.62.0

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

@@ -0,0 +1,244 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
+import { once } from '@ozen-ui/logger';
+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 { Calendar } from '../../../Calendar';
+import { FieldHint } from '../../../FieldHint';
+import { Popover } from '../../../Popover';
+import { Stack } from '../../../Stack';
+import { cnDatePicker } from '../../index';
+import { formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isValidDateString, useCalendarKeyboard, } from '../../utils';
+import { DateInput, DatePickerRenderRight } from '../index';
+import { formatDateForCalendar, getOffsetDateInRange, getValueForDoubleProp, } from './utils';
+export var DatePickerModeDateRange = 
+// eslint-disable-next-line react/display-name
+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, 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"]);
+    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];
+    var containerRef = useRef(null);
+    var anchorRef = useRef(null);
+    var calendarInnerRef = useRef(null);
+    var dateInputToRef = useRef(null);
+    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 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({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'DatePicker',
+        state: 'value',
+    }), 2), value = _m[0], setValue = _m[1];
+    var _o = __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({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'DatePicker',
+        state: 'open',
+    }), 2), open = _t[0], setOpen = _t[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 onCalendarsChange = useCallback(function (date) {
+        setCalendarPeriod(date);
+    }, []);
+    /** Enables calendar keyboard interaction */
+    var enableEnforceFocusTo = useCalendarKeyboard({
+        controlRef: dateInputToRef,
+        calendarRef: calendarInnerRef,
+        active: open,
+    });
+    var disableEnforceFocus = !enableEnforceFocusTo;
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    useEffect(function () {
+        var formattedDateFrom = formatDateToString(valueFrom);
+        var formattedDateTo = formatDateToString(valueTo);
+        if (formattedDateFrom !== inputValueFrom ||
+            formattedDateTo !== inputValueTo) {
+            setInputValue([formattedDateFrom, formattedDateTo]);
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, [formattedDateFrom, formattedDateTo]);
+            lastValidDate.current = [formattedDateFrom, formattedDateTo];
+        }
+    }, [valueFrom, valueTo]);
+    /** Error handling */
+    useEffect(function () {
+        if (onError) {
+            once.error('Обработка ошибок в режиме date-range на данный момент не поддерживается.');
+        }
+    }, [onError]);
+    /** Calendar offset when interacting with inputs */
+    useEffect(function () {
+        if (!isValidDateString(inputValueFrom) ||
+            !isValidDateString(inputValueTo) ||
+            !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 offset = getOffsetDateInRange(__assign(__assign({}, (focusInputTo && { type: 'end' })), { calendarPeriod: savedCalendarPeriod.current, value: [firstDate || undefined, secondDate || undefined] }));
+            setOffsetDate(offset);
+        }
+    }, [
+        open,
+        focusInputTo,
+        inputValueTo,
+        inputValueFrom,
+        focusInputFrom,
+        calendarPeriod === null || calendarPeriod === void 0 ? void 0 : calendarPeriod.length,
+    ]);
+    /** Закрытие */
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    /** Открытие */
+    var handleOpen = function () {
+        if (disabled || open)
+            return;
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    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;
+        if (formattedDateTo &&
+            formattedDateFrom &&
+            (formattedDateFrom === null || formattedDateFrom === void 0 ? void 0 : formattedDateFrom.getTime()) > (formattedDateTo === null || formattedDateTo === void 0 ? void 0 : formattedDateTo.getTime())) {
+            formattedDateTo = undefined;
+        }
+        var res = [formattedDateFrom, formattedDateTo];
+        setValue(res);
+        onChange === null || onChange === void 0 ? void 0 : onChange(res);
+        lastValidDate.current = value;
+    };
+    var changeInputValue = function (e, value) {
+        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))
+            callOnChange([valueFrom, valueTo]);
+    };
+    var handleExited = function () {
+        var _a;
+        onOffsetDateChange(null);
+        setCalendarPeriod(null);
+        (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInputFrom = function (e) {
+        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 handleClear = function (type) { return function () {
+        changeInputValue(null, type === 'from' ? ['', inputValueTo] : [inputValueFrom, '']);
+    }; };
+    var handleFocusInputFrom = function (e) {
+        var _a;
+        (_a = inputPropsFrom === null || inputPropsFrom === void 0 ? void 0 : inputPropsFrom.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputPropsFrom, e);
+        setFocusInputFrom.on();
+    };
+    var handleFocusInputTo = function (e) {
+        var _a;
+        (_a = inputPropsTo === null || inputPropsTo === void 0 ? void 0 : inputPropsTo.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputPropsTo, e);
+        setFocusInputTo.on();
+    };
+    var handleBlurInputFrom = function (e) {
+        var _a;
+        (_a = inputPropsFrom === null || inputPropsFrom === void 0 ? void 0 : inputPropsFrom.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputPropsFrom, e);
+        setFocusInputFrom.off();
+        if (!inputValue)
+            return;
+        if (!isValidDateString(inputValueFrom)) {
+            changeInputValue(null, lastValidDate.current);
+        }
+    };
+    var handleBlurInputTo = function (e) {
+        var _a;
+        (_a = inputPropsTo === null || inputPropsTo === void 0 ? void 0 : inputPropsTo.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputPropsTo, e);
+        setFocusInputTo.off();
+        if (!inputValue)
+            return;
+        if (!isValidDateString(inputValueTo))
+            changeInputValue(null, lastValidDate.current);
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInputTo = function (e) {
+        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]);
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInputFrom = function (e) {
+        var _a;
+        handleOpen();
+        (_a = inputPropsFrom === null || inputPropsFrom === void 0 ? void 0 : inputPropsFrom.onClick) === null || _a === void 0 ? void 0 : _a.call(inputPropsFrom, e);
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInputTo = function (e) {
+        var _a;
+        handleOpen();
+        (_a = inputPropsTo === null || inputPropsTo === void 0 ? void 0 : inputPropsTo.onClick) === null || _a === void 0 ? void 0 : _a.call(inputPropsTo, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (event) {
+        if (isKeys(event, ['ArrowDown', 'ArrowUp'])) {
+            event.preventDefault();
+            handleOpen();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    /** Событие выбора значения из календаря */
+    var handleChangeCalendar = function (date) {
+        var _a = __read(date || [], 2), dateFrom = _a[0], dateTo = _a[1];
+        var formattedDate = [
+            formatDateToString(dateFrom),
+            formatDateToString(dateTo),
+        ];
+        changeInputValue(null, formattedDate);
+        if (!disableCloseOnSelect && dateFrom && dateTo)
+            handleClose();
+    };
+    return (React.createElement("div", __assign({ className: cnDatePicker({
+            mode: 'date-range',
+            size: size,
+            error: error,
+            required: required,
+            disabled: disabled,
+            fullWidth: fullWidth,
+            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(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 })))));
+});

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

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

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

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

package/__inner__/esm/components/DatePicker/components/DatePickerModeDateRange/utils/formatDateForCalendar/formatDateForCalendar.d.ts

@@ -0,0 +1,3 @@
+import type { CalendarPropValue } from '../../../../../Calendar';
+import type { DatePickerPropValue } from '../../../../types';
+export declare const formatDateForCalendar: (date?: DatePickerPropValue<"date-range">) => CalendarPropValue<"range">;

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

@@ -0,0 +1,6 @@
+export var formatDateForCalendar = function (date) {
+    if (!date)
+        return null;
+    var d = date.filter(function (date) { return date !== undefined; });
+    return d[0] && d[1] && d[0].getTime() > d[1].getTime() ? [d[0]] : d;
+};

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

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

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

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

package/__inner__/esm/components/DatePicker/components/DatePickerModeDateRange/utils/getOffsetDateInRange/getOffsetDateInRange.d.ts

@@ -0,0 +1,6 @@
+export type GetOffsetDateInRange = {
+    calendarPeriod: Date[];
+    value: [Date?, Date?];
+    type?: 'start' | 'end';
+};
+export declare const getOffsetDateInRange: ({ type, value, calendarPeriod, }: GetOffsetDateInRange) => Date | null;

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

@@ -0,0 +1,28 @@
+import { __read } from "tslib";
+import { monthDiff } from '../../../../../../utils/date';
+import { isOutOfRange as isOutOfRangeFn } from '../../../../utils';
+export var getOffsetDateInRange = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'start' : _b, value = _a.value, calendarPeriod = _a.calendarPeriod;
+    var _c = __read(value || [], 2), valueFrom = _c[0], valueTo = _c[1];
+    var _d = __read(calendarPeriod || [], 2), calendarPeriodFrom = _d[0], calendarPeriodTo = _d[1];
+    if (!valueFrom || !valueTo)
+        return valueFrom || valueTo || null;
+    var isOutOfRange = isOutOfRangeFn({
+        minDate: calendarPeriodFrom,
+        maxDate: calendarPeriodTo,
+        value: type === 'start' ? valueFrom : valueTo,
+    });
+    if (calendarPeriodFrom && calendarPeriodTo && !isOutOfRange)
+        return calendarPeriodFrom;
+    if (type === 'start')
+        return valueFrom;
+    if (monthDiff(valueFrom, valueTo) === 0)
+        return valueTo;
+    if (monthDiff(valueFrom, valueTo) > 0) {
+        var d = new Date(valueTo);
+        d.setDate(1);
+        d.setMonth(d.getMonth() - monthDiff(calendarPeriodFrom, calendarPeriodTo));
+        return d;
+    }
+    return null;
+};

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

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

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

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

package/__inner__/esm/components/DatePicker/components/DatePickerModeDateRange/utils/getValueForDoubleProp/getValueForDoubleProp.d.ts

@@ -0,0 +1 @@
+export declare const getValueForDoubleProp: <T>(value: [T?, T?] | T) => [(T | undefined)?, (T | undefined)?] | T[];

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

@@ -0,0 +1,3 @@
+export var getValueForDoubleProp = function (value) {
+    return Array.isArray(value) ? value : [value, value];
+};

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './getOffsetDateInRange';
+export * from './getValueForDoubleProp';
+export * from './formatDateForCalendar';

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

@@ -0,0 +1,3 @@
+export * from './getOffsetDateInRange';
+export * from './getValueForDoubleProp';
+export * from './formatDateForCalendar';

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

@@ -1,2 +1,4 @@
 export * from './DateInput';
 export * from './DatePickerRenderRight';
+export * from './DatePickerModeDate';
+export * from './DatePickerModeDateRange';

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

@@ -1,2 +1,4 @@
 export * from './DateInput';
 export * from './DatePickerRenderRight';
+export * from './DatePickerModeDate';
+export * from './DatePickerModeDateRange';

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

@@ -1 +1,2 @@
 export declare const DATE_PICKER_DEFAULT_SIZE = "m";
+export declare const DATE_PICKER_DEFAULT_MODE = "date";

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

@@ -1 +1,2 @@
 export var DATE_PICKER_DEFAULT_SIZE = 'm';
+export var DATE_PICKER_DEFAULT_MODE = 'date';

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

@@ -1,11 +1,31 @@
-import type { ChangeEvent, ComponentRef } from 'react';
+import type { ChangeEvent, ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { CalendarProps, CalendarOnChange } from '../Calendar';
-import type { FIELD_CONTROL_DEFAULT_TAG } from '../FieldControl';
-import type { InputProps } from '../Input';
+import type { CalendarProps } 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 { PopoverBaseProps } from '../Popover';
-export type DatePickerOnChange = CalendarOnChange<'single'>;
-export type DatePickerOnInputChange = (e: ChangeEvent<HTMLInputElement> | null, value: string) => void;
+import type { StackProps } from '../Stack';
+import type { DATE_PICKER_DEFAULT_MODE } from './constants';
+export declare const datePickerModeVariant: readonly ["date", "date-range"];
+type Range = 'date-range';
+export type DatePickerModeVariant = (typeof datePickerModeVariant)[number];
+export type DatePickerPropInputValue<MODE extends DatePickerModeVariant> = (MODE extends Range ? [string, string] : string) | null;
+export type DatePickerPropOnInputChange<MODE extends DatePickerModeVariant> = (e: ChangeEvent<HTMLInputElement> | null, value: DatePickerPropInputValue<MODE>) => void;
+export type DatePickerPropValue<MODE extends DatePickerModeVariant> = (MODE extends Range ? [Date?, Date?] : Date) | null;
+export type DatePickerPropOnChange<MODE extends DatePickerModeVariant> = (date: DatePickerPropValue<MODE>) => void;
+type InputPropLabel = InputProps['label'];
+type InputPropRenderLeft = InputProps['renderLeft'];
+type InputPropRenderRight = InputProps['renderRight'];
+type InputPropPlaceholder = InputProps['placeholder'];
+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;
+export type DatePickerPropPlaceholder<MODE> = MODE extends Range ? [InputPropPlaceholder?, InputPropPlaceholder?] | InputPropPlaceholder : InputPropPlaceholder;
+export type DatePickerPropInputProps<MODE> = MODE extends Range ? [FieldInputProps?, FieldInputProps?] | FieldInputProps : FieldInputProps;
+export type DatePickerPropLabelProps<MODE> = MODE extends Range ? [FieldLabelProps?, FieldLabelProps?] | FieldLabelProps : FieldLabelProps;
+export type DatePickerPropFieldsProps<MODE> = MODE extends Range ? StackProps : never;
 export type DatePickerPropOnError = (props: {
     type: 'outOfRange';
     inputValue?: string;
@@ -15,32 +35,35 @@ export type DatePickerPropOnError = (props: {
     inputValue?: string;
     value?: Date | null;
 }) => void;
-type DatePickerOpenControlledProps = {
+export type DatePickerRef = ComponentRef<'div'>;
+/**
+ * @deprecated
+ * Use the `DatePickerPropOnInputChange` type to replace it.
+ * */
+export type DatePickerOnChange<MODE extends DatePickerModeVariant> = DatePickerPropOnInputChange<MODE>;
+/**
+ * @deprecated
+ * Use the `DatePickerPropOnInputChange` type to replace it.
+ * */
+export type DatePickerOnInputChange<MODE extends DatePickerModeVariant> = DatePickerPropOnInputChange<MODE>;
+export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE> = ExtendableComponentPropsWithRef<{
+    mode?: MODE;
+    /** Выбранная дата */
+    value?: DatePickerPropValue<MODE>;
+    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
+    defaultValue?: DatePickerPropValue<MODE>;
     /** Текущее состояние списка. Если `true`, список отображается. */
     open?: boolean;
     /** Состояние открытие по умолчанию (неконтролируемый компонент) */
-    defaultOpen?: never;
-};
-type DatePickerOpenUncontrolledProps = {
-    /** Текущее состояние списка. Если `true`, список отображается. */
-    open?: never;
-    /** Состояние открытие по умолчанию (неконтролируемый компонент) */
     defaultOpen?: boolean;
-};
-export type DatePickerRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
-export type DatePickerProps = ExtendableComponentPropsWithRef<{
-    /** Выбранная дата */
-    value?: Date | null;
-    /** Выбранная дата по умолчанию (неконтролируемое состояние) */
-    defaultValue?: Date | null;
     /** Функция обратного вызова, которая будет вызвана при выборе значения */
-    onChange?: DatePickerOnChange;
-    /** Введённое значение в текстовом поле */
-    onInputChange?: DatePickerOnInputChange;
+    onChange?: DatePickerPropOnChange<MODE>;
+    /** Введённое значение в текстовом поле (полях) */
+    onInputChange?: DatePickerPropOnInputChange<MODE>;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает закрытие */
-    onClose?: () => void;
+    onClose?(): void;
     /** Функция обратного вызова, которая будет вызвана когда компонент запрашивает открытие */
-    onOpen?: () => void;
+    onOpen?(): void;
     /** Свойства компонента Calendar */
     calendarProps?: CalendarProps;
     /** Свойства компонента Popover */
@@ -51,5 +74,41 @@ export type DatePickerProps = ExtendableComponentPropsWithRef<{
     disableClearButton?: boolean;
     /** Функция обратно вызова, которая сработает если пользователь ввёл дату с ошибкой */
     onError?: DatePickerPropOnError;
-} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'offsetDate'> & Pick<InputProps, 'label' | 'hint' | 'onKeyDown' | 'size' | 'error' | 'required' | 'fullWidth' | 'disableStroke' | 'disabled' | 'renderLeft' | 'renderRight' | 'placeholder' | 'inputProps' | 'hintProps'> & (DatePickerOpenControlledProps | DatePickerOpenUncontrolledProps), typeof FIELD_CONTROL_DEFAULT_TAG>;
+    /** Лейбл */
+    label?: DatePickerPropLabel<MODE>;
+    /** Текст или иконка слева */
+    renderLeft?: DatePickerPropRenderLeft<MODE>;
+    /** Текст или иконка справа */
+    renderRight?: DatePickerPropRenderRight<MODE>;
+    /** Подсказка. Отображается, когда вариант не выбран */
+    placeholder?: DatePickerPropPlaceholder<MODE>;
+    /** Свойства элемента input */
+    inputProps?: DatePickerPropInputProps<MODE>;
+    /** Свойства FieldLabel */
+    labelProps?: DatePickerPropLabelProps<MODE>;
+    /** Если `true` не закрывает выпадающий список при выборе опции */
+    disableCloseOnSelect?: boolean;
+    /** Если `true` делает элемент неактивным */
+    disabled?: boolean;
+    /** Дополнительное описание к полю */
+    hint?: string | null | undefined;
+    /** Cвойства FieldHint */
+    hintProps?: Omit<FieldHintProps, 'children'>;
+    /** Размер компонента */
+    size?: InputSizeVariant;
+    /** Если `true` растягивает поле на всю ширину */
+    fullWidth?: boolean;
+    /** Если `true` делает элемент обязательным к заполнению */
+    required?: boolean;
+    /** Если `true` отключает обводку */
+    disableStroke?: boolean;
+    /** Если `true` переводит поле в состояние ошибки */
+    error?: boolean;
+    /** Свойства обертки для текстовых полей. Принимает свойства компонента [Stack](https://ozen-ui.netlify.app/?path=/docs/components-stack--docs) */
+    fieldsProps?: DatePickerPropFieldsProps<MODE>;
+    /** Количество отображаемых календарей в компоненте: один или два */
+    calendars?: 1 | 2;
+} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
+export type DatePickerComponent = <MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode;
+export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = (props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode;
 export {};

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

@@ -1 +1 @@
-export {};
+export var datePickerModeVariant = ['date', 'date-range'];

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

@@ -1,8 +1,7 @@
 import { __read } from "tslib";
-import { isCompleted } from '../../components/DateInput/utils';
 export var formatStringToDate = function (value) {
     var _a = __read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
-    if (!(date && month && year) || !isCompleted(value)) {
+    if (!(date && month && year)) {
         return null;
     }
     return new Date(+year, +month - 1, +date);

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

@@ -0,0 +1,3 @@
+import type { CalendarProps } from '../../../Calendar';
+import type { DatePickerModeVariant, DatePickerProps } from '../../index';
+export declare const getCommonCalendarProps: <MODE extends DatePickerModeVariant>(props: Omit<DatePickerProps<MODE>, "mode">) => CalendarProps;

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

@@ -0,0 +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 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 });
+};

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

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

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

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

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

@@ -0,0 +1,4 @@
+import { Paper } from '../../../Paper';
+import type { PopoverProps } from '../../../Popover';
+import type { DatePickerModeVariant, DatePickerProps } from '../../index';
+export declare const getCommonPopoverProps: <MODE extends DatePickerModeVariant>(props: Omit<DatePickerProps<MODE>, "mode">) => PopoverProps<typeof Paper>;

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

@@ -0,0 +1,9 @@
+import { __assign } from "tslib";
+import { getPaperSizeToFormElement } from '../../../../utils/getPaperSizeToFormElement';
+import { Paper } from '../../../Paper';
+export var getCommonPopoverProps = function (props) {
+    var _a = props.size, size = _a === void 0 ? 'm' : _a, popoverProps = props.popoverProps;
+    /** Вычисление border-radius по размеру компонента */
+    var radius = getPaperSizeToFormElement(size);
+    return __assign({ radius: radius, as: Paper, offset: [0, 4], disableReturnFocus: true, disableEnforceFocus: true, placement: 'bottom-start' }, popoverProps);
+};

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

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

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

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

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

@@ -3,3 +3,7 @@ export * from './formatDateToString';
 export * from './formatStringToDate';
 export * from './isOutOfRange';
 export * from './isInExclude';
+export * from './getCommonPopoverProps';
+export * from './getCommonCalendarProps';
+export * from './isValidDateString';
+export * from './useCalendarKeyboard';

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

@@ -3,3 +3,7 @@ export * from './formatDateToString';
 export * from './formatStringToDate';
 export * from './isOutOfRange';
 export * from './isInExclude';
+export * from './getCommonPopoverProps';
+export * from './getCommonCalendarProps';
+export * from './isValidDateString';
+export * from './useCalendarKeyboard';

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const isValidDateString: (value: string | null | undefined) => boolean;

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

@@ -0,0 +1,11 @@
+import { __read } from "tslib";
+import { isValidDate } from '../../../../utils/date';
+import { isNotNil } from '../../../../utils/isNotNil';
+export var isValidDateString = function (value) {
+    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))));
+};

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

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

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

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

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

@@ -0,0 +1,8 @@
+import type { RefObject } from 'react';
+type UseCalendarKeyboardProps = {
+    controlRef: RefObject<HTMLElement>;
+    calendarRef: RefObject<HTMLElement>;
+    active?: boolean;
+};
+export declare const useCalendarKeyboard: ({ controlRef, calendarRef, active, }: UseCalendarKeyboardProps) => boolean;
+export {};