@consta/uikit 3.9.2 → 3.12.0

package/__internal__/src/components/Table/Cell/TableCell.css

@@ -36,14 +36,21 @@
   }
 
   .TableCell_isSortable,
-  .TableCell_isFilterable {
+  .TableCell_isFilterable,
+  .TableCell_isControl {
     --buttons-wrapper-size: var(--space-xl);
   }
 
-  .TableCell_isSortable.TableCell_isFilterable {
+  .TableCell_isSortable.TableCell_isFilterable,
+  .TableCell_isSortable.TableCell_isControl,
+  .TableCell_isFilterable.TableCell_isControl {
     --buttons-wrapper-size: var(--space-4xl);
   }
 
+  .TableCell_isSortable.TableCell_isFilterable.TableCell_isControl {
+    --buttons-wrapper-size: var(--space-5xl);
+  }
+
   .TableCell_stickyOnTop,
   .TableCell_stickyOnLeft {
     position: -webkit-sticky;

package/__internal__/src/components/Table/Cell/TableCell.js

@@ -17,6 +17,7 @@ var getCellClasses = function (props) {
         stickyOnTop: (props.type === 'header' && props.isSticky) || props.type === 'resizer',
         stickyOnLeft: column.isSticky,
         isFilterable: column.filterable,
+        isControl: Boolean(column.control),
         withoutBorder: props.type === 'resizer',
         isClickable: 'isClickable' in props && props.isClickable,
         isBorderTop: 'isBorderTop' in props && props.isBorderTop,

package/__internal__/src/components/Table/ChoiceGroupFilter/TableChoiceGroupFilter.js

@@ -18,5 +18,5 @@ export var TableChoiceGroupFilter = function (_a) {
         setValue(value);
     };
     return (React.createElement(TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
-        React.createElement(ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, multiple: false, className: cnChoiceGroupFilter() })));
+        React.createElement(ChoiceGroup, { size: "s", items: choiceGroupItems, getLabel: function (item) { return item.name; }, name: "choiceGroup", onChange: onChange, value: (value === null || value === void 0 ? void 0 : value.value) ? value : defaultValue, className: cnChoiceGroupFilter() })));
 };

package/__internal__/src/components/Table/NumberFilter/TableNumberFilter.js

@@ -1,6 +1,6 @@
 import { __read } from "tslib";
 import './TableNumberFilter.css';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { cn } from '../../../utils/bem';
 import { TextField } from '../../TextField/TextField';
 import { TableFilterContainer } from '../FilterContainer/TableFilterContainer';
