@consta/uikit 3.12.2 → 3.14.0

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]);
     }, []);
@@ -28,5 +29,6 @@ export var DateTimeTypeTime = forwardRef(function (props, ref) {
         React.createElement("div", __assign({}, otherProps, { 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/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

@@ -62,6 +62,7 @@ export declare const eventInterceptorMap: {
         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/useTextFieldEventsHandler.d.ts

@@ -71,6 +71,7 @@ export declare const useTextFieldEventsHandler: <P extends {
     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 {};

package/__internal__/src/components/Modal/Modal.js

@@ -29,7 +29,7 @@ var ContextConsumer = function (_a) {
     return React.createElement(React.Fragment, null, children);
 };
 export var Modal = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.width, width = _b === void 0 ? modalPropWidthDefault : _b, _c = props.position, position = _c === void 0 ? modalPropPositionDefault : _c, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, rest = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, className = props.className, _b = props.width, width = _b === void 0 ? modalPropWidthDefault : _b, _c = props.position, position = _c === void 0 ? modalPropPositionDefault : _c, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, refsForExcludeClickOutside = props.refsForExcludeClickOutside, rootClassName = props.rootClassName, style = props.style, otherProps = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "className", "width", "position", "children", "container", "refsForExcludeClickOutside", "rootClassName", "style"]);
     var ref = useRef(null);
     var portalRef = useRef(null);
     var theme = useTheme().theme;
@@ -45,8 +45,8 @@ export var Modal = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnForCssTransition(cnModal), timeout: 200, nodeRef: portalRef },
-        React.createElement(PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef },
+        React.createElement(PortalWithTheme, { preset: theme, container: container, className: cnModal({ hasOverlay: hasOverlay }, [rootClassName]), ref: portalRef, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && React.createElement("div", { className: cnModal('Overlay'), "aria-label": "Overlay" }),
-            React.createElement("div", __assign({ className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }, rest),
+            React.createElement("div", __assign({}, otherProps, { style: __assign(__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: cnModal('Window', { width: width, position: position }, [className]), ref: ref }),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: __spread((refsForExcludeClickOutside || []), [ref]) }, children)))));
 };

package/__internal__/src/components/ProgressStepBarCanary/ProgressStepBarCanary.js

@@ -12,7 +12,7 @@ import { ProgressStepBarItem } from './ProgressStepBarItem/ProgressStepBarItem';
 import { ProgressStepBarLine } from './ProgressStepBarLine/ProgressStepBarLine';
 import { cnProgressStepBar, getItemPosition, getLineSize, propDirectionDefault, propSizeDefault, withDefaultGetters, } from './helpers';
 function ProgressStepBarRender(props, ref) {
-    var _a = withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, otherProps = __rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick"]);
+    var _a = withDefaultGetters(props), _b = _a.steps, steps = _b === void 0 ? [] : _b, _c = _a.direction, direction = _c === void 0 ? propDirectionDefault : _c, _d = _a.size, size = _d === void 0 ? propSizeDefault : _d, className = _a.className, activeStepIndex = _a.activeStepIndex, onItemClick = _a.onItemClick, getItemContent = _a.getItemContent, getItemLabel = _a.getItemLabel, getItemPoint = _a.getItemPoint, getItemProgress = _a.getItemProgress, getItemStatus = _a.getItemStatus, getItemTooltipContent = _a.getItemTooltipContent, getItemLineStatus = _a.getItemLineStatus, getItemOnClick = _a.getItemOnClick, style = _a.style, otherProps = __rest(_a, ["steps", "direction", "size", "className", "activeStepIndex", "onItemClick", "getItemContent", "getItemLabel", "getItemPoint", "getItemProgress", "getItemStatus", "getItemTooltipContent", "getItemLineStatus", "getItemOnClick", "style"]);
     var _e = __read(useState([]), 2), lines = _e[0], setLines = _e[1];
     var _f = __read(useState(activeStepIndex || 0), 2), visibleIndex = _f[0], setVisibleIndex = _f[1];
     var containerRef = useRef(null);
@@ -69,11 +69,12 @@ function ProgressStepBarRender(props, ref) {
             pointRef: stepsRef[index],
             direction: direction,
             onClick: onClick || onItemClickHandler,
-            key: cnProgressStepBar({ index: index })
+            key: cnProgressStepBar({ index: index }),
+            tooltipZIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined
         };
     };
     var isOverflow = useOverflow({ currentRef: listRef });
-    return (React.createElement("div", __assign({}, otherProps, { className: cnProgressStepBar(null, [className]), ref: useForkRef([ref, containerRef]) }),
+    return (React.createElement("div", __assign({}, otherProps, { style: style, className: cnProgressStepBar(null, [className]), ref: useForkRef([ref, containerRef]) }),
         isOverflow && direction !== 'vertical' && (React.createElement(Button, { iconLeft: function () { return React.createElement(IconArrowLeft, { size: "xs" }); }, view: "clear", onlyIcon: true, size: "xs", className: cnProgressStepBar('Button', { side: 'left' }), onClick: function () { return changePosition(true); } })),
         React.createElement("div", { ref: listRef, className: cnProgressStepBar('List', { direction: direction, overflow: isOverflow }) },
             React.createElement(ProgressStepBarLine, { lines: lines, size: size, direction: direction, activeStepIndex: activeStepIndex }),

package/__internal__/src/components/ProgressStepBarCanary/helpers.d.ts

@@ -68,6 +68,7 @@ export declare type ProgressStepBarItemProps = {
     progress?: boolean;
     status?: PropStatus | 'system';
     tooltipContent?: string;
+    tooltipZIndex?: number;
     position?: PropPosition;
     direction: PropDirection;
     size: PropSize;

package/__internal__/src/components/Select/Select.js

@@ -15,7 +15,7 @@ import { withDefaultGetters, } from './helpers';
 function SelectRender(props, ref) {
     var defaultDropdownRef = useRef(null);
     var controlRef = useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef"]);
+    var _a = usePropsHandler(COMPONENT_NAME, withDefaultGetters(props), controlRef), placeholder = _a.placeholder, onBlur = _a.onBlur, onFocus = _a.onFocus, items = _a.items, onChange = _a.onChange, value = _a.value, required = _a.required, disabled = _a.disabled, ariaLabel = _a.ariaLabel, id = _a.id, _b = _a.dropdownRef, dropdownRef = _b === void 0 ? defaultDropdownRef : _b, _c = _a.form, form = _c === void 0 ? defaultPropForm : _c, _d = _a.view, view = _d === void 0 ? defaultPropView : _d, _e = _a.size, size = _e === void 0 ? defaultPropSize : _e, dropdownClassName = _a.dropdownClassName, name = _a.name, _f = _a.groups, groups = _f === void 0 ? [] : _f, getItemLabel = _a.getItemLabel, getItemKey = _a.getItemKey, getItemGroupKey = _a.getItemGroupKey, getItemDisabled = _a.getItemDisabled, getGroupKey = _a.getGroupKey, getGroupLabel = _a.getGroupLabel, renderItem = _a.renderItem, renderValueProp = _a.renderValue, inputRefProp = _a.inputRef, style = _a.style, restProps = __rest(_a, ["placeholder", "onBlur", "onFocus", "items", "onChange", "value", "required", "disabled", "ariaLabel", "id", "dropdownRef", "form", "view", "size", "dropdownClassName", "name", "groups", "getItemLabel", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
     var _g = useSelect({
         items: items,
         groups: groups,
@@ -43,7 +43,7 @@ function SelectRender(props, ref) {
         return (React.createElement("span", { className: cnSelect('ControlValue'), title: label }, label));
     };
     var renderValue = renderValueProp || renderValueDefault;
-    return (React.createElement(SelectContainer, __assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, required: required, ref: ref }, restProps),
+    return (React.createElement(SelectContainer, __assign({ focused: isFocused, disabled: disabled, size: size, view: view, form: form, required: required, ref: ref, style: style }, restProps),
         React.createElement("div", { className: cnSelect('Control'), ref: controlRef, "aria-expanded": isOpen, "aria-haspopup": "listbox", id: id },
             React.createElement("div", { className: cnSelect('ControlInner') },
                 React.createElement("div", { className: cnSelect('ControlValueContainer') },
@@ -53,7 +53,7 @@ function SelectRender(props, ref) {
             React.createElement("span", { className: cnSelect('Indicators') },
                 React.createElement("button", { type: "button", className: cnSelect('IndicatorsDropdown'), tabIndex: -1, onClick: handleToggleDropdown },
                     React.createElement(IconSelect, { size: "xs", className: cnSelect('DropdownIndicatorIcon') })))),
-        React.createElement(SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound })));
+        React.createElement(SelectDropdown, { isOpen: isOpen, size: size, controlRef: controlRef, getOptionProps: getOptionProps, dropdownRef: dropdownRef, form: dropdownForm, className: dropdownClassName, renderItem: renderItem || renderItemDefault, getGroupLabel: getGroupLabel, visibleItems: visibleItems, notFound: notFound, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
 }
 export var Select = forwardRef(SelectRender);
 export * from './helpers';

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.js

@@ -1,4 +1,4 @@
-import { __assign } from "tslib";
+import { __assign, __rest } from "tslib";
 import './SelectDropdown.css';
 import React, { Fragment } from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -15,11 +15,11 @@ export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
 var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var SelectDropdown = function (props) {
-    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound;
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, ref = props.ref, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound", "ref"]);
     var getIndex = fabricIndex(-1);
     var indent = form === 'round' ? 'increased' : 'normal';
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200 },
-        React.createElement(Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true },
+        React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
             React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
                 visibleItems.map(function (group) {
                     if (isOptionForCreate(group)) {

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

@@ -1,11 +1,12 @@
 import './Sidebar.css';
 import React from 'react';
+import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 declare type DivProps = JSX.IntrinsicElements['div'];
 declare const sidebarPropPosition: readonly ["right", "bottom", "left", "top"];
 declare type SidebarPropPosition = typeof sidebarPropPosition[number];
 export declare const sidebarPropSize: readonly ["s", "m", "l", "full", "1/2", "1/3", "1/4", "2/3", "3/4"];
 export declare type SidebarPropSize = typeof sidebarPropSize[number];
-declare type SidebarProps = {
+declare type SidebarProps = PropsWithHTMLAttributes<{
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
@@ -16,10 +17,10 @@ declare type SidebarProps = {
     onEsc?: (event: KeyboardEvent) => void;
     position?: SidebarPropPosition;
     size?: SidebarPropSize;
-    className?: string;
+    rootClassName?: string;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
-};
+}, HTMLDivElement>;
 declare type SidebarContentProps = {
     className?: string;
     children: React.ReactNode;

package/__internal__/src/components/Sidebar/Sidebar.js

@@ -32,7 +32,7 @@ var ContextConsumer = function (_a) {
     return React.createElement(React.Fragment, null, children);
 };
 export var Sidebar = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, rest = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, style = props.style, rootClassName = props.rootClassName, otherProps = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container", "style", "rootClassName"]);
     var ref = useRef(null);
     var theme = useTheme().theme;
     useEffect(function () {
@@ -47,9 +47,9 @@ export var Sidebar = function (props) {
         Escape: function (e) { return isOpen && onEsc && onEsc(e); }
     });
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition(cnSidebar), timeout: 200 },
-        React.createElement(PortalWithTheme, { preset: theme, container: container },
+        React.createElement(PortalWithTheme, { preset: theme, container: container, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
             hasOverlay && React.createElement("div", { className: cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            React.createElement("div", __assign({ className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }, rest),
+            React.createElement("div", __assign({}, otherProps, { style: __assign(__assign({}, style), (typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' && { zIndex: (style === null || style === void 0 ? void 0 : style.zIndex) + 1 })), className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 Sidebar.Content = SidebarContent;

package/__internal__/src/components/SliderCanary/Slider.css

@@ -61,6 +61,10 @@
             align-items: center;
     width: 100%;
     height: var(--space-m);
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
   }
 
   .Slider-Side_position_left {