@consta/uikit 3.13.0 → 3.16.0

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

@@ -1,7 +1,10 @@
 "use strict";
 exports.__esModule = true;
-exports.normalizeRangeValue = exports.datePickerPropPlaceholderDefault = exports.datePickerPropFormatDefault = exports.datePickerPropSeparatorDefault = exports.isNotDateRangeParams = exports.isDateRangeParams = exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
-exports.datePickerPropType = ['date', 'date-range'];
+exports.getFormForEnd = exports.getFormForStart = exports.getTimeEnum = exports.getMultiplicityTime = exports.normalizeRangeValue = exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropFormatTypeDateTime = exports.datePickerPropPlaceholderTypeDate = exports.datePickerPropFormatTypeDate = exports.datePickerPropSeparatorDefault = exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
+var date_fns_1 = require("date-fns");
+var array_1 = require("../../utils/array");
+var getByMap_1 = require("../../utils/getByMap");
+exports.datePickerPropType = ['date', 'date-range', 'date-time', 'date-time-range'];
 exports.datePickerPropTypeDefault = exports.datePickerPropType[0];
 exports.datePickerErrorTypes = [
     'outOfRange',
@@ -10,15 +13,11 @@ exports.datePickerErrorTypes = [
 ];
 exports.datePickerPropDropdownForm = ['default', 'brick', 'round'];
 exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm[0];
-exports.isDateRangeParams = function (params) {
-    return params.type === exports.datePickerPropType[1];
-};
-exports.isNotDateRangeParams = function (params) {
-    return params.type === exports.datePickerPropType[0];
-};
 exports.datePickerPropSeparatorDefault = '.';
-exports.datePickerPropFormatDefault = "dd" + exports.datePickerPropSeparatorDefault + "MM" + exports.datePickerPropSeparatorDefault + "yyyy";
-exports.datePickerPropPlaceholderDefault = "\u0414\u0414" + exports.datePickerPropSeparatorDefault + "\u041C\u041C" + exports.datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+exports.datePickerPropFormatTypeDate = "dd" + exports.datePickerPropSeparatorDefault + "MM" + exports.datePickerPropSeparatorDefault + "yyyy";
+exports.datePickerPropPlaceholderTypeDate = "\u0414\u0414" + exports.datePickerPropSeparatorDefault + "\u041C\u041C" + exports.datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+exports.datePickerPropFormatTypeDateTime = exports.datePickerPropFormatTypeDate + " HH:mm:ss";
+exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropPlaceholderTypeDate + " \u0427\u0427:\u041C\u041C:\u0421\u0421";
 exports.normalizeRangeValue = function (dateRange) {
     var _a, _b;
     if (dateRange[0] && dateRange[1] && ((_a = dateRange[0]) === null || _a === void 0 ? void 0 : _a.getTime()) > ((_b = dateRange[1]) === null || _b === void 0 ? void 0 : _b.getTime())) {
@@ -26,3 +25,59 @@ exports.normalizeRangeValue = function (dateRange) {
     }
     return dateRange;
 };
+exports.getMultiplicityTime = function (format, multiplicityHours, multiplicityMinutes, multiplicitySeconds) {
+    var _a;
+    var markers = ['HH', 'mm', 'ss'];
+    var formatArray = (_a = format.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.split(':');
+    var map = {
+        HH: multiplicityHours,
+        mm: multiplicityMinutes,
+        ss: multiplicitySeconds
+    };
+    return markers.map(function (marker) { return ((formatArray === null || formatArray === void 0 ? void 0 : formatArray.indexOf(marker)) < 0 ? 0 : map[marker]); });
+};
+exports.getTimeEnum = function (length, multiplicity, startOfUnits, addUnits, getItemLabel) {
+    if (multiplicity === void 0) { multiplicity = 1; }
+    var numbers = array_1.range(multiplicity ? Math.floor(length / multiplicity) : 0);
+    if (numbers.length === 0) {
+        return [];
+    }
+    var startDate = startOfUnits(date_fns_1.startOfToday());
+    return numbers.map(function (number) {
+        return getItemLabel(addUnits(startDate, number * multiplicity));
+    });
+};
+var mapFormForStart = {
+    "default": 'defaultClear',
+    defaultClear: 'defaultClear',
+    defaultBrick: 'defaultClear',
+    brick: 'brickClear',
+    brickDefault: 'brickClear',
+    brickClear: 'brickClear',
+    brickRound: 'brickClear',
+    round: 'roundClear',
+    roundClear: 'roundClear',
+    roundBrick: 'roundClear',
+    clearRound: 'clearClear',
+    clearDefault: 'clearClear',
+    clearBrick: 'clearClear',
+    clearClear: 'clearClear'
+};
+var mapFormForEnd = {
+    "default": 'brickDefault',
+    defaultClear: 'brickClear',
+    defaultBrick: 'brick',
+    brick: 'brick',
+    brickDefault: 'brickDefault',
+    brickClear: 'brickClear',
+    brickRound: 'brickRound',
+    round: 'brickRound',
+    roundClear: 'brickClear',
+    roundBrick: 'brick',
+    clearRound: 'brickRound',
+    clearDefault: 'brickDefault',
+    clearBrick: 'brick',
+    clearClear: 'brickClear'
+};
+exports.getFormForStart = function (form) { return getByMap_1.getByMap(mapFormForStart, form); };
+exports.getFormForEnd = function (form) { return getByMap_1.getByMap(mapFormForEnd, form); };

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useCurrentVisibleDate: (date?: Date | undefined, onChange?: ((date: Date) => void) | undefined) => [Date | undefined, React.Dispatch<React.SetStateAction<Date | undefined>>];

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

@@ -0,0 +1,11 @@
+"use strict";
+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()]);
+    return state;
+};

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

