@consta/uikit 3.18.3 → 3.21.0

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

@@ -0,0 +1,104 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { addYears, startOfDecade } from 'date-fns';
+import { useClickOutside } from '../../../hooks/useClickOutside/useClickOutside';
+import { useFlag } from '../../../hooks/useFlag/useFlag';
+import { useForkRef } from '../../../hooks/useForkRef/useForkRef';
+import { DatePickerDropdown, } from '../DatePickerDropdown/DatePickerDropdown';
+import { DatePickerFieldTypeYearRange } from '../DatePickerFieldTypeYearRange/DatePickerFieldTypeYearRange';
+import { normalizeRangeValue } from '../helpers';
+import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
+export var DatePickerTypeYearRange = 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 = __rest(props, ["events", "dateTimeView", "locale", "dropdownForm", "onFocus", "onBlur", "leftSide", "rightSide", "style", "currentVisibleDate", "onChangeCurrentVisibleDate", "renderAdditionalControls", "inputRef", "name"]);
+    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) { 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);
+    };
+    // эфект для того чтобы календарь переключался при вводе с клавиатуры
+    useEffect(function () {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[0]) && props.dateTimeView === 'classic' && startFocused) {
+            var newVisibleDate = 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 = startOfDecade(props.value[0]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && 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]);
+    useEffect(function () {
+        var _a, _b, _c;
+        if (((_a = props.value) === null || _a === void 0 ? void 0 : _a[1]) && props.dateTimeView === 'classic' && endFocused) {
+            var newVisibleDate = 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 = startOfDecade(props.value[1]);
+            if (newVisibleDate.getTime() !== (currentVisibleDate === null || currentVisibleDate === void 0 ? void 0 : currentVisibleDate.getTime()) &&
+                newVisibleDate.getTime() !==
+                    (currentVisibleDate && addYears(currentVisibleDate, 10).getTime())) {
+                setCurrentVisibleDate(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({
+        isActive: calendarVisible,
+        ignoreClicksInsideRefs: [startFieldRef, endFieldRef, calendarRef],
+        handler: function () {
+            setFieldFocused(false);
+            setCalendarVisible.off();
+        }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePickerFieldTypeYearRange, __assign({}, fieldProps, { style: style, ref: ref, startFieldRef: startFieldRef, endFieldRef: endFieldRef, startFieldInputRef: useForkRef([startFieldInputRef, inputRef === null || inputRef === void 0 ? void 0 : inputRef[0]]), endFieldInputRef: 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.createElement(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__/src/components/DatePickerCanary/helpers.d.ts

@@ -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__/src/components/DatePickerCanary/helpers.js

@@ -2,21 +2,6 @@ import { __read, __spread } from "tslib";
 import { startOfToday } from 'date-fns';
 import { range } from '../../utils/array';
 import { getByMap } from '../../utils/getByMap';
-export var datePickerPropType = [
-    'date',
-    'date-range',
-    'date-time',
-    'date-time-range',
-    'time',
-];
-export var datePickerPropTypeDefault = datePickerPropType[0];
-export var datePickerErrorTypes = [
-    'outOfRange',
-    'invalidInputAttempt',
-    'startDateIsGreaterThanEndDate',
-];
-export var datePickerPropDropdownForm = ['default', 'brick', 'round'];
-export var datePickerPropDropdownFormDefault = datePickerPropDropdownForm[0];
 export var datePickerPropSeparatorDefault = '.';
 export var datePickerPropFormatTypeDate = "dd" + datePickerPropSeparatorDefault + "MM" + datePickerPropSeparatorDefault + "yyyy";
 export var datePickerPropPlaceholderTypeDate = "\u0414\u0414" + datePickerPropSeparatorDefault + "\u041C\u041C" + datePickerPropSeparatorDefault + "\u0413\u0413\u0413\u0413";
@@ -24,6 +9,8 @@ export var datePickerPropFormatTypeTime = "HH:mm:ss";
 export var datePickerPropPlaceholderTypeTime = "\u0427\u0427:\u041C\u041C:\u0421\u0421";
 export var datePickerPropFormatTypeDateTime = datePickerPropFormatTypeDate + " " + datePickerPropFormatTypeTime;
 export var datePickerPropPlaceholderTypeDateTime = datePickerPropPlaceholderTypeDate + " " + datePickerPropPlaceholderTypeTime;
+export var datePickerPropFormatTypeYear = "yyyy";
+export var datePickerPropPlaceholderTypeYear = "\u0413\u0413\u0413\u0413";
 export var normalizeRangeValue = function (dateRange) {
     var _a, _b;
     if (dateRange[0] && dateRange[1] && ((_a = dateRange[0]) === null || _a === void 0 ? void 0 : _a.getTime()) > ((_b = dateRange[1]) === null || _b === void 0 ? void 0 : _b.getTime())) {
@@ -107,3 +94,13 @@ export var getPartsDate = function (value, format, separator, withTime, markers)
     return markers.map(function (marker) { return getPartDate(formatArray, stringArray, marker); });
 };
 export var isTypeWithTime = function (type) { return type.indexOf('time') !== -1; };
+var fieldPrefixs = ['start', 'end'];
+export var getFieldName = function (name, rangeIndex) {
+    if (!name) {
+        return undefined;
+    }
+    if (Array.isArray(name)) {
+        return name[rangeIndex];
+    }
+    return name + "_" + fieldPrefixs[rangeIndex];
+};

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

@@ -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__/src/components/DatePickerCanary/types.js

@@ -0,0 +1,17 @@
+export var datePickerPropType = [
+    'date',
+    'date-range',
+    'date-time',
+    'date-time-range',
+    'time',
+    'year',
+    'year-range',
+];
+export var datePickerPropTypeDefault = datePickerPropType[0];
+export var datePickerErrorTypes = [
+    'outOfRange',
+    'invalidInputAttempt',
+    'startDateIsGreaterThanEndDate',
+];
+export var datePickerPropDropdownForm = ['default', 'brick', 'round'];
+export var datePickerPropDropdownFormDefault = datePickerPropDropdownForm[0];

package/__internal__/src/components/ResponsesExit/ResponsesExit.js

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

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

@@ -16,7 +16,6 @@ export var defaultSelectDropdownPropForm = selectDropdownform[0];
 var cnSelectDropdown = cn('SelectDropdown');
 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, 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 = __rest(props, ["controlRef", "size", "getOptionProps", "dropdownRef", "labelForCreate", "className", "labelForNotFound", "labelForEmptyItems", "hasItems", "form", "isOpen", "renderItem", "visibleItems", "isLoading", "getGroupLabel", "notFound"]);
-    var getIndex = fabricIndex(-1);
     var _b = __read(useState('downStartLeft'), 2), direction = _b[0], setDirection = _b[1];
     var indent = form === 'round' ? 'increased' : 'normal';
     var popoverRef = useRef(null);
@@ -25,22 +24,25 @@ export var SelectDropdown = function (props) {
             return isOptionForCreate(group) || (Array.isArray(group.items) && group.items.length > 0);
         }).length > 0);
     }, [visibleItems]);
-    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) { return (React.createElement(Popover, __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,
-            cnMixPopoverAnimate({ direction: direction, animate: animate }),
-        ]), equalAnchorWidth: true }),
-        React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
-            isLoading && React.createElement(SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
-            visibleItems.map(function (group) {
-                if (isOptionForCreate(group)) {
-                    return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
-                }
-                return (React.createElement(Fragment, { key: group.key },
-                    group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
-                    group.items.map(function (item, i) {
-                        return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
-                    })));
-            }),
-            !isLoading && hasItems && notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
-            !isLoading && !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems))))); }));
+    return (React.createElement(Transition, { "in": isOpen, unmountOnExit: true, nodeRef: popoverRef, timeout: animateTimeout }, function (animate) {
+        var getIndex = fabricIndex(-1);
+        return (React.createElement(Popover, __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,
+                cnMixPopoverAnimate({ direction: direction, animate: animate }),
+            ]), equalAnchorWidth: true }),
+            React.createElement("div", { className: cnSelectDropdown('List', { size: size, form: form }), ref: dropdownRef },
+                isLoading && React.createElement(SelectLoader, { mode: isListShowed ? 'blur' : 'empty' }),
+                visibleItems.map(function (group) {
+                    if (isOptionForCreate(group)) {
+                        return (React.createElement(SelectCreateButton, __assign({ size: size, labelForCreate: labelForCreate, inputValue: group.label, indent: indent }, getOptionProps({ index: getIndex(), item: group }))));
+                    }
+                    return (React.createElement(Fragment, { key: group.key },
+                        group.group && getGroupLabel && (React.createElement(SelectGroupLabel, { label: getGroupLabel(group.group), size: size, indent: indent })),
+                        group.items.map(function (item, i) {
+                            return (React.createElement(Fragment, { key: group.key + "-" + i }, renderItem(__assign({ item: item }, getOptionProps({ index: getIndex(), item: item })))));
+                        })));
+                }),
+                !isLoading && hasItems && notFound && labelForNotFound && (React.createElement(Text, { className: cnSelectDropdown('LabelForNotFound') }, labelForNotFound)),
+                !isLoading && !hasItems && labelForEmptyItems && (React.createElement(Text, { className: cnSelectDropdown('LabelForEmptyItems') }, labelForEmptyItems)))));
+    }));
 };

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

