@consta/uikit 3.12.4 → 3.15.1

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

@@ -1,4 +1,6 @@
-export var datePickerPropType = ['date', 'date-range'];
+import { startOfToday } from 'date-fns';
+import { range } from '../../utils/array';
+export var datePickerPropType = ['date', 'date-range', 'date-time'];
 export var datePickerPropTypeDefault = datePickerPropType[0];
 export var datePickerErrorTypes = [
     'outOfRange',
@@ -7,15 +9,11 @@ export var datePickerErrorTypes = [
 ];
 export var datePickerPropDropdownForm = ['default', 'brick', 'round'];
 export var datePickerPropDropdownFormDefault = datePickerPropDropdownForm[0];
-export var isDateRangeParams = function (params) {
-    return params.type === datePickerPropType[1];
-};
-export var isNotDateRangeParams = function (params) {
-    return params.type === datePickerPropType[0];
-};
 export var datePickerPropSeparatorDefault = '.';
-export var datePickerPropFormatDefault = "dd" + datePickerPropSeparatorDefault + "MM" + datePickerPropSeparatorDefault + "yyyy";
-export var datePickerPropPlaceholderDefault = "\u0414\u0414" + datePickerPropSeparatorDefault + "\u041C\u041C" + datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+export var datePickerPropFormatTypeDate = "dd" + datePickerPropSeparatorDefault + "MM" + datePickerPropSeparatorDefault + "yyyy";
+export var datePickerPropPlaceholderTypeDate = "\u0414\u0414" + datePickerPropSeparatorDefault + "\u041C\u041C" + datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
+export var datePickerPropFormatTypeDateTime = datePickerPropFormatTypeDate + " HH:mm:ss";
+export var datePickerPropPlaceholderTypeDateTime = datePickerPropPlaceholderTypeDate + " \u0427\u0427:\u041C\u041C:\u0421\u0421";
 export var 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())) {
@@ -23,3 +21,25 @@ export var normalizeRangeValue = function (dateRange) {
     }
     return dateRange;
 };
+export var 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]); });
+};
+export var getTimeEnum = function (length, multiplicity, startOfUnits, addUnits, getItemLabel) {
+    if (multiplicity === void 0) { multiplicity = 1; }
+    var numbers = range(multiplicity ? Math.floor(length / multiplicity) : 0);
+    if (numbers.length === 0) {
+        return [];
+    }
+    var startDate = startOfUnits(startOfToday());
+    return numbers.map(function (number) {
+        return getItemLabel(addUnits(startDate, number * multiplicity));
+    });
+};

