@consta/uikit 3.13.0 → 3.16.0

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerTypeDateRange/DatePickerTypeDateRange.js

@@ -6,13 +6,15 @@ var react_1 = tslib_1.__importStar(require("react"));
 var addMonths_1 = tslib_1.__importDefault(require("date-fns/addMonths"));
 var startOfMonth_1 = tslib_1.__importDefault(require("date-fns/startOfMonth"));
 var useClickOutside_1 = require("../../../hooks/useClickOutside/useClickOutside");
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
 var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
 var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
 var DatePickerFieldTypeDateRange_1 = require("../DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange");
 var helpers_1 = require("../helpers");
+var useCurrentVisibleDate_1 = require("../useCurrentVisibleDate");
 exports.DatePickerTypeDateRange = react_1.forwardRef(function (props, ref) {
     var _a, _b, _c, _d;
-    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, fieldProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef"]);
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, fieldProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var startFieldRef = react_1.useRef(null);
     var endFieldRef = react_1.useRef(null);
     var startFieldInputRef = react_1.useRef(null);
@@ -22,29 +24,17 @@ exports.DatePickerTypeDateRange = react_1.forwardRef(function (props, ref) {
     var startFocused = fieldFocused === 'start';
     var endFocused = fieldFocused === 'end';
     var hadleChange = function (_a) {
-        var _b, _c, _d, _e, _f, _g;
+        var _b, _c, _d, _e;
         var e = _a.e, value = _a.value;
         if (startFocused) {
             (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: helpers_1.normalizeRangeValue([value, (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c[1]]) });
-            (_d = endFieldInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
         }
         if (endFocused) {
-            (_e = props.onChange) === null || _e === void 0 ? void 0 : _e.call(props, { e: e, value: helpers_1.normalizeRangeValue([(_f = props === null || props === void 0 ? void 0 : props.value) === null || _f === void 0 ? void 0 : _f[0], value]) });
-            (_g = startFieldInputRef.current) === null || _g === void 0 ? void 0 : _g.focus();
+            (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: helpers_1.normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
         }
     };
-    var _f = tslib_1.__read(react_1.useState(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
-    var _g = tslib_1.__read(react_1.useState(), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
-    var commonProps = {
-        value: props.value || undefined,
-        view: dateTimeView,
-        events: events,
-        locale: locale,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        form: dropdownForm,
-        onChange: hadleChange
-    };
+    var _f = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _g = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
     var startFieldOnBlurHandler = function (e) {
         onBlur && onBlur(e);
         startFieldOnBlur && startFieldOnBlur(e);
@@ -55,72 +45,70 @@ exports.DatePickerTypeDateRange = react_1.forwardRef(function (props, ref) {
     };
     var startFieldOnFocusHandler = function (e) {
         setFieldFocused('start');
-        setCalendarVisible(true);
+        setCalendarVisible.on();
         onFocus && onFocus(e);
         startFieldOnFocus && startFieldOnFocus(e);
     };
     var endFieldOnFocusHandler = function (e) {
         setFieldFocused('end');
-        setCalendarVisible(true);
+        setCalendarVisible.on();
         onFocus && onFocus(e);
         endFieldOnFocus && endFieldOnFocus(e);
     };
     // эфект для того чтобы календарь переключался при вводе с клавиатуры
     react_1.useEffect(function () {
-        var _a, _b;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) &&
-            props.dateTimeView === 'classic' &&
-            currentVisibleDate &&
-            startFocused) {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && props.dateTimeView === 'classic' && startFocused) {
             var newVisibleDate = startOfMonth_1["default"](props.value[0]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
                 setCurrentVisibleDate(newVisibleDate);
             }
             return;
         }
-        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) &&
-            props.dateTimeView !== 'classic' &&
-            currentVisibleDate &&
-            startFocused) {
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && props.dateTimeView !== 'classic' && startFocused) {
             var newVisibleDate = startOfMonth_1["default"](props.value[0]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== addMonths_1["default"](currentVisibleDate, 1).getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && addMonths_1["default"](currentVisibleDate, 1).getTime())) {
                 setCurrentVisibleDate(newVisibleDate);
             }
+            return;
+        }
+        if (!((_c = props.value) === null || _c === void 0 ? void 0 : _c[0]) && startFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
         }
-    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible]);
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible, startFocused]);
     react_1.useEffect(function () {
-        var _a, _b;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) &&
-            props.dateTimeView === 'classic' &&
-            currentVisibleDate &&
-            endFocused) {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && props.dateTimeView === 'classic' && endFocused) {
             var newVisibleDate = startOfMonth_1["default"](props.value[1]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
                 setCurrentVisibleDate(newVisibleDate);
             }
             return;
         }
-        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) &&
-            props.dateTimeView !== 'classic' &&
-            currentVisibleDate &&
-            endFocused) {
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && props.dateTimeView !== 'classic' && endFocused) {
             var newVisibleDate = startOfMonth_1["default"](props.value[1]);
-            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== addMonths_1["default"](currentVisibleDate, 1).getTime()) {
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && addMonths_1["default"](currentVisibleDate, 1).getTime())) {
                 setCurrentVisibleDate(addMonths_1["default"](newVisibleDate, -1));
             }
+            return;
+        }
+        if (!((_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) && endFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
         }
-    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible]);
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible, endFocused]);
     useClickOutside_1.useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
         handler: function () {
             setFieldFocused(false);
-            setCalendarVisible(false);
+            setCalendarVisible.off();
         }
     });
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(DatePickerFieldTypeDateRange_1.DatePickerFieldTypeDateRange, tslib_1.__assign({}, fieldProps, { ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef_1.useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
-        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, tslib_1.__assign({}, commonProps, { ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: function (date) { return setCurrentVisibleDate(date); }, currentVisibleDate: currentVisibleDate }))));
+        react_1["default"].createElement(DatePickerFieldTypeDateRange_1.DatePickerFieldTypeDateRange, tslib_1.__assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef_1.useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
+        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { type: "date", ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: setCurrentVisibleDate, currentVisibleDate: currentVisibleDate, value: props.value || undefined, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, form: dropdownForm, onChange: hadleChange, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
 });

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerTypeDateTime/DatePickerTypeDateTime.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerTypeComponent } from '../helpers';
+export declare const DatePickerTypeDateTime: DatePickerTypeComponent<'date-time'>;

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerTypeDateTime/DatePickerTypeDateTime.js

