@consta/uikit 3.23.1 → 3.24.0

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

@@ -9,14 +9,23 @@ var useFlag_1 = require("../../../hooks/useFlag/useFlag");
 var setRef_1 = require("../../../utils/setRef");
 var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
 var DatePickerFieldTypeYear_1 = require("../DatePickerFieldTypeYear/DatePickerFieldTypeYear");
+var helpers_1 = require("../helpers");
+var types_1 = require("../types");
 var useCurrentVisibleDate_1 = require("../useCurrentVisibleDate");
 exports.DatePickerTypeYear = 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, renderAdditionalControls = props.renderAdditionalControls, style = props.style, otherProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "style"]);
+    var events = props.events, _a = props.dateTimeView, dateTimeView = _a === void 0 ? types_1.datePickerPropDateTimeViewDefault : _a, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var fieldRef = react_1.useRef(null);
     var calendarRef = react_1.useRef(null);
-    var _a = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _a[0], setCalendarVisible = _a[1];
-    var _b = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _b[0], setCurrentVisibleDate = _b[1];
-    var _c = tslib_1.__read(react_1.useState(), 2), calendarVisibleDate = _c[0], setCalendarVisibleDate = _c[1];
+    var _b = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _b[0], setCalendarVisible = _b[1];
+    var _c = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        value: props.value,
+        startOfUnit: date_fns_1.startOfDecade,
+        onChangeCurrentVisibleDate: onChangeCurrentVisibleDate,
+        calendarVisible: calendarVisible
+    }), 2), currentVisibleDate = _c[0], setCurrentVisibleDate = _c[1];
     var onFocusHandler = function (e) {
         onFocus && onFocus(e);
         setCalendarVisible.on();
@@ -27,35 +36,31 @@ exports.DatePickerTypeYear = react_1.forwardRef(function (props, ref) {
         }
     }, [ref, fieldRef]);
     react_1.useEffect(function () {
-        if (props.value && props.dateTimeView === 'classic' && calendarVisibleDate) {
+        if (props.value && dateTimeView === 'classic' && currentVisibleDate) {
             var newVisibleDate = date_fns_1.startOfDecade(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 = date_fns_1.startOfDecade(props.value);
-            if (newVisibleDate.getTime() !== calendarVisibleDate.getTime() &&
-                newVisibleDate.getTime() !== date_fns_1.addYears(calendarVisibleDate, 10).getTime()) {
+            if (newVisibleDate.getTime() !== currentVisibleDate.getTime() &&
+                newVisibleDate.getTime() !== date_fns_1.addYears(currentVisibleDate, 10).getTime()) {
                 setCurrentVisibleDate(newVisibleDate);
             }
         }
     }, [props.value]);
-    var handleClose = function () {
-        setCalendarVisible.off();
-        setCurrentVisibleDate(props.value ? undefined : currentVisibleDateProp);
-    };
     useClickOutside_1.useClickOutside({
         isActive: calendarVisible,
         ignoreClicksInsideRefs: [fieldRef, calendarRef],
-        handler: handleClose
+        handler: setCalendarVisible.off
     });
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(DatePickerFieldTypeYear_1.DatePickerFieldTypeYear, tslib_1.__assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler, style: style })),
+        react_1["default"].createElement(DatePickerFieldTypeYear_1.DatePickerFieldTypeYear, tslib_1.__assign({}, otherProps, { ref: fieldRef, onFocus: onFocusHandler })),
         react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { ref: calendarRef, anchorRef: fieldRef, isOpen: calendarVisible, value: props.value || undefined, type: "year", 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: helpers_1.getDropdownZIndex(props.style), onChangeCurrentVisibleDate: setCurrentVisibleDate })));
 });

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

@@ -10,16 +10,17 @@ var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
 var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
 var DatePickerFieldTypeYearRange_1 = require("../DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange");
 var helpers_1 = require("../helpers");
