@snack-uikit/table 0.11.7 → 0.11.8-preview-4c16b47e.0

package/README.md

@@ -98,6 +98,11 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
+## CopyCell
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| value | `string \| number` | - |  |
 ## Table
 Компонент таблицы
 ### Props
@@ -107,7 +112,7 @@ 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; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
+| search | `{ initialValue?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; disableDefaultSearch?: boolean; }` | '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` | - | Кол-во страниц (используется для внешнего управления) |
@@ -130,7 +135,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mapStatusToAppearance* | `(value: string \| number) => StatusAppearance` | - | Маппинг значений статуса на цвета |
+| mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
 | accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
 | enableSorting | `boolean` | - | Включение/выключение сортировки |
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
@@ -144,6 +149,54 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | actionsGenerator* | `ActionsGenerator<TData>` | - | Действия для строки |
 | pinned | `boolean` | - | Закрепление колонки справа в таблице |
+## ServerTable
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| 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 строки поиска |
+| onChangePage* | `(offset: number, limit: number) => void` | - |  |
+| columnDefinitions* | `ColumnDefinition<TData>[]` | - | Определение внешнего вида и функционала колонок |
+| data* | `TData[]` | - | Данные для отрисовки |
+| loading | `boolean` | - | Состояние загрузки |
+| 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>: Колбэк на выбор строк |
+| onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
+| className | `string` | - | CSS-класс |
+| onRefresh | `() => void` | - | Колбек обновления данных |
+| onDelete | `(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void) => void` | - | Колбек удаления выбранных |
+| outline | `boolean` | - | Внешний бордер для тулбара и таблицы |
+| columnFilters | `ReactNode` | - | Фильтры |
+| exportFileName | `string` | - | Название файла при экспорте CSV/XLSX |
+| moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
+| noDataState | `TableEmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `TableEmptyStateProps` | - | Экран при отстутствии результатов поиска |
+| suppressToolbar | `boolean` | - | Отключение тулбара |
+| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
+| suppressPagination | `boolean` | - | Отключение пагинации |
+| items | `TData[]` | - | Данные для отрисовки |
+| total | `number` | 10 | Общее кол-во строк |
+| limit | `number` | 10 | Кол-во строк на страницу |
+| offset | `number` | - | Смещение |
+| pagination | `{ options?: number[]; optionsLabel?: string; }` | 'Rows volume' <br> | Параметры отвечают за пагинацию в таблице <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
+## ServerTable.getRowActionsColumnDef
+Вспомогательная функция для создания ячейки с дополнительными действиями у строки
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| actionsGenerator* | `ActionsGenerator<TData>` | - | Действия для строки |
+| pinned | `boolean` | - | Закрепление колонки справа в таблице |
+## ServerTable.getStatusColumnDef
+Вспомогательная функция для создания ячейки со статусом
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
+| accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
+| enableSorting | `boolean` | - | Включение/выключение сортировки |
+| renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
+| size | `number` | - | Размер ячейки |
+| header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
+| enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## exportToCSV
 ### Props
 | name | type | default value | description |

package/dist/components/ServerTable/ServerTable.d.ts

@@ -0,0 +1,48 @@
+import { TableProps } from '../Table';
+export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search'> & {
+    /** Данные для отрисовки */
+    items?: TData[];
+    /**
+     * Общее кол-во строк
+     * @default 10
+     */
+    total?: number;
+    /**
+     * Кол-во строк на страницу
+     * @default 10
+     */
+    limit?: number;
+    /**
+     * Смещение
+     * @default 0
+     * */
+    offset?: number;
+    onChangePage(offset: number, limit: number): void;
+    /** Параметры отвечают за глобальный поиск в таблице <br>
+     * <strong>initialState</strong>: Начальное состояние строки поиска <br>
+     * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
+     * <strong>placeholder</strong>: Placeholder строки поиска @default 'Search...'<br>
+     * <strong>loading</strong>: Состояние загрузки в строке поиска <br>
+     * <strong>onChange</strong>: Колбэк на изменение данных в строке поиска
+     *  */
+    search: {
+        initialValue?: string;
+        state: string;
+        placeholder?: string;
+        loading?: boolean;
+        onChange(value: string): void;
+    };
+    /** Параметры отвечают за пагинацию в таблице <br>
+     * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br>
+     * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume' <br>
+     *  */
+    pagination?: {
+        options?: number[];
+        optionsLabel?: string;
+    };
+};
+export declare function ServerTable<TData extends object>({ items, total, limit, offset, onChangePage, search, pagination, columnFilters, ...rest }: ServerTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ServerTable {
+    var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
+    var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
+}

package/dist/components/ServerTable/ServerTable.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import debounce from 'lodash.debounce';
+import { useCallback, useMemo, useState } from 'react';
+import { Table } from '../Table';
+import { DEFAULT_PAGINATION_LIMIT, SEARCH_DELAY } from './constants';
+export function ServerTable(_a) {
+    var { items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0, onChangePage, search, pagination, columnFilters } = _a, rest = __rest(_a, ["items", "total", "limit", "offset", "onChangePage", "search", "pagination", "columnFilters"]);
+    const [tempSearch, setTempSearch] = useState(search.initialValue || '');
+    const onSearchDebounced = useMemo(() => debounce((newValue, onChange) => {
+        onChange(newValue);
+    }, SEARCH_DELAY), []);
+    const handleSearch = useCallback((newValue) => {
+        setTempSearch(newValue);
+        onSearchDebounced(newValue.trim(), search.onChange);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [limit, onSearchDebounced]);
+    const handlePageChange = useCallback(({ pageSize, pageIndex }) => onChangePage(pageIndex * pageSize, pageSize), [onChangePage]);
+    const pageIndex = useMemo(() => Math.floor(offset / limit), [limit, offset]);
+    const pageCount = useMemo(() => Math.ceil(total / limit), [limit, total]);
+    return (_jsx(Table, Object.assign({}, rest, { data: items || [], search: {
+            state: tempSearch,
+            onChange: handleSearch,
+            loading: search.loading,
+            placeholder: search.placeholder,
+            disableDefaultSearch: true,
+        }, columnFilters: columnFilters, pageCount: pageCount, pagination: Object.assign(Object.assign({}, pagination), { state: {
+                pageIndex,
+                pageSize: limit,
+            }, onChange: handlePageChange }), pageSize: limit })));
+}
+ServerTable.getRowActionsColumnDef = Table.getRowActionsColumnDef;
+ServerTable.getStatusColumnDef = Table.getStatusColumnDef;

package/dist/components/ServerTable/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const SEARCH_DELAY = 500;
+export declare const DEFAULT_PAGINATION_LIMIT = 10;

package/dist/components/ServerTable/constants.js

@@ -0,0 +1,2 @@
+export const SEARCH_DELAY = 500;
+export const DEFAULT_PAGINATION_LIMIT = 10;

package/dist/components/ServerTable/index.d.ts

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

package/dist/components/ServerTable/index.js

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

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

@@ -47,6 +47,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
         placeholder?: string;
         loading?: boolean;
         onChange?(value: string): void;
+        disableDefaultSearch?: boolean;
     };
     /** Максимальное кол-во строк на страницу @default 10 */
     pageSize?: number;

package/dist/components/Table/Table.js

@@ -22,12 +22,12 @@ import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectio
 import { fuzzyFilter } from '../../utils';
 import { TableEmptyState } from '../TableEmptyState';
 import { TablePagination } from '../TablePagination';
-import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE } from './constants';
+import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE, DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.css';
 /** Компонент таблицы */
 export function Table(_a) {
-    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = 10, pageCount, loading = false, outline = false, moreActions, exportFileName, noDataState = DEFAULT_NO_DATA_TABLE_STATE, noResultsState = DEFAULT_NO_RESULTS_TABLE_STATE, suppressToolbar = false, toolbarBefore, suppressPagination = false } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "noDataState", "noResultsState", "suppressToolbar", "toolbarBefore", "suppressPagination"]);
+    var { data, columnDefinitions, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters: columnFiltersProp, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportFileName, noDataState = DEFAULT_NO_DATA_TABLE_STATE, noResultsState = DEFAULT_NO_RESULTS_TABLE_STATE, suppressToolbar = false, toolbarBefore, suppressPagination = false } = _a, rest = __rest(_a, ["data", "columnDefinitions", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportFileName", "noDataState", "noResultsState", "suppressToolbar", "toolbarBefore", "suppressPagination"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -73,6 +73,9 @@ export function Table(_a) {
             enableResizing: false,
             minSize: 40,
         },
+        manualSorting: Boolean(pageCount),
+        manualPagination: pageCount !== undefined,
+        manualFiltering: Boolean(pageCount),
         globalFilterFn: fuzzyFilter,
         onGlobalFilterChange,
         onRowSelectionChange,
@@ -82,9 +85,7 @@ export function Table(_a) {
         getFilteredRowModel: getFilteredRowModel(),
         enableColumnResizing: true,
         enableSorting: true,
-        manualSorting: false,
-        enableMultiSort: false,
-        manualPagination: pageCount !== undefined,
+        enableMultiSort: true,
         onSortingChange,
         getSortedRowModel: getSortedRowModel(),
         onPaginationChange,
@@ -140,7 +141,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: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { search: {
+    const prePageSize = !suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize;
+    return (_jsx(_Fragment, { children: _jsxs("div", Object.assign({ style: { '--page-size': !tableRows.length ? Math.min(prePageSize, DEFAULT_PAGE_SIZE) : prePageSize }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [!suppressToolbar && (_jsxs("div", { className: styles.header, children: [_jsx(Toolbar, { search: {
                                 value: globalFilter,
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,

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

@@ -1,3 +1,4 @@
 import { TableEmptyStateProps } from '../TableEmptyState';
 export declare const DEFAULT_NO_DATA_TABLE_STATE: TableEmptyStateProps;
 export declare const DEFAULT_NO_RESULTS_TABLE_STATE: TableEmptyStateProps;
+export declare const DEFAULT_PAGE_SIZE = 10;

package/dist/components/Table/constants.js

@@ -11,3 +11,4 @@ export const DEFAULT_NO_RESULTS_TABLE_STATE = {
     title: 'Not found',
     description: 'Try entering another query',
 };
+export const DEFAULT_PAGE_SIZE = 10;

package/dist/components/index.d.ts

@@ -1 +1,2 @@
 export * from './Table';
+export * from './ServerTable';

package/dist/components/index.js

@@ -1 +1,2 @@
 export * from './Table';
+export * from './ServerTable';

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

@@ -0,0 +1,4 @@
+export type CopyCellProps = {
+    value?: string | number;
+};
+export declare function CopyCell({ value }: CopyCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Cells/CopyCell/CopyCell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { CopyButton } from './components';
+import styles from './styles.module.css';
+export function CopyCell({ value }) {
+    return (_jsxs("div", { className: styles.copyCell, children: [_jsx(TruncateString, { text: String(value), maxLines: 1 }), _jsx(CopyButton, { valueToCopy: value, className: styles.copyButton })] }));
+}

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/CopyButton.d.ts

@@ -0,0 +1,5 @@
+export type CopyButtonProps = {
+    valueToCopy?: string | number;
+    className?: string;
+};
+export declare function CopyButton({ valueToCopy, className }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/CopyButton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import copyToClipboard from 'copy-to-clipboard';
+import { useEffect, useRef, useState } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+export function CopyButton({ valueToCopy, className }) {
+    const [isChecked, setIsCheckedOpen] = useState(false);
+    const timerId = useRef();
+    const openChecked = () => setIsCheckedOpen(true);
+    const closeChecked = () => setIsCheckedOpen(false);
+    const handleClick = event => {
+        event.stopPropagation();
+        valueToCopy && copyToClipboard(String(valueToCopy), { format: 'text/plain' });
+        openChecked();
+        clearTimeout(timerId.current);
+        timerId.current = setTimeout(closeChecked, 1000);
+    };
+    useEffect(() => () => {
+        closeChecked();
+        clearTimeout(timerId.current);
+    }, []);
+    return (_jsx(ButtonFunction, { onClick: handleClick, "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), size: 's', className: className }));
+}

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/index.d.ts

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

package/dist/helperComponents/Cells/CopyCell/components/CopyButton/index.js

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

package/dist/helperComponents/Cells/CopyCell/components/index.d.ts

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

package/dist/helperComponents/Cells/CopyCell/components/index.js

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+.copyCell{
+  cursor:pointer;
+  display:flex;
+  gap:var(--dimension-050m, 4px);
+  align-items:center;
+  min-width:0;
+  max-width:100%;
+}
+.copyCell .copyButton{
+  display:none;
+}
+.copyCell:hover .copyButton{
+  display:inline-flex;
+}

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

@@ -3,11 +3,12 @@ import { STATUS_APPEARANCE } from './constants';
 import { StatusAppearance } from './types';
 export type { StatusAppearance };
 export { STATUS_APPEARANCE };
+export type MapStatusToAppearanceFnType = (value: string | number) => StatusAppearance;
 type BaseStatusColumnDef = {
     /** Имя ключа соответствующее полю в data */
     accessorKey: string;
     /** Маппинг значений статуса на цвета */
-    mapStatusToAppearance(value: string | number): StatusAppearance;
+    mapStatusToAppearance: MapStatusToAppearanceFnType;
     /** Включение/выключение сортировки */
     enableSorting?: boolean;
 };

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

@@ -3,3 +3,4 @@ export * from './RowActionsCell';
 export * from './HeaderCell';
 export * from './SelectionCell';
 export * from './StatusCell';
+export * from './CopyCell';

package/dist/helperComponents/Cells/index.js

@@ -3,3 +3,4 @@ export * from './RowActionsCell';
 export * from './HeaderCell';
 export * from './SelectionCell';
 export * from './StatusCell';
+export * from './CopyCell';

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from './components';
 export * from './types';
 export * from './exportTable';
+export { CopyCell } from './helperComponents';
+export { type CopyCellProps, type ActionsGenerator } from './helperComponents';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './components';
 export * from './types';
 export * from './exportTable';
+export { CopyCell } from './helperComponents';

package/dist/types.d.ts

@@ -37,5 +37,5 @@ type PinnedColumnDefinition<TData> = BaseColumnDefinition<TData> & {
     size: number;
 };
 export type ColumnDefinition<TData> = NormalColumnDefinition<TData> | PinnedColumnDefinition<TData>;
-export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, } from './helperComponents';
+export type { RowActionInfo, RowActionProps, RowActionsColumnDefProps, StatusColumnDefinitionProps, RowInfo, RowClickHandler, ActionsGenerator, CopyCellProps, MapStatusToAppearanceFnType, } from './helperComponents';
 export type { PaginationState, SortingState, RowSelectionState, RowSelectionOptions, TableEmptyStateProps, ToolbarProps, HeaderContext, CellContext, };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.11.7",
+  "version": "0.11.8-preview-4c16b47e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,21 +36,23 @@
     "@snack-uikit/chips": "0.10.11",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/list": "0.2.1",
+    "@snack-uikit/list": "0.2.2-preview-4c16b47e.0",
     "@snack-uikit/pagination": "0.6.3",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
     "@snack-uikit/tag": "0.7.2",
     "@snack-uikit/toggles": "0.9.5",
-    "@snack-uikit/toolbar": "0.7.6",
+    "@snack-uikit/toolbar": "0.7.7-preview-4c16b47e.0",
     "@snack-uikit/truncate-string": "0.4.7",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "@tanstack/match-sorter-utils": "8.8.4",
     "@tanstack/react-table": "8.11.6",
     "classnames": "2.3.2",
+    "copy-to-clipboard": "3.3.3",
+    "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
+  "gitHead": "b34b83d8b1a72a411232cb0cfedc133b705ea00c"
 }

package/src/components/ServerTable/ServerTable.tsx

@@ -0,0 +1,122 @@
+import debounce from 'lodash.debounce';
+import { useCallback, useMemo, useState } from 'react';
+
+import { PaginationState } from '../../types';
+import { Table, TableProps } from '../Table';
+import { DEFAULT_PAGINATION_LIMIT, SEARCH_DELAY } from './constants';
+
+export type ServerTableProps<TData extends object> = Omit<
+  TableProps<TData>,
+  'pageSize' | 'pageCount' | 'pagination' | 'search'
+> & {
+  /** Данные для отрисовки */
+  items?: TData[];
+  /**
+   * Общее кол-во строк
+   * @default 10
+   */
+  total?: number;
+  /**
+   * Кол-во строк на страницу
+   * @default 10
+   */
+  limit?: number;
+  /**
+   * Смещение
+   * @default 0
+   * */
+  offset?: number;
+
+  onChangePage(offset: number, limit: number): void;
+
+  /** Параметры отвечают за глобальный поиск в таблице <br>
+   * <strong>initialState</strong>: Начальное состояние строки поиска <br>
+   * <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br>
+   * <strong>placeholder</strong>: Placeholder строки поиска @default 'Search...'<br>
+   * <strong>loading</strong>: Состояние загрузки в строке поиска <br>
+   * <strong>onChange</strong>: Колбэк на изменение данных в строке поиска
+   *  */
+  search: {
+    initialValue?: string;
+    state: string;
+    placeholder?: string;
+    loading?: boolean;
+    onChange(value: string): void;
+  };
+
+  /** Параметры отвечают за пагинацию в таблице <br>
+   * <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу<br>
+   * <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу @default 'Rows volume' <br>
+   *  */
+  pagination?: {
+    options?: number[];
+    optionsLabel?: string;
+  };
+};
+
+export function ServerTable<TData extends object>({
+  items,
+  total = DEFAULT_PAGINATION_LIMIT,
+  limit = DEFAULT_PAGINATION_LIMIT,
+  offset = 0,
+  onChangePage,
+  search,
+  pagination,
+  columnFilters,
+  ...rest
+}: ServerTableProps<TData>) {
+  const [tempSearch, setTempSearch] = useState(search.initialValue || '');
+
+  const onSearchDebounced = useMemo(
+    () =>
+      debounce((newValue: string, onChange: (newValue: string) => void) => {
+        onChange(newValue);
+      }, SEARCH_DELAY),
+    [],
+  );
+
+  const handleSearch = useCallback(
+    (newValue: string) => {
+      setTempSearch(newValue);
+      onSearchDebounced(newValue.trim(), search.onChange);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [limit, onSearchDebounced],
+  );
+
+  const handlePageChange = useCallback(
+    ({ pageSize, pageIndex }: PaginationState) => onChangePage(pageIndex * pageSize, pageSize),
+    [onChangePage],
+  );
+
+  const pageIndex = useMemo(() => Math.floor(offset / limit), [limit, offset]);
+  const pageCount = useMemo(() => Math.ceil(total / limit), [limit, total]);
+
+  return (
+    <Table
+      {...rest}
+      data={items || []}
+      search={{
+        state: tempSearch,
+        onChange: handleSearch,
+        loading: search.loading,
+        placeholder: search.placeholder,
+        disableDefaultSearch: true,
+      }}
+      columnFilters={columnFilters}
+      pageCount={pageCount}
+      pagination={{
+        ...pagination,
+        state: {
+          pageIndex,
+          pageSize: limit,
+        },
+        onChange: handlePageChange,
+      }}
+      pageSize={limit}
+    />
+  );
+}
+
+ServerTable.getRowActionsColumnDef = Table.getRowActionsColumnDef;
+ServerTable.getStatusColumnDef = Table.getStatusColumnDef;

package/src/components/ServerTable/constants.ts

@@ -0,0 +1,2 @@
+export const SEARCH_DELAY = 500;
+export const DEFAULT_PAGINATION_LIMIT = 10;

package/src/components/ServerTable/index.ts

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

package/src/components/Table/Table.tsx

@@ -36,7 +36,7 @@ import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
 import { TableEmptyState, TableEmptyStateProps } from '../TableEmptyState';
 import { TablePagination } from '../TablePagination';
-import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE } from './constants';
+import { DEFAULT_NO_DATA_TABLE_STATE, DEFAULT_NO_RESULTS_TABLE_STATE, DEFAULT_PAGE_SIZE } from './constants';
 import { useLoadingTable, useStateControl } from './hooks';
 import styles from './styles.module.scss';
 
@@ -82,6 +82,7 @@ export type TableProps<TData extends object> = WithSupportProps<{
     placeholder?: string;
     loading?: boolean;
     onChange?(value: string): void;
+    disableDefaultSearch?: boolean;
   };
 
   /** Максимальное кол-во строк на страницу @default 10 */
@@ -161,7 +162,7 @@ export function Table<TData extends object>({
   onRefresh,
   onDelete,
 
-  pageSize = 10,
+  pageSize = DEFAULT_PAGE_SIZE,
   pageCount,
   loading = false,
   outline = false,
@@ -252,6 +253,10 @@ export function Table<TData extends object>({
       minSize: 40,
     },
 
+    manualSorting: Boolean(pageCount),
+    manualPagination: pageCount !== undefined,
+    manualFiltering: Boolean(pageCount),
+
     globalFilterFn: fuzzyFilter,
     onGlobalFilterChange,
 
@@ -265,11 +270,12 @@ export function Table<TData extends object>({
     enableColumnResizing: true,
 
     enableSorting: true,
-    manualSorting: false,
-    enableMultiSort: false,
-    manualPagination: pageCount !== undefined,
+
+    enableMultiSort: true,
+
     onSortingChange,
     getSortedRowModel: getSortedRowModel(),
+
     onPaginationChange,
     getPaginationRowModel: getPaginationRowModel(),
 
@@ -339,10 +345,12 @@ export function Table<TData extends object>({
   const loadingTableRows = loadingTable.getRowModel().rows;
   const tablePagination = table.getState().pagination;
 
+  const prePageSize = !suppressPagination ? tablePagination?.pageSize : pageSize;
+
   return (
     <>
       <div
-        style={{ '--page-size': !suppressPagination ? tablePagination?.pageSize : pageSize }}
+        style={{ '--page-size': !tableRows.length ? Math.min(prePageSize, DEFAULT_PAGE_SIZE) : prePageSize }}
         className={cn(styles.wrapper, className)}
         {...extractSupportProps(rest)}
       >

package/src/components/Table/constants.ts

@@ -15,3 +15,5 @@ export const DEFAULT_NO_RESULTS_TABLE_STATE: TableEmptyStateProps = {
   title: 'Not found',
   description: 'Try entering another query',
 } as const;
+
+export const DEFAULT_PAGE_SIZE = 10;

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './Table';
+export * from './ServerTable';

package/src/helperComponents/Cells/CopyCell/CopyCell.tsx

@@ -0,0 +1,17 @@
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import { CopyButton } from './components';
+import styles from './styles.module.scss';
+
+export type CopyCellProps = {
+  value?: string | number;
+};
+
+export function CopyCell({ value }: CopyCellProps) {
+  return (
+    <div className={styles.copyCell}>
+      <TruncateString text={String(value)} maxLines={1} />
+      <CopyButton valueToCopy={value} className={styles.copyButton} />
+    </div>
+  );
+}

package/src/helperComponents/Cells/CopyCell/components/CopyButton/CopyButton.tsx

@@ -0,0 +1,44 @@
+import copyToClipboard from 'copy-to-clipboard';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { CheckSVG, CopySVG } from '@snack-uikit/icons';
+
+export type CopyButtonProps = {
+  valueToCopy?: string | number;
+  className?: string;
+};
+
+export function CopyButton({ valueToCopy, className }: CopyButtonProps) {
+  const [isChecked, setIsCheckedOpen] = useState(false);
+  const timerId = useRef<ReturnType<typeof setTimeout>>();
+  const openChecked = () => setIsCheckedOpen(true);
+  const closeChecked = () => setIsCheckedOpen(false);
+
+  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+    event.stopPropagation();
+    valueToCopy && copyToClipboard(String(valueToCopy), { format: 'text/plain' });
+    openChecked();
+    clearTimeout(timerId.current);
+    timerId.current = setTimeout(closeChecked, 1000);
+  };
+
+  useEffect(
+    () => () => {
+      closeChecked();
+      clearTimeout(timerId.current);
+    },
+    [],
+  );
+
+  return (
+    <ButtonFunction
+      onClick={handleClick}
+      data-test-id='button-copy-value'
+      type='button'
+      icon={isChecked ? <CheckSVG /> : <CopySVG />}
+      size='s'
+      className={className}
+    />
+  );
+}

package/src/helperComponents/Cells/CopyCell/components/CopyButton/index.ts

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

package/src/helperComponents/Cells/CopyCell/components/index.ts

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

package/src/helperComponents/Cells/CopyCell/index.ts

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

package/src/helperComponents/Cells/CopyCell/styles.module.scss

@@ -0,0 +1,21 @@
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.copyCell {
+  cursor: pointer;
+
+  display: flex;
+  gap: $dimension-050m;
+  align-items: center;
+
+  min-width: 0;
+  max-width: 100%;
+  .copyButton {
+    display: none;
+  }
+
+  &:hover {
+    .copyButton {
+      display: inline-flex;
+    }
+  }
+}

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

@@ -16,11 +16,13 @@ type StatusCellProps = {
   appearance: StatusAppearance;
 };
 
+export type MapStatusToAppearanceFnType = (value: string | number) => StatusAppearance;
+
 type BaseStatusColumnDef = {
   /** Имя ключа соответствующее полю в data */
   accessorKey: string;
   /** Маппинг значений статуса на цвета */
-  mapStatusToAppearance(value: string | number): StatusAppearance;
+  mapStatusToAppearance: MapStatusToAppearanceFnType;
   /** Включение/выключение сортировки */
   enableSorting?: boolean;
 };

package/src/helperComponents/Cells/index.ts

@@ -3,3 +3,4 @@ export * from './RowActionsCell';
 export * from './HeaderCell';
 export * from './SelectionCell';
 export * from './StatusCell';
+export * from './CopyCell';

package/src/index.ts

@@ -1,3 +1,6 @@
 export * from './components';
 export * from './types';
 export * from './exportTable';
+
+export { CopyCell } from './helperComponents';
+export { type CopyCellProps, type ActionsGenerator } from './helperComponents';

package/src/types.ts

@@ -71,6 +71,8 @@ export type {
   RowInfo,
   RowClickHandler,
   ActionsGenerator,
+  CopyCellProps,
+  MapStatusToAppearanceFnType,
 } from './helperComponents';
 
 export type {