ydb-embedded-ui 4.33.0 → 5.1.0

package/dist/components/VirtualTable/TableHead.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ASCENDING, DEFAULT_SORT_ORDER, DEFAULT_TABLE_ROW_HEIGHT, DESCENDING } from './constants';
+import { b } from './shared';
+const COLUMN_NAME_HTML_ATTRIBUTE = 'data-columnname';
+// Icon similar to original DataTable icons to keep the same tables across diferent pages and tabs
+const SortIcon = ({ order }) => {
+    return (_jsx("svg", Object.assign({ className: b('sort-icon', { desc: order === DESCENDING }), viewBox: "0 0 10 6", width: "10", height: "6" }, { children: _jsx("path", { fill: "currentColor", d: "M0 5h10l-5 -5z" }) })));
+};
+const ColumnSortIcon = ({ sortOrder, sortable, defaultSortOrder }) => {
+    if (sortable) {
+        return (_jsx("span", Object.assign({ className: b('sort-icon-container', { shadow: !sortOrder }) }, { children: _jsx(SortIcon, { order: sortOrder || defaultSortOrder }) })));
+    }
+    else {
+        return null;
+    }
+};
+export const TableHeadCell = ({ column, sortOrder, defaultSortOrder, onSort, rowHeight, onCellMount, onCellUnMount, }) => {
+    var _a;
+    const cellWrapperRef = useRef(null);
+    useEffect(() => {
+        const cellWrapper = cellWrapperRef.current;
+        if (cellWrapper) {
+            onCellMount === null || onCellMount === void 0 ? void 0 : onCellMount(cellWrapper);
+        }
+        return () => {
+            if (cellWrapper) {
+                onCellUnMount === null || onCellUnMount === void 0 ? void 0 : onCellUnMount(cellWrapper);
+            }
+        };
+    }, [onCellMount, onCellUnMount]);
+    const content = (_a = column.header) !== null && _a !== void 0 ? _a : column.name;
+    return (_jsx("th", { children: _jsx("div", Object.assign({ ref: cellWrapperRef, className: b('head-cell-wrapper', {
+                resizeable: column.resizeable,
+            }), style: {
+                height: `${rowHeight}px`,
+                width: `${column.width}px`,
+            } }, {
+            [COLUMN_NAME_HTML_ATTRIBUTE]: column.name,
+        }, { children: _jsxs("div", Object.assign({ className: b('head-cell', { align: column.align, sortable: column.sortable }, column.className), onClick: () => {
+                    if (column.sortable) {
+                        onSort === null || onSort === void 0 ? void 0 : onSort(column.name);
+                    }
+                } }, { children: [_jsx("div", Object.assign({ className: b('head-cell-content') }, { children: content })), _jsx(ColumnSortIcon, { sortOrder: sortOrder, sortable: column.sortable, defaultSortOrder: defaultSortOrder })] })) })) }));
+};
+export const TableHead = ({ columns, onSort, onColumnsResize, defaultSortOrder = DEFAULT_SORT_ORDER, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, }) => {
+    const [sortParams, setSortParams] = useState({});
+    const isTableResizeable = Boolean(onColumnsResize);
+    const resizeObserver = useMemo(() => {
+        if (!isTableResizeable) {
+            return undefined;
+        }
+        return new ResizeObserver((entries) => {
+            const columnsWidth = {};
+            entries.forEach((entry) => {
+                var _a;
+                // @ts-ignore ignore custrom property usage
+                const id = (_a = entry.target.attributes[COLUMN_NAME_HTML_ATTRIBUTE]) === null || _a === void 0 ? void 0 : _a.value;
+                columnsWidth[id] = entry.contentRect.width;
+            });
+            onColumnsResize === null || onColumnsResize === void 0 ? void 0 : onColumnsResize(columnsWidth);
+        });
+    }, [onColumnsResize, isTableResizeable]);
+    const handleCellMount = useCallback((element) => {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(element);
+    }, [resizeObserver]);
+    const handleCellUnMount = useCallback((element) => {
+        resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve(element);
+    }, [resizeObserver]);
+    const handleSort = (columnId) => {
+        let newSortParams = {};
+        // Order is changed in following order:
+        // 1. Inactive Sort Order - gray icon of default order
+        // 2. Active default order
+        // 3. Active not default order
+        if (columnId === sortParams.columnId) {
+            if (sortParams.sortOrder && sortParams.sortOrder !== defaultSortOrder) {
+                setSortParams(newSortParams);
+                onSort === null || onSort === void 0 ? void 0 : onSort(newSortParams);
+                return;
+            }
+            const newSortOrder = sortParams.sortOrder === ASCENDING ? DESCENDING : ASCENDING;
+            newSortParams = {
+                sortOrder: newSortOrder,
+                columnId: columnId,
+            };
+        }
+        else {
+            newSortParams = {
+                sortOrder: defaultSortOrder,
+                columnId: columnId,
+            };
+        }
+        onSort === null || onSort === void 0 ? void 0 : onSort(newSortParams);
+        setSortParams(newSortParams);
+    };
+    const renderTableColGroups = () => {
+        return (_jsx("colgroup", { children: columns.map((column) => {
+                return _jsx("col", { style: { width: `${column.width}px` } }, column.name);
+            }) }));
+    };
+    const renderTableHead = () => {
+        return (_jsx("thead", Object.assign({ className: b('head') }, { children: _jsx("tr", { children: columns.map((column) => {
+                    const sortOrder = sortParams.columnId === column.name ? sortParams.sortOrder : undefined;
+                    return (_jsx(TableHeadCell, { column: column, sortOrder: sortOrder, defaultSortOrder: defaultSortOrder, onSort: handleSort, rowHeight: rowHeight, onCellMount: handleCellMount, onCellUnMount: handleCellUnMount }, column.name));
+                }) }) })));
+    };
+    return (_jsxs(_Fragment, { children: [renderTableColGroups(), renderTableHead()] }));
+};