+var types_1 = require("../types");
 var useCurrentVisibleDate_1 = require("../useCurrentVisibleDate");
 exports.DatePickerTypeYearRange = react_1.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 = tslib_1.__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 ? types_1.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 = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name"]);
     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 _f = tslib_1.__read(react_1.useState(false), 2), fieldFocused = _f[0], setFieldFocused = _f[1];
     var startFocused = fieldFocused === 'start';
     var endFocused = fieldFocused === 'end';
     var hadleChange = function (_a) {
@@ -32,8 +33,16 @@ exports.DatePickerTypeYearRange = react_1.forwardRef(function (props, ref) {
             (_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 _g = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _g[0], setCalendarVisible = _g[1];
+    var _h = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate({
+        currentVisibleDate: currentVisibleDateProp,
+        maxDate: props.maxDate,
+        minDate: props.minDate,
+        value: props.value,
+        startOfUnit: date_fns_1.startOfDecade,
+        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) {
@@ -50,47 +59,39 @@ exports.DatePickerTypeYearRange = react_1.forwardRef(function (props, ref) {
     };
     // эфект для того чтобы календарь переключался при вводе с клавиатуры
     react_1.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 = date_fns_1.startOfDecade(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 = date_fns_1.startOfDecade(props.value[0]);
             if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
                 newVisibleDate.getTime() !==
                     (currentVisibleDate && date_fns_1.addYears(currentVisibleDate, 10).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]);
     react_1.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 = date_fns_1.startOfDecade(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 = date_fns_1.startOfDecade(props.value[1]);
             if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
                 newVisibleDate.getTime() !==
                     (currentVisibleDate && date_fns_1.addYears(currentVisibleDate, 10).getTime())) {
                 setCurrentVisibleDate(date_fns_1.addYears(newVisibleDate, -10));
             }
-            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_1.useClickOutside({
@@ -102,6 +103,6 @@ exports.DatePickerTypeYearRange = react_1.forwardRef(function (props, ref) {
         }
     });
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
-        react_1["default"].createElement(DatePickerFieldTypeYearRange_1.DatePickerFieldTypeYearRange, tslib_1.__assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef_1.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: Array.isArray(name) ? name[0] : name + "_start", endFieldName: Array.isArray(name) ? name[1] : name + "_end" })),
-        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { type: "year", 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_1["default"].createElement(DatePickerFieldTypeYearRange_1.DatePickerFieldTypeYearRange, tslib_1.__assign({}, fieldProps, { ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef_1.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: Array.isArray(name) ? name[0] : name + "_start", endFieldName: Array.isArray(name) ? name[1] : name + "_end" })),
+        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { type: "year", 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: helpers_1.getDropdownZIndex(props.style) })));
 });

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateRange } from '../../utils/types/Date';
 import { TextFieldPropForm } from '../TextField/TextField';
 import { DatePickerPropType } from './types';
@@ -21,3 +22,4 @@ export declare const getParts: (format: string, separator: string, withTime?: bo
 export declare const getPartsDate: (value: string, format: string, separator: string, withTime: boolean, markers: string[]) => (string | undefined)[];
 export declare const isTypeWithTime: (type: DatePickerPropType) => boolean;
 export declare const getFieldName: (name: [string?, string?] | string | undefined, rangeIndex: 0 | 1) => string | undefined;
+export declare const getDropdownZIndex: (style?: import("react").CSSProperties | undefined) => number | undefined;

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

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.getFieldName = exports.isTypeWithTime = exports.getPartsDate = exports.getParts = exports.getFormForEnd = exports.getFormForStart = exports.getTimeEnum = exports.getMultiplicityTime = exports.normalizeRangeValue = exports.datePickerPropPlaceholderTypeMonth = exports.datePickerPropFormatTypeMonth = exports.datePickerPropPlaceholderTypeYear = exports.datePickerPropFormatTypeYear = exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropFormatTypeDateTime = exports.datePickerPropPlaceholderTypeTime = exports.datePickerPropFormatTypeTime = exports.datePickerPropPlaceholderTypeDate = exports.datePickerPropFormatTypeDate = exports.datePickerPropSeparatorDefault = void 0;
+exports.getDropdownZIndex = exports.getFieldName = exports.isTypeWithTime = exports.getPartsDate = exports.getParts = exports.getFormForEnd = exports.getFormForStart = exports.getTimeEnum = exports.getMultiplicityTime = exports.normalizeRangeValue = exports.datePickerPropPlaceholderTypeMonth = exports.datePickerPropFormatTypeMonth = exports.datePickerPropPlaceholderTypeYear = exports.datePickerPropFormatTypeYear = exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropFormatTypeDateTime = exports.datePickerPropPlaceholderTypeTime = exports.datePickerPropFormatTypeTime = exports.datePickerPropPlaceholderTypeDate = exports.datePickerPropFormatTypeDate = exports.datePickerPropSeparatorDefault = void 0;
 var tslib_1 = require("tslib");
 var date_fns_1 = require("date-fns");
 var array_1 = require("../../utils/array");
@@ -109,3 +109,6 @@ exports.getFieldName = function (name, rangeIndex) {
     }
     return name + "_" + fieldPrefixs[rangeIndex];
 };
+exports.getDropdownZIndex = function (style) {
+    return typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined;
+};

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

@@ -3,12 +3,13 @@ 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 { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
+import { DateTimePropView } from '../DateTimeCanary/helpers';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
 export declare const datePickerPropType: readonly ["date", "date-range", "date-time", "date-time-range", "time", "year", "year-range", "month", "month-range"];
 export declare type DatePickerPropType = typeof datePickerPropType[number];
 export declare const datePickerPropTypeDefault: "date";
 export declare type DatePickerPropDateTimeView = DateTimePropView;
+export declare const datePickerPropDateTimeViewDefault: "classic";
 declare type Range = 'date-range' | 'date-time-range' | 'year-range' | 'month-range';
 export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
 export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends Range ? DateRange : Date) | null;
@@ -24,13 +25,17 @@ declare type DatePickerPropInputRef<TYPE> = TYPE extends Range ? [React.Ref<HTML
 declare type DatePickerPropSide<TYPE> = TYPE extends Range ? [(string | IconComponent)?, (string | IconComponent)?] | string | IconComponent : string | IconComponent;
 declare type DatePickerPropOnFocus<TYPE> = TYPE extends Range ? [React.FocusEventHandler<HTMLElement>?, React.FocusEventHandler<HTMLElement>?] | React.FocusEventHandler<HTMLElement> : React.FocusEventHandler<HTMLElement>;
 declare type DatePickerPropName<TYPE> = TYPE extends Range ? [string?, string?] | string : string;
+export declare type DatePickerAdditionalControlRenderFn = (props: {
+    currentVisibleDate?: Date;
+}) => React.ReactNode | React.ReactNode[];
+export declare type DatePickerAdditionalControlRenderProp = React.ReactNode | DatePickerAdditionalControlRenderFn;
 export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     type?: TYPE;
     value?: DatePickerPropValue<TYPE>;
     onChange?: DatePickerPropOnChange<TYPE>;
     minDate?: Date;
     maxDate?: Date;
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    renderAdditionalControls?: DatePickerAdditionalControlRenderProp;
     events?: Date[];
     dateTimeView?: DatePickerPropDateTimeView;
     locale?: Locale;
@@ -67,6 +72,7 @@ export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> =
     multiplicitySeconds?: number;
     multiplicityMinutes?: number;
     multiplicityHours?: number;
+    isMobile?: number;
 }, HTMLDivElement>;
 export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
 export declare type DatePickerTypeComponent<TYPE extends DatePickerPropType> = (props: Omit<DatePickerProps<TYPE>, 'type'>) => React.ReactElement | null;

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

@@ -1,6 +1,7 @@
 "use strict";
 exports.__esModule = true;
-exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
+exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropDateTimeViewDefault = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
+var helpers_1 = require("../DateTimeCanary/helpers");
 exports.datePickerPropType = [
     'date',
     'date-range',
@@ -13,6 +14,7 @@ exports.datePickerPropType = [
     'month-range',
 ];
 exports.datePickerPropTypeDefault = exports.datePickerPropType[0];
+exports.datePickerPropDateTimeViewDefault = helpers_1.dateTimePropViewDefault;
 exports.datePickerErrorTypes = [
     'outOfRange',
     'invalidInputAttempt',

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

@@ -1,2 +1,5 @@
-import React from 'react';
-export declare const useCurrentVisibleDate: (date?: Date | undefined, onChange?: ((date: Date) => void) | undefined) => [Date | undefined, React.Dispatch<React.SetStateAction<Date | undefined>>];
+/// <reference types="react" />
+import { UseCurrentVisibleDateProps } from '../DateTimeCanary/helpers/useCurrentVisibleDate';
+export declare const useCurrentVisibleDate: (props: UseCurrentVisibleDateProps & {
+    calendarVisible: boolean;
+}) => [Date, import("react").Dispatch<import("react").SetStateAction<Date>>];

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

@@ -2,10 +2,13 @@
 exports.__esModule = true;
 exports.useCurrentVisibleDate = void 0;
 var react_1 = require("react");
-exports.useCurrentVisibleDate = function (date, onChange) {
-    var _a;
-    var state = react_1.useState(date);
-    react_1.useEffect(function () { return state[1](date); }, [date === null || date === void 0 ? void 0 : date.getTime()]);
-    react_1.useEffect(function () { return state[0] && (onChange === null || onChange === void 0 ? void 0 : onChange(state[0])); }, [(_a = state[0]) === null || _a === void 0 ? void 0 : _a.getTime()]);
+var useCurrentVisibleDate_1 = require("../DateTimeCanary/helpers/useCurrentVisibleDate");
+exports.useCurrentVisibleDate = function (props) {
+    var state = useCurrentVisibleDate_1.useCurrentVisibleDate(props);
+    react_1.useEffect(function () {
+        if (props.calendarVisible) {
+            state[1](useCurrentVisibleDate_1.getCurrentVisibleDate(props));
+        }
+    }, [props.calendarVisible]);
     return state;
 };

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeSlider/DateTimeSlider.css

@@ -83,7 +83,7 @@
 
 /* исправляет разрыв между полосками */
 
-.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected {
+.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected::before {
         left: calc(var(--value-offset) - 1px);
         width: calc(var(--value-width) + 1px);
       }

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeDate/DateTimeTypeDate.js

@@ -6,7 +6,6 @@ var react_1 = tslib_1.__importStar(require("react"));
 var date_fns_1 = require("date-fns");
 var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
 var useFlag_1 = require("../../../hooks/useFlag/useFlag");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeMonth_1 = require("../DateTimeMonth/DateTimeMonth");
 var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
@@ -16,24 +15,24 @@ var helpers_1 = require("../helpers");
 var types_1 = require("../helpers/types");
 var mixs_1 = require("../mixs");
 exports.DateTimeTypeDate = react_1.forwardRef(function (props, ref) {
-    var className = props.className, minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
-    var _c = tslib_1.__read(useFlag_1.useFlag(), 2), changeMonth = _c[0], _d = _c[1], on = _d.on, off = _d.off;
+    var className = props.className, minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    var _c = tslib_1.__read(useFlag_1.useFlag(), 2), changeMonth = _c[0], setChangeMonth = _c[1];
     react_1.useEffect(function () {
         !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[2]));
     }, [changeMonth]);
-    var _e = tslib_1.__read(helpers_1.useCurrentVisibleDate({
+    var _d = tslib_1.__read(helpers_1.useCurrentVisibleDate({
         currentVisibleDate: currentVisibleDateProp,
         maxDate: maxDate,
         minDate: minDate,
         value: value,
         startOfUnit: date_fns_1.startOfMonth,
         onChangeCurrentVisibleDate: onChangeCurrentVisibleDate
-    }), 2), currentVisibleDate = _e[0], setCurrentVisibleDate = _e[1];
+    }), 2), currentVisibleDate = _d[0], setCurrentVisibleDate = _d[1];
     if (changeMonth) {
         return (react_1["default"].createElement(DateTimeTypeMonth_1.DateTimeTypeMonth, tslib_1.__assign({}, otherProps, { ref: ref, className: className, minDate: minDate, maxDate: maxDate, locale: locale, events: events, currentVisibleDate: currentVisibleDate, view: view, onChange: function (_a) {
                 var value = _a.value;
                 setCurrentVisibleDate(value);
-                off();
+                setChangeMonth.off();
             }, onMove: onMove })));
     }
     var handleSelectDate = helpers_1.getHandleSelectDate({
@@ -59,9 +58,8 @@ exports.DateTimeTypeDate = react_1.forwardRef(function (props, ref) {
     var prevMonthHandle = function () { return setCurrentVisibleDate(date_fns_1.addMonths(currentVisibleDate, -1)); };
     if (view === types_1.dateTimePropView[0]) {
         return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]) }),
-            react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: on }),
-            react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth }),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
+            react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: setChangeMonth.on }),
+            react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addMonths(currentVisibleDate, 1);
     var pageTwoDaysOfMonth = helpers_1.getDaysOfMonth({
@@ -78,21 +76,19 @@ exports.DateTimeTypeDate = react_1.forwardRef(function (props, ref) {
         return (react_1["default"].createElement(react_1["default"].Fragment, null,
             react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]) }),
                 react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
+                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: setChangeMonth.on }),
                     react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
                 react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
