@snack-uikit/table 0.37.27 → 0.37.28-preview-b0a70f1c.0

package/README.md

@@ -242,11 +242,11 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| __@unscopables@2269* | `{ [x: number]: boolean; length?: boolean; toString?: boolean; toLocaleString?: boolean; pop?: boolean; push?: boolean; concat?: boolean; join?: boolean; reverse?: boolean; shift?: boolean; slice?: boolean; sort?: boolean; ... 29 more ...; readonly [Symbol.unscopables]?: boolean; }` | - | Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement. |
-| __@iterator@1571* | `() => IterableIterator<ColumnDefinition<TData>>` | - | Iterator |
+| __@unscopables@2312* | `{ [x: number]: boolean; length?: boolean; toString?: boolean; toLocaleString?: boolean; pop?: boolean; push?: boolean; concat?: boolean; join?: boolean; reverse?: boolean; shift?: boolean; slice?: boolean; sort?: boolean; ... 29 more ...; readonly [Symbol.unscopables]?: boolean; }` | - | Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement. |
+| __@iterator@1606* | `() => ArrayIterator<ColumnDefinition<TData>>` | - | Iterator |
 | with* | `(index: number, value: ColumnDefinition<TData>) => ColumnDefinition<TData>[]` | - | Copies an array, then overwrites the value at the provided index with the given value. If the index is negative, then it replaces from the end of the array. @param index The index of the value to overwrite. If the index is negative, then it replaces from the end of the array. @param value The value to write into the copied array. @returns The copied array with the updated value. |
 | toSpliced* | `{ (start: number, deleteCount: number, ...items: ColumnDefinition<TData>[]): ColumnDefinition<TData>[]; (start: number, deleteCount?: number): ColumnDefinition<...>[]; }` | - | Copies an array and removes elements and, if necessary, inserts new elements in their place. Returns the copied array. Copies an array and removes elements while returning the remaining elements. @param start The zero-based location in the array from which to start removing elements. @param deleteCount The number of elements to remove. @param items Elements to insert into the copied array in place of the deleted elements. @returns The copied array. @param start The zero-based location in the array from which to start removing elements. @param deleteCount The number of elements to remove. @returns A copy of the original array with the remaining elements. |
-| toSorted* | `(compareFn?: (a: ColumnDefinition<TData>, b: ColumnDefinition<TData>) => number) => ColumnDefinition<TData>[]` | - | Returns a copy of an array with its elements sorted. @param compareFn Function used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, ASCII character order. ```ts [11, 2, 22, 1].toSorted((a, b) => a - b) // [1, 2, 11, 22] ``` |
+| toSorted* | `(compareFn?: (a: ColumnDefinition<TData>, b: ColumnDefinition<TData>) => number) => ColumnDefinition<TData>[]` | - | Returns a copy of an array with its elements sorted. @param compareFn Function used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order. ```ts [11, 2, 22, 1].toSorted((a, b) => a - b) // [1, 2, 11, 22] ``` |
 | toReversed* | `() => ColumnDefinition<TData>[]` | - | Returns a copy of an array with its elements reversed. |
 | findLastIndex* | `(predicate: (value: ColumnDefinition<TData>, index: number, array: ColumnDefinition<TData>[]) => unknown, thisArg?: any) => number` | - | Returns the index of the last element in the array where predicate is true, and -1 otherwise. @param predicate findLastIndex calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1. @param thisArg If provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead. |
 | findLast* | `{ <S extends ColumnDefinition<TData>>(predicate: (value: ColumnDefinition<TData>, index: number, array: ColumnDefinition<TData>[]) => value is S, thisArg?: any): S; (predicate: (value: ColumnDefinition<...>, index: number, array: ColumnDefinition<...>[]) => unknown, thisArg?: any): ColumnDefinition<...>; }` | - | Returns the value of the last element in the array where predicate is true, and undefined otherwise. @param predicate findLast calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLast immediately returns that element value. Otherwise, findLast returns undefined. @param thisArg If provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead. |
