@consta/uikit 3.2.0 → 3.6.0

package/__internal__/src/components/Sidebar/Sidebar.css

@@ -1,8 +1,13 @@
 .Sidebar {
-  --width-min-horizontal: 300px;
-  --width-max-horizontal: 480px;
-  --height-min-vertical: 200px;
-  --height-max-vertical: 380px;
+  --sidebar-size-s: 260px;
+  --sidebar-size-m: 320px;
+  --sidebar-size-l: 480px;
+  --sidebar-size-1-of-4: calc(1 / 4 * 100);
+  --sidebar-size-3-of-4: calc(3 / 4 * 100);
+  --sidebar-size-1-of-2: calc(1 / 2 * 100);
+  --sidebar-size-1-of-3: calc(1 / 3 * 100);
+  --sidebar-size-2-of-3: calc(2 / 3 * 100);
+  --sidebar-size-full: 100;
   position: fixed;
   top: 0;
   right: 0;
@@ -62,28 +67,61 @@
             box-shadow: var(--shadow-modal);
   }
 
-  .Sidebar-Window_position_right {
-        min-width: var(--width-min-horizontal);
-        max-width: var(--width-max-horizontal);
+  .Sidebar-Window_position_right,
+      .Sidebar-Window_position_left {
+        width: var(--sidebar-width);
         height: 100vh;
       }
 
-  .Sidebar-Window_position_bottom {
+  .Sidebar-Window_position_bottom,
+      .Sidebar-Window_position_top {
         width: 100vw;
-        min-height: var(--height-min-vertical);
-        max-height: var(--height-max-vertical);
+        height: var(--sidebar-height);
       }
 
-  .Sidebar-Window_position_left {
-        min-width: var(--width-min-horizontal);
-        max-width: var(--width-max-horizontal);
-        height: 100vh;
+  .Sidebar-Window_size_s {
+        --sidebar-width: var(--sidebar-size-s);
+        --sidebar-height: var(--sidebar-size-s);
       }
 
-  .Sidebar-Window_position_top {
-        width: 100vw;
-        min-height: var(--height-min-vertical);
-        max-height: var(--height-max-vertical);
+  .Sidebar-Window_size_m {
+        --sidebar-width: var(--sidebar-size-m);
+        --sidebar-height: var(--sidebar-size-m);
+      }
+
+  .Sidebar-Window_size_l {
+        --sidebar-width: var(--sidebar-size-l);
+        --sidebar-height: var(--sidebar-size-l);
+      }
+
+  .Sidebar-Window_size_full {
+        --sidebar-width: calc(var(--sidebar-size-full) * 1vw);
+        --sidebar-height: calc(var(--sidebar-size-full) * 1vh);
+      }
+
+  .Sidebar-Window_size_1\/4 {
+        --sidebar-width: calc(var(--sidebar-size-1-of-4) * 1vw);
+        --sidebar-height: calc(var(--sidebar-size-1-of-4) * 1vh);
+      }
+
+  .Sidebar-Window_size_3\/4 {
+        --sidebar-width: calc(var(--sidebar-size-3-of-4) * 1vw);
+        --sidebar-height: calc(var(--sidebar-size-3-of-4) * 1vh);
+      }
+
+  .Sidebar-Window_size_1\/2 {
+        --sidebar-width: calc(var(--sidebar-size-1-of-2) * 1vw);
+        --sidebar-height: calc(var(--sidebar-size-1-of-2) * 1vh);
+      }
+
+  .Sidebar-Window_size_1\/3 {
+        --sidebar-width: calc(var(--sidebar-size-1-of-3) * 1vw);
+        --sidebar-height: calc(var(--sidebar-size-1-of-3) * 1vh);
+      }
+
+  .Sidebar-Window_size_2\/3 {
+        --sidebar-width: calc(var(--sidebar-size-2-of-3) * 1vw);
+        --sidebar-height: calc(var(--sidebar-size-2-of-3) * 1vh);
       }
 
   .Sidebar-Content {

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

@@ -3,20 +3,19 @@ import React from 'react';
 declare type DivProps = JSX.IntrinsicElements['div'];
 declare const sidebarPropPosition: readonly ["right", "bottom", "left", "top"];
 declare type SidebarPropPosition = typeof sidebarPropPosition[number];
-declare const sidebarPropWidth: readonly ["auto"];
-declare type SidebarPropWidth = typeof sidebarPropWidth[number];
-declare const sidebarPropHeight: readonly ["auto"];
-declare type SidebarPropHeight = typeof sidebarPropHeight[number];
+export declare const sidebarPropSize: readonly ["s", "m", "l", "full", "1/2", "1/3", "1/4", "2/3", "3/4"];
+export declare type SidebarPropSize = typeof sidebarPropSize[number];
 declare type SidebarProps = {
     isOpen?: boolean;
     onClose?: () => void;
     onOpen?: () => void;
     hasOverlay?: boolean;
+    /** @deprecated Use onClickOutside */
     onOverlayClick?: (event: MouseEvent) => void;
     onClickOutside?: (event: MouseEvent) => void;
+    onEsc?: (event: KeyboardEvent) => void;
     position?: SidebarPropPosition;
-    width?: SidebarPropWidth;
-    height?: SidebarPropHeight;
+    size?: SidebarPropSize;
     className?: string;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
@@ -29,6 +28,7 @@ declare type SidebarActionsProps = {
     className?: string;
     children: React.ReactNode;
 };
+export declare const cnSidebar: import("@bem-react/classname").ClassNameFormatter;
 declare const SidebarContent: React.FC<SidebarContentProps>;
 declare const SidebarActions: React.FC<SidebarActionsProps>;
 interface SidebarComponent extends React.FC<SidebarProps>, DivProps {

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

@@ -3,17 +3,16 @@ import './Sidebar.css';
 import React, { useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { useClickOutside } from '../../hooks/useClickOutside/useClickOutside';
+import { useGlobalKeys } from '../../hooks/useGlobalKeys/useGlobalKeys';
 import { cn } from '../../utils/bem';
 import { cnForCssTransition } from '../../utils/cnForCssTransition';
 import { PortalWithTheme, usePortalContext } from '../PortalWithTheme/PortalWithTheme';
 import { useTheme } from '../Theme/Theme';
 var sidebarPropPosition = ['right', 'bottom', 'left', 'top'];
 var sidebarPropPositionDefault = sidebarPropPosition[0];
-var sidebarPropWidth = ['auto'];
-var sidebarPropWidthDefault = sidebarPropWidth[0];
-var sidebarPropHeight = ['auto'];
-var sidebarPropHeightDefault = sidebarPropHeight[0];
-var cnSidebar = cn('Sidebar');
+export var sidebarPropSize = ['s', 'm', 'l', 'full', '1/2', '1/3', '1/4', '2/3', '3/4'];
+var sidebarPropSizeDefault = sidebarPropSize[1];
+export var cnSidebar = cn('Sidebar');
 var SidebarContent = function (_a) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
     return (React.createElement("div", __assign({ className: cnSidebar('Content', null, [className]) }, rest), children));
@@ -33,7 +32,7 @@ var ContextConsumer = function (_a) {
     return React.createElement(React.Fragment, null, children);
 };
 export var Sidebar = function (props) {
-    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.width, width = _c === void 0 ? sidebarPropWidthDefault : _c, _d = props.height, height = _d === void 0 ? sidebarPropHeightDefault : _d, className = props.className, children = props.children, _e = props.container, container = _e === void 0 ? window.document.body : _e, rest = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "position", "width", "height", "className", "children", "container"]);
+    var isOpen = props.isOpen, onClose = props.onClose, onOpen = props.onOpen, _a = props.hasOverlay, hasOverlay = _a === void 0 ? true : _a, onOverlayClick = props.onOverlayClick, onClickOutside = props.onClickOutside, onEsc = props.onEsc, _b = props.position, position = _b === void 0 ? sidebarPropPositionDefault : _b, _c = props.size, size = _c === void 0 ? sidebarPropSizeDefault : _c, className = props.className, children = props.children, _d = props.container, container = _d === void 0 ? window.document.body : _d, rest = __rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container"]);
     var ref = useRef(null);
     var theme = useTheme().theme;
     useEffect(function () {
@@ -44,10 +43,13 @@ export var Sidebar = function (props) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     }, [isOpen]);
+    useGlobalKeys({
+        Escape: function (e) { return isOpen && onEsc && onEsc(e); }
+    });
     return (React.createElement(CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition(cnSidebar), timeout: 200 },
         React.createElement(PortalWithTheme, { preset: theme, container: container },
             hasOverlay && React.createElement("div", { className: cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            React.createElement("div", __assign({ className: cnSidebar('Window', { width: width, height: height, position: position }, [className]), ref: ref }, rest),
+            React.createElement("div", __assign({ className: cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }, rest),
                 React.createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 Sidebar.Content = SidebarContent;

package/__internal__/src/components/SnackBar/Item/SnackBar-Item.js

@@ -3,6 +3,7 @@ import '../../Theme/_color/Theme_color_gpnDark.css';
 import './SnackBar-Item.css';
 import React, { useEffect, useState } from 'react';
 import { IconClose } from '../../../icons/IconClose/IconClose';
+import { isNumber, isString } from '../../../utils/type-guards';
 import { Button } from '../../Button/Button';
 import { Text } from '../../Text/Text';
 import { cnTheme } from '../../Theme/Theme';
@@ -21,7 +22,7 @@ var getAutoCloseTime = function (autoClose) {
 };
 export var SnackBarItem = function (props) {
     var item = props.item;
-    var onClose = item.onClose, autoClose = item.autoClose, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
+    var onClose = item.onClose, autoClose = item.autoClose, showProgress = item.showProgress, Icon = item.icon, message = item.message, actions = item.actions, _a = item.status, status = _a === void 0 ? snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
     var _b = __read(useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = __read(useState(false), 2), hover = _c[0], setHover = _c[1];
     var _d = __read(useState(false), 2), timeIsOver = _d[0], setTimeIsOver = _d[1];
@@ -31,6 +32,7 @@ export var SnackBarItem = function (props) {
     var handleMouseEnter = function () { return setHover(true); };
     var handleMouseLeave = function () { return setHover(false); };
     var autoCloseTime = getAutoCloseTime(autoClose);
+    var hideAutoCloseTimer = showProgress === undefined || !(isNumber(autoCloseTime) && autoCloseTime > 0);
     var onAutoClose = function (item) {
         if (onAutoCloseProp) {
             onAutoCloseProp(item);
@@ -55,10 +57,10 @@ export var SnackBarItem = function (props) {
     };
     var handleClose = onClose ? function () { return onClose(item); } : undefined;
     return (React.createElement("div", { className: cnSnackBarItem({ status: status }, [cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
-        autoCloseTime && (React.createElement(SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime })),
-        !autoCloseTime && Icon && React.createElement(Icon, { className: cnSnackBar('Icon'), size: "m" }),
+        autoCloseTime && (React.createElement(SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
+        hideAutoCloseTimer && Icon && React.createElement(Icon, { className: cnSnackBar('Icon'), size: "m" }),
         React.createElement("div", { className: cnSnackBar('Content') },
-            message && (React.createElement(Text, { className: cnSnackBar('Message'), lineHeight: "s" }, message)),
+            isString(message) || isNumber(message) ? (React.createElement(Text, { className: cnSnackBar('Message'), lineHeight: "s" }, message)) : (React.createElement(React.Fragment, null, message)),
             actions && React.createElement(SnackBarActionButton, { actions: actions })),
         onClose && (React.createElement(Button, { className: cnSnackBar('CloseButton'), view: "clear", iconLeft: IconClose, form: "round", size: "xs", onClick: handleClose }))));
 };

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

@@ -11,9 +11,10 @@ export declare type SnackBarItemStatus = typeof snackBarItemStatus[number];
 export declare const snackBarItemStatusDefault: SnackBarItemStatus;
 export declare type Item = {
     key: string | number;
-    message?: string | number;
+    message?: string | number | React.ReactNode;
     status?: SnackBarItemStatus;
     autoClose?: boolean | number;
+    showProgress?: 'timer';
     icon?: React.FC<IconProps>;
     actions?: SnackBarPropItemAction[];
     onClose?: (item: Item) => void;
@@ -24,6 +25,7 @@ declare type Props = {
     children?: never;
 };
 export declare type SnackBarProps = PropsWithHTMLAttributes<Props, HTMLDivElement>;
+export declare const COMPONENT_NAME: "SnackBar";
 export declare const cnSnackBar: import("@bem-react/classname").ClassNameFormatter;
 export declare const cnSnackBarItem: import("@bem-react/classname").ClassNameFormatter;
 export declare const SnackBar: React.FC<SnackBarProps>;

package/__internal__/src/components/SnackBar/SnackBar.js

@@ -8,11 +8,12 @@ import { usePropsHandler } from '../EventInterceptor/usePropsHandler';
 import { SnackBarItem } from './Item/SnackBar-Item';
 export var snackBarItemStatus = ['normal', 'system', 'success', 'warning', 'alert'];
 export var snackBarItemStatusDefault = snackBarItemStatus[0];
-export var cnSnackBar = cn('SnackBar');
-export var cnSnackBarItem = cn('SnackBar', 'Item');
+export var COMPONENT_NAME = 'SnackBar';
+export var cnSnackBar = cn(COMPONENT_NAME);
+export var cnSnackBarItem = cn(COMPONENT_NAME, 'Item');
 var cssTransitionClassNames = cnForCssTransition(cnSnackBarItem);
 export var SnackBar = function (props) {
-    var _a = usePropsHandler(cnSnackBar(), props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
+    var _a = usePropsHandler(COMPONENT_NAME, props), items = _a.items, className = _a.className, otherProps = __rest(_a, ["items", "className"]);
     return (React.createElement(TransitionGroup, __assign({}, otherProps, { className: cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item) {
         return (React.createElement(CSSTransition, { classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
             React.createElement(SnackBarItem, { item: item })));

package/__internal__/src/components/SnackBar/Timer/SnackBar-Timer.d.ts

@@ -8,5 +8,6 @@ export declare type SnackBarTimerProps = {
     onMount: SnackBarTimerPropOnMount;
     onTimeIsOver: () => void;
     startTime: number;
+    hidden?: boolean;
 };
 export declare const SnackBarTimer: React.FC<SnackBarTimerProps>;

package/__internal__/src/components/SnackBar/Timer/SnackBar-Timer.js

@@ -7,7 +7,7 @@ import { cnSnackBar } from '../SnackBar';
 var interval = 1000;
 export var SnackBarTimer = function (props) {
     var _a = __read(useState(false), 2), running = _a[0], setRunning = _a[1];
-    var onMount = props.onMount, onTimeIsOver = props.onTimeIsOver, startTimeprop = props.startTime;
+    var onMount = props.onMount, onTimeIsOver = props.onTimeIsOver, startTimeprop = props.startTime, hidden = props.hidden;
     var startTime = startTimeprop * interval;
     var _b = useTimer({
         endTime: 0,
@@ -24,5 +24,8 @@ export var SnackBarTimer = function (props) {
     }, [isRunning]);
     var progress = running ? ((time - interval) / startTime) * 100 : (time / startTime) * 100;
     var seconds = time ? time / interval : 0;
+    if (hidden) {
+        return null;
+    }
     return (React.createElement(Timer, { className: cnSnackBar('Timer'), seconds: seconds, progress: progress, size: "m", animation: true }));
 };

package/__internal__/src/components/Switch/Switch.css

@@ -146,18 +146,10 @@
     pointer-events: none;
   }
 
-  .Switch_disabled .Switch-Input:not(:checked):disabled {
-      --border-color: var(--color-control-typo-disable);
-      --background-color: transparent;
-      --content-color: var(--color-control-typo-disable);
-    }
-
-  .Switch_disabled .Switch-Input:checked:disabled {
+  .Switch_disabled .Switch-Input:disabled {
       --border-color: transparent;
       --background-color: var(--color-control-bg-disable);
       --content-color: var(--color-control-typo-disable);
-      background-color: var(--background-color);
-      border-color: transparent;
     }
 
   .Switch_disabled .Switch-Input:disabled ~ .Switch-Label {

package/__internal__/src/components/Table/FilterContainer/TableFilterContainer.css

@@ -3,8 +3,9 @@
   max-width: 400px;
   max-height: 440px;
   padding: var(--space-m);
-  background-color: var(--color-bg-secondary);
-  border-radius: calc(var(--control-radius) * 2);
+  background-color: var(--color-bg-default);
+  border: var(--control-border-width) solid var(--color-bg-border);
+  border-radius: var(--control-radius);
   -webkit-box-shadow: var(--shadow-layer);
           box-shadow: var(--shadow-layer);
 }

package/__internal__/src/components/Table/FilterTooltip/TableFilterTooltip.css

@@ -19,8 +19,9 @@
   .TableFilterTooltip-Content {
     width: 312px;
     padding: var(--space-s);
-    background-color: var(--color-bg-secondary);
-    border-radius: 8px;
+    background-color: var(--color-bg-default);
+    border: var(--control-border-width) solid var(--color-bg-border);
+    border-radius: var(--control-radius);
     -webkit-box-shadow: var(--shadow-layer);
             box-shadow: var(--shadow-layer);
   }

package/__internal__/src/components/Table/Header/TableHeader.css

@@ -1,6 +1,11 @@
 .TableHeader-Row {
     display: contents;
   }
+  .TableHeader-RemoveCell {
+    position: relative;
+    width: 0;
+    height: 0;
+  }
   .TableHeader-Cell_level_high .TableCell-Wrapper {
           display: -webkit-box;
           display: -ms-flexbox;

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

@@ -17,7 +17,7 @@ declare type Props<T extends TableRow> = {
     getSortIcon: (column: Header<T>) => React.FC;
     handleSortClick: (column: TableColumn<T>) => void;
     handleFilterTogglerClick: (id: string) => () => void;
-    handleTooltipSave: (field: string, tooltipSelectedFilters: FieldSelectedValues, value?: any) => void;
+    handleTooltipSave: (field: string, tooltipSelectedFilters: FieldSelectedValues, value?: unknown) => void;
     filters: Filters<T> | undefined;
     visibleFilter: string | null;
     selectedFilters: SelectedFilters;

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

@@ -6,9 +6,10 @@ import { TextField } from '../../TextField/TextField';
 import { TableFilterContainer } from '../FilterContainer/TableFilterContainer';
 var cnNumberFilter = cn('TableNumberFilter');
 export var TableNumberFilter = function (_a) {
+    var _b, _c;
     var onConfirm = _a.onConfirm, filterValue = _a.filterValue, title = _a.title, onCancel = _a.onCancel;
-    var _b = __read(useState(filterValue === null || filterValue === void 0 ? void 0 : filterValue.min), 2), minValue = _b[0], setMinValue = _b[1];
-    var _c = __read(useState(filterValue === null || filterValue === void 0 ? void 0 : filterValue.max), 2), maxValue = _c[0], setMaxValue = _c[1];
+    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 нужен для корректного выставления автофокуса

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

@@ -1,11 +1,13 @@
 import './TableSelectedOptionsList.css';
 import React from 'react';
+export declare type GetTagLabel = (id: string, name: string, filterValue?: unknown) => string;
 declare type Props = {
     values: Array<{
         id: string;
         name: string;
-        value?: any;
+        value?: unknown;
     }>;
+    getTagLabel?: GetTagLabel;
     onRemove: (id: string) => void;
     onReset: () => void;
 };

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

@@ -2,38 +2,41 @@ import './TableSelectedOptionsList.css';
 import React from 'react';
 import { IconClose } from '../../../icons/IconClose/IconClose';
 import { cn } from '../../../utils/bem';
-import { isNotNil } from '../../../utils/type-guards';
+import { isNotNil, isNumber } from '../../../utils/type-guards';
 import { Button } from '../../Button/Button';
 import { Tag } from '../../Tag/Tag';
 var cnTableSelectedOptionsList = cn('TableSelectedOptionsList');
-var getTagLabel = function (name, value) {
-    if (!isNotNil(value)) {
+var getTagLabelDefault = function (id, name, filterValue) {
+    var localFilterValue = (isNumber(filterValue)
+        ? { name: String(filterValue) }
+        : filterValue);
+    if (!isNotNil(localFilterValue)) {
         return name;
     }
     var restName = '';
-    if (Array.isArray(value)) {
-        restName = value.map(function (_a) {
+    if (Array.isArray(localFilterValue)) {
+        restName = localFilterValue.map(function (_a) {
             var name = _a.name;
             return name;
         }).join(', ');
     }
-    if (value.min && value.max) {
-        restName = "\u043E\u0442 " + value.min + " \u0434\u043E " + value.max;
+    if (localFilterValue.min && localFilterValue.max) {
+        restName = "\u043E\u0442 " + localFilterValue.min + " \u0434\u043E " + localFilterValue.max;
     }
-    else if (value.min) {
-        restName = "\u043E\u0442 " + value.min;
+    else if (localFilterValue.min) {
+        restName = "\u043E\u0442 " + localFilterValue.min;
     }
-    else if (value.max) {
-        restName = "\u0434\u043E " + value.max;
+    else if (localFilterValue.max) {
+        restName = "\u0434\u043E " + localFilterValue.max;
     }
-    if (value.name) {
-        restName = "" + value.name;
+    if (localFilterValue.name) {
+        restName = "" + localFilterValue.name;
     }
     return name + restName;
 };
 export var TableSelectedOptionsList = function (_a) {
-    var values = _a.values, onRemove = _a.onRemove, onReset = _a.onReset;
+    var values = _a.values, onRemove = _a.onRemove, onReset = _a.onReset, _b = _a.getTagLabel, getTagLabel = _b === void 0 ? getTagLabelDefault : _b;
     return (React.createElement("div", { className: cnTableSelectedOptionsList() },
-        React.createElement("div", { className: cnTableSelectedOptionsList('Options') }, values.map(function (option) { return (React.createElement(Tag, { className: cnTableSelectedOptionsList('Option'), key: option.id, label: getTagLabel(option.name, option.value), size: "xs", mode: "cancel", onCancel: function () { return onRemove(option.id); } })); })),
+        React.createElement("div", { className: cnTableSelectedOptionsList('Options') }, values.map(function (option) { return (React.createElement(Tag, { className: cnTableSelectedOptionsList('Option'), key: option.id, label: getTagLabel(option.id, option.name, option.value), size: "xs", mode: "cancel", onCancel: function () { return onRemove(option.id); } })); })),
         React.createElement(Button, { type: "button", onClick: onReset, title: "\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B", size: "xs", view: "clear", onlyIcon: true, iconLeft: IconClose, className: cnTableSelectedOptionsList('Button') })));
 };

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

@@ -5,7 +5,7 @@
   --sticky-top-and-left-z: calc(var(--sticky-top-z) + 1);
   --resizer-z: calc(var(--sticky-top-and-left-z) + 1);
   --fast-transition: 0.15s ease-out;
-  --shadow-color: rgba(var(--color-nums-shadow), 0.2);
+  --shadow-color: var(--color-bg-ghost);
   --table-border: 1px solid var(--color-bg-border);
   --resizer-width: calc(0 * 1px);
   position: relative;
@@ -92,3 +92,16 @@
     padding-bottom: var(--cell-padding-vertical);
     text-align: center;
   }
+
+  .Table-CreatRowCell {
+    position: -webkit-sticky;
+    position: sticky;
+    left: 0;
+    display: block;
+    background-color: var(--color-bg-default);
+    grid-column: 1 / -1;
+  }
+
+  .Table-CreateRowButton {
+    border-top: var(--table-border);
+  }

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

@@ -1,8 +1,9 @@
 import './Table.css';
 import React from 'react';
 import { HorizontalAlign, VerticalAlign } from './Cell/TableCell';
+import { GetTagLabel } from './SelectedOptionsList/TableSelectedOptionsList';
 import { Filters, onSortBy, SelectedFilters } from './filtering';
-import { Position } from './helpers';
+import { OrderType, Position } from './helpers';
 export { TableTextFilter } from './TextFilter/TableTextFilter';
 export { TableFilterContainer } from './FilterContainer/TableFilterContainer';
 export { TableNumberFilter } from './NumberFilter/TableNumberFilter';
@@ -32,6 +33,11 @@ declare type onRowClick = ({ id, e }: {
     id: string;
     e: React.MouseEvent;
 }) => void;
+declare type onRowCreate = ({ id, index, e }: {
+    id?: string;
+    index: number;
+    e: React.MouseEvent;
+}) => void;
 export declare type TableRow = {
     id: string;
     rows?: TableRow[];
@@ -49,8 +55,10 @@ declare type ColumnBase<T extends TableRow> = ValueOf<{
         accessor: K extends string ? K : never;
         sortable?: boolean;
         sortByField?: keyof T;
+        order?: OrderType;
         sortFn?(a: T[K], b: T[K]): number;
         renderCell?: (row: T) => React.ReactNode;
+        getComparisonValue?: (cell: T[K]) => number | string;
     };
 }>;
 declare type SingleColumnAddition<T extends TableRow> = ColumnBase<T> & {
@@ -69,7 +77,7 @@ export declare type TableColumn<T extends TableRow> = {
     mergeCells?: boolean;
     position?: Position;
 } & (GroupColumnAddition<T> | SingleColumnAddition<T>);
-export declare type Props<T extends TableRow> = {
+export declare type TableProps<T extends TableRow> = {
     columns: TableColumn<T>[];
     rows: T[];
     filters?: Filters<T>;
@@ -88,10 +96,16 @@ export declare type Props<T extends TableRow> = {
     className?: string;
     onRowHover?: onRowHover;
     onRowClick?: onRowClick;
+    onRowCreate?: onRowCreate;
+    rowCreateText?: string;
     lazyLoad?: LazyLoad;
     onFiltersUpdated?: (filters: SelectedFilters) => void;
+    getTagLabel?: GetTagLabel;
     isExpandedRowsByDefault?: boolean;
 };
+declare type Table = <T extends TableRow>(props: TableProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;
 export declare type ColumnMetaData = {
     filterable: boolean;
     isSortingActive: boolean;
@@ -107,4 +121,4 @@ export declare type SortingState<T extends TableRow> = {
     order: 'asc' | 'desc';
     sortFn?: (a: T[keyof T], b: T[keyof T]) => number;
 } | null;
-export declare const Table: <T extends TableRow>({ columns, rows, size, filters, isResizable, stickyHeader, stickyColumns, activeRow, verticalAlign, headerVerticalAlign, zebraStriped, borderBetweenRows, borderBetweenColumns, emptyRowsPlaceholder, className, onRowHover, onRowClick, lazyLoad, onSortBy, onFiltersUpdated, isExpandedRowsByDefault, }: Props<T>) => React.ReactElement;
+export declare const Table: Table;