@@ -0,0 +1,59 @@
+"use strict";
+exports.__esModule = true;
+exports.DatePickerTypeDateTime = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var addMonths_1 = tslib_1.__importDefault(require("date-fns/addMonths"));
+var startOfMonth_1 = tslib_1.__importDefault(require("date-fns/startOfMonth"));
+var useClickOutside_1 = require("../../../hooks/useClickOutside/useClickOutside");
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var setRef_1 = require("../../../utils/setRef");
+var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
+var DatePickerFieldTypeDateTime_1 = require("../DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime");
+var helpers_1 = require("../helpers");
+var useCurrentVisibleDate_1 = require("../useCurrentVisibleDate");
+exports.DatePickerTypeDateTime = react_1.forwardRef(function (props, ref) {
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, multiplicityHoursProp = props.multiplicityHours, multiplicityMinutesProp = props.multiplicityMinutes, multiplicitySecondsProp = props.multiplicitySeconds, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "renderAdditionalControls"]);
+    var _a = tslib_1.__read(helpers_1.getMultiplicityTime(otherProps.format || helpers_1.datePickerPropFormatTypeDateTime, multiplicityHoursProp, multiplicityMinutesProp, multiplicitySecondsProp), 3), multiplicityHours = _a[0], multiplicityMinutes = _a[1], multiplicitySeconds = _a[2];
+    var fieldRef = react_1.useRef(null);
+    var calendarRef = react_1.useRef(null);
+    var _b = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _b[0], setCalendarVisible = _b[1];
+    var _c = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
+    var _d = tslib_1.__read(react_1.useState(), 2), calendarVisibleDate = _d[0], setCalendarVisibleDate = _d[1];
+    var onFocusHandler = function (e) {
+        onFocus && onFocus(e);
+        setCalendarVisible.on();
+    };
+    react_1.useEffect(function () {
+        if (ref) {
+            setRef_1.setRef(ref, fieldRef.current);
+        }
+    }, [ref, fieldRef]);
+    react_1.useEffect(function () {
+        if (props.value && props.dateTimeView === 'classic' && calendarVisibleDate) {
+            var newVisibleDate = startOfMonth_1["default"](props.value);
+            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (props.value && props.dateTimeView !== 'classic' && calendarVisibleDate) {
+            var newVisibleDate = startOfMonth_1["default"](props.value);
+            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== addMonths_1["default"](calendarVisibleDate, 1).getTime()) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+        }
+    }, [props.value]);
+    useClickOutside_1.useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [fieldRef, calendarRef],
+        handler: function () {
+            setCalendarVisible.off();
+            setCurrentVisibleDate(props.value ? undefined : currentVisibleDateProp);
+        }
+    });
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(DatePickerFieldTypeDateTime_1.DatePickerFieldTypeDateTime, tslib_1.__assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes })),
+        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { ref: calendarRef, anchorRef: fieldRef, isOpen: calendarVisible, value: props.value || undefined, type: "date-time", view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, currentVisibleDate: currentVisibleDate, form: dropdownForm, onChange: props.onChange, renderAdditionalControls: renderAdditionalControls, onChangeCurrentVisibleDate: setCalendarVisibleDate, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes })));
+});

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerTypeComponent } from '../helpers';
+export declare const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-range'>;

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.js

