npm - @consta/uikit - Versions diffs - 3.18.3 → 3.21.0 - Mend

@consta/uikit 3.18.3 → 3.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (458) hide show

package/__internal__/cjs-src/components/DatePickerCanary/DatePickerTypeYearRange/DatePickerTypeYearRange.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { DatePickerTypeComponent } from '../types';
2	+ export declare const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'>;

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

@@ -0,0 +1,107 @@
+"use strict";
+exports.__esModule = true;
+exports.DatePickerTypeYearRange = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var date_fns_1 = require("date-fns");
+var useClickOutside_1 = require("../../../hooks/useClickOutside/useClickOutside");
+var useFlag_1 = require("../../../hooks/useFlag/useFlag");
+var useForkRef_1 = require("../../../hooks/useForkRef/useForkRef");
+var DatePickerDropdown_1 = require("../DatePickerDropdown/DatePickerDropdown");
+var DatePickerFieldTypeYearRange_1 = require("../DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange");
+var helpers_1 = require("../helpers");
+var useCurrentVisibleDate_1 = require("../useCurrentVisibleDate");
+exports.DatePickerTypeYearRange = react_1.forwardRef(function (props, ref) {
+    var _a, _b, _c, _d;
+    var events = props.events, dateTimeView = props.dateTimeView, locale = props.locale, dropdownForm = props.dropdownForm, onFocus = props.onFocus, onBlur = props.onBlur, leftSide = props.leftSide, rightSide = props.rightSide, style = props.style, currentVisibleDateProp = props.currentVisibleDate, onChangeCurrentVisibleDateProp = props.onChangeCurrentVisibleDate, renderAdditionalControls = props.renderAdditionalControls, inputRef = props.inputRef, name = props.name, fieldProps = tslib_1.__rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name"]);
+    var startFieldRef = react_1.useRef(null);
+    var endFieldRef = react_1.useRef(null);
+    var startFieldInputRef = react_1.useRef(null);
+    var endFieldInputRef = react_1.useRef(null);
+    var calendarRef = react_1.useRef(null);
+    var _e = tslib_1.__read(react_1.useState(false), 2), fieldFocused = _e[0], setFieldFocused = _e[1];
+    var 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: helpers_1.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: helpers_1.normalizeRangeValue([(_e = props === null || props === void 0 ? void 0 : props.value) === null || _e === void 0 ? void 0 : _e[0], value]) });
+        }
+    };
+    var _f = tslib_1.__read(useFlag_1.useFlag(false), 2), calendarVisible = _f[0], setCalendarVisible = _f[1];
+    var _g = tslib_1.__read(useCurrentVisibleDate_1.useCurrentVisibleDate(currentVisibleDateProp, onChangeCurrentVisibleDateProp), 2), currentVisibleDate = _g[0], setCurrentVisibleDate = _g[1];
+    var startFieldOnBlurHandler = function (e) { var _a; return Array.isArray(onBlur) ? (_a = onBlur[0]) === null || _a === void 0 ? void 0 : _a.call(onBlur, e) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); };
+    var endFieldOnBlurHandler = function (e) { var _a; return Array.isArray(onBlur) ? (_a = onBlur[1]) === null || _a === void 0 ? void 0 : _a.call(onBlur, e) : onBlur === null || onBlur === void 0 ? void 0 : onBlur(e); };
+    var startFieldOnFocusHandler = function (e) {
+        var _a;
+        setFieldFocused('start');
+        setCalendarVisible.on();
+        Array.isArray(onFocus) ? (_a = onFocus[0]) === null || _a === void 0 ? void 0 : _a.call(onFocus, e) : onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    var endFieldOnFocusHandler = function (e) {
+        var _a;
+        setFieldFocused('end');
+        setCalendarVisible.on();
+        Array.isArray(onFocus) ? (_a = onFocus[1]) === null || _a === void 0 ? void 0 : _a.call(onFocus, e) : onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+    };
+    // эфект для того чтобы календарь переключался при вводе с клавиатуры
+    react_1.useEffect(function () {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && props.dateTimeView === 'classic' && startFocused) {
+            var newVisibleDate = date_fns_1.startOfDecade(props.value[0]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[0]) && props.dateTimeView !== 'classic' && startFocused) {
+            var newVisibleDate = date_fns_1.startOfDecade(props.value[0]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && date_fns_1.addYears(currentVisibleDate, 10).getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (!((_c = props.value) === null || _c === void 0 ? void 0 : _c[0]) && startFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getTime(), calendarVisible, startFocused]);
+    react_1.useEffect(function () {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && props.dateTimeView === 'classic' && endFocused) {
+            var newVisibleDate = date_fns_1.startOfDecade(props.value[1]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime())) {
+                setCurrentVisibleDate(newVisibleDate);
+            }
+            return;
+        }
+        if (((_b = props.value) === null || _b === void 0 ? void 0 : _b[1]) && props.dateTimeView !== 'classic' && endFocused) {
+            var newVisibleDate = date_fns_1.startOfDecade(props.value[1]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && date_fns_1.addYears(currentVisibleDate, 10).getTime())) {
+                setCurrentVisibleDate(date_fns_1.addYears(newVisibleDate, -10));
+            }
+            return;
+        }
+        if (!((_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) && endFocused) {
+            setCurrentVisibleDate(currentVisibleDateProp);
+        }
+    }, [(_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.getTime(), calendarVisible, endFocused]);
+    useClickOutside_1.useClickOutside({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
+        handler: function () {
+            setFieldFocused(false);
+            setCalendarVisible.off();
+        }
+    });
+    return (react_1["default"].createElement(react_1["default"].Fragment, null,
+        react_1["default"].createElement(DatePickerFieldTypeYearRange_1.DatePickerFieldTypeYearRange, tslib_1.__assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef_1.useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: useForkRef_1.useForkRef([endFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[1]]), startFieldOnFocus: startFieldOnFocusHandler, endFieldOnFocus: endFieldOnFocusHandler, startFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[0] : leftSide, startFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[0] : undefined, endFieldLeftSide: Array.isArray(leftSide) ? leftSide === null || leftSide === void 0 ? void 0 : leftSide[1] : undefined, endFieldRightSide: Array.isArray(rightSide) ? rightSide === null || rightSide === void 0 ? void 0 : rightSide[1] : rightSide, startFieldOnBlur: startFieldOnBlurHandler, endFieldOnBlur: endFieldOnBlurHandler, startFocused: startFocused, endFocused: endFocused, startFieldName: Array.isArray(name) ? name[0] : name + "_start", endFieldName: Array.isArray(name) ? name[1] : name + "_end" })),
+        react_1["default"].createElement(DatePickerDropdown_1.DatePickerDropdown, { type: "year", ref: calendarRef, anchorRef: startFieldRef, isOpen: calendarVisible, onChangeCurrentVisibleDate: setCurrentVisibleDate, currentVisibleDate: currentVisibleDate, value: props.value || undefined, view: dateTimeView, events: events, locale: locale, minDate: props.minDate, maxDate: props.maxDate, form: dropdownForm, onChange: hadleChange, renderAdditionalControls: renderAdditionalControls, zIndex: typeof (style === null || style === void 0 ? void 0 : style.zIndex) === 'number' ? style.zIndex + 1 : undefined })));
+});

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

