@ozen-ui/kit 0.61.0 → 0.62.0

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

@@ -4,157 +4,23 @@ exports.DatePicker = exports.cnDatePicker = void 0;
 var tslib_1 = require("tslib");
 require("./DatePicker.css");
 var react_1 = tslib_1.__importStar(require("react"));
-var useControlled_1 = require("../../hooks/useControlled");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
-var getPaperSizeToFormElement_1 = require("../../utils/getPaperSizeToFormElement");
-var isKeys_1 = require("../../utils/isKeys");
-var Calendar_1 = require("../Calendar");
-var Paper_1 = require("../Paper");
-var Popover_1 = require("../Popover");
+var getByMap_1 = require("../../utils/getByMap");
 var components_1 = require("./components");
-var utils_1 = require("./components/DateInput/utils");
 var constants_1 = require("./constants");
-var utils_2 = require("./utils");
+var typeMap = {
+    date: components_1.DatePickerModeDate,
+    'date-range': components_1.DatePickerModeDateRange,
+};
 exports.cnDatePicker = (0, classname_1.cn)('DatePicker');
+// eslint-disable-next-line react/display-name
 exports.DatePicker = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'DatePicker',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.DATE_PICKER_DEFAULT_SIZE : _a, label = props.label, error = props.error, required = props.required, fullWidth = props.fullWidth, placeholder = props.placeholder, hint = props.hint, valueProp = props.value, 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, offsetDate = props.offsetDate, inputProps = props.inputProps, calendarProps = props.calendarProps, popoverProps = props.popoverProps, renderRight = props.renderRight, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, className = props.className, autoFocus = props.autoFocus, onError = props.onError, other = tslib_1.__rest(props, ["size", "label", "error", "required", "fullWidth", "placeholder", "hint", "value", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "offsetDate", "inputProps", "calendarProps", "popoverProps", "renderRight", "disableClearButton", "onChange", "onKeyDown", "className", "autoFocus", "onError"]);
-    var anchorRef = (0, react_1.useRef)(null);
-    var lastValidDate = (0, react_1.useRef)('');
-    var _b = tslib_1.__read((0, useControlled_1.useControlled)({
-        value: undefined,
-        defaultValue: '',
-        name: 'DatePicker',
-        state: 'inputValue',
-    }), 2), inputValue = _b[0], setInputValue = _b[1];
-    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
-        value: openProp,
-        defaultValue: defaultOpen,
-        name: 'DatePicker',
-        state: 'open',
-    }), 2), open = _c[0], setOpen = _c[1];
-    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
-        value: valueProp,
-        defaultValue: defaultValue,
-        name: 'DatePicker',
-        state: 'value',
-    }), 2), value = _d[0], setValue = _d[1];
-    /** Соотношение размера календаря к размеру элемента контроля */
-    var calendarSize = (0, utils_2.getCalendarSizeToFormElement)(size);
-    /** Вычисление border-radius по размеру компонента */
-    var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
-    var callOnChange = function (value) {
-        var formattedDate = (0, utils_2.formatStringToDate)(value);
-        setValue(formattedDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
-        lastValidDate.current = value;
-    };
-    var changeInputValue = function (e, value) {
-        setInputValue(value);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
-        if ((0, utils_1.isCompleted)(value) || value === '')
-            callOnChange(value);
-    };
-    /** Эффект — автофокусировка в текстовом поле */
-    (0, react_1.useEffect)(function () {
-        var _a;
-        if (autoFocus)
-            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [autoFocus]);
-    /** Эффект — синхронизируем значение текстового поля со значением в списке */
-    (0, react_1.useEffect)(function () {
-        var formattedDate = (0, utils_2.formatDateToString)(value);
-        if (formattedDate !== inputValue) {
-            setInputValue(formattedDate);
-            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
-            lastValidDate.current = formattedDate;
-        }
-    }, [value]);
-    /** Эффект для обработки ошибок */
-    (0, react_1.useEffect)(function () {
-        if ((0, utils_2.isInExclude)({ exclude: exclude, value: value })) {
-            onError === null || onError === void 0 ? void 0 : onError({
-                type: 'inExclude',
-                inputValue: inputValue,
-                value: value,
-            });
-        }
-        if ((0, utils_2.isOutOfRange)({ minDate: minDate, maxDate: maxDate, value: value })) {
-            onError === null || onError === void 0 ? void 0 : onError({
-                type: 'outOfRange',
-                inputValue: inputValue,
-                value: value,
-            });
-        }
-    }, [value, inputValue, onError, minDate, maxDate, exclude]);
-    /** Закрытие */
-    var handleClose = function () {
-        setOpen(false);
-        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
-    };
-    /** Открытие */
-    var handleOpen = function () {
-        setOpen(true);
-        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
-    };
-    /** Переключатель открытия и закрытия */
-    var handleToggle = function () {
-        if (disabled)
-            return;
-        if (open)
-            handleClose();
-        else
-            handleOpen();
-    };
-    /** Открытие списка по клику на текстовом поле */
-    var handleClickOnInput = function (e) {
-        var _a;
-        handleToggle();
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    /** Управление элементом контроля через клавиатуру */
-    var handleKeyDown = function (event) {
-        if ((0, isKeys_1.isKeys)(event, ['ArrowDown', 'ArrowUp']) && !open) {
-            event.preventDefault();
-            handleToggle();
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    };
-    /** Актуализация значения текстового поля после его покидания */
-    var handleBlur = function (e) {
-        var _a;
-        (_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.isCompleted)(inputValue))
-            changeInputValue(null, lastValidDate.current);
-    };
-    /** Очистка поля */
-    var handleClear = function () {
-        changeInputValue(null, '');
-    };
-    /** Событие ввода значения в текстовом поле */
-    var handleChangeInput = function (e) {
-        var value = e.target.value;
-        changeInputValue(e, value);
-    };
-    /** Событие выбора значения из календаря */
-    var handleChangeCalendar = function (date) {
-        var formattedDate = (0, utils_2.formatDateToString)(date);
-        changeInputValue(null, formattedDate);
-        handleClose();
-    };
-    /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
-    var handleMouseDownCalendar = function (e) {
-        e.preventDefault();
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(components_1.DateInput, tslib_1.__assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: react_1.default.createElement(components_1.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, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: (0, exports.cnDatePicker)({ size: size }, [className]), onKeyDown: handleKeyDown, ref: ref })),
-        react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: Paper_1.Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
-            react_1.default.createElement(Calendar_1.Calendar, tslib_1.__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
+    var _a = props.size, size = _a === void 0 ? constants_1.DATE_PICKER_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? constants_1.DATE_PICKER_DEFAULT_MODE : _b, other = tslib_1.__rest(props, ["size", "mode"]);
+    var Component = (0, getByMap_1.getByMap)(typeMap, mode);
+    return react_1.default.createElement(Component, tslib_1.__assign({ size: size }, other, { ref: ref }));
 });
-exports.DatePicker.displayName = 'DatePicker';

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

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateInput = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-var icons_1 = require("@ozen-ui/icons");
 var useMultiRef_1 = require("../../../../hooks/useMultiRef");
 var Input_1 = require("../../../Input");
 var utils_1 = 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({ renderRight: icons_1.CalendarIcon, value: (0, utils_1.dateInputMask)(valueProp), defaultValue: (0, utils_1.dateInputMask)(defaultValue) }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref]) })));