@@ -0,0 +1,95 @@
+"use strict";
+exports.__esModule = true;
+exports.DatePickerTypeDateTimeRange = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var startOfMonth_1 = tslib_1.__importDefault(require("date-fns/startOfMonth"));
+var useClickOutside_1 = require("../../../hooks/useClickOutside/useClickOutside");
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
+var DatePickerFieldTypeDateTimeRange_1 = require("../DatePickerFieldTypeDateTimeRange/DatePickerFieldTypeDateTimeRange");
+var helpers_1 = require("../helpers");
+var useCurrentVisibleDate_1 = require("../useCurrentVisibleDate");
+exports.DatePickerTypeDateTimeRange = react_1.forwardRef(function (props, ref) {
+    var _a, _b, _c, _d;
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, fieldProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var startFieldRef = react_1.useRef(null);
+    var endFieldRef = react_1.useRef(null);
+    var startFieldInputRef = react_1.useRef(null);
+    var endFieldInputRef = react_1.useRef(null);
+    var calendarRef = react_1.useRef(null);
+    var _e = tslib_1.__read(react_1.useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var startFocused = fieldFocused === 'start';
+    var endFocused = fieldFocused === 'end';
+    var hadleChange = function (_a) {
+        var _b, _c, _d, _e;
+        var e = _a.e, value = _a.value;
+        if (startFocused) {
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: helpers_1.normalizeRangeValue([value, (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c[1]]) });
+        }
+        if (endFocused) {
+            (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: helpers_1.normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
+        }
+    };
+    var _f = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _g = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var startFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        startFieldOnBlur && startFieldOnBlur(e);
+    };
+    var endFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        endFieldOnBlur && endFieldOnBlur(e);
+    };
+    var startFieldOnFocusHandler = function (e) {
+        setFieldFocused('start');
+        setCalendarVisible.on();
+        onFocus && onFocus(e);
+        startFieldOnFocus && startFieldOnFocus(e);
+    };
+    var endFieldOnFocusHandler = function (e) {
+        setFieldFocused('end');
+        setCalendarVisible.on();
+        onFocus && onFocus(e);
+        endFieldOnFocus && endFieldOnFocus(e);
+    };
+    // эфект для того чтобы календарь переключался при вводе с клавиатуры
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && startFocused) {
+            var newVisibleDate = startOfMonth_1["default"](props.value[0]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && startFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible, startFocused]);
+    react_1.useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && endFocused) {
+            var newVisibleDate = startOfMonth_1["default"](props.value[1]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && endFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible, endFocused]);
+    useClickOutside_1.useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
+        handler: function () {
+            setFieldFocused(false);
+            setCalendarVisible.off();
+        }
+    });
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(DatePickerFieldTypeDateTimeRange_1.DatePickerFieldTypeDateTimeRange, tslib_1.__assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef_1.useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
+        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { type: "date-time", ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: setCurrentVisibleDate, currentVisibleDate: currentVisibleDate, value: props.value || undefined, timeFor: fieldFocused || undefined, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, form: dropdownForm, onChange: hadleChange, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
+});

