@consta/uikit 3.4.0 → 3.8.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,10 +3,8 @@ 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;
@@ -17,8 +15,7 @@ declare type SidebarProps = {
     onClickOutside?: (event: MouseEvent) => void;
     onEsc?: (event: KeyboardEvent) => void;
     position?: SidebarPropPosition;
-    width?: SidebarPropWidth;
-    height?: SidebarPropHeight;
+    size?: SidebarPropSize;
     className?: string;
     children?: React.ReactNode;
     container?: HTMLDivElement | undefined;
@@ -31,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

@@ -10,11 +10,9 @@ import { PortalWithTheme, usePortalContext } from '../PortalWithTheme/PortalWith
 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));
@@ -34,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, onEsc = props.onEsc, _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", "onEsc", "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 () {
@@ -51,7 +49,7 @@ export var Sidebar = function (props) {
     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,7 +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 } from '../../../utils/type-guards';
+import { isNumber, isString } from '../../../utils/type-guards';
 import { Button } from '../../Button/Button';
 import { Text } from '../../Text/Text';
 import { cnTheme } from '../../Theme/Theme';
@@ -60,7 +60,7 @@ export var SnackBarItem = function (props) {
         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,7 +11,7 @@ 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';
@@ -25,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/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/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,6 +1,7 @@
 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 { OrderType, Position } from './helpers';
 export { TableTextFilter } from './TextFilter/TableTextFilter';
@@ -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[];
@@ -52,6 +58,7 @@ declare type ColumnBase<T extends TableRow> = ValueOf<{
         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> & {
@@ -89,8 +96,11 @@ export declare type TableProps<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> & {

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

@@ -9,12 +9,13 @@ import { IconUnsort } from '../../icons/IconUnsort/IconUnsort';
 import { sortBy as sortByDefault, updateAt } from '../../utils/array';
 import { cn } from '../../utils/bem';
 import { isNotNil, isString } from '../../utils/type-guards';
+import { Button } from '../Button/Button';
 import { Text } from '../Text/Text';
 import { TableCell } from './Cell/TableCell';
 import { TableHeader } from './Header/TableHeader';
 import { TableResizer } from './Resizer/TableResizer';
 import { TableRowsCollapse, } from './RowsCollapse/TableRowsCollapse';
-import { TableSelectedOptionsList } from './SelectedOptionsList/TableSelectedOptionsList';
+import { TableSelectedOptionsList, } from './SelectedOptionsList/TableSelectedOptionsList';
 import { fieldFiltersPresent, filterTableData, getSelectedFiltersList, isSelectedFiltersPresent, useSelectedFilters, } from './filtering';
 import { createSortingState, getColumnLeftOffset, getColumnsSize, getNewSorting, Order, transformRows, useHeaderData, useLazyLoadData, } from './helpers';
 export { TableTextFilter } from './TextFilter/TableTextFilter';
@@ -25,6 +26,11 @@ var cnTable = cn('Table');
 export var sizes = ['s', 'm', 'l'];
 export var zebraStriped = ['odd', 'even'];
 export var headerVerticalAligns = ['center', 'bottom'];
+var createButtonSizeMap = {
+    s: 'xs',
+    m: 's',
+    l: 'm'
+};
 var getColumnSortByField = function (column) {
     return (column.sortable && column.sortByField) || column.accessor;
 };
@@ -35,37 +41,37 @@ var sortingData = function (rows, sorting, onSortBy) {
     if (!sorting) {
         return rows;
     }
-    var sorredRows = sortByDefault(rows, sorting.by, sorting.order, sorting.sortFn);
-    if (sorredRows.some(function (row) { var _a; return (_a = row.rows) === null || _a === void 0 ? void 0 : _a.length; })) {
-        return sorredRows.map(function (row) {
+    var sortedRows = sortByDefault(rows, sorting.by, sorting.order, sorting.sortFn);
+    if (sortedRows.some(function (row) { var _a; return (_a = row.rows) === null || _a === void 0 ? void 0 : _a.length; })) {
+        return sortedRows.map(function (row) {
             return row.rows ? __assign(__assign({}, row), { rows: sortingData(row.rows, sorting, onSortBy) }) : row;
         });
     }
-    return sorredRows;
+    return sortedRows;
 };
 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, activeRow = props.activeRow, _j = props.verticalAlign, verticalAlign = _j === void 0 ? 'top' : _j, _k = props.headerVerticalAlign, headerVerticalAlign = _k === void 0 ? 'center' : _k, zebraStriped = props.zebraStriped, _l = props.borderBetweenRows, borderBetweenRows = _l === void 0 ? false : _l, _m = props.borderBetweenColumns, borderBetweenColumns = _m === void 0 ? false : _m, _o = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _o === void 0 ? defaultEmptyRowsPlaceholder : _o, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, _p = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _p === void 0 ? false : _p;
-    var _q = useHeaderData(columns), headers = _q.headers, flattenedHeaders = _q.flattenedHeaders, lowHeaders = _q.lowHeaders, headerRowsRefs = _q.headerRowsRefs, headerRowsHeights = _q.headerRowsHeights, resizerTopOffsets = _q.resizerTopOffsets;
+    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, activeRow = props.activeRow, _j = props.verticalAlign, verticalAlign = _j === void 0 ? 'top' : _j, _k = props.headerVerticalAlign, headerVerticalAlign = _k === void 0 ? 'center' : _k, zebraStriped = props.zebraStriped, _l = props.borderBetweenRows, borderBetweenRows = _l === void 0 ? false : _l, _m = props.borderBetweenColumns, borderBetweenColumns = _m === void 0 ? false : _m, _o = props.emptyRowsPlaceholder, emptyRowsPlaceholder = _o === void 0 ? defaultEmptyRowsPlaceholder : _o, className = props.className, onRowHover = props.onRowHover, onRowClick = props.onRowClick, onRowCreate = props.onRowCreate, _p = props.rowCreateText, rowCreateText = _p === void 0 ? '+ Добавить строку' : _p, lazyLoad = props.lazyLoad, onSortBy = props.onSortBy, onFiltersUpdated = props.onFiltersUpdated, getTagLabel = props.getTagLabel, _q = props.isExpandedRowsByDefault, isExpandedRowsByDefault = _q === void 0 ? false : _q;
+    var _r = useHeaderData(columns), headers = _r.headers, flattenedHeaders = _r.flattenedHeaders, lowHeaders = _r.lowHeaders, headerRowsRefs = _r.headerRowsRefs, headerRowsHeights = _r.headerRowsHeights, resizerTopOffsets = _r.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);
     var getColumnsWidth = function () { return lowHeaders.map(function (column) { return column.width; }); };
-    var _r = __read(React.useState(getColumnsWidth()), 2), resizedColumnWidths = _r[0], setResizedColumnWidths = _r[1];
+    var _s = __read(React.useState(getColumnsWidth()), 2), resizedColumnWidths = _s[0], setResizedColumnWidths = _s[1];
     var filters = React.useMemo(function () {
         return rawFilters && rawFilters.filter(function (filter) { return filter.id && filter.field; });
     }, [rawFilters]);
     React.useEffect(function () {
         setResizedColumnWidths(getColumnsWidth());
     }, [lowHeaders.length]);
-    var _s = __read(React.useState([]), 2), initialColumnWidths = _s[0], setInitialColumnWidths = _s[1];
-    var _t = __read(React.useState(null), 2), sorting = _t[0], setSorting = _t[1];
-    var _u = __read(React.useState(null), 2), visibleFilter = _u[0], setVisibleFilter = _u[1];
-    var _v = __read(React.useState({ top: 0, left: 0 }), 2), tableScroll = _v[0], setTableScroll = _v[1];
+    var _t = __read(React.useState([]), 2), initialColumnWidths = _t[0], setInitialColumnWidths = _t[1];
+    var _u = __read(React.useState(null), 2), sorting = _u[0], setSorting = _u[1];
+    var _v = __read(React.useState(null), 2), visibleFilter = _v[0], setVisibleFilter = _v[1];
+    var _w = __read(React.useState({ top: 0, left: 0 }), 2), tableScroll = _w[0], setTableScroll = _w[1];
     var tableRef = React.useRef(null);
     var columnsRefs = React.useRef({});
-    var _w = useSelectedFilters(filters, onFiltersUpdated), selectedFilters = _w.selectedFilters, updateSelectedFilters = _w.updateSelectedFilters, removeOneSelectedFilter = _w.removeOneSelectedFilter, removeAllSelectedFilters = _w.removeAllSelectedFilters;
-    var _x = __read(React.useState([]), 2), expandedRowIds = _x[0], setExpandedRowIds = _x[1];
+    var _x = useSelectedFilters(filters, onFiltersUpdated), selectedFilters = _x.selectedFilters, updateSelectedFilters = _x.updateSelectedFilters, removeOneSelectedFilter = _x.removeOneSelectedFilter, removeAllSelectedFilters = _x.removeAllSelectedFilters;
+    var _y = __read(React.useState([]), 2), expandedRowIds = _y[0], setExpandedRowIds = _y[1];
     // установка сортировки по умолчанию
     React.useEffect(function () {
         var sortingColumn = columns.find(function (col) { return isString(col.order) && Object.prototype.hasOwnProperty.call(Order, col.order); });
@@ -164,6 +170,12 @@ var InternalTable = function (props, ref) {
         }
         activeRow.onChange({ id: activeRow.id === id ? undefined : id, e: e });
     };
+    var handleRowHover = function (id) { return function (e) {
+        return onRowHover && onRowHover({ id: id, e: e });
+    }; };
+    var handleRowCreate = function (index, id) { return function (e) {
+        return onRowCreate && onRowCreate({ e: e, id: id, index: index });
+    }; };
     var handleColumnResize = function (idx, delta) {
         var columnMinWidth = Math.min(150, initialColumnWidths[idx]);
         var prevColumnWidth = resizedColumnWidths[idx] || initialColumnWidths[idx];
@@ -206,7 +218,7 @@ var InternalTable = function (props, ref) {
         });
     };
     var headersWithMetaData = columnsWithMetaData(flattenedHeaders);
-    var hasNestedRows = useMemo(function () { return rows.some(function (row) { var _a; return Boolean((_a = row.rows) === null || _a === void 0 ? void 0 : _a.length); }); }, [rows]);
+    var hasNestedRows = React.useMemo(function () { return rows.some(function (row) { var _a; return Boolean((_a = row.rows) === null || _a === void 0 ? void 0 : _a.length); }); }, [rows]);
     var sortedTableData = sortingData(rows, sorting, onSortBy);
     var filteredData = filters && isSelectedFiltersPresent(selectedFilters)
         ? filterTableData({
@@ -215,8 +227,8 @@ var InternalTable = function (props, ref) {
             selectedFilters: selectedFilters
         })
         : sortedTableData;
-    var _y = lazyLoad || {}, _z = _y.maxVisibleRows, maxVisibleRows = _z === void 0 ? 210 : _z, _0 = _y.scrollableEl, scrollableEl = _0 === void 0 ? tableRef.current : _0;
-    var _1 = useLazyLoadData(maxVisibleRows, scrollableEl, !!lazyLoad), getSlicedRows = _1.getSlicedRows, setBoundaryRef = _1.setBoundaryRef;
+    var _z = lazyLoad || {}, _0 = _z.maxVisibleRows, maxVisibleRows = _0 === void 0 ? 210 : _0, _1 = _z.scrollableEl, scrollableEl = _1 === void 0 ? tableRef.current : _1;
+    var _2 = useLazyLoadData(maxVisibleRows, scrollableEl, !!lazyLoad), getSlicedRows = _2.getSlicedRows, setBoundaryRef = _2.setBoundaryRef;
     var flatRowsData = transformRows(filteredData, expandedRowIds, isExpandedRowsByDefault);
     var rowsData = getSlicedRows(flatRowsData);
     var tableStyle = {
@@ -260,33 +272,53 @@ var InternalTable = function (props, ref) {
     var renderEmptyRowsPlaceholder = function (placeholder) {
         return typeof placeholder === 'string' ? React.createElement(Text, { size: "s" }, placeholder) : placeholder;
     };
+    var bottomCreateRowButton = useMemo(function () {
+        var _a;
+        var rowsLength = rowsData.length;
+        /* Можно и rowsData[rowsLength - 1], но в таком случае TS не подскажет,
+        что мы будем искать id в undefined это может привести к ошибке */
+        var lastRowId = ((_a = rowsData.slice(-1).pop()) !== null && _a !== void 0 ? _a : {}).id;
+        if (!onRowCreate) {
+            return null;
+        }
+        return (React.createElement("div", { className: cnTable(rowsLength ? 'CreatRowCell' : 'RowWithoutCells') },
+            React.createElement(Button, { size: createButtonSizeMap[size], form: "brick", label: rowCreateText, view: "clear", className: cnTable('CreateRowButton'), onClick: handleRowCreate(rowsLength, lastRowId), width: "full" })));
+    }, [rowCreateText, rowsData.length, onRowCreate]);
     var getTableCellProps = function (row, rowIdx, column, columnIdx) {
-        var rowSpan = 1;
-        if ((rowsData[rowIdx - 1] && rowsData[rowIdx - 1][column.accessor] !== row[column.accessor]) ||
-            rowIdx === 0 ||
-            !column.mergeCells) {
+        var mergeCells = column.mergeCells, accessor = column.accessor, position = column.position, _a = column.getComparisonValue, getComparisonValue = _a === void 0 ? function (e) { return e; } : _a;
+        var previousCell = rowsData[rowIdx - 1] && getComparisonValue(rowsData[rowIdx - 1][accessor]);
+        var currentCell = getComparisonValue(row[accessor]);
+        var result = {
+            rowSpan: 1,
+            show: false,
+            style: {
+                left: getStickyLeftOffset(columnIdx, position.topHeaderGridIndex)
+            }
+        };
+        if (mergeCells && ((rowsData[rowIdx - 1] && previousCell !== currentCell) || rowIdx === 0)) {
             for (var i = rowIdx; i < rowsData.length; i++) {
-                if (rowsData[i + 1] && rowsData[i + 1][column.accessor] === row[column.accessor]) {
-                    rowSpan++;
+                if (rowsData[i + 1]) {
+                    var nextCell = getComparisonValue(rowsData[i + 1][accessor]);
+                    if (currentCell === nextCell) {
+                        result.rowSpan++;
+                    }
+                    else {
+                        break;
+                    }
                 }
                 else {
                     break;
                 }
             }
-            var style = {
-                'left': getStickyLeftOffset(columnIdx, column.position.topHeaderGridIndex),
-                '--row-span': column.mergeCells ? "span " + rowSpan : null
-            };
-            return {
-                show: true,
-                style: style,
-                rowSpan: rowSpan
-            };
+            if (result.rowSpan > 1) {
+                result.style['--row-span'] = "span " + result.rowSpan;
+            }
+            result.show = true;
         }
-        return {
-            show: false,
-            rowSpan: rowSpan
-        };
+        if (!mergeCells) {
+            result.show = true;
+        }
+        return result;
     };
     return (React.createElement("div", { ref: useForkRef([tableRef, ref]), className: cnTable({
             size: size,
@@ -303,13 +335,13 @@ var InternalTable = function (props, ref) {
             } })))); }),
         React.createElement(TableHeader, { isStickyHeader: stickyHeader, headersWithMetaData: headersWithMetaData, headerRowsHeights: headerRowsHeights, headerRowsRefs: headerRowsRefs, getStickyLeftOffset: getStickyLeftOffset, stickyColumnsGrid: stickyColumnsGrid, showVerticalCellShadow: showVerticalCellShadow, headerVerticalAlign: headerVerticalAlign, getSortIcon: getSortIcon, handleSortClick: handleSortClick, handleFilterTogglerClick: handleFilterTogglerClick, handleTooltipSave: handleTooltipSave, filters: filters, visibleFilter: visibleFilter, selectedFilters: selectedFilters, showHorizontalCellShadow: showHorizontalCellShadow, borderBetweenColumns: borderBetweenColumns }),
         filters && isSelectedFiltersPresent(selectedFilters) && (React.createElement("div", { className: cnTable('RowWithoutCells') },
-            React.createElement(TableSelectedOptionsList, { values: getSelectedFiltersList({ filters: filters, selectedFilters: selectedFilters, columns: lowHeaders }), onRemove: removeSelectedFilter(filters), onReset: resetSelectedFilters }))),
+            React.createElement(TableSelectedOptionsList, { values: getSelectedFiltersList({ filters: filters, selectedFilters: selectedFilters, columns: lowHeaders }), getTagLabel: getTagLabel, onRemove: removeSelectedFilter(filters), onReset: resetSelectedFilters }))),
         rowsData.length > 0 ? (rowsData.map(function (row, rowIdx) {
             var nth = (rowIdx + 1) % 2 === 0 ? 'even' : 'odd';
             return (React.createElement("div", { key: row.id, role: "presentation", className: cnTable('CellsRow', {
                     nth: nth,
                     withMergedCells: hasMergedCells
-                }), onMouseEnter: function (e) { return onRowHover && onRowHover({ id: row.id, e: e }); }, onMouseLeave: function (e) { return onRowHover && onRowHover({ id: undefined, e: e }); }, onClick: function (e) { return onRowClick && onRowClick({ id: row.id, e: e }); } }, columnsWithMetaData(lowHeaders).map(function (column, columnIdx) {
+                }), onMouseEnter: handleRowHover(row.id), onMouseLeave: handleRowHover(undefined), onClick: function (e) { return onRowClick && onRowClick({ id: row.id, e: e }); } }, columnsWithMetaData(lowHeaders).map(function (column, columnIdx) {
                 var _a = getTableCellProps(row, rowIdx, column, columnIdx), show = _a.show, style = _a.style, rowSpan = _a.rowSpan;
                 if (show) {
                     return (React.createElement(TableCell, { type: "content", key: column.accessor, ref: setBoundaryRef(columnIdx, rowIdx), style: style, wrapperClassName: cnTable('ContentCell', {
@@ -327,6 +359,7 @@ var InternalTable = function (props, ref) {
                 return null;
             })));
         })) : (React.createElement("div", { className: cnTable('RowWithoutCells') },
-            React.createElement("div", { className: cnTable('EmptyCell') }, renderEmptyRowsPlaceholder(emptyRowsPlaceholder))))));
+            React.createElement("div", { className: cnTable('EmptyCell') }, renderEmptyRowsPlaceholder(emptyRowsPlaceholder)))),
+        bottomCreateRowButton));
 };
 export var Table = React.forwardRef(InternalTable);