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

package/dist/cjs/helperComponents/TableCard/TableCard.d.ts

@@ -0,0 +1,9 @@
+import { Row, Table } from '@tanstack/react-table';
+type TableCardProps<TData extends object> = {
+    headlineId?: string;
+    row: Row<TData>;
+    table: Table<TData>;
+    selection: 'multiple' | 'single' | 'none';
+};
+export declare function TableCard<TData extends object>({ headlineId, table, row, selection }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/helperComponents/TableCard/TableCard.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCard = TableCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = require("react");
+const toggles_1 = require("@snack-uikit/toggles");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TableCard({ headlineId, table, row, selection }) {
+    const headerGroups = table.getHeaderGroups();
+    const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
+    const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
+    const actionsCell = row._getAllCellsByColumnId()[constants_1.ROW_ACTIONS_COLUMN_ID];
+    const actionsColumn = table.getFlatHeaders().find(header => header.id === constants_1.ROW_ACTIONS_COLUMN_ID);
+    const isSelected = row.getIsSelected();
+    const handleSelection = (0, react_1.useCallback)(() => {
+        if (selection === 'single')
+            row.toggleSelected(true);
+        if (selection === 'multiple')
+            row.toggleSelected(!isSelected);
+    }, [isSelected, row, selection]);
+    return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.card, "data-is-selected": isSelected !== null && isSelected !== void 0 ? isSelected : undefined, "data-selection-mode": selection, onClick: handleSelection, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [headerCell && headerColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.headline, children: (0, react_table_1.flexRender)(headerColumn.column.columnDef.cell, headerCell.getContext()) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.body, children: headerGroups.map(group => group.headers.map((header, index) => {
+                            if ([headlineId, constants_1.ROW_ACTIONS_COLUMN_ID].includes(header.id)) {
+                                return null;
+                            }
+                            const column = header.column.columnDef;
+                            const cell = row._getAllCellsByColumnId()[header.column.id];
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardRow, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowHeader, children: (0, react_table_1.flexRender)(column.header, header.getContext()) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowContent, children: (0, react_table_1.flexRender)(column.cell, cell.getContext()) })] }, header.id || index));
+                        })) })] }), selection === 'single' && (0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected }), selection === 'multiple' && (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected }), actionsCell && actionsColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.button, children: (0, react_table_1.flexRender)(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
+}

package/dist/cjs/helperComponents/TableCard/index.d.ts

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

package/dist/cjs/helperComponents/TableCard/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableCard"), exports);

package/dist/cjs/helperComponents/TableCard/styles.module.css