+    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]) })));
 });
 exports.DateInput.displayName = 'DateInput';

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

@@ -1,2 +1 @@
-export declare const isCompleted: (value: string) => boolean;
 export declare const dateInputMask: (value: string | undefined) => string | undefined;

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

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dateInputMask = exports.isCompleted = void 0;
-var isCompleted = function (value) { return value.length === 10; };
-exports.isCompleted = isCompleted;
+exports.dateInputMask = void 0;
 var dateInputMask = function (value) {
     if (!value) {
         return value;

package/__inner__/cjs/components/DatePicker/components/DatePickerModeDate/DatePickerModeDate.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerModeComponent } from '../../types';
+export declare const DatePickerModeDate: DatePickerModeComponent<'date'>;

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

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerModeDate = void 0;
+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 isKeys_1 = require("../../../../utils/isKeys");
+var Calendar_1 = require("../../../Calendar");
+var Popover_1 = require("../../../Popover");
+var index_1 = require("../../index");
+var utils_1 = require("../../utils");
+var index_2 = require("../index");
+// eslint-disable-next-line react/display-name
+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 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)({
+        value: undefined,
+        defaultValue: '',
+        name: 'DatePicker',
+        state: 'inputValue',
+    }), 2), inputValue = _c[0], setInputValue = _c[1];
+    var _d = 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)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'DatePicker',
+        state: 'value',
+    }), 2), value = _e[0], setValue = _e[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);
+        setValue(formattedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
+        lastValidDate.current = value;
+    };
+    var changeInputValue = function (e, value) {
+        setInputValue(value);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
+        if ((0, utils_1.isValidDateString)(value)) {
+            callOnChange(value);
+            onOffsetDateChange((0, utils_1.formatStringToDate)(value));
+        }
+    };
+    var handleExited = function () {
+        var _a;
+        onOffsetDateChange(null);
+        (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
+    };
+    /** Enables calendar keyboard interaction */
+    var enableEnforceFocus = (0, utils_1.useCalendarKeyboard)({
+        controlRef: anchorRef,
+        calendarRef: calendarInnerRef,
+        active: open,
+    });
+    /** Эффект — автофокусировка в текстовом поле */
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (autoFocus)
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [autoFocus]);
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    (0, react_1.useEffect)(function () {
+        var formattedDate = (0, utils_1.formatDateToString)(value);
+        if (formattedDate !== inputValue) {
+            setInputValue(formattedDate);
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
+            lastValidDate.current = formattedDate;
+        }
+    }, [value]);
+    /** Эффект для обработки ошибок */
+    (0, react_1.useEffect)(function () {
+        if ((0, utils_1.isInExclude)({ exclude: exclude, value: value })) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'inExclude',
+                inputValue: inputValue,
+                value: value,
+            });
+        }
+        if ((0, utils_1.isOutOfRange)({ minDate: minDate, maxDate: maxDate, value: value })) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'outOfRange',
+                inputValue: inputValue,
+                value: value,
+            });
+        }
+    }, [value, inputValue, onError, minDate, maxDate, exclude]);
+    /** Закрытие */
+    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 handleClickOnInput = function (e) {
+        var _a;
+        handleOpen();
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (event) {
+        if ((0, isKeys_1.isKeys)(event, ['ArrowDown', 'ArrowUp'])) {
+            event.preventDefault();
+            handleOpen();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_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))
+            changeInputValue(null, lastValidDate.current);
+    };
+    /** Очистка поля */
+    var handleClear = function () {
+        changeInputValue(null, '');
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        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);
+    };
+    /** Событие выбора значения из календаря */
+    var handleChangeCalendar = function (date) {
+        var formattedDate = (0, utils_1.formatDateToString)(date);
+        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(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 })))));
+});