package/dist/components/VirtualTable/TableRow.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import type { Column, GetRowClassName } from './types';
+interface LoadingTableRowProps<T> {
+    columns: Column<T>[];
+    index: number;
+    height: number;
+}
+export declare const LoadingTableRow: <T>({ index, columns, height }: LoadingTableRowProps<T>) => JSX.Element;
+interface TableRowProps<T> {
+    columns: Column<T>[];
+    index: number;
+    row: T;
+    height: number;
+    getRowClassName?: GetRowClassName<T>;
+}
+export declare const TableRow: <T>({ row, index, columns, getRowClassName, height }: TableRowProps<T>) => JSX.Element;
+interface EmptyTableRowProps<T> {
+    columns: Column<T>[];
+    children?: ReactNode;
+}
+export declare const EmptyTableRow: <T>({ columns, children }: EmptyTableRowProps<T>) => JSX.Element;
+export {};

package/dist/components/VirtualTable/TableRow.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@gravity-ui/uikit';
+import { DEFAULT_ALIGN } from './constants';
+import { b } from './shared';
+const TableRowCell = ({ children, className, height, width, align = DEFAULT_ALIGN, }) => {
+    // Additional maxWidth to ensure overflow hidden for <td>
+    return (_jsx("td", Object.assign({ className: b('row-cell', { align: align }, className), style: { height: `${height}px`, width: `${width}px`, maxWidth: `${width}px` } }, { children: children })));
+};
+export const LoadingTableRow = ({ index, columns, height }) => {
+    return (_jsx("tr", Object.assign({ className: b('row') }, { children: columns.map((column) => {
+            return (_jsx(TableRowCell, Object.assign({ height: height, width: column.width, align: column.align, className: column.className }, { children: _jsx(Skeleton, { style: { width: '80%', height: '50%' } }) }), `${column.name}${index}`));
+        }) })));
+};
+export const TableRow = ({ row, index, columns, getRowClassName, height }) => {
+    const additionalClassName = getRowClassName === null || getRowClassName === void 0 ? void 0 : getRowClassName(row);
+    return (_jsx("tr", Object.assign({ className: b('row', additionalClassName) }, { children: columns.map((column) => {
+            return (_jsx(TableRowCell, Object.assign({ height: height, width: column.width, align: column.align, className: column.className }, { children: column.render({ row, index }) }), `${column.name}${index}`));
+        }) })));
+};
+export const EmptyTableRow = ({ columns, children }) => {
+    return (_jsx("tr", Object.assign({ className: b('row', { empty: true }) }, { children: _jsx("td", Object.assign({ colSpan: columns.length, className: b('td') }, { children: children })) })));
+};