@@ -1,108 +1,6 @@
-/// <reference types="react" />
-import { Locale } from 'date-fns';
-import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { DateRange } from '../../utils/types/Date';
-import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
-import { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
-import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
-export declare const datePickerPropType: readonly ["date", "date-range", "date-time", "date-time-range", "time"];
-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 Range ? DateRange : Date) | null;
-export declare type DatePickerPropOnChange<TYPE extends DatePickerPropType> = (props: {
-    value: DatePickerPropValue<TYPE>;
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent> | Event;
-}) => void;
-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 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>;
-    onChange?: DatePickerPropOnChange<TYPE>;
-    minDate?: Date;
-    maxDate?: Date;
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
-    events?: Date[];
-    dateTimeView?: DatePickerPropDateTimeView;
-    locale?: Locale;
-    children?: never;
-    onError?: DatePickerPropOnError;
-    id?: string;
-    name?: string;
-    disabled?: boolean;
-    size?: TextFieldPropSize;
-    view?: TextFieldPropView;
-    form?: TextFieldPropForm;
-    status?: TextFieldPropStatus;
-    onFocus?: React.FocusEventHandler<HTMLElement>;
-    onBlur?: React.FocusEventHandler<HTMLElement>;
-    autoFocus?: boolean;
-    placeholder?: string;
-    readOnly?: boolean;
-    required?: boolean;
-    tabIndex?: number;
-    inputRef?: DatePickerPropCalendarInputRef<TYPE>;
-    ariaLabel?: string;
-    iconSize?: IconPropSize;
-    format?: string;
-    separator?: string;
-    dropdownForm?: DatePickerPropDropdownForm;
-    width?: DatePickerPropCalendarWidth<TYPE>;
-    leftSide?: string | IconComponent;
-    rightSide?: string | IconComponent;
-    startFieldInputRef?: DatePickerPropCalendarStartInputRef<TYPE>;
-    endFieldInputRef?: DatePickerPropCalendarStartInputRef<TYPE>;
-    startFieldLeftSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
-    startFieldRightSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
-    endFieldLeftSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
-    endFieldRightSide?: DatePickerPropCalendarStartLeftSide<TYPE>;
-    startFieldOnFocus?: DatePickerPropCalendarStartOnFocus<TYPE>;
-    endFieldOnFocus?: DatePickerPropCalendarStartOnFocus<TYPE>;
-    startFieldOnBlur?: DatePickerPropCalendarStartOnFocus<TYPE>;
-    endFieldOnBlur?: DatePickerPropCalendarStartOnFocus<TYPE>;
-    label?: string;
-    caption?: string;
-    labelPosition?: 'top' | 'left';
-    onChangeCurrentVisibleDate?: (date: Date) => void;
-    currentVisibleDate?: Date;
-    multiplicitySeconds?: number;
-    multiplicityMinutes?: number;
-    multiplicityHours?: number;
-}, HTMLDivElement>;
-export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
-export declare type DatePickerTypeComponent<TYPE extends DatePickerPropType> = (props: Omit<DatePickerProps<TYPE>, 'type'>) => React.ReactElement | null;
-export declare type DatePickerPropOnError = (props: {
-    type: typeof datePickerErrorTypes[0];
-    stringValue: string;
-    dd?: string;
-    MM?: string;
-    yyyy?: string;
-    ss?: string;
-    mm?: string;
-    HH?: string;
-    date: Date;
-} | {
-    type: typeof datePickerErrorTypes[1];
-    stringValue: string;
-    dd?: string;
-    MM?: string;
-    yyyy?: string;
-    ss?: string;
-    mm?: string;
-    HH?: string;
-} | {
-    type: typeof datePickerErrorTypes[2];
-    date: [Date, Date];
-}) => void;
+import { TextFieldPropForm } from '../TextField/TextField';
+import { DatePickerPropType } from './types';
 export declare const datePickerPropSeparatorDefault = ".";
 export declare const datePickerPropFormatTypeDate: string;
 export declare const datePickerPropPlaceholderTypeDate: string;
