@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
53 lines (52 loc) • 2.3 kB
TypeScript
import type { CellInstance, ReactTableHooks } from '../types/index.js';
/**
* A plugin hook that enables F2-based cell editing for interactive elements inside a cell.
*
* To __ensure the hook works correctly__, make sure that:
*
* - Each column containing interactive elements has the `interactiveElementName` property set. __Note:__ This property is also used to describe the cell's content for screen readers.
* - The callback Ref returned by `useF2CellEdit.useCallbackRef` is attached to every interactive element within the cell.
*
* It manages focus, keyboard navigation, and `tabindex` for cells with interactive content:
* - Pressing `F2` moves focus between the cell container and its first interactive element.
* - Pressing `Tab` on a focused header cell moves focus to the body cell in the same column at the last focused body row (or the first row if none was focused).
* - Pressing `Shift+Tab` on a focused body cell moves focus back to the header cell of the same column.
* - Updates the cell's `aria-label` with the interactive element's name for accessibility.
* - Prevents standard navigation keys from interfering when editing a cell.
*
* @example
* ```tsx
* import type {
* AnalyticalTableCellInstance,
* AnalyticalTableColumnDefinition,
* InputDomRef,
* AnalyticalTablePropTypes,
* } from '@ui5/webcomponents-react';
* import { AnalyticalTableHooks, AnalyticalTable, Input } from '@ui5/webcomponents-react';
*
* const columns: AnalyticalTableColumnDefinition[] = [
* {
* Header: 'Input',
* id: 'input',
* Cell: (props: AnalyticalTableCellInstance) => {
* const callbackRef = AnalyticalTableHooks.useF2CellEdit.useCallbackRef<InputDomRef>(props);
* return <Input ref={callbackRef} />;
* },
* interactiveElementName: 'Input',
* },
* ];
*
* const tableHooks: AnalyticalTablePropTypes['tableHooks'] = [AnalyticalTableHooks.useF2CellEdit];
*
* function TableWithInput() {
* return <AnalyticalTable data={data} columns={columns} tableHooks={tableHooks} />;
* }
* ```
*
* @since 2.14.0
*/
export declare const useF2CellEdit: {
(hooks: ReactTableHooks): void;
pluginName: string;
useCallbackRef<T extends HTMLElement = HTMLElement>(props: CellInstance): (node: T | null) => void;
};