@consta/uikit 3.2.0 → 3.6.0

package/__internal__/cjs-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__/cjs-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__/cjs-src/components/Sidebar/Sidebar.js

@@ -1,29 +1,28 @@
 "use strict";
 exports.__esModule = true;
-exports.Sidebar = void 0;
+exports.Sidebar = exports.cnSidebar = exports.sidebarPropSize = void 0;
 var tslib_1 = require("tslib");
 require("./Sidebar.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
 var useClickOutside_1 = require("../../hooks/useClickOutside/useClickOutside");
+var useGlobalKeys_1 = require("../../hooks/useGlobalKeys/useGlobalKeys");
 var bem_1 = require("../../utils/bem");
 var cnForCssTransition_1 = require("../../utils/cnForCssTransition");
 var PortalWithTheme_1 = require("../PortalWithTheme/PortalWithTheme");
 var Theme_1 = require("../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 = bem_1.cn('Sidebar');
+exports.sidebarPropSize = ['s', 'm', 'l', 'full', '1/2', '1/3', '1/4', '2/3', '3/4'];
+var sidebarPropSizeDefault = exports.sidebarPropSize[1];
+exports.cnSidebar = bem_1.cn('Sidebar');
 var SidebarContent = function (_a) {
     var className = _a.className, children = _a.children, rest = tslib_1.__rest(_a, ["className", "children"]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: cnSidebar('Content', null, [className]) }, rest), children));
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnSidebar('Content', null, [className]) }, rest), children));
 };
 var SidebarActions = function (_a) {
     var className = _a.className, children = _a.children, rest = tslib_1.__rest(_a, ["className", "children"]);
-    return (react_1["default"].createElement("div", tslib_1.__assign({ className: cnSidebar('Actions', null, [className]) }, rest), children));
+    return (react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnSidebar('Actions', null, [className]) }, rest), children));
 };
 var ContextConsumer = function (_a) {
     var onClickOutside = _a.onClickOutside, children = _a.children, ignoreClicksInsideRefs = _a.ignoreClicksInsideRefs;
@@ -36,7 +35,7 @@ var ContextConsumer = function (_a) {
     return react_1["default"].createElement(react_1["default"].Fragment, null, children);
 };
 exports.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 = tslib_1.__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 = tslib_1.__rest(props, ["isOpen", "onClose", "onOpen", "hasOverlay", "onOverlayClick", "onClickOutside", "onEsc", "position", "size", "className", "children", "container"]);
     var ref = react_1.useRef(null);
     var theme = Theme_1.useTheme().theme;
     react_1.useEffect(function () {
@@ -47,10 +46,13 @@ exports.Sidebar = function (props) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     }, [isOpen]);
-    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, className: cnSidebar({ position: position }), classNames: cnForCssTransition_1.cnForCssTransition(cnSidebar), timeout: 200 },
+    useGlobalKeys_1.useGlobalKeys({
+        Escape: function (e) { return isOpen && onEsc && onEsc(e); }
+    });
+    return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { "in": isOpen, unmountOnExit: true, className: exports.cnSidebar({ position: position }), classNames: cnForCssTransition_1.cnForCssTransition(exports.cnSidebar), timeout: 200 },
         react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container },
-            hasOverlay && react_1["default"].createElement("div", { className: cnSidebar('Overlay'), "aria-label": "Overlay" }),
-            react_1["default"].createElement("div", tslib_1.__assign({ className: cnSidebar('Window', { width: width, height: height, position: position }, [className]), ref: ref }, rest),
+            hasOverlay && react_1["default"].createElement("div", { className: exports.cnSidebar('Overlay'), "aria-label": "Overlay" }),
+            react_1["default"].createElement("div", tslib_1.__assign({ className: exports.cnSidebar('Window', { size: size, position: position }, [className]), ref: ref }, rest),
                 react_1["default"].createElement(ContextConsumer, { onClickOutside: onClickOutside || onOverlayClick, ignoreClicksInsideRefs: [ref] }, children)))));
 };
 exports.Sidebar.Content = SidebarContent;

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

@@ -6,6 +6,7 @@ require("../../Theme/_color/Theme_color_gpnDark.css");
 require("./SnackBar-Item.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var IconClose_1 = require("../../../icons/IconClose/IconClose");
+var type_guards_1 = require("../../../utils/type-guards");
 var Button_1 = require("../../Button/Button");
 var Text_1 = require("../../Text/Text");
 var Theme_1 = require("../../Theme/Theme");
@@ -24,7 +25,7 @@ var getAutoCloseTime = function (autoClose) {
 };
 exports.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 ? SnackBar_1.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 ? SnackBar_1.snackBarItemStatusDefault : _a, onAutoCloseProp = item.onAutoClose;
     var _b = tslib_1.__read(react_1.useState(null), 2), timerFunctions = _b[0], setTimerFunctions = _b[1];
     var _c = tslib_1.__read(react_1.useState(false), 2), hover = _c[0], setHover = _c[1];
     var _d = tslib_1.__read(react_1.useState(false), 2), timeIsOver = _d[0], setTimeIsOver = _d[1];
@@ -34,6 +35,7 @@ exports.SnackBarItem = function (props) {
     var handleMouseEnter = function () { return setHover(true); };
     var handleMouseLeave = function () { return setHover(false); };
     var autoCloseTime = getAutoCloseTime(autoClose);
+    var hideAutoCloseTimer = showProgress === undefined || !(type_guards_1.isNumber(autoCloseTime) && autoCloseTime > 0);
     var onAutoClose = function (item) {
         if (onAutoCloseProp) {
             onAutoCloseProp(item);
@@ -58,10 +60,10 @@ exports.SnackBarItem = function (props) {
     };
     var handleClose = onClose ? function () { return onClose(item); } : undefined;
     return (react_1["default"].createElement("div", { className: SnackBar_1.cnSnackBarItem({ status: status }, [Theme_1.cnTheme({ color: 'gpnDark' })]), onMouseEnter: autoCloseTime ? handleMouseEnter : undefined, onMouseLeave: autoCloseTime ? handleMouseLeave : undefined },
-        autoCloseTime && (react_1["default"].createElement(SnackBar_Timer_1.SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime })),
-        !autoCloseTime && Icon && react_1["default"].createElement(Icon, { className: SnackBar_1.cnSnackBar('Icon'), size: "m" }),
+        autoCloseTime && (react_1["default"].createElement(SnackBar_Timer_1.SnackBarTimer, { onMount: handleMountTimer, onTimeIsOver: handleTimeIsOver, startTime: autoCloseTime, hidden: hideAutoCloseTimer })),
+        hideAutoCloseTimer && Icon && react_1["default"].createElement(Icon, { className: SnackBar_1.cnSnackBar('Icon'), size: "m" }),
         react_1["default"].createElement("div", { className: SnackBar_1.cnSnackBar('Content') },
-            message && (react_1["default"].createElement(Text_1.Text, { className: SnackBar_1.cnSnackBar('Message'), lineHeight: "s" }, message)),
+            type_guards_1.isString(message) || type_guards_1.isNumber(message) ? (react_1["default"].createElement(Text_1.Text, { className: SnackBar_1.cnSnackBar('Message'), lineHeight: "s" }, message)) : (react_1["default"].createElement(react_1["default"].Fragment, null, message)),
             actions && react_1["default"].createElement(SnackBar_ActionButton_1.SnackBarActionButton, { actions: actions })),
         onClose && (react_1["default"].createElement(Button_1.Button, { className: SnackBar_1.cnSnackBar('CloseButton'), view: "clear", iconLeft: IconClose_1.IconClose, form: "round", size: "xs", onClick: handleClose }))));
 };

package/__internal__/cjs-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__/cjs-src/components/SnackBar/SnackBar.js

@@ -1,6 +1,6 @@
 "use strict";
 exports.__esModule = true;
-exports.SnackBar = exports.cnSnackBarItem = exports.cnSnackBar = exports.snackBarItemStatusDefault = exports.snackBarItemStatus = void 0;
+exports.SnackBar = exports.cnSnackBarItem = exports.cnSnackBar = exports.COMPONENT_NAME = exports.snackBarItemStatusDefault = exports.snackBarItemStatus = void 0;
 var tslib_1 = require("tslib");
 require("./SnackBar.css");
 var react_1 = tslib_1.__importDefault(require("react"));
@@ -11,11 +11,12 @@ var usePropsHandler_1 = require("../EventInterceptor/usePropsHandler");
 var SnackBar_Item_1 = require("./Item/SnackBar-Item");
 exports.snackBarItemStatus = ['normal', 'system', 'success', 'warning', 'alert'];
 exports.snackBarItemStatusDefault = exports.snackBarItemStatus[0];
-exports.cnSnackBar = bem_1.cn('SnackBar');
-exports.cnSnackBarItem = bem_1.cn('SnackBar', 'Item');
+exports.COMPONENT_NAME = 'SnackBar';
+exports.cnSnackBar = bem_1.cn(exports.COMPONENT_NAME);
+exports.cnSnackBarItem = bem_1.cn(exports.COMPONENT_NAME, 'Item');
 var cssTransitionClassNames = cnForCssTransition_1.cnForCssTransition(exports.cnSnackBarItem);
 exports.SnackBar = function (props) {
-    var _a = usePropsHandler_1.usePropsHandler(exports.cnSnackBar(), props), items = _a.items, className = _a.className, otherProps = tslib_1.__rest(_a, ["items", "className"]);
+    var _a = usePropsHandler_1.usePropsHandler(exports.COMPONENT_NAME, props), items = _a.items, className = _a.className, otherProps = tslib_1.__rest(_a, ["items", "className"]);
     return (react_1["default"].createElement(react_transition_group_1.TransitionGroup, tslib_1.__assign({}, otherProps, { className: exports.cnSnackBar(null, [className]), appear: true, enter: true, exit: true }), items.map(function (item) {
         return (react_1["default"].createElement(react_transition_group_1.CSSTransition, { classNames: cssTransitionClassNames, key: item.key, timeout: 200 },
             react_1["default"].createElement(SnackBar_Item_1.SnackBarItem, { item: item })));

package/__internal__/cjs-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__/cjs-src/components/SnackBar/Timer/SnackBar-Timer.js

@@ -10,7 +10,7 @@ var SnackBar_1 = require("../SnackBar");
 var interval = 1000;
 exports.SnackBarTimer = function (props) {
     var _a = tslib_1.__read(react_1.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_1.useTimer({
         endTime: 0,
@@ -27,5 +27,8 @@ exports.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_1["default"].createElement(Timer_1.Timer, { className: SnackBar_1.cnSnackBar('Timer'), seconds: seconds, progress: progress, size: "m", animation: true }));
 };

package/__internal__/cjs-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__/cjs-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__/cjs-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__/cjs-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__/cjs-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__/cjs-src/components/Table/NumberFilter/TableNumberFilter.js

@@ -9,9 +9,10 @@ var TextField_1 = require("../../TextField/TextField");
 var TableFilterContainer_1 = require("../FilterContainer/TableFilterContainer");
 var cnNumberFilter = bem_1.cn('TableNumberFilter');
 exports.TableNumberFilter = function (_a) {
+    var _b, _c;
     var onConfirm = _a.onConfirm, filterValue = _a.filterValue, title = _a.title, onCancel = _a.onCancel;
-    var _b = tslib_1.__read(react_1.useState(filterValue === null || filterValue === void 0 ? void 0 : filterValue.min), 2), minValue = _b[0], setMinValue = _b[1];
-    var _c = tslib_1.__read(react_1.useState(filterValue === null || filterValue === void 0 ? void 0 : filterValue.max), 2), maxValue = _c[0], setMaxValue = _c[1];
+    var _d = tslib_1.__read(react_1.useState((_b = filterValue) === null || _b === void 0 ? void 0 : _b.min), 2), minValue = _d[0], setMinValue = _d[1];
+    var _e = tslib_1.__read(react_1.useState((_c = filterValue) === null || _c === void 0 ? void 0 : _c.max), 2), maxValue = _e[0], setMaxValue = _e[1];
     var textFieldRef = react_1.useRef(null);
     react_1.useEffect(function () {
         // setTimeout нужен для корректного выставления автофокуса

package/__internal__/cjs-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__/cjs-src/components/Table/SelectedOptionsList/TableSelectedOptionsList.js

@@ -10,34 +10,37 @@ var type_guards_1 = require("../../../utils/type-guards");
 var Button_1 = require("../../Button/Button");
 var Tag_1 = require("../../Tag/Tag");
 var cnTableSelectedOptionsList = bem_1.cn('TableSelectedOptionsList');
-var getTagLabel = function (name, value) {
-    if (!type_guards_1.isNotNil(value)) {
+var getTagLabelDefault = function (id, name, filterValue) {
+    var localFilterValue = (type_guards_1.isNumber(filterValue)
+        ? { name: String(filterValue) }
+        : filterValue);
+    if (!type_guards_1.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;
 };
 exports.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_1["default"].createElement("div", { className: cnTableSelectedOptionsList() },
-        react_1["default"].createElement("div", { className: cnTableSelectedOptionsList('Options') }, values.map(function (option) { return (react_1["default"].createElement(Tag_1.Tag, { className: cnTableSelectedOptionsList('Option'), key: option.id, label: getTagLabel(option.name, option.value), size: "xs", mode: "cancel", onCancel: function () { return onRemove(option.id); } })); })),
+        react_1["default"].createElement("div", { className: cnTableSelectedOptionsList('Options') }, values.map(function (option) { return (react_1["default"].createElement(Tag_1.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_1["default"].createElement(Button_1.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_1.IconClose, className: cnTableSelectedOptionsList('Button') })));
 };

package/__internal__/cjs-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__/cjs-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;