@@ -254,9 +254,9 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | flat* | `<A, D extends number = 1>(this: A, depth?: D) => FlatArray<A, D>[]` | - | Returns a new array with all sub-array elements concatenated into it recursively up to the specified depth. @param depth The maximum recursion depth |
 | flatMap* | `<U, This = undefined>(callback: (this: This, value: ColumnDefinition<TData>, index: number, array: ColumnDefinition<TData>[]) => U \| readonly U[], thisArg?: This) => U[]` | - | Calls a defined callback function on each element of an array. Then, flattens the result into a new array. This is identical to a map followed by flat with depth 1. @param callback A function that accepts up to three arguments. The flatMap method calls the callback function one time for each element in the array. @param thisArg An object to which the this keyword can refer in the callback function. If thisArg is omitted, undefined is used as the this value. |
 | includes* | `(searchElement: ColumnDefinition<TData>, fromIndex?: number) => boolean` | - | Determines whether an array includes a certain element, returning true or false as appropriate. @param searchElement The element to search for. @param fromIndex The position in this array at which to begin searching for searchElement. |
-| values* | `() => IterableIterator<ColumnDefinition<TData>>` | - | Returns an iterable of values in the array |
-| keys* | `() => IterableIterator<number>` | - | Returns an iterable of keys in the array |
-| entries* | `() => IterableIterator<[number, ColumnDefinition<TData>]>` | - | Returns an iterable of key, value pairs for every entry in the array |
+| values* | `() => ArrayIterator<ColumnDefinition<TData>>` | - | Returns an iterable of values in the array |
+| keys* | `() => ArrayIterator<number>` | - | Returns an iterable of keys in the array |
+| entries* | `() => ArrayIterator<[number, ColumnDefinition<TData>]>` | - | Returns an iterable of key, value pairs for every entry in the array |
 | copyWithin* | `(target: number, start: number, end?: number) => ColumnDefinition<TData>[]` | - | Returns the this object after copying a section of the array identified by start and end to the same array starting at position target @param target If target is negative, it is treated as length+target where length is the length of the array. @param start If start is negative, it is treated as length+start. If end is negative, it is treated as length+end. @param end If not specified, length of the this object is used as its default value. |
 | fill* | `(value: ColumnDefinition<TData>, start?: number, end?: number) => ColumnDefinition<TData>[]` | - | Changes all array elements from `start` to `end` index to a static `value` and returns the modified array @param value value to fill array section with @param start index to start filling the array at. If start is negative, it is treated as length+start where length is the length of the array. @param end index to stop filling the array at. If end is negative, it is treated as length+end. |
 | findIndex* | `(predicate: (value: ColumnDefinition<TData>, index: number, obj: ColumnDefinition<TData>[]) => unknown, thisArg?: any) => number` | - | Returns the index of the first element in the array where predicate is true, and -1 otherwise. @param predicate find calls predicate once for each element of the array, in ascending order, until it finds one where predicate returns true. If such an element is found, findIndex immediately returns that element index. Otherwise, findIndex returns -1. @param thisArg If provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead. |
@@ -271,8 +271,8 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | lastIndexOf* | `(searchElement: ColumnDefinition<TData>, fromIndex?: number) => number` | - | Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present. @param searchElement The value to locate in the array. @param fromIndex The array index at which to begin searching backward. If fromIndex is omitted, the search starts at the last index in the array. |
 | indexOf* | `(searchElement: ColumnDefinition<TData>, fromIndex?: number) => number` | - | Returns the index of the first occurrence of a value in an array, or -1 if it is not present. @param searchElement The value to locate in the array. @param fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0. |
 | unshift* | `(...items: ColumnDefinition<TData>[]) => number` | - | Inserts new elements at the start of an array, and returns the new length of the array. @param items Elements to insert at the start of the array. |
-| splice* | `{ (start: number, deleteCount?: number): ColumnDefinition<TData>[]; (start: number, deleteCount: number, ...items: ColumnDefinition<TData>[]): ColumnDefinition<...>[]; }` | - | Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements. @param start The zero-based location in the array from which to start removing elements. @param deleteCount The number of elements to remove. @returns An array containing the elements that were deleted. @param start The zero-based location in the array from which to start removing elements. @param deleteCount The number of elements to remove. @param items Elements to insert into the array in place of the deleted elements. @returns An array containing the elements that were deleted. |
-| sort* | `(compareFn?: (a: ColumnDefinition<TData>, b: ColumnDefinition<TData>) => number) => ColumnDefinition<TData>[]` | - | Sorts an array in place. This method mutates the array and returns a reference to the same array. @param compareFn Function used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, ASCII character order. ```ts [11,2,22,1].sort((a, b) => a - b) ``` |
+| splice* | `{ (start: number, deleteCount?: number): ColumnDefinition<TData>[]; (start: number, deleteCount: number, ...items: ColumnDefinition<TData>[]): ColumnDefinition<...>[]; }` | - | Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements. @param start The zero-based location in the array from which to start removing elements. @param deleteCount The number of elements to remove. Omitting this argument will remove all elements from the start paramater location to end of the array. If value of this argument is either a negative number, zero, undefined, or a type that cannot be converted to an integer, the function will evaluate the argument as zero and not remove any elements. @returns An array containing the elements that were deleted. @param start The zero-based location in the array from which to start removing elements. @param deleteCount The number of elements to remove. If value of this argument is either a negative number, zero, undefined, or a type that cannot be converted to an integer, the function will evaluate the argument as zero and not remove any elements. @param items Elements to insert into the array in place of the deleted elements. @returns An array containing the elements that were deleted. |
+| sort* | `(compareFn?: (a: ColumnDefinition<TData>, b: ColumnDefinition<TData>) => number) => ColumnDefinition<TData>[]` | - | Sorts an array in place. This method mutates the array and returns a reference to the same array. @param compareFn Function used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order. ```ts [11,2,22,1].sort((a, b) => a - b) ``` |
 | slice* | `(start?: number, end?: number) => ColumnDefinition<TData>[]` | - | Returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array. @param start The beginning index of the specified portion of the array. If start is undefined, then the slice begins at index 0. @param end The end index of the specified portion of the array. This is exclusive of the element at the index 'end'. If end is undefined, then the slice extends to the end of the array. |
 | shift* | `() => ColumnDefinition<TData>` | - | Removes the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified. |
 | reverse* | `() => ColumnDefinition<TData>[]` | - | Reverses the elements in an array in place. This method mutates the array and returns a reference to the same array. |
@@ -298,6 +298,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | filter | `FiltersState` | - |  |
+| ordering | `FieldSort[]` | - |  |
 | search | `string` | - |  |
 | pagination | `PaginationState \| PaginationParams` | - |  |
 | sorting | `SortingState` | - |  |

package/dist/cjs/components/Table/Table.js

@@ -108,7 +108,7 @@ function Table(_a) {
   const validatePersistedState = (0, react_1.useMemo)(() => data => {
     const dataAsSettings = data;
     const isPaginationValid = (0, validators_1.validatePaging)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
-    const isSortingValid = (0, validators_1.validateSorting)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.sorting);
+    const isSortingValid = (0, validators_1.validateSorting)(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
     const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
     const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && (0, validators_1.validateFilter)(dataAsSettings.filter, columnFilters.filters));
     return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
@@ -379,8 +379,10 @@ function Table(_a) {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
+  const showPagination = !infiniteLoading && !suppressPagination;
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
+    className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className),
+    "data-with-toolbar": showToolbar || undefined
   }, (0, utils_1.extractSupportProps)(rest), {
     children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_1.default.header,
@@ -399,14 +401,14 @@ function Table(_a) {
           validateData: validatePersistedState,
           state: {
             pagination: (0, mappers_1.mapPaginationToRequestPayload)(pagination),
-            sorting: (0, mappers_1.mapSortToRequestPayload)(sorting),
+            ordering: (0, mappers_1.mapSortToRequestPayload)(sorting),
             filter,
             search: globalFilter || ''
           },
           onLoad: state => {
             state.pagination && onPaginationChange((0, mappers_1.mapPaginationToTableState)(state.pagination));
             state.search && onGlobalFilterChange(state.search);
-            state.sorting && onSortingChange((0, mappers_1.mapSortToTableState)(state.sorting));
+            state.ordering && onSortingChange((0, mappers_1.mapSortToTableState)(state.ordering));
             if (state.filter) {
               setFilter(state.filter);
               setFilterVisibility(Object.keys(state.filter));
@@ -509,7 +511,7 @@ function Table(_a) {
         className: styles_module_scss_1.default.scrollStub,
         ref: scrollRef
       })]
-    }), !infiniteLoading && !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
+    }), showPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
       table: table,
       options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
       optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,

