ydb-embedded-ui 22.0.0 → 22.2.0

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/tableCounts.ts

@@ -0,0 +1,50 @@
+import isEqual from 'lodash/isEqual';
+
+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 function tableCountsReducer(
+    state: TableCountsState,
+    action: TableCountsAction,
+): TableCountsState {
+    // 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: TableCountsState;
+    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 = action.initialEntitiesCount ?? 0;
+            nextState.foundEntities = action.initialEntitiesCount ?? 1;
+        }
+    }
+
+    return isEqual(state, nextState) ? state : nextState;
+}

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,
+        },
+    };
+}

package/src/components/ResizeableDataTable/DataTableKeyboardNavigation.tsx

@@ -0,0 +1,194 @@
+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';
+
+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');
+
+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 function DataTableKeyboardNavigation<T>({
+    data,
+    columns,
+    settings,
+    nullBeforeNumbers,
+    onActivate,
+    getRowKey,
+    getRowLabel,
+    sortOrder,
+    children,
+}: Props<T>) {
+    const tableRef = React.useRef<HTMLDivElement>(null);
+    const [internalSort, setInternalSort] = React.useState<SortOrder | SortOrder[]>();
+    const [table, setTable] = React.useState<DataTable<T> | null>(null);
+    const [order, setOrder] = React.useState<{data: T[]; indices: number[]}>({data, indices: []});
+    const {indices} = order;
+    const virtualList = React.useRef<DynamicInnerRefT | null>(null);
+    const dynamicInnerRef = React.useCallback(
+        (value: DynamicInnerRefT | null) => {
+            virtualList.current = value;
+            const consumerRef = settings?.dynamicInnerRef;
+            if (typeof consumerRef === 'function') {
+                consumerRef(value);
+            } else if (consumerRef) {
+                (consumerRef as React.MutableRefObject<DynamicInnerRefT | null>).current = value;
+            }
+        },
+        [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<string | number, number>();
+        order.indices.forEach((sourceIndex, position) => {
+            const key = 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?.(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(() => {
+        if (keyboard.scrollRevision === scrolledRevision.current) {
+            return undefined;
+        }
+        if (keyboard.selected === undefined) {
+            return undefined;
+        }
+        const sourceIndex = indices[keyboard.selected];
+        if (sourceIndex === undefined) {
+            return undefined;
+        }
+        virtualList.current?.scrollAround(keyboard.selected);
+        const revealRow = () => {
+            const rowClassName = b('row', {index: String(sourceIndex)});
+            const row = tableRef.current?.querySelector<HTMLElement>(
+                `tbody tr.${rowClassName.split(' ').join('.')}`,
+            );
+            if (!row) {
+                return false;
+            }
+            const positions: Array<{element: HTMLElement; left: number}> = [];
+            for (let element = row.parentElement; element; element = element.parentElement) {
+                positions.push({element, left: element.scrollLeft});
+            }
+            row.scrollIntoView({block: 'nearest', behavior: 'instant'});
+            const head = tableRef.current?.querySelector<HTMLElement>('.data-table__sticky_head');
+            const overlap = head
+                ? head.getBoundingClientRect().bottom - row.getBoundingClientRect().top
+                : 0;
+            if (overlap > 0) {
+                positions
+                    .find(
+                        ({element}) =>
+                            element.scrollHeight > element.clientHeight &&
+                            /auto|scroll/.test(getComputedStyle(element).overflowY),
+                    )
+                    ?.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,
+    });
+}

package/src/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);