@@ -110,6 +8,8 @@ export declare const datePickerPropFormatTypeTime = "HH:mm:ss";
 export declare const datePickerPropPlaceholderTypeTime = "\u0427\u0427:\u041C\u041C:\u0421\u0421";
 export declare const datePickerPropFormatTypeDateTime: string;
 export declare const datePickerPropPlaceholderTypeDateTime: string;
+export declare const datePickerPropFormatTypeYear = "yyyy";
+export declare const datePickerPropPlaceholderTypeYear = "\u0413\u0413\u0413\u0413";
 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[];
@@ -118,4 +18,4 @@ export declare const getFormForEnd: (form: TextFieldPropForm) => "default" | "ro
 export declare const getParts: (format: string, separator: string, withTime?: boolean | undefined) => string[];
 export declare const getPartsDate: (value: string, format: string, separator: string, withTime: boolean, markers: string[]) => (string | undefined)[];
 export declare const isTypeWithTime: (type: DatePickerPropType) => boolean;
-export {};
+export declare const getFieldName: (name: [string?, string?] | string | undefined, rangeIndex: 0 | 1) => string | undefined;

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

@@ -1,25 +1,10 @@
 "use strict";
 exports.__esModule = true;
-exports.isTypeWithTime = exports.getPartsDate = exports.getParts = exports.getFormForEnd = exports.getFormForStart = exports.getTimeEnum = exports.getMultiplicityTime = exports.normalizeRangeValue = exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropFormatTypeDateTime = exports.datePickerPropPlaceholderTypeTime = exports.datePickerPropFormatTypeTime = exports.datePickerPropPlaceholderTypeDate = exports.datePickerPropFormatTypeDate = exports.datePickerPropSeparatorDefault = exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
+exports.getFieldName = exports.isTypeWithTime = exports.getPartsDate = exports.getParts = exports.getFormForEnd = exports.getFormForStart = exports.getTimeEnum = exports.getMultiplicityTime = exports.normalizeRangeValue = exports.datePickerPropPlaceholderTypeYear = exports.datePickerPropFormatTypeYear = exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropFormatTypeDateTime = exports.datePickerPropPlaceholderTypeTime = exports.datePickerPropFormatTypeTime = exports.datePickerPropPlaceholderTypeDate = exports.datePickerPropFormatTypeDate = exports.datePickerPropSeparatorDefault = void 0;
 var tslib_1 = require("tslib");
 var date_fns_1 = require("date-fns");
 var array_1 = require("../../utils/array");
 var getByMap_1 = require("../../utils/getByMap");
-exports.datePickerPropType = [
-    'date',
-    'date-range',
-    'date-time',
-    'date-time-range',
-    'time',
-];
-exports.datePickerPropTypeDefault = exports.datePickerPropType[0];
-exports.datePickerErrorTypes = [
-    'outOfRange',
-    'invalidInputAttempt',
-    'startDateIsGreaterThanEndDate',
-];
-exports.datePickerPropDropdownForm = ['default', 'brick', 'round'];
-exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm[0];
 exports.datePickerPropSeparatorDefault = '.';
 exports.datePickerPropFormatTypeDate = "dd" + exports.datePickerPropSeparatorDefault + "MM" + exports.datePickerPropSeparatorDefault + "yyyy";
 exports.datePickerPropPlaceholderTypeDate = "\u0414\u0414" + exports.datePickerPropSeparatorDefault + "\u041C\u041C" + exports.datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
