@cloud-ru/uikit-product-mobile-table 0.11.3 → 0.11.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (100) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/components/AdaptiveServerTable/AdaptiveServerTable.d.ts +9 -0
  3. package/dist/cjs/components/AdaptiveServerTable/AdaptiveServerTable.js +52 -0
  4. package/dist/cjs/components/AdaptiveServerTable/index.d.ts +1 -0
  5. package/dist/cjs/components/AdaptiveServerTable/index.js +17 -0
  6. package/dist/cjs/components/AdaptiveTable/AdaptiveTable.d.ts +8 -0
  7. package/dist/cjs/components/AdaptiveTable/AdaptiveTable.js +28 -0
  8. package/dist/cjs/components/AdaptiveTable/index.d.ts +1 -0
  9. package/dist/cjs/components/AdaptiveTable/index.js +17 -0
  10. package/dist/cjs/components/MobileTable.d.ts +12 -0
  11. package/dist/cjs/components/MobileTable.js +116 -0
  12. package/dist/cjs/components/constants.d.ts +3 -0
  13. package/dist/cjs/components/constants.js +6 -0
  14. package/dist/cjs/components/hooks.d.ts +18 -0
  15. package/dist/cjs/components/hooks.js +34 -0
  16. package/dist/cjs/components/index.d.ts +3 -0
  17. package/dist/cjs/components/index.js +19 -0
  18. package/dist/cjs/components/styles.module.css +42 -0
  19. package/dist/cjs/components/utils.d.ts +3 -0
  20. package/dist/cjs/components/utils.js +21 -0
  21. package/dist/cjs/constants.d.ts +17 -0
  22. package/dist/cjs/constants.js +20 -0
  23. package/dist/cjs/helperComponents/RowActionsCell/RowActionsCell.d.ts +13 -0
  24. package/dist/cjs/helperComponents/RowActionsCell/RowActionsCell.js +44 -0
  25. package/dist/cjs/helperComponents/RowActionsCell/index.d.ts +1 -0
  26. package/dist/cjs/helperComponents/RowActionsCell/index.js +17 -0
  27. package/dist/cjs/helperComponents/RowActionsCell/styles.module.css +29 -0
  28. package/dist/cjs/helperComponents/TableCard/TableCard.d.ts +9 -0
  29. package/dist/cjs/helperComponents/TableCard/TableCard.js +36 -0
  30. package/dist/cjs/helperComponents/TableCard/index.d.ts +1 -0
  31. package/dist/cjs/helperComponents/TableCard/index.js +17 -0
  32. package/dist/cjs/helperComponents/TableCard/styles.module.css +79 -0
  33. package/dist/cjs/helperComponents/TableEmptyState/TableEmptyState.d.ts +12 -0
  34. package/dist/cjs/helperComponents/TableEmptyState/TableEmptyState.js +15 -0
  35. package/dist/cjs/helperComponents/TableEmptyState/hooks.d.ts +10 -0
  36. package/dist/cjs/helperComponents/TableEmptyState/hooks.js +19 -0
  37. package/dist/cjs/helperComponents/TableEmptyState/index.d.ts +2 -0
  38. package/dist/cjs/helperComponents/TableEmptyState/index.js +18 -0
  39. package/dist/cjs/helperComponents/TableEmptyState/styles.module.css +9 -0
  40. package/dist/cjs/helperComponents/TableEmptyState/types.d.ts +9 -0
  41. package/dist/cjs/helperComponents/TableEmptyState/types.js +2 -0
  42. package/dist/cjs/helperComponents/TablePagination/TablePagination.d.ts +5 -0
  43. package/dist/cjs/helperComponents/TablePagination/TablePagination.js +20 -0
  44. package/dist/cjs/helperComponents/TablePagination/index.d.ts +1 -0
  45. package/dist/cjs/helperComponents/TablePagination/index.js +17 -0
  46. package/dist/cjs/helperComponents/TablePagination/styles.module.css +6 -0
  47. package/dist/cjs/helperComponents/index.d.ts +4 -0
  48. package/dist/cjs/helperComponents/index.js +20 -0
  49. package/dist/cjs/index.d.ts +1 -0
  50. package/dist/cjs/index.js +17 -0
  51. package/dist/esm/components/AdaptiveServerTable/AdaptiveServerTable.d.ts +9 -0
  52. package/dist/esm/components/AdaptiveServerTable/AdaptiveServerTable.js +49 -0
  53. package/dist/esm/components/AdaptiveServerTable/index.d.ts +1 -0
  54. package/dist/esm/components/AdaptiveServerTable/index.js +1 -0
  55. package/dist/esm/components/AdaptiveTable/AdaptiveTable.d.ts +8 -0
  56. package/dist/esm/components/AdaptiveTable/AdaptiveTable.js +23 -0
  57. package/dist/esm/components/AdaptiveTable/index.d.ts +1 -0
  58. package/dist/esm/components/AdaptiveTable/index.js +1 -0
  59. package/dist/esm/components/MobileTable.d.ts +12 -0
  60. package/dist/esm/components/MobileTable.js +110 -0
  61. package/dist/esm/components/constants.d.ts +3 -0
  62. package/dist/esm/components/constants.js +3 -0
  63. package/dist/esm/components/hooks.d.ts +18 -0
  64. package/dist/esm/components/hooks.js +30 -0
  65. package/dist/esm/components/index.d.ts +3 -0
  66. package/dist/esm/components/index.js +3 -0
  67. package/dist/esm/components/styles.module.css +42 -0
  68. package/dist/esm/components/utils.d.ts +3 -0
  69. package/dist/esm/components/utils.js +14 -0
  70. package/dist/esm/constants.d.ts +17 -0
  71. package/dist/esm/constants.js +17 -0
  72. package/dist/esm/helperComponents/RowActionsCell/RowActionsCell.d.ts +13 -0
  73. package/dist/esm/helperComponents/RowActionsCell/RowActionsCell.js +38 -0
  74. package/dist/esm/helperComponents/RowActionsCell/index.d.ts +1 -0
  75. package/dist/esm/helperComponents/RowActionsCell/index.js +1 -0
  76. package/dist/esm/helperComponents/RowActionsCell/styles.module.css +29 -0
  77. package/dist/esm/helperComponents/TableCard/TableCard.d.ts +9 -0
  78. package/dist/esm/helperComponents/TableCard/TableCard.js +30 -0
  79. package/dist/esm/helperComponents/TableCard/index.d.ts +1 -0
  80. package/dist/esm/helperComponents/TableCard/index.js +1 -0
  81. package/dist/esm/helperComponents/TableCard/styles.module.css +79 -0
  82. package/dist/esm/helperComponents/TableEmptyState/TableEmptyState.d.ts +12 -0
  83. package/dist/esm/helperComponents/TableEmptyState/TableEmptyState.js +9 -0
  84. package/dist/esm/helperComponents/TableEmptyState/hooks.d.ts +10 -0
  85. package/dist/esm/helperComponents/TableEmptyState/hooks.js +16 -0
  86. package/dist/esm/helperComponents/TableEmptyState/index.d.ts +2 -0
  87. package/dist/esm/helperComponents/TableEmptyState/index.js +2 -0
  88. package/dist/esm/helperComponents/TableEmptyState/styles.module.css +9 -0
  89. package/dist/esm/helperComponents/TableEmptyState/types.d.ts +9 -0
  90. package/dist/esm/helperComponents/TableEmptyState/types.js +1 -0
  91. package/dist/esm/helperComponents/TablePagination/TablePagination.d.ts +5 -0
  92. package/dist/esm/helperComponents/TablePagination/TablePagination.js +14 -0
  93. package/dist/esm/helperComponents/TablePagination/index.d.ts +1 -0
  94. package/dist/esm/helperComponents/TablePagination/index.js +1 -0
  95. package/dist/esm/helperComponents/TablePagination/styles.module.css +6 -0
  96. package/dist/esm/helperComponents/index.d.ts +4 -0
  97. package/dist/esm/helperComponents/index.js +4 -0
  98. package/dist/esm/index.d.ts +1 -0
  99. package/dist/esm/index.js +1 -0
  100. package/package.json +8 -7