-                    react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
+                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: setChangeMonth.on }),
+                    react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
     }
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { ref: ref, className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]) }),
         react_1["default"].createElement(DateTimeYearSlider_1.DateTimeYearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
         react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('PageWrapper') },
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: on, cursor: "pointer" }),
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageOneLabel, onClick: setChangeMonth.on, cursor: "pointer" }),
                 react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
+                react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: setChangeMonth.on, cursor: "pointer" }),
+                react_1["default"].createElement(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeDateTime/DateTimeTypeDateTime.js

@@ -6,14 +6,13 @@ require("./DateTimeTypeDateTime.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
 var bem_1 = require("../../../utils/bem");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeTypeDate_1 = require("../DateTimeTypeDate/DateTimeTypeDate");
 var DateTimeTypeTime_1 = require("../DateTimeTypeTime/DateTimeTypeTime");
 var helpers_1 = require("../helpers");
 var useOnChange_1 = require("./useOnChange");
 var cnDateTimeTypeDateTime = bem_1.cn('DateTimeTypeDateTime');
 exports.DateTimeTypeDateTime = react_1.forwardRef(function (props, ref) {
-    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, renderAdditionalControls = props.renderAdditionalControls, _a = props.timeFor, timeFor = _a === void 0 ? 'start' : _a, otherProps = tslib_1.__rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "onChangeRange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls", "timeFor"]);
+    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, _a = props.timeFor, timeFor = _a === void 0 ? 'start' : _a, otherProps = tslib_1.__rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "onChangeRange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "timeFor"]);
     var _b = tslib_1.__read(react_1.useState(helpers_1.moveTypes[2]), 2), moveType = _b[0], setMoveType = _b[1];
     var _c = tslib_1.__read(react_1.useState({
         '--root-padding-left': '0px'
@@ -34,7 +33,6 @@ exports.DateTimeTypeDateTime = react_1.forwardRef(function (props, ref) {
     }, []);
     return (react_1["default"].createElement(react_1["default"].Fragment, null,
         react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef_1.useForkRef([rootRef, ref]), style: tslib_1.__assign(tslib_1.__assign({}, style), cssVars) }),
-            react_1["default"].createElement(DateTimeTypeDate_1.DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, onChangeRange: onDateChangeRange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
-            withTime && (react_1["default"].createElement(DateTimeTypeTime_1.DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: valueTime, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: withTime ? renderAdditionalControls : undefined })));
+            react_1["default"].createElement(DateTimeTypeDate_1.DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, onChangeRange: onDateChangeRange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
+            withTime && (react_1["default"].createElement(DateTimeTypeTime_1.DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: valueTime, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours })))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeMonth/DateTimeTypeMonth.js

@@ -8,7 +8,6 @@ var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
 var useFlag_1 = require("../../../hooks/useFlag/useFlag");
 var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
 var DateTime10YearSlider_1 = require("../DateTime10YearSlider/DateTime10YearSlider");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
 var DateTimeTypeYear_1 = require("../DateTimeTypeYear/DateTimeTypeYear");
@@ -17,7 +16,7 @@ var helpers_1 = require("../helpers");
 var types_1 = require("../helpers/types");
 var mixs_1 = require("../mixs");
 exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
-    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
     var _c = tslib_1.__read(useFlag_1.useFlag(), 2), changeYear = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     react_1.useEffect(function () {
         !changeYear && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[1]));
@@ -60,8 +59,7 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
     if (view === types_1.dateTimePropView[0]) {
         return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel, onLabelClick: on }),
-            react_1["default"].createElement(DateTimeYear_1.DateTimeYear, { years: pageOneMonthsOfYear }),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+            react_1["default"].createElement(DateTimeYear_1.DateTimeYear, { years: pageOneMonthsOfYear })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 1);
     var pageTwoLabel = helpers_1.getYearTitle(pageTwoCurrentVisibleDate);
@@ -82,8 +80,7 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
                     react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneMonthsOfYear })),
                 react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                     react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
-                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear }))),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear })))));
     }
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         react_1["default"].createElement(DateTime10YearSlider_1.DateTime10YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -93,6 +90,5 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
                 react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneMonthsOfYear })),
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                 react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear }))),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear })))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeTime/DateTimeTypeTime.js

@@ -5,7 +5,6 @@ var tslib_1 = require("tslib");
 require("./DateTimeTypeTime.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var bem_1 = require("../../../utils/bem");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeTimeColumn_1 = require("../DateTimeTimeColumn/DateTimeTimeColumn");
 var helpers_1 = require("../helpers");
@@ -14,7 +13,7 @@ var cnDateTimeTypeTime = bem_1.cn('DateTimeTypeTime');
 exports.DateTimeTypeTime = react_1.forwardRef(function (props, ref) {
     var _a;
     var _b, _c, _d;
-    var localeProp = props.locale, value = props.value, className = props.className, onChange = props.onChange, maxDate = props.maxDate, minDate = props.minDate, _e = props.multiplicityHours, multiplicityHours = _e === void 0 ? 1 : _e, _f = props.multiplicityMinutes, multiplicityMinutes = _f === void 0 ? 1 : _f, _g = props.multiplicitySeconds, multiplicitySeconds = _g === void 0 ? 1 : _g, onMove = props.onMove, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove", "renderAdditionalControls"]);
+    var localeProp = props.locale, value = props.value, className = props.className, onChange = props.onChange, maxDate = props.maxDate, minDate = props.minDate, _e = props.multiplicityHours, multiplicityHours = _e === void 0 ? 1 : _e, _f = props.multiplicityMinutes, multiplicityMinutes = _f === void 0 ? 1 : _f, _g = props.multiplicitySeconds, multiplicitySeconds = _g === void 0 ? 1 : _g, onMove = props.onMove, otherProps = tslib_1.__rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[3]);
     }, []);
@@ -32,6 +31,5 @@ exports.DateTimeTypeTime = react_1.forwardRef(function (props, ref) {
         react_1["default"].createElement("div", { className: cnDateTimeTypeTime('Grid') },
             react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.hours, items: hours }),
             react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.minutes, items: minutes }),
-            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.seconds, items: seconds })),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls })));
+            react_1["default"].createElement(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.seconds, items: seconds }))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeYear/DateTimeTypeYear.js

@@ -7,14 +7,13 @@ var date_fns_1 = require("date-fns");
 var ru_1 = tslib_1.__importDefault(require("date-fns/locale/ru"));
 var DateTime10Years_1 = require("../DateTime10Years/DateTime10Years");
 var DateTime100YearSlider_1 = require("../DateTime100YearSlider/DateTime100YearSlider");
-var DateTimeAdditionalControls_1 = require("../DateTimeAdditionalControls/DateTimeAdditionalControls");
 var DateTimeLabel_1 = require("../DateTimeLabel/DateTimeLabel");
 var DateTimeToggler_1 = require("../DateTimeToggler/DateTimeToggler");
 var helpers_1 = require("../helpers");
 var types_1 = require("../helpers/types");
 var mixs_1 = require("../mixs");
 exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
-    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var minDate = props.minDate, maxDate = props.maxDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, currentVisibleDateProp = props.currentVisibleDate, events = props.events, _a = props.locale, locale = _a === void 0 ? ru_1["default"] : _a, className = props.className, _b = props.view, view = _b === void 0 ? types_1.dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[0]);
     }, []);
@@ -49,8 +48,7 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
     if (view === types_1.dateTimePropView[0]) {
         return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
-            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade }),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+            react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 10);
     var pageTwoYearsOfDecade = helpers_1.getYearsOfDecade({
@@ -64,15 +62,13 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
     });
     var pageTwoLabel = helpers_1.getDecadeTitle(pageTwoCurrentVisibleDate);
     if (view === types_1.dateTimePropView[1]) {
-        return (react_1["default"].createElement(react_1["default"].Fragment, null,
-            react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
-                react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
-                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
-                react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
-                    react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
-                    react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
-            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+        return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
+            react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
+                react_1["default"].createElement(DateTimeToggler_1.DateTimeToggler, { className: mixs_1.cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))));
     }
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: mixs_1.cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         react_1["default"].createElement(DateTime100YearSlider_1.DateTime100YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -82,6 +78,5 @@ exports.DateTimeTypeYear = react_1.forwardRef(function (props, ref) {
                 react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade })),
             react_1["default"].createElement("div", { className: mixs_1.cnDateTimeMixLayout('Page') },
                 react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { className: mixs_1.cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
-                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
-        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
+                react_1["default"].createElement(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade })))));
 });

package/__internal__/cjs-src/components/DateTimeCanary/helpers/types.d.ts

@@ -45,14 +45,8 @@ export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = Prop
     multiplicityMinutes?: number;
     multiplicityHours?: number;
     onMove?: (type: MoveType) => void;
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
     timeFor?: DateTimePropTimeFor<TYPE>;
 }, HTMLDivElement>;
-export declare type DateTimeAdditionalControlRenderProp = React.ReactNode | React.ReactNode[] | AdditionalControlRenderType;
-export declare type AdditionalControlRenderType = (props: DateTimeAdditionalControlRenderProps) => React.ReactNode | React.ReactNode[];
-export declare type DateTimeAdditionalControlRenderProps = {
-    currentVisibleDate?: Date;
-};
 export declare type DateTimeComponent = <TYPE extends DateTimePropType = 'date'>(props: DateTimeProps<TYPE>) => React.ReactElement | null;
 export declare type DateTimeTypeComponent<TYPE extends DateTimePropType> = (props: Omit<DateTimeProps<TYPE>, 'type'>) => React.ReactElement | null;
 export declare type HandleSelectDate = (props: {