@@ -27,6 +12,8 @@ exports.datePickerPropFormatTypeTime = "HH:mm:ss";
 exports.datePickerPropPlaceholderTypeTime = "\u0427\u0427:\u041C\u041C:\u0421\u0421";
 exports.datePickerPropFormatTypeDateTime = exports.datePickerPropFormatTypeDate + " " + exports.datePickerPropFormatTypeTime;
 exports.datePickerPropPlaceholderTypeDateTime = exports.datePickerPropPlaceholderTypeDate + " " + exports.datePickerPropPlaceholderTypeTime;
+exports.datePickerPropFormatTypeYear = "yyyy";
+exports.datePickerPropPlaceholderTypeYear = "\u0413\u0413\u0413\u0413";
 exports.normalizeRangeValue = function (dateRange) {
     var _a, _b;
     if (dateRange[0] && dateRange[1] && ((_a = dateRange[0]) === null || _a === void 0 ? void 0 : _a.getTime()) > ((_b = dateRange[1]) === null || _b === void 0 ? void 0 : _b.getTime())) {
@@ -110,3 +97,13 @@ exports.getPartsDate = function (value, format, separator, withTime, markers) {
     return markers.map(function (marker) { return getPartDate(formatArray, stringArray, marker); });
 };
 exports.isTypeWithTime = function (type) { return type.indexOf('time') !== -1; };
+var fieldPrefixs = ['start', 'end'];
+exports.getFieldName = function (name, rangeIndex) {
+    if (!name) {
+        return undefined;
+    }
+    if (Array.isArray(name)) {
+        return name[rangeIndex];
+    }
+    return name + "_" + fieldPrefixs[rangeIndex];
+};

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

@@ -0,0 +1,96 @@
+/// <reference types="react" />
+import { Locale } from 'date-fns';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
+import { DateRange } from '../../utils/types/Date';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { DateTimeAdditionalControlRenderProp, DateTimePropView } from '../DateTimeCanary/helpers';
+import { TextFieldPropForm, TextFieldPropSize, TextFieldPropStatus, TextFieldPropView, TextFieldPropWidth } from '../TextField/TextField';
+export declare const datePickerPropType: readonly ["date", "date-range", "date-time", "date-time-range", "time", "year", "year-range"];
+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' | 'year-range';
+export declare const datePickerErrorTypes: readonly ["outOfRange", "invalidInputAttempt", "startDateIsGreaterThanEndDate"];
+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;
+}) => void;
+export declare const datePickerPropDropdownForm: readonly ["default", "brick", "round"];
+export declare type DatePickerPropDropdownForm = typeof datePickerPropDropdownForm[number];
+export declare const datePickerPropDropdownFormDefault: "default";
+declare type DatePickerPropWidth<TYPE> = TYPE extends Range ? TextFieldPropWidth : never;
+declare type DatePickerPropInputRef<TYPE> = TYPE extends Range ? [React.Ref<HTMLInputElement>?, React.Ref<HTMLInputElement>?] : React.Ref<HTMLInputElement>;
+declare type DatePickerPropSide<TYPE> = TYPE extends Range ? [(string | IconComponent)?, (string | IconComponent)?] | string | IconComponent : string | IconComponent;
+declare type DatePickerPropOnFocus<TYPE> = TYPE extends Range ? [React.FocusEventHandler<HTMLElement>?, React.FocusEventHandler<HTMLElement>?] | React.FocusEventHandler<HTMLElement> : React.FocusEventHandler<HTMLElement>;
+declare type DatePickerPropName<TYPE> = TYPE extends Range ? [string?, string?] | string : string;
+export declare type DatePickerProps<TYPE extends DatePickerPropType = 'date'> = PropsWithHTMLAttributesAndRef<{
+    type?: TYPE;
+    value?: DatePickerPropValue<TYPE>;
+    onChange?: DatePickerPropOnChange<TYPE>;
+    minDate?: Date;
+    maxDate?: Date;
+    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
+    events?: Date[];
+    dateTimeView?: DatePickerPropDateTimeView;
+    locale?: Locale;
+    children?: never;
+    onError?: DatePickerPropOnError;
+    id?: string;
+    name?: DatePickerPropName<TYPE>;
+    disabled?: boolean;
+    size?: TextFieldPropSize;
+    view?: TextFieldPropView;
+    form?: TextFieldPropForm;
+    status?: TextFieldPropStatus;
+    onFocus?: DatePickerPropOnFocus<TYPE>;
+    onBlur?: DatePickerPropOnFocus<TYPE>;
+    autoFocus?: boolean;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    tabIndex?: number;
+    inputRef?: DatePickerPropInputRef<TYPE>;
+    ariaLabel?: string;
+    iconSize?: IconPropSize;
+    format?: string;
+    separator?: string;
+    dropdownForm?: DatePickerPropDropdownForm;
+    width?: DatePickerPropWidth<TYPE>;
+    leftSide?: DatePickerPropSide<TYPE>;
+    rightSide?: DatePickerPropSide<TYPE>;
+    label?: string;
+    caption?: string;
+    labelPosition?: 'top' | 'left';
+    onChangeCurrentVisibleDate?: (date: Date) => void;
+    currentVisibleDate?: Date;
+    multiplicitySeconds?: number;
+    multiplicityMinutes?: number;
+    multiplicityHours?: number;
+}, HTMLDivElement>;
+export declare type DatePickerComponent = <TYPE extends DatePickerPropType = 'date'>(props: DatePickerProps<TYPE>) => React.ReactElement | null;
+export declare type DatePickerTypeComponent<TYPE extends DatePickerPropType> = (props: Omit<DatePickerProps<TYPE>, 'type'>) => React.ReactElement | null;
+export declare type DatePickerPropOnError = (props: {
+    type: typeof datePickerErrorTypes[0];
+    stringValue: string;
+    dd?: string;
+    MM?: string;
+    yyyy?: string;
+    ss?: string;
+    mm?: string;
+    HH?: string;
+    date: Date;
+} | {
+    type: typeof datePickerErrorTypes[1];
+    stringValue: string;
+    dd?: string;
+    MM?: string;
+    yyyy?: string;
+    ss?: string;
+    mm?: string;
+    HH?: string;
+} | {
+    type: typeof datePickerErrorTypes[2];
+    date: [Date, Date];
+}) => void;
+export {};

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

