@consta/uikit 3.23.1 → 3.24.0

package/__internal__/src/components/ChoiceGroupCanary/types.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+export declare type ChoiceGroupDefaultItem = {
+    label: string;
+    icon?: IconComponent;
+    disabled?: boolean;
+};
+export declare const choiceGroupForms: readonly ["default", "brick", "round"];
+export declare type ChoiceGroupPropForm = typeof choiceGroupForms[number];
+export declare const choiceGroupDefaultForm: ChoiceGroupPropForm;
+export declare const choiceGroupSizes: readonly ["xs", "s", "m", "l"];
+export declare type ChoiceGroupPropSize = typeof choiceGroupSizes[number];
+export declare const choiceGroupDefaultSize: ChoiceGroupPropSize;
+export declare const choiceGroupViews: readonly ["primary", "ghost", "secondary"];
+export declare type ChoiceGroupPropView = typeof choiceGroupViews[number];
+export declare const choiceGroupDefaultView: ChoiceGroupPropView;
+export declare const choiceGroupWidth: readonly ["default", "full"];
+export declare type СhoiceGroupPropWidth = typeof choiceGroupWidth[number];
+export declare const choiceGroupWidthDefault: СhoiceGroupPropWidth;
+export declare type ChoiceGroupPropGetItemLabel<ITEM> = (item: ITEM) => string | number;
+export declare type ChoiceGroupPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
+export declare type ChoiceGroupPropGetItemDisabled<ITEM> = (item: ITEM) => boolean | undefined;
+export declare type ChoiceGroupPropValue<ITEM, MULTIPLE extends boolean> = (MULTIPLE extends true ? ITEM[] : ITEM) | null;
+export declare type ChoiceGroupPropOnChange<ITEM, MULTIPLE extends boolean> = (props: {
+    e: React.ChangeEvent<HTMLInputElement>;
+    value: MULTIPLE extends true ? ITEM[] | null : ITEM;
+}) => void;
+export declare type ChoiceGroupProps<ITEM = ChoiceGroupDefaultItem, MULTIPLE extends boolean = false> = PropsWithHTMLAttributesAndRef<{
+    size?: ChoiceGroupPropSize;
+    form?: ChoiceGroupPropForm;
+    view?: ChoiceGroupPropView;
+    width?: СhoiceGroupPropWidth;
+    onlyIcon?: boolean;
+    iconSize?: IconPropSize;
+    items: ITEM[];
+    getItemLabel?: ChoiceGroupPropGetItemLabel<ITEM>;
+    getItemIcon?: ChoiceGroupPropGetItemIcon<ITEM>;
+    name: string;
+    disabled?: boolean;
+    getItemDisabled?: ChoiceGroupPropGetItemDisabled<ITEM>;
+    value?: ChoiceGroupPropValue<ITEM, MULTIPLE>;
+    onChange?: ChoiceGroupPropOnChange<ITEM, MULTIPLE>;
+    multiple?: MULTIPLE;
+    truncate?: boolean;
+    children?: never;
+}, HTMLDivElement> & (ITEM extends {
+    label: ChoiceGroupDefaultItem['label'];
+} ? {} : {
+    getItemLabel: ChoiceGroupPropGetItemLabel<ITEM>;
+});
+export declare type ChoiceGroupItemProps = {
+    icon?: IconComponent;
+    onlyIcon?: boolean;
+    iconSize?: IconPropSize;
+    label: string;
+    name: string;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    checked: boolean;
+    multiple: boolean;
+    disabled?: boolean;
+};
+export declare type ChoiceGroupComponent = <ITEM, MULTIPLE extends boolean = false>(props: ChoiceGroupProps<ITEM, MULTIPLE>) => React.ReactElement | null;

package/__internal__/src/components/ChoiceGroupCanary/types.js

@@ -0,0 +1,8 @@
+export var choiceGroupForms = ['default', 'brick', 'round'];
+export var choiceGroupDefaultForm = 'default';
+export var choiceGroupSizes = ['xs', 's', 'm', 'l'];
+export var choiceGroupDefaultSize = 'm';
+export var choiceGroupViews = ['primary', 'ghost', 'secondary'];
+export var choiceGroupDefaultView = 'primary';
+export var choiceGroupWidth = ['default', 'full'];
+export var choiceGroupWidthDefault = choiceGroupWidth[0];

