ydb-embedded-ui 21.1.0 → 22.1.0

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

@@ -12,7 +12,6 @@
   "yes": "Yes",
   "no": "No",
   "group-generation": "Group Generation",
-  "latency": "Latency",
   "allocation-units": "Allocation Units",
   "context_allocation-units": "The number of channels used by tablets to write data to the storage group.",
   "state": "State",

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%);
+}

package/src/components/TableKeyboardNavigation/TableKeyboardNavigation.tsx

@@ -0,0 +1,519 @@
+import React from 'react';
+
+import {cn} from '../../utils/cn';
+
+import i18n from './i18n';
+import {KEYBOARD_FOCUSED_ROW_CLASS_NAME, shouldHandleKeyboardNavigation} from './utils';
+
+import './TableKeyboardNavigation.scss';
+
+const tableKeyboardNavigationCn = cn('ydb-table-keyboard-navigation');
+
+interface Scope {
+    enabled: boolean;
+    searches: Set<HTMLInputElement>;
+    containerRef?: React.RefObject<HTMLElement>;
+    adapters: Set<Adapter>;
+    activeAdapter?: Adapter;
+    listeners: Set<() => void>;
+    announcementRef: React.RefObject<HTMLDivElement>;
+}
+
+interface Adapter {
+    element: HTMLElement;
+    scope: Scope;
+    getFirst: () => number | undefined;
+    getLast: () => number | undefined;
+    getNext: (index: number, step: number) => number | undefined;
+    getSelected: () => number | undefined;
+    select: (index: number | undefined) => void;
+    activate?: (index: number) => void;
+}
+
+const ScopeContext = React.createContext<Scope | null>(null);
+export const TableKeyboardNavigationGroupContext = React.createContext<string | undefined>(
+    undefined,
+);
+
+function isVisible(element: HTMLElement) {
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < window.innerHeight;
+}
+
+function resetScope(scope: Scope) {
+    scope.activeAdapter = undefined;
+    scope.adapters.forEach((adapter) => adapter.select(undefined));
+    updateAnnouncement(scope, '');
+}
+
+function updateAnnouncement(scope: Scope, text: string) {
+    const announcement = scope.announcementRef.current;
+    if (announcement) {
+        announcement.textContent = text;
+    }
+}
+
+function notifyScope(scope: Scope) {
+    scope.listeners.forEach((listener) => listener());
+}
+
+function isAvailable(adapter: Adapter) {
+    const {scope, element} = adapter;
+    return (
+        scope.enabled &&
+        element.isConnected &&
+        element.getClientRects().length > 0 &&
+        getComputedStyle(element).visibility === 'visible' &&
+        !element.closest('[inert], [hidden], [aria-hidden="true"]') &&
+        (!scope.containerRef?.current || scope.containerRef.current.contains(element))
+    );
+}
+
+function resolveTable(scope: Scope, target: HTMLElement) {
+    const boundary = target.closest('[data-table-keyboard-scope]');
+    if (boundary && boundary !== scope.containerRef?.current) {
+        return undefined;
+    }
+    const {activeAdapter} = scope;
+    const available = Array.from(scope.adapters).filter(
+        (adapter) => isAvailable(adapter) && adapter.getFirst() !== undefined,
+    );
+    const direct = available.find((adapter) => adapter.element.contains(target));
+    const fromSearch = scope.searches.has(target as HTMLInputElement);
+    const fromDocument = target === document.body || target === document.documentElement;
+    if (target.closest('input, [role="textbox"], [role="searchbox"]') && !fromSearch) {
+        return undefined;
+    }
+    if (!direct && !fromSearch && !fromDocument) {
+        return undefined;
+    }
+    if (fromDocument) {
+        const searches = Array.from(
+            document.querySelectorAll<HTMLInputElement>('[data-table-keyboard-search]'),
+        ).filter((search) => !search.disabled && isVisible(search));
+        if (searches.length !== 1 || !scope.searches.has(searches[0])) {
+            return undefined;
+        }
+    }
+    const tables = available.sort((a, b) => {
+        // eslint-disable-next-line no-bitwise
+        return a.element.compareDocumentPosition(b.element) & Node.DOCUMENT_POSITION_FOLLOWING
+            ? -1
+            : 1;
+    });
+    const table =
+        direct ??
+        (activeAdapter && tables.includes(activeAdapter)
+            ? activeAdapter
+            : (tables.find((adapter) => isVisible(adapter.element)) ?? tables[0]));
+    if (!table) {
+        return undefined;
+    }
+    return {table, tables};
+}
+
+function handleKeyDown(scope: Scope, event: KeyboardEvent) {
+    if (
+        !scope.enabled ||
+        !Array.from(scope.searches).some((search) => search.isConnected && !search.disabled) ||
+        event.defaultPrevented ||
+        event.isComposing ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey ||
+        !['ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
+        !(event.target instanceof HTMLElement) ||
+        !shouldHandleKeyboardNavigation(event.target)
+    ) {
+        return;
+    }
+    const resolved = resolveTable(scope, event.target);
+    if (!resolved) {
+        if (event.key !== 'Enter' && scope.searches.has(event.target as HTMLInputElement)) {
+            event.preventDefault();
+        }
+        return;
+    }
+    const {table, tables} = resolved;
+    if (event.key === 'Enter') {
+        if (table.activate) {
+            event.preventDefault();
+            const index = table.getSelected() ?? table.getFirst();
+            if (!event.repeat && index !== undefined) {
+                table.activate(index);
+            }
+        }
+        return;
+    }
+    event.preventDefault();
+    moveSelection(table, tables, event.key === 'ArrowDown' ? 1 : -1);
+}
+
+function moveSelection(table: Adapter, tables: Adapter[], step: number) {
+    const selected = table.getSelected();
+    const initial = selected ?? table.getFirst();
+    if (initial === undefined) {
+        return;
+    }
+    let destination = table;
+    let index = table.getNext(initial, step);
+    if (index === undefined && selected !== undefined) {
+        const adjacent = tables[tables.indexOf(table) + step];
+        const adjacentIndex = step > 0 ? adjacent?.getFirst() : adjacent?.getLast();
+        if (adjacent && adjacentIndex !== undefined) {
+            destination = adjacent;
+            index = adjacentIndex;
+        }
+    }
+    table.scope.activeAdapter = destination;
+    for (const adapter of table.scope.adapters) {
+        adapter.select(adapter === destination ? (index ?? initial) : undefined);
+    }
+}
+
+export function TableKeyboardNavigationScope({
+    children,
+    enabled = true,
+    containerRef,
+    inherit = false,
+    resetKey,
+}: {
+    children: React.ReactNode;
+    enabled?: boolean;
+    containerRef?: React.RefObject<HTMLElement>;
+    inherit?: boolean;
+    resetKey?: string;
+}) {
+    const parent = React.useContext(ScopeContext);
+    const own = React.useMemo<Scope>(
+        () => ({
+            enabled: enabled && parent?.enabled !== false,
+            containerRef,
+            searches: new Set(),
+            adapters: new Set(),
+            listeners: new Set(),
+            announcementRef: React.createRef<HTMLDivElement>(),
+        }),
+        [enabled, parent, containerRef],
+    );
+    const scope = inherit && enabled && parent ? parent : own;
+    const previousResetKey = React.useRef(resetKey);
+    React.useLayoutEffect(() => {
+        if (previousResetKey.current !== resetKey) {
+            previousResetKey.current = resetKey;
+            resetScope(scope);
+        }
+    }, [scope, resetKey]);
+    React.useEffect(() => {
+        if (scope !== own) {
+            return undefined;
+        }
+        const onKeyDown = (event: KeyboardEvent) => handleKeyDown(scope, event);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [scope, own, parent]);
+    return (
+        <ScopeContext.Provider value={scope}>
+            {children}
+            {scope === own && scope.enabled && (
+                <div
+                    ref={scope.announcementRef}
+                    className={tableKeyboardNavigationCn('announcement')}
+                    role="status"
+                    aria-live="polite"
+                    aria-atomic="true"
+                />
+            )}
+        </ScopeContext.Provider>
+    );
+}
+
+export function useTableNavigationEnabled() {
+    const scope = React.useContext(ScopeContext);
+    const subscribe = React.useCallback(
+        (listener: () => void) => {
+            scope?.listeners.add(listener);
+            return () => {
+                scope?.listeners.delete(listener);
+            };
+        },
+        [scope],
+    );
+    const getSnapshot = React.useCallback(
+        () => Boolean(scope?.enabled && scope.searches.size),
+        [scope],
+    );
+    return React.useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+
+export function useTableSearch(
+    ref: React.RefObject<HTMLInputElement>,
+    enabled: boolean,
+    value?: string,
+) {
+    const scope = React.useContext(ScopeContext);
+    React.useEffect(() => {
+        const input = ref.current;
+        if (!scope || !scope.enabled || !enabled || !input) {
+            return undefined;
+        }
+        scope.searches.add(input);
+        input.dataset.tableKeyboardSearch = '';
+        notifyScope(scope);
+        return () => {
+            scope.searches.delete(input);
+            delete input.dataset.tableKeyboardSearch;
+            resetScope(scope);
+            notifyScope(scope);
+        };
+    }, [scope, ref, enabled]);
+    React.useEffect(() => {
+        if (enabled && scope) {
+            resetScope(scope);
+        }
+    }, [scope, enabled, value]);
+}
+
+interface AdapterOptions {
+    tableRef: React.RefObject<HTMLElement>;
+    getFirst: Adapter['getFirst'];
+    getLast: Adapter['getLast'];
+    getNext: Adapter['getNext'];
+    activate?: Adapter['activate'];
+    resetDeps: React.DependencyList;
+    isValidIndex?: (index: number) => boolean;
+    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;
+}
+
+type RowSelection = {
+    index: number;
+    key?: string | number;
+    lookupRevision?: string;
+    pending?: boolean;
+};
+type Selection = RowSelection | undefined;
+const subscribeToNothing = () => () => {};
+
+export function useTableKeyboardAdapter(options: AdapterOptions) {
+    const scope = React.useContext(ScopeContext);
+    const group = React.useContext(TableKeyboardNavigationGroupContext);
+    const [scrollRevision, setScrollRevision] = React.useState(0);
+    const [hover, setHover] = React.useState(false);
+    const selectedRef = React.useRef<Selection>();
+    const snapshotRef = React.useRef<Selection>();
+    const optionsRef = React.useRef(options);
+    const [element, setElement] = React.useState<HTMLElement | null>(null);
+    const ref = React.useCallback(
+        (node: HTMLElement | null) => {
+            (options.tableRef as React.MutableRefObject<HTMLElement | null>).current = node;
+            setElement(node);
+        },
+        [options.tableRef],
+    );
+    optionsRef.current = options;
+    const getSelection = React.useCallback((): Selection => {
+        const current = selectedRef.current;
+        let next = current;
+        if (current) {
+            const {
+                findRowIndex,
+                getRowKey,
+                getRowLookupRevision,
+                isRowLookupPending,
+                isValidIndex,
+                getLast,
+            } = optionsRef.current;
+            const matchedIndex =
+                current.key !== undefined &&
+                getRowKey?.(current.index) !== current.key &&
+                findRowIndex
+                    ? findRowIndex(current.key, current.index)
+                    : current.index;
+            if (matchedIndex === undefined && isRowLookupPending?.(current.lookupRevision)) {
+                next = {...current, pending: true};
+            } else {
+                const position = matchedIndex ?? current.index;
+                const index = isValidIndex?.(position) === false ? getLast() : position;
+                next =
+                    index === undefined
+                        ? undefined
+                        : {
+                              index,
+                              key: getRowKey?.(index),
+                              lookupRevision: getRowLookupRevision?.(current.lookupRevision),
+                          };
+            }
+        }
+        const previous = snapshotRef.current;
+        if (
+            previous &&
+            next &&
+            previous.index === next.index &&
+            previous.key === next.key &&
+            previous.lookupRevision === next.lookupRevision &&
+            previous.pending === next.pending
+        ) {
+            return previous;
+        }
+        snapshotRef.current = next;
+        return next;
+    }, []);
+    const selection = React.useSyncExternalStore(
+        options.subscribe ?? subscribeToNothing,
+        getSelection,
+        getSelection,
+    );
+    React.useLayoutEffect(() => {
+        selectedRef.current = selection;
+    }, [selection]);
+    const select = React.useCallback((index: number | undefined) => {
+        const next =
+            index === undefined
+                ? undefined
+                : {
+                      index,
+                      key: optionsRef.current.getRowKey?.(index),
+                      lookupRevision: optionsRef.current.getRowLookupRevision?.(),
+                  };
+        const previous = selectedRef.current;
+        selectedRef.current = next;
+        if (previous?.index !== next?.index || previous?.key !== next?.key) {
+            setScrollRevision((revision) => revision + 1);
+        }
+        setHover(false);
+    }, []);
+    const getSelected = React.useCallback(() => getSelection()?.index, [getSelection]);
+    const previousResetDeps = React.useRef(options.resetDeps);
+    React.useLayoutEffect(() => {
+        const previous = previousResetDeps.current;
+        previousResetDeps.current = options.resetDeps;
+        if (
+            previous.length !== options.resetDeps.length ||
+            options.resetDeps.some((value, index) => !Object.is(value, previous[index]))
+        ) {
+            select(undefined);
+        }
+    }, [options.resetDeps, select]);
+    React.useEffect(() => {
+        if (!scope || !element) {
+            return undefined;
+        }
+        const adapter: Adapter = {
+            element,
+            scope,
+            getFirst: () => optionsRef.current.getFirst(),
+            getLast: () => optionsRef.current.getLast(),
+            getNext: (index, step) => optionsRef.current.getNext(index, step),
+            getSelected,
+            select,
+            get activate() {
+                const activate = optionsRef.current.activate;
+                if (!activate || !getSelection()?.pending) {
+                    return activate;
+                }
+                return () => undefined;
+            },
+        };
+        scope.adapters.add(adapter);
+        return () => {
+            scope.adapters.delete(adapter);
+            if (scope.activeAdapter === adapter) {
+                scope.activeAdapter = undefined;
+                updateAnnouncement(scope, '');
+            }
+        };
+    }, [scope, element, select, getSelected]);
+    React.useEffect(() => {
+        if (!scope || !element || scope.activeAdapter?.element !== element) {
+            return undefined;
+        }
+        updateAnnouncement(scope, '');
+        const index = selection?.index;
+        if (hover || selection?.pending || index === undefined) {
+            return undefined;
+        }
+        const announceRow = () => {
+            if (
+                scope.activeAdapter?.element !== element ||
+                scope.activeAdapter.getSelected() !== index
+            ) {
+                return false;
+            }
+            const row = element.querySelector<HTMLElement>(
+                `tbody tr.${KEYBOARD_FOCUSED_ROW_CLASS_NAME}`,
+            );
+            const {getRowLabel} = optionsRef.current;
+            const text = (
+                getRowLabel
+                    ? (getRowLabel(index) ?? '')
+                    : (row?.innerText ?? row?.textContent ?? '')
+            )
+                .replace(/\s+/g, ' ')
+                .trim();
+            const lastIndex = optionsRef.current.getLast();
+            if (!text || lastIndex === undefined) {
+                return false;
+            }
+            updateAnnouncement(
+                scope,
+                group
+                    ? i18n('value_selected-row-in-group', {
+                          group,
+                          position: index + 1,
+                          total: lastIndex + 1,
+                          text,
+                      })
+                    : i18n('value_selected-row', {
+                          position: index + 1,
+                          total: lastIndex + 1,
+                          text,
+                      }),
+            );
+            return true;
+        };
+        if (announceRow()) {
+            return undefined;
+        }
+        const observer = new MutationObserver(() => {
+            if (announceRow()) {
+                observer.disconnect();
+            }
+        });
+        observer.observe(element, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        return () => observer.disconnect();
+    }, [
+        scope,
+        element,
+        selection?.index,
+        selection?.key,
+        selection?.pending,
+        scrollRevision,
+        hover,
+        group,
+    ]);
+    return {
+        ref,
+        scrollRevision,
+        selected: selection?.index,
+        focusedIndex: hover || selection?.pending ? undefined : selection?.index,
+        onMouseMove: (event: React.MouseEvent<HTMLElement>) => {
+            if (selectedRef.current && (event.target as HTMLElement).closest('tbody tr')) {
+                setHover(true);
+            }
+        },
+    };
+}

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

@@ -0,0 +1,4 @@
+{
+  "value_selected-row": "Selected row {{position}} of {{total}}: {{text}}",
+  "value_selected-row-in-group": "Group {{group}}. Selected row {{position}} of {{total}}: {{text}}"
+}

package/src/components/TableKeyboardNavigation/i18n/index.ts

@@ -0,0 +1,5 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+export default registerKeysets('table-keyboard-navigation', {en});

package/src/components/TableKeyboardNavigation/utils.ts

@@ -0,0 +1,36 @@
+import {cn} from '../../utils/cn';
+
+export const KEYBOARD_FOCUSED_ROW_CLASS_NAME = cn('ydb-keyboard-focused-row')();
+export const KEYBOARD_FOCUS_ACTIVE_CLASS_NAME = cn('ydb-keyboard-focus-active')();
+
+function isTextInput(target: HTMLElement) {
+    if (target.tagName !== 'INPUT') {
+        return false;
+    }
+
+    const input = target as HTMLInputElement;
+
+    return ['text', 'search', 'email', 'url', 'tel', 'password', ''].includes(input.type);
+}
+
+export function shouldHandleKeyboardNavigation(target: HTMLElement | null) {
+    if (!target) {
+        return true;
+    }
+
+    if (
+        target.closest(
+            'textarea,button,a,select,[contenteditable]:not([contenteditable="false"]),[role="button"],[role="spinbutton"],[role="slider"],[role="checkbox"],[role="radio"],[role="radiogroup"],[role="switch"],[role="link"],[role="combobox"],[role="listbox"],[role="option"],[role="menu"],[role="menuitem"],[role="tree"],[role="treeitem"],[role="tablist"],[role="tab"],[role="grid"]',
+        )
+    ) {
+        return false;
+    }
+
+    const input = target.closest('input');
+
+    if (input instanceof HTMLElement) {
+        return isTextInput(input);
+    }
+
+    return true;
+}

package/src/components/TableWithControlsLayout/TableWithControlsLayout.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {Flex} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
+import {TableKeyboardNavigationScope} from '../TableKeyboardNavigation/TableKeyboardNavigation';
 import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
 import {useTableScroll} from './useTableScroll';
@@ -16,6 +17,9 @@ interface TableWithControlsLayoutItemProps {
     renderExtraControls?: () => React.ReactNode;
     className?: string;
     fullHeight?: boolean;
+    keyboardNavigation?: boolean;
+    inheritKeyboardNavigation?: boolean;
+    keyboardNavigationResetKey?: string;
 }
 
 export interface TableWrapperProps extends Omit<TableWithControlsLayoutItemProps, 'children'> {
@@ -29,8 +33,29 @@ export const TableWithControlsLayout = ({
     children,
     className,
     fullHeight,
+    keyboardNavigation = true,
+    inheritKeyboardNavigation = false,
+    keyboardNavigationResetKey,
 }: TableWithControlsLayoutItemProps) => {
-    return <div className={b({'full-height': fullHeight}, className)}>{children}</div>;
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    return (
+        <TableKeyboardNavigationScope
+            enabled={keyboardNavigation}
+            containerRef={containerRef}
+            inherit={inheritKeyboardNavigation}
+            resetKey={keyboardNavigationResetKey}
+        >
+            <div
+                ref={containerRef}
+                data-table-keyboard-scope={
+                    inheritKeyboardNavigation && keyboardNavigation ? undefined : ''
+                }
+                className={b({'full-height': fullHeight}, className)}
+            >
+                {children}
+            </div>
+        </TableKeyboardNavigationScope>
+    );
 };
 
 TableWithControlsLayout.Controls = function TableControls({