@@ -0,0 +1,79 @@
+.selectionController{
+  position:absolute;
+  bottom:var(--dimension-2m, 16px);
+  right:var(--dimension-2m, 16px);
+}
+
+.content{
+  position:relative;
+}
+
+.card{
+  position:relative;
+  box-sizing:border-box;
+  padding:var(--dimension-2m, 16px);
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+.card:not(:last-child){
+  border-bottom:var(--border-width-general-xs, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.card::before{
+  content:"";
+  position:absolute;
+  top:0;
+  right:0;
+  bottom:0;
+  left:0;
+  opacity:0;
+  background-color:var(--sys-primary-background1-level, #f5fdf8);
+}
+.card[data-selection-mode=multiple][data-is-selected=true]::before, .card[data-selection-mode=single][data-is-selected=true]::before{
+  opacity:1;
+}
+
+.button{
+  position:absolute;
+  top:var(--dimension-1m, 8px);
+  right:var(--dimension-1m, 8px);
+}
+
+.headline{
+  font-family:var(--sans-title-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-title-m-font-weight, Semibold);
+  line-height:var(--sans-title-m-line-height, 24px);
+  font-size:var(--sans-title-m-font-size, 16px);
+  letter-spacing:var(--sans-title-m-letter-spacing, 0.15px);
+  paragraph-spacing:var(--sans-title-m-paragraph-spacing, 8.8px);
+  color:var(--sys-neutral-text-main, #41424e);
+  padding-right:var(--dimension-4m, 32px);
+}
+
+.body{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.cardRow{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-050m, 4px);
+}
+
+.cardRowHeader{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  word-break:break-word;
+}
+
+.cardRowContent{
+  color:var(--sys-neutral-text-main, #41424e);
+  word-break:break-word;
+}

package/dist/cjs/helperComponents/TableEmptyState/TableEmptyState.d.ts

@@ -0,0 +1,12 @@
+import { EmptyStateProps } from './types';
+export type TableEmptyState = {
+    emptyStates: {
+        noDataState: EmptyStateProps;
+        noResultsState: EmptyStateProps;
+        errorDataState: EmptyStateProps;
+    };
+    dataError?: boolean;
+    dataFiltered?: boolean;
+    tableRowsLength: number;
+};
+export declare function TableEmptyState({ dataError, dataFiltered, tableRowsLength, emptyStates }: TableEmptyState): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/TableEmptyState/TableEmptyState.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableEmptyState = TableEmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const info_block_1 = require("@snack-uikit/info-block");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TableEmptyState({ dataError, dataFiltered, tableRowsLength, emptyStates }) {
+    if (tableRowsLength) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tableEmptyStateWrapper, children: [dataError && (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.errorDataState, { size: 'm', align: 'vertical' })), !dataError && dataFiltered && (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.noResultsState, { size: 'm', align: 'vertical' })), !dataError && !dataFiltered && (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, Object.assign({}, emptyStates.noDataState, { size: 'm', align: 'vertical' }))] }));
+}

package/dist/cjs/helperComponents/TableEmptyState/hooks.d.ts

@@ -0,0 +1,10 @@
+import { EmptyStateProps } from './types';
+export declare function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }: {
+    noDataState?: EmptyStateProps;
+    noResultsState?: EmptyStateProps;
+    errorDataState?: EmptyStateProps;
+}): {
+    noDataState: EmptyStateProps;
+    noResultsState: EmptyStateProps;
+    errorDataState: EmptyStateProps;
+};

package/dist/cjs/helperComponents/TableEmptyState/hooks.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEmptyState = useEmptyState;
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+function useEmptyState({ noDataState: noDataStateProp, noResultsState: noResultsStateProp, errorDataState: errorDataStateProp, }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Table');
+    return (0, react_1.useMemo)(() => {
+        const noDataState = Object.assign({ icon: { icon: uikit_product_icons_1.SearchSVG, appearance: 'neutral', decor: true }, title: t('noData.title') }, noDataStateProp);
+        const noResultsState = Object.assign({ icon: { icon: uikit_product_icons_1.SearchSVG, appearance: 'neutral', decor: true }, title: t('noResults.title'), description: t('noResults.description') }, noResultsStateProp);
+        const errorDataState = Object.assign({ icon: { icon: uikit_product_icons_1.CrossSVG, appearance: 'red', decor: true }, title: t('errorData.title'), description: t('errorData.description') }, errorDataStateProp);
+        return {
+            noDataState,
+            noResultsState,
+            errorDataState,
+        };
+    }, [errorDataStateProp, noDataStateProp, noResultsStateProp, t]);
+}

package/dist/cjs/helperComponents/TableEmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TableEmptyState';
+export * from './hooks';

package/dist/cjs/helperComponents/TableEmptyState/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableEmptyState"), exports);
+__exportStar(require("./hooks"), exports);

package/dist/cjs/helperComponents/TableEmptyState/styles.module.css

@@ -0,0 +1,9 @@
+.tableEmptyStateWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px));
+  padding:var(--dimension-3m, 24px);
+}

package/dist/cjs/helperComponents/TableEmptyState/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+export type EmptyStateProps = {
+    title?: string;
+    description?: string;
+    icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
+    footer?: ReactNode;
+    className?: string;
+};

package/dist/cjs/helperComponents/TableEmptyState/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/helperComponents/TablePagination/TablePagination.d.ts