package/__internal__/src/components/DatePickerCanary/DatePickerAdditionalControls/DatePickerAdditionalControls.css

@@ -0,0 +1,36 @@
+.DatePickerAdditionalControls {
+  --date-picker-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
+  padding-top: var(--space-l);
+}
+
+  .DatePickerAdditionalControls_type_date.DatePickerAdditionalControls_view_classic,
+  .DatePickerAdditionalControls_type_year.DatePickerAdditionalControls_view_classic,
+  .DatePickerAdditionalControls_type_month.DatePickerAdditionalControls_view_classic {
+    width: calc(var(--date-picker-cell-width) * 7);
+  }
+
+  .DatePickerAdditionalControls_type_date.DatePickerAdditionalControls_view_book,
+  .DatePickerAdditionalControls_type_year.DatePickerAdditionalControls_view_book,
+  .DatePickerAdditionalControls_type_month.DatePickerAdditionalControls_view_book,
+  .DatePickerAdditionalControls_type_date.DatePickerAdditionalControls_view_slider,
+  .DatePickerAdditionalControls_type_year.DatePickerAdditionalControls_view_slider,
+  .DatePickerAdditionalControls_type_month.DatePickerAdditionalControls_view_slider {
+    width: calc(var(--date-picker-cell-width) * 14 + var(--space-m));
+  }
+
+  .DatePickerAdditionalControls_type_time {
+    width: calc(var(--date-picker-cell-width) * 3);
+  }
+
+  .DatePickerAdditionalControls_type_date-time {
+    width: calc(var(--date-picker-cell-width) * 10 + var(--space-s) * 2);
+  }
+
+  .DatePickerAdditionalControls_contentType_array {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      gap: var(--space-s);
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+    }

package/__internal__/src/components/DatePickerCanary/DatePickerAdditionalControls/DatePickerAdditionalControls.d.ts

@@ -0,0 +1,12 @@
+import './DatePickerAdditionalControls.css';
+import React from 'react';
+import { PropsWithHTMLAttributes } from '../../../utils/types/PropsWithHTMLAttributes';
+import { DatePickerAdditionalControlRenderProp, DatePickerPropDateTimeView, DatePickerPropType } from '../types';
+declare type Props = PropsWithHTMLAttributes<{
+    renderAdditionalControls?: DatePickerAdditionalControlRenderProp;
+    currentVisibleDate?: Date;
+    type: DatePickerPropType;
+    view: DatePickerPropDateTimeView;
+}, HTMLDivElement>;
+export declare const DatePickerAdditionalControls: React.FC<Props>;
+export {};

package/__internal__/src/components/DatePickerCanary/DatePickerAdditionalControls/DatePickerAdditionalControls.js

@@ -0,0 +1,18 @@
+import { __assign, __rest } from "tslib";
+import './DatePickerAdditionalControls.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+function isRenderFn(fn) {
+    return fn.call !== undefined;
+}
+var cnDatePickerAdditionalControls = cn('DatePickerAdditionalControls');
+export var DatePickerAdditionalControls = function (props) {
+    var renderAdditionalControls = props.renderAdditionalControls, currentVisibleDate = props.currentVisibleDate, className = props.className, type = props.type, view = props.view, otherProps = __rest(props, ["renderAdditionalControls", "currentVisibleDate", "className", "type", "view"]);
+    if (typeof renderAdditionalControls !== 'undefined') {
+        var content = isRenderFn(renderAdditionalControls)
+            ? renderAdditionalControls({ currentVisibleDate: currentVisibleDate })
+            : renderAdditionalControls;
+        return (React.createElement("div", __assign({}, otherProps, { className: cnDatePickerAdditionalControls({ type: type, view: view, contentType: Array.isArray(content) && 'array' }, [className]) }), content));
+    }
+    return null;
+};

package/__internal__/src/components/DatePickerCanary/DatePickerDropdown/DatePickerDropdown.d.ts

@@ -2,26 +2,26 @@ import './DatePickerDropdown.css';
 import React from 'react';
 import { DateRange } from '../../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../../utils/types/PropsWithHTMLAttributes';