package/__internal__/cjs-src/components/DatePickerCanary/helpers.d.ts

@@ -3,14 +3,15 @@ import { Locale } from 'date-fns';
 import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { DateRange } from '../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { DateTimePropView } from '../DateTimeCanary/helpers';
+import { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
-export declare const datePickerPropType: readonly ["date", "date-range"];
+export declare const datePickerPropType: readonly ["date", "date-range", "date-time", "date-time-range"];
 export declare type DatePickerPropType = typeof datePickerPropType[number];
 export declare const datePickerPropTypeDefault: "date";
 export declare type DatePickerPropDateTimeView = DateTimePropView;
+declare type Range = 'date-range' | 'date-time-range';
 export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
-export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends 'date' ? Date : DateRange) | null;
+export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends Range ? DateRange : Date) | null;
 export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (props: {
     value: DatePickerPropValue<TYPE>;
     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | Event;
@@ -18,17 +19,18 @@ export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (p
 export declare const datePickerPropDropdownForm: readonly ["default", "brick", "round"];
 export declare type DatePickerPropDropdownForm = typeof datePickerPropDropdownForm[number];
 export declare const datePickerPropDropdownFormDefault: "default";
-declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends 'date' ? TextFieldPropWidth : never;
-declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends 'date' ? React.Ref<HTMLInputElement> : never;
-declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends 'date-range' ? React.Ref<HTMLInputElement> : never;
-declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends 'date-range' ? string | IconComponent : never;
-declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends 'date-range' ? React.FocusEventHandler<HTMLElement> : never;
+declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends Range ? TextFieldPropWidth : never;
+declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends Range ? never : React.Ref<HTMLInputElement>;
+declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends Range ? React.Ref<HTMLInputElement> : never;
+declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends Range ? string | IconComponent : never;
+declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends Range ? React.FocusEventHandler<HTMLElement> : never;
 export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     type?: TYPE;
     value?: DatePickerPropValue<TYPE>;
     onChange?: DatePickerPropOnChange<TYPE>;
     minDate?: Date;
     maxDate?: Date;
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
     events?: Date[];
     dateTimeView?: DatePickerPropDateTimeView;
     locale?: Locale;
@@ -70,16 +72,23 @@ export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
     label?: string;
     caption?: string;
     labelPosition?: 'top' | 'left';
+    onChangeCurrentVisibleDate?: (date: Date) => void;
+    currentVisibleDate?: Date;
+    multiplicitySeconds?: number;
+    multiplicityMinutes?: number;
+    multiplicityHours?: number;
 }, HTMLDivElement>;
 export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
-export declare type DatePickerTypeDateComponent = (props: DatePickerProps<'date'>) => React.ReactElement | null;
-export declare type DatePickerTypeDateRangeComponent = (props: DatePickerProps<'date-range'>) => React.ReactElement | null;
+export declare type DatePickerTypeComponent<TYPE extends DatePickerPropType> = (props: Omit<DatePickerProps<TYPE>, 'type'>) => React.ReactElement | null;
 export declare type DatePickerPropOnError = (props: {
     type: typeof datePickerErrorTypes[0];
     stringValue: string;
     dd?: string;
     MM?: string;
     yyyy?: string;
+    ss?: string;
+    mm?: string;
+    HH?: string;
     date: Date;
 } | {
     type: typeof datePickerErrorTypes[1];
@@ -87,132 +96,21 @@ export declare type DatePickerPropOnError = (props: {
     dd?: string;
     MM?: string;
     yyyy?: string;
+    ss?: string;
+    mm?: string;
+    HH?: string;
 } | {
     type: typeof datePickerErrorTypes[2];
     date: [Date, Date];
 }) => void;
-export declare const isDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
-    type?: "date-range" | undefined;
-    value?: DateRange | null | undefined;
-    onChange?: DatePickerPropOnChange<"date-range"> | undefined;
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    events?: Date[] | undefined;
-    dateTimeView?: "slider" | "classic" | "book" | undefined;
-    locale?: globalThis.Locale | undefined;
-    children?: undefined;
-    onError?: DatePickerPropOnError | undefined;
-    id?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    size?: "xs" | "s" | "m" | "l" | undefined;
-    view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
-    status?: "alert" | "success" | "warning" | undefined;
-    onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    tabIndex?: number | undefined;
-    inputRef?: undefined;
-    ariaLabel?: string | undefined;
-    iconSize?: "xs" | "s" | "m" | undefined;
-    format?: string | undefined;
-    separator?: string | undefined;
-    dropdownForm?: "default" | "round" | "brick" | undefined;
-    width?: undefined;
-    leftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    rightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldInputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    endFieldInputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    startFieldLeftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldRightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    endFieldLeftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    endFieldRightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    endFieldOnFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    startFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    endFieldOnBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    label?: string | undefined;
-    caption?: string | undefined;
-    labelPosition?: "left" | "top" | undefined;
-}, HTMLDivElement>;
-export declare const isNotDateRangeParams: (params: DatePickerProps<DatePickerPropType>) => params is PropsWithHTMLAttributesAndRef<{
-    type?: "date" | undefined;
-    value?: Date | null | undefined;
-    onChange?: DatePickerPropOnChange<"date"> | undefined;
-    minDate?: Date | undefined;
-    maxDate?: Date | undefined;
-    events?: Date[] | undefined;
-    dateTimeView?: "slider" | "classic" | "book" | undefined;
-    locale?: globalThis.Locale | undefined;
-    children?: undefined;
-    onError?: DatePickerPropOnError | undefined;
-    id?: string | undefined;
-    name?: string | undefined;
-    disabled?: boolean | undefined;
-    size?: "xs" | "s" | "m" | "l" | undefined;
-    view?: "default" | "clear" | undefined;
-    form?: "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
-    status?: "alert" | "success" | "warning" | undefined;
-    onFocus?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    onBlur?: ((event: import("react").FocusEvent<HTMLElement>) => void) | undefined;
-    autoFocus?: boolean | undefined;
-    placeholder?: string | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    tabIndex?: number | undefined;
-    inputRef?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    ariaLabel?: string | undefined;
-    iconSize?: "xs" | "s" | "m" | undefined;
-    format?: string | undefined;
-    separator?: string | undefined;
-    dropdownForm?: "default" | "round" | "brick" | undefined;
-    width?: "default" | "full" | undefined;
-    leftSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    rightSide?: string | import("react").FC<PropsWithHTMLAttributesAndRef<{
-        view?: "link" | "alert" | "brand" | "ghost" | "primary" | "secondary" | "success" | "warning" | "disabled" | undefined;
-        size?: "xs" | "s" | "m" | undefined;
-    }, HTMLSpanElement>> | undefined;
-    startFieldInputRef?: undefined;
-    endFieldInputRef?: undefined;
-    startFieldLeftSide?: undefined;
-    startFieldRightSide?: undefined;
-    endFieldLeftSide?: undefined;
-    endFieldRightSide?: undefined;
-    startFieldOnFocus?: undefined;
-    endFieldOnFocus?: undefined;
-    startFieldOnBlur?: undefined;
-    endFieldOnBlur?: undefined;
-    label?: string | undefined;
-    caption?: string | undefined;
-    labelPosition?: "left" | "top" | undefined;
-}, HTMLDivElement>;
 export declare const datePickerPropSeparatorDefault = ".";
-export declare const datePickerPropFormatDefault: string;
-export declare const datePickerPropPlaceholderDefault: string;
+export declare const datePickerPropFormatTypeDate: string;
+export declare const datePickerPropPlaceholderTypeDate: string;
+export declare const datePickerPropFormatTypeDateTime: string;
+export declare const datePickerPropPlaceholderTypeDateTime: string;
 export declare const normalizeRangeValue: (dateRange: DateRange) => DateRange;
+export declare const getMultiplicityTime: (format: string, multiplicityHours: number | undefined, multiplicityMinutes: number | undefined, multiplicitySeconds: number | undefined) => (number | undefined)[];
+export declare const getTimeEnum: (length: number, multiplicity: number | undefined, startOfUnits: (date: Date) => Date, addUnits: (date: Date, amount: number) => Date, getItemLabel: (date: Date) => string) => string[];
+export declare const getFormForStart: (form: TextFieldPropForm) => "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear";
+export declare const getFormForEnd: (form: TextFieldPropForm) => "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear";
 export {};