@@ -0,0 +1,18 @@
1
+ import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
2
+ import { TableProps } from '@snack-uikit/table';
3
+ export declare function useStateControl<TState>(control: {
4
+ initialState?: TState;
5
+ state?: TState;
6
+ onChange?(state: TState): void;
7
+ } | undefined, defaultState: TState): {
8
+ state: TState;
9
+ onStateChange: import("uncontrollable").Handler;
10
+ };
11
+ type UseLoadingTableProps<TData extends object, TFilters extends FiltersState> = {
12
+ columnDefinitions: TableProps<TData, TFilters>['columnDefinitions'];
13
+ pageSize: number;
14
+ };
15
+ export declare function useLoadingTable<TData extends object, TFilters extends FiltersState>({ pageSize, columnDefinitions, }: UseLoadingTableProps<TData, TFilters>): {
16
+ loadingTable: import("@tanstack/react-table").Table<TData>;
17
+ };
18
+ export {};
@@ -0,0 +1,30 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
3
+ import { useMemo } from 'react';
4
+ import { useUncontrolledProp } from 'uncontrollable';
5
+ import { SkeletonText } from '@snack-uikit/skeleton';
6
+ import { ROW_ACTIONS_COLUMN_ID } from '../constants';
7
+ export function useStateControl(control, defaultState) {
8
+ var _a, _b;
9
+ const [state, onStateChange] = useUncontrolledProp(control === null || control === void 0 ? void 0 : control.state, (_b = (_a = control === null || control === void 0 ? void 0 : control.state) !== null && _a !== void 0 ? _a : control === null || control === void 0 ? void 0 : control.initialState) !== null && _b !== void 0 ? _b : defaultState, (controlState) => {
10
+ var _a;
11
+ const newState = typeof controlState === 'function' ? controlState(state) : controlState;
12
+ (_a = control === null || control === void 0 ? void 0 : control.onChange) === null || _a === void 0 ? void 0 : _a.call(control, newState);
13
+ });
14
+ return {
15
+ state,
16
+ onStateChange,
17
+ };
18
+ }
19
+ export function useLoadingTable({ pageSize, columnDefinitions, }) {
20
+ const data = useMemo(() => (Array.from({ length: pageSize }).map(() => ({})) || []), [pageSize]);
21
+ const columns = useMemo(() => columnDefinitions
22
+ .filter(column => column.id !== ROW_ACTIONS_COLUMN_ID)
23
+ .map(column => (Object.assign(Object.assign({}, column), { cell: () => _jsx(SkeletonText, { lines: 1, width: '100%' }) }))), [columnDefinitions]);
24
+ const loadingTable = useReactTable({
25
+ data,
26
+ columns,
27
+ getCoreRowModel: getCoreRowModel(),
28
+ });
29
+ return { loadingTable };
30
+ }
@@ -0,0 +1,3 @@
1
+ export * from './AdaptiveTable';
2
+ export * from './AdaptiveServerTable';
3
+ export * from './MobileTable';
@@ -0,0 +1,3 @@
1
+ export * from './AdaptiveTable';
2
+ export * from './AdaptiveServerTable';
3
+ export * from './MobileTable';
@@ -0,0 +1,42 @@
1
+ .tableWrapper{
2
+ position:relative;
3
+ z-index:0;
4
+ margin-top:calc(-1 * var(--dimension-1m, 8px));
5
+ }
6
+
7
+ .header{
8
+ display:flex;
9
+ flex-direction:column;
10
+ gap:var(--dimension-1m, 8px);
11
+ position:sticky;
12
+ z-index:1;
13
+ top:0;
14
+ padding-top:var(--dimension-1m, 8px);
15
+ padding-bottom:var(--dimension-1m, 8px);
16
+ margin-bottom:calc(-1 * var(--dimension-1m, 8px));
17
+ }
18
+ .header[data-background=default]{
19
+ background-color:var(--sys-neutral-background, #eeeff3);
20
+ }
21
+ .header[data-background="1-level"]{
22
+ background-color:var(--sys-neutral-background1-level, #fdfdfd);
23
+ }
24
+ .header[data-background="2-level"]{
25
+ background-color:var(--sys-neutral-background2-level, #ffffff);
26
+ }
27
+
28
+ .table{
29
+ box-sizing:border-box;
30
+ border:var(--border-width-012m, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
31
+ border-radius:var(--dimension-050m, 4px);
32
+ background:var(--sys-neutral-background1-level, #fdfdfd);
33
+ margin-top:var(--dimension-1m, 8px);
34
+ }
35
+
36
+ .filtersWrapper{
37
+ display:flex;
38
+ flex-wrap:wrap;
39
+ gap:var(--dimension-050m, 4px);
40
+ align-items:center;
41
+ justify-content:flex-start;
42
+ }
@@ -0,0 +1,3 @@
1
+ import { FilterFn } from '@tanstack/react-table';
2
+ export declare const fuzzyFilter: FilterFn<any>;
3
+ export declare const onSearchDebounced: import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;
@@ -0,0 +1,14 @@
1
+ import { rankItem } from '@tanstack/match-sorter-utils';
2
+ import debounce from 'lodash.debounce';
3
+ import { SEARCH_DELAY } from './constants';
4
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
5
+ export const fuzzyFilter = (row, columnId, value, addMeta) => {
6
+ const itemRank = rankItem(row.getValue(columnId), value);
7
+ addMeta({
8
+ itemRank,
9
+ });
10
+ return itemRank.passed;
11
+ };
12
+ export const onSearchDebounced = debounce((newValue, onChange) => {
13
+ onChange(newValue);
14
+ }, SEARCH_DELAY);
@@ -0,0 +1,17 @@
1
+ export declare const TEST_IDS: {
2
+ headerSortIndicator: string;
3
+ headerRow: string;
4
+ headerCell: string;
5
+ bodyRow: string;
6
+ bodyCell: string;
7
+ pinnedCells: string;
8
+ rowSelect: string;
9
+ rowActions: {
10
+ droplistTrigger: string;
11
+ droplist: string;
12
+ option: string;
13
+ };
14
+ statusIndicator: string;
15
+ statusLabel: string;
16
+ };
17
+ export declare const ROW_ACTIONS_COLUMN_ID = "rowActions";
@@ -0,0 +1,17 @@
1
+ export const TEST_IDS = {
2
+ headerSortIndicator: 'table__header__sort-indicator',
3
+ headerRow: 'table__header-row',
4
+ headerCell: 'table__header-cell',
5
+ bodyRow: 'table__body-row',
6
+ bodyCell: 'table__body-cell',
7
+ pinnedCells: 'table__pinned-cells',
8
+ rowSelect: 'table__row-select',
9
+ rowActions: {
10
+ droplistTrigger: 'table__body-row__droplistTrigger',
11
+ droplist: 'table__body-row__actions-droplist',
12
+ option: 'list__base-item-option',
13
+ },
14
+ statusIndicator: 'table__status-indicator',
15
+ statusLabel: 'table__status-label',
16
+ };
17
+ export const ROW_ACTIONS_COLUMN_ID = 'rowActions';
@@ -0,0 +1,13 @@
1
+ import { CellContext } from '@tanstack/react-table';
2
+ import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
3
+ import { MobileDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
4
+ import { MobileTableProps } from '../../components';
5
+ export type ActionsGenerator<TData> = (cell: CellContext<TData, unknown>) => MobileDroplistProps['items'];
6
+ export type RowActionsColumnDefProps<TData> = {
7
+ /** Действия для строки */
8
+ actionsGenerator: ActionsGenerator<TData>;
9
+ /** Закрепление колонки справа в таблице */
10
+ pinned?: boolean;
11
+ };
12
+ /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
13
+ export declare function getRowActionsColumnDef<TData extends object, TFilters extends FiltersState>({ actionsGenerator, }: RowActionsColumnDefProps<TData>): MobileTableProps<TData, TFilters>['columnDefinitions'][0];
@@ -0,0 +1,38 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useCallback, useMemo, useState } from 'react';
3
+ import { MoreSVG } from '@sbercloud/uikit-product-icons';
4
+ import { isBaseItemProps, MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
5
+ import { ButtonFunction } from '@snack-uikit/button';
6
+ import { ROW_ACTIONS_COLUMN_ID, TEST_IDS } from '../../constants';
7
+ import styles from './styles.module.css';
8
+ function RowActionsCell({ row, actions }) {
9
+ const [dropListOpened, setDropListOpen] = useState(false);
10
+ const patchItem = useCallback((item, cb) => {
11
+ if (isBaseItemProps(item)) {
12
+ return Object.assign(Object.assign({}, item), { onClick(e) {
13
+ var _a;
14
+ (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
15
+ cb(e);
16
+ } });
17
+ }
18
+ return Object.assign(Object.assign({}, item), { items: item.items.map(i => patchItem(i, cb)) });
19
+ }, []);
20
+ const disabled = !row.getCanSelect();
21
+ const stopPropagationClick = (e) => {
22
+ e.stopPropagation();
23
+ };
24
+ const patchedItems = useMemo(() => actions.map(item => patchItem(item, () => setDropListOpen(false))), [actions, patchItem, setDropListOpen]);
25
+ return (
26
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
27
+ _jsx("div", { onClick: stopPropagationClick, className: styles.rowActionsCellWrap, "data-open": dropListOpened || undefined, children: !disabled && Boolean(actions.length) && (_jsx(MobileDroplist, { open: dropListOpened, onOpenChange: setDropListOpen, "data-test-id": TEST_IDS.rowActions.droplist, items: patchedItems, children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), "data-test-id": TEST_IDS.rowActions.droplistTrigger }) })) }));
28
+ }
29
+ /** Вспомогательная функция для создания ячейки с дополнительными действиями у строки */
30
+ export function getRowActionsColumnDef({ actionsGenerator, }) {
31
+ return {
32
+ id: ROW_ACTIONS_COLUMN_ID,
33
+ meta: {
34
+ skipOnExport: true,
35
+ },
36
+ cell: cell => _jsx(RowActionsCell, { row: cell.row, actions: actionsGenerator(cell) }),
37
+ };
38
+ }
@@ -0,0 +1 @@
1
+ export * from './RowActionsCell';
@@ -0,0 +1 @@
1
+ export * from './RowActionsCell';
@@ -0,0 +1,29 @@
1
+ .rowActionsCell{
2
+ position:relative;
3
+ border-color:inherit;
4
+ }
5
+ .rowActionsCell::after{
6
+ pointer-events:none;
7
+ content:"";
8
+ position:absolute;
9
+ top:calc(0px - var(--border-width-table, 1px));
10
+ bottom:calc(0px - var(--border-width-table, 1px));
11
+ left:0;
12
+ box-sizing:border-box;
13
+ width:100%;
14
+ border-left:var(--border-width-table, 1px) solid;
15
+ border-color:inherit;
16
+ }
17
+
18
+ .rowActionsCellWrap{
19
+ --offset:0px;
20
+ cursor:pointer;
21
+ box-sizing:border-box;
22
+ width:100%;
23
+ height:100%;
24
+ padding-left:var(--space-table-cell-action-padding, 4px);
25
+ padding-right:var(--space-table-cell-action-padding, 4px);
26
+ display:flex;
27
+ align-items:center;
28
+ justify-content:center;
29
+ }
@@ -0,0 +1,9 @@
1
+ import { Row, Table } from '@tanstack/react-table';
2
+ type TableCardProps<TData extends object> = {
3
+ headlineId?: string;
4
+ row: Row<TData>;
5
+ table: Table<TData>;
6
+ selection: 'multiple' | 'single' | 'none';
7
+ };
8
+ export declare function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
9
+ export {};
@@ -0,0 +1,30 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { flexRender } from '@tanstack/react-table';
3
+ import { useCallback } from 'react';
4
+ import { Checkbox, Radio } from '@snack-uikit/toggles';
5
+ import { ROW_ACTIONS_COLUMN_ID } from '../../constants';
6
+ import styles from './styles.module.css';
7
+ export function TableCard({ headlineId, table, row, selection }) {
8
+ const headerGroups = table.getHeaderGroups();
9
+ const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
10
+ const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
11
+ const actionsCell = row._getAllCellsByColumnId()[ROW_ACTIONS_COLUMN_ID];
12
+ const actionsColumn = table.getFlatHeaders().find(header => header.id === ROW_ACTIONS_COLUMN_ID);
13
+ const isSelected = row.getIsSelected();
14
+ const handleSelection = useCallback(() => {
15
+ if (selection === 'single')
16
+ row.toggleSelected(true);
17
+ if (selection === 'multiple')
18
+ row.toggleSelected(!isSelected);
19
+ }, [isSelected, row, selection]);
20
+ return (
21
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
22
+ _jsxs("div", { className: styles.card, "data-is-selected": isSelected !== null && isSelected !== void 0 ? isSelected : undefined, "data-selection-mode": selection, onClick: handleSelection, children: [_jsxs("div", { className: styles.content, children: [headerCell && headerColumn && (_jsx("div", { className: styles.headline, children: flexRender(headerColumn.column.columnDef.cell, headerCell.getContext()) })), _jsx("div", { className: styles.body, children: headerGroups.map(group => group.headers.map((header, index) => {
23
+ if ([headlineId, ROW_ACTIONS_COLUMN_ID].includes(header.id)) {
24
+ return null;
25
+ }
26
+ const column = header.column.columnDef;
27
+ const cell = row._getAllCellsByColumnId()[header.column.id];
28
+ return (_jsxs("div", { className: styles.cardRow, children: [_jsx("div", { className: styles.cardRowHeader, children: flexRender(column.header, header.getContext()) }), _jsx("div", { className: styles.cardRowContent, children: flexRender(column.cell, cell.getContext()) })] }, header.id || index));
29
+ })) })] }), selection === 'single' && _jsx(Radio, { size: 'm', className: styles.selectionController, checked: isSelected }), selection === 'multiple' && _jsx(Checkbox, { size: 'm', className: styles.selectionController, checked: isSelected }), actionsCell && actionsColumn && (_jsx("div", { className: styles.button, children: flexRender(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
30
+ }
@@ -0,0 +1 @@
1
+ export * from './TableCard';
@@ -0,0 +1 @@
1
+ export * from './TableCard';
@@ -0,0 +1,79 @@
1
+ .selectionController{
2
+ position:absolute;
3
+ bottom:var(--dimension-2m, 16px);
4
+ right:var(--dimension-2m, 16px);
5
+ }
6
+
7
+ .content{
8
+ position:relative;
9
+ }
10
+
11
+ .card{
12
+ position:relative;
13
+ box-sizing:border-box;
14
+ padding:var(--dimension-2m, 16px);
15
+ display:flex;
16
+ flex-direction:column;
17
+ gap:var(--dimension-2m, 16px);
18
+ }
19
+ .card:not(:last-child){
20
+ border-bottom:var(--border-width-general-xs, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
21
+ }
22
+ .card::before{
23
+ content:"";
24
+ position:absolute;
25
+ top:0;
26
+ right:0;
27
+ bottom:0;
28
+ left:0;
29
+ opacity:0;
30
+ background-color:var(--sys-primary-background1-level, #f5fdf8);
31
+ }
32
+ .card[data-selection-mode=multiple][data-is-selected=true]::before, .card[data-selection-mode=single][data-is-selected=true]::before{
33
+ opacity:1;
34
+ }
35
+
36
+ .button{
37
+ position:absolute;
38
+ top:var(--dimension-1m, 8px);
39
+ right:var(--dimension-1m, 8px);
40
+ }
41
+
42
+ .headline{
43
+ font-family:var(--sans-title-m-font-family, SB Sans Interface);
44
+ font-weight:var(--sans-title-m-font-weight, Semibold);
45
+ line-height:var(--sans-title-m-line-height, 24px);
46
+ font-size:var(--sans-title-m-font-size, 16px);
47
+ letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
48
+ paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
49
+ color:var(--sys-neutral-text-main, #41424e);
50
+ padding-right:var(--dimension-4m, 32px);
51
+ }
52
+
53
+ .body{
54
+ display:flex;
55
+ flex-direction:column;
56
+ gap:var(--dimension-2m, 16px);
57
+ }
58
+
59
+ .cardRow{
60
+ font-family:var(--sans-body-m-font-family, SB Sans Interface);
61
+ font-weight:var(--sans-body-m-font-weight, Regular);
62
+ line-height:var(--sans-body-m-line-height, 20px);
63
+ font-size:var(--sans-body-m-font-size, 14px);
64
+ letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
65
+ paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
66
+ display:flex;
67
+ flex-direction:column;
68
+ gap:var(--dimension-050m, 4px);
69
+ }
70
+
71
+ .cardRowHeader{
72
+ color:var(--sys-neutral-text-light, #8b8e9b);
73
+ word-break:break-word;
74
+ }
75
+
76
+ .cardRowContent{
77
+ color:var(--sys-neutral-text-main, #41424e);
78
+ word-break:break-word;
79
+ }
@@ -0,0 +1,12 @@
1
+ import { EmptyStateProps } from './types';
2
+ export type TableEmptyState = {
3
+ emptyStates: {
4
+ noDataState: EmptyStateProps;
5
+ noResultsState: EmptyStateProps;
6
+ errorDataState: EmptyStateProps;
7
+ };
8
+ dataError?: boolean;
9
+ dataFiltered?: boolean;
10
+ tableRowsLength: number;
11
+ };
12
+ export declare function TableEmptyState({ dataError, dataFiltered, tableRowsLength, emptyStates }: TableEmptyState): import("react/jsx-runtime").JSX.Element | null;
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { InfoBlock } from '@snack-uikit/info-block';
3
+ import styles from './styles.module.css';
4
+ export function TableEmptyState({ dataError, dataFiltered, tableRowsLength, emptyStates }) {
5
+ if (tableRowsLength) {
6
+ return null;
7
+ }
8
+ return (_jsxs("div", { className: styles.tableEmptyStateWrapper, children: [dataError && _jsx(InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 'm', align: 'vertical' })), !dataError && dataFiltered && _jsx(InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 'm', align: 'vertical' })), !dataError && !dataFiltered && _jsx(InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 'm', align: 'vertical' }))] }));
9
+ }
@@ -0,0 +1,10 @@
1
+ import { EmptyStateProps } from './types';
2
+ export declare function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }: {
3
+ noDataState?: EmptyStateProps;
4
+ noResultsState?: EmptyStateProps;
5
+ errorDataState?: EmptyStateProps;
6
+ }): {
7
+ noDataState: EmptyStateProps;
8
+ noResultsState: EmptyStateProps;
9
+ errorDataState: EmptyStateProps;
10
+ };
@@ -0,0 +1,16 @@
1
+ import { useMemo } from 'react';
2
+ import { CrossSVG, SearchSVG } from '@sbercloud/uikit-product-icons';
3
+ import { useLocale } from '@sbercloud/uikit-product-locale';
4
+ export function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }) {
5
+ const { t } = useLocale('Table');
6
+ return useMemo(() => {
7
+ const noDataState = Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true }, title: t('noData.title') }, noDataStateProp);
8
+ const noResultsState = Object.assign({ icon: { icon: SearchSVG, appearance: 'neutral', decor: true }, title: t('noResults.title'), description: t('noResults.description') }, noResultsStateProp);
9
+ const errorDataState = Object.assign({ icon: { icon: CrossSVG, appearance: 'red', decor: true }, title: t('errorData.title'), description: t('errorData.description') }, errorDataStateProp);
10
+ return {
11
+ noDataState,
12
+ noResultsState,
13
+ errorDataState,
14
+ };
15
+ }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
16
+ }
@@ -0,0 +1,2 @@
1
+ export * from './TableEmptyState';
2
+ export * from './hooks';
@@ -0,0 +1,2 @@
1
+ export * from './TableEmptyState';
2
+ export * from './hooks';
@@ -0,0 +1,9 @@
1
+ .tableEmptyStateWrapper{
2
+ display:flex;
3
+ flex-direction:column;
4
+ align-items:center;
5
+ justify-content:center;
6
+ box-sizing:border-box;
7
+ height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px));
8
+ padding:var(--dimension-3m, 24px);
9
+ }
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
3
+ export type EmptyStateProps = {
4
+ title?: string;
5
+ description?: string;
6
+ icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
7
+ footer?: ReactNode;
8
+ className?: string;
9
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,5 @@
1
+ import { Table } from '@tanstack/react-table';
2
+ export type TablePaginationProps<TData> = {
3
+ table: Table<TData>;
4
+ };
5
+ export declare function TablePagination<TData>({ table }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element | null;
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useCallback } from 'react';
3
+ import { Pagination } from '@snack-uikit/pagination';
4
+ import styles from './styles.module.css';
5
+ export function TablePagination({ table }) {
6
+ const handlePaginationOnChange = useCallback((pageIndex) => {
7
+ table.setPageIndex(pageIndex - 1);
8
+ }, [table]);
9
+ const tablePaginationState = table.getState().pagination;
10
+ if (table.getPageCount() <= 1) {
11
+ return null;
12
+ }
13
+ return (_jsx("div", { className: styles.pagination, children: table.getPageCount() > 1 && (_jsx(Pagination, { maxLength: 6, total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, size: 's' })) }));
14
+ }
@@ -0,0 +1 @@
1
+ export * from './TablePagination';
@@ -0,0 +1 @@
1
+ export * from './TablePagination';
@@ -0,0 +1,6 @@
1
+ .pagination{
2
+ display:flex;
3
+ align-items:center;
4
+ justify-content:center;
5
+ padding-top:var(--dimension-1m, 8px);
6
+ }
@@ -0,0 +1,4 @@
1
+ export * from './RowActionsCell';
2
+ export * from './TableCard';
3
+ export * from './TablePagination';
4
+ export * from './TableEmptyState';
@@ -0,0 +1,4 @@
1
+ export * from './RowActionsCell';
2
+ export * from './TableCard';
3
+ export * from './TablePagination';
4
+ export * from './TableEmptyState';
@@ -0,0 +1 @@
1
+ export * from './components';
@@ -0,0 +1 @@
1
+ export * from './components';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloud-ru/uikit-product-mobile-table",
3
3
  "title": "Mobile Table",
4
- "version": "0.11.3",
4
+ "version": "0.11.5",
5
5
  "sideEffects": [
6
6
  "*.css",
7
7
  "*.woff",
@@ -30,17 +30,18 @@
30
30
  "name": "Akhremenko Grigorii",
31
31
  "url": "https://github.com/AGrigorii"
32
32
  },
33
+ "contributors": [],
33
34
  "license": "Apache-2.0",
34
35
  "publishConfig": {
35
36
  "access": "public"
36
37
  },
37
38
  "scripts": {},
38
39
  "dependencies": {
39
- "@cloud-ru/uikit-product-icons": "15.1.1",
40
- "@cloud-ru/uikit-product-mobile-chips": "0.8.36",
41
- "@cloud-ru/uikit-product-mobile-dropdown": "0.9.21",
42
- "@cloud-ru/uikit-product-mobile-toolbar": "0.4.3",
43
- "@cloud-ru/uikit-product-utils": "7.0.0",
40
+ "@cloud-ru/uikit-product-icons": "15.1.3",
41
+ "@cloud-ru/uikit-product-mobile-chips": "0.8.38",
42
+ "@cloud-ru/uikit-product-mobile-dropdown": "0.9.23",
43
+ "@cloud-ru/uikit-product-mobile-toolbar": "0.4.5",
44
+ "@cloud-ru/uikit-product-utils": "7.0.2",
44
45
  "@snack-uikit/button": "0.19.15",
45
46
  "@snack-uikit/icon-predefined": "0.7.9",
46
47
  "@snack-uikit/info-block": "0.6.31",
@@ -60,5 +61,5 @@
60
61
  "devDependencies": {
61
62
  "@types/lodash.debounce": "4.0.9"
62
63
  },
63
- "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
64
+ "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
64
65
  }