-import { DateTimeAdditionalControlRenderProp, DateTimePropOnChange, DateTimePropType } from '../../DateTimeCanary/DateTimeCanary';
-import { DatePickerPropDateTimeView, DatePickerPropDropdownForm } from '../types';
+import { DateTimePropOnChange, DateTimePropType } from '../../DateTimeCanary/DateTimeCanary';
+import { DatePickerAdditionalControlRenderProp, DatePickerPropDateTimeView, DatePickerPropDropdownForm } from '../types';
 export declare type DatePickerDropdownPropOnChange = DateTimePropOnChange;
 export declare type DatePickerDropdownProps = PropsWithHTMLAttributesAndRef<{
     anchorRef: React.RefObject<HTMLElement>;
     currentVisibleDate?: Date;
-    type?: DateTimePropType;
+    type: DateTimePropType;
     value?: Date | DateRange;
     onChange?: DatePickerDropdownPropOnChange;
     minDate?: Date;
     maxDate?: Date;
     events?: Date[];
-    view?: DatePickerPropDateTimeView;
+    view: DatePickerPropDateTimeView;
     locale?: Locale;
     children?: never;
     form?: DatePickerPropDropdownForm;
     isOpen?: boolean;
     onChangeCurrentVisibleDate?: (date: Date) => void;
     zIndex?: number;
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    renderAdditionalControls?: DatePickerAdditionalControlRenderProp;
     multiplicitySeconds?: number;
     multiplicityMinutes?: number;
     multiplicityHours?: number;

package/__internal__/src/components/DatePickerCanary/DatePickerDropdown/DatePickerDropdown.js

@@ -1,24 +1,40 @@
 import { __assign, __read, __rest } from "tslib";
 import './DatePickerDropdown.css';
-import React, { forwardRef, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import { Transition } from 'react-transition-group';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { animateTimeout, cnMixPopoverAnimate, } from '../../../mixs/MixPopoverAnimate/MixPopoverAnimate';
 import { cn } from '../../../utils/bem';
 import { DateTime, } from '../../DateTimeCanary/DateTimeCanary';
 import { Popover } from '../../Popover/Popover';
+import { DatePickerAdditionalControls } from '../DatePickerAdditionalControls/DatePickerAdditionalControls';
 import { datePickerPropDropdownFormDefault, } from '../types';
+var moveMap = {
+    'year': 'year',
+    'month': 'month',
+    'date': 'day',
+    'time': 'time',
+    'date-time': 'day'
+};
 var cnDatePickerDropdown = cn('DatePickerDropdown');
 export var DatePickerDropdown = forwardRef(function (props, componentRef) {
-    var _a = props.form, form = _a === void 0 ? datePickerPropDropdownFormDefault : _a, anchorRef = props.anchorRef, isOpen = props.isOpen, className = props.className, zIndex = props.zIndex, otherProps = __rest(props, ["form", "anchorRef", "isOpen", "className", "zIndex"]);
+    var _a = props.form, form = _a === void 0 ? datePickerPropDropdownFormDefault : _a, anchorRef = props.anchorRef, isOpen = props.isOpen, className = props.className, zIndex = props.zIndex, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["form", "anchorRef", "isOpen", "className", "zIndex", "renderAdditionalControls"]);
     var rootRef = useRef(null);
     var _b = __read(useState(), 2), direction = _b[0], setDirection = _b[1];
+    var _c = __read(useFlag(true), 2), visibleAdditionalControls = _c[0], setVisibleAdditionalControls = _c[1];
+    var onMove = useCallback(function (to) {
+        to === moveMap[props.type]
+            ? setVisibleAdditionalControls.on()
+            : setVisibleAdditionalControls.off();
+    }, [props.type]);
     var ref = useForkRef([componentRef, rootRef]);
     return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, timeout: animateTimeout, nodeRef: rootRef }, function (animate) {
         return (React.createElement(Popover, { ref: ref, anchorRef: anchorRef, className: cnDatePickerDropdown({ form: form }, [
                 className,
                 cnMixPopoverAnimate({ direction: direction, animate: animate }),
             ]), direction: "downStartLeft", spareDirection: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], style: { zIndex: zIndex }, role: "listbox", onSetDirection: setDirection },
-            React.createElement(DateTime, __assign({}, otherProps))));
+            React.createElement(DateTime, __assign({}, otherProps, { onMove: onMove })),
+            visibleAdditionalControls && (React.createElement(DatePickerAdditionalControls, { currentVisibleDate: props.currentVisibleDate, renderAdditionalControls: renderAdditionalControls, type: props.type, view: props.view }))));
     }));
 });