package/dist/components/VirtualTable/VirtualTable.d.ts

@@ -0,0 +1,19 @@
+import type { HandleTableColumnsResize } from '../../utils/hooks/useTableResize';
+import type { Column, FetchData, SortParams, RenderControls, GetRowClassName, RenderEmptyDataMessage, RenderErrorMessage } from './types';
+import './VirtualTable.scss';
+interface VirtualTableProps<T> {
+    limit: number;
+    fetchData: FetchData<T>;
+    columns: Column<T>[];
+    getRowClassName?: GetRowClassName<T>;
+    rowHeight?: number;
+    parentContainer?: Element | null;
+    initialSortParams?: SortParams;
+    onColumnsResize?: HandleTableColumnsResize;
+    renderControls?: RenderControls;
+    renderEmptyDataMessage?: RenderEmptyDataMessage;
+    renderErrorMessage?: RenderErrorMessage;
+    dependencyArray?: unknown[];
+}
+export declare const VirtualTable: <T>({ limit, fetchData, columns, getRowClassName, rowHeight, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }: VirtualTableProps<T>) => JSX.Element;
+export {};

package/dist/components/VirtualTable/VirtualTable.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useReducer, useRef, useCallback, useEffect } from 'react';
+import { getArray } from '../../utils';
+import { TableWithControlsLayout } from '../TableWithControlsLayout/TableWithControlsLayout';
+import { ResponseError } from '../Errors/ResponseError';
+import { createVirtualTableReducer, initChunk, removeChunk, resetChunks, setChunkData, setChunkError, setChunkLoading, } from './reducer';
+import { DEFAULT_REQUEST_TIMEOUT, DEFAULT_TABLE_ROW_HEIGHT } from './constants';
+import { TableHead } from './TableHead';
+import { TableChunk } from './TableChunk';
+import { EmptyTableRow } from './TableRow';
+import { useIntersectionObserver } from './useIntersectionObserver';
+import i18n from './i18n';
+import { b } from './shared';
+import './VirtualTable.scss';
+export const VirtualTable = ({ limit, fetchData, columns, getRowClassName, rowHeight = DEFAULT_TABLE_ROW_HEIGHT, parentContainer, initialSortParams, onColumnsResize, renderControls, renderEmptyDataMessage, renderErrorMessage, dependencyArray, }) => {
+    const inited = useRef(false);
+    const tableContainer = useRef(null);
+    const [state, dispatch] = useReducer(createVirtualTableReducer(), {});
+    const [sortParams, setSortParams] = useState(initialSortParams);
+    const [totalEntities, setTotalEntities] = useState(limit);
+    const [foundEntities, setFoundEntities] = useState(0);
+    const [error, setError] = useState();
+    const pendingRequests = useRef({});
+    const fetchChunkData = useCallback(async (id) => {
+        dispatch(setChunkLoading(id));
+        const timer = setTimeout(async () => {
+            const offset = Number(id) * limit;
+            try {
+                const response = await fetchData(limit, offset, sortParams);
+                const { data, total, found } = response;
+                setTotalEntities(total);
+                setFoundEntities(found);
+                inited.current = true;
+                dispatch(setChunkData(id, data));
+            }
+            catch (err) {
+                // Do not set error on cancelled requests
+                if (err === null || err === void 0 ? void 0 : err.isCancelled) {
+                    return;
+                }
+                dispatch(setChunkError(id, err));
+                setError(err);
+            }
+        }, DEFAULT_REQUEST_TIMEOUT);
+        // Chunk data load could be triggered by different events
+        // Cancel previous chunk request, while it is pending (instead of concurrentId)
+        if (pendingRequests.current[id]) {
+            const oldTimer = pendingRequests.current[id];
+            window.clearTimeout(oldTimer);
+        }
+        pendingRequests.current[id] = timer;
+    }, [fetchData, limit, sortParams]);
+    const onEntry = useCallback((id) => {
+        dispatch(initChunk(id));
+    }, []);
+    const onLeave = useCallback((id) => {
+        dispatch(removeChunk(id));
+        // If there is a pending request for the removed chunk, cancel it
+        // It made to prevent excessive requests on fast scroll
+        if (pendingRequests.current[id]) {
+            const timer = pendingRequests.current[id];
+            window.clearTimeout(timer);
+            delete pendingRequests.current[id];
+        }
+    }, []);
+    // Cancel all pending requests on component unmount
+    useEffect(() => {
+        return () => {
+            Object.values(pendingRequests.current).forEach((timer) => {
+                window.clearTimeout(timer);
+            });
+            pendingRequests.current = {};
+        };
+    }, []);
+    // Load chunks if they become active
+    // This mecanism helps to set chunk active state from different sources, but load data only once
+    // Only currently active chunks should be in state so iteration by the whole state shouldn't be a problem
+    useEffect(() => {
+        for (const id of Object.keys(state)) {
+            const chunk = state[Number(id)];
+            if ((chunk === null || chunk === void 0 ? void 0 : chunk.active) && !(chunk === null || chunk === void 0 ? void 0 : chunk.loading) && !(chunk === null || chunk === void 0 ? void 0 : chunk.wasLoaded)) {
+                fetchChunkData(id);
+            }
+        }
+    }, [fetchChunkData, state]);
+    // Reset table on filters change
+    useEffect(() => {
+        var _a;
+        // Reset counts, so table unmount unneeded chunks
+        setTotalEntities(limit);
+        setFoundEntities(0);
+        setError(undefined);
+        // Remove all chunks from state
+        dispatch(resetChunks());
+        // Reset table state for the controls
+        inited.current = false;
+        // If there is a parent, scroll to parent container ref
+        // Else scroll to table top
+        // It helps to prevent layout shifts, when chunks quantity is changed
+        if (parentContainer) {
+            parentContainer.scrollTo(0, 0);
+        }
+        else {
+            (_a = tableContainer.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
+        }
+        // Make table start to load data
+        dispatch(initChunk('0'));
+    }, [dependencyArray, limit, parentContainer]);
+    // Reload currently active chunks
+    // Use case - sort params change, so data should be updated, but without chunks unmount
+    const reloadCurrentViewport = () => {
+        var _a;
+        for (const id of Object.keys(state)) {
+            if ((_a = state[Number(id)]) === null || _a === void 0 ? void 0 : _a.active) {
+                dispatch(initChunk(id));
+            }
+        }
+    };
+    const handleSort = (params) => {
+        setSortParams(params);
+        reloadCurrentViewport();
+    };
+    const observer = useIntersectionObserver({ onEntry, onLeave, parentContainer });
+    // Render at least 1 chunk
+    const totalLength = foundEntities || limit;
+    const chunksCount = Math.ceil(totalLength / limit);
+    const renderChunks = () => {
+        if (!observer) {
+            return null;
+        }
+        return getArray(chunksCount).map((value) => {
+            const chunkData = state[value];
+            return (_jsx(TableChunk, { observer: observer, id: value, chunkSize: limit, rowHeight: rowHeight, columns: columns, chunkData: chunkData, getRowClassName: getRowClassName }, value));
+        });
+    };
+    const renderData = () => {
+        if (inited.current && foundEntities === 0) {
+            return (_jsx("tbody", { children: _jsx(EmptyTableRow, Object.assign({ columns: columns }, { children: renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty') })) }));
+        }
+        // If first chunk is loaded with the error, display error
+        // In case of other chunks table will be inited
+        if (!inited.current && error) {
+            return (_jsx("tbody", { children: _jsx(EmptyTableRow, Object.assign({ columns: columns }, { children: renderErrorMessage ? (renderErrorMessage(error)) : (_jsx(ResponseError, { error: error })) })) }));
+        }
+        return renderChunks();
+    };
+    const renderTable = () => {
+        return (_jsxs("table", Object.assign({ className: b('table') }, { children: [_jsx(TableHead, { columns: columns, onSort: handleSort, onColumnsResize: onColumnsResize }), renderData()] })));
+    };
+    const renderContent = () => {
+        if (renderControls) {
+            return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls({ inited: inited.current, totalEntities, foundEntities }) }), _jsx(TableWithControlsLayout.Table, { children: renderTable() })] }));
+        }
+        return renderTable();
+    };
+    return (_jsx("div", Object.assign({ ref: tableContainer, className: b(null) }, { children: renderContent() })));
+};

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

@@ -0,0 +1,10 @@
+export declare const LEFT = "left";
+export declare const CENTER = "center";
+export declare const RIGHT = "right";
+export declare const DEFAULT_ALIGN = "left";
+export declare const ASCENDING = 1;
+export declare const DESCENDING = -1;
+export declare const DEFAULT_SORT_ORDER = -1;
+export declare const DEFAULT_REQUEST_TIMEOUT = 200;
+export declare const DEFAULT_TABLE_ROW_HEIGHT = 40;
+export declare const DEFAULT_INTERSECTION_OBSERVER_MARGIN = "100%";

package/dist/components/VirtualTable/constants.js

@@ -0,0 +1,11 @@
+export const LEFT = 'left';
+export const CENTER = 'center';
+export const RIGHT = 'right';
+export const DEFAULT_ALIGN = LEFT;
+export const ASCENDING = 1;
+export const DESCENDING = -1;
+export const DEFAULT_SORT_ORDER = DESCENDING;
+// Time in ms after which request will be sent
+export const DEFAULT_REQUEST_TIMEOUT = 200;
+export const DEFAULT_TABLE_ROW_HEIGHT = 40;
+export const DEFAULT_INTERSECTION_OBSERVER_MARGIN = '100%';

package/dist/components/VirtualTable/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "empty": "No data"
+    "empty": "No data"
 }