@@ -0,0 +1,9 @@
+.DateTimeAdditionalControls {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-top: var(--space-l);
+  gap: var(--space-s);
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.d.ts

@@ -0,0 +1,9 @@
+import './DateTimeAdditionalControls.css';
+import React from 'react';
+import { DateTimeAdditionalControlRenderProp } from '../helpers';
+declare type Props = {
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    currentVisibleDate?: Date;
+};
+export declare const DateTimeAdditionalControls: React.FC<Props>;
+export {};

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

@@ -0,0 +1,21 @@
+"use strict";
+exports.__esModule = true;
+exports.DateTimeAdditionalControls = void 0;
+var tslib_1 = require("tslib");
+require("./DateTimeAdditionalControls.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var bem_1 = require("../../../utils/bem");
+function isRenderFn(fn) {
+    return fn.call !== undefined;
+}
+var cnDateTimeAdditionalControls = bem_1.cn('DateTimeAdditionalControls');
+exports.DateTimeAdditionalControls = function (props) {
+    var renderAdditionalControls = props.renderAdditionalControls, currentVisibleDate = props.currentVisibleDate;
+    if (typeof renderAdditionalControls !== 'undefined') {
+        var content = isRenderFn(renderAdditionalControls)
+            ? renderAdditionalControls({ currentVisibleDate: currentVisibleDate })
+            : renderAdditionalControls;
+        return react_1["default"].createElement("div", { className: cnDateTimeAdditionalControls() }, content);
+    }
+    return null;
+};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTimeColumn/useScrollToElement/useScrollToElement.js

@@ -3,19 +3,17 @@ exports.__esModule = true;
 exports.useScrollToElement = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var useRefs_1 = require("../../../../hooks/useRefs/useRefs");
 exports.useScrollToElement = function (items, scrollWrapper) {
     var _a = tslib_1.__read(react_1.useState([]), 2), itemDimentions = _a[0], setItemDimentions = _a[1];
-    var itemsRefs = react_1.useMemo(function () { return new Array(items.length).fill(null).map(function () { return react_1.createRef(); }); }, [items.length]);
+    var itemsRefs = useRefs_1.useRefs(items.length);
     react_1.useEffect(function () {
-        var _a;
+        var _a, _b, _c;
         var selectedItemIndex = items.findIndex(function (item) { return item.selected; });
-        var scrollWrapperElement = scrollWrapper.current;
-        if (scrollWrapperElement) {
-            scrollWrapperElement.scrollTo({
-                top: ((_a = itemDimentions === null || itemDimentions === void 0 ? void 0 : itemDimentions[selectedItemIndex]) === null || _a === void 0 ? void 0 : _a.offset) || 0,
-                behavior: 'smooth'
-            });
-        }
+        (_b = (_a = scrollWrapper.current) === null || _a === void 0 ? void 0 : _a.scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            top: ((_c = itemDimentions === null || itemDimentions === void 0 ? void 0 : itemDimentions[selectedItemIndex]) === null || _c === void 0 ? void 0 : _c.offset) || 0,
+            behavior: 'smooth'
+        });
     });
     react_1.useLayoutEffect(function () {
         var itemDimentions = itemsRefs.reduce(function (accumulator, currentValue, index) {

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

@@ -6,6 +6,7 @@ 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");
@@ -15,7 +16,7 @@ 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, otherProps = tslib_1.__rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    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;
     react_1.useEffect(function () {
         !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[2]));
@@ -59,7 +60,8 @@ exports.DateTimeTypeDate = react_1.forwardRef(function (props, ref) {
     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(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth }),
+            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addMonths(currentVisibleDate, 1);
     var pageTwoDaysOfMonth = helpers_1.getDaysOfMonth({
@@ -73,13 +75,15 @@ exports.DateTimeTypeDate = react_1.forwardRef(function (props, ref) {
     });
     var pageTwoLabel = helpers_1.getMouthLabelWithYear(pageTwoCurrentVisibleDate, locale);
     if (view === types_1.dateTimePropView[1]) {
-        return (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(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 }))));
+        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(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 })));
     }
     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 }),
@@ -89,5 +93,6 @@ exports.DateTimeTypeDate = react_1.forwardRef(function (props, ref) {
                 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(DateTimeMonth_1.DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
+        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
 });

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

@@ -6,18 +6,19 @@ 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, 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, otherProps = tslib_1.__rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style"]);
-    var _a = tslib_1.__read(react_1.useState(helpers_1.moveTypes[2]), 2), moveType = _a[0], setMoveType = _a[1];
-    var _b = tslib_1.__read(react_1.useState({
+    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 _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'
-    }), 2), cssVars = _b[0], setCssVars = _b[1];
-    var _c = tslib_1.__read(useOnChange_1.useOnChange(onChange), 2), onDateChange = _c[0], onTimeChange = _c[1];
+    }), 2), cssVars = _c[0], setCssVars = _c[1];
+    var _d = tslib_1.__read(useOnChange_1.useOnChange(onChange, onChangeRange, value, timeFor), 4), onDateChange = _d[0], onDateChangeRange = _d[1], onTimeChange = _d[2], valueTime = _d[3];
     var rootRef = react_1.useRef(null);
     var onMove = function (type) {
         setMoveType(type);
@@ -31,7 +32,9 @@ exports.DateTimeTypeDateTime = react_1.forwardRef(function (props, ref) {
             });
         }
     }, []);
-    return (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, minDate: minDate, maxDate: maxDate, events: events, locale: locale, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
-        withTime && (react_1["default"].createElement(DateTimeTypeTime_1.DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))));
+    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 })));
 });

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeTypeDateTime/useOnChange.d.ts

@@ -1,2 +1,3 @@
-import { DateTimePropOnChange } from '../helpers';
-export declare const useOnChange: (onChange: DateTimePropOnChange | undefined) => DateTimePropOnChange[];
+import { DateRange } from '../../../utils/types/Date';
+import { DateTimePropOnChange, DateTimePropOnChangeRange } from '../helpers';
+export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, onChangeRange: DateTimePropOnChangeRange<'date-time'> | undefined, value: DateRange | Date | undefined, timeFor: 'start' | 'end') => [DateTimePropOnChange, DateTimePropOnChangeRange<'date-time'>, DateTimePropOnChange, Date | undefined];

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

@@ -11,9 +11,11 @@ var getTime = function (date) {
     }
     return [date_fns_1.getHours(date), date_fns_1.getMinutes(date), date_fns_1.getSeconds(date)];
 };
-exports.useOnChange = function (onChange) {
-    var _a = tslib_1.__read(react_1.useState(), 2), time = _a[0], setTime = _a[1];
+exports.useOnChange = function (onChange, onChangeRange, value, timeFor) {
+    var normalizeValue = Array.isArray(value) ? value[timeFor === 'start' ? 0 : 1] : value;
+    var _a = tslib_1.__read(react_1.useState(normalizeValue), 2), time = _a[0], setTime = _a[1];
     var onChangeRef = useMutableRef_1.useMutableRef(onChange);
+    var onChangeRangeRef = useMutableRef_1.useMutableRef(onChangeRange);
     var timeRef = useMutableRef_1.useMutableRef(time);
     var onDateChange = react_1.useCallback(function (_a) {
         var _b;
@@ -21,11 +23,23 @@ exports.useOnChange = function (onChange) {
         var _c = tslib_1.__read(getTime(timeRef.current), 3), hours = _c[0], minutes = _c[1], seconds = _c[2];
         (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, { e: e, value: date_fns_1.set(value, { hours: hours, minutes: minutes, seconds: seconds }) });
     }, []);
+    var onDateChangeRange = react_1.useCallback(function (_a) {
+        var _b;
+        var e = _a.e, value = _a.value;
+        var _c = tslib_1.__read(getTime(timeRef.current), 3), hours = _c[0], minutes = _c[1], seconds = _c[2];
+        (_b = onChangeRangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRangeRef, {
+            e: e,
+            value: [
+                value[0] ? date_fns_1.set(value[0], { hours: hours, minutes: minutes, seconds: seconds }) : undefined,
+                value[1] ? date_fns_1.set(value[1], { hours: hours, minutes: minutes, seconds: seconds }) : undefined,
+            ]
+        });
+    }, []);
     var onTimeChange = react_1.useCallback(function (_a) {
         var _b;
         var e = _a.e, value = _a.value;
-        setTime(value);
         (_b = onChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onChangeRef, { e: e, value: value });
     }, []);
-    return [onDateChange, onTimeChange];
+    react_1.useEffect(function () { return setTime(normalizeValue); }, [normalizeValue === null || normalizeValue === void 0 ? void 0 : normalizeValue.getTime()]);
+    return [onDateChange, onDateChangeRange, onTimeChange, normalizeValue];
 };

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

@@ -8,6 +8,7 @@ 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");
@@ -16,7 +17,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, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    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 _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]));
@@ -59,7 +60,8 @@ 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(DateTimeYear_1.DateTimeYear, { years: pageOneMonthsOfYear }),
+            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 1);
     var pageTwoLabel = helpers_1.getYearTitle(pageTwoCurrentVisibleDate);