@@ -0,0 +1,5 @@
+import { Table } from '@tanstack/react-table';
+export type TablePaginationProps<TData> = {
+    table: Table<TData>;
+};
+export declare function TablePagination<TData>({ table }: TablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/TablePagination/TablePagination.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TablePagination = TablePagination;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const pagination_1 = require("@snack-uikit/pagination");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function TablePagination({ table }) {
+    const handlePaginationOnChange = (0, react_1.useCallback)((pageIndex) => {
+        table.setPageIndex(pageIndex - 1);
+    }, [table]);
+    const tablePaginationState = table.getState().pagination;
+    if (table.getPageCount() <= 1) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.pagination, children: table.getPageCount() > 1 && ((0, jsx_runtime_1.jsx)(pagination_1.Pagination, { maxLength: 6, total: table.getPageCount(), page: tablePaginationState.pageIndex + 1, onChange: handlePaginationOnChange, size: 's' })) }));
+}

package/dist/cjs/helperComponents/TablePagination/index.d.ts

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

package/dist/cjs/helperComponents/TablePagination/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TablePagination"), exports);

package/dist/cjs/helperComponents/TablePagination/styles.module.css

@@ -0,0 +1,6 @@
+.pagination{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding-top:var(--dimension-1m, 8px);
+}

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