package/dist/components/VirtualTable/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/components/VirtualTable/i18n/index.js

@@ -0,0 +1,7 @@
+import { i18n, Lang } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-virtual-table';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+export default i18n.keyset(COMPONENT);

package/dist/components/VirtualTable/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "empty": "Нет данных"
+    "empty": "Нет данных"
 }

package/dist/components/VirtualTable/index.js

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './types';
+export * from './VirtualTable';

package/dist/components/VirtualTable/reducer.d.ts

@@ -0,0 +1,44 @@
+import type { Reducer } from 'react';
+import type { IResponseError } from '../../types/api/error';
+import type { Chunk } from './types';
+declare const SET_CHUNK_DATA = "infiniteTable/SET_CHUNK_DATA";
+declare type VirtualTableState<T> = Record<string, Chunk<T> | undefined>;
+interface SetChunkDataAction<T> {
+    type: typeof SET_CHUNK_DATA;
+    data: {
+        id: string;
+        data: T[];
+    };
+}
+export declare const setChunkData: <T>(id: string, data: T[]) => SetChunkDataAction<T>;
+export declare const setChunkError: (id: string, error: IResponseError) => {
+    readonly type: "infiniteTable/SET_CHUNK_ERROR";
+    readonly data: {
+        readonly id: string;
+        readonly error: IResponseError<unknown>;
+    };
+};
+export declare const initChunk: (id: string) => {
+    readonly type: "infiniteTable/INIT_CHUNK";
+    readonly data: {
+        readonly id: string;
+    };
+};
+export declare const setChunkLoading: (id: string) => {
+    readonly type: "infiniteTable/SET_CHUNK_LOADING";
+    readonly data: {
+        readonly id: string;
+    };
+};
+export declare const removeChunk: (id: string) => {
+    readonly type: "infiniteTable/REMOVE_CHUNK";
+    readonly data: {
+        readonly id: string;
+    };
+};
+export declare const resetChunks: () => {
+    readonly type: "infiniteTable/RESET_CHUNKS";
+};
+declare type VirtualTableAction<T> = SetChunkDataAction<T> | ReturnType<typeof setChunkError> | ReturnType<typeof initChunk> | ReturnType<typeof setChunkLoading> | ReturnType<typeof removeChunk> | ReturnType<typeof resetChunks>;
+export declare const createVirtualTableReducer: <T>() => Reducer<VirtualTableState<T>, VirtualTableAction<T>>;
+export {};