package/__internal__/src/components/DatePickerCanary/DatePickerTypeDate/DatePickerTypeDate.js

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 import addMonths from 'date-fns/addMonths';
 import startOfMonth from 'date-fns/startOfMonth';
 import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
@@ -7,14 +7,23 @@ import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { setRef } from '../../../utils/setRef';
 import { DatePickerDropdown } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDate } from '../DatePickerFieldTypeDate/DatePickerFieldTypeDate';
+import { getDropdownZIndex } from '../helpers';
+import { datePickerPropDateTimeViewDefault } from '../types';
 import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 export var DatePickerTypeDate = 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, renderAdditionalControls = props.renderAdditionalControls, style = props.style, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "style"]);
+    var events = props.events, _a = props.dateTimeView, dateTimeView = _a === void 0 ? datePickerPropDateTimeViewDefault : _a, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var fieldRef = useRef(null);
     var calendarRef = useRef(null);
-    var _a = __read(useFlag(false), 2), calendarVisible = _a[0], setCalendarVisible = _a[1];
-    var _b = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _b[0], setCurrentVisibleDate = _b[1];
-    var _c = __read(useState(), 2), calendarVisibleDate = _c[0], setCalendarVisibleDate = _c[1];
+    var _b = __read(useFlag(false), 2), calendarVisible = _b[0], setCalendarVisible = _b[1];
+    var _c = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        value: props.value,
+        startOfUnit: startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate,
+        calendarVisible: calendarVisible
+    }), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
     var onFocusHandler = function (e) {
         onFocus && onFocus(e);
         setCalendarVisible.on();
@@ -25,35 +34,31 @@ export var DatePickerTypeDate = forwardRef(function (props, ref) {
         }
     }, [ref, fieldRef]);
     useEffect(function () {
-        if (props.value && props.dateTimeView === 'classic' && calendarVisibleDate) {
+        if (props.value && dateTimeView === 'classic' && currentVisibleDate) {
             var newVisibleDate = startOfMonth(props.value);
-            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime()) {
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
                 setCurrentVisibleDate(newVisibleDate);
             }
             return;
         }
-        if (props.value && props.dateTimeView !== 'classic' && calendarVisibleDate) {
+        if (props.value && dateTimeView !== 'classic' && currentVisibleDate) {
             var newVisibleDate = startOfMonth(props.value);
-            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== addMonths(calendarVisibleDate, 1).getTime()) {
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== addMonths(currentVisibleDate, 1).getTime()) {
                 setCurrentVisibleDate(newVisibleDate);
             }
         }
     }, [props.value]);
-    var handleClose = function () {
-        setCalendarVisible.off();
-        setCurrentVisibleDate(props.value ? undefined : currentVisibleDateProp);
-    };
     useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [fieldRef, calendarRef],
-        handler: handleClose
+        handler: setCalendarVisible.off
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerFieldTypeDate, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, style: style })),
+        React.createElement(DatePickerFieldTypeDate, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler })),
         React.createElement(DatePickerDropdown, { ref: calendarRef, anchorRef: fieldRef, isOpen: calendarVisible, value: props.value || undefined, type: "date", view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, currentVisibleDate: currentVisibleDate, form: dropdownForm, onChange: function (params) {
                 var _a;
                 (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, params);
-                handleClose();
-            }, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined, onChangeCurrentVisibleDate: setCalendarVisibleDate })));
+                setCalendarVisible.off();
+            }, renderAdditionalControls: renderAdditionalControls, zIndex: getDropdownZIndex(props.style), onChangeCurrentVisibleDate: setCurrentVisibleDate })));
 });

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

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import addMonths from 'date-fns/addMonths';
 import startOfMonth from 'date-fns/startOfMonth';
 import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
@@ -7,17 +7,18 @@ import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDateRange } from '../DatePickerFieldTypeDateRange/DatePickerFieldTypeDateRange';
-import { getFieldName, normalizeRangeValue } from '../helpers';
+import { getDropdownZIndex, getFieldName, normalizeRangeValue } from '../helpers';
+import { datePickerPropDateTimeViewDefault } from '../types';
 import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
     var _a, _b, _c, _d;