package/dist/cjs/components/Table/styles.module.css

@@ -46,10 +46,13 @@
 
 .wrapper{
   display:grid;
-  grid-template-rows:max-content minmax(auto, 100%) max-content;
+  grid-template-rows:minmax(auto, 100%) max-content;
   max-width:100%;
   max-height:100%;
 }
+.wrapper[data-with-toolbar]{
+  grid-template-rows:max-content minmax(auto, 100%) max-content;
+}
 
 .scrollStub{
   height:calc(var(--dimension-025m, 2px) / 2);

package/dist/cjs/components/Table/utils/saveTableState/mappers.d.ts

@@ -3,9 +3,9 @@ import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { FiltersState } from '@snack-uikit/chips';
 import { PersistedFilterState } from '@snack-uikit/toolbar';
 export declare const mapPaginationToTableState: (value?: RequestPayloadParams["pagination"]) => PaginationState;
-export declare const mapSortToTableState: (value?: RequestPayloadParams["sort"]) => SortingState;
+export declare const mapSortToTableState: (value?: RequestPayloadParams["ordering"]) => SortingState;
 export declare const mapPaginationToRequestPayload: (value?: PaginationState | RequestPayloadParams["pagination"]) => RequestPayloadParams["pagination"];
-export declare const mapSortToRequestPayload: (value?: SortingState) => RequestPayloadParams["sort"];
+export declare const mapSortToRequestPayload: (value?: SortingState) => RequestPayloadParams["ordering"];
 /** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
 export declare const formatTableStateToRequestPayload: <T extends FiltersState>({ pagination, sorting, search, filter, }: Omit<PersistedFilterState<T>, "pagination" | "sorting"> & {
     pagination?: PaginationState | RequestPayloadParams["pagination"];

package/dist/cjs/components/Table/utils/saveTableState/mappers.js

@@ -23,7 +23,7 @@ const mapSortToTableState = function () {
   let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return value.map(column => ({
     id: column.field,
-    desc: column.direction === 'd'
+    desc: column.direction === '-'
   }));
 };
 exports.mapSortToTableState = mapSortToTableState;
@@ -40,7 +40,7 @@ const mapPaginationToRequestPayload = value => {
 exports.mapPaginationToRequestPayload = mapPaginationToRequestPayload;
 const mapSortToRequestPayload = value => value === null || value === void 0 ? void 0 : value.map(column => ({
   field: column.id,
-  direction: column.desc ? 'd' : 'a'
+  direction: column.desc ? '-' : '+'
 }));
 exports.mapSortToRequestPayload = mapSortToRequestPayload;
 /** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
@@ -55,7 +55,7 @@ const formatTableStateToRequestPayload = _ref => {
     filter,
     search,
     pagination: (0, exports.mapPaginationToRequestPayload)(pagination),
-    sorting: (0, exports.mapSortToRequestPayload)(sorting)
+    ordering: (0, exports.mapSortToRequestPayload)(sorting)
   });
 };
 exports.formatTableStateToRequestPayload = formatTableStateToRequestPayload;

package/dist/cjs/components/Table/utils/saveTableState/validators.d.ts

@@ -1,5 +1,5 @@
 import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ChipChoiceRowProps } from '@snack-uikit/chips';
 export declare const validatePaging: (value: unknown) => value is RequestPayloadParams["pagination"];
-export declare const validateSorting: (value: unknown) => value is RequestPayloadParams["sort"];
+export declare const validateSorting: (value: unknown) => value is RequestPayloadParams["ordering"];
 export declare const validateFilter: <TFilters extends Record<string, unknown>>(value: unknown, filterSettings: ChipChoiceRowProps<TFilters>["filters"]) => value is TFilters;

package/dist/esm/components/Table/Table.js

@@ -47,7 +47,7 @@ export function Table(_a) {
     const validatePersistedState = useMemo(() => (data) => {
         const dataAsSettings = data;
         const isPaginationValid = validatePaging(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.pagination);
-        const isSortingValid = validateSorting(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.sorting);
+        const isSortingValid = validateSorting(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.ordering);
         const isSearchValid = !(dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) || typeof (dataAsSettings === null || dataAsSettings === void 0 ? void 0 : dataAsSettings.search) === 'string';
         const isFilterValid = Boolean((columnFilters === null || columnFilters === void 0 ? void 0 : columnFilters.filters) && validateFilter(dataAsSettings.filter, columnFilters.filters));
         return isPaginationValid && isSortingValid && isSearchValid && isFilterValid;
@@ -276,7 +276,8 @@ export function Table(_a) {
     });
     const { updateCellMap } = useCellAutoResizeController(table);
     const showToolbar = !suppressToolbar;
-    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
+    const showPagination = !infiniteLoading && !suppressPagination;
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className), "data-with-toolbar": showToolbar || undefined }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(Toolbar, { search: suppressSearch
                         ? undefined
                         : {
                             value: globalFilter,
@@ -290,21 +291,21 @@ export function Table(_a) {
                             validateData: validatePersistedState,
                             state: {
                                 pagination: mapPaginationToRequestPayload(pagination),
-                                sorting: mapSortToRequestPayload(sorting),
+                                ordering: mapSortToRequestPayload(sorting),
                                 filter,
                                 search: globalFilter || '',
                             },
                             onLoad: state => {
                                 state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
                                 state.search && onGlobalFilterChange(state.search);
-                                state.sorting && onSortingChange(mapSortToTableState(state.sorting));
+                                state.ordering && onSortingChange(mapSortToTableState(state.ordering));
                                 if (state.filter) {
                                     setFilter(state.filter);
                                     setFilterVisibility(Object.keys(state.filter));
                                 }
                             },
                         }
-                        : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !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, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
+                        : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), showPagination && (_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, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/components/Table/styles.module.css

@@ -46,10 +46,13 @@
 
 .wrapper{
   display:grid;
-  grid-template-rows:max-content minmax(auto, 100%) max-content;
+  grid-template-rows:minmax(auto, 100%) max-content;
   max-width:100%;
   max-height:100%;
 }
+.wrapper[data-with-toolbar]{
+  grid-template-rows:max-content minmax(auto, 100%) max-content;
+}
 
 .scrollStub{
   height:calc(var(--dimension-025m, 2px) / 2);

package/dist/esm/components/Table/utils/saveTableState/mappers.d.ts

@@ -3,9 +3,9 @@ import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { FiltersState } from '@snack-uikit/chips';
 import { PersistedFilterState } from '@snack-uikit/toolbar';
 export declare const mapPaginationToTableState: (value?: RequestPayloadParams["pagination"]) => PaginationState;
-export declare const mapSortToTableState: (value?: RequestPayloadParams["sort"]) => SortingState;
+export declare const mapSortToTableState: (value?: RequestPayloadParams["ordering"]) => SortingState;
 export declare const mapPaginationToRequestPayload: (value?: PaginationState | RequestPayloadParams["pagination"]) => RequestPayloadParams["pagination"];
-export declare const mapSortToRequestPayload: (value?: SortingState) => RequestPayloadParams["sort"];
+export declare const mapSortToRequestPayload: (value?: SortingState) => RequestPayloadParams["ordering"];
 /** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
 export declare const formatTableStateToRequestPayload: <T extends FiltersState>({ pagination, sorting, search, filter, }: Omit<PersistedFilterState<T>, "pagination" | "sorting"> & {
     pagination?: PaginationState | RequestPayloadParams["pagination"];

package/dist/esm/components/Table/utils/saveTableState/mappers.js

@@ -11,7 +11,7 @@ export const mapPaginationToTableState = (value) => {
 };
 export const mapSortToTableState = (value = []) => value.map(column => ({
     id: column.field,
-    desc: column.direction === 'd',
+    desc: column.direction === '-',
 }));
 export const mapPaginationToRequestPayload = (value) => {
     if (!value)
@@ -26,12 +26,12 @@ export const mapPaginationToRequestPayload = (value) => {
 };
 export const mapSortToRequestPayload = (value) => value === null || value === void 0 ? void 0 : value.map(column => ({
     field: column.id,
-    direction: (column.desc ? 'd' : 'a'),
+    direction: (column.desc ? '-' : '+'),
 }));
 /** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
 export const formatTableStateToRequestPayload = ({ pagination, sorting, search, filter, }) => formatFilterStateToRequestPayload({
     filter,
     search,
     pagination: mapPaginationToRequestPayload(pagination),
-    sorting: mapSortToRequestPayload(sorting),
+    ordering: mapSortToRequestPayload(sorting),
 });

package/dist/esm/components/Table/utils/saveTableState/validators.d.ts

@@ -1,5 +1,5 @@
 import { RequestPayloadParams } from '@cloud-ru/ft-request-payload-transform';
 import { ChipChoiceRowProps } from '@snack-uikit/chips';
 export declare const validatePaging: (value: unknown) => value is RequestPayloadParams["pagination"];
-export declare const validateSorting: (value: unknown) => value is RequestPayloadParams["sort"];
+export declare const validateSorting: (value: unknown) => value is RequestPayloadParams["ordering"];
 export declare const validateFilter: <TFilters extends Record<string, unknown>>(value: unknown, filterSettings: ChipChoiceRowProps<TFilters>["filters"]) => value is TFilters;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.27",
+  "version": "0.37.28-preview-b0a70f1c.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,7 +36,7 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/ft-request-payload-transform": "0.2.2",
+    "@cloud-ru/ft-request-payload-transform": "0.2.3-preview-cf7ab64.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
@@ -50,7 +50,7 @@
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/toggles": "0.13.23",
-    "@snack-uikit/toolbar": "0.14.14",
+    "@snack-uikit/toolbar": "0.14.15-preview-b0a70f1c.0",
     "@snack-uikit/truncate-string": "0.7.6",
     "@snack-uikit/typography": "0.8.11",
     "@snack-uikit/utils": "4.0.0",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "78bb9c9dd3a49941fa39bde71d838e9bf036e65d"
+  "gitHead": "1774f0c9df0d494748518bcfa073eb3f52392282"
 }

package/src/components/Table/Table.tsx

@@ -154,7 +154,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       (data: unknown): data is PersistedFilterState<TFilters> => {
         const dataAsSettings = data as PersistedFilterState<TFilters>;
         const isPaginationValid = validatePaging(dataAsSettings?.pagination);
-        const isSortingValid = validateSorting(dataAsSettings?.sorting);
+        const isSortingValid = validateSorting(dataAsSettings?.ordering);
         const isSearchValid = !dataAsSettings?.search || typeof dataAsSettings?.search === 'string';
         const isFilterValid = Boolean(
           columnFilters?.filters && validateFilter(dataAsSettings.filter, columnFilters.filters),
@@ -448,9 +448,14 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const { updateCellMap } = useCellAutoResizeController(table);
 
   const showToolbar = !suppressToolbar;
+  const showPagination = !infiniteLoading && !suppressPagination;
 
   return (
-    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+    <div
+      className={cn(styles.wrapper, className)}
+      data-with-toolbar={showToolbar || undefined}
+      {...extractSupportProps(rest)}
+    >
       {showToolbar && (
         <div className={styles.header}>
           <Toolbar
@@ -474,14 +479,14 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                     validateData: validatePersistedState,
                     state: {
                       pagination: mapPaginationToRequestPayload(pagination),
-                      sorting: mapSortToRequestPayload(sorting),
+                      ordering: mapSortToRequestPayload(sorting),
                       filter,
                       search: globalFilter || '',
                     },
                     onLoad: state => {
                       state.pagination && onPaginationChange(mapPaginationToTableState(state.pagination));
                       state.search && onGlobalFilterChange(state.search);
-                      state.sorting && onSortingChange(mapSortToTableState(state.sorting));
+                      state.ordering && onSortingChange(mapSortToTableState(state.ordering));
                       if (state.filter) {
                         setFilter(state.filter as TFilters);
                         setFilterVisibility(Object.keys(state.filter));
@@ -612,7 +617,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         <div className={styles.scrollStub} ref={scrollRef as RefObject<HTMLDivElement>} />
       </Scroll>
 
-      {!infiniteLoading && !suppressPagination && (
+      {showPagination && (
         <TablePagination
           table={table}
           options={paginationProp?.options}

package/src/components/Table/styles.module.scss

@@ -53,9 +53,13 @@
 
 .wrapper {
   display: grid;
-  grid-template-rows: max-content minmax(auto, 100%) max-content;
+  grid-template-rows: minmax(auto, 100%) max-content;
   max-width: 100%;
   max-height: 100%;
+
+  &[data-with-toolbar] {
+    grid-template-rows: max-content minmax(auto, 100%) max-content;
+  }
 }
 
 .scrollStub {

package/src/components/Table/utils/saveTableState/mappers.ts

@@ -17,10 +17,10 @@ export const mapPaginationToTableState = (value?: RequestPayloadParams['paginati
   };
 };
 
-export const mapSortToTableState = (value: RequestPayloadParams['sort'] = []): SortingState =>
+export const mapSortToTableState = (value: RequestPayloadParams['ordering'] = []): SortingState =>
   value.map(column => ({
     id: column.field,
-    desc: column.direction === 'd',
+    desc: column.direction === '-',
   }));
 
 export const mapPaginationToRequestPayload = (
@@ -38,10 +38,10 @@ export const mapPaginationToRequestPayload = (
   };
 };
 
-export const mapSortToRequestPayload = (value?: SortingState): RequestPayloadParams['sort'] =>
+export const mapSortToRequestPayload = (value?: SortingState): RequestPayloadParams['ordering'] =>
   value?.map(column => ({
     field: column.id,
-    direction: (column.desc ? 'd' : 'a') as SortDirection,
+    direction: (column.desc ? '-' : '+') as SortDirection,
   }));
 
 /** Вспомогательная функция для преобразования состояния таблицы к формату RequestPayloadParams */
@@ -58,5 +58,5 @@ export const formatTableStateToRequestPayload = <T extends FiltersState>({
     filter,
     search,
     pagination: mapPaginationToRequestPayload(pagination),
-    sorting: mapSortToRequestPayload(sorting),
+    ordering: mapSortToRequestPayload(sorting),
   });

package/src/components/Table/utils/saveTableState/validators.ts

@@ -5,9 +5,9 @@ export const validatePaging = (value: unknown): value is RequestPayloadParams['p
   typeof (value as RequestPayloadParams['pagination'])?.limit === 'number' &&
   typeof (value as RequestPayloadParams['pagination'])?.offset === 'number';
 
-export const validateSorting = (value: unknown): value is RequestPayloadParams['sort'] =>
+export const validateSorting = (value: unknown): value is RequestPayloadParams['ordering'] =>
   !value ||
-  (value as NonNullable<RequestPayloadParams['sort']>).every(
+  (value as NonNullable<RequestPayloadParams['ordering']>).every(
     column => typeof column?.field === 'string' && typeof column?.direction === 'string',
   );