package/dist/components/VirtualTable/reducer.js

@@ -0,0 +1,91 @@
+const INIT_CHUNK = 'infiniteTable/INIT_CHUNK';
+const REMOVE_CHUNK = 'infiniteTable/REMOVE_CHUNK';
+const SET_CHUNK_LOADING = 'infiniteTable/SET_CHUNK_LOADING';
+const SET_CHUNK_DATA = 'infiniteTable/SET_CHUNK_DATA';
+const SET_CHUNK_ERROR = 'infiniteTable/SET_CHUNK_ERROR';
+const RESET_CHUNKS = 'infiniteTable/RESET_CHUNKS';
+export const setChunkData = (id, data) => {
+    return {
+        type: SET_CHUNK_DATA,
+        data: { id, data },
+    };
+};
+export const setChunkError = (id, error) => {
+    return {
+        type: SET_CHUNK_ERROR,
+        data: { id, error },
+    };
+};
+export const initChunk = (id) => {
+    return {
+        type: INIT_CHUNK,
+        data: { id },
+    };
+};
+export const setChunkLoading = (id) => {
+    return {
+        type: SET_CHUNK_LOADING,
+        data: { id },
+    };
+};
+export const removeChunk = (id) => {
+    return {
+        type: REMOVE_CHUNK,
+        data: { id },
+    };
+};
+export const resetChunks = () => {
+    return {
+        type: RESET_CHUNKS,
+    };
+};
+// Reducer wrapped in additional function to pass generic type
+export const createVirtualTableReducer = () => (state, action) => {
+    switch (action.type) {
+        case SET_CHUNK_DATA: {
+            const { id, data } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: false,
+                    wasLoaded: true,
+                    active: true,
+                    data,
+                } });
+        }
+        case SET_CHUNK_ERROR: {
+            const { id, error } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: false,
+                    wasLoaded: true,
+                    active: true,
+                    error,
+                } });
+        }
+        case INIT_CHUNK: {
+            const { id } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: false,
+                    wasLoaded: false,
+                    active: true,
+                } });
+        }
+        case SET_CHUNK_LOADING: {
+            const { id } = action.data;
+            return Object.assign(Object.assign({}, state), { [id]: {
+                    loading: true,
+                    wasLoaded: false,
+                    active: true,
+                } });
+        }
+        case REMOVE_CHUNK: {
+            const { id } = action.data;
+            const newState = Object.assign({}, state);
+            delete newState[id];
+            return newState;
+        }
+        case RESET_CHUNKS: {
+            return {};
+        }
+        default:
+            return state;
+    }
+};

