@snack-uikit/table 0.7.2 → 0.8.1

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/pagination@0.5.3](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/pagination/CHANGELOG.md)
+* [@snack-uikit/toggles@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toggles/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.5.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toolbar/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+# 0.8.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.7.2 (2023-12-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -51,7 +51,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
     // id, size - обязательны при передаче pinned
     id: 'firstName',
     size: 140,
-    pinned: Table.columnPinPositions.Left,
+    pinned: 'left',
     accessorKey: 'firstName',
     header: 'Имя',
     enableSorting: true,
@@ -111,9 +111,9 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | data* | `TData[]` | - | Данные для отрисовки |
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
-| search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | - | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска @default 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска |
-| pageSize | `number` | 10 | Максимальное кол-во строк на страницу @default 10 |
-| pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; }` | - | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации |
+| search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
+| pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
+| pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
@@ -124,8 +124,8 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | columnFilters | `ReactNode` | - | Фильтры |
 | exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
 | moreActions | `Pick<DroplistItemSingleProps, "option" \| "caption" \| "description" \| "tagLabel" \| "disabled" \| "icon" \| "onClick">[]` | - | Элементы выпадающего списка кнопки с действиями |
-| noDataState | `TableEmptyStateProps` | {   icon: CrossSVG,   appearance: IconPredefined.appearances.Red,   title: 'Data collection error',   description: 'Try refreshing the page', } as const | Экран при отстутствии данных |
-| noResultsState | `TableEmptyStateProps` | {   icon: SearchSVG,   appearance: IconPredefined.appearances.Neutral,   title: 'Not found',   description: 'Try entering another query', } as const | Экран при отстутствии результатов поиска |
+| noDataState | `TableEmptyStateProps` | {   icon: CrossSVG,   appearance: 'red',   title: 'Data collection error',   description: 'Try refreshing the page', } as const | Экран при отстутствии данных |
+| noResultsState | `TableEmptyStateProps` | {   icon: SearchSVG,   appearance: 'neutral',   title: 'Not found',   description: 'Try entering another query', } as const | Экран при отстутствии результатов поиска |
 | suppressToolbar | `boolean` | - | Отключение тулбара |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 ## Table.getStatusColumnDef

package/dist/components/Table/Table.d.ts

@@ -2,8 +2,7 @@ import { PaginationState, RowSelectionOptions, RowSelectionState, SortingState }
 import { ReactNode } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { ColumnAlign, ColumnPinPosition } from '../../constants';
-import { RowClickHandler, StatusAppearance } from '../../helperComponents';
+import { RowClickHandler } from '../../helperComponents';
 import { ColumnDefinition } from '../../types';
 import { TableEmptyStateProps } from '../TableEmptyState';
 export type TableProps<TData extends object> = WithSupportProps<{
@@ -95,10 +94,18 @@ export type TableProps<TData extends object> = WithSupportProps<{
 /** Компонент таблицы */
 export declare function Table<TData extends object>({ data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportFileName, noDataState, noResultsState, suppressToolbar, suppressPagination, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
-    var columnPinPositions: typeof ColumnPinPosition;
-    var columnAligns: typeof ColumnAlign;
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
-    var statusAppearances: typeof StatusAppearance;
+    var statusAppearances: {
+        readonly Primary: "primary";
+        readonly Neutral: "neutral";
+        readonly Red: "red";
+        readonly Orange: "orange";
+        readonly Yellow: "yellow";
+        readonly Green: "green";
+        readonly Blue: "blue";
+        readonly Violet: "violet";
+        readonly Pink: "pink";
+        readonly Loading: "loading";
+    };
     var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
-    var emptyStateAppearances: typeof import("@snack-uikit/icon-predefined/dist/constants").Appearance;
 }

package/dist/components/Table/Table.js

@@ -12,14 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import { useCallback, useMemo } from 'react';
-import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { ColumnAlign, ColumnPinPosition } from '../../constants';
-import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, StatusAppearance, TableContext, } from '../../helperComponents';
+import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, } from '../../helperComponents';
 import { fuzzyFilter } from '../../utils';
 import { TableEmptyState } from '../TableEmptyState';
 import { TablePagination } from '../TablePagination';
@@ -115,11 +113,8 @@ export function Table(_a) {
     const tableRows = table.getRowModel().rows;
     const loadingTableRows = loadingTable.getRowModel().rows;
     const tablePagination = table.getState().pagination;
-    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: className }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", Object.assign({ className: styles.header }, { children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? Toolbar.selectionModes.Multiple : Toolbar.selectionModes.Single, actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", Object.assign({ className: styles.filtersWrapper }, { children: [" ", columnFiltersProp, " "] }))] }))), _jsx("div", Object.assign({ className: styles.scrollWrapper, "data-outline": outline || undefined }, { children: _jsx(Scroll, Object.assign({ size: Scroll.sizes.S, className: styles.table }, { children: _jsx("div", Object.assign({ className: styles.tableContent }, { children: _jsx(TableContext.Provider, Object.assign({ value: { table } }, { children: loading ? (_jsxs(SkeletonContextProvider, Object.assign({ loading: true }, { children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] }))) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) })) })) })) })), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize }, className: className }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { value: globalFilter, onChange: onGlobalFilterChange, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, loading: search === null || search === void 0 ? void 0 : search.loading, placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search', selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', actions: exportFileName ? (_jsx(ExportButton, { fileName: exportFileName, columnDefinitions: columnDefinitions, data: data })) : undefined, moreActions: moreActions }), columnFiltersProp && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFiltersProp, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsx(Scroll, { size: 's', className: styles.table, children: _jsx("div", { className: styles.tableContent, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [tableRows.length ? _jsx(HeaderRow, {}) : null, tableRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), !tableRows.length && globalFilter && _jsx(TableEmptyState, Object.assign({}, noResultsState)), !tableRows.length && !globalFilter && _jsx(TableEmptyState, Object.assign({}, noDataState))] })) }) }) }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount }))] })) }));
 }
-Table.columnPinPositions = ColumnPinPosition;
-Table.columnAligns = ColumnAlign;
 Table.getStatusColumnDef = getStatusColumnDef;
-Table.statusAppearances = StatusAppearance;
+Table.statusAppearances = STATUS_APPEARANCE;
 Table.getRowActionsColumnDef = getRowActionsColumnDef;
-Table.emptyStateAppearances = IconPredefined.appearances;

package/dist/components/Table/constants.js

@@ -1,14 +1,13 @@
-import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { CrossSVG, SearchSVG } from '@snack-uikit/icons';
 export const DEFAULT_NO_DATA_TABLE_STATE = {
     icon: CrossSVG,
-    appearance: IconPredefined.appearances.Red,
+    appearance: 'red',
     title: 'Data collection error',
     description: 'Try refreshing the page',
 };
 export const DEFAULT_NO_RESULTS_TABLE_STATE = {
     icon: SearchSVG,
-    appearance: IconPredefined.appearances.Neutral,
+    appearance: 'neutral',
     title: 'Not found',
     description: 'Try entering another query',
 };

package/dist/components/TableEmptyState/TableEmptyState.js

@@ -4,5 +4,5 @@ import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
 export function TableEmptyState({ title, description, className, icon, appearance }) {
-    return (_jsxs("div", Object.assign({ className: cn(styles.tableEmptyStateWrapper, className) }, { children: [_jsx(IconPredefined, { icon: icon, size: IconPredefined.sizes.L, appearance: appearance }), _jsxs("div", Object.assign({ className: styles.textWrapper }, { children: [_jsx(Typography.SansTitleM, { children: title }), description && _jsx(Typography.SansBodyM, { children: description })] }))] })));
+    return (_jsxs("div", { className: cn(styles.tableEmptyStateWrapper, className), children: [_jsx(IconPredefined, { icon: icon, size: 'l', appearance: appearance }), _jsxs("div", { className: styles.textWrapper, children: [_jsx(Typography.SansTitleM, { children: title }), description && _jsx(Typography.SansBodyM, { children: description })] })] }));
 }

package/dist/components/TablePagination/TablePagination.js

@@ -15,5 +15,5 @@ export function TablePagination({ table, options: optionsProp, optionsLabel = 'R
     if (table.getPageCount() <= 1 && !options) {
         return null;
     }
-    return (_jsxs("div", Object.assign({ className: styles.footer }, { children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: ChipChoice.placements.TopEnd, options: options, label: optionsLabel, widthStrategy: ChipChoice.widthStrategies.Auto, showClearButton: false }))] })));
+    return (_jsxs("div", { className: styles.footer, children: [table.getPageCount() > 1 && (_jsx(Pagination, { total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, className: styles.pagination })), options && table.getRowModel().rows.length >= Number(options[0].value) && (_jsx(ChipChoice.Single, { value: String(tablePaginationState.pageSize), onChange: handleRowsVolumeOnChange, placement: 'top-end', options: options, label: optionsLabel, widthStrategy: 'auto', showClearButton: false }))] }));
 }

package/dist/constants.d.ts

@@ -1,11 +1,11 @@
-export declare enum ColumnPinPosition {
-    Left = "left",
-    Right = "right"
-}
-export declare enum ColumnAlign {
-    Left = "left",
-    Right = "right"
-}
+export declare const COLUMN_PIN_POSITION: {
+    readonly Left: "left";
+    readonly Right: "right";
+};
+export declare const COLUMN_ALIGN: {
+    readonly Left: "left";
+    readonly Right: "right";
+};
 export declare const TEST_IDS: {
     headerSortIndicator: string;
     headerRow: string;
@@ -22,7 +22,7 @@ export declare const TEST_IDS: {
     statusIndicator: string;
     statusLabel: string;
 };
-export declare enum SortFn {
-    DateTime = "datetime",
-    AlphaNumeric = "alphanumeric"
-}
+export declare const SORT_FN: {
+    readonly DateTime: "datetime";
+    readonly AlphaNumeric: "alphanumeric";
+};

package/dist/constants.js

@@ -1,13 +1,11 @@
-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 COLUMN_PIN_POSITION = {
+    Left: 'left',
+    Right: 'right',
+};
+export const COLUMN_ALIGN = {
+    Left: 'left',
+    Right: 'right',
+};
 export const TEST_IDS = {
     headerSortIndicator: 'table__header__sort-indicator',
     headerRow: 'table__header-row',
@@ -24,8 +22,7 @@ export const TEST_IDS = {
     statusIndicator: 'table__status-indicator',
     statusLabel: 'table__status-label',
 };
-export var SortFn;
-(function (SortFn) {
-    SortFn["DateTime"] = "datetime";
-    SortFn["AlphaNumeric"] = "alphanumeric";
-})(SortFn || (SortFn = {}));
+export const SORT_FN = {
+    DateTime: 'datetime',
+    AlphaNumeric: 'alphanumeric',
+};

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

@@ -20,5 +20,5 @@ 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()) })));
+    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/HeaderCell/HeaderCell.js

@@ -13,5 +13,5 @@ export function HeaderCell({ header, className }) {
     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 })))] })));
+    return (_jsxs(Cell, { 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", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderSortIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }));
 }

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

@@ -3,7 +3,7 @@ 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 { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.css';
 function RowActionsCell({ row, actions }) {
@@ -18,13 +18,13 @@ function RowActionsCell({ row, actions }) {
     };
     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 })))) }))) })));
+    _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": droplistOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(Droplist, { open: droplistOpened, onOpenChange: setDroplistOpen, placement: 'bottom-end', 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: '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,
+        pinned: pinned ? COLUMN_PIN_POSITION.Right : undefined,
         size: 40,
         meta: {
             skipOnExport: true,

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox, Radio } from '@snack-uikit/toggles';
-import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import styles from './styles.module.css';
 function SelectionCell(_a) {
     var { isMulti, onChange } = _a, props = __rest(_a, ["isMulti", "onChange"]);
@@ -21,12 +21,12 @@ function SelectionCell(_a) {
     };
     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 })) })));
+    _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: 's' })) : _jsx(Radio, Object.assign({}, props, { size: 's' })) }));
 }
 export function getSelectionCellColumnDef() {
     return {
         id: 'selectionCell',
-        pinned: ColumnPinPosition.Left,
+        pinned: COLUMN_PIN_POSITION.Left,
         noBodyCellPadding: true,
         size: 40,
         headerClassName: styles.selectionCellHeader,

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

@@ -1,6 +1,8 @@
 import { ColumnDefinition } from '../../../types';
-import { StatusAppearance } from './constants';
-export { StatusAppearance };
+import { STATUS_APPEARANCE } from './constants';
+import { StatusAppearance } from './types';
+export type { StatusAppearance };
+export { STATUS_APPEARANCE };
 type BaseStatusColumnDef = {
     /** Имя ключа соответствующее полю в data */
     accessorKey: string;

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

@@ -1,20 +1,20 @@
 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 { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
+import { MIN_STATUS_CELL_SIZE, STATUS_APPEARANCE } from './constants';
 import styles from './styles.module.css';
-export { StatusAppearance };
+export { STATUS_APPEARANCE };
 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 }) }) })))] })));
+    const isLoading = appearance === STATUS_APPEARANCE.Loading;
+    return (_jsxs("div", { 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", { 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,
+        pinned: COLUMN_PIN_POSITION.Left,
         noBodyCellPadding: true,
         noHeaderCellPadding: !hasDescription,
         noHeaderCellBorderOffset: hasDescription,

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

@@ -1,13 +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 STATUS_APPEARANCE: {
+    readonly Primary: "primary";
+    readonly Neutral: "neutral";
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly Loading: "loading";
+};
 export declare const MIN_STATUS_CELL_SIZE = 16;

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

@@ -1,14 +1,13 @@
-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 STATUS_APPEARANCE = {
+    Primary: 'primary',
+    Neutral: 'neutral',
+    Red: 'red',
+    Orange: 'orange',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+    Violet: 'violet',
+    Pink: 'pink',
+    Loading: 'loading',
+};
 export const MIN_STATUS_CELL_SIZE = 16;

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

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { STATUS_APPEARANCE } from './constants';
+export type StatusAppearance = ValueOf<typeof STATUS_APPEARANCE>;

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

@@ -0,0 +1 @@
+export {};

package/dist/helperComponents/ExportButton/ExportButton.js

@@ -7,7 +7,7 @@ import { exportToCSV, exportToXLSX } from '../../exportTable';
 export function ExportButton({ fileName, data, columnDefinitions }) {
     const [isOpen, setIsOpen] = useState(false);
     const { firstElementRefCallback, handleDroplistFocusLeave, handleTriggerKeyDown, handleDroplistItemKeyDown, handleDroplistItemClick, triggerElementRef, } = Droplist.useKeyboardNavigation({ setDroplistOpen: setIsOpen });
-    return (_jsx(Droplist, Object.assign({ firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, onFocusLeave: handleDroplistFocusLeave, open: isOpen, onOpenChange: setIsOpen, useScroll: true, placement: Droplist.placements.BottomEnd, triggerElement: _jsx(ButtonFunction, { size: ButtonFunction.sizes.M, onKeyDown: handleTriggerKeyDown, icon: _jsx(DownloadSVG, {}) }) }, { children: [
+    return (_jsx(Droplist, { firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, onFocusLeave: handleDroplistFocusLeave, open: isOpen, onOpenChange: setIsOpen, useScroll: true, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'm', onKeyDown: handleTriggerKeyDown, icon: _jsx(DownloadSVG, {}) }), children: [
             {
                 option: 'Export to CSV',
                 onClick: () => {
@@ -23,5 +23,5 @@ export function ExportButton({ fileName, data, columnDefinitions }) {
         ].map(({ option, onClick }) => (_jsx(Droplist.ItemSingle, { option: option, onKeyDown: handleDroplistItemKeyDown, onClick: e => {
                 handleDroplistItemClick(e);
                 onClick === null || onClick === void 0 ? void 0 : onClick();
-            } }, option))) })));
+            } }, option))) }));
 }

package/dist/helperComponents/Rows/BodyRow.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ColumnPinPosition, TEST_IDS } from '../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
 import { RowContext } from '../contexts';
 import { useRowCells } from '../hooks';
@@ -21,5 +21,5 @@ export function BodyRow({ row, onRowClick }) {
             toggleSelected: row.toggleSelected,
         });
     };
-    return (_jsx(RowContext.Provider, Object.assign({ value: { droplistOpened, setDroplistOpen } }, { children: _jsxs(Row, Object.assign({ onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": droplistOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow }, { children: [pinnedLeft && (_jsx(PinnedCells, Object.assign({ position: ColumnPinPosition.Left }, { children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, Object.assign({ position: ColumnPinPosition.Right }, { children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })))] })) })));
+    return (_jsx(RowContext.Provider, { value: { droplistOpened, setDroplistOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": droplistOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
 }

package/dist/helperComponents/Rows/HeaderRow.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ColumnPinPosition, TEST_IDS } from '../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
@@ -7,5 +7,5 @@ import { Row } from './Row';
 import styles from './styles.module.css';
 export function HeaderRow() {
     const { leftPinned, unpinned, rightPinned } = useHeaderGroups();
-    return (_jsxs(Row, Object.assign({ className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, role: 'rowheader' }, { children: [leftPinned && (_jsx(PinnedCells, Object.assign({ position: ColumnPinPosition.Left }, { children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, Object.assign({ position: ColumnPinPosition.Right }, { children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })))] })));
+    return (_jsxs(Row, { className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, role: 'rowheader', children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) })), unpinned.map(headerGroup => headerGroup.headers.map(header => _jsx(HeaderCell, { header: header }, header.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : _jsx(HeaderCell, { header: header }, header.id))) }))] }));
 }

package/dist/helperComponents/Rows/PinnedCells.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
-import { ColumnPinPosition } from '../../constants';
+import { ValueOf } from '@snack-uikit/utils';
+import { COLUMN_PIN_POSITION } from '../../constants';
 type PinnedCellsProps = {
-    position: ColumnPinPosition;
+    position: ValueOf<typeof COLUMN_PIN_POSITION>;
     children: ReactNode;
 };
 export declare function PinnedCells({ position, children }: PinnedCellsProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Rows/PinnedCells.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function PinnedCells({ position, children }) {
-    return (_jsx("div", Object.assign({ "data-position": position, "data-test-id": TEST_IDS.pinnedCells, className: styles.rowPinnedCells }, { children: children })));
+    return (_jsx("div", { "data-position": position, "data-test-id": TEST_IDS.pinnedCells, className: styles.rowPinnedCells, children: children }));
 }

package/dist/types.d.ts

@@ -1,8 +1,11 @@
 import { CellContext, ColumnDef, ColumnMeta, HeaderContext, PaginationState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ToolbarProps } from '@snack-uikit/toolbar';
+import { ValueOf } from '@snack-uikit/utils';
 import { TableEmptyStateProps } from './components/TableEmptyState';
-import { ColumnAlign, ColumnPinPosition } from './constants';
-import { Except } from './helperComponents/types';
+import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
+import { Except } from './helperComponents';
+type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
+type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 type BaseColumnDefinition<TData> = Except<ColumnDef<TData>, 'footer' | 'enablePinning' | 'enableGrouping' | 'enableResizing' | 'enableColumnFilter' | 'filterFn' | 'enableGlobalFilter' | 'enableMultiSort' | 'enableHiding'> & {
     /** Заголовок колонки */
     header?: string | ((ctx: HeaderContext<TData, unknown>) => string);
@@ -35,4 +38,4 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
 export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, } from './helperComponents';
-export { type PaginationState, type SortingState, type RowSelectionState, type RowSelectionOptions, type TableEmptyStateProps, type ToolbarProps, type HeaderContext, type CellContext, };
+export type { PaginationState, SortingState, RowSelectionState, RowSelectionOptions, TableEmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.7.2",
+  "version": "0.8.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,24 +32,24 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/chips": "0.9.2",
-    "@snack-uikit/droplist": "0.11.2",
-    "@snack-uikit/icon-predefined": "0.3.1",
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/pagination": "0.5.1",
-    "@snack-uikit/scroll": "0.4.1",
-    "@snack-uikit/skeleton": "0.3.1",
-    "@snack-uikit/toggles": "0.8.1",
-    "@snack-uikit/toolbar": "0.4.2",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/chips": "0.10.1",
+    "@snack-uikit/droplist": "0.12.1",
+    "@snack-uikit/icon-predefined": "0.4.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/pagination": "0.5.3",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/skeleton": "0.3.2",
+    "@snack-uikit/toggles": "0.9.1",
+    "@snack-uikit/toolbar": "0.5.1",
+    "@snack-uikit/truncate-string": "0.4.1",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.10.7",
     "classnames": "2.3.2",
     "uncontrollable": "8.0.0",
     "xlsx": "0.18.5"
   },
-  "gitHead": "e124e31699926810648702f97db72413d7ebd2b2"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/Table/Table.tsx

@@ -13,14 +13,12 @@ import {
 } from '@tanstack/react-table';
 import { ReactNode, useCallback, useMemo } from 'react';
 
-import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar, ToolbarProps } from '@snack-uikit/toolbar';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { ColumnAlign, ColumnPinPosition } from '../../constants';
 import {
   BodyRow,
   ExportButton,
@@ -30,7 +28,7 @@ import {
   getStatusColumnDef,
   HeaderRow,
   RowClickHandler,
-  StatusAppearance,
+  STATUS_APPEARANCE,
   TableContext,
 } from '../../helperComponents';
 import { ColumnDefinition } from '../../types';
@@ -322,9 +320,7 @@ export function Table<TData extends object>({
               outline={outline}
               loading={search?.loading}
               placeholder={search?.placeholder || 'Search'}
-              selectionMode={
-                rowSelectionProp?.multiRow ? Toolbar.selectionModes.Multiple : Toolbar.selectionModes.Single
-              }
+              selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
               actions={
                 exportFileName ? (
                   <ExportButton fileName={exportFileName} columnDefinitions={columnDefinitions} data={data} />
@@ -338,7 +334,7 @@ export function Table<TData extends object>({
         )}
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
-          <Scroll size={Scroll.sizes.S} className={styles.table}>
+          <Scroll size='s' className={styles.table}>
             <div className={styles.tableContent}>
               <TableContext.Provider value={{ table }}>
                 {loading ? (
@@ -377,9 +373,6 @@ export function Table<TData extends object>({
   );
 }
 
-Table.columnPinPositions = ColumnPinPosition;
-Table.columnAligns = ColumnAlign;
 Table.getStatusColumnDef = getStatusColumnDef;
-Table.statusAppearances = StatusAppearance;
+Table.statusAppearances = STATUS_APPEARANCE;
 Table.getRowActionsColumnDef = getRowActionsColumnDef;
-Table.emptyStateAppearances = IconPredefined.appearances;

package/src/components/Table/constants.ts

@@ -1,18 +1,17 @@
-import { IconPredefined } from '@snack-uikit/icon-predefined';
 import { CrossSVG, SearchSVG } from '@snack-uikit/icons';
 
 import { TableEmptyStateProps } from '../TableEmptyState';
 
 export const DEFAULT_NO_DATA_TABLE_STATE: TableEmptyStateProps = {
   icon: CrossSVG,
-  appearance: IconPredefined.appearances.Red,
+  appearance: 'red',
   title: 'Data collection error',
   description: 'Try refreshing the page',
 } as const;
 
 export const DEFAULT_NO_RESULTS_TABLE_STATE: TableEmptyStateProps = {
   icon: SearchSVG,
-  appearance: IconPredefined.appearances.Neutral,
+  appearance: 'neutral',
   title: 'Not found',
   description: 'Try entering another query',
 } as const;

package/src/components/TableEmptyState/TableEmptyState.tsx

@@ -15,7 +15,7 @@ export type TableEmptyStateProps = {
 export function TableEmptyState({ title, description, className, icon, appearance }: TableEmptyStateProps) {
   return (
     <div className={cn(styles.tableEmptyStateWrapper, className)}>
-      <IconPredefined icon={icon} size={IconPredefined.sizes.L} appearance={appearance} />
+      <IconPredefined icon={icon} size='l' appearance={appearance} />
       <div className={styles.textWrapper}>
         <Typography.SansTitleM>{title}</Typography.SansTitleM>
         {description && <Typography.SansBodyM>{description}</Typography.SansBodyM>}

package/src/components/TablePagination/TablePagination.tsx

@@ -58,10 +58,10 @@ export function TablePagination<TData>({
         <ChipChoice.Single
           value={String(tablePaginationState.pageSize)}
           onChange={handleRowsVolumeOnChange}
-          placement={ChipChoice.placements.TopEnd}
+          placement='top-end'
           options={options}
           label={optionsLabel}
-          widthStrategy={ChipChoice.widthStrategies.Auto}
+          widthStrategy='auto'
           showClearButton={false}
         />
       )}

package/src/constants.ts

@@ -1,12 +1,12 @@
-export enum ColumnPinPosition {
-  Left = 'left',
-  Right = 'right',
-}
+export const COLUMN_PIN_POSITION = {
+  Left: 'left',
+  Right: 'right',
+} as const;
 
-export enum ColumnAlign {
-  Left = 'left',
-  Right = 'right',
-}
+export const COLUMN_ALIGN = {
+  Left: 'left',
+  Right: 'right',
+} as const;
 
 export const TEST_IDS = {
   headerSortIndicator: 'table__header__sort-indicator',
@@ -25,7 +25,7 @@ export const TEST_IDS = {
   statusLabel: 'table__status-label',
 };
 
-export enum SortFn {
-  DateTime = 'datetime',
-  AlphaNumeric = 'alphanumeric',
-}
+export const SORT_FN = {
+  DateTime: 'datetime',
+  AlphaNumeric: 'alphanumeric',
+} as const;

package/src/helperComponents/Cells/RowActionsCell/RowActionsCell.tsx

@@ -5,7 +5,7 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
 import { MoreSVG } from '@snack-uikit/icons';
 
-import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import { useRowContext } from '../../contexts';
 import styles from './styles.module.scss';
@@ -58,7 +58,7 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
         <Droplist
           open={droplistOpened}
           onOpenChange={setDroplistOpen}
-          placement={Droplist.placements.BottomEnd}
+          placement='bottom-end'
           firstElementRefCallback={firstElementRefCallback}
           onFocusLeave={handleDroplistFocusLeave}
           triggerElement={
@@ -72,7 +72,7 @@ function RowActionsCell<TData>({ row, actions }: RowActionsCellProps<TData>) {
             </span>
           }
           triggerClassName={styles.rowActionsCellTrigger}
-          size={Droplist.sizes.S}
+          size='s'
           data-test-id={TEST_IDS.rowActions.droplist}
         >
           {actions.map(item => (
@@ -106,7 +106,7 @@ export function getRowActionsColumnDef<TData>({
 }: RowActionsColumnDefProps<TData>): ColumnDefinition<TData> {
   return {
     id: 'rowActions',
-    pinned: pinned ? ColumnPinPosition.Right : (undefined as never),
+    pinned: pinned ? COLUMN_PIN_POSITION.Right : (undefined as never),
     size: 40,
     meta: {
       skipOnExport: true,

package/src/helperComponents/Cells/SelectionCell/SelectionCell.tsx

@@ -2,7 +2,7 @@ import { MouseEvent } from 'react';
 
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 
-import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import styles from './styles.module.scss';
 
@@ -22,7 +22,7 @@ function SelectionCell({ isMulti, onChange, ...props }: SelectionCellProps) {
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div onClick={handleCellClick} className={styles.selectionCell} data-test-id={TEST_IDS.rowSelect}>
-      {isMulti ? <Checkbox {...props} size={Checkbox.sizes.S} /> : <Radio {...props} size={Radio.sizes.S} />}
+      {isMulti ? <Checkbox {...props} size='s' /> : <Radio {...props} size='s' />}
     </div>
   );
 }
@@ -30,7 +30,7 @@ function SelectionCell({ isMulti, onChange, ...props }: SelectionCellProps) {
 export function getSelectionCellColumnDef<TData>(): ColumnDefinition<TData> {
   return {
     id: 'selectionCell',
-    pinned: ColumnPinPosition.Left,
+    pinned: COLUMN_PIN_POSITION.Left,
     noBodyCellPadding: true,
     size: 40,
     headerClassName: styles.selectionCellHeader,

package/src/helperComponents/Cells/StatusCell/StatusCell.tsx

@@ -1,12 +1,15 @@
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 
-import { ColumnPinPosition, TEST_IDS } from '../../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
-import { MIN_STATUS_CELL_SIZE, StatusAppearance } from './constants';
+import { MIN_STATUS_CELL_SIZE, STATUS_APPEARANCE } from './constants';
 import styles from './styles.module.scss';
+import { StatusAppearance } from './types';
 
-export { StatusAppearance };
+export type { StatusAppearance };
+
+export { STATUS_APPEARANCE };
 
 type StatusCellProps = {
   label?: string;
@@ -40,7 +43,7 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
 export type StatusColumnDefinitionProps<TData> = StatusColumnDef | StatusColumnDefWithDescription<TData>;
 
 function StatusCell({ appearance, label }: StatusCellProps) {
-  const isLoading = appearance === StatusAppearance.Loading;
+  const isLoading = appearance === STATUS_APPEARANCE.Loading;
 
   return (
     <div className={styles.statusCell} data-no-label={!label || undefined}>
@@ -75,7 +78,7 @@ export function getStatusColumnDef<TData>({
 
   return {
     id: 'snack_predefined_statusColumn',
-    pinned: ColumnPinPosition.Left,
+    pinned: COLUMN_PIN_POSITION.Left,
     noBodyCellPadding: true,
     noHeaderCellPadding: !hasDescription,
     noHeaderCellBorderOffset: hasDescription,

package/src/helperComponents/Cells/StatusCell/constants.ts

@@ -1,14 +1,14 @@
-export enum StatusAppearance {
-  Primary = 'primary',
-  Neutral = 'neutral',
-  Red = 'red',
-  Orange = 'orange',
-  Yellow = 'yellow',
-  Green = 'green',
-  Blue = 'blue',
-  Violet = 'violet',
-  Pink = 'pink',
-  Loading = 'loading',
-}
+export const STATUS_APPEARANCE = {
+  Primary: 'primary',
+  Neutral: 'neutral',
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+  Loading: 'loading',
+} as const;
 
 export const MIN_STATUS_CELL_SIZE = 16;

package/src/helperComponents/Cells/StatusCell/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { STATUS_APPEARANCE } from './constants';
+
+export type StatusAppearance = ValueOf<typeof STATUS_APPEARANCE>;

package/src/helperComponents/ExportButton/ExportButton.tsx

@@ -36,10 +36,8 @@ export function ExportButton<TData extends object>({ fileName, data, columnDefin
       open={isOpen}
       onOpenChange={setIsOpen}
       useScroll
-      placement={Droplist.placements.BottomEnd}
-      triggerElement={
-        <ButtonFunction size={ButtonFunction.sizes.M} onKeyDown={handleTriggerKeyDown} icon={<DownloadSVG />} />
-      }
+      placement='bottom-end'
+      triggerElement={<ButtonFunction size='m' onKeyDown={handleTriggerKeyDown} icon={<DownloadSVG />} />}
     >
       {[
         {

package/src/helperComponents/Rows/BodyRow.tsx

@@ -1,7 +1,7 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent, useState } from 'react';
 
-import { ColumnPinPosition, TEST_IDS } from '../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
 import { RowContext } from '../contexts';
 import { useRowCells } from '../hooks';
@@ -54,7 +54,7 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
         className={styles.bodyRow}
       >
         {pinnedLeft && (
-          <PinnedCells position={ColumnPinPosition.Left}>
+          <PinnedCells position={COLUMN_PIN_POSITION.Left}>
             {pinnedLeft.map(cell => (
               <BodyCell key={cell.id} cell={cell} />
             ))}
@@ -66,7 +66,7 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
         ))}
 
         {pinnedRight && (
-          <PinnedCells position={ColumnPinPosition.Right}>
+          <PinnedCells position={COLUMN_PIN_POSITION.Right}>
             {pinnedRight.map(cell => (
               <BodyCell key={cell.id} cell={cell} />
             ))}

package/src/helperComponents/Rows/HeaderRow.tsx

@@ -1,4 +1,4 @@
-import { ColumnPinPosition, TEST_IDS } from '../../constants';
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { HeaderCell } from '../Cells';
 import { useHeaderGroups } from '../hooks';
 import { PinnedCells } from './PinnedCells';
@@ -11,7 +11,7 @@ export function HeaderRow() {
   return (
     <Row className={styles.tableHeader} data-test-id={TEST_IDS.headerRow} role='rowheader'>
       {leftPinned && (
-        <PinnedCells position={ColumnPinPosition.Left}>
+        <PinnedCells position={COLUMN_PIN_POSITION.Left}>
           {leftPinned.map(headerGroup =>
             headerGroup.headers.map(header =>
               header.isPlaceholder ? null : <HeaderCell key={header.id} header={header} />,
@@ -23,7 +23,7 @@ export function HeaderRow() {
       {unpinned.map(headerGroup => headerGroup.headers.map(header => <HeaderCell key={header.id} header={header} />))}
 
       {rightPinned && (
-        <PinnedCells position={ColumnPinPosition.Right}>
+        <PinnedCells position={COLUMN_PIN_POSITION.Right}>
           {rightPinned.map(headerGroup =>
             headerGroup.headers.map(header =>
               header.isPlaceholder ? null : <HeaderCell key={header.id} header={header} />,

package/src/helperComponents/Rows/PinnedCells.tsx

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
 
-import { ColumnPinPosition, TEST_IDS } from '../../constants';
+import { ValueOf } from '@snack-uikit/utils';
+
+import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import styles from './styles.module.scss';
 
 type PinnedCellsProps = {
-  position: ColumnPinPosition;
+  position: ValueOf<typeof COLUMN_PIN_POSITION>;
   children: ReactNode;
 };
 

package/src/types.ts

@@ -10,10 +10,15 @@ import {
 } from '@tanstack/react-table';
 
 import { ToolbarProps } from '@snack-uikit/toolbar';
+import { ValueOf } from '@snack-uikit/utils';
 
 import { TableEmptyStateProps } from './components/TableEmptyState';
-import { ColumnAlign, ColumnPinPosition } from './constants';
-import { Except } from './helperComponents/types';
+import { COLUMN_ALIGN, COLUMN_PIN_POSITION } from './constants';
+import { Except } from './helperComponents';
+
+type ColumnAlign = ValueOf<typeof COLUMN_ALIGN>;
+
+type ColumnPinPosition = ValueOf<typeof COLUMN_PIN_POSITION>;
 
 type BaseColumnDefinition<TData> = Except<
   ColumnDef<TData>,
@@ -68,13 +73,13 @@ export type {
   RowClickHandler,
 } from './helperComponents';
 
-export {
-  type PaginationState,
-  type SortingState,
-  type RowSelectionState,
-  type RowSelectionOptions,
-  type TableEmptyStateProps,
-  type ToolbarProps,
-  type HeaderContext,
-  type CellContext,
+export type {
+  PaginationState,
+  SortingState,
+  RowSelectionState,
+  RowSelectionOptions,
+  TableEmptyStateProps,
+  ToolbarProps,
+  HeaderContext,
+  CellContext,
 };