-    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, inputRef = props.inputRef, name = props.name, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name"]);
+    var events = props.events, _e = props.dateTimeView, dateTimeView = _e === void 0 ? datePickerPropDateTimeViewDefault : _e, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, inputRef = props.inputRef, name = props.name, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name"]);
     var startFieldRef = useRef(null);
     var endFieldRef = useRef(null);
     var startFieldInputRef = useRef(null);
     var endFieldInputRef = useRef(null);
     var calendarRef = useRef(null);
-    var _e = __read(useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var _f = __read(useState(false), 2), fieldFocused = _f[0], setFieldFocused = _f[1];
     var startFocused = fieldFocused === 'start';
     var endFocused = fieldFocused === 'end';
     var hadleChange = function (_a) {
@@ -30,8 +31,16 @@ export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
             (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
         }
     };
-    var _f = __read(useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
-    var _g = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var _g = __read(useFlag(false), 2), calendarVisible = _g[0], setCalendarVisible = _g[1];
+    var _h = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        value: props.value,
+        startOfUnit: startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate,
+        calendarVisible: calendarVisible
+    }), 2), currentVisibleDate = _h[0], setCurrentVisibleDate = _h[1];
     var startFieldOnBlurHandler = function (e) { var _a; return Array.isArray(onBlur) ? (_a = onBlur[0]) === null || _a === void 0 ? void 0 : _a.call(onBlur, e) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); };
     var endFieldOnBlurHandler = function (e) { var _a; return Array.isArray(onBlur) ? (_a = onBlur[1]) === null || _a === void 0 ? void 0 : _a.call(onBlur, e) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); };
     var startFieldOnFocusHandler = function (e) {
@@ -48,58 +57,50 @@ export var DatePickerTypeDateRange = forwardRef(function (props, ref) {
     };
     // эфект для того чтобы календарь переключался при вводе с клавиатуры
     useEffect(function () {
-        var _a, _b, _c;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && props.dateTimeView === 'classic' && startFocused) {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && dateTimeView === 'classic' && startFocused) {
             var newVisibleDate = startOfMonth(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]) && props.dateTimeView !== 'classic' && startFocused) {
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && dateTimeView !== 'classic' && startFocused) {
             var newVisibleDate = startOfMonth(props.value[0]);
             if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
                 newVisibleDate.getTime() !==
                     (currentVisibleDate && addMonths(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, startFocused]);
     useEffect(function () {
-        var _a, _b, _c;
-        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && props.dateTimeView === 'classic' && endFocused) {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && dateTimeView === 'classic' && endFocused) {
             var newVisibleDate = startOfMonth(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]) && props.dateTimeView !== 'classic' && endFocused) {
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && dateTimeView !== 'classic' && endFocused) {
             var newVisibleDate = startOfMonth(props.value[1]);
             if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
                 newVisibleDate.getTime() !==
                     (currentVisibleDate && addMonths(currentVisibleDate, 1).getTime())) {
                 setCurrentVisibleDate(addMonths(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, endFocused]);
     useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
-        handler: function () {
+        handler: useCallback(function () {
             setFieldFocused(false);
             setCalendarVisible.off();
-        }
+        }, [])
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerFieldTypeDateRange, __assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef([endFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[0] : leftSide, startFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[0] : undefined, endFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[1] : undefined, endFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[1] : rightSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused, startFieldName: getFieldName(name, 0), endFieldName: getFieldName(name, 1) })),
-        React.createElement(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 })));
+        React.createElement(DatePickerFieldTypeDateRange, __assign({}, fieldProps, { ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef([endFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[0] : leftSide, startFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[0] : undefined, endFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[1] : undefined, endFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[1] : rightSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused, startFieldName: getFieldName(name, 0), endFieldName: getFieldName(name, 1) })),
+        React.createElement(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: getDropdownZIndex(props.style) })));
 });

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

@@ -1,5 +1,5 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef } from 'react';
 import addMonths from 'date-fns/addMonths';
 import startOfMonth from 'date-fns/startOfMonth';
 import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
@@ -7,16 +7,24 @@ import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { setRef } from '../../../utils/setRef';
 import { DatePickerDropdown } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDateTime } from '../DatePickerFieldTypeDateTime/DatePickerFieldTypeDateTime';