package/dist/components/VirtualTable/shared.d.ts

@@ -0,0 +1,10 @@
+export declare const b: {
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string, mixin?: string | string[] | undefined): string;
+    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
+    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
+    (elementName: string): string;
+    (mods: import("bem-cn-lite").Modifications | null): string;
+    (): string;
+    builder(): import("bem-cn").Block;
+};

package/dist/components/VirtualTable/shared.js

@@ -0,0 +1,2 @@
+import cn from 'bem-cn-lite';
+export const b = cn('ydb-virtual-table');

package/dist/components/VirtualTable/types.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+import type { IResponseError } from '../../types/api/error';
+import { ASCENDING, CENTER, DESCENDING, LEFT, RIGHT } from './constants';
+export interface Chunk<T> {
+    active: boolean;
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: T[];
+    error?: IResponseError;
+}
+export declare type GetChunk<T> = (id: number) => Chunk<T> | undefined;
+export declare type OnEntry = (id: string) => void;
+export declare type OnLeave = (id: string) => void;
+export declare type AlignType = typeof LEFT | typeof RIGHT | typeof CENTER;
+export declare type SortOrderType = typeof ASCENDING | typeof DESCENDING;
+export declare type SortParams = {
+    columnId?: string;
+    sortOrder?: SortOrderType;
+};
+export declare type OnSort = (params: SortParams) => void;
+export interface Column<T> {
+    name: string;
+    header?: ReactNode;
+    className?: string;
+    sortable?: boolean;
+    resizeable?: boolean;
+    render: (props: {
+        row: T;
+        index: number;
+    }) => ReactNode;
+    width: number;
+    align: AlignType;
+}
+export interface VirtualTableData<T> {
+    data: T[];
+    total: number;
+    found: number;
+}
+export declare type FetchData<T> = (limit: number, offset: number, sortParams?: SortParams) => Promise<VirtualTableData<T>>;
+export declare type OnError = (error?: IResponseError) => void;
+interface ControlsParams {
+    totalEntities: number;
+    foundEntities: number;
+    inited: boolean;
+}
+export declare type RenderControls = (params: ControlsParams) => ReactNode;
+export declare type RenderEmptyDataMessage = () => ReactNode;
+export declare type RenderErrorMessage = (error: IResponseError) => ReactNode;
+export declare type GetRowClassName<T> = (row: T) => string | undefined;
+export {};

