ydb-embedded-ui 22.0.0 → 22.1.0

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);

package/src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
 
-import type {Column, DataTableProps, SortOrder} from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, Settings, SortOrder} from '@gravity-ui/react-data-table';
 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');
@@ -16,6 +20,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
@@ -33,6 +40,80 @@ export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'th
 }
 
 export function ResizeableDataTable<T>({
+    onKeyboardActivate,
+    getKeyboardRowKey,
+    getKeyboardRowLabel,
+    rowClassName,
+    wrapperClassName,
+    onSortChange,
+    ...props
+}: ResizeableDataTableProps<T>) {
+    const enabled = useTableNavigationEnabled();
+    if (!enabled) {
+        return (
+            <ResizeableDataTableContent
+                {...props}
+                rowClassName={rowClassName}
+                wrapperClassName={wrapperClassName}
+                onSortChange={onSortChange}
+            />
+        );
+    }
+    return (
+        <DataTableKeyboardNavigation
+            data={props.data}
+            columns={props.columns}
+            settings={props.settings}
+            nullBeforeNumbers={props.nullBeforeNumbers}
+            onActivate={onKeyboardActivate}
+            getRowKey={getKeyboardRowKey}
+            getRowLabel={getKeyboardRowLabel}
+            sortOrder={props.sortOrder}
+        >
+            {({
+                getRowClassName,
+                active,
+                onSort,
+                tableRef,
+                onTableReady,
+                onMouseMove,
+                dynamicInnerRef,
+            }) => (
+                <ResizeableDataTableContent
+                    {...props}
+                    containerRef={tableRef}
+                    onTableReady={onTableReady}
+                    onMouseMove={onMouseMove}
+                    dynamicInnerRef={dynamicInnerRef}
+                    rowClassName={(row, index, isFooter, isHeader) =>
+                        [
+                            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?.(order);
+                    }}
+                />
+            )}
+        </DataTableKeyboardNavigation>
+    );
+}
+
+function ResizeableDataTableContent<T>({
+    containerRef,
+    onTableReady,
+    onMouseMove,
+    dynamicInnerRef,
     columnsWidthLSKey,
     columns,
     settings,
@@ -45,7 +126,12 @@ export function ResizeableDataTable<T>({
     onSortChange,
     data,
     ...props
-}: ResizeableDataTableProps<T>) {
+}: ResizeableDataTableProps<T> & {
+    containerRef?: React.Ref<HTMLDivElement>;
+    onTableReady?: React.Ref<DataTable<T>>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    dynamicInnerRef?: Settings['dynamicInnerRef'];
+}) {
     const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
         useTableResize(columnsWidthLSKey);
 
@@ -68,7 +154,10 @@ export function ResizeableDataTable<T>({
         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?.length) {
@@ -81,17 +170,23 @@ export function ResizeableDataTable<T>({
     const newSettings = React.useMemo(() => {
         return {
             ...settings,
+            ...(dynamicInnerRef ? {dynamicInnerRef} : {}),
             defaultResizeable: true,
         };
-    }, [settings]);
+    }, [settings, dynamicInnerRef]);
 
     if (isLoading || isTableWidthLoading) {
         return <TableSkeleton rows={loadingSkeletonRowsCount} />;
     }
 
     return (
-        <div className={b({'reserve-resize-padding': reserveResizePadding}, wrapperClassName)}>
+        <div
+            ref={containerRef}
+            onMouseMoveCapture={onMouseMove}
+            className={b({'reserve-resize-padding': reserveResizePadding}, wrapperClassName)}
+        >
             <DataTable
+                ref={onTableReady}
                 theme="yandex-cloud"
                 columns={updatedColumns}
                 onResize={setTableColumnsWidth}

package/src/components/ResizeableDataTable/getDataTableOrder.ts

@@ -0,0 +1,18 @@
+import type DataTable from '@gravity-ui/react-data-table';
+import {getSortedData} from '@gravity-ui/react-data-table/build/esm/lib/util';
+
+export function getDataTableOrder<T>(table: DataTable<T>) {
+    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);
+}

package/src/components/Search/Search.tsx

@@ -4,6 +4,7 @@ import type {TextInputProps} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput';
+import {useTableSearch} from '../TableKeyboardNavigation/TableKeyboardNavigation';
 
 import './Search.scss';
 
@@ -15,6 +16,7 @@ interface SearchProps extends Omit<TextInputProps, 'onUpdate' | 'onChange'> {
     width?: React.CSSProperties['width'];
     debounce?: number;
     inputRef?: React.RefObject<HTMLInputElement>;
+    tableFilter?: boolean;
 }
 
 export const Search = ({
@@ -24,8 +26,13 @@ export const Search = ({
     className,
     debounce,
     inputRef,
+    tableFilter = false,
     ...props
 }: SearchProps) => {
+    const ownRef = React.useRef<HTMLInputElement>(null);
+    const controlRef = inputRef ?? ownRef;
+    useTableSearch(controlRef, tableFilter, value);
+
     const onUpdate = React.useCallback(
         (newValue: string) => {
             onChange(newValue);
@@ -38,7 +45,7 @@ export const Search = ({
             debounce={debounce}
             hasClear
             autoFocus
-            controlRef={inputRef}
+            controlRef={controlRef}
             style={{width}}
             className={b(null, className)}
             value={value}

package/src/components/ShardsTable/columns.tsx

@@ -1,4 +1,5 @@
 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';
@@ -53,14 +54,22 @@ export const getTabletIdColumn: GetShardsColumn = () => {
             if (!row.TabletId) {
                 return EMPTY_DATA_PLACEHOLDER;
             }
+            const followerId = Number(row.FollowerId);
+            const isFollower = followerId > 0;
+
             return (
-                <TabletNameWrapper
-                    tabletId={row.TabletId}
-                    followerId={row.FollowerId || undefined}
-                />
+                <Flex alignItems="center" gap={2}>
+                    <Flex minWidth={0}>
+                        <TabletNameWrapper
+                            tabletId={row.TabletId}
+                            followerId={isFollower ? followerId : undefined}
+                        />
+                    </Flex>
+                    {isFollower ? <Text color="secondary">{i18n('value_follower')}</Text> : null}
+                </Flex>
             );
         },
-        width: 220,
+        width: 280,
     };
 };
 export const getNodeIdColumn: GetShardsColumn = () => {

package/src/components/ShardsTable/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "tablet-id": "TabletId",
+  "value_follower": "follower",
   "cpu-cores": "CPUCores",
   "data-size": "DataSize (B)",
   "context_data-size": "The total data size in bytes for a single table shard",

package/src/components/TableKeyboardNavigation/TableKeyboardNavigation.scss

@@ -0,0 +1,16 @@
+.ydb-table-keyboard-navigation__announcement {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    overflow: hidden;
+
+    width: 1px;
+    height: 1px;
+    padding: 0;
+
+    white-space: nowrap;
+
+    border: 0;
+    clip-path: inset(50%);
+}