-import { datePickerPropFormatTypeDateTime, getMultiplicityTime } from '../helpers';
+import { datePickerPropFormatTypeDateTime, getDropdownZIndex, getMultiplicityTime, } from '../helpers';
+import { datePickerPropDateTimeViewDefault } from '../types';
 import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 export var DatePickerTypeDateTime = 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, style = props.style, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "renderAdditionalControls", "style"]);
-    var _a = __read(getMultiplicityTime(otherProps.format || datePickerPropFormatTypeDateTime, multiplicityHoursProp, multiplicityMinutesProp, multiplicitySecondsProp), 3), multiplicityHours = _a[0], multiplicityMinutes = _a[1], multiplicitySeconds = _a[2];
+    var events = props.events, _a = props.dateTimeView, dateTimeView = _a === void 0 ? datePickerPropDateTimeViewDefault : _a, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicityHoursProp = props.multiplicityHours, multiplicityMinutesProp = props.multiplicityMinutes, multiplicitySecondsProp = props.multiplicitySeconds, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "renderAdditionalControls"]);
+    var _b = __read(getMultiplicityTime(otherProps.format || datePickerPropFormatTypeDateTime, multiplicityHoursProp, multiplicityMinutesProp, multiplicitySecondsProp), 3), multiplicityHours = _b[0], multiplicityMinutes = _b[1], multiplicitySeconds = _b[2];
     var fieldRef = useRef(null);
     var calendarRef = useRef(null);
-    var _b = __read(useFlag(false), 2), calendarVisible = _b[0], setCalendarVisible = _b[1];
-    var _c = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
-    var _d = __read(useState(), 2), calendarVisibleDate = _d[0], setCalendarVisibleDate = _d[1];
+    var _c = __read(useFlag(false), 2), calendarVisible = _c[0], setCalendarVisible = _c[1];
+    var _d = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        value: props.value,
+        startOfUnit: startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate,
+        calendarVisible: calendarVisible
+    }), 2), currentVisibleDate = _d[0], setCurrentVisibleDate = _d[1];
     var onFocusHandler = function (e) {
         onFocus && onFocus(e);
         setCalendarVisible.on();
@@ -27,17 +35,17 @@ export var DatePickerTypeDateTime = forwardRef(function (props, ref) {
         }
     }, [ref, fieldRef]);
     useEffect(function () {
-        if (props.value && props.dateTimeView === 'classic' && calendarVisibleDate) {
+        if (props.value && dateTimeView === 'classic' && currentVisibleDate) {
             var newVisibleDate = startOfMonth(props.value);
-            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime()) {
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime()) {
                 setCurrentVisibleDate(newVisibleDate);
             }
             return;
         }
-        if (props.value && props.dateTimeView !== 'classic' && calendarVisibleDate) {
+        if (props.value && dateTimeView !== 'classic' && currentVisibleDate) {
             var newVisibleDate = startOfMonth(props.value);
-            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== addMonths(calendarVisibleDate, 1).getTime()) {
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== addMonths(currentVisibleDate, 1).getTime()) {
                 setCurrentVisibleDate(newVisibleDate);
             }
         }
@@ -45,12 +53,9 @@ export var DatePickerTypeDateTime = forwardRef(function (props, ref) {
     useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [fieldRef, calendarRef],
-        handler: function () {
-            setCalendarVisible.off();
-            setCurrentVisibleDate(props.value ? undefined : currentVisibleDateProp);
-        }
+        handler: setCalendarVisible.off
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerFieldTypeDateTime, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, style: style })),
-        React.createElement(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, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
+        React.createElement(DatePickerFieldTypeDateTime, __assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes })),
+        React.createElement(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: setCurrentVisibleDate, multiplicityHours: multiplicityHours, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, zIndex: getDropdownZIndex(props.style) })));
 });

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

@@ -1,22 +1,23 @@
 import { __assign, __read, __rest } from "tslib";
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import startOfMonth from 'date-fns/startOfMonth';
 import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
 import { DatePickerFieldTypeDateTimeRange } from '../DatePickerFieldTypeDateTimeRange/DatePickerFieldTypeDateTimeRange';