@@ -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__/src/components/Table/SelectedOptionsList/TableSelectedOptionsList.css

@@ -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__/src/components/Table/Table.js

@@ -8,6 +8,7 @@ import { IconSortUp } from '../../icons/IconSortUp/IconSortUp';
 import { IconUnsort } from '../../icons/IconUnsort/IconUnsort';
 import { sortBy as sortByDefault, updateAt } from '../../utils/array';
 import { cn } from '../../utils/bem';
+import { setRef } from '../../utils/setRef';
 import { isNotNil, isString } from '../../utils/type-guards';
 import { Button } from '../Button/Button';
 import { Text } from '../Text/Text';
@@ -334,9 +335,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.createElement("div", { ref: useForkRef([tableRef, ref]), className: cnTable({
             size: size,
@@ -378,7 +377,7 @@ var InternalTable = function (props, ref) {
                 if (show) {
                     return (React.createElement(TableCell, { type: "content", key: column.accessor, ref: function (ref) {
                             cellsRefs.current[columnIdx + "-" + row.id] = ref;
-                            setBoundaryRef(columnIdx, rowIdx);
+                            setRef(setBoundaryRef(columnIdx, rowIdx), ref);
                         }, style: style, wrapperClassName: cnTable('ContentCell', {
                             isActive: activeRow ? activeRow.id === row.id : false,
                             isDarkned: activeRow

package/__internal__/src/hooks/useBreakpoints/useBreakpoints.js

@@ -52,11 +52,11 @@ var isEq = function (state, newState) {
 export var useBreakpoints = function (map) {
     var pointsMap = map || defaultMap;
     var _a = __read(useState(function () {
-        return mapping(document.documentElement.clientWidth, pointsMap);
+        return mapping(window.innerWidth, pointsMap);
     }), 2), points = _a[0], setSetPoints = _a[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__/src/hooks/useForkRef/useForkRef.d.ts

@@ -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/createIcon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createIcon",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/createResponsesImage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createResponsesImage",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "keywords": [
     "ui-kit",
     "design-system",
@@ -362,5 +362,5 @@
       "config": "./commitizen.js"
     }
   },
-  "homepage": "https://consta-uikit.vercel.app"
+  "homepage": "http://uikit.consta.design"
 }

package/useBreakpoints/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useBreakpoints",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useChoiceGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useChoiceGroup",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useChoiceGroupIndexed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useChoiceGroupIndexed",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useClickOutside/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useClickOutside",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useComponentSize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useComponentSize",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useDebounce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useDebounce",
-  "version": "3.18.3",
+  "version": "3.21.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [