@consta/uikit 3.2.0 → 3.6.0

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

@@ -5,12 +5,14 @@ var tslib_1 = require("tslib");
 require("./Table.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useComponentSize_1 = require("../../hooks/useComponentSize/useComponentSize");
+var useForkRef_1 = require("../../hooks/useForkRef/useForkRef");
 var IconSortDown_1 = require("../../icons/IconSortDown/IconSortDown");
 var IconSortUp_1 = require("../../icons/IconSortUp/IconSortUp");
 var IconUnsort_1 = require("../../icons/IconUnsort/IconUnsort");
 var array_1 = require("../../utils/array");
 var bem_1 = require("../../utils/bem");
 var type_guards_1 = require("../../utils/type-guards");
+var Button_1 = require("../Button/Button");
 var Text_1 = require("../Text/Text");
 var TableCell_1 = require("./Cell/TableCell");
 var TableHeader_1 = require("./Header/TableHeader");
@@ -31,6 +33,11 @@ var cnTable = bem_1.cn('Table');
 exports.sizes = ['s', 'm', 'l'];
 exports.zebraStriped = ['odd', 'even'];
 exports.headerVerticalAligns = ['center', 'bottom'];
+var createButtonSizeMap = {
+    s: 'xs',
+    m: 's',
+    l: 'm'
+};
 var getColumnSortByField = function (column) {
     return (column.sortable && column.sortByField) || column.accessor;
 };
@@ -41,23 +48,26 @@ var sortingData = function (rows, sorting, onSortBy) {
     if (!sorting) {
         return rows;
     }
-    var sorredRows = array_1.sortBy(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 = array_1.sortBy(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 ? tslib_1.__assign(tslib_1.__assign({}, row), { rows: sortingData(row.rows, sorting, onSortBy) }) : row;
         });
     }
-    return sorredRows;
+    return sortedRows;
 };
 var defaultEmptyRowsPlaceholder = (react_1["default"].createElement(Text_1.Text, { as: "span", view: "primary", size: "s", lineHeight: "s" }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"));
-exports.Table = function (_a) {
-    var _b, _c, _d, _e;
-    var columns = _a.columns, rows = _a.rows, _f = _a.size, size = _f === void 0 ? 'l' : _f, filters = _a.filters, _g = _a.isResizable, isResizable = _g === void 0 ? false : _g, _h = _a.stickyHeader, stickyHeader = _h === void 0 ? false : _h, _j = _a.stickyColumns, stickyColumns = _j === void 0 ? 0 : _j, activeRow = _a.activeRow, _k = _a.verticalAlign, verticalAlign = _k === void 0 ? 'top' : _k, _l = _a.headerVerticalAlign, headerVerticalAlign = _l === void 0 ? 'center' : _l, zebraStriped = _a.zebraStriped, _m = _a.borderBetweenRows, borderBetweenRows = _m === void 0 ? false : _m, _o = _a.borderBetweenColumns, borderBetweenColumns = _o === void 0 ? false : _o, _p = _a.emptyRowsPlaceholder, emptyRowsPlaceholder = _p === void 0 ? defaultEmptyRowsPlaceholder : _p, className = _a.className, onRowHover = _a.onRowHover, onRowClick = _a.onRowClick, lazyLoad = _a.lazyLoad, onSortBy = _a.onSortBy, onFiltersUpdated = _a.onFiltersUpdated, _q = _a.isExpandedRowsByDefault, isExpandedRowsByDefault = _q === void 0 ? false : _q;
+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, 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 = helpers_1.useHeaderData(columns), headers = _r.headers, flattenedHeaders = _r.flattenedHeaders, lowHeaders = _r.lowHeaders, headerRowsRefs = _r.headerRowsRefs, headerRowsHeights = _r.headerRowsHeights, resizerTopOffsets = _r.resizerTopOffsets;
-    var stickyColumnsGrid = ((_b = headers[0][stickyColumns - 1]) === null || _b === void 0 ? void 0 : _b.position.gridIndex) +
-        (((_c = headers[0][stickyColumns - 1]) === null || _c === void 0 ? void 0 : _c.position.colSpan) || 1);
+    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 _s = tslib_1.__read(react_1["default"].useState(getColumnsWidth()), 2), resizedColumnWidths = _s[0], setResizedColumnWidths = _s[1];
+    var filters = react_1["default"].useMemo(function () {
+        return rawFilters && rawFilters.filter(function (filter) { return filter.id && filter.field; });
+    }, [rawFilters]);
     react_1["default"].useEffect(function () {
         setResizedColumnWidths(getColumnsWidth());
     }, [lowHeaders.length]);
@@ -69,6 +79,14 @@ exports.Table = function (_a) {
     var columnsRefs = react_1["default"].useRef({});
     var _x = filtering_1.useSelectedFilters(filters, onFiltersUpdated), selectedFilters = _x.selectedFilters, updateSelectedFilters = _x.updateSelectedFilters, removeOneSelectedFilter = _x.removeOneSelectedFilter, removeAllSelectedFilters = _x.removeAllSelectedFilters;
     var _y = tslib_1.__read(react_1["default"].useState([]), 2), expandedRowIds = _y[0], setExpandedRowIds = _y[1];
+    // установка сортировки по умолчанию
+    react_1["default"].useEffect(function () {
+        var sortingColumn = columns.find(function (col) { return type_guards_1.isString(col.order) && Object.prototype.hasOwnProperty.call(helpers_1.Order, col.order); });
+        if (sortingColumn) {
+            var sortingState = helpers_1.createSortingState(getColumnSortByField(sortingColumn), sortingColumn.order, sortingColumn.sortFn);
+            setSorting(sortingState);
+        }
+    }, [columns]);
     /*
       Подписываемся на изменения размеров таблицы, но не используем значения из
       хука так как нам нужна ширина и высота таблицы без размера скролла. Этот хук
@@ -76,8 +94,8 @@ exports.Table = function (_a) {
       скролл бара.
     */
     useComponentSize_1.useComponentSize(tableRef);
-    var tableHeight = ((_d = tableRef.current) === null || _d === void 0 ? void 0 : _d.clientHeight) || 0;
-    var tableWidth = ((_e = tableRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) || 0;
+    var tableHeight = ((_c = tableRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0;
+    var tableWidth = ((_d = tableRef.current) === null || _d === void 0 ? void 0 : _d.clientWidth) || 0;
     var showVerticalCellShadow = tableScroll.left > 0;
     var showHorizontalCellShadow = tableScroll.top > 0;
     var isRowsClickable = activeRow && activeRow.onChange;
@@ -159,6 +177,12 @@ exports.Table = function (_a) {
         }
         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];
@@ -201,7 +225,7 @@ exports.Table = function (_a) {
         });
     };
     var headersWithMetaData = columnsWithMetaData(flattenedHeaders);
-    var hasNestedRows = react_1.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_1["default"].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 && filtering_1.isSelectedFiltersPresent(selectedFilters)
         ? filtering_1.filterTableData({
@@ -255,38 +279,58 @@ exports.Table = function (_a) {
     var renderEmptyRowsPlaceholder = function (placeholder) {
         return typeof placeholder === 'string' ? react_1["default"].createElement(Text_1.Text, { size: "s" }, placeholder) : placeholder;
     };
+    var bottomCreateRowButton = react_1.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_1["default"].createElement("div", { className: cnTable(rowsLength ? 'CreatRowCell' : 'RowWithoutCells') },
+            react_1["default"].createElement(Button_1.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_1["default"].createElement("div", { ref: tableRef, className: cnTable({
+    return (react_1["default"].createElement("div", { ref: useForkRef_1.useForkRef([tableRef, ref]), className: cnTable({
             size: size,
             isResizable: isResizable,
-            zebraStriped: !hasMergedCells && zebraStriped,
+            zebraStriped: zebraStriped,
             withBorderBottom: !filteredData.length
         }, [className]), style: tableStyle, onScroll: handleScroll },
         columnsWithMetaData(lowHeaders).map(function (column, columnIdx) { return (react_1["default"].createElement(TableCell_1.TableCell, { type: "resizer", key: columnIdx, ref: function (ref) {
@@ -298,13 +342,13 @@ exports.Table = function (_a) {
             } })))); }),
         react_1["default"].createElement(TableHeader_1.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 && filtering_1.isSelectedFiltersPresent(selectedFilters) && (react_1["default"].createElement("div", { className: cnTable('RowWithoutCells') },
-            react_1["default"].createElement(TableSelectedOptionsList_1.TableSelectedOptionsList, { values: filtering_1.getSelectedFiltersList({ filters: filters, selectedFilters: selectedFilters, columns: lowHeaders }), onRemove: removeSelectedFilter(filters), onReset: resetSelectedFilters }))),
+            react_1["default"].createElement(TableSelectedOptionsList_1.TableSelectedOptionsList, { values: filtering_1.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_1["default"].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_1["default"].createElement(TableCell_1.TableCell, { type: "content", key: column.accessor, ref: setBoundaryRef(columnIdx, rowIdx), style: style, wrapperClassName: cnTable('ContentCell', {
@@ -322,5 +366,7 @@ exports.Table = function (_a) {
                 return null;
             })));
         })) : (react_1["default"].createElement("div", { className: cnTable('RowWithoutCells') },
-            react_1["default"].createElement("div", { className: cnTable('EmptyCell') }, renderEmptyRowsPlaceholder(emptyRowsPlaceholder))))));
+            react_1["default"].createElement("div", { className: cnTable('EmptyCell') }, renderEmptyRowsPlaceholder(emptyRowsPlaceholder)))),
+        bottomCreateRowButton));
 };
+exports.Table = react_1["default"].forwardRef(InternalTable);

package/__internal__/cjs-src/components/Table/TextFilter/TableTextFilter.css

@@ -21,7 +21,7 @@
   }
   .TableTextFilter-Controls .Button {
       height: auto;
-      margin-right: var(--space-3xl);
+      margin-right: var(--space-l);
       padding: 0;
       color: var(--color-typo-link);
       background-color: transparent;

package/__internal__/cjs-src/components/Table/filtering.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { TableColumn, TableRow, ValueOf } from './Table';
 export declare type FilterComponentProps = {
-    onConfirm: (value: any) => void;
+    onConfirm: (value: unknown) => void;
     onCancel: () => void;
-    filterValue?: any;
+    filterValue?: unknown;
 } & Record<string, unknown>;
 export declare type Filters<T extends TableRow> = ValueOf<{
     [K in keyof T]: {
         id: string;
         name: string;
         field: K extends string ? K : never;
-        filterer(value: any, filterValue?: any): boolean;
+        filterer(value: any, filterValue?: unknown): boolean;
     } & ({
         component?: never;
     } | {
@@ -56,7 +56,7 @@ export declare const filterTableData: <T extends TableRow>({ data, filters, sele
 }) => T[];
 export declare const useSelectedFilters: <T extends TableRow>(filters?: Filters<T> | undefined, onFiltersUpdated?: ((filters: SelectedFilters) => void) | undefined) => {
     selectedFilters: SelectedFilters;
-    updateSelectedFilters: (field: string, tooltipSelectedFilters: FieldSelectedValues, value?: any) => void;
+    updateSelectedFilters: (field: string, tooltipSelectedFilters: FieldSelectedValues, value?: unknown) => void;
     removeOneSelectedFilter: (availableFilters: Filters<T>, filter: string) => void;
     removeAllSelectedFilters: (availableFilters: Filters<T>) => void;
 };

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

@@ -1,5 +1,12 @@
 import React from 'react';
 import { ColumnWidth, SortingState, TableColumn, TableRow, TableTreeRow } from './Table';
+export declare const Order: {
+    readonly ASC: "ASC";
+    readonly asc: "asc";
+    readonly DESC: "DESC";
+    readonly desc: "desc";
+};
+export declare type OrderType = typeof Order[keyof typeof Order];
 export declare type Position = {
     colSpan?: number;
     rowSpan?: number;
@@ -27,6 +34,7 @@ export declare const getColumnLeftOffset: ({ columnIndex, resizedColumnWidths, i
     resizedColumnWidths: Array<number | undefined>;
     initialColumnWidths: number[];
 }) => number;
+export declare const createSortingState: <T extends TableRow>(by: keyof T, order?: "desc" | "asc" | "ASC" | "DESC" | undefined, sortFn?: ((a: T[keyof T], b: T[keyof T]) => number) | undefined) => SortingState<T>;
 export declare const getNewSorting: <T extends TableRow>(currentSorting: SortingState<T>, newField: keyof T, sortFn?: ((a: T[keyof T], b: T[keyof T]) => number) | undefined) => SortingState<T>;
 export declare const getMaxLevel: <T extends TableRow>(columns: TableColumn<T>[]) => number;
 export declare const transformColumns: <T extends TableRow>(columns: TableColumn<T>[], maxLevel: number) => (({
@@ -42,8 +50,10 @@ export declare const transformColumns: <T extends TableRow>(columns: TableColumn
     accessor: K extends string ? K : never;
     sortable?: boolean | undefined;
     sortByField?: keyof T | undefined;
+    order?: "desc" | "asc" | "ASC" | "DESC" | undefined;
     sortFn?(a: T[K], b: T[K]): number;
     renderCell?: ((row: T) => React.ReactNode) | undefined;
+    getComparisonValue?: ((cell: T[K]) => React.ReactText) | undefined;
 }; }>]?: undefined; } & {
     position: Position;
 }) | ({
@@ -57,8 +67,10 @@ export declare const transformColumns: <T extends TableRow>(columns: TableColumn
     accessor: K extends string ? K : never;
     sortable?: boolean | undefined;
     sortByField?: keyof T | undefined;
+    order?: "desc" | "asc" | "ASC" | "DESC" | undefined;
     sortFn?(a: T[K], b: T[K]): number;
     renderCell?: ((row: T) => React.ReactNode) | undefined;
+    getComparisonValue?: ((cell: T[K]) => React.ReactText) | undefined;
 }; }> & {
     columns?: undefined;
 } & {

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

@@ -1,11 +1,19 @@
 "use strict";
 exports.__esModule = true;
-exports.transformRows = exports.useLazyLoadData = exports.useHeaderData = exports.transformColumns = exports.getMaxLevel = exports.getNewSorting = exports.getColumnLeftOffset = exports.getColumnsSize = void 0;
+exports.transformRows = exports.useLazyLoadData = exports.useHeaderData = exports.transformColumns = exports.getMaxLevel = exports.getNewSorting = exports.createSortingState = exports.getColumnLeftOffset = exports.getColumnsSize = exports.Order = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var type_guards_1 = require("../../utils/type-guards");
+exports.Order = {
+    ASC: 'ASC',
+    asc: 'asc',
+    DESC: 'DESC',
+    desc: 'desc'
+};
 exports.getColumnsSize = function (sizes) {
-    return sizes.map(function (s) { return (s ? s + "px" : "minmax(min-content, " + 100 / sizes.length + "%)"); }).join(' ');
+    return sizes
+        .map(function (s) { return (type_guards_1.isNumber(s) ? s + "px" : "minmax(min-content, " + 100 / sizes.length + "%)"); })
+        .join(' ');
 };
 exports.getColumnLeftOffset = function (_a) {
     var columnIndex = _a.columnIndex, resizedColumnWidths = _a.resizedColumnWidths, initialColumnWidths = _a.initialColumnWidths;
@@ -14,6 +22,12 @@ exports.getColumnLeftOffset = function (_a) {
         .map(function (size, index) { return resizedColumnWidths[index] || size; });
     return selectedColumns.reduce(function (acc, column) { return acc + column; }, 0);
 };
+exports.createSortingState = function (by, order, sortFn) {
+    if (!type_guards_1.isString(order)) {
+        return null;
+    }
+    return { by: by, order: order.toLowerCase(), sortFn: sortFn };
+};
 exports.getNewSorting = function (currentSorting, newField, sortFn) {
     if (!currentSorting || currentSorting.by !== newField) {
         return {

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

@@ -6,7 +6,7 @@ export declare const tagBasePropSizeDefault: "m";
 export declare type TagBasePropSize = typeof tagBasePropSize[number];
 export declare const tagBasePropGroupNumberValue: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9];
 export declare const tagBasePropGroupStringValue: readonly ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
-export declare const tagBasePropGroup: ("1" | 4 | 2 | 7 | 1 | 5 | 3 | 6 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
+export declare const tagBasePropGroup: ("1" | 1 | 2 | 4 | 3 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9")[];
 export declare type TagBasePropGroup = typeof tagBasePropGroup[number];
 export declare const tagBasePropView: readonly ["stroked", "filled"];
 export declare const tagBasePropViewDefault: "stroked";

package/__internal__/cjs-src/components/Text/Text.css

@@ -169,3 +169,9 @@
   .Text_width_default {
       max-width: 75ch;
     }
+  .Text_truncate {
+    overflow: hidden;
+    max-width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }

package/__internal__/cjs-src/components/Text/Text.d.ts

@@ -30,7 +30,7 @@ export declare const textPropTransform: readonly ["uppercase"];
 export declare type TextPropTransform = typeof textPropTransform[number];
 export declare const textPropWidth: readonly ["default"];
 export declare type TextPropWidth = typeof textPropWidth[number];
-declare type Props = {
+export declare type TextProps = {
     align?: TextPropAlign;
     cursor?: TextPropCursor;
     decoration?: TextPropDecoration;
@@ -45,7 +45,7 @@ declare type Props = {
     view?: TextPropView;
     weight?: TextPropWeight;
     width?: TextPropWidth;
+    truncate?: boolean;
 };
 export declare const cnText: import("@bem-react/classname").ClassNameFormatter;
-export declare const Text: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<Props, "div">;
-export {};
+export declare const Text: import("../../utils/types/PropsWithAsAttributes").ComponentWithAs<TextProps, "div">;

package/__internal__/cjs-src/components/Text/Text.js

@@ -48,7 +48,7 @@ exports.textPropTransform = ['uppercase'];
 exports.textPropWidth = ['default'];
 exports.cnText = bem_1.cn('Text');
 exports.Text = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
-    var _a = props.as, as = _a === void 0 ? 'div' : _a, align = props.align, cursor = props.cursor, decoration = props.decoration, display = props.display, font = props.font, _b = props.lineHeight, lineHeight = _b === void 0 ? exports.textPropLineHeightDefault : _b, _c = props.size, size = _c === void 0 ? exports.textPropSizeDefault : _c, spacing = props.spacing, fontStyle = props.fontStyle, transform = props.transform, type = props.type, _d = props.view, view = _d === void 0 ? exports.textPropViewDefault : _d, weight = props.weight, width = props.width, className = props.className, children = props.children, otherProps = tslib_1.__rest(props, ["as", "align", "cursor", "decoration", "display", "font", "lineHeight", "size", "spacing", "fontStyle", "transform", "type", "view", "weight", "width", "className", "children"]);
+    var _a = props.as, as = _a === void 0 ? 'div' : _a, align = props.align, cursor = props.cursor, decoration = props.decoration, display = props.display, font = props.font, _b = props.lineHeight, lineHeight = _b === void 0 ? exports.textPropLineHeightDefault : _b, _c = props.size, size = _c === void 0 ? exports.textPropSizeDefault : _c, spacing = props.spacing, fontStyle = props.fontStyle, transform = props.transform, type = props.type, _d = props.view, view = _d === void 0 ? exports.textPropViewDefault : _d, weight = props.weight, width = props.width, className = props.className, children = props.children, _e = props.truncate, truncate = _e === void 0 ? false : _e, otherProps = tslib_1.__rest(props, ["as", "align", "cursor", "decoration", "display", "font", "lineHeight", "size", "spacing", "fontStyle", "transform", "type", "view", "weight", "width", "className", "children", "truncate"]);
     var Tag = as;
     return (react_1["default"].createElement(Tag, tslib_1.__assign({}, otherProps, { className: exports.cnText({
             align: align,
@@ -64,6 +64,7 @@ exports.Text = PropsWithAsAttributes_1.forwardRefWithAs(function (props, ref) {
             type: type,
             view: view,
             weight: weight,
-            width: width
+            width: width,
+            truncate: truncate
         }, [className]), ref: ref }), children));
 });