@snack-uikit/table 0.6.5-preview-85c5f47b.0

package/dist/constants.d.ts

@@ -0,0 +1,28 @@
+export declare enum ColumnPinPosition {
+    Left = "left",
+    Right = "right"
+}
+export declare enum ColumnAlign {
+    Left = "left",
+    Right = "right"
+}
+export declare const TEST_IDS: {
+    headerSortIndicator: string;
+    headerRow: string;
+    headerCell: string;
+    bodyRow: string;
+    bodyCell: string;
+    pinnedCells: string;
+    rowSelect: string;
+    rowActions: {
+        droplistTrigger: string;
+        droplist: string;
+        option: string;
+    };
+    statusIndicator: string;
+    statusLabel: string;
+};
+export declare enum SortFn {
+    DateTime = "datetime",
+    AlphaNumeric = "alphanumeric"
+}

package/dist/constants.js

@@ -0,0 +1,31 @@
+export var ColumnPinPosition;
+(function (ColumnPinPosition) {
+    ColumnPinPosition["Left"] = "left";
+    ColumnPinPosition["Right"] = "right";
+})(ColumnPinPosition || (ColumnPinPosition = {}));
+export var ColumnAlign;
+(function (ColumnAlign) {
+    ColumnAlign["Left"] = "left";
+    ColumnAlign["Right"] = "right";
+})(ColumnAlign || (ColumnAlign = {}));
+export const TEST_IDS = {
+    headerSortIndicator: 'table__header__sort-indicator',
+    headerRow: 'table__header-row',
+    headerCell: 'table__header-cell',
+    bodyRow: 'table__body-row',
+    bodyCell: 'table__body-cell',
+    pinnedCells: 'table__pinned-cells',
+    rowSelect: 'table__row-select',
+    rowActions: {
+        droplistTrigger: 'table__body-row__droplistTrigger',
+        droplist: 'table__body-row__actions-droplist',
+        option: 'table__body-row__action-option',
+    },
+    statusIndicator: 'table__status-indicator',
+    statusLabel: 'table__status-label',
+};
+export var SortFn;
+(function (SortFn) {
+    SortFn["DateTime"] = "datetime";
+    SortFn["AlphaNumeric"] = "alphanumeric";
+})(SortFn || (SortFn = {}));

package/dist/exportTable.d.ts

@@ -0,0 +1,9 @@
+import { ColumnDefinition } from './types';
+type ExportTableData<TData> = {
+    data: TData[];
+    columnDefinitions: ColumnDefinition<TData>[];
+    fileName?: string;
+};
+export declare function exportToCSV<TData extends object>({ columnDefinitions, fileName, data, }: ExportTableData<TData>): string;
+export declare function exportToXLSX<TData extends object>({ columnDefinitions, fileName, data, }: ExportTableData<TData>): import("xlsx").WorkSheet;
+export {};

package/dist/exportTable.js

@@ -0,0 +1,51 @@
+import { utils as xlsxUtils, writeFileXLSX } from 'xlsx';
+function getColumnAccessorKey(column) {
+    if ('accessorKey' in column && column.accessorKey) {
+        return String(column.accessorKey);
+    }
+}
+function getFilteredColumnsIds(columnDefinitions) {
+    return columnDefinitions
+        .filter(column => { var _a; return getColumnAccessorKey(column) && !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.skipOnExport); })
+        .map(column => getColumnAccessorKey(column));
+}
+function getXlsxFormatTable({ data, columnDefinitions, }) {
+    const filteredIds = getFilteredColumnsIds(columnDefinitions);
+    return data.map((line) => {
+        const lineRecord = line;
+        const result = [];
+        filteredIds.forEach(key => {
+            if (!key) {
+                result.push('');
+                return;
+            }
+            result.push(lineRecord[key]);
+        });
+        return result;
+    });
+}
+export function exportToCSV({ columnDefinitions, fileName = 'Table', data, }) {
+    const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
+    const filteredIds = getFilteredColumnsIds(columnDefinitions);
+    const table = [filteredIds, ...xlsxData];
+    const csv = table.map(line => line.map(el => `"${el}"`).join(',')).join('\n');
+    const blob = new Blob([csv], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const tempLink = Object.assign(document.createElement('a'), {
+        target: '_blank',
+        href: url,
+        download: fileName,
+    });
+    tempLink.click();
+    tempLink.remove();
+    return csv;
+}
+export function exportToXLSX({ columnDefinitions, fileName = 'Table', data, }) {
+    const xlsxData = getXlsxFormatTable({ data, columnDefinitions });
+    const filteredIds = getFilteredColumnsIds(columnDefinitions);
+    const workbook = xlsxUtils.book_new();
+    const worksheet = xlsxUtils.aoa_to_sheet([filteredIds, ...xlsxData]);
+    xlsxUtils.book_append_sheet(workbook, worksheet);
+    writeFileXLSX(workbook, `${fileName}.xlsx`);
+    return worksheet;
+}

package/dist/helperComponents/Cells/BodyCell/BodyCell.d.ts

@@ -0,0 +1,7 @@
+import { Cell as TableCell } from '@tanstack/react-table';
+import { CellProps } from '../Cell';
+type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
+    cell: TableCell<TData, unknown>;
+};
+export declare function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/Cells/BodyCell/BodyCell.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import cn from 'classnames';
+import { TEST_IDS } from '../../../constants';
+import { useCellSizes } from '../../hooks';
+import { Cell } from '../Cell';
+import styles from './styles.module.css';
+export function BodyCell(_a) {
+    var { cell, className } = _a, props = __rest(_a, ["cell", "className"]);
+    const columnDef = cell.column.columnDef;
+    const style = useCellSizes(cell);
+    return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell }, { children: flexRender(columnDef.cell, cell.getContext()) })));
+}

