@consta/uikit 3.15.0 → 3.17.0

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

@@ -0,0 +1,92 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import startOfMonth from 'date-fns/startOfMonth';
+import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
+import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
+import { DatePickerFieldTypeDateTimeRange } from '../DatePickerFieldTypeDateTimeRange/DatePickerFieldTypeDateTimeRange';
+import { normalizeRangeValue } from '../helpers';
+import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
+export var DatePickerTypeDateTimeRange = forwardRef(function (props, ref) {
+    var _a, _b, _c, _d;
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, startFieldRightSide = props.startFieldRightSide, startFieldLeftSide = props.startFieldLeftSide, startFieldOnBlur = props.startFieldOnBlur, startFieldOnFocus = props.startFieldOnFocus, endFieldRightSide = props.endFieldRightSide, endFieldLeftSide = props.endFieldLeftSide, endFieldOnBlur = props.endFieldOnBlur, endFieldOnFocus = props.endFieldOnFocus, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, endFieldInputRefProp = props.endFieldInputRef, startFieldInputRefProp = props.startFieldInputRef, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, fieldProps = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "startFieldRightSide", "startFieldLeftSide", "startFieldOnBlur", "startFieldOnFocus", "endFieldRightSide", "endFieldLeftSide", "endFieldOnBlur", "endFieldOnFocus", "onFocus", "onBlur", "leftSide", "rightSide", "endFieldInputRef", "startFieldInputRef", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls"]);
+    var startFieldRef = useRef(null);
+    var endFieldRef = useRef(null);
+    var startFieldInputRef = useRef(null);
+    var endFieldInputRef = useRef(null);
+    var calendarRef = useRef(null);
+    var _e = __read(useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var startFocused = fieldFocused === 'start';
+    var endFocused = fieldFocused === 'end';
+    var hadleChange = function (_a) {
+        var _b, _c, _d, _e;
+        var e = _a.e, value = _a.value;
+        if (startFocused) {
+            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, { e: e, value: normalizeRangeValue([value, (_c = props === null || props === void 0 ? void 0 : props.value) === null || _c === void 0 ? void 0 : _c[1]]) });
+        }
+        if (endFocused) {
+            (_d = props.onChange) === null || _d === void 0 ? void 0 : _d.call(props, { e: e, value: normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
+        }
+    };
+    var _f = __read(useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _g = __read(useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var startFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        startFieldOnBlur && startFieldOnBlur(e);
+    };
+    var endFieldOnBlurHandler = function (e) {
+        onBlur && onBlur(e);
+        endFieldOnBlur && endFieldOnBlur(e);
+    };
+    var startFieldOnFocusHandler = function (e) {
+        setFieldFocused('start');
+        setCalendarVisible.on();
+        onFocus && onFocus(e);
+        startFieldOnFocus && startFieldOnFocus(e);
+    };
+    var endFieldOnFocusHandler = function (e) {
+        setFieldFocused('end');
+        setCalendarVisible.on();
+        onFocus && onFocus(e);
+        endFieldOnFocus && endFieldOnFocus(e);
+    };
+    // эфект для того чтобы календарь переключался при вводе с клавиатуры
+    useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && startFocused) {
+            var newVisibleDate = startOfMonth(props.value[0]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && startFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible, startFocused]);
+    useEffect(function () {
+        var _a, _b;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && endFocused) {
+            var newVisibleDate = startOfMonth(props.value[1]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && endFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible, endFocused]);
+    useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
+        handler: function () {
+            setFieldFocused(false);
+            setCalendarVisible.off();
+        }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePickerFieldTypeDateTimeRange, __assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, startFieldInputRefProp]), endFieldInputRef: useForkRef([endFieldInputRef, endFieldInputRefProp]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldRightSide: startFieldRightSide, startFieldLeftSide: startFieldLeftSide || leftSide, endFieldRightSide: endFieldRightSide || rightSide, endFieldLeftSide: endFieldLeftSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused })),
+        React.createElement(DatePickerDropdown, { type: "date-time", ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: setCurrentVisibleDate, currentVisibleDate: currentVisibleDate, value: props.value || undefined, timeFor: fieldFocused || undefined, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, form: dropdownForm, onChange: hadleChange, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
+});

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

@@ -5,12 +5,13 @@ import { DateRange } from '../../utils/types/Date';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
 import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
-export declare const datePickerPropType: readonly ["date", "date-range", "date-time"];
+export declare const datePickerPropType: readonly ["date", "date-range", "date-time", "date-time-range"];
 export declare type DatePickerPropType = typeof datePickerPropType[number];
 export declare const datePickerPropTypeDefault: "date";
 export declare type DatePickerPropDateTimeView = DateTimePropView;
+declare type Range = 'date-range' | 'date-time-range';
 export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
-export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends 'date' | 'date-time' ? Date : DateRange) | null;
+export declare type DatePickerPropValue<TYPE extends DatePickerPropType> = (TYPE extends Range ? DateRange : Date) | null;
 export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (props: {
     value: DatePickerPropValue<TYPE>;
     e: React.MouseEvent<HTMLButtonElement, MouseEvent> | Event;
@@ -18,11 +19,11 @@ export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (p
 export declare const datePickerPropDropdownForm: readonly ["default", "brick", "round"];
 export declare type DatePickerPropDropdownForm = typeof datePickerPropDropdownForm[number];
 export declare const datePickerPropDropdownFormDefault: "default";
-declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends 'date' | 'date-time' ? TextFieldPropWidth : never;
-declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends 'date' | 'date-time' ? React.Ref<HTMLInputElement> : never;
-declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends 'date-range' ? React.Ref<HTMLInputElement> : never;
-declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends 'date-range' ? string | IconComponent : never;
-declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends 'date-range' ? React.FocusEventHandler<HTMLElement> : never;
+declare type DatePickerPropCalendarWidth<TYPE> = TYPE extends Range ? TextFieldPropWidth : never;
+declare type DatePickerPropCalendarInputRef<TYPE> = TYPE extends Range ? never : React.Ref<HTMLInputElement>;
+declare type DatePickerPropCalendarStartInputRef<TYPE> = TYPE extends Range ? React.Ref<HTMLInputElement> : never;
+declare type DatePickerPropCalendarStartLeftSide<TYPE> = TYPE extends Range ? string | IconComponent : never;
+declare type DatePickerPropCalendarStartOnFocus<TYPE> = TYPE extends Range ? React.FocusEventHandler<HTMLElement> : never;
 export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     type?: TYPE;
     value?: DatePickerPropValue<TYPE>;
@@ -110,4 +111,6 @@ export declare const datePickerPropPlaceholderTypeDateTime: string;
 export declare const normalizeRangeValue: (dateRange: DateRange) => DateRange;
 export declare const getMultiplicityTime: (format: string, multiplicityHours: number | undefined, multiplicityMinutes: number | undefined, multiplicitySeconds: number | undefined) => (number | undefined)[];
 export declare const getTimeEnum: (length: number, multiplicity: number | undefined, startOfUnits: (date: Date) => Date, addUnits: (date: Date, amount: number) => Date, getItemLabel: (date: Date) => string) => string[];
+export declare const getFormForStart: (form: TextFieldPropForm) => "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear";
+export declare const getFormForEnd: (form: TextFieldPropForm) => "default" | "round" | "brick" | "brickRound" | "roundBrick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear";
 export {};

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

@@ -1,6 +1,7 @@
 import { startOfToday } from 'date-fns';
 import { range } from '../../utils/array';
-export var datePickerPropType = ['date', 'date-range', 'date-time'];
+import { getByMap } from '../../utils/getByMap';
+export var datePickerPropType = ['date', 'date-range', 'date-time', 'date-time-range'];
 export var datePickerPropTypeDefault = datePickerPropType[0];
 export var datePickerErrorTypes = [
     'outOfRange',
@@ -43,3 +44,37 @@ export var getTimeEnum = function (length, multiplicity, startOfUnits, addUnits,
         return getItemLabel(addUnits(startDate, number * multiplicity));
     });
 };
+var mapFormForStart = {
+    "default": 'defaultClear',
+    defaultClear: 'defaultClear',
+    defaultBrick: 'defaultClear',
+    brick: 'brickClear',
+    brickDefault: 'brickClear',
+    brickClear: 'brickClear',
+    brickRound: 'brickClear',
+    round: 'roundClear',
+    roundClear: 'roundClear',
+    roundBrick: 'roundClear',
+    clearRound: 'clearClear',
+    clearDefault: 'clearClear',
+    clearBrick: 'clearClear',
+    clearClear: 'clearClear'
+};
+var mapFormForEnd = {
+    "default": 'brickDefault',
+    defaultClear: 'brickClear',
+    defaultBrick: 'brick',
+    brick: 'brick',
+    brickDefault: 'brickDefault',
+    brickClear: 'brickClear',
+    brickRound: 'brickRound',
+    round: 'brickRound',
+    roundClear: 'brickClear',
+    roundBrick: 'brick',
+    clearRound: 'brickRound',
+    clearDefault: 'brickDefault',
+    clearBrick: 'brick',
+    clearClear: 'brickClear'
+};
+export var getFormForStart = function (form) { return getByMap(mapFormForStart, form); };
+export var getFormForEnd = function (form) { return getByMap(mapFormForEnd, form); };

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/DateTimeTypeDateTime/DateTimeTypeDateTime.js

@@ -10,12 +10,12 @@ 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, 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({
+    var className = props.className, onMoveProp = props.onMove, currentVisibleDate = props.currentVisibleDate, value = props.value, onChange = props.onChange, onChangeRange = props.onChangeRange, minDate = props.minDate, maxDate = props.maxDate, events = props.events, locale = props.locale, onChangeCurrentVisibleDate = props.onChangeCurrentVisibleDate, multiplicitySeconds = props.multiplicitySeconds, multiplicityMinutes = props.multiplicityMinutes, multiplicityHours = props.multiplicityHours, style = props.style, renderAdditionalControls = props.renderAdditionalControls, _a = props.timeFor, timeFor = _a === void 0 ? 'start' : _a, otherProps = __rest(props, ["className", "onMove", "currentVisibleDate", "value", "onChange", "onChangeRange", "minDate", "maxDate", "events", "locale", "onChangeCurrentVisibleDate", "multiplicitySeconds", "multiplicityMinutes", "multiplicityHours", "style", "renderAdditionalControls", "timeFor"]);
+    var _b = __read(useState(moveTypes[2]), 2), moveType = _b[0], setMoveType = _b[1];
+    var _c = __read(useState({
         '--root-padding-left': '0px'
-    }), 2), cssVars = _b[0], setCssVars = _b[1];
-    var _c = __read(useOnChange(onChange, value), 2), onDateChange = _c[0], onTimeChange = _c[1];
+    }), 2), cssVars = _c[0], setCssVars = _c[1];
+    var _d = __read(useOnChange(onChange, onChangeRange, value, timeFor), 4), onDateChange = _d[0], onDateChangeRange = _d[1], onTimeChange = _d[2], valueTime = _d[3];
     var rootRef = useRef(null);
     var onMove = function (type) {
         setMoveType(type);
@@ -31,7 +31,7 @@ export var DateTimeTypeDateTime = forwardRef(function (props, ref) {
     }, []);
     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(DateTimeTypeDate, { className: cnDateTimeTypeDateTime('Date', { withTime: withTime }), onMove: onMove, currentVisibleDate: currentVisibleDate, value: value, onChange: onDateChange, onChangeRange: onDateChangeRange, minDate: minDate, maxDate: maxDate, events: events, locale: locale, renderAdditionalControls: withTime ? undefined : renderAdditionalControls, onChangeCurrentVisibleDate: onChangeCurrentVisibleDate }),
+            withTime && (React.createElement(DateTimeTypeTime, { className: cnDateTimeTypeDateTime('Time'), value: valueTime, 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,3 @@
-import { DateTimePropOnChange } from '../helpers';
-export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, value: Date | undefined) => DateTimePropOnChange[];
+import { DateRange } from '../../../utils/types/Date';
+import { DateTimePropOnChange, DateTimePropOnChangeRange } from '../helpers';
+export declare const useOnChange: (onChange: DateTimePropOnChange | undefined, onChangeRange: DateTimePropOnChangeRange<'date-time'> | undefined, value: DateRange | Date | undefined, timeFor: 'start' | 'end') => [DateTimePropOnChange, DateTimePropOnChangeRange<'date-time'>, DateTimePropOnChange, Date | undefined];

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

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

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

@@ -26,7 +26,7 @@ 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 })),

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

@@ -7,7 +7,7 @@ export declare const dateTimePropViewDefault: "classic";
 export declare const dateTimePropType: readonly ["date", "month", "year", "time", "date-time"];
 export declare type DateTimePropType = typeof dateTimePropType[number];
 export declare const dateTimePropTypeDefault: "date";
-export declare type СapableRangeType = 'date' | 'month' | 'year';
+export declare type СapableRangeType = 'date' | 'month' | 'year' | 'date-time';
 export declare type DateTimePropValue<TYPE> = TYPE extends СapableRangeType ? Date | DateRange : Date;
 export declare type DateTimePropOnChange = (props: {
     value: Date;
@@ -27,6 +27,7 @@ declare type LocaleWords = {
 export declare type DateTimePropLocale = Locale & LocaleWords;
 export declare const moveTypes: readonly ["year", "month", "day", "time"];
 export declare type MoveType = typeof moveTypes[number];
+declare type DateTimePropTimeFor<TYPE> = TYPE extends 'date-time' ? 'start' | 'end' : never;
 export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = PropsWithHTMLAttributesAndRef<{
     currentVisibleDate?: Date;
     type?: TYPE;
@@ -45,6 +46,7 @@ export declare type DateTimeProps<TYPE extends DateTimePropType = 'date'> = Prop
     multiplicityHours?: number;
     onMove?: (type: MoveType) => void;
     renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    timeFor?: DateTimePropTimeFor<TYPE>;
 }, HTMLDivElement>;
 export declare type DateTimeAdditionalControlRenderProp = React.ReactNode | React.ReactNode[] | AdditionalControlRenderType;
 export declare type AdditionalControlRenderType = (props: DateTimeAdditionalControlRenderProps) => React.ReactNode | React.ReactNode[];

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

@@ -22,10 +22,7 @@ export declare const eventInterceptorMap: {
         children?: undefined;
     } & 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/helper").Item[];
-        children?: undefined;
-    }, HTMLDivElement>>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
+    readonly SnackBar: <P_1 extends import("../SnackBar/types").SnackBarProps<import("../SnackBar/types").SnackBarItemDefault>>(props: P_1, handler: import("./EventInterceptor").EventInterceptorHandler) => P_1;
     readonly TextField: <P_2 extends {
         className?: string | undefined;
         value?: string | null | undefined;
@@ -60,7 +57,7 @@ export declare const eventInterceptorMap: {
         min?: string | number | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
-        step?: string | number | undefined;
+        step?: string | number | number[] | undefined;
         tabIndex?: number | undefined;
         inputContainerRef?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
         inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | import("react").RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;

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

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

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

@@ -70,7 +70,7 @@ export declare const useTextFieldEventsHandler: <P extends {
     min?: string | number | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    step?: string | number | undefined;
+    step?: string | number | number[] | undefined;
     tabIndex?: number | undefined;
     inputContainerRef?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
     inputRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | React.RefObject<HTMLInputElement | HTMLTextAreaElement> | null | undefined;

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

@@ -6,7 +6,7 @@ import { useSelect } from '../../hooks/useSelect/useSelect';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { cnSelect, COMPONENT_NAME } from '../SelectComponents/cnSelect';
-import { getSelectDropdownForm } from '../SelectComponents/helpers';
+import { defaultLabelForEmptyItems, getSelectDropdownForm } from '../SelectComponents/helpers';
 import { SelectContainer } from '../SelectComponents/SelectContainer/SelectContainer';
 import { SelectDropdown } from '../SelectComponents/SelectDropdown/SelectDropdown';
 import { SelectItem } from '../SelectComponents/SelectItem/SelectItem';
@@ -15,8 +15,8 @@ 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, 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({
+    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, _g = _a.labelForEmptyItems, labelForEmptyItems = _g === void 0 ? defaultLabelForEmptyItems : _g, 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", "labelForEmptyItems", "getItemKey", "getItemGroupKey", "getItemDisabled", "getGroupKey", "getGroupLabel", "renderItem", "renderValue", "inputRef", "style"]);
+    var _h = useSelect({
         items: items,
         groups: groups,
         value: value,
@@ -32,7 +32,7 @@ function SelectRender(props, ref) {
         multiple: false,
         onBlur: onBlur,
         onFocus: onFocus
-    }), getKeyProps = _g.getKeyProps, getOptionProps = _g.getOptionProps, isOpen = _g.isOpen, visibleItems = _g.visibleItems, isFocused = _g.isFocused, handleInputFocus = _g.handleInputFocus, handleInputBlur = _g.handleInputBlur, handleToggleDropdown = _g.handleToggleDropdown, inputRef = _g.inputRef, handleInputClick = _g.handleInputClick, notFound = _g.notFound;
+    }), getKeyProps = _h.getKeyProps, getOptionProps = _h.getOptionProps, isOpen = _h.isOpen, visibleItems = _h.visibleItems, isFocused = _h.isFocused, handleInputFocus = _h.handleInputFocus, handleInputBlur = _h.handleInputBlur, handleToggleDropdown = _h.handleToggleDropdown, inputRef = _h.inputRef, handleInputClick = _h.handleInputClick, notFound = _h.notFound, hasItems = _h.hasItems;
     var dropdownForm = getSelectDropdownForm(form);
     var renderItemDefault = function (props) {
         var item = props.item, active = props.active, hovered = props.hovered, onClick = props.onClick, onMouseEnter = props.onMouseEnter;
@@ -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, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex + 1 } : undefined })));
+        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, labelForEmptyItems: labelForEmptyItems, hasItems: hasItems, 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/Select/helpers.d.ts

@@ -42,6 +42,7 @@ export declare type SelectProps<ITEM = DefaultItem, GROUP = DefaultGroup> = Prop
     dropdownRef?: React.RefObject<HTMLDivElement>;
     required?: boolean;
     name?: string;
+    labelForEmptyItems?: string;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM>;
     renderValue?: PropRenderValue<ITEM>;
@@ -101,6 +102,7 @@ export declare function withDefaultGetters<ITEM, GROUP>(props: SelectProps<ITEM,
     dropdownRef?: React.RefObject<HTMLDivElement> | undefined;
     required?: boolean | undefined;
     name?: string | undefined;
+    labelForEmptyItems?: string | undefined;
     value?: PropValue<ITEM>;
     renderItem?: PropRenderItem<ITEM> | undefined;
     renderValue?: PropRenderValue<ITEM> | undefined;

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

@@ -104,7 +104,8 @@
               transform: translateY(var(--transition-spase));
     }
 
-  .SelectDropdown-LabelForNotFound {
+  .SelectDropdown-LabelForNotFound,
+  .SelectDropdown-LabelForEmptyItems {
     padding: 0 var(--space-xs);
   }
 

package/__internal__/src/components/SelectComponents/SelectDropdown/SelectDropdown.d.ts

@@ -23,7 +23,9 @@ declare type Props<ITEM, GROUP> = PropsWithJsxAttributes<{
     getGroupLabel?: (group: GROUP) => string;
     labelForCreate?: string;
     labelForNotFound?: string;
+    labelForEmptyItems?: string;
     notFound?: boolean;
+    hasItems?: boolean;
 }>;
 declare type SelectDropdown = <ITEM, GROUP>(props: Props<ITEM, GROUP>) => React.ReactElement | null;
 export declare const SelectDropdown: SelectDropdown;

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

@@ -1,6 +1,6 @@
 import { __assign, __rest } from "tslib";
 import './SelectDropdown.css';
-import React, { Fragment } from 'react';
+import React, { Fragment, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { isOptionForCreate, } from '../../../hooks/useSelect/useSelect';
 import { cn } from '../../../utils/bem';
@@ -15,11 +15,12 @@ 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, ref = props.ref, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound", "ref"]);
+    var controlRef = props.controlRef, size = props.size, getOptionProps = props.getOptionProps, dropdownRef = props.dropdownRef, labelForCreate = props.labelForCreate, className = props.className, labelForNotFound = props.labelForNotFound, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "getGroupLabel", "notFound"]);
     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, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), equalAnchorWidth: true }),
