@consta/uikit 3.9.1 → 3.11.0

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.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/TagBase/TagBase.d.ts

@@ -6,7 +6,7 @@ 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";

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

@@ -7,7 +7,7 @@ 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 }));
@@ -70,12 +70,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;
@@ -87,7 +85,7 @@ export function TextFieldRender(props, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange({
             e: e,
             value: currentValue.toFixed(Number((_a = 
-            /* Необходимо для того чтобы избежать ситуации, когда по нажатию
+            /* Необходимо для того, чтобы избежать ситуации, когда по нажатию
             на кнопку прибавляется число с погрешностью.
             Здесь мы берем разрядность дробной части шага и ограничиваем
             результирующее число этой разрядностью */
@@ -96,7 +94,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 +113,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

@@ -44,7 +44,7 @@ export declare type TextFieldPropRightSide<TYPE> = TYPE extends 'number' ? {
 } : {
     rightSide?: string | React.FC<IconProps>;
 };
-export declare type Props<TYPE extends string> = {
+export declare type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<{
     className?: string;
     value?: TextFieldPropValue;
     cols?: number;
@@ -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.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 }))));
 });

package/__internal__/src/components/User/User.js

@@ -3,7 +3,7 @@ import './User.css';
 import React from 'react';
 import { IconSelect } from '../../icons/IconSelect/IconSelect';
 import { cn } from '../../utils/bem';
-import { getSizeByMap } from '../../utils/getSizeByMap';
+import { getByMap } from '../../utils/getByMap';
 import { forwardRefWithAs } from '../../utils/types/PropsWithAsAttributes';
 import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
@@ -43,11 +43,11 @@ export var User = forwardRefWithAs(function (props, ref) {
     var IconRight = iconRight;
     return (React.createElement(Tag, __assign({}, otherProps, { className: cnUser({ size: size, view: view, width: width, withArrow: withArrow, minified: onlyAvatar }, [className]), ref: ref }),
         React.createElement("div", { className: cnUser('AvatarWrapper', { status: status }) },
-            React.createElement(Avatar, { size: getSizeByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
+            React.createElement(Avatar, { size: getByMap(avatarSizeMap, size), url: avatarUrl, name: name })),
         !onlyAvatar && (name || info) && (React.createElement("div", { className: cnUser('Block') },
             name && (React.createElement(Text, { className: cnUser('Name'), size: size, view: "primary", lineHeight: "2xs" }, name)),
-            info && size !== 's' && (React.createElement(Text, { className: cnUser('Info'), size: getSizeByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
-        withArrow && (React.createElement(IconSelect, { className: cnUser('Icon'), size: getSizeByMap(iconSizeMap, size), view: "secondary" })),
-        IconRight && !onIconRightClick && (React.createElement(IconRight, { className: cnUser('Icon'), size: getSizeByMap(iconSizeMap, size), view: "secondary" })),
-        IconRight && onIconRightClick && (React.createElement(Button, { className: cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getSizeByMap(buttonSizeMap, size), form: "round" }))));
+            info && size !== 's' && (React.createElement(Text, { className: cnUser('Info'), size: getByMap(infoSizeMap, size), view: "secondary", lineHeight: "2xs" }, info)))),
+        withArrow && (React.createElement(IconSelect, { className: cnUser('Icon'), size: getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && !onIconRightClick && (React.createElement(IconRight, { className: cnUser('Icon'), size: getByMap(iconSizeMap, size), view: "secondary" })),
+        IconRight && onIconRightClick && (React.createElement(Button, { className: cnUser('IconRightButton'), onClick: onIconRightClick, iconRight: IconRight, onlyIcon: true, view: "clear", size: getByMap(buttonSizeMap, size), form: "round" }))));
 });

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

@@ -103,7 +103,7 @@ export declare const isMultipleParams: <ITEM, GROUP>(params: UserSelectProps<ITE
 export declare const isNotMultipleParams: <ITEM, GROUP>(params: UserSelectProps<ITEM, GROUP, boolean>) => params is UserSelectProps<ITEM, GROUP, false>;
 export declare function withDefaultGetters<ITEM = DefaultItem, GROUP = DefaultGroup, MULTIPLE extends boolean = false>(props: UserSelectProps<ITEM, GROUP, MULTIPLE>): {
     disabled?: boolean | undefined;
-    form?: "default" | "round" | "brick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "defaultBrick" | "brickDefault" | "brickClear" | "clearBrick" | "clearClear" | undefined;
+    form?: "default" | "round" | "brick" | "brickDefault" | "defaultBrick" | "clearRound" | "roundClear" | "clearDefault" | "defaultClear" | "brickClear" | "clearBrick" | "clearClear" | undefined;
     size?: "s" | "m" | "l" | undefined;
     view?: "default" | "clear" | undefined;
     placeholder?: string | undefined;

package/__internal__/src/hooks/useOverflow/useOverflow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    currentRef: React.RefObject<HTMLElement>;
+    containerRef?: React.RefObject<HTMLElement> | Document | Window;
+};
+export declare const useOverflow: (props: Props) => boolean;
+export {};

package/__internal__/src/hooks/useOverflow/useOverflow.js

@@ -0,0 +1,50 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useComponentSize } from '../useComponentSize/useComponentSize';
+var getMaxWidth = function (element) {
+    if (element instanceof Window) {
+        return element.outerWidth;
+    }
+    if (element instanceof Document) {
+        return element.documentElement.offsetWidth;
+    }
+    if (element instanceof HTMLElement) {
+        return element.offsetWidth;
+    }
+    if (element.current) {
+        return element.current.offsetWidth;
+    }
+    return 0;
+};
+export var useOverflow = function (props) {
+    var currentRef = props.currentRef, containerRef = props.containerRef;
+    var _a = __read(useState(false), 2), isOverflow = _a[0], setIsOverflow = _a[1];
+    var size = useComponentSize(currentRef);
+    useEffect(function () {
+        var _a;
+        var container = containerRef || ((_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.parentElement);
+        if (container && currentRef.current) {
+            var cs = container instanceof HTMLElement
+                ? getComputedStyle(container)
+                : {
+                    paddingLeft: '0',
+                    paddingTop: '0',
+                    paddingBottom: '0',
+                    paddingRight: '0'
+                };
+            var padding = {
+                top: parseFloat(cs.paddingTop),
+                left: parseFloat(cs.paddingLeft),
+                right: parseFloat(cs.paddingRight),
+                bottom: parseFloat(cs.paddingBottom)
+            };
+            if (getMaxWidth(container) - padding.left - padding.right < currentRef.current.scrollWidth) {
+                setIsOverflow(true);
+            }
+            else {
+                setIsOverflow(false);
+            }
+        }
+    }, [size.width, size.height]);
+    return isOverflow;
+};

package/__internal__/src/hooks/useScrollElements/useScrollElements.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type UseScrollElementsResult = {
+    refs: React.RefObject<HTMLElement>[];
+    scrollTo: (index: number) => void;
+};
+export declare function useScrollElements<ITEM>(items: ITEM[]): UseScrollElementsResult;
+export {};

package/__internal__/src/hooks/useScrollElements/useScrollElements.js

@@ -0,0 +1,30 @@
+import { createRef, useMemo } from 'react';
+export function useScrollElements(items) {
+    var refs = useMemo(function () {
+        var refArray = [];
+        for (var i = 0; i < items.length; i++) {
+            refArray[i] = createRef();
+        }
+        return refArray;
+    }, [items]);
+    var scrollTo = function (index) {
+        var _a;
+        var currentRef = refs[index];
+        var container = (_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (currentRef.current && container) {
+            var defaultPadding = getComputedStyle(container).position !== 'relative' ? container.offsetLeft : 0;
+            var scrollLeft = currentRef.current.offsetLeft - defaultPadding;
+            if (index === 0) {
+                scrollLeft = 0;
+            }
+            else if (index === refs.length - 1) {
+                scrollLeft = container.scrollWidth;
+            }
+            container.scrollLeft = scrollLeft;
+        }
+    };
+    return {
+        refs: refs,
+        scrollTo: scrollTo
+    };
+}

package/__internal__/src/hooks/useSelect/useSelect.js

@@ -66,13 +66,10 @@ export function useSelect(params) {
         return optionForCreate ? __spread([optionForCreate], resultGroups) : resultGroups;
     }, [filteredOptions, groups, getItemGroupKey, getGroupKey, sortGroups, optionForCreate]);
     var notFound = useMemo(function () {
-        var flag = !params.onCreate;
+        var flag = false;
         if (searchValue.length > 0) {
-            visibleItems.forEach(function (group) {
-                if (isOptionForCreate(group) || group.items.length > 0 || group.group) {
-                    flag = false;
-                }
-            });
+            flag =
+                visibleItems.filter(function (group) { return isOptionForCreate(group) || group.items.length > 0 || group.group; }).length === 0 && !params.onCreate;
         }
         return flag;
     }, [visibleItems]);