package/__internal__/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__/src/components/DatePickerCanary/useCurrentVisibleDate.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from 'react';
+export var useCurrentVisibleDate = function (date, onChange) {
+    var _a;
+    var state = useState(date);
+    useEffect(function () { return state[1](date); }, [date === null || date === void 0 ? void 0 : date.getTime()]);
+    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__/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__/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__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.js

@@ -0,0 +1,17 @@
+import './DateTimeAdditionalControls.css';
+import React from 'react';
+import { cn } from '../../../utils/bem';
+function isRenderFn(fn) {
+    return fn.call !== undefined;
+}
+var cnDateTimeAdditionalControls = cn('DateTimeAdditionalControls');
+export var DateTimeAdditionalControls = function (props) {
+    var renderAdditionalControls = props.renderAdditionalControls, currentVisibleDate = props.currentVisibleDate;
+    if (typeof renderAdditionalControls !== 'undefined') {
+        var content = isRenderFn(renderAdditionalControls)
+            ? renderAdditionalControls({ currentVisibleDate: currentVisibleDate })
+            : renderAdditionalControls;
+        return React.createElement("div", { className: cnDateTimeAdditionalControls() }, content);
+    }
+    return null;
+};

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

@@ -1,18 +1,16 @@
 import { __read, __spread } from "tslib";
-import { createRef, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
+import { useRefs } from '../../../../hooks/useRefs/useRefs';
 export var useScrollToElement = function (items, scrollWrapper) {
     var _a = __read(useState([]), 2), itemDimentions = _a[0], setItemDimentions = _a[1];
-    var itemsRefs = useMemo(function () { return new Array(items.length).fill(null).map(function () { return createRef(); }); }, [items.length]);
+    var itemsRefs = useRefs(items.length);
     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'
+        });
     });
     useLayoutEffect(function () {
         var itemDimentions = itemsRefs.reduce(function (accumulator, currentValue, index) {

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

@@ -3,6 +3,7 @@ import React, { forwardRef, useEffect } from 'react';
 import { addMonths, startOfMonth } from 'date-fns';
 import ruLocale from 'date-fns/locale/ru';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeMonth } from '../DateTimeMonth/DateTimeMonth';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
@@ -12,7 +13,7 @@ import { getDaysOfMonth, getDaysOfWeek, getHandleSelectDate, getMouthLabelWithYe
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeDate = 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 ? ruLocale : _a, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __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 ? ruLocale : _a, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["className", "minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var _c = __read(useFlag(), 2), changeMonth = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     useEffect(function () {
         !changeMonth && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[2]));
@@ -56,7 +57,8 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
             React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, nextOnClick: nextMonthHandle, label: pageOneLabel, onLabelClick: on }),
-            React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })));
+            React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth }),
+            React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
     }
     var pageTwoCurrentVisibleDate = addMonths(currentVisibleDate, 1);
     var pageTwoDaysOfMonth = getDaysOfMonth({
@@ -70,13 +72,15 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
     });
     var pageTwoLabel = getMouthLabelWithYear(pageTwoCurrentVisibleDate, locale);
     if (view === dateTimePropView[1]) {
-        return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: prevMonthHandle, label: pageOneLabel, onLabelClick: on }),
+                    React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: nextMonthHandle, label: pageTwoLabel, onLabelClick: on }),
+                    React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
+            React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
     }
     return (React.createElement("div", __assign({}, otherProps, { ref: ref, className: cnDateTimeMixLayout({ view: view }, [className]) }),
         React.createElement(DateTimeYearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -86,5 +90,6 @@ export var DateTimeTypeDate = forwardRef(function (props, ref) {
                 React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageOneDaysOfMonth })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                 React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth })))));
+                React.createElement(DateTimeMonth, { daysOfWeek: daysOfWeek, daysOfMonth: pageTwoDaysOfMonth }))),
+        React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: renderAdditionalControls })));
 });

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

@@ -3,18 +3,19 @@ import './DateTimeTypeDateTime.css';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
 import { cn } from '../../../utils/bem';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeTypeDate } from '../DateTimeTypeDate/DateTimeTypeDate';
 import { DateTimeTypeTime } from '../DateTimeTypeTime/DateTimeTypeTime';
 import { moveTypes } from '../helpers';
 import { useOnChange } from './useOnChange';
 var cnDateTimeTypeDateTime = cn('DateTimeTypeDateTime');
 export var DateTimeTypeDateTime = 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 = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style"]);
+    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, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls"]);
     var _a = __read(useState(moveTypes[2]), 2), moveType = _a[0], setMoveType = _a[1];
     var _b = __read(useState({
         '--root-padding-left': '0px'
     }), 2), cssVars = _b[0], setCssVars = _b[1];
-    var _c = __read(useOnChange(onChange), 2), onDateChange = _c[0], onTimeChange = _c[1];
+    var _c = __read(useOnChange(onChange, value), 2), onDateChange = _c[0], onTimeChange = _c[1];
     var rootRef = useRef(null);
     var onMove = function (type) {
         setMoveType(type);
@@ -28,7 +29,9 @@ export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
             });
         }
     }, []);
-    return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef([rootRef, ref]), style: __assign(__assign({}, style), cssVars) }),
-        React.createElement(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.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeDateTime({ withTime: withTime }, [className]), ref: useForkRef([rootRef, ref]), style: __assign(__assign({}, style), cssVars) }),
+            React.createElement(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
+            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: value, onChange: onTimeChange, minDate: minDate, maxDate: maxDate, locale: locale, multiplicitySeconds: multiplicitySeconds, multiplicityMinutes: multiplicityMinutes, multiplicityHours: multiplicityHours }))),
+        React.createElement(DateTimeAdditionalControls, { currentVisibleDate: currentVisibleDate, renderAdditionalControls: withTime ? renderAdditionalControls : undefined })));
 });

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

