@snack-uikit/table 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 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
+* [@snack-uikit/chips@0.9.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/droplist@0.11.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.4.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
 ## 0.7.1 (2023-12-06)
 
 

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,
@@ -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", 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) ? 'multiple' : '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: '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 }))] })) }));
 }
-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", Object.assign({ className: cn(styles.tableEmptyStateWrapper, className) }, { children: [_jsx(IconPredefined, { icon: icon, size: 'l', appearance: appearance }), _jsxs("div", Object.assign({ 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", 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: '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/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", 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: '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", Object.assign({ 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,12 +1,12 @@
 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;
+    const isLoading = appearance === STATUS_APPEARANCE.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 }) }) })))] })));
 }
 /** Вспомогательная функция для создания ячейки со статусом */
@@ -14,7 +14,7 @@ export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance,
     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, Object.assign({ 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: () => {

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, 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: 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, Object.assign({ 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, Object.assign({ className: styles.tableHeader, "data-test-id": TEST_IDS.headerRow, role: 'rowheader' }, { children: [leftPinned && (_jsx(PinnedCells, Object.assign({ 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, Object.assign({ 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/styles.module.css

@@ -57,15 +57,15 @@
 }
 .bodyRow[data-selected] .rowPinnedCells{
   background-color:color-mix(in srgb, var(--sys-primary-accent-default, #794ed3), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
-  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-color:var(--sys-primary-decor-activated, #c5b2f1);
 }
 .bodyRow[data-selected]:hover, .bodyRow[data-selected][data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-primary-accent-default, #794ed3), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a016, 0.16)) * 100%));
-  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+  border-color:var(--sys-primary-decor-hovered, #decdfb);
 }
 .bodyRow[data-selected]:hover .rowPinnedCells, .bodyRow[data-selected][data-actions-opened] .rowPinnedCells{
   background-color:color-mix(in srgb, var(--sys-primary-accent-default, #794ed3), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a016, 0.16)) * 100%));
-  border-color:var(--sys-neutral-decor-hovered, #d2d2d2);
+  border-color:var(--sys-primary-decor-activated, #c5b2f1);
 }
 .bodyRow[data-clickable]{
   cursor:pointer;

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.1",
+  "version": "0.8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,24 +32,24 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/chips": "0.9.1",
-    "@snack-uikit/droplist": "0.11.1",
-    "@snack-uikit/icon-predefined": "0.3.1",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/chips": "0.10.0",
+    "@snack-uikit/droplist": "0.12.0",
+    "@snack-uikit/icon-predefined": "0.4.0",
     "@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.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/pagination": "0.5.2",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/skeleton": "0.3.2",
+    "@snack-uikit/toggles": "0.9.0",
+    "@snack-uikit/toolbar": "0.5.0",
+    "@snack-uikit/truncate-string": "0.4.0",
+    "@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": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

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/helperComponents/Rows/styles.module.scss

@@ -88,16 +88,16 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
 
     .rowPinnedCells {
       background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a008);
-      border-color: $sys-neutral-decor-default;
+      border-color: $sys-primary-decor-activated;
     }
 
     &:hover, &[data-actions-opened] {
       background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
-      border-color: $sys-neutral-decor-hovered;
+      border-color: $sys-primary-decor-hovered;
 
       .rowPinnedCells {
         background-color: color-with-opacity-local($sys-primary-accent-default, $opacity-a016);
-        border-color: $sys-neutral-decor-hovered;
+        border-color: $sys-primary-decor-activated;
       }
     }
   }

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,
 };