package/dist/helperComponents/Cells/BodyCell/index.d.ts

@@ -0,0 +1 @@
+export * from './BodyCell';

package/dist/helperComponents/Cells/BodyCell/index.js

@@ -0,0 +1 @@
+export * from './BodyCell';

package/dist/helperComponents/Cells/BodyCell/styles.module.css

@@ -0,0 +1,12 @@
+.tableBodyCell{
+  gap:var(--space-table-cell-gap, 4px);
+  padding-left:var(--space-table-cell-padding, 8px);
+  padding-right:var(--space-table-cell-padding, 8px);
+  color:var(--sys-neutral-text-main, #333333);
+}
+.tableBodyCell[data-align=right]{
+  justify-content:flex-end;
+}
+.tableBodyCell[data-no-padding]{
+  padding:0;
+}

package/dist/helperComponents/Cells/Cell.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { DataAttributes } from '../types';
+export type CellProps = {
+    children: ReactNode;
+    onClick?: MouseEventHandler;
+    className?: string;
+    style?: CSSProperties;
+} & DataAttributes;
+export declare function Cell({ onClick, className, style, children, ...attributes }: CellProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Cells/Cell.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import styles from './styles.module.css';
+export function Cell(_a) {
+    var { onClick, className, style, children } = _a, attributes = __rest(_a, ["onClick", "className", "style", "children"]);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsx("div", Object.assign({ role: 'cell', onClick: onClick, className: cn(styles.tableCell, className), style: style }, attributes, { children: children })));
+}

package/dist/helperComponents/Cells/HeaderCell/HeaderCell.d.ts

@@ -0,0 +1,7 @@
+import { Header } from '@tanstack/react-table';
+import { CellProps } from '../Cell';
+type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
+    header: Header<TData, unknown>;
+};
+export declare function HeaderCell<TData>({ header, className }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import cn from 'classnames';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { TEST_IDS } from '../../../constants';
+import { useCellSizes } from '../../hooks';
+import { Cell } from '../Cell';
+import { getSortingIcon } from './helpers';
+import styles from './styles.module.css';
+export function HeaderCell({ header, className }) {
+    const isSortable = header.column.getCanSort();
+    const sortDirection = isSortable && (header.column.getIsSorted() || undefined);
+    const sortIcon = getSortingIcon(sortDirection);
+    const columnDef = header.column.columnDef;
+    const style = useCellSizes(header);
+    return (_jsxs(Cell, Object.assign({ style: style, onClick: header.column.getToggleSortingHandler(), "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, className: cn(styles.tableHeaderCell, className, columnDef.headerClassName) }, { children: [columnDef.header && (_jsx("div", Object.assign({ className: styles.tableHeaderCellName }, { children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) }))), Boolean(sortIcon) && (_jsx("div", Object.assign({ className: styles.tableHeaderSortIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator }, { children: sortIcon })))] })));
+}

package/dist/helperComponents/Cells/HeaderCell/helpers.d.ts

@@ -0,0 +1,2 @@
+import { SortDirection } from '@tanstack/react-table';
+export declare function getSortingIcon(sort?: SortDirection | false): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/Cells/HeaderCell/helpers.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArrowDownSVG, ArrowUpSVG } from '@snack-uikit/icons';
+export function getSortingIcon(sort) {
+    switch (sort) {
+        case 'asc':
+            return _jsx(ArrowUpSVG, { size: 16 });
+        case 'desc':
+            return _jsx(ArrowDownSVG, { size: 16 });
+        default:
+            return null;
+    }
+}

package/dist/helperComponents/Cells/HeaderCell/index.d.ts

@@ -0,0 +1 @@
+export * from './HeaderCell';

package/dist/helperComponents/Cells/HeaderCell/index.js

@@ -0,0 +1 @@
+export * from './HeaderCell';

package/dist/helperComponents/Cells/HeaderCell/styles.module.css

@@ -0,0 +1,53 @@
+.tableHeaderCell{
+  padding:var(--space-table-cell-padding, 8px);
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  background-color:inherit;
+}
+.tableHeaderCell::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  bottom:0;
+  left:50%;
+  transform:translateX(-50%);
+  width:calc(100% - var(--space-table-head-separator-padding, 8px) * 2);
+  height:1px;
+  background-color:var(--sys-neutral-decor-default, #dedede);
+}
+.tableHeaderCell[data-sortable]{
+  cursor:pointer;
+}
+.tableHeaderCell[data-no-offset]::after{
+  left:0;
+  transform:none;
+  width:calc(100% - var(--space-table-head-separator-padding, 8px));
+}
+.tableHeaderCell[data-no-padding]{
+  padding:0;
+}
+.tableHeaderCell[data-no-padding]::after{
+  width:100%;
+}
+
+.tableHeaderCellName{
+  height:var(--size-table-head-name-layout, 24px);
+  display:inline-flex;
+  align-items:center;
+  box-sizing:border-box;
+  min-width:0;
+  color:var(--sys-neutral-text-light, #898989);
+}
+
+.tableHeaderSortIcon{
+  display:flex;
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-light, #898989);
+}
+.tableHeaderSortIcon svg{
+  width:var(--dimension-2m, 16px) !important;
+  height:var(--dimension-2m, 16px) !important;
+}

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.d.ts

@@ -0,0 +1,22 @@
+import { CellContext } from '@tanstack/react-table';
+import { MouseEvent } from 'react';
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { ColumnDefinition } from '../../../types';
+export type RowActionInfo<TData> = {
+    rowId: string;
+    data: TData;
+    itemId?: string;
+};
+export type RowActionProps<TData> = Pick<ItemSingleProps, 'option' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'> & {
+    id?: string;
+    onClick(row: RowActionInfo<TData>, e: MouseEvent<HTMLButtonElement>): void;
+};
+export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => RowActionProps<TData>[];
+export type RowActionsColumnDefProps<TData> = {
+    /** Действия для строки */
+    actionsGenerator: ActionsGenerator<TData>;
+    /** Закрепление колонки справа в таблице */
+    pinned?: boolean;
+};
+/** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
+export declare function getRowActionsColumnDef<TData>({ actionsGenerator, pinned, }: RowActionsColumnDefProps<TData>): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/RowActionsCell/RowActionsCell.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist } from '@snack-uikit/droplist';
+import { MoreSVG } from '@snack-uikit/icons';
+import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { useRowContext } from '../../contexts';
+import styles from './styles.module.css';
+function RowActionsCell({ row, actions }) {
+    const { droplistOpened, setDroplistOpen } = useRowContext();
+    const { triggerElementRef, handleDroplistFocusLeave, handleDroplistItemKeyDown, handleTriggerKeyDown, handleDroplistItemClick, firstElementRefCallback, } = Droplist.useKeyboardNavigation({ setDroplistOpen });
+    const handleItemClick = (item) => (e) => {
+        item.onClick({ rowId: row.id, itemId: item.id, data: row.original }, e);
+    };
+    const disabled = !row.getCanSelect();
+    const stopPropagationClick = (e) => {
+        e.stopPropagation();
+    };
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", Object.assign({ onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined }, { children: !disabled && Boolean(actions.length) && (_jsx(Droplist, Object.assign({ open: droplistOpened, onOpenChange: setDroplistOpen, placement: Droplist.placements.BottomEnd, firstElementRefCallback: firstElementRefCallback, onFocusLeave: handleDroplistFocusLeave, triggerElement: _jsx("span", { children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger, onKeyDown: handleTriggerKeyDown, ref: triggerElementRef }) }), triggerClassName: styles.rowActionsCellTrigger, size: Droplist.sizes.S, "data-test-id": TEST_IDS.rowActions.droplist }, { children: actions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: `${row.id}-${item.id || item.option}`, onClick: e => handleDroplistItemClick(e, handleItemClick(item)), "data-test-id": TEST_IDS.rowActions.option, onKeyDown: handleDroplistItemKeyDown })))) }))) })));
+}
+/** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
+export function getRowActionsColumnDef({ actionsGenerator, pinned, }) {
+    return {
+        id: 'rowActions',
+        pinned: pinned ? ColumnPinPosition.Right : undefined,
+        size: 40,
+        meta: {
+            skipOnExport: true,
+        },
+        noBodyCellPadding: true,
+        cellClassName: styles.rowActionsCell,
+        cell: cell => _jsx(RowActionsCell, { row: cell.row, actions: actionsGenerator(cell) }),
+    };
+}

package/dist/helperComponents/Cells/RowActionsCell/index.d.ts

@@ -0,0 +1 @@
+export * from './RowActionsCell';

package/dist/helperComponents/Cells/RowActionsCell/index.js

@@ -0,0 +1 @@
+export * from './RowActionsCell';

package/dist/helperComponents/Cells/RowActionsCell/styles.module.css

@@ -0,0 +1,34 @@
+.rowActionsCell{
+  position:relative;
+  border-color:inherit;
+}
+.rowActionsCell::after{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:calc(0px - var(--border-width-table, 1px));
+  bottom:calc(0px - var(--border-width-table, 1px));
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  border-left:var(--border-width-table, 1px) solid;
+  border-color:inherit;
+}
+
+.rowActionsCellWrap{
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+}
+
+.rowActionsCellTrigger{
+  padding-left:var(--space-table-cell-action-padding, 4px);
+  padding-right:var(--space-table-cell-action-padding, 4px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+}

package/dist/helperComponents/Cells/SelectionCell/SelectionCell.d.ts

@@ -0,0 +1,2 @@
+import { ColumnDefinition } from '../../../types';
+export declare function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/SelectionCell/SelectionCell.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, Radio } from '@snack-uikit/toggles';
+import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import styles from './styles.module.css';
+function SelectionCell(_a) {
+    var { isMulti, onChange } = _a, props = __rest(_a, ["isMulti", "onChange"]);
+    const handleCellClick = (e) => {
+        e.stopPropagation();
+        onChange(props.checked);
+    };
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", Object.assign({ onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect }, { children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: Checkbox.sizes.S })) : _jsx(Radio, Object.assign({}, props, { size: Radio.sizes.S })) })));
+}
+export function getSelectionCellColumnDef() {
+    return {
+        id: 'selectionCell',
+        pinned: ColumnPinPosition.Left,
+        noBodyCellPadding: true,
+        size: 40,
+        headerClassName: styles.selectionCellHeader,
+        cell: ({ row, table }) => {
+            const disabled = !row.getCanSelect();
+            if (disabled)
+                return null;
+            const { enableMultiRowSelection } = table.options;
+            const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
+            return (_jsx(SelectionCell, { isMulti: isMulti, checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() }));
+        },
+        meta: {
+            skipOnExport: true,
+        },
+    };
+}

package/dist/helperComponents/Cells/SelectionCell/index.d.ts

@@ -0,0 +1 @@
+export * from './SelectionCell';

package/dist/helperComponents/Cells/SelectionCell/index.js

@@ -0,0 +1 @@
+export * from './SelectionCell';

package/dist/helperComponents/Cells/SelectionCell/styles.module.css

@@ -0,0 +1,13 @@
+.selectionCell{
+  width:var(--size-table-line-height, 40px);
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  height:100%;
+}
+
+.selectionCellHeader{
+  padding:0;
+}

package/dist/helperComponents/Cells/StatusCell/StatusCell.d.ts

@@ -0,0 +1,27 @@
+import { ColumnDefinition } from '../../../types';
+import { StatusAppearance } from './constants';
+export { StatusAppearance };
+type BaseStatusColumnDef = {
+    /** Имя ключа соответствующее полю в data */
+    accessorKey: string;
+    /** Маппинг значений статуса на цвета */
+    mapStatusToAppearance(value: string | number): StatusAppearance;
+    /** Включение/выключение сортировки */
+    enableSorting?: boolean;
+};
+type StatusColumnDef = BaseStatusColumnDef & {
+    renderDescription?: never;
+    size?: never;
+    header?: never;
+};
+type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
+    /** Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса */
+    renderDescription(cellValue: string): string;
+    /** Размер ячейки */
+    size: number;
+    /** Заголовок колонки */
+    header?: ColumnDefinition<TData>['header'];
+};
+export type StatusColumnDefinitionProps<TData> = StatusColumnDef | StatusColumnDefWithDescription<TData>;
+/** Вспомогательная функция для создания ячейки со статусом */
+export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/StatusCell/StatusCell.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { MIN_STATUS_CELL_SIZE, StatusAppearance } from './constants';
+import styles from './styles.module.css';
+export { StatusAppearance };
+function StatusCell({ appearance, label }) {
+    const isLoading = appearance === StatusAppearance.Loading;
+    return (_jsxs("div", Object.assign({ className: styles.statusCell, "data-no-label": !label || undefined }, { children: [_jsx("div", { "data-appearance": isLoading ? undefined : appearance, className: styles.statusCellIndicator, "data-loading": isLoading || undefined, "data-test-id": TEST_IDS.statusIndicator }), label && (_jsx("div", Object.assign({ className: styles.statusCellLabel, "data-test-id": TEST_IDS.statusLabel }, { children: _jsx(Typography.LightLabelS, { children: _jsx(TruncateString, { text: label }) }) })))] })));
+}
+/** Вспомогательная функция для создания ячейки со статусом */
+export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, }) {
+    const hasDescription = Boolean(renderDescription);
+    return {
+        id: 'snack_predefined_statusColumn',
+        pinned: ColumnPinPosition.Left,
+        noBodyCellPadding: true,
+        noHeaderCellPadding: !hasDescription,
+        noHeaderCellBorderOffset: hasDescription,
+        size: hasDescription ? size : MIN_STATUS_CELL_SIZE,
+        minSize: MIN_STATUS_CELL_SIZE,
+        meta: {
+            skipOnExport: true,
+        },
+        accessorKey,
+        enableSorting,
+        header: hasDescription ? header : undefined,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        accessorFn: (row) => renderDescription && Object.hasOwn(row, accessorKey)
+            ? renderDescription(row[accessorKey])
+            : undefined,
+        cell: cell => {
+            const value = typeof cell.row.original === 'object' && Object.hasOwn(cell.row.original, accessorKey)
+                ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    cell.row.original[accessorKey]
+                : cell.getValue();
+            const appearance = mapStatusToAppearance(value);
+            return _jsx(StatusCell, { appearance: appearance, label: renderDescription ? renderDescription(value) : undefined });
+        },
+    };
+}