@@ -1,2 +1,2 @@
 import { DateTimePropOnChange } from '../helpers';
-export declare const useOnChange: (onChange: DateTimePropOnChange | undefined) => DateTimePropOnChange[];
+export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, value: Date | undefined) => DateTimePropOnChange[];

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

@@ -1,5 +1,5 @@
 import { __read } from "tslib";
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { getHours, getMinutes, getSeconds, set } from 'date-fns';
 import { useMutableRef } from '../../../hooks/useMutableRef/useMutableRef';
 var getTime = function (date) {
@@ -8,8 +8,8 @@ var getTime = function (date) {
     }
     return [getHours(date), getMinutes(date), getSeconds(date)];
 };
-export var useOnChange = function (onChange) {
-    var _a = __read(useState(), 2), time = _a[0], setTime = _a[1];
+export var useOnChange = function (onChange, value) {
+    var _a = __read(useState(value), 2), time = _a[0], setTime = _a[1];
     var onChangeRef = useMutableRef(onChange);
     var timeRef = useMutableRef(time);
     var onDateChange = useCallback(function (_a) {
@@ -21,8 +21,8 @@ export var useOnChange = function (onChange) {
     var onTimeChange = 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 });
     }, []);
+    useEffect(function () { return setTime(value); }, [value === null || value === void 0 ? void 0 : value.getTime()]);
     return [onDateChange, onTimeChange];
 };

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

@@ -5,6 +5,7 @@ import ruLocale from 'date-fns/locale/ru';
 import { useFlag } from '../../../hooks/useFlag/useFlag';
 import { DateTime10Years } from '../DateTime10Years/DateTime10Years';
 import { DateTime10YearSlider } from '../DateTime10YearSlider/DateTime10YearSlider';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
 import { DateTimeTypeYear } from '../DateTimeTypeYear/DateTimeTypeYear';
@@ -13,7 +14,7 @@ import { getHandleSelectDate, getMonthsOfYear, getYearTitle, isEqualMount, moveT
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeMonth = 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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     var _c = __read(useFlag(), 2), changeYear = _c[0], _d = _c[1], on = _d.on, off = _d.off;
     useEffect(function () {
         !changeYear && (onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[1]));
@@ -56,7 +57,8 @@ export var DateTimeTypeMonth = forwardRef(function (props, ref) {
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel, onLabelClick: on }),
-            React.createElement(DateTimeYear, { years: pageOneMonthsOfYear })));
+            React.createElement(DateTimeYear, { years: pageOneMonthsOfYear }),
+            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     var pageTwoCurrentVisibleDate = addYears(currentVisibleDate, 1);
     var pageTwoLabel = getYearTitle(pageTwoCurrentVisibleDate);
@@ -70,13 +72,15 @@ export var DateTimeTypeMonth = forwardRef(function (props, ref) {
         locale: locale
     });
     if (view === dateTimePropView[1]) {
-        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel, onLabelClick: on }),
-                React.createElement(DateTime10Years, { years: pageOneMonthsOfYear })),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
-                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear }))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel, onLabelClick: on }),
+                    React.createElement(DateTime10Years, { years: pageOneMonthsOfYear })),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel, onLabelClick: on }),
+                    React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear }))),
+            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         React.createElement(DateTime10YearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -86,5 +90,6 @@ export var DateTimeTypeMonth = forwardRef(function (props, ref) {
                 React.createElement(DateTime10Years, { years: pageOneMonthsOfYear })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                 React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel, onClick: on, cursor: "pointer" }),
-                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear })))));
+                React.createElement(DateTime10Years, { years: pageTwoMonthsOfYear }))),
+        React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
 });

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

@@ -2,6 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import './DateTimeTypeTime.css';
 import React, { forwardRef, useEffect, useMemo } from 'react';
 import { cn } from '../../../utils/bem';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeTimeColumn } from '../DateTimeTimeColumn/DateTimeTimeColumn';
 import { getTimeTitle, moveTypes } from '../helpers';
