@snack-uikit/table 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.10.0 (2024-01-18)
+
+
+### Features
+
+* **FF-4102:** update toolbar usage, add 'toolbarBeforeSearch' prop ([6acf0ba](https://github.com/cloud-ru-tech/snack-uikit/commit/6acf0ba5bfb1afaaa485857f3058b65a92f6c75c))
+
+
+
+
+
 # 0.9.0 (2024-01-16)
 
 

package/README.md

@@ -123,6 +123,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | 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` | - | Отключение тулбара |
+| toolbarBefore | `ReactNode` | - | Дополнительный слот в `Toolbar` перед строкой поиска |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом

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

@@ -88,11 +88,13 @@ export type TableProps<TData extends object> = WithSupportProps<{
     noResultsState?: TableEmptyStateProps;
     /** Отключение тулбара */
     suppressToolbar?: boolean;
+    /** Дополнительный слот в `Toolbar` перед строкой поиска */
+    toolbarBefore?: ReactNode;
     /** Отключение пагинации */
     suppressPagination?: boolean;
 }>;
 /** Компонент таблицы */
-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 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, toolbarBefore, suppressPagination, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: {

package/dist/components/Table/Table.js

@@ -27,7 +27,7 @@ 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, 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", "suppressPagination"]);
+    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"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -140,7 +140,12 @@ 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, { 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, style: columnSizeVars, 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 }))] })) }));
+    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: {
+                                value: globalFilter,
+                                onChange: onGlobalFilterChange,
+                                loading: search === null || search === void 0 ? void 0 : search.loading,
+                                placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || 'Search',
+                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: 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, style: columnSizeVars, 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.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,7 +41,7 @@
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/skeleton": "0.3.2",
     "@snack-uikit/toggles": "0.9.3",
-    "@snack-uikit/toolbar": "0.5.4",
+    "@snack-uikit/toolbar": "0.6.0",
     "@snack-uikit/truncate-string": "0.4.4",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
@@ -51,5 +51,5 @@
     "uncontrollable": "8.0.0",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz"
   },
-  "gitHead": "b8ffb981d1933d3798b28e05095f25538768ffd4"
+  "gitHead": "75f118e9d2fa2f38727460ebdd9ac5a1c31cc176"
 }

package/src/components/Table/Table.tsx

@@ -136,6 +136,9 @@ export type TableProps<TData extends object> = WithSupportProps<{
 
   /** Отключение тулбара */
   suppressToolbar?: boolean;
+  /** Дополнительный слот в `Toolbar` перед строкой поиска */
+  toolbarBefore?: ReactNode;
+
   /** Отключение пагинации */
   suppressPagination?: boolean;
 }>;
@@ -170,6 +173,8 @@ export function Table<TData extends object>({
   noResultsState = DEFAULT_NO_RESULTS_TABLE_STATE,
 
   suppressToolbar = false,
+  toolbarBefore,
+
   suppressPagination = false,
 
   ...rest
@@ -344,8 +349,12 @@ export function Table<TData extends object>({
         {!suppressToolbar && (
           <div className={styles.header}>
             <Toolbar
-              value={globalFilter}
-              onChange={onGlobalFilterChange}
+              search={{
+                value: globalFilter,
+                onChange: onGlobalFilterChange,
+                loading: search?.loading,
+                placeholder: search?.placeholder || 'Search',
+              }}
               checked={table.getIsAllPageRowsSelected()}
               indeterminate={table.getIsSomePageRowsSelected()}
               className={styles.toolbar}
@@ -353,10 +362,9 @@ export function Table<TData extends object>({
               onDelete={enableSelection && onDelete ? handleOnDelete : undefined}
               onCheck={enableSelection ? handleOnCheck : undefined}
               outline={outline}
-              loading={search?.loading}
-              placeholder={search?.placeholder || 'Search'}
               selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
-              actions={
+              before={toolbarBefore}
+              after={
                 exportFileName ? (
                   <ExportButton fileName={exportFileName} columnDefinitions={columnDefinitions} data={data} />
                 ) : undefined