@@ -0,0 +1,20 @@
+"use strict";
+exports.__esModule = true;
+exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm = exports.datePickerErrorTypes = exports.datePickerPropTypeDefault = exports.datePickerPropType = void 0;
+exports.datePickerPropType = [
+    'date',
+    'date-range',
+    'date-time',
+    'date-time-range',
+    'time',
+    'year',
+    'year-range',
+];
+exports.datePickerPropTypeDefault = exports.datePickerPropType[0];
+exports.datePickerErrorTypes = [
+    'outOfRange',
+    'invalidInputAttempt',
+    'startDateIsGreaterThanEndDate',
+];
+exports.datePickerPropDropdownForm = ['default', 'brick', 'round'];
+exports.datePickerPropDropdownFormDefault = exports.datePickerPropDropdownForm[0];

package/__internal__/cjs-src/components/ResponsesExit/ResponsesExit.js CHANGED Viewed

@@ -10,6 +10,6 @@ exports.ResponsesExit = createResponses_1.createResponses({
     name: 'ResponsesExit',
     image: ResponsesExit_1.ResponsesExit,
     title: 'Вы вышли из системы ',
-    description: 'Хотите вернутся?',
+    description: 'Хотите вернуться?',
     actions: react_1["default"].createElement(Button_1.Button, { label: "\u0412\u043E\u0439\u0442\u0438 \u0441\u043D\u043E\u0432\u0430" })
 });

package/__internal__/cjs-src/components/SelectComponents/SelectDropdown/SelectDropdown.js CHANGED Viewed

@@ -19,7 +19,6 @@ exports.defaultSelectDropdownPropForm = exports.selectDropdownform[0];
 var cnSelectDropdown = bem_1.cn('SelectDropdown');
 exports.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, labelForEmptyItems = props.labelForEmptyItems, _a = props.hasItems, hasItems = _a === void 0 ? true : _a, form = props.form, isOpen = props.isOpen, renderItem = props.renderItem, visibleItems = props.visibleItems, isLoading = props.isLoading, getGroupLabel = props.getGroupLabel, notFound = props.notFound, otherProps = tslib_1.__rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "isLoading", "getGroupLabel", "notFound"]);
-    var getIndex = fabricIndex_1.fabricIndex(-1);
     var _b = tslib_1.__read(react_1.useState('downStartLeft'), 2), direction = _b[0], setDirection = _b[1];
     var indent = form === 'round' ? 'increased' : 'normal';
     var popoverRef = react_1.useRef(null);
@@ -28,22 +27,25 @@ exports.SelectDropdown = function (props) {
             return useSelect_1.isOptionForCreate(group) || (Array.isArray(group.items) && group.items.length > 0);
         }).length > 0);
     }, [visibleItems]);