@@ -10,7 +11,7 @@ var cnDateTimeTypeTime = cn('DateTimeTypeTime');
 export var DateTimeTypeTime = 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 = __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 = __rest(props, ["locale", "value", "className", "onChange", "maxDate", "minDate", "multiplicityHours", "multiplicityMinutes", "multiplicitySeconds", "onMove", "renderAdditionalControls"]);
     useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[3]);
     }, []);
@@ -25,8 +26,9 @@ export var DateTimeTypeTime = forwardRef(function (props, ref) {
     var labelLenght = time.filter(function (item) { return item.length; }).length;
     return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeTime(null, [className]), ref: ref }),
         React.createElement(DateTimeLabel, { align: "center", className: cnDateTimeTypeTime('Label'), style: (_a = {}, _a['--label-length'] = labelLenght, _a), label: label }),
-        React.createElement("div", __assign({}, otherProps, { className: cnDateTimeTypeTime('Grid') }),
+        React.createElement("div", { className: cnDateTimeTypeTime('Grid') },
             React.createElement(DateTimeTimeColumn, { label: locale.hours, items: hours }),
             React.createElement(DateTimeTimeColumn, { label: locale.minutes, items: minutes }),
-            React.createElement(DateTimeTimeColumn, { label: locale.seconds, items: seconds }))));
+            React.createElement(DateTimeTimeColumn, { label: locale.seconds, items: seconds })),
+        React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls })));
 });

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

@@ -4,13 +4,14 @@ import { addYears, startOfDecade } from 'date-fns';
 import ruLocale from 'date-fns/locale/ru';
 import { DateTime10Years } from '../DateTime10Years/DateTime10Years';
 import { DateTime100YearSlider } from '../DateTime100YearSlider/DateTime100YearSlider';
+import { DateTimeAdditionalControls } from '../DateTimeAdditionalControls/DateTimeAdditionalControls';
 import { DateTimeLabel } from '../DateTimeLabel/DateTimeLabel';
 import { DateTimeToggler } from '../DateTimeToggler/DateTimeToggler';
 import { getDecadeTitle, getHandleSelectDate, getYearsOfDecade, isEqualYear, moveTypes, useCurrentVisibleDate, } from '../helpers';
 import { dateTimePropView, dateTimePropViewDefault } from '../helpers/types';
 import { cnDateTimeMixLayout } from '../mixs';
 export var DateTimeTypeYear = 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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, otherProps = __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 ? ruLocale : _a, className = props.className, _b = props.view, view = _b === void 0 ? dateTimePropViewDefault : _b, onMove = props.onMove, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, otherProps = __rest(props, ["minDate", "maxDate", "value", "onChange", "onChangeRange", "currentVisibleDate", "events", "locale", "className", "view", "onMove", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
     useEffect(function () {
         onMove === null || onMove === void 0 ? void 0 : onMove(moveTypes[0]);
     }, []);
@@ -45,7 +46,8 @@ export var DateTimeTypeYear = forwardRef(function (props, ref) {
     if (view === dateTimePropView[0]) {
         return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
             React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, nextOnClick: handleNext, label: pageOneLabel }),
-            React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })));
+            React.createElement(DateTime10Years, { years: pageOneYearsOfDecade }),
+            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     var pageTwoCurrentVisibleDate = addYears(currentVisibleDate, 10);
     var pageTwoYearsOfDecade = getYearsOfDecade({
@@ -59,13 +61,15 @@ export var DateTimeTypeYear = forwardRef(function (props, ref) {
     });
     var pageTwoLabel = getDecadeTitle(pageTwoCurrentVisibleDate);
     if (view === dateTimePropView[1]) {
-        return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
-                React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
-            React.createElement("div", { className: cnDateTimeMixLayout('Page') },
-                React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
-                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), prevOnClick: handlePrev, label: pageOneLabel }),
+                    React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
+                React.createElement("div", { className: cnDateTimeMixLayout('Page') },
+                    React.createElement(DateTimeToggler, { className: cnDateTimeMixLayout('Label'), nextOnClick: handleNext, label: pageTwoLabel }),
+                    React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))),
+            React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
     }
     return (React.createElement("div", __assign({}, otherProps, { className: cnDateTimeMixLayout({ view: view }, [className]), ref: ref }),
         React.createElement(DateTime100YearSlider, { className: cnDateTimeMixLayout('Slider'), currentVisibleDate: currentVisibleDate, onChange: setCurrentVisibleDate, value: value, locale: locale }),
@@ -75,5 +79,6 @@ export var DateTimeTypeYear = forwardRef(function (props, ref) {
                 React.createElement(DateTime10Years, { years: pageOneYearsOfDecade })),
             React.createElement("div", { className: cnDateTimeMixLayout('Page') },
                 React.createElement(DateTimeLabel, { className: cnDateTimeMixLayout('Label'), label: pageTwoLabel }),
-                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade })))));
+                React.createElement(DateTime10Years, { years: pageTwoYearsOfDecade }))),
+        React.createElement(DateTimeAdditionalControls, { renderAdditionalControls: renderAdditionalControls, currentVisibleDate: currentVisibleDate })));
 });