package/__inner__/cjs/components/DatePicker/components/DatePickerModeDate/index.d.ts

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DatePickerModeDate"), exports);

package/__inner__/cjs/components/DatePicker/components/DatePickerModeDateRange/DatePickerModeDateRange.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerModeComponent } from '../../types';
+export declare const DatePickerModeDateRange: DatePickerModeComponent<'date-range'>;

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

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePickerModeDateRange = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
+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 Calendar_1 = require("../../../Calendar");
+var FieldHint_1 = require("../../../FieldHint");
+var Popover_1 = require("../../../Popover");
+var Stack_1 = require("../../../Stack");
+var index_1 = require("../../index");
+var utils_1 = require("../../utils");
+var index_2 = require("../index");
+var utils_2 = require("./utils");
+exports.DatePickerModeDateRange = 
+// eslint-disable-next-line react/display-name
+(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, 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"]);
+    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];
+    var containerRef = (0, react_1.useRef)(null);
+    var anchorRef = (0, react_1.useRef)(null);
+    var calendarInnerRef = (0, react_1.useRef)(null);
+    var dateInputToRef = (0, react_1.useRef)(null);
+    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 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)({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'DatePicker',
+        state: 'value',
+    }), 2), value = _m[0], setValue = _m[1];
+    var _o = 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)({
+        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 }));
+    var onOffsetDateChange = function (date) {
+        setOffsetDate(date);
+    };
+    var onCalendarsChange = (0, react_1.useCallback)(function (date) {
+        setCalendarPeriod(date);
+    }, []);
+    /** Enables calendar keyboard interaction */
+    var enableEnforceFocusTo = (0, utils_1.useCalendarKeyboard)({
+        controlRef: dateInputToRef,
+        calendarRef: calendarInnerRef,
+        active: open,
+    });
+    var disableEnforceFocus = !enableEnforceFocusTo;
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    (0, react_1.useEffect)(function () {
+        var formattedDateFrom = (0, utils_1.formatDateToString)(valueFrom);
+        var formattedDateTo = (0, utils_1.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 */
+    (0, react_1.useEffect)(function () {
+        if (onError) {
+            logger_1.once.error('Обработка ошибок в режиме date-range на данный момент не поддерживается.');
+        }
+    }, [onError]);
+    /** Calendar offset when interacting with inputs */
+    (0, react_1.useEffect)(function () {
+        if (!(0, utils_1.isValidDateString)(inputValueFrom) ||
+            !(0, utils_1.isValidDateString)(inputValueTo) ||
+            !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] }));
+            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 = 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;
+        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 = tslib_1.__read(value || [], 2), valueFrom = _a[0], valueTo = _a[1];
+        if ((0, utils_1.isValidDateString)(valueFrom) && (0, utils_1.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 (!(0, utils_1.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 (!(0, utils_1.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 ((0, isKeys_1.isKeys)(event, ['ArrowDown', 'ArrowUp'])) {
+            event.preventDefault();
+            handleOpen();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    /** Событие выбора значения из календаря */
+    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),
+        ];
+        changeInputValue(null, formattedDate);
+        if (!disableCloseOnSelect && dateFrom && dateTo)
+            handleClose();
+    };
+    return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, index_1.cnDatePicker)({
+            mode: 'date-range',
+            size: size,
+            error: error,
+            required: required,
+            disabled: disabled,
+            fullWidth: fullWidth,
+            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(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 })))));
+});

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DatePickerModeDateRange"), exports);

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