package/dist/components/VirtualTable/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/VirtualTable/useIntersectionObserver.d.ts

@@ -0,0 +1,9 @@
+import type { OnEntry, OnLeave } from './types';
+interface UseIntersectionObserverProps {
+    onEntry: OnEntry;
+    onLeave: OnLeave;
+    /** Intersection observer calculate margins based on container element properties */
+    parentContainer?: Element | null;
+}
+export declare const useIntersectionObserver: ({ onEntry, onLeave, parentContainer, }: UseIntersectionObserverProps) => IntersectionObserver | undefined;
+export {};

package/dist/components/VirtualTable/useIntersectionObserver.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+import { DEFAULT_INTERSECTION_OBSERVER_MARGIN } from './constants';
+export const useIntersectionObserver = ({ onEntry, onLeave, parentContainer, }) => {
+    const observer = useRef();
+    useEffect(() => {
+        const callback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    onEntry(entry.target.id);
+                }
+                else {
+                    onLeave(entry.target.id);
+                }
+            });
+        };
+        observer.current = new IntersectionObserver(callback, {
+            root: parentContainer,
+            rootMargin: DEFAULT_INTERSECTION_OBSERVER_MARGIN,
+        });
+        return () => {
+            var _a;
+            (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+            observer.current = undefined;
+        };
+    }, [parentContainer, onEntry, onLeave]);
+    return observer.current;
+};

package/dist/components/slots/SlotMap.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SlotComponent, SlotItem } from './types';
+export declare class SlotMap {
+    readonly children?: React.ReactNode;
+    private slots;
+    constructor(children: React.ReactNode);
+    get<Props, Type>(slot: SlotComponent<Props, Type>): SlotItem<Props, Type> | undefined;
+}