package/__internal__/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__/src/components/DateTimeCanary/helpers/types.d.ts

@@ -44,7 +44,13 @@ export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = Prop
     multiplicityMinutes?: number;
     multiplicityHours?: number;
     onMove?: (type: MoveType) => void;
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
 }, 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__/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,13 +55,14 @@ 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;
         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;
         ariaLabel?: string | undefined;
         iconSize?: "xs" | "s" | "m" | undefined;

package/__internal__/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;

package/__internal__/src/components/EventInterceptor/propsHandlers/useTextFieldEventsHandler.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
-import { TextFieldPropAutoComplete, TextFieldPropForm, TextFieldPropId, TextFieldPropName, TextFieldPropOnChange, TextFieldPropSize, TextFieldPropStatus, TextFieldPropValue, TextFieldPropView, TextFieldPropWidth } from '../../TextField/TextField';
+import { AutoCompete } from '../../../utils/types/AutoComplete';
+import { TextFieldPropForm, TextFieldPropId, TextFieldPropName, TextFieldPropOnChange, TextFieldPropSize, TextFieldPropStatus, TextFieldPropValue, TextFieldPropView, TextFieldPropWidth } from '../../TextField/TextField';
 import { EventInterceptorHandler } from '../EventInterceptor';
 export declare type Props = {
     className?: string;
@@ -23,7 +24,7 @@ export declare type Props = {
     placeholder?: string;
     leftSide?: string | IconComponent;
     rightSide?: string | IconComponent;
-    autoComplete?: TextFieldPropAutoComplete;
+    autoComplete?: AutoCompete;
     max?: number | string;
     min?: number | string;
     readOnly?: boolean;
@@ -64,13 +65,14 @@ export declare const useTextFieldEventsHandler: <P extends {
         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;
     tabIndex?: number | undefined;
+    inputContainerRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | React.RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;
     ariaLabel?: string | undefined;
     iconSize?: "xs" | "s" | "m" | undefined;

package/__internal__/src/components/FieldLabel/FieldLabel.d.ts

@@ -1,7 +1,7 @@
 import './FieldLabel.css';
 export declare type FieldLabelPropSize = 'xs' | 's' | 'm' | 'l';
 declare type FieldLabelProps = {
-    size: FieldLabelPropSize;
+    size?: FieldLabelPropSize;
     required?: boolean;
 };
 export declare const FieldLabel: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<FieldLabelProps, "div">;

package/__internal__/src/components/Modal/Modal.d.ts

@@ -1,10 +1,11 @@
 import './Modal.css';
 import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 declare const modalPropWidth: readonly ["auto"];
 declare type ModalPropWidth = typeof modalPropWidth[number];
 declare const modalPropPosition: readonly ["center", "top"];
 declare type ModalPropPosition = typeof modalPropPosition[number];
-declare type ModalProps = {
+declare type ModalProps = PropsWithHTMLAttributes<{
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
@@ -13,13 +14,12 @@ declare type ModalProps = {
     onOverlayClick?: (event: MouseEvent) => void;
     onClickOutside?: (event: MouseEvent) => void;
     onEsc?: (event: KeyboardEvent) => void;
-    className?: string;
     rootClassName?: string;
     width?: ModalPropWidth;
     position?: ModalPropPosition;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
     refsForExcludeClickOutside?: React.RefObject<HTMLElement>[];
-};
+}, HTMLDivElement>;
 export declare const Modal: React.FC<ModalProps>;
 export {};