+    var popoverRef = useRef(null);
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, nodeRef: popoverRef, classNames: cnSelectDropdownCssTransition, timeout: 200 },
+        React.createElement(Popover, __assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, ref: popoverRef, 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)) {
@@ -31,5 +32,6 @@ export var SelectDropdown = function (props) {
                             return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
                         })));
                 }),
-                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound))))));
+                notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))));
 };

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

@@ -3,4 +3,5 @@ import { PropForm } from './types';
 export declare function getSelectDropdownForm(form: PropForm): SelectDropdownPropForm;
 export declare const defaultlabelForNotFound = "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E";
 export declare const defaultlabelForCreate = "+";
+export declare const defaultLabelForEmptyItems = "\u0421\u043F\u0438\u0441\u043E\u043A \u043F\u0443\u0441\u0442";
 export declare const getInputWidth: (controlInnerRef: React.RefObject<HTMLDivElement>, helperInputFakeElement: React.RefObject<HTMLDivElement>) => number;

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

@@ -18,6 +18,7 @@ export function getSelectDropdownForm(form) {
 }
 export var defaultlabelForNotFound = 'Не найдено';
 export var defaultlabelForCreate = '+';
+export var defaultLabelForEmptyItems = 'Список пуст';
 export var getInputWidth = function (controlInnerRef, helperInputFakeElement) {
     if (!controlInnerRef.current || !helperInputFakeElement.current) {
         return 20;

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

@@ -1,6 +1,6 @@
 import { __assign } from "tslib";
 import './SelectDropdown.css';
-import React from 'react';
+import React, { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { cn } from '../../../utils/bem';
 import { cnForCssTransition } from '../../../utils/cnForCssTransition';
@@ -14,8 +14,9 @@ var cnSelectDropdown = cn('SelectDropdownDeprecated');
 var cnSelectDropdownCssTransition = cnForCssTransition(cnSelectDropdown);
 export var SelectDropdown = function (props) {
     var controlRef = props.controlRef, visibleOptions = props.visibleOptions, highlightedIndex = props.highlightedIndex, size = props.size, getOptionProps = props.getOptionProps, inputValue = props.inputValue, dropdownRef = props.dropdownRef, id = props.id, _a = props.hasGroup, hasGroup = _a === void 0 ? false : _a, selectedValues = props.selectedValues, labelForCreate = props.labelForCreate, getOptionKey = props.getOptionKey, className = props.className, labelForNotFound = props.labelForNotFound, _b = props.form, form = _b === void 0 ? defaultSelectDropdownPropForm : _b, isOpen = props.isOpen, renderItem = props.renderItem;
-    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]), "aria-activedescendant": id + "-" + highlightedIndex, equalAnchorWidth: true },
+    var popoverRef = useRef(null);
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, appear: true, classNames: cnSelectDropdownCssTransition, timeout: 200, nodeRef: popoverRef },
+        React.createElement(Popover, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: 1, ref: popoverRef, role: "listbox", className: cnSelectDropdown({ form: form, size: size }, [className]), "aria-activedescendant": id + "-" + highlightedIndex, equalAnchorWidth: true },
             React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef }, visibleOptions.length > 0 ? (visibleOptions.map(function (option, index) {
                 var isOptionForCreate = 'optionForCreate' in option;
                 var currentOption = visibleOptions[index];

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

@@ -34,6 +34,7 @@ var ContextConsumer = function (_a) {
 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, 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 portalRef = useRef(null);
     var theme = useTheme().theme;
     useEffect(function () {
         if (isOpen) {
@@ -46,8 +47,8 @@ export var Sidebar = function (props) {
     useGlobalKeys({
         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, className: rootClassName, style: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? { zIndex: style.zIndex } : undefined },
+    return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition(cnSidebar), timeout: 200, nodeRef: portalRef },
+        React.createElement(PortalWithTheme, { preset: theme, ref: portalRef, 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({}, 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)))));