@@ -11,14 +11,6 @@ export var TableNumberFilter = function (_a) {
     var _d = __read(useState((_b = filterValue) === null || _b === void 0 ? void 0 : _b.min), 2), minValue = _d[0], setMinValue = _d[1];
     var _e = __read(useState((_c = filterValue) === null || _c === void 0 ? void 0 : _c.max), 2), maxValue = _e[0], setMaxValue = _e[1];
     var textFieldRef = useRef(null);
-    useEffect(function () {
-        // setTimeout нужен для корректного выставления автофокуса
-        setTimeout(function () {
-            if (textFieldRef.current) {
-                textFieldRef.current.focus();
-            }
-        });
-    }, []);
     var confirmHandler = function () {
         onConfirm({
             min: minValue,
@@ -27,6 +19,6 @@ export var TableNumberFilter = function (_a) {
     };
     return (React.createElement(TableFilterContainer, { title: title, onCancel: onCancel, onConfirm: confirmHandler },
         React.createElement("div", { className: cnNumberFilter('Inputs') },
-            React.createElement(TextField, { id: "\u043E\u0442", leftSide: "\u043E\u0442", value: minValue, onChange: function (e) { return setMinValue(e.value); }, form: "defaultBrick", size: "m", inputRef: textFieldRef }),
+            React.createElement(TextField, { id: "\u043E\u0442", leftSide: "\u043E\u0442", value: minValue, onChange: function (e) { return setMinValue(e.value); }, form: "defaultBrick", size: "m", autoFocus: true, inputRef: textFieldRef }),
             React.createElement(TextField, { leftSide: "\u0434\u043E", id: "\u0434\u043E", value: maxValue, onChange: function (e) { return setMaxValue(e.value); }, form: "clearDefault", size: "m" }))));
 };

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

@@ -79,6 +79,7 @@ export declare type TableColumn<T extends TableRow> = {
     width?: ColumnWidth;
     mergeCells?: boolean;
     position?: Position;
+    hidden?: boolean;
     control?: ({ column }: TableControl<T>) => React.ReactNode;
 } & (GroupColumnAddition<T> | SingleColumnAddition<T>);
 export declare type TableProps<T extends TableRow> = {
@@ -102,6 +103,11 @@ export declare type TableProps<T extends TableRow> = {
     onRowHover?: onRowHover;
     onRowClick?: onRowClick;
     onRowCreate?: onRowCreate;
+    getAdditionalClassName?: (props: {
+        column: TableColumn<T>;
+        row: T;
+        isActive: boolean;
+    }) => string;
     rowCreateText?: string;
     lazyLoad?: LazyLoad;
     onFiltersUpdated?: (filters: SelectedFilters) => void;

package/__internal__/src/components/Table/Table.js

@@ -52,7 +52,7 @@ var sortingData = function (rows, sorting, onSortBy) {
 var defaultEmptyRowsPlaceholder = (React.createElement(Text, { as: "span", view: "primary", size: "s", lineHeight: "s" }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"));
 var InternalTable = function (props, ref) {
     var _a, _b, _c, _d;
-    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
+    var columns = props.columns, rows = props.rows, _e = props.size, size = _e === void 0 ? 'l' : _e, rawFilters = props.filters, _f = props.isResizable, isResizable = _f === void 0 ? false : _f, _g = props.stickyHeader, stickyHeader = _g === void 0 ? false : _g, _h = props.stickyColumns, stickyColumns = _h === void 0 ? 0 : _h, _j = props.minColumnWidth, minColumnWidth = _j === void 0 ? 150 : _j, activeRow = props.activeRow, _k = props.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = props.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = props.zebraStriped, _m = props.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = props.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, getAdditionalClassName = props.getAdditionalClassName, _q = props.rowCreateText, rowCreateText = _q === void 0 ? '+ Добавить строку' : _q, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _r = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _r === void 0 ? false : _r;
     var _s = useHeaderData(columns), headers = _s.headers, flattenedHeaders = _s.flattenedHeaders, lowHeaders = _s.lowHeaders, headerRowsRefs = _s.headerRowsRefs, headerRowsHeights = _s.headerRowsHeights, resizerTopOffsets = _s.resizerTopOffsets;
     var stickyColumnsGrid = ((_a = headers[0][stickyColumns - 1]) === null || _a === void 0 ? void 0 : _a.position.gridIndex) +
         (((_b = headers[0][stickyColumns - 1]) === null || _b === void 0 ? void 0 : _b.position.colSpan) || 1);
@@ -350,6 +350,10 @@ var InternalTable = function (props, ref) {
                                 ? activeRow.id !== undefined && activeRow.id !== row.id
                                 : false,
                             isMerged: column.mergeCells && rowSpan > 1
+                        }), className: getAdditionalClassName === null || getAdditionalClassName === void 0 ? void 0 : getAdditionalClassName({
+                            column: column,
+                            row: row,
+                            isActive: activeRow ? activeRow.id === row.id : false
                         }), onClick: function (e) {
                             return handleSelectRow({ id: row.id, e: e });
                         }, column: column, verticalAlign: verticalAlign, isClickable: !!isRowsClickable, showVerticalShadow: showVerticalCellShadow &&

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

@@ -44,6 +44,7 @@ export declare const transformColumns: <T extends TableRow>(columns: TableColumn
     width?: number | undefined;
     mergeCells?: boolean | undefined;
     position?: Position | undefined;
+    hidden?: boolean | undefined;
     control?: (({ column }: import("./Table").TableControl<T>) => React.ReactNode) | undefined;
 } & {
     columns: TableColumn<T>[];
@@ -64,6 +65,7 @@ export declare const transformColumns: <T extends TableRow>(columns: TableColumn
     width?: number | undefined;
     mergeCells?: boolean | undefined;
     position?: Position | undefined;
+    hidden?: boolean | undefined;
     control?: (({ column }: import("./Table").TableControl<T>) => React.ReactNode) | undefined;
 } & import("./Table").ValueOf<{ [K in keyof T]: {
     accessor: K extends string ? K : never;

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

@@ -132,7 +132,10 @@ export var useHeaderData = function (columns) {
     var headerColumnsHeights = Object.values(headerRowsRefs.current)
         .filter(isNotNil)
         .map(function (ref) { return ref.getBoundingClientRect().height; });
-    var flattenedHeaders = headers.flat().map(function (column, index) { return (__assign(__assign({}, column), { position: __assign(__assign({}, column.position), { smallTextSize: headers.length > 1 && column.position.level === headers.length - 1, height: headerColumnsHeights[index] || 0 }) })); });
+    var flattenedHeaders = headers
+        .flat()
+        .filter(function (column) { return !column.hidden; })
+        .map(function (column, index) { return (__assign(__assign({}, column), { position: __assign(__assign({}, column.position), { smallTextSize: headers.length > 1 && column.position.level === headers.length - 1, height: headerColumnsHeights[index] || 0 }) })); });
     var headerRowsHeights = headers.map(function (arr, index) {
         return Math.min.apply(null, flattenedHeaders
             .filter(function (col) { return col.position.level === index; })

package/__internal__/src/components/Tabs/Tab/TabsTab.d.ts

@@ -1,12 +1,12 @@
 import './TabsTab.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../../icons/Icon/Icon';
 import { TabsPropSize } from '../Tabs';
 export declare const cnTabsTab: import("@bem-react/classname").ClassNameFormatter;
 declare type Props = {
     size: TabsPropSize;
     onlyIcon?: boolean;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     iconSize?: IconPropSize;
     label: string;
     checked: boolean;

package/__internal__/src/components/Tabs/Tab/TabsTab.js

@@ -2,7 +2,7 @@ import './TabsTab.css';
 import React, { forwardRef } from 'react';
 import { cnMixFocus } from '../../../mixs/MixFocus/MixFocus';
 import { cn } from '../../../utils/bem';
-import { getSizeByMap } from '../../../utils/getSizeByMap';
+import { getByMap } from '../../../utils/getByMap';
 export var cnTabsTab = cn('TabsTab');
 var sizeMap = {
     s: 'xs',
@@ -10,7 +10,7 @@ var sizeMap = {
 };
 export var TabsTab = forwardRef(function (props, ref) {
     var label = props.label, onChange = props.onChange, checked = props.checked, size = props.size, onlyIcon = props.onlyIcon, Icon = props.icon, iconSizeProp = props.iconSize, className = props.className;
-    var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
     return (React.createElement("button", { className: cnTabsTab({ size: size, checked: checked, onlyIcon: onlyIcon }, [cnMixFocus({ before: true }), className]), onClick: checked ? undefined : onChange, ref: ref, role: "tab", type: "button", title: onlyIcon ? label : undefined },
         Icon && React.createElement(Icon, { className: cnTabsTab('Icon'), size: iconSize }),
         !onlyIcon && label));

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

@@ -1,6 +1,6 @@
 import './Tabs.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { cnTabsTab, TabsTab } from './Tab/TabsTab';
 export declare const tabsSizes: readonly ["m", "s"];
@@ -16,7 +16,7 @@ export declare const tabsFitModes: readonly ["scroll", "dropdown"];
 export declare type TabsPropFitMode = typeof tabsFitModes[number];
 export declare const tabsDefaultFitMode: TabsPropFitMode;
 export declare type TabsPropGetLabel<ITEM> = (item: ITEM) => string | number;
-export declare type TabsPropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps> | undefined;
+export declare type TabsPropGetIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
 export declare type TabsPropOnChange<ITEM, ITEM_ELEMENT> = (props: {
     e: React.MouseEvent<ITEM_ELEMENT>;
     value: ITEM;
@@ -26,7 +26,7 @@ declare type RenderItemProps<ITEM, ELEMENT extends HTMLElement> = {
     onChange: React.MouseEventHandler<ELEMENT>;
     checked: boolean;
     label: string;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     size: TabsPropSize;
     iconSize?: IconPropSize;
     onlyIcon?: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent, IconProps } from '../../icons/Icon/Icon';
 import { TagBase } from '../TagBase/TagBase';
 declare type TagBaseProps = React.ComponentProps<typeof TagBase>;
 export declare const tagPropMode: readonly ["button", "check", "cancel", "link", "info"];
@@ -9,7 +9,7 @@ declare type CommonProps = {
     size?: TagBaseProps['size'];
     label: TagBaseProps['label'];
     group?: TagBaseProps['group'];
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     iconSize?: IconProps['size'];
     children?: never;
 };

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

@@ -1,12 +1,12 @@
 import './TagBase.css';
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 export declare const tagBasePropSize: readonly ["m", "xs", "s", "l"];
 export declare const tagBasePropSizeDefault: "m";
 export declare type TagBasePropSize = typeof tagBasePropSize[number];
 export declare const tagBasePropGroupNumberValue: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9];
 export declare const tagBasePropGroupStringValue: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-export declare const tagBasePropGroup: ("1" | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
+export declare const tagBasePropGroup: ("1" | 1 | 4 | 2 | 7 | 3 | 5 | 6 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
 export declare type TagBasePropGroup = typeof tagBasePropGroup[number];
 export declare const tagBasePropView: readonly ["stroked", "filled"];
 export declare const tagBasePropViewDefault: "stroked";
@@ -18,7 +18,7 @@ export declare type Props = {
     view?: TagBasePropView;
     group?: TagBasePropGroup;
     onCancel?: React.MouseEventHandler<HTMLButtonElement>;
-    icon?: React.FC<IconProps>;
+    icon?: IconComponent;
     iconSize?: IconPropSize;
     withAction?: boolean;
 };

package/__internal__/src/components/TagBase/TagBase.js

@@ -3,7 +3,7 @@ import './TagBase.css';
 import React from 'react';
 import { IconClose } from '../../icons/IconClose/IconClose';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
 export var tagBasePropSize = ['m', 'xs', 's', 'l'];
 export var tagBasePropSizeDefault = tagBasePropSize[0];
@@ -24,8 +24,8 @@ export var TagBase = forwardRefWithAs(function (props, ref) {
     var Tag = as;
     var withCancel = typeof onCancel === 'function';
     var withIcon = !!Icon;
-    var IconCloseSize = getSizeByMap(sizeMap, size);
-    var IconSize = getSizeByMap(sizeMap, size, iconSize);
+    var IconCloseSize = getByMap(sizeMap, size);
+    var IconSize = getByMap(sizeMap, size, iconSize);
     return (React.createElement(Tag, __assign({}, otherProps, { className: cnTagBase({
             size: size,
             view: view,

package/__internal__/src/components/TextField/TextField.js

@@ -1,13 +1,13 @@
 import { __assign, __read, __rest } from "tslib";
 import './TextField.css';
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import TextAreaAutoSize from 'react-textarea-autosize';
 import { useForkRef } from '../../hooks/useForkRef/useForkRef';
 import { IconClose } from '../../icons/IconClose/IconClose';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { IconSelectOpen } from '../../icons/IconSelectOpen/IconSelectOpen';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { FieldCaption } from '../FieldCaption/FieldCaption';
 import { FieldLabel } from '../FieldLabel/FieldLabel';
@@ -17,14 +17,14 @@ export var cnTextField = cn(COMPONENT_NAME);
 export function TextFieldRender(props, ref) {
     var textFieldRef = React.useRef(null);
     var inputRef = React.useRef(null);
-    var _a = usePropsHandler(COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRefProp = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, withClearButton = _a.withClearButton, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, _h = _a.step, step = _h === void 0 ? 1 : _h, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, _j = _a.labelPosition, labelPosition = _j === void 0 ? 'top' : _j, caption = _a.caption, iconSizeProp = _a.iconSize, focused = _a.focused, otherProps = __rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "withClearButton", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "labelPosition", "caption", "iconSize", "focused"]);
+    var _a = usePropsHandler(COMPONENT_NAME, props, textFieldRef), className = _a.className, _b = _a.type, type = _b === void 0 ? 'text' : _b, value = _a.value, onChange = _a.onChange, id = _a.id, name = _a.name, rows = _a.rows, cols = _a.cols, minRows = _a.minRows, maxRows = _a.maxRows, inputRefProp = _a.inputRef, maxLength = _a.maxLength, disabled = _a.disabled, _c = _a.size, size = _c === void 0 ? textFieldPropSizeDefault : _c, _d = _a.view, view = _d === void 0 ? textFieldPropViewDefault : _d, _e = _a.form, form = _e === void 0 ? textFieldPropFormDefault : _e, state = _a.state, status = _a.status, _f = _a.width, width = _f === void 0 ? textFieldPropWidthDefault : _f, onBlur = _a.onBlur, onFocus = _a.onFocus, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, placeholder = _a.placeholder, leftSide = _a.leftSide, rightSide = _a.rightSide, autoComplete = _a.autoComplete, withClearButton = _a.withClearButton, max = _a.max, min = _a.min, readOnly = _a.readOnly, required = _a.required, _h = _a.step, step = _h === void 0 ? 1 : _h, tabIndex = _a.tabIndex, ariaLabel = _a.ariaLabel, label = _a.label, _j = _a.labelPosition, labelPosition = _j === void 0 ? 'top' : _j, caption = _a.caption, iconSizeProp = _a.iconSize, focused = _a.focused, onClick = _a.onClick, otherProps = __rest(_a, ["className", "type", "value", "onChange", "id", "name", "rows", "cols", "minRows", "maxRows", "inputRef", "maxLength", "disabled", "size", "view", "form", "state", "status", "width", "onBlur", "onFocus", "autoFocus", "placeholder", "leftSide", "rightSide", "autoComplete", "withClearButton", "max", "min", "readOnly", "required", "step", "tabIndex", "ariaLabel", "label", "labelPosition", "caption", "iconSize", "focused", "onClick"]);
     var _k = __read(useState(autoFocus), 2), focus = _k[0], setFocus = _k[1];
     var textarea = type === 'textarea';
     var LeftIcon = leftSide;
     var RightIcon = rightSide;
     var leftSideIsString = typeof leftSide === 'string';
     var rightSideIsString = typeof rightSide === 'string';
-    var iconSize = getSizeByMap(sizeMap, size, iconSizeProp);
+    var iconSize = getByMap(sizeMap, size, iconSizeProp);
     var handleChange = function (e) {
         var value = e.target.value;
         !disabled && (onChange === null || onChange === void 0 ? void 0 : onChange({ e: e, id: id, name: name, value: value || null }));
@@ -55,6 +55,14 @@ export function TextFieldRender(props, ref) {
         'id': id ? id.toString() : '',
         'aria-label': ariaLabel
     };
+    useEffect(function () {
+        if (autoFocus) {
+            setTimeout(function () {
+                var _a;
+                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+    }, []);
     var textareaProps = {
         rows: rows,
         cols: cols,
@@ -70,12 +78,10 @@ export function TextFieldRender(props, ref) {
         ref: useForkRef([inputRef, inputRefProp])
     };
     var handleClear = function (e) {
-        var _a;
         onChange === null || onChange === void 0 ? void 0 : onChange({
             e: e,
             value: ''
         });
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
     var changeNumberValue = function (e, isIncrement) {
         var _a;
@@ -96,7 +102,15 @@ export function TextFieldRender(props, ref) {
                 .split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 0)
         });
     };
-    return (React.createElement("div", __assign({ className: cnTextField({ labelPosition: labelPosition, size: size, view: view, width: width }, [className]) }, otherProps),
+    var rootProps = {
+        // для того чтобы любые клики во внутренним элементам фокусили инпут
+        onClick: function (e) {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            onClick === null || onClick === void 0 ? void 0 : onClick(e);
+        }
+    };
+    return (React.createElement("div", __assign({ className: cnTextField({ labelPosition: labelPosition, size: size, view: view, width: width }, [className]), ref: useForkRef([ref, textFieldRef]) }, rootProps, otherProps),
         label && (React.createElement(FieldLabel, { required: required, className: cnTextField('Label', { labelPosition: labelPosition }), size: size }, label)),
         React.createElement("div", { className: cnTextField('Body') },
             React.createElement("div", { className: cnTextField('InputContainer', {
@@ -107,7 +121,7 @@ export function TextFieldRender(props, ref) {
                     type: type,
                     focus: focus || focused,
                     withValue: !!value
-                }), ref: useForkRef([ref, textFieldRef]) },
+                }) },
                 LeftIcon && (React.createElement("div", { className: cnTextField('Side', {
                         position: 'left',
                         type: leftSideIsString ? 'string' : 'icon'

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps, IconPropSize } from '../../icons/Icon/Icon';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributes } from '../../utils/types/PropsWithHTMLAttributes';
 export declare type TextFieldPropValue = string | null;
 export declare type TextFieldPropName = string;
@@ -42,9 +42,9 @@ export declare type TextFieldPropsTextareaType<TYPE> = TYPE extends 'textarea' ?
 export declare type TextFieldPropRightSide<TYPE> = TYPE extends 'number' ? {
     rightSide?: never;
 } : {
-    rightSide?: string | React.FC<IconProps>;
+    rightSide?: string | IconComponent;
 };
-export declare type Props<TYPE extends string> = {
+export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<{
     className?: string;
     value?: TextFieldPropValue;
     cols?: number;
@@ -64,8 +64,8 @@ export declare type Props<TYPE extends string> = {
     onBlur?: React.FocusEventHandler<HTMLElement>;
     autoFocus?: boolean;
     placeholder?: string;
-    leftSide?: string | React.FC<IconProps>;
-    rightSide?: string | React.FC<IconProps>;
+    leftSide?: string | IconComponent;
+    rightSide?: string | IconComponent;
     withClearButton?: boolean;
     autoComplete?: TextFieldPropAutoComplete;
     max?: number | string;
@@ -82,7 +82,6 @@ export declare type Props<TYPE extends string> = {
     caption?: string;
     labelPosition?: 'top' | 'left';
     focused?: boolean;
-} & TextFieldPropsTextareaType<TYPE> & TextFieldPropRightSide<TYPE>;
-export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<Props<TYPE>, HTMLDivElement>;
+}, HTMLDivElement> & TextFieldPropsTextareaType<TYPE> & TextFieldPropRightSide<TYPE>;
 export declare type TextFieldComponent = <TYPE extends string>(props: TextFieldProps<TYPE> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
 export declare const sizeMap: Record<TextFieldPropSize, IconPropSize>;

package/__internal__/src/components/Theme/_color/Theme_color_gpnDark.css

@@ -14,7 +14,7 @@
   --color-bg-ghost: rgba(246, 251, 253, 0.1); /* Цвет затенения */
   --color-bg-tone: rgba(6, 20, 25, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(75, 89, 99); /* Цвет фона системнный */
+  --color-bg-system: rgb(77, 82, 91); /* Цвет фона системнный */
   --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +28,8 @@
   --color-typo-secondary: rgba(255, 255, 255, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(255, 255, 255, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(94, 121, 141); /* Цвет фона системнный */
+  --color-typo-system: rgb(99, 110, 131); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
   --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
   --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */

package/__internal__/src/components/Theme/_color/Theme_color_gpnDefault.css

@@ -14,7 +14,8 @@
   --color-bg-ghost: rgba(0, 32, 51, 0.08); /* Цвет затенения */
   --color-bg-tone: rgba(0, 32, 51, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(206, 216, 222); /* Цвет фона системнный */
+  --color-bg-system: rgb(222, 228, 232); /* Цвет фона системнный */
+
   --color-bg-normal: rgb(86, 185, 242); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +29,8 @@
   --color-typo-secondary: rgba(0, 32, 51, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(0, 32, 51, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(132, 167, 189); /* Цвет фона системнный */
+  --color-typo-system: rgb(151, 178, 196); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(51, 180, 255); /* Цвет фона нейтральный */
   --color-typo-success: rgb(9, 179, 123); /* Цвет текста успеха */
   --color-typo-caution: rgb(255, 161, 10); /* Цвет текста осторожности */

package/__internal__/src/components/Theme/_color/Theme_color_gpnDisplay.css

@@ -14,7 +14,8 @@
   --color-bg-ghost: rgba(246, 251, 253, 0.08); /* Цвет затенения */
   --color-bg-tone: rgba(0, 22, 31, 0.85); /* Цвет паранджи */
   --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
-  --color-bg-system: rgb(75, 98, 114); /* Цвет фона системнный */
+  --color-bg-system: rgb(49, 85, 129); /* Цвет фона системнный */
+
   --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
   --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
   --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
@@ -28,7 +29,8 @@
   --color-typo-secondary: rgba(246, 251, 253, 0.6); /* Цвет второстепенного текста */
   --color-typo-ghost: rgba(246, 251, 253, 0.3); /* Цвет дополнительного текста */
   --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
-  --color-typo-system: rgb(96, 130, 154); /* Цвет фона системнный */
+  --color-typo-system: rgb(64, 114, 176); /* Цвет фона системнный */
+
   --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
   --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
   --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconProps } from '../../icons/Icon/Icon';
+import { IconComponent } from '../../icons/Icon/Icon';
 import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
 import { Direction } from '../Popover/Popover';
 export declare const themeTogglerPropSize: readonly ["m", "l", "s", "xs"];
@@ -11,7 +11,7 @@ export declare type ThemePropSetValue<ITEM> = (props: {
 }) => void;
 export declare type ThemePropGetKey<ITEM> = (item: ITEM) => string | number;
 export declare type ThemePropGetLabel<ITEM> = (item: ITEM) => string;
-export declare type ThemePropGetIcon<ITEM> = (item: ITEM) => React.FC<IconProps>;
+export declare type ThemePropGetIcon<ITEM> = (item: ITEM) => IconComponent;
 export declare type Props<ITEM> = PropsWithHTMLAttributesAndRef<{
     size?: ThemeTogglerPropSize;
     className?: string;

package/__internal__/src/components/ThemeToggler/ThemeToggler.js

@@ -2,7 +2,7 @@ import { __assign, __read, __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
 import { useChoiceGroup } from '../../hooks/useChoiceGroup/useChoiceGroup';
 import { IconCheck } from '../../icons/IconCheck/IconCheck';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { setRef } from '../../utils/setRef';
 import { Button } from '../Button/Button';
 import { ContextMenu } from '../ContextMenu/ContextMenu';
@@ -35,8 +35,8 @@ export var ThemeToggler = React.forwardRef(function (props, componentRef) {
         callBack: onChange,
         multiple: false
     }), getOnChange = _c.getOnChange, getChecked = _c.getChecked;
-    var iconSize = getSizeByMap(iconSizeMap, size);
-    var contextMenuSize = getSizeByMap(contextMenuSizeMap, size);
+    var iconSize = getByMap(iconSizeMap, size);
+    var contextMenuSize = getByMap(contextMenuSizeMap, size);
     var getButtonIcon = function () { return getItemIcon(items.find(function (theme) { return getChecked(theme); })); };
     var onButtonClick = function (e) {
         if (items.length > 2) {
@@ -59,5 +59,5 @@ export var ThemeToggler = React.forwardRef(function (props, componentRef) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, __assign({}, otherProps, { ref: ref, iconLeft: getButtonIcon(), onClick: onButtonClick, onlyIcon: true, size: size, view: "clear" })),
-        items.length > 2 && isOpen && (React.createElement(ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getOnClick: getOnChange, size: contextMenuSize }))));
+        items.length > 2 && isOpen && (React.createElement(ContextMenu, { offset: 8, items: items, getLabel: getItemLabel, anchorRef: ref, direction: direction, possibleDirections: possibleDirections, getLeftSideBar: renderIcons, getRightSideBar: renderChecks, onClickOutside: function () { return setIsOpen(false); }, getItemOnClick: getOnChange, size: contextMenuSize }))));
 });