ydb-embedded-ui 22.0.0 → 22.2.0

package/dist/components/PaginatedTable/getTableChunkQueryParams.js

@@ -0,0 +1,12 @@
+import { shouldSendColumnIds } from './constants';
+export function getTableChunkQueryParams({ columns, tableName, ...params }) {
+    return {
+        ...params,
+        fetchData: params.fetchData,
+        tableName,
+        columnsIds: shouldSendColumnIds(tableName)
+            ? columns.map((column) => column.name).toSorted()
+            : [],
+    };
+}
+//# sourceMappingURL=getTableChunkQueryParams.js.map

package/dist/components/PaginatedTable/getTableChunkQueryParams.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTableChunkQueryParams.js","sourceRoot":"","sources":["../../../src/components/PaginatedTable/getTableChunkQueryParams.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAchD,MAAM,UAAU,wBAAwB,CAAO,EAAC,OAAO,EAAE,SAAS,EAAE,GAAG,MAAM,EAAe;IACxF,OAAO;QACH,GAAG,MAAM;QACT,SAAS,EAAE,MAAM,CAAC,SAAkC;QACpD,SAAS;QACT,UAAU,EAAE,mBAAmB,CAAC,SAAS,CAAC;YACtC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;YACjD,CAAC,CAAC,EAAE;KACX,CAAC;AACN,CAAC"}

package/dist/components/PaginatedTable/rowLookup.d.ts

@@ -0,0 +1,8 @@
+import { QueryStatus } from '@reduxjs/toolkit/query';
+export interface ChunkLookupState {
+    offset: number;
+    status: QueryStatus;
+    fulfilledTimeStamp?: number;
+}
+export declare function getChunkLookupRevision(states: ChunkLookupState[], revision?: string): string;
+export declare function isChunkLookupPending(states: ChunkLookupState[], revision?: string): boolean;

package/dist/components/PaginatedTable/rowLookup.js

@@ -0,0 +1,35 @@
+import { QueryStatus } from '@reduxjs/toolkit/query';
+function serializeChunkLookupRevision(states) {
+    return JSON.stringify(states
+        .map(({ offset, fulfilledTimeStamp }) => [offset, fulfilledTimeStamp !== null && fulfilledTimeStamp !== void 0 ? fulfilledTimeStamp : null])
+        .sort(([leftOffset], [rightOffset]) => leftOffset - rightOffset));
+}
+function parseChunkLookupRevision(revision) {
+    return new Map(revision ? JSON.parse(revision) : []);
+}
+function hasChunkAdvanced({ offset, status, fulfilledTimeStamp }, previous) {
+    if (status !== QueryStatus.fulfilled || fulfilledTimeStamp === undefined) {
+        return false;
+    }
+    if (!previous.has(offset)) {
+        return true;
+    }
+    const previousFulfilledTimeStamp = previous.get(offset);
+    return (previousFulfilledTimeStamp === null ||
+        (previousFulfilledTimeStamp !== undefined &&
+            fulfilledTimeStamp > previousFulfilledTimeStamp));
+}
+export function getChunkLookupRevision(states, revision) {
+    if (!revision) {
+        return serializeChunkLookupRevision(states);
+    }
+    const previous = parseChunkLookupRevision(revision);
+    return states.length > 0 && states.every((state) => hasChunkAdvanced(state, previous))
+        ? serializeChunkLookupRevision(states)
+        : revision;
+}
+export function isChunkLookupPending(states, revision) {
+    const previous = parseChunkLookupRevision(revision);
+    return states.some((state) => !hasChunkAdvanced(state, previous));
+}
+//# sourceMappingURL=rowLookup.js.map

package/dist/components/PaginatedTable/rowLookup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rowLookup.js","sourceRoot":"","sources":["../../../src/components/PaginatedTable/rowLookup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,wBAAwB,CAAC;AAUnD,SAAS,4BAA4B,CAAC,MAA0B;IAC5D,OAAO,IAAI,CAAC,SAAS,CACjB,MAAM;SACD,GAAG,CACA,CAAC,EAAC,MAAM,EAAE,kBAAkB,EAAC,EAAE,EAAE,CAC7B,CAAC,MAAM,EAAE,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,IAAI,CAAuC,CACjF;SACA,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CACvE,CAAC;AACN,CAAC;AAED,SAAS,wBAAwB,CAAC,QAAiB;IAC/C,OAAO,IAAI,GAAG,CACV,QAAQ,CAAC,CAAC,CAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAyB,CAAC,CAAC,CAAC,EAAE,CAChE,CAAC;AACN,CAAC;AAED,SAAS,gBAAgB,CACrB,EAAC,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAmB,EACtD,QAAoC;IAEpC,IAAI,MAAM,KAAK,WAAW,CAAC,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE,CAAC;QACvE,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,0BAA0B,GAAG,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxD,OAAO,CACH,0BAA0B,KAAK,IAAI;QACnC,CAAC,0BAA0B,KAAK,SAAS;YACrC,kBAAkB,GAAG,0BAA0B,CAAC,CACvD,CAAC;AACN,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,MAA0B,EAAE,QAAiB;IAChF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACZ,OAAO,4BAA4B,CAAC,MAAM,CAAC,CAAC;IAChD,CAAC;IAED,MAAM,QAAQ,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IACpD,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAClF,CAAC,CAAC,4BAA4B,CAAC,MAAM,CAAC;QACtC,CAAC,CAAC,QAAQ,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,MAA0B,EAAE,QAAiB;IAC9E,MAAM,QAAQ,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtE,CAAC"}

package/dist/components/PaginatedTable/tableCounts.d.ts

@@ -0,0 +1,19 @@
+import type { getTableChunkQueryParams } from './getTableChunkQueryParams';
+import type { PaginatedTableState } from './types';
+type TableQuery = Omit<ReturnType<typeof getTableChunkQueryParams>, 'offset' | 'fetchData'>;
+export interface TableCountsState extends Pick<PaginatedTableState, 'totalEntities' | 'foundEntities' | 'isInitialLoad'> {
+    query?: TableQuery;
+    hasLoadedData: boolean;
+}
+export type TableCountsAction = {
+    type: 'initialize';
+    query: TableQuery;
+    initialEntitiesCount?: number;
+} | {
+    type: 'dataReceived';
+    query: TableQuery;
+    total: number;
+    found: number;
+};
+export declare function tableCountsReducer(state: TableCountsState, action: TableCountsAction): TableCountsState;
+export {};

package/dist/components/PaginatedTable/tableCounts.js

@@ -0,0 +1,30 @@
+import isEqual from 'lodash/isEqual';
+export function tableCountsReducer(state, action) {
+    var _a, _b;
+    // Cached chunks can report their data before the table's initialization effect.
+    if (action.type === 'initialize' &&
+        isEqual(state.query, action.query) &&
+        !state.isInitialLoad) {
+        return state;
+    }
+    let nextState;
+    if (action.type === 'dataReceived') {
+        nextState = {
+            query: action.query,
+            totalEntities: action.total,
+            foundEntities: action.found,
+            isInitialLoad: false,
+            hasLoadedData: true,
+        };
+    }
+    else {
+        // Keep the virtualized table's size until the next query returns its actual counts.
+        nextState = { ...state, query: action.query, isInitialLoad: true };
+        if (!state.hasLoadedData) {
+            nextState.totalEntities = (_a = action.initialEntitiesCount) !== null && _a !== void 0 ? _a : 0;
+            nextState.foundEntities = (_b = action.initialEntitiesCount) !== null && _b !== void 0 ? _b : 1;
+        }
+    }
+    return isEqual(state, nextState) ? state : nextState;
+}
+//# sourceMappingURL=tableCounts.js.map

package/dist/components/PaginatedTable/tableCounts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableCounts.js","sourceRoot":"","sources":["../../../src/components/PaginatedTable/tableCounts.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAiBrC,MAAM,UAAU,kBAAkB,CAC9B,KAAuB,EACvB,MAAyB;;IAEzB,gFAAgF;IAChF,IACI,MAAM,CAAC,IAAI,KAAK,YAAY;QAC5B,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC;QAClC,CAAC,KAAK,CAAC,aAAa,EACtB,CAAC;QACC,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,IAAI,SAA2B,CAAC;IAChC,IAAI,MAAM,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;QACjC,SAAS,GAAG;YACR,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,aAAa,EAAE,MAAM,CAAC,KAAK;YAC3B,aAAa,EAAE,MAAM,CAAC,KAAK;YAC3B,aAAa,EAAE,KAAK;YACpB,aAAa,EAAE,IAAI;SACtB,CAAC;IACN,CAAC;SAAM,CAAC;QACJ,oFAAoF;QACpF,SAAS,GAAG,EAAC,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAC,CAAC;QACjE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YACvB,SAAS,CAAC,aAAa,GAAG,MAAA,MAAM,CAAC,oBAAoB,mCAAI,CAAC,CAAC;YAC3D,SAAS,CAAC,aAAa,GAAG,MAAA,MAAM,CAAC,oBAAoB,mCAAI,CAAC,CAAC;QAC/D,CAAC;IACL,CAAC;IAED,OAAO,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;AACzD,CAAC"}

package/dist/components/PaginatedTable/useKeyboardNavigation.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { SortParams } from './types';
+export declare const KeyboardRowContext: React.Context<number | undefined>;
+export interface KeyboardNavigationParams {
+    tableRef: React.RefObject<HTMLElement>;
+    scrollContainerRef: React.RefObject<HTMLElement>;
+    onActivate?: (index: number) => void;
+    getRowKey?: (index: number) => string | number | undefined;
+    getRowLabel?: (index: number) => string | undefined;
+    findRowIndex?: (key: string | number, previousIndex: number) => number | undefined;
+    getRowLookupRevision?: (revision?: string) => string | undefined;
+    isRowLookupPending?: (revision: string | undefined) => boolean;
+    subscribe?: (listener: () => void) => () => void;
+    rowCount: number;
+    rowHeight: number;
+    filters?: unknown;
+    sortParams?: SortParams;
+}
+export declare function useKeyboardNavigation({ tableRef, scrollContainerRef, onActivate, getRowKey, getRowLabel, findRowIndex, getRowLookupRevision, isRowLookupPending, subscribe, rowCount, rowHeight, filters, sortParams, }: KeyboardNavigationParams): {
+    focusedIndex: number | undefined;
+    tableProps: {
+        ref: (node: HTMLElement | null) => void;
+        'data-keyboard-navigation': string;
+        'data-keyboard-row-count': number;
+        onMouseMove: (event: React.MouseEvent<HTMLElement>) => void;
+    };
+};

package/dist/components/PaginatedTable/useKeyboardNavigation.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useTableKeyboardAdapter } from '../TableKeyboardNavigation/TableKeyboardNavigation';
+export const KeyboardRowContext = React.createContext(undefined);
+function getNavigationRowCount(table) {
+    const loadedRows = table.querySelectorAll('[data-row-index]');
+    return Array.from(loadedRows).reduce((count, row) => Math.max(count, Number(row.dataset.rowIndex) + 1), Number(table.dataset.keyboardRowCount) || 0);
+}
+export function useKeyboardNavigation({ tableRef, scrollContainerRef, onActivate, getRowKey, getRowLabel, findRowIndex, getRowLookupRevision, isRowLookupPending, subscribe, rowCount, rowHeight, filters, sortParams, }) {
+    const getCount = () => (tableRef.current ? getNavigationRowCount(tableRef.current) : rowCount);
+    const keyboard = useTableKeyboardAdapter({
+        tableRef,
+        getFirst: () => (getCount() > 0 ? 0 : undefined),
+        getLast: () => (getCount() > 0 ? getCount() - 1 : undefined),
+        getNext: (index, step) => {
+            const next = index + step;
+            return next >= 0 && next < getCount() ? next : undefined;
+        },
+        activate: onActivate,
+        getRowKey,
+        getRowLabel,
+        findRowIndex,
+        getRowLookupRevision,
+        isRowLookupPending,
+        subscribe,
+        isValidIndex: (index) => index >= 0 && index < getCount(),
+        resetDeps: [filters, sortParams],
+    });
+    const focusedIndex = keyboard.selected;
+    const scrolledRevision = React.useRef(0);
+    React.useLayoutEffect(() => {
+        var _a, _b;
+        if (scrolledRevision.current === keyboard.scrollRevision) {
+            return;
+        }
+        scrolledRevision.current = keyboard.scrollRevision;
+        const table = tableRef.current;
+        const container = scrollContainerRef.current;
+        if (focusedIndex === undefined || !table || !container) {
+            return;
+        }
+        const head = table.querySelector('thead');
+        const body = table.querySelector('tbody');
+        if (!head || !body) {
+            return;
+        }
+        const row = table.querySelector(`[data-row-index="${focusedIndex}"]`);
+        const containerRect = container.getBoundingClientRect();
+        const headRect = head.getBoundingClientRect();
+        const stickyTop = Number.parseFloat(getComputedStyle(head).top) || 0;
+        const visibleTop = Math.max(headRect.bottom, containerRect.top + stickyTop + headRect.height);
+        const rowRect = row === null || row === void 0 ? void 0 : row.getBoundingClientRect();
+        const top = (_a = rowRect === null || rowRect === void 0 ? void 0 : rowRect.top) !== null && _a !== void 0 ? _a : body.getBoundingClientRect().top + focusedIndex * rowHeight;
+        const bottom = (_b = rowRect === null || rowRect === void 0 ? void 0 : rowRect.bottom) !== null && _b !== void 0 ? _b : top + rowHeight;
+        const visibleBottom = Math.min(window.innerHeight, containerRect.top + container.clientHeight);
+        const delta = top < visibleTop ? top - visibleTop : Math.max(0, bottom - visibleBottom);
+        if (delta) {
+            container.scrollBy({ top: delta, behavior: 'instant' });
+        }
+    }, [focusedIndex, keyboard.scrollRevision, rowHeight, scrollContainerRef, tableRef]);
+    return {
+        focusedIndex: keyboard.focusedIndex,
+        tableProps: {
+            ref: keyboard.ref,
+            'data-keyboard-navigation': '',
+            'data-keyboard-row-count': rowCount,
+            onMouseMove: keyboard.onMouseMove,
+        },
+    };
+}
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/components/PaginatedTable/useKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/PaginatedTable/useKeyboardNavigation.ts"],"names":[],"mappings":"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"}

package/dist/components/ResizeableDataTable/DataTableKeyboardNavigation.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type DataTable from '@gravity-ui/react-data-table';
+import type { Column, DynamicInnerRefT, Settings, SortOrder } from '@gravity-ui/react-data-table';
+interface Props<T> {
+    data: T[];
+    columns: Column<T>[];
+    settings?: Settings;
+    nullBeforeNumbers?: boolean;
+    onActivate?: (row: T) => void;
+    getRowKey?: (row: T) => string | number | undefined;
+    getRowLabel?: (row: T) => string | undefined;
+    sortOrder?: SortOrder | SortOrder[];
+    children: (options: {
+        tableRef: React.RefCallback<HTMLDivElement>;
+        onTableReady: React.Ref<DataTable<T>>;
+        onMouseMove: React.MouseEventHandler<HTMLElement>;
+        dynamicInnerRef: React.Ref<DynamicInnerRefT>;
+        getRowClassName: (index: number) => string;
+        active: boolean;
+        onSort: (order: SortOrder | SortOrder[] | undefined) => void;
+    }) => React.ReactNode;
+}
+export declare function DataTableKeyboardNavigation<T>({ data, columns, settings, nullBeforeNumbers, onActivate, getRowKey, getRowLabel, sortOrder, children, }: Props<T>): React.ReactNode;
+export {};

package/dist/components/ResizeableDataTable/DataTableKeyboardNavigation.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { cn } from '../../utils/cn';
+import { useTableKeyboardAdapter } from '../TableKeyboardNavigation/TableKeyboardNavigation';
+import { KEYBOARD_FOCUSED_ROW_CLASS_NAME } from '../TableKeyboardNavigation/utils';
+import { getDataTableOrder } from './getDataTableOrder';
+const b = cn('ydb-list-keyboard-navigation');
+export function DataTableKeyboardNavigation({ data, columns, settings, nullBeforeNumbers, onActivate, getRowKey, getRowLabel, sortOrder, children, }) {
+    const tableRef = React.useRef(null);
+    const [internalSort, setInternalSort] = React.useState();
+    const [table, setTable] = React.useState(null);
+    const [order, setOrder] = React.useState({ data, indices: [] });
+    const { indices } = order;
+    const virtualList = React.useRef(null);
+    const dynamicInnerRef = React.useCallback((value) => {
+        virtualList.current = value;
+        const consumerRef = settings === null || settings === void 0 ? void 0 : settings.dynamicInnerRef;
+        if (typeof consumerRef === 'function') {
+            consumerRef(value);
+        }
+        else if (consumerRef) {
+            consumerRef.current = value;
+        }
+    }, [settings === null || settings === void 0 ? void 0 : settings.dynamicInnerRef]);
+    React.useLayoutEffect(() => {
+        if (!table) {
+            return;
+        }
+        const next = getDataTableOrder(table).filter((index) => index < data.length);
+        setOrder((previous) => previous.data === data &&
+            previous.indices.length === next.length &&
+            previous.indices.every((index, position) => index === next[position])
+            ? previous
+            : { data, indices: next });
+    }, [table, data, columns, sortOrder, internalSort, settings, nullBeforeNumbers]);
+    const indexByKey = React.useMemo(() => {
+        const result = new Map();
+        order.indices.forEach((sourceIndex, position) => {
+            const key = getRowKey === null || getRowKey === void 0 ? void 0 : getRowKey(order.data[sourceIndex]);
+            if (key !== undefined) {
+                result.set(key, position);
+            }
+        });
+        return result;
+    }, [order, getRowKey]);
+    const keyboard = useTableKeyboardAdapter({
+        tableRef,
+        getFirst: () => (indices.length ? 0 : undefined),
+        getLast: () => (indices.length ? indices.length - 1 : undefined),
+        getNext: (index, step) => {
+            const next = index + step;
+            return next >= 0 && next < indices.length ? next : undefined;
+        },
+        activate: onActivate
+            ? (index) => {
+                const row = order.data[indices[index]];
+                if (row !== undefined) {
+                    onActivate(row);
+                }
+            }
+            : undefined,
+        isValidIndex: (index) => index >= 0 && index < indices.length,
+        getRowKey: (index) => {
+            const row = order.data[indices[index]];
+            return row === undefined ? undefined : getRowKey === null || getRowKey === void 0 ? void 0 : getRowKey(row);
+        },
+        findRowIndex: getRowKey ? (key) => indexByKey.get(key) : undefined,
+        getRowLabel: getRowLabel
+            ? (index) => {
+                const row = order.data[indices[index]];
+                return row === undefined ? undefined : getRowLabel(row);
+            }
+            : undefined,
+        resetDeps: [sortOrder, internalSort, getRowKey ? undefined : data],
+    });
+    const scrolledRevision = React.useRef(0);
+    React.useLayoutEffect(() => {
+        var _a;
+        if (keyboard.scrollRevision === scrolledRevision.current) {
+            return undefined;
+        }
+        if (keyboard.selected === undefined) {
+            return undefined;
+        }
+        const sourceIndex = indices[keyboard.selected];
+        if (sourceIndex === undefined) {
+            return undefined;
+        }
+        (_a = virtualList.current) === null || _a === void 0 ? void 0 : _a.scrollAround(keyboard.selected);
+        const revealRow = () => {
+            var _a, _b, _c;
+            const rowClassName = b('row', { index: String(sourceIndex) });
+            const row = (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`tbody tr.${rowClassName.split(' ').join('.')}`);
+            if (!row) {
+                return false;
+            }
+            const positions = [];
+            for (let element = row.parentElement; element; element = element.parentElement) {
+                positions.push({ element, left: element.scrollLeft });
+            }
+            row.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+            const head = (_b = tableRef.current) === null || _b === void 0 ? void 0 : _b.querySelector('.data-table__sticky_head');
+            const overlap = head
+                ? head.getBoundingClientRect().bottom - row.getBoundingClientRect().top
+                : 0;
+            if (overlap > 0) {
+                (_c = positions
+                    .find(({ element }) => element.scrollHeight > element.clientHeight &&
+                    /auto|scroll/.test(getComputedStyle(element).overflowY))) === null || _c === void 0 ? void 0 : _c.element.scrollBy({ top: -overlap, behavior: 'instant' });
+            }
+            for (const { element, left } of positions) {
+                if (element.scrollLeft !== left) {
+                    element.scrollLeft = left;
+                }
+            }
+            scrolledRevision.current = keyboard.scrollRevision;
+            return true;
+        };
+        if (revealRow()) {
+            return undefined;
+        }
+        const container = tableRef.current;
+        if (!container) {
+            return undefined;
+        }
+        const observer = new MutationObserver(() => {
+            if (revealRow()) {
+                observer.disconnect();
+            }
+        });
+        observer.observe(container, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [keyboard.selected, keyboard.scrollRevision, indices]);
+    const focusedSourceIndex = keyboard.focusedIndex === undefined ? undefined : indices[keyboard.focusedIndex];
+    return children({
+        tableRef: keyboard.ref,
+        onTableReady: setTable,
+        onMouseMove: keyboard.onMouseMove,
+        dynamicInnerRef,
+        active: keyboard.focusedIndex !== undefined,
+        getRowClassName: (index) => b('row', { index: String(index) }, index === focusedSourceIndex ? KEYBOARD_FOCUSED_ROW_CLASS_NAME : undefined),
+        onSort: setInternalSort,
+    });
+}
+//# sourceMappingURL=DataTableKeyboardNavigation.js.map

package/dist/components/ResizeableDataTable/DataTableKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableKeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/ResizeableDataTable/DataTableKeyboardNavigation.tsx"],"names":[],"mappings":"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"}

package/dist/components/ResizeableDataTable/ResizeableDataTable.d.ts

@@ -4,6 +4,9 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
     columnsWidthLSKey?: string;
     reserveResizePadding?: boolean;
     wrapperClassName?: string;
+    onKeyboardActivate?: (row: T) => void;
+    getKeyboardRowKey?: (row: T) => string | number | undefined;
+    getKeyboardRowLabel?: (row: T) => string | undefined;
     /**
      * Not enough meta data (settings, sizes, features, etc.) to properly render table columns
      * Use case: initial load
@@ -17,4 +20,4 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
     loadingSkeletonRowsCount?: number;
     onSortChange?: (params: SortOrder | SortOrder[] | undefined) => void;
 }
-export declare function ResizeableDataTable<T>({ columnsWidthLSKey, columns, settings, reserveResizePadding, wrapperClassName, isLoading, isFetching, loadingSkeletonRowsCount, onSort, onSortChange, data, ...props }: ResizeableDataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ResizeableDataTable<T>({ onKeyboardActivate, getKeyboardRowKey, getKeyboardRowLabel, rowClassName, wrapperClassName, onSortChange, ...props }: ResizeableDataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ResizeableDataTable/ResizeableDataTable.js

@@ -4,10 +4,33 @@ import DataTable, { updateColumnsWidth } from '@gravity-ui/react-data-table';
 import { Skeleton } from '@gravity-ui/uikit';
 import { cn } from '../../utils/cn';
 import { useTableResize } from '../../utils/hooks/useTableResize';
+import { useTableNavigationEnabled } from '../TableKeyboardNavigation/TableKeyboardNavigation';
+import { KEYBOARD_FOCUS_ACTIVE_CLASS_NAME } from '../TableKeyboardNavigation/utils';
 import { TableSkeleton } from '../TableSkeleton/TableSkeleton';
+import { DataTableKeyboardNavigation } from './DataTableKeyboardNavigation';
 import './ResizeableDataTable.scss';
 const b = cn('ydb-resizeable-data-table');
-export function ResizeableDataTable({ columnsWidthLSKey, columns, settings, reserveResizePadding = true, wrapperClassName, isLoading, isFetching, loadingSkeletonRowsCount = 2, onSort, onSortChange, data, ...props }) {
+export function ResizeableDataTable({ onKeyboardActivate, getKeyboardRowKey, getKeyboardRowLabel, rowClassName, wrapperClassName, onSortChange, ...props }) {
+    const enabled = useTableNavigationEnabled();
+    if (!enabled) {
+        return (_jsx(ResizeableDataTableContent, { ...props, rowClassName: rowClassName, wrapperClassName: wrapperClassName, onSortChange: onSortChange }));
+    }
+    return (_jsx(DataTableKeyboardNavigation, { data: props.data, columns: props.columns, settings: props.settings, nullBeforeNumbers: props.nullBeforeNumbers, onActivate: onKeyboardActivate, getRowKey: getKeyboardRowKey, getRowLabel: getKeyboardRowLabel, sortOrder: props.sortOrder, children: ({ getRowClassName, active, onSort, tableRef, onTableReady, onMouseMove, dynamicInnerRef, }) => (_jsx(ResizeableDataTableContent, { ...props, containerRef: tableRef, onTableReady: onTableReady, onMouseMove: onMouseMove, dynamicInnerRef: dynamicInnerRef, rowClassName: (row, index, isFooter, isHeader) => [
+                rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index, isFooter, isHeader),
+                !isFooter && !isHeader ? getRowClassName(index) : undefined,
+            ]
+                .filter(Boolean)
+                .join(' '), wrapperClassName: [
+                wrapperClassName,
+                active ? KEYBOARD_FOCUS_ACTIVE_CLASS_NAME : undefined,
+            ]
+                .filter(Boolean)
+                .join(' '), onSortChange: (order) => {
+                onSort(order);
+                onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(order);
+            } })) }));
+}
+function ResizeableDataTableContent({ containerRef, onTableReady, onMouseMove, dynamicInnerRef, columnsWidthLSKey, columns, settings, reserveResizePadding = true, wrapperClassName, isLoading, isFetching, loadingSkeletonRowsCount = 2, onSort, onSortChange, data, ...props }) {
     const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] = useTableResize(columnsWidthLSKey);
     const handleSort = React.useCallback((params) => {
         onSort === null || onSort === void 0 ? void 0 : onSort(params); // Original onSort if provided
@@ -23,7 +46,7 @@ export function ResizeableDataTable({ columnsWidthLSKey, columns, settings, rese
         }
         return columns;
     }, [isFetching, columns]);
-    const updatedColumns = updateColumnsWidth(processedColumns, tableColumnsWidth);
+    const updatedColumns = React.useMemo(() => updateColumnsWidth(processedColumns, tableColumnsWidth), [processedColumns, tableColumnsWidth]);
     const processedData = React.useMemo(() => {
         if (isFetching && !(data === null || data === void 0 ? void 0 : data.length)) {
             // We do not use data in render method when loading, so we can return an array of empty objects
@@ -34,12 +57,13 @@ export function ResizeableDataTable({ columnsWidthLSKey, columns, settings, rese
     const newSettings = React.useMemo(() => {
         return {
             ...settings,
+            ...(dynamicInnerRef ? { dynamicInnerRef } : {}),
             defaultResizeable: true,
         };
-    }, [settings]);
+    }, [settings, dynamicInnerRef]);
     if (isLoading || isTableWidthLoading) {
         return _jsx(TableSkeleton, { rows: loadingSkeletonRowsCount });
     }
-    return (_jsx("div", { className: b({ 'reserve-resize-padding': reserveResizePadding }, wrapperClassName), children: _jsx(DataTable, { theme: "yandex-cloud", columns: updatedColumns, onResize: setTableColumnsWidth, onSort: handleSort, settings: newSettings, data: processedData, ...props }) }));
+    return (_jsx("div", { ref: containerRef, onMouseMoveCapture: onMouseMove, className: b({ 'reserve-resize-padding': reserveResizePadding }, wrapperClassName), children: _jsx(DataTable, { ref: onTableReady, theme: "yandex-cloud", columns: updatedColumns, onResize: setTableColumnsWidth, onSort: handleSort, settings: newSettings, data: processedData, ...props }) }));
 }
 //# sourceMappingURL=ResizeableDataTable.js.map

package/dist/components/ResizeableDataTable/ResizeableDataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeableDataTable.js","sourceRoot":"","sources":["../../../src/components/ResizeableDataTable/ResizeableDataTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResizeableDataTable.js","sourceRoot":"","sources":["../../../src/components/ResizeableDataTable/ResizeableDataTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/ResizeableDataTable/ResizeableDataTable.scss

@@ -1,6 +1,16 @@
 .ydb-resizeable-data-table {
     width: max-content;
 
+    .ydb-keyboard-focused-row {
+        background: var(--g-color-base-simple-hover-solid);
+    }
+
+    &.ydb-keyboard-focus-active {
+        .data-table__row:hover:not(.ydb-keyboard-focused-row) {
+            background: transparent !important;
+        }
+    }
+
     &_reserve-resize-padding {
         // padding for easier resize of the last column
         padding-right: var(--g-spacing-5);

package/dist/components/ResizeableDataTable/getDataTableOrder.d.ts

@@ -0,0 +1,2 @@
+import type DataTable from '@gravity-ui/react-data-table';
+export declare function getDataTableOrder<T>(table: DataTable<T>): number[];

package/dist/components/ResizeableDataTable/getDataTableOrder.js

@@ -0,0 +1,12 @@
+import { getSortedData } from '@gravity-ui/react-data-table/build/esm/lib/util';
+export function getDataTableOrder(table) {
+    const view = table.table;
+    if (!view) {
+        return [];
+    }
+    return getSortedData(view.props.data, view.getComplexColumns(view.props.columns).dataColumns, view.state, {
+        nullBeforeNumbers: view.props.nullBeforeNumbers,
+        externalSort: view.state.settings.externalSort,
+    }).map(({ index }) => index);
+}
+//# sourceMappingURL=getDataTableOrder.js.map

package/dist/components/ResizeableDataTable/getDataTableOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDataTableOrder.js","sourceRoot":"","sources":["../../../src/components/ResizeableDataTable/getDataTableOrder.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAC,MAAM,iDAAiD,CAAC;AAE9E,MAAM,UAAU,iBAAiB,CAAI,KAAmB;IACpD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;IACzB,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,EAAE,CAAC;IACd,CAAC;IACD,OAAO,aAAa,CAChB,IAAI,CAAC,KAAK,CAAC,IAAI,EACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,WAAW,EACtD,IAAI,CAAC,KAAK,EACV;QACI,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB;QAC/C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY;KACjD,CACJ,CAAC,GAAG,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC"}

package/dist/components/Search/Search.d.ts

@@ -7,6 +7,7 @@ interface SearchProps extends Omit<TextInputProps, 'onUpdate' | 'onChange'> {
     width?: React.CSSProperties['width'];
     debounce?: number;
     inputRef?: React.RefObject<HTMLInputElement>;
+    tableFilter?: boolean;
 }
-export declare const Search: ({ onChange, value, width, className, debounce, inputRef, ...props }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Search: ({ onChange, value, width, className, debounce, inputRef, tableFilter, ...props }: SearchProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Search/Search.js

@@ -2,12 +2,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { cn } from '../../utils/cn';
 import { DebouncedTextInput } from '../DebouncedInput/DebouncedTextInput';
+import { useTableSearch } from '../TableKeyboardNavigation/TableKeyboardNavigation';
 import './Search.scss';
 const b = cn('ydb-search');
-export const Search = ({ onChange, value = '', width, className, debounce, inputRef, ...props }) => {
+export const Search = ({ onChange, value = '', width, className, debounce, inputRef, tableFilter = false, ...props }) => {
+    const ownRef = React.useRef(null);
+    const controlRef = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
+    useTableSearch(controlRef, tableFilter, value);
     const onUpdate = React.useCallback((newValue) => {
         onChange(newValue);
     }, [onChange]);
-    return (_jsx(DebouncedTextInput, { debounce: debounce, hasClear: true, autoFocus: true, controlRef: inputRef, style: { width }, className: b(null, className), value: value, onUpdate: onUpdate, ...props }));
+    return (_jsx(DebouncedTextInput, { debounce: debounce, hasClear: true, autoFocus: true, controlRef: controlRef, style: { width }, className: b(null, className), value: value, onUpdate: onUpdate, ...props }));
 };
 //# sourceMappingURL=Search.js.map

package/dist/components/Search/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sCAAsC,CAAC;AAExE,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;AAU3B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,KAAC,kBAAkB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,QACR,SAAS,QACT,UAAU,EAAE,QAAQ,EACpB,KAAK,EAAE,EAAC,KAAK,EAAC,EACd,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,KACd,KAAK,GACX,CACL,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAC;AAClC,OAAO,EAAC,kBAAkB,EAAC,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAC,cAAc,EAAC,MAAM,oDAAoD,CAAC;AAElF,OAAO,eAAe,CAAC;AAEvB,MAAM,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;AAW3B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,UAAU,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,MAAM,CAAC;IACtC,cAAc,CAAC,UAAU,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;IAE/C,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACjB,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,KAAC,kBAAkB,IACf,QAAQ,EAAE,QAAQ,EAClB,QAAQ,QACR,SAAS,QACT,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAC,KAAK,EAAC,EACd,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7B,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,KACd,KAAK,GACX,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/components/ShardsTable/columns.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DataTable from '@gravity-ui/react-data-table';
+import { Flex, Text } from '@gravity-ui/uikit';
 import { EMPTY_DATA_PLACEHOLDER } from '../../utils/constants';
 import { formatNumber, roundToPrecision } from '../../utils/dataFormatters/dataFormatters';
 import { getUsageSeverity } from '../../utils/generateEvaluator';
@@ -40,9 +41,11 @@ export const getTabletIdColumn = () => {
             if (!row.TabletId) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
-            return (_jsx(TabletNameWrapper, { tabletId: row.TabletId, followerId: row.FollowerId || undefined }));
+            const followerId = Number(row.FollowerId);
+            const isFollower = followerId > 0;
+            return (_jsxs(Flex, { alignItems: "center", gap: 2, children: [_jsx(Flex, { minWidth: 0, children: _jsx(TabletNameWrapper, { tabletId: row.TabletId, followerId: isFollower ? followerId : undefined }) }), isFollower ? _jsx(Text, { color: "secondary", children: i18n('value_follower') }) : null] }));
         },
-        width: 220,
+        width: 280,
     };
 };
 export const getNodeIdColumn = () => {