UNPKG

@payfit/unity-components

Version:

65 lines (64 loc) 2.78 kB
import { default as React, PropsWithChildren } from 'react'; import { Virtualizer } from '@tanstack/react-virtual'; import { CellPosition } from './hooks/useTableKeyboardNavigation.js'; interface TableKeyboardNavigationContextValue { /** The currently focused cell position */ focusedCell: CellPosition; /** Check if a specific cell is currently focused */ isCellFocused: (rowIndex: number, colIndex: number) => boolean; /** Handle keyboard events on table cells */ handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void; /** Handle keyboard events on the table element */ handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void; /** Handle focus events on the table element */ handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void; /** Handle focus events on table cells */ handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void; /** Reference to the table element */ tableRef: React.RefObject<HTMLTableElement>; /** Focus a specific cell by its row and column indices */ focusCell: (rowIndex: number, colIndex: number) => void; /** Focus a specific row by its index */ focusRow: (rowIndex: number) => void; } interface TableContextValue { /** The total number of rows in the table */ rowCount: number; /** The total number of columns in the table */ columnCount: number; /** Keyboard navigation functionality */ keyboardNavigation: TableKeyboardNavigationContextValue; /** Virtualization functionality */ virtualizer?: Virtualizer<HTMLDivElement, Element>; /** Enable virtualization */ enableVirtualization: boolean; } /** * React context for the table component. */ export declare const TableContext: React.Context<TableContextValue>; /** * Hook to access the table context. * @example * ```tsx * const { rowCount, columnCount, keyboardNavigation } = useTableContext() * ``` */ export declare function useTableContext(): TableContextValue; /** * Provider component for the table context. * This component initializes the keyboard navigation and provides it to all table components. * @param props - The TableContext props * @param props.rowCount - The total number of rows in the table * @param props.columnCount - The total number of columns in the table * @param props.children - The children to render * @see {@link TableContextValue} for available props * @example * ```tsx * <TableContextProvider rowCount={10} columnCount={5}> * <Table>...</Table> * </TableContextProvider> * ``` */ export declare function TableContextProvider({ children, ...props }: PropsWithChildren<Omit<TableContextValue, 'keyboardNavigation'>>): import("react/jsx-runtime").JSX.Element; export {};