-    return (react_1["default"].createElement(react_transition_group_1.Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: MixPopoverAnimate_1.animateTimeout }, function (animate) { return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: "2xs", ref: popoverRef, role: "listbox", onSetDirection: setDirection, className: cnSelectDropdown({ form: form, size: size }, [
-            className,
-            MixPopoverAnimate_1.cnMixPopoverAnimate({ direction: direction, animate: animate }),
-        ]), equalAnchorWidth: true }),
-        react_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
-            isLoading && react_1["default"].createElement(SelectLoader_1.SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
-            visibleItems.map(function (group) {
-                if (useSelect_1.isOptionForCreate(group)) {
-                    return (react_1["default"].createElement(SelectCreateButton_1.SelectCreateButton, tslib_1.__assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
-                }
-                return (react_1["default"].createElement(react_1.Fragment, { key: group.key },
-                    group.group && getGroupLabel && (react_1["default"].createElement(SelectGroupLabel_1.SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
-                    group.items.map(function (item, i) {
-                        return (react_1["default"].createElement(react_1.Fragment, { key: group.key + "-" + i }, renderItem(tslib_1.__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
-                    })));
-            }),
-            !isLoading && hasItems && notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
-            !isLoading && !hasItems && labelForEmptyItems && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))); }));
+    return (react_1["default"].createElement(react_transition_group_1.Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: MixPopoverAnimate_1.animateTimeout }, function (animate) {
+        var getIndex = fabricIndex_1.fabricIndex(-1);
+        return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({}, otherProps, { anchorRef: controlRef, direction: "downStartLeft", possibleDirections: ['downStartLeft', 'upStartLeft', 'downStartRight', 'upStartRight'], offset: "2xs", ref: popoverRef, role: "listbox", onSetDirection: setDirection, className: cnSelectDropdown({ form: form, size: size }, [
+                className,
+                MixPopoverAnimate_1.cnMixPopoverAnimate({ direction: direction, animate: animate }),
+            ]), equalAnchorWidth: true }),
+            react_1["default"].createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
+                isLoading && react_1["default"].createElement(SelectLoader_1.SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
+                visibleItems.map(function (group) {
+                    if (useSelect_1.isOptionForCreate(group)) {
+                        return (react_1["default"].createElement(SelectCreateButton_1.SelectCreateButton, tslib_1.__assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
+                    }
+                    return (react_1["default"].createElement(react_1.Fragment, { key: group.key },
+                        group.group && getGroupLabel && (react_1["default"].createElement(SelectGroupLabel_1.SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
+                        group.items.map(function (item, i) {
+                            return (react_1["default"].createElement(react_1.Fragment, { key: group.key + "-" + i }, renderItem(tslib_1.__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
+                        })));
+                }),
+                !isLoading && hasItems && notFound && labelForNotFound && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !isLoading && !hasItems && labelForEmptyItems && (react_1["default"].createElement(Text_1.Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems)))));
+    }));
 };

package/__internal__/cjs-src/components/SelectComponents/SelectItem/SelectItem.css CHANGED Viewed

@@ -5,6 +5,7 @@
   color: var(--text-color);
   background-color: var(--color-control-bg-clear);
   font-size: var(--font-size);
+  word-wrap: break-word;
   cursor: pointer;
 }

package/__internal__/cjs-src/components/Table/SelectedOptionsList/TableSelectedOptionsList.css CHANGED Viewed

@@ -18,16 +18,27 @@
     -webkit-box-flex: 1;
         -ms-flex: 1;
             flex: 1;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+    max-width: 100%;
+    padding: 0 var(--cell-padding-horizontal);
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
-    padding: 0 var(--cell-padding-horizontal);
   }
   .TableSelectedOptionsList-Option {
+    max-width: 100%;
     margin: var(--space-2xs) 0;
     margin-right: var(--space-2xs);
   }
+  .TableSelectedOptionsList-Option .TagBase-Label {
+      overflow: hidden;
+      max-width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   .TableSelectedOptionsList-Button {
     opacity: 0;
     -webkit-transition: opacity 0.15s ease-out;

package/__internal__/cjs-src/components/Table/Table.js CHANGED Viewed

@@ -11,6 +11,7 @@ var IconSortUp_1 = require("../../icons/IconSortUp/IconSortUp");
 var IconUnsort_1 = require("../../icons/IconUnsort/IconUnsort");
 var array_1 = require("../../utils/array");
 var bem_1 = require("../../utils/bem");
+var setRef_1 = require("../../utils/setRef");
 var type_guards_1 = require("../../utils/type-guards");
 var Button_1 = require("../Button/Button");
 var Text_1 = require("../Text/Text");
@@ -341,9 +342,7 @@ var InternalTable = function (props, ref) {
         return result;
     };
     var handleCellClick = function (params) {
-        if (onCellClick) {
-            onCellClick(params);
-        }
+        onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(params);
     };
     return (react_1["default"].createElement("div", { ref: useForkRef_1.useForkRef([tableRef, ref]), className: cnTable({
             size: size,
@@ -385,7 +384,7 @@ var InternalTable = function (props, ref) {
                 if (show) {
                     return (react_1["default"].createElement(TableCell_1.TableCell, { type: "content", key: column.accessor, ref: function (ref) {
                             cellsRefs.current[columnIdx + "-" + row.id] = ref;
-                            setBoundaryRef(columnIdx, rowIdx);
+                            setRef_1.setRef(setBoundaryRef(columnIdx, rowIdx), ref);
                         }, style: style, wrapperClassName: cnTable('ContentCell', {
                             isActive: activeRow ? activeRow.id === row.id : false,
                             isDarkned: activeRow

package/__internal__/cjs-src/hooks/useBreakpoints/useBreakpoints.js CHANGED Viewed

@@ -55,11 +55,11 @@ var isEq = function (state, newState) {
 exports.useBreakpoints = function (map) {
     var pointsMap = map || defaultMap;
     var _a = tslib_1.__read(react_1.useState(function () {
-        return mapping(document.documentElement.clientWidth, pointsMap);
+        return mapping(window.innerWidth, pointsMap);
     }), 2), points = _a[0], setSetPoints = _a[1];
     react_1.useLayoutEffect(function () {
         var subscribe = function () {
-            var newPoints = mapping(document.documentElement.clientWidth, pointsMap);
+            var newPoints = mapping(window.innerWidth, pointsMap);
             setSetPoints(function (state) { return (isEq(state, newPoints) ? state : newPoints); });
         };
         window.addEventListener('resize', subscribe);

package/__internal__/cjs-src/hooks/useForkRef/useForkRef.d.ts CHANGED Viewed

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-declare type AtributesRef<T> = React.Ref<T> | undefined;
-declare type ResultRef<T> = React.RefCallback<T> | null;
-export declare function useForkRef<T>(refs: AtributesRef<T>[]): ResultRef<T>;
-export {};
+export declare function useForkRef<T>(refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> | null;

package/__internal__/src/components/BreadcrumbsCanary/BreadcrumbsCanary.js CHANGED Viewed

@@ -5,17 +5,23 @@ import { cn } from '../../utils/bem';
 import { BreadcrumbsFitModeDropdown } from './BreadcrumbsFitModeDropdown/BreadcrumbsFitModeDropdown';
 import { BreadcrumbsFitModeScroll } from './BreadcrumbsFitModeScroll/BreadcrumbsFitModeScroll';
 import { BreadcrumbsItem } from './BreadcrumbsItem/BreadcrumbsItem';
-import { getItemClick, withDefaultGetters } from './helpers';
+import { withDefaultGetters } from './helpers';
 import { breadcrumbPropFitModeDefault, breadcrumbPropSizeDefault, } from './types';
 export var cnBreadcrumbs = cn('Breadcrumbs');
 var BreadcrumbsRender = function (props, ref) {
-    var _a = withDefaultGetters(props), items = _a.items, getItemHref = _a.getItemHref, getItemLabel = _a.getItemLabel, getItemIcon = _a.getItemIcon, getItemOnClick = _a.getItemOnClick, onItemClick = _a.onItemClick, _b = _a.size, size = _b === void 0 ? breadcrumbPropSizeDefault : _b, _c = _a.onlyIconRoot, onlyIconRoot = _c === void 0 ? false : _c, className = _a.className, _d = _a.fitMode, fitMode = _d === void 0 ? breadcrumbPropFitModeDefault : _d, lastItemIsLink = _a.lastItemIsLink, otherProps = __rest(_a, ["items", "getItemHref", "getItemLabel", "getItemIcon", "getItemOnClick", "onItemClick", "size", "onlyIconRoot", "className", "fitMode", "lastItemIsLink"]);
+    var _a = withDefaultGetters(props), items = _a.items, getItemHref = _a.getItemHref, getItemLabel = _a.getItemLabel, getItemIcon = _a.getItemIcon, getItemOnClick = _a.getItemOnClick, getItemSubMenu = _a.getItemSubMenu, onItemClick = _a.onItemClick, _b = _a.size, size = _b === void 0 ? breadcrumbPropSizeDefault : _b, _c = _a.onlyIconRoot, onlyIconRoot = _c === void 0 ? false : _c, className = _a.className, _d = _a.fitMode, fitMode = _d === void 0 ? breadcrumbPropFitModeDefault : _d, lastItemIsLink = _a.lastItemIsLink, otherProps = __rest(_a, ["items", "getItemHref", "getItemLabel", "getItemIcon", "getItemOnClick", "getItemSubMenu", "onItemClick", "size", "onlyIconRoot", "className", "fitMode", "lastItemIsLink"]);
     var shortList = items.length <= 2;
     var renderItem = function (item, index, isFirst, isLast, ref, hidden) {
         if (item === undefined) {
             return;
         }
-        return (React.createElement(BreadcrumbsItem, { className: cnBreadcrumbs('Item', { hidden: hidden }), label: getItemLabel(item), href: getItemHref(item), icon: getItemIcon(item), active: lastItemIsLink ? false : isLast, onClick: getItemClick(item, getItemOnClick, onItemClick), delimiter: !isFirst, onlyIcon: onlyIconRoot && isFirst, key: cnBreadcrumbs('Item', { index: index }), size: size, ref: ref }));
+        var handleClick = function (_a) {
+            var _b;
+            var e = _a.e, item = _a.item;
+            (_b = getItemOnClick === null || getItemOnClick === void 0 ? void 0 : getItemOnClick(item)) === null || _b === void 0 ? void 0 : _b(e);
+            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick({ e: e, item: item });
+        };
+        return (React.createElement(BreadcrumbsItem, { className: cnBreadcrumbs('Item', { hidden: hidden }), item: item, getItemHref: getItemHref, getItemIcon: getItemIcon, getItemLabel: getItemLabel, getItemSubMenu: getItemSubMenu, onItemClick: handleClick, active: lastItemIsLink ? false : isLast, delimiter: !isFirst, onlyIcon: onlyIconRoot && isFirst, key: cnBreadcrumbs('Item', { index: index }), size: size, ref: ref }));
     };
     if (items.length <= 2) {
         return (React.createElement("ul", __assign({}, otherProps, { className: cnBreadcrumbs({ shortList: shortList }, [className]), ref: ref }), items.map(function (item, index) {
@@ -25,7 +31,7 @@ var BreadcrumbsRender = function (props, ref) {
     if (fitMode === 'scroll') {
         return (React.createElement(BreadcrumbsFitModeScroll, __assign({}, otherProps, { className: cnBreadcrumbs(null, [className]), items: items, renderItem: renderItem, ref: ref })));
     }
-    return (React.createElement(BreadcrumbsFitModeDropdown, __assign({}, otherProps, { size: size, className: cnBreadcrumbs(null, [className]), items: items, getItemHref: getItemHref, getItemIcon: getItemIcon, getItemLabel: getItemLabel, getItemOnClick: getItemOnClick, onItemClick: onItemClick, ref: ref, renderItem: renderItem })));
+    return (React.createElement(BreadcrumbsFitModeDropdown, __assign({}, otherProps, { size: size, className: cnBreadcrumbs(null, [className]), items: items, getItemHref: getItemHref, getItemIcon: getItemIcon, getItemLabel: getItemLabel, getItemOnClick: getItemOnClick, getItemSubMenu: getItemSubMenu, onItemClick: onItemClick, ref: ref, renderItem: renderItem })));
 };
 export var Breadcrumbs = forwardRef(BreadcrumbsRender);
 export * from './types';

package/__internal__/src/components/BreadcrumbsCanary/BreadcrumbsFitModeDropdown/BreadcrumbsFitModeDropdown.js CHANGED Viewed

@@ -8,12 +8,12 @@ import { useElements } from '../useElements';
 export var cnBreadcrumbsFitModeDropdown = cn('BreadcrumbsFitModeDropdown');
 export var BreadcrumbsFitModeDropdown = forwardRef(function (props, ref) {
     var _a;
-    var items = props.items, getItemHref = props.getItemHref, getItemLabel = props.getItemLabel, getItemIcon = props.getItemIcon, getItemOnClick = props.getItemOnClick, onItemClick = props.onItemClick, size = props.size, className = props.className, renderItem = props.renderItem, otherProps = __rest(props, ["items", "getItemHref", "getItemLabel", "getItemIcon", "getItemOnClick", "onItemClick", "size", "className", "renderItem"]);
+    var items = props.items, getItemHref = props.getItemHref, getItemLabel = props.getItemLabel, getItemIcon = props.getItemIcon, getItemOnClick = props.getItemOnClick, getItemSubMenu = props.getItemSubMenu, onItemClick = props.onItemClick, size = props.size, className = props.className, renderItem = props.renderItem, otherProps = __rest(props, ["items", "getItemHref", "getItemLabel", "getItemIcon", "getItemOnClick", "getItemSubMenu", "onItemClick", "size", "className", "renderItem"]);
     var _b = useElements(items), firstItem = _b.firstItem, lastItem = _b.lastItem, readyToHideItems = _b.readyToHideItems, hiddenItems = _b.hiddenItems, itemsRefs = _b.itemsRefs, wrapperRef = _b.wrapperRef, moreRef = _b.moreRef, firstItemRef = _b.firstItemRef, lastItemRef = _b.lastItemRef, lastWidth = _b.lastWidth, compression = _b.compression;
     var rootRef = useForkRef([ref, wrapperRef]);
     return (React.createElement("ul", __assign({ className: cnBreadcrumbsFitModeDropdown({ compression: compression }, [className]), ref: rootRef }, otherProps, { style: (_a = {}, _a['--breadcrumbs-item-last-width'] = lastWidth, _a) }),
         renderItem(firstItem, 'first', true, false, firstItemRef),
-        React.createElement(BreadcrumbsMore, { size: size, getItemHref: getItemHref, getItemIcon: getItemIcon, getItemLabel: getItemLabel, getItemOnClick: getItemOnClick, onItemClick: onItemClick, items: hiddenItems, ref: moreRef, className: cnBreadcrumbsFitModeDropdown('Item', { removed: hiddenItems.length <= 0 }) }),
+        React.createElement(BreadcrumbsMore, { size: size, getItemHref: getItemHref, getItemIcon: getItemIcon, getItemLabel: getItemLabel, getItemOnClick: getItemOnClick, onItemClick: onItemClick, getItemSubMenu: getItemSubMenu, items: hiddenItems, ref: moreRef, className: cnBreadcrumbsFitModeDropdown('Item', { removed: hiddenItems.length <= 0 }) }),
         readyToHideItems.map(function (item, index) {
             return renderItem(item, index, false, false, itemsRefs[index], !!hiddenItems[index]);
         }),