@@ -0,0 +1,4 @@
+export * from './RowActionsCell';
+export * from './TableCard';
+export * from './TablePagination';
+export * from './TableEmptyState';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RowActionsCell"), exports);
+__exportStar(require("./TableCard"), exports);
+__exportStar(require("./TablePagination"), exports);
+__exportStar(require("./TableEmptyState"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/esm/components/AdaptiveServerTable/AdaptiveServerTable.d.ts

@@ -0,0 +1,9 @@
+import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ServerTableProps } from '@snack-uikit/table';
+import { MobileTableProps } from '../MobileTable';
+export type AdaptiveServerTableProps<TData extends object, TFilters extends FiltersState> = Omit<ServerTableProps<TData, TFilters>, 'columnsSettings'> & Omit<MobileTableProps<TData, TFilters>, 'data'> & {
+    columnsSettings?: ServerTableProps<TData, TFilters>['columnsSettings'];
+};
+export declare function AdaptiveServerTable<TData extends object, TFilters extends FiltersState>({ layoutType, ...props }: WithLayoutType<AdaptiveServerTableProps<TData, TFilters>>): import("react/jsx-runtime").JSX.Element;
+export type { ServerTableProps, FiltersState };

package/dist/esm/components/AdaptiveServerTable/AdaptiveServerTable.js

@@ -0,0 +1,49 @@
+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 { useCallback, useEffect, useMemo, useState } from 'react';
+import { ServerTable as DesktopTable } from '@snack-uikit/table';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGINATION_LIMIT } from '../constants';
+import { useStateControl } from '../hooks';
+import { MobileTable } from '../MobileTable';
+import { onSearchDebounced } from '../utils';
+export function AdaptiveServerTable(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    const { onChangePage, search: searchProp, pagination, items, total = DEFAULT_PAGINATION_LIMIT, limit = DEFAULT_PAGINATION_LIMIT, offset = 0 } = props, rest = __rest(props, ["onChangePage", "search", "pagination", "items", "total", "limit", "offset"]);
+    const { state: search, onStateChange: setSearch } = useStateControl(searchProp, '');
+    const [tempSearch, setTempSearch] = useState(search || '');
+    useEffect(() => {
+        var _a;
+        if ((searchProp === null || searchProp === void 0 ? void 0 : searchProp.state) !== tempSearch) {
+            setTempSearch((_a = searchProp === null || searchProp === void 0 ? void 0 : searchProp.state) !== null && _a !== void 0 ? _a : '');
+        }
+        // Needs update only when prop changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchProp === null || searchProp === void 0 ? void 0 : searchProp.state]);
+    const handleSearch = useCallback((newValue) => {
+        setTempSearch(newValue);
+        onSearchDebounced(newValue.trim(), setSearch);
+    }, [setSearch]);
+    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 isMobile ? (_jsx(MobileTable, Object.assign({}, rest, { headerBackground: '1-level', data: items || [], pageCount: pageCount, pagination: Object.assign(Object.assign({}, pagination), { state: {
+                pageIndex,
+                pageSize: DEFAULT_PAGE_SIZE,
+            }, onChange: handlePageChange }), search: {
+            state: tempSearch,
+            onChange: handleSearch,
+            loading: searchProp === null || searchProp === void 0 ? void 0 : searchProp.loading,
+            placeholder: searchProp === null || searchProp === void 0 ? void 0 : searchProp.placeholder,
+        }, manualPagination: true, manualFiltering: true, manualSorting: true }))) : (_jsx(DesktopTable, Object.assign({}, props)));
+}

package/dist/esm/components/AdaptiveServerTable/index.d.ts

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

package/dist/esm/components/AdaptiveServerTable/index.js

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

package/dist/esm/components/AdaptiveTable/AdaptiveTable.d.ts

@@ -0,0 +1,8 @@
+import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { CellContext, ColumnDefinition, Table as DesktopTable, TableProps } from '@snack-uikit/table';
+import { MobileTableProps } from '../MobileTable';
+export type AdaptiveTableProps<TData extends object, TFilters extends FiltersState> = TableProps<TData, TFilters> & MobileTableProps<TData, TFilters>;
+export declare function AdaptiveTable<TState extends object, TFilters extends FiltersState>({ layoutType, ...props }: WithLayoutType<AdaptiveTableProps<TState, TFilters>>): import("react/jsx-runtime").JSX.Element;
+export declare const useAdaptiveGetRowActionsColumnDef: ({ layoutType }: WithLayoutType) => typeof DesktopTable.getRowActionsColumnDef;
+export type { TableProps, ColumnDefinition, CellContext };

package/dist/esm/components/AdaptiveTable/AdaptiveTable.js

@@ -0,0 +1,23 @@
+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 { Table as DesktopTable, Table } from '@snack-uikit/table';
+import { MobileTable } from '../MobileTable';
+export function AdaptiveTable(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? _jsx(MobileTable, Object.assign({ headerBackground: '1-level' }, props)) : _jsx(Table, Object.assign({}, props));
+}
+export const useAdaptiveGetRowActionsColumnDef = ({ layoutType }) => {
+    const isMobile = layoutType === 'mobile';
+    return (isMobile ? MobileTable.getRowActionsColumnDef : DesktopTable.getRowActionsColumnDef);
+};

package/dist/esm/components/AdaptiveTable/index.d.ts

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

package/dist/esm/components/AdaptiveTable/index.js

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

package/dist/esm/components/MobileTable.d.ts

@@ -0,0 +1,12 @@
+import { FiltersState, MobileChipChoiceRowProps } from '@sbercloud/uikit-product-mobile-chips';
+import { WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { TableProps } from '@snack-uikit/table';
+export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'toolbarAfter' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions'> & WithSupportProps<{
+    headlineId?: string;
+    headerBackground?: 'default' | '1-level' | '2-level';
+    columnFilters?: MobileChipChoiceRowProps<FiltersState>;
+}>;
+export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MobileTable {
+    var getRowActionsColumnDef: typeof import("../helperComponents").getRowActionsColumnDef;
+}

package/dist/esm/components/MobileTable.js

@@ -0,0 +1,110 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import cn from 'classnames';
+import { useCallback, useMemo } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileToolbar } from '@sbercloud/uikit-product-mobile-toolbar';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { SkeletonContextProvider } from '@snack-uikit/skeleton';
+import { getRowActionsColumnDef, TableCard, TableEmptyState, TablePagination, useEmptyState, } from '../helperComponents';
+import { DEFAULT_PAGE_SIZE } from './constants';
+import { useLoadingTable, useStateControl } from './hooks';
+import styles from './styles.module.css';
+import { fuzzyFilter } from './utils';
+export function MobileTable(_a) {
+    var { data, columnDefinitions, headlineId, suppressPagination = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "getRowId", "rowSelection", "bulkActions"]);
+    const defaultPaginationState = useMemo(() => ({ pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }), []);
+    const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
+    const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
+    const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
+    const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
+    const enableRowSelection = useCallback((row) => {
+        const parent = row.getParentRow();
+        const isParentSelected = parent ? parent.getCanSelect() : true;
+        let isCurrentRowSelected = true;
+        if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
+            isCurrentRowSelected =
+                typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
+        }
+        return isParentSelected && isCurrentRowSelected;
+    }, [rowSelectionProp]);
+    const table = useReactTable({
+        data,
+        columns: columnDefinitions,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        state: { pagination, globalFilter, sorting, rowSelection },
+        pageCount,
+        onPaginationChange,
+        onSortingChange,
+        globalFilterFn: enableFuzzySearch ? fuzzyFilter : 'includesString',
+        enableFilters: true,
+        manualSorting,
+        manualPagination,
+        manualFiltering,
+        getRowId,
+        onRowSelectionChange,
+        enableGrouping: true,
+        enableRowSelection,
+        enableMultiRowSelection: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow),
+        enableSubRowSelection: true,
+    });
+    const { loadingTable } = useLoadingTable({
+        pageSize: DEFAULT_PAGE_SIZE,
+        columnDefinitions,
+    });
+    const tableRows = table.getRowModel().rows;
+    const loadingTableRows = loadingTable.getRowModel().rows;
+    const { t } = useLocale('Table');
+    const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
+    const handleOnRefresh = useCallback(() => {
+        table.resetRowSelection();
+        onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
+    }, [onRefresh, table]);
+    const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
+    const bulkActions = useMemo(() => enableSelection
+        ? bulkActionsProp === null || bulkActionsProp === void 0 ? void 0 : bulkActionsProp.map(action => (Object.assign(Object.assign({}, action), { onClick: () => { var _a; return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection); } })))
+        : undefined, [bulkActionsProp, enableSelection, table]);
+    const handleOnToolbarCheck = useCallback(() => {
+        if (!loading && table.getTopRows().length) {
+            const centerRows = table.getCenterRows();
+            const isSomeRowsSelected = table.getIsSomePageRowsSelected();
+            const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
+            if (isAllCenterRowsSelected) {
+                table.resetRowSelection();
+                return;
+            }
+            centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
+            return;
+        }
+        if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
+            table.toggleAllPageRowsSelected();
+            return;
+        }
+    }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
+    const selectionMode = (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)
+        ? 'multiple'
+        : 'single';
+    return (_jsxs("div", Object.assign({ className: cn(styles.tableWrapper, className) }, extractSupportProps(rest), { children: [(!suppressToolbar || columnFilters) && (_jsx("div", { className: styles.header, "data-background": headerBackground, children: _jsx(MobileToolbar, { search: suppressSearch
+                        ? undefined
+                        : {
+                            value: globalFilter,
+                            onChange: onGlobalFilterChange,
+                            loading: search === null || search === void 0 ? void 0 : search.loading,
+                            placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
+                        }, onRefresh: onRefresh ? handleOnRefresh : undefined, outline: true, filterRow: columnFilters, after: toolbarAfter, moreActions: moreActions, bulkActions: bulkActions, selectedCount: table.getSelectedRowModel().rows.length, selectionMode: selectionMode, onCheck: enableSelection ? handleOnToolbarCheck : undefined, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected() }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
+}
+MobileTable.getRowActionsColumnDef = getRowActionsColumnDef;

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

@@ -0,0 +1,3 @@
+export declare const DEFAULT_PAGE_SIZE = 5;
+export declare const SEARCH_DELAY = 500;
+export declare const DEFAULT_PAGINATION_LIMIT = 10;

package/dist/esm/components/constants.js

@@ -0,0 +1,3 @@
+export const DEFAULT_PAGE_SIZE = 5;
+export const SEARCH_DELAY = 500;
+export const DEFAULT_PAGINATION_LIMIT = 10;