-import { getFieldName, normalizeRangeValue } from '../helpers';
+import { getDropdownZIndex, getFieldName, normalizeRangeValue } from '../helpers';
+import { datePickerPropDateTimeViewDefault } from '../types';
 import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 export var DatePickerTypeDateTimeRange = forwardRef(function (props, ref) {
     var _a, _b, _c, _d;
-    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, inputRef = props.inputRef, name = props.name, multiplicityMinutes = props.multiplicityMinutes, multiplicitySeconds = props.multiplicitySeconds, multiplicityHours = props.multiplicityHours, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name", "multiplicityMinutes", "multiplicitySeconds", "multiplicityHours"]);
+    var events = props.events, _e = props.dateTimeView, dateTimeView = _e === void 0 ? datePickerPropDateTimeViewDefault : _e, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, inputRef = props.inputRef, name = props.name, multiplicityMinutes = props.multiplicityMinutes, multiplicitySeconds = props.multiplicitySeconds, multiplicityHours = props.multiplicityHours, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name", "multiplicityMinutes", "multiplicitySeconds", "multiplicityHours"]);
     var startFieldRef = useRef(null);
     var endFieldRef = useRef(null);
     var startFieldInputRef = useRef(null);
     var endFieldInputRef = useRef(null);
     var calendarRef = useRef(null);
-    var _e = __read(useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var _f = __read(useState(false), 2), fieldFocused = _f[0], setFieldFocused = _f[1];
     var startFocused = fieldFocused === 'start';
     var endFocused = fieldFocused === 'end';
     var hadleChange = function (_a) {
@@ -29,8 +30,16 @@ export var DatePickerTypeDateTimeRange = forwardRef(function (props, ref) {
             (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
         }
     };
-    var _f = __read(useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
-    var _g = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var _g = __read(useFlag(false), 2), calendarVisible = _g[0], setCalendarVisible = _g[1];
+    var _h = __read(useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        value: props.value,
+        startOfUnit: startOfMonth,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate,
+        calendarVisible: calendarVisible
+    }), 2), currentVisibleDate = _h[0], setCurrentVisibleDate = _h[1];
     var startFieldOnBlurHandler = function (e) { var _a; return Array.isArray(onBlur) ? (_a = onBlur[0]) === null || _a === void 0 ? void 0 : _a.call(onBlur, e) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); };
     var endFieldOnBlurHandler = function (e) { var _a; return Array.isArray(onBlur) ? (_a = onBlur[1]) === null || _a === void 0 ? void 0 : _a.call(onBlur, e) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); };
     var startFieldOnFocusHandler = function (e) {
@@ -47,40 +56,32 @@ export var DatePickerTypeDateTimeRange = forwardRef(function (props, ref) {
     };
     // эфект для того чтобы календарь переключался при вводе с клавиатуры
     useEffect(function () {
-        var _a, _b;
+        var _a;
         if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && startFocused) {
             var newVisibleDate = startOfMonth(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]);
     useEffect(function () {
-        var _a, _b;
+        var _a;
         if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && endFocused) {
             var newVisibleDate = startOfMonth(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({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
-        handler: function () {
+        handler: useCallback(function () {
             setFieldFocused(false);
             setCalendarVisible.off();
-        }
+        }, [])
     });
     return (React.createElement(React.Fragment, null,
-        React.createElement(DatePickerFieldTypeDateTimeRange, __assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef([endFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[0] : leftSide, startFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[0] : undefined, endFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[1] : undefined, endFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[1] : rightSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused, startFieldName: getFieldName(name, 0), endFieldName: getFieldName(name, 1) })),
-        React.createElement(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, multiplicityMinutes: multiplicityMinutes, multiplicitySeconds: multiplicitySeconds, multiplicityHours: multiplicityHours, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
+        React.createElement(DatePickerFieldTypeDateTimeRange, __assign({}, fieldProps, { ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef([endFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[0] : leftSide, startFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[0] : undefined, endFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[1] : undefined, endFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[1] : rightSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused, startFieldName: getFieldName(name, 0), endFieldName: getFieldName(name, 1) })),
+        React.createElement(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, multiplicityMinutes: multiplicityMinutes, multiplicitySeconds: multiplicitySeconds, multiplicityHours: multiplicityHours, zIndex: getDropdownZIndex(props.style) })));
 });