ydb-embedded-ui 21.1.0 → 22.1.0

package/src/components/PaginatedTable/PaginatedTable.tsx

@@ -1,10 +1,19 @@
 import React from 'react';
 
+import isEqual from 'lodash/isEqual';
+import {useStore} from 'react-redux';
+
+import type {RootState} from '../../store';
+import {tableDataApi} from '../../store/reducers/tableData';
+
+import {KeyboardNavigation} from './KeyboardNavigation';
 import {usePaginatedTableState} from './PaginatedTableContext';
 import {TableChunksRenderer} from './TableChunksRenderer';
 import {TableHead} from './TableHead';
 import type {PaginatedTableId} from './constants';
 import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
+import {getTableChunkQueryParams} from './getTableChunkQueryParams';
+import {getChunkLookupRevision, isChunkLookupPending} from './rowLookup';
 import {b} from './shared';
 import type {
     Column,
@@ -38,6 +47,9 @@ export interface PaginatedTableProps<T, F> {
     onDataFetched?: (data: PaginatedTableData<T>) => void;
     keepCache?: boolean;
     fetchOverscan?: number;
+    onKeyboardActivate?: (row: T) => void;
+    getKeyboardRowKey?: (row: T) => string | number | undefined;
+    getKeyboardRowLabel?: (row: T) => string | undefined;
 }
 
 const DEFAULT_PAGINATION_LIMIT = 20;
@@ -60,15 +72,26 @@ export const PaginatedTable = <T, F>({
     onDataFetched,
     keepCache = true,
     fetchOverscan,
+    onKeyboardActivate,
+    getKeyboardRowKey,
+    getKeyboardRowLabel,
 }: PaginatedTableProps<T, F>) => {
+    const store = useStore<RootState>();
     // Get state and setters from context
-    const {tableState, setSortParams, setTotalEntities, setFoundEntities, setIsInitialLoad} =
-        usePaginatedTableState();
+    const {
+        tableState,
+        noBatching,
+        setSortParams,
+        setTotalEntities,
+        setFoundEntities,
+        setIsInitialLoad,
+    } = usePaginatedTableState();
 
     const {sortParams, foundEntities} = tableState;
     const activeSortParams = isSortColumnAvailable(sortParams, columns) ? sortParams : undefined;
 
     const tableRef = React.useRef<HTMLDivElement>(null);
+    const activeChunkOffsetsRef = React.useRef<number[]>([]);
 
     // this prevent situation when filters are new, but active chunks is not yet recalculated (it will be done to the next rendrer, so we bring filters change on the next render too)
     const [filters, setFilters] = React.useState(rawFilters);
@@ -77,6 +100,91 @@ export const PaginatedTable = <T, F>({
         setFilters(rawFilters);
     }, [rawFilters]);
 
+    const getQueryParams = (offset: number) =>
+        getTableChunkQueryParams({
+            offset,
+            limit: chunkSize,
+            fetchData,
+            filters: rawFilters,
+            sortParams: activeSortParams,
+            columns,
+            tableName,
+            noBatching,
+        });
+
+    const getRow = (index: number) => {
+        const offset = Math.floor(index / chunkSize) * chunkSize;
+        const queryParams = getQueryParams(offset);
+        const {data} = tableDataApi.endpoints.fetchTableChunk.select(queryParams)(store.getState());
+        return data?.data[index - offset] as T | undefined;
+    };
+
+    const getRowKey = (index: number) => {
+        const row = getRow(index);
+        return row === undefined ? undefined : getKeyboardRowKey?.(row);
+    };
+
+    const getRowLabel = (index: number) => {
+        const row = getRow(index);
+        return row === undefined ? undefined : getKeyboardRowLabel?.(row);
+    };
+
+    const getActiveChunkLookupStates = () => {
+        const state = store.getState();
+        return activeChunkOffsetsRef.current.map((offset) => {
+            const queryState = tableDataApi.endpoints.fetchTableChunk.select(
+                getQueryParams(offset),
+            )(state);
+            return {
+                offset,
+                status: queryState.status,
+                fulfilledTimeStamp: queryState.fulfilledTimeStamp,
+            };
+        });
+    };
+
+    const getRowLookupRevision = (revision?: string) =>
+        getChunkLookupRevision(getActiveChunkLookupStates(), revision);
+
+    const findRowIndex = (key: string | number, previousIndex: number) => {
+        if (getRowKey(previousIndex) === key) {
+            return previousIndex;
+        }
+        const state = store.getState();
+        const queryParams = getQueryParams(0);
+        const cachedArgs = tableDataApi.util.selectCachedArgsForQuery(state, 'fetchTableChunk');
+        for (const args of cachedArgs) {
+            if (
+                !isEqual(
+                    {...args, offset: 0, fetchData: undefined},
+                    {...queryParams, fetchData: undefined},
+                )
+            ) {
+                continue;
+            }
+            const {data} = tableDataApi.endpoints.fetchTableChunk.select(args)(state);
+            const index = data?.data.findIndex((row) => getKeyboardRowKey?.(row as T) === key);
+            if (index !== undefined && index >= 0) {
+                return args.offset + index;
+            }
+        }
+        return undefined;
+    };
+
+    const isRowLookupPending = (revision: string | undefined) =>
+        isChunkLookupPending(getActiveChunkLookupStates(), revision);
+
+    const handleActiveChunkOffsetsChange = React.useCallback((offsets: number[]) => {
+        activeChunkOffsetsRef.current = offsets;
+    }, []);
+
+    const activateRow = (index: number) => {
+        const row = getRow(index);
+        if (row !== undefined) {
+            onKeyboardActivate?.(row);
+        }
+    };
+
     const handleDataFetched = React.useCallback(
         (data?: PaginatedTableData<T>) => {
             if (data) {
@@ -130,6 +238,7 @@ export const PaginatedTable = <T, F>({
                     renderErrorMessage={renderErrorMessage}
                     renderEmptyDataMessage={renderEmptyDataMessage}
                     onDataFetched={handleDataFetched}
+                    onActiveChunkOffsetsChange={handleActiveChunkOffsetsChange}
                     keepCache={keepCache}
                     fetchOverscan={fetchOverscan}
                 />
@@ -138,8 +247,23 @@ export const PaginatedTable = <T, F>({
     );
 
     return (
-        <div ref={tableRef} className={b(null, containerClassName)}>
+        <KeyboardNavigation
+            tableRef={tableRef}
+            scrollContainerRef={scrollContainerRef}
+            onActivate={onKeyboardActivate ? activateRow : undefined}
+            getRowKey={getKeyboardRowKey ? getRowKey : undefined}
+            getRowLabel={getKeyboardRowLabel ? getRowLabel : undefined}
+            findRowIndex={getKeyboardRowKey ? findRowIndex : undefined}
+            getRowLookupRevision={getKeyboardRowKey ? getRowLookupRevision : undefined}
+            isRowLookupPending={getKeyboardRowKey ? isRowLookupPending : undefined}
+            subscribe={store.subscribe}
+            rowCount={foundEntities}
+            rowHeight={rowHeight}
+            filters={rawFilters}
+            sortParams={activeSortParams}
+            className={b(null, containerClassName)}
+        >
             {renderTable()}
-        </div>
+        </KeyboardNavigation>
     );
 };

package/src/components/PaginatedTable/PaginatedTableWithLayout.tsx

@@ -16,6 +16,7 @@ export interface PaginatedTableWithLayoutProps {
     initialState?: Partial<PaginatedTableState>;
     fullHeight?: boolean;
     noBatching?: boolean;
+    inheritKeyboardNavigation?: boolean;
 }
 
 const TableWrapper = ({
@@ -88,10 +89,14 @@ export const PaginatedTableWithLayout = ({
     initialState,
     noBatching,
     fullHeight = true,
+    inheritKeyboardNavigation = false,
 }: PaginatedTableWithLayoutProps) => {
     return (
         <PaginatedTableProvider initialState={initialState} noBatching={noBatching}>
-            <TableWithControlsLayout fullHeight={fullHeight}>
+            <TableWithControlsLayout
+                fullHeight={fullHeight}
+                inheritKeyboardNavigation={inheritKeyboardNavigation}
+            >
                 <ControlsSection controls={controls} extraControls={extraControls} />
                 <ErrorSection error={error} />
                 <TableWrapper table={table} tableWrapperProps={tableWrapperProps} />

package/src/components/PaginatedTable/ResizeablePaginatedTable.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import type {ColumnWidthByName} from '@gravity-ui/react-data-table';
 
 import {useTableResize} from '../../utils/hooks/useTableResize';
@@ -29,7 +31,10 @@ export function ResizeablePaginatedTable<T, F>({
     const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
         useTableResize(columnsWidthLSKey);
 
-    const updatedColumns = updateColumnsWidth(columns, tableColumnsWidth);
+    const updatedColumns = React.useMemo(
+        () => updateColumnsWidth(columns, tableColumnsWidth),
+        [columns, tableColumnsWidth],
+    );
 
     if (isTableWidthLoading) {
         return <TableSkeleton />;

package/src/components/PaginatedTable/TableChunk.tsx

@@ -9,7 +9,7 @@ import {ResponseError} from '../Errors/ResponseError';
 import {usePaginatedTableState} from './PaginatedTableContext';
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
 import type {PaginatedTableId} from './constants';
-import {shouldSendColumnIds} from './constants';
+import {getTableChunkQueryParams} from './getTableChunkQueryParams';
 import i18n from './i18n';
 import type {
     Column,
@@ -71,25 +71,16 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {noBatching} = usePaginatedTableState();
 
-    const hasColumnsIdsInRequest = shouldSendColumnIds(tableName);
-
-    const columnsIds = React.useMemo(
-        () =>
-            // sort ids to prevent refetch if only order was changed
-            hasColumnsIdsInRequest ? columns.map((column) => column.name).toSorted() : [],
-        [columns, hasColumnsIdsInRequest],
-    );
-
-    const queryParams = {
+    const queryParams = getTableChunkQueryParams({
         offset: id * chunkSize,
         limit: chunkSize,
-        fetchData: fetchData as FetchData<T, unknown>,
+        fetchData,
         filters,
         sortParams,
-        columnsIds,
+        columns,
         tableName,
         noBatching,
-    };
+    });
 
     tableDataApi.useFetchTableChunkQuery(queryParams, {
         skip: isTimeoutActive || !shouldFetch,
@@ -159,6 +150,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
             <TableRow
                 key={index}
                 row={rowData as T}
+                rowIndex={id * chunkSize + index}
                 columns={columns}
                 height={rowHeight}
                 getRowClassName={getRowClassName}

package/src/components/PaginatedTable/TableChunksRenderer.tsx

@@ -31,6 +31,7 @@ export interface TableChunksRendererProps<T, F> {
     renderErrorMessage?: RenderErrorMessage;
     renderEmptyDataMessage?: RenderEmptyDataMessage;
     onDataFetched: (data?: PaginatedTableData<T>) => void;
+    onActiveChunkOffsetsChange: (offsets: number[]) => void;
     keepCache: boolean;
     fetchOverscan?: number;
 }
@@ -51,6 +52,7 @@ export const TableChunksRenderer = <T, F>({
     renderErrorMessage,
     renderEmptyDataMessage,
     onDataFetched,
+    onActiveChunkOffsetsChange,
     keepCache,
     fetchOverscan,
 }: TableChunksRendererProps<T, F>) => {
@@ -63,6 +65,16 @@ export const TableChunksRenderer = <T, F>({
         fetchOverscan,
     });
 
+    const activeChunkOffsets = React.useMemo(
+        () => chunkStates.flatMap((state, index) => (state.shouldFetch ? [index * chunkSize] : [])),
+        [chunkSize, chunkStates],
+    );
+
+    React.useLayoutEffect(() => {
+        onActiveChunkOffsetsChange(activeChunkOffsets);
+        return () => onActiveChunkOffsetsChange([]);
+    }, [activeChunkOffsets, onActiveChunkOffsetsChange]);
+
     const lastChunkSize = React.useMemo(() => {
         // If foundEntities = 0, there will only first chunk
         // Display it with 1 row, to display empty data message

package/src/components/PaginatedTable/TableRow.tsx

@@ -1,8 +1,13 @@
+import React from 'react';
+
 import {Skeleton} from '@gravity-ui/uikit';
 
+import {KEYBOARD_FOCUSED_ROW_CLASS_NAME} from '../TableKeyboardNavigation/utils';
+
 import {DEFAULT_ALIGN, DEFAULT_RESIZEABLE} from './constants';
 import {b} from './shared';
 import type {AlignType, Column, GetRowClassName, OnRowClick} from './types';
+import {KeyboardRowContext} from './useKeyboardNavigation';
 import {typedMemo} from './utils';
 
 interface TableCellProps {
@@ -71,19 +76,54 @@ export const LoadingTableRow = typedMemo(function <T>({columns, height}: Loading
 interface TableRowProps<T> {
     columns: Column<T>[];
     row: T;
+    rowIndex?: number;
     height: number;
     getRowClassName?: GetRowClassName<T>;
     onRowClick?: OnRowClick<T>;
 }
 
-export const TableRow = <T,>({
+const TableRowCells = typedMemo(function TableRowCells<T>({
+    columns,
+    row,
+    height,
+}: Pick<TableRowProps<T>, 'columns' | 'row' | 'height'>) {
+    return (
+        <React.Fragment>
+            {columns.map((column) => {
+                const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
+
+                return (
+                    <TableRowCell
+                        key={column.name}
+                        height={height}
+                        width={column.width}
+                        align={column.align}
+                        className={column.className}
+                        resizeable={resizeable}
+                    >
+                        {column.render({row})}
+                    </TableRowCell>
+                );
+            })}
+        </React.Fragment>
+    );
+});
+
+const TableRowView = typedMemo(function TableRowView<T>({
     row,
+    rowIndex,
     columns,
     getRowClassName,
     height,
     onRowClick,
-}: TableRowProps<T>) => {
-    const additionalClassName = getRowClassName?.(row);
+    keyboardFocused,
+}: TableRowProps<T> & {keyboardFocused: boolean}) {
+    const additionalClassName = [
+        getRowClassName?.(row),
+        keyboardFocused ? KEYBOARD_FOCUSED_ROW_CLASS_NAME : undefined,
+    ]
+        .filter(Boolean)
+        .join(' ');
     const rowClickable = typeof onRowClick === 'function';
 
     const handleClick: React.MouseEventHandler<HTMLTableRowElement> = (event) => {
@@ -98,27 +138,21 @@ export const TableRow = <T,>({
         <tr
             className={b('row', {clickable: rowClickable}, additionalClassName)}
             style={{height}}
+            data-row-index={rowIndex}
+            aria-selected={keyboardFocused || undefined}
             onClick={rowClickable ? handleClick : undefined}
         >
-            {columns.map((column) => {
-                const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
-
-                return (
-                    <TableRowCell
-                        key={column.name}
-                        height={height}
-                        width={column.width}
-                        align={column.align}
-                        className={column.className}
-                        resizeable={resizeable}
-                    >
-                        {column.render({row})}
-                    </TableRowCell>
-                );
-            })}
+            <TableRowCells columns={columns} row={row} height={height} />
         </tr>
     );
-};
+});
+
+export function TableRow<T>(props: TableRowProps<T>) {
+    const focusedIndex = React.useContext(KeyboardRowContext);
+    const keyboardFocused = props.rowIndex !== undefined && props.rowIndex === focusedIndex;
+
+    return <TableRowView {...props} keyboardFocused={keyboardFocused} />;
+}
 
 interface EmptyTableRowProps<T> {
     columns: Column<T>[];

package/src/components/PaginatedTable/getTableChunkQueryParams.ts

@@ -0,0 +1,25 @@
+import type {PaginatedTableId} from './constants';
+import {shouldSendColumnIds} from './constants';
+import type {Column, FetchData, SortParams} from './types';
+
+interface Params<T, F> {
+    offset: number;
+    limit: number;
+    fetchData: FetchData<T, F>;
+    filters: F | undefined;
+    sortParams?: SortParams;
+    columns: Column<T>[];
+    tableName: PaginatedTableId;
+    noBatching?: boolean;
+}
+
+export function getTableChunkQueryParams<T, F>({columns, tableName, ...params}: Params<T, F>) {
+    return {
+        ...params,
+        fetchData: params.fetchData as FetchData<T, unknown>,
+        tableName,
+        columnsIds: shouldSendColumnIds(tableName)
+            ? columns.map((column) => column.name).toSorted()
+            : [],
+    };
+}

package/src/components/PaginatedTable/rowLookup.ts

@@ -0,0 +1,63 @@
+import {QueryStatus} from '@reduxjs/toolkit/query';
+
+export interface ChunkLookupState {
+    offset: number;
+    status: QueryStatus;
+    fulfilledTimeStamp?: number;
+}
+
+type ChunkLookupRevision = Array<[offset: number, fulfilledTimeStamp: number | null]>;
+
+function serializeChunkLookupRevision(states: ChunkLookupState[]) {
+    return JSON.stringify(
+        states
+            .map(
+                ({offset, fulfilledTimeStamp}) =>
+                    [offset, fulfilledTimeStamp ?? null] satisfies ChunkLookupRevision[number],
+            )
+            .sort(([leftOffset], [rightOffset]) => leftOffset - rightOffset),
+    );
+}
+
+function parseChunkLookupRevision(revision?: string) {
+    return new Map<number, number | null>(
+        revision ? (JSON.parse(revision) as ChunkLookupRevision) : [],
+    );
+}
+
+function hasChunkAdvanced(
+    {offset, status, fulfilledTimeStamp}: ChunkLookupState,
+    previous: Map<number, number | null>,
+) {
+    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: ChunkLookupState[], revision?: string) {
+    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: ChunkLookupState[], revision?: string) {
+    const previous = parseChunkLookupRevision(revision);
+
+    return states.some((state) => !hasChunkAdvanced(state, previous));
+}

package/src/components/PaginatedTable/useKeyboardNavigation.ts

@@ -0,0 +1,115 @@
+import React from 'react';
+
+import {useTableKeyboardAdapter} from '../TableKeyboardNavigation/TableKeyboardNavigation';
+
+import type {SortParams} from './types';
+
+export const KeyboardRowContext = React.createContext<number | undefined>(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;
+}
+
+function getNavigationRowCount(table: HTMLElement) {
+    const loadedRows = table.querySelectorAll<HTMLElement>('[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,
+}: KeyboardNavigationParams) {
+    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(() => {
+        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<HTMLElement>(`[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?.getBoundingClientRect();
+        const top = rowRect?.top ?? body.getBoundingClientRect().top + focusedIndex * rowHeight;
+        const bottom = rowRect?.bottom ?? 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,
+        },
+    };
+}