@@ -73,13 +75,15 @@ exports.DateTimeTypeMonth = react_1.forwardRef(function (props, ref) {
         locale: locale
     });
     if (view === types_1.dateTimePropView[1]) {
-        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, onLabelClick: on }),
-                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 }))));
+        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, onLabelClick: on }),
+                    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 })));
     }
     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 }),
@@ -89,5 +93,6 @@ 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(DateTime10Years_1.DateTime10Years, { years: pageTwoMonthsOfYear }))),
+        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
 });

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

@@ -5,6 +5,7 @@ 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");
@@ -13,7 +14,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, otherProps = tslib_1.__rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove"]);
+    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"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[3]);
     }, []);
@@ -28,8 +29,9 @@ exports.DateTimeTypeTime = react_1.forwardRef(function (props, ref) {
     var labelLenght = time.filter(function (item) { return item.length; }).length;
     return (react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDateTimeTypeTime(null, [className]), ref: ref }),
         react_1["default"].createElement(DateTimeLabel_1.DateTimeLabel, { align: "center", className: cnDateTimeTypeTime('Label'), style: (_a = {}, _a['--label-length'] = labelLenght, _a), label: label }),
-        react_1["default"].createElement("div", tslib_1.__assign({}, otherProps, { className: cnDateTimeTypeTime('Grid') }),
+        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(DateTimeTimeColumn_1.DateTimeTimeColumn, { label: locale.seconds, items: seconds })),
+        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls })));
 });

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

@@ -7,13 +7,14 @@ 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, otherProps = tslib_1.__rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate"]);
+    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"]);
     react_1.useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(helpers_1.moveTypes[0]);
     }, []);
@@ -48,7 +49,8 @@ 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(DateTime10Years_1.DateTime10Years, { years: pageOneYearsOfDecade }),
+            react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     var pageTwoCurrentVisibleDate = date_fns_1.addYears(currentVisibleDate, 10);
     var pageTwoYearsOfDecade = helpers_1.getYearsOfDecade({
@@ -62,13 +64,15 @@ 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("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(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(DateTime100YearSlider_1.DateTime100YearSlider, { className: mixs_1.cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -78,5 +82,6 @@ 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(DateTime10Years_1.DateTime10Years, { years: pageTwoYearsOfDecade }))),
+        react_1["default"].createElement(DateTimeAdditionalControls_1.DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
 });

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

@@ -1,4 +1,2 @@
 import { DateRange } from '../../../utils/types/Date';
-declare type StartEndOfPeriod = (date: Date) => Date;
-export declare const getSliderValueRange: (decadeDate: Date, value: Date | DateRange | undefined, startOfPeriod: StartEndOfPeriod, endOfPeriod: StartEndOfPeriod) => number[] | undefined;
-export {};
+export declare const getSliderValueRange: (decadeDate: Date, value: Date | DateRange | undefined, startOfPeriod: (date: Date) => Date, endOfPeriod: (date: Date) => Date) => number[] | undefined;

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

@@ -7,7 +7,7 @@ export declare const dateTimePropViewDefault: "classic";
 export declare const dateTimePropType: readonly ["date", "month", "year", "time", "date-time"];
 export declare type DateTimePropType = typeof dateTimePropType[number];
 export declare const dateTimePropTypeDefault: "date";
-export declare type СapableRangeType = 'date' | 'month' | 'year';
+export declare type СapableRangeType = 'date' | 'month' | 'year' | 'date-time';
 export declare type DateTimePropValue<TYPE> = TYPE extends СapableRangeType ? Date | DateRange : Date;
 export declare type DateTimePropOnChange = (props: {
     value: Date;
@@ -27,6 +27,7 @@ declare type LocaleWords = {
 export declare type DateTimePropLocale = Locale & LocaleWords;
 export declare const moveTypes: readonly ["year", "month", "day", "time"];
 export declare type MoveType = typeof moveTypes[number];
+declare type DateTimePropTimeFor<TYPE> = TYPE extends 'date-time' ? 'start' | 'end' : never;
 export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     currentVisibleDate?: Date;
     type?: TYPE;
@@ -44,7 +45,14 @@ 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: {

package/__internal__/cjs-src/components/EventInterceptor/eventInterceptorMap.d.ts

@@ -23,7 +23,7 @@ export declare const eventInterceptorMap: {
     } & Pick<import("react").HTMLAttributes<HTMLLabelElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLLabelElement>>(props: P, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLLabelElement>) => P;
     readonly Select: <PROPS extends import("../Select/helpers").SelectProps<import("../Select/helpers").DefaultItem, import("../Select/helpers").DefaultGroup>>(props: PROPS, handler: import("./EventInterceptor").EventInterceptorHandler, ref: import("react").RefObject<HTMLDivElement | null>) => PROPS;
     readonly SnackBar: <P_1 extends import("react").PropsWithChildren<import("../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-        items: import("../SnackBar/SnackBar").Item[];
+        items: import("../SnackBar/helper").Item[];
         children?: undefined;
     }, HTMLDivElement>>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
     readonly TextField: <P_2 extends {
@@ -55,12 +55,12 @@ export declare const eventInterceptorMap: {
             size?: "xs" | "s" | "m" | undefined;
         }, HTMLSpanElement>> | undefined;
         withClearButton?: boolean | undefined;
-        autoComplete?: "on" | "off" | undefined;
+        autoComplete?: "on" | "off" | "tel" | "url" | "email" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "photo" | undefined;
         max?: string | number | undefined;
         min?: string | number | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
-        step?: string | number | undefined;
+        step?: string | number | number[] | undefined;
         tabIndex?: number | undefined;
         inputContainerRef?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
         inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | import("react").RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;

package/__internal__/cjs-src/components/EventInterceptor/propsHandlers/useSnackBarEventsHandler.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EventInterceptorHandler } from '../EventInterceptor';
 export declare const useSnackBarEventsHandler: <P extends React.PropsWithChildren<import("../../../utils/types/PropsWithHTMLAttributes").PropsWithHTMLAttributes<{
-    items: import("../../SnackBar/SnackBar").Item[];
+    items: import("../../SnackBar/helper").Item[];
     children?: undefined;
 }, HTMLDivElement>>>(props: P, handler: EventInterceptorHandler) => P;