package/dist/helperComponents/Cells/StatusCell/constants.d.ts

@@ -0,0 +1,13 @@
+export declare enum StatusAppearance {
+    Primary = "primary",
+    Neutral = "neutral",
+    Red = "red",
+    Orange = "orange",
+    Yellow = "yellow",
+    Green = "green",
+    Blue = "blue",
+    Violet = "violet",
+    Pink = "pink",
+    Loading = "loading"
+}
+export declare const MIN_STATUS_CELL_SIZE = 16;

package/dist/helperComponents/Cells/StatusCell/constants.js

@@ -0,0 +1,14 @@
+export var StatusAppearance;
+(function (StatusAppearance) {
+    StatusAppearance["Primary"] = "primary";
+    StatusAppearance["Neutral"] = "neutral";
+    StatusAppearance["Red"] = "red";
+    StatusAppearance["Orange"] = "orange";
+    StatusAppearance["Yellow"] = "yellow";
+    StatusAppearance["Green"] = "green";
+    StatusAppearance["Blue"] = "blue";
+    StatusAppearance["Violet"] = "violet";
+    StatusAppearance["Pink"] = "pink";
+    StatusAppearance["Loading"] = "loading";
+})(StatusAppearance || (StatusAppearance = {}));
+export const MIN_STATUS_CELL_SIZE = 16;

package/dist/helperComponents/Cells/StatusCell/index.d.ts

@@ -0,0 +1 @@
+export * from './StatusCell';

package/dist/helperComponents/Cells/StatusCell/index.js

@@ -0,0 +1 @@
+export * from './StatusCell';