import type { ReactNode, MouseEvent as ReactMouseEvent } from 'react'; import type { CollectedCellActions, DataTableCellActionsContent } from './CellActions.js'; import type { CollectedColumnActions } from './ColumnActions.js'; import type { DataTableColumnDef } from '../../public.api.js'; import type { DataTableRowData } from '../../row-data-types.js'; /** * Extension interface to extend the TableState of the tanstack table. * @internal */ export interface DataTableUserActionsState { floatingMenuInfo?: { type: 'headerAction' | 'cellAction' | null; headerId: string | null; columnId: string | null; rowId: string | null; x: number; y: number; }; } /** Extension interface to extend the types for the `Table` from the tanstack table */ export interface DataTableUserActionsInstance { /** * @internal * Allows to set the state of the floating menu and the context of the floating menu */ _setFloatingMenuInfo: (headerId: string | null, columnId: string, rowId: string | null, x: number, y: number) => void; /** * Allows global access to the column actions by columnId. */ getUserActionsForColumn: (columnId: string) => DataTableCellOrColumnActions; /** * Allows global access to the cell actions by columnId and rowId identifier. */ getUserActionsForCell: (columnId: string, rowId: string) => DataTableCellOrColumnActions; /** * Access to the floating context menu handler */ getUserActionFloatingMenuContextMenuHandler: () => (event: ReactMouseEvent) => void; } /** * Extension interface to extend the types of the `Cell` from the tanstack table. * @internal */ export interface DataTableUserActionsCell { /** * Defines if the header does have user actions defined */ getCanUserActions: () => boolean; /** * Returns the defined user actions that can be passed to the menu content. */ getUserActions: () => DataTableCellOrColumnActions; } /** * Extension interface to extend the types of the `ColumnDef` from the tanstack table. * @internal */ export interface DataTableUserActionColumnDef { /** * Enables user actions for a specific column definition. * If set to * - `true`, all user actions can be enabled * - `{type: 'chart'}`, only certain user actions can be enabled * - `false`, all user actions are disabled */ enableUserActions?: boolean | { type: 'chart'; }; } /** * Extension interface to extend the TableState of the tanstack table. * @internal */ export interface DataTableUserActionsState { floatingMenuInfo?: { type: 'headerAction' | 'cellAction' | null; headerId: string | null; columnId: string | null; rowId: string | null; x: number; y: number; }; /** * The row ID of the row that currently has an open cell or row actions menu. * Used to maintain hover styles on the row while interacting with the menu. */ openMenuRowId: string | null; } /** * Extension interface to extend the useTable hook options with the UserActions options. * @internal */ export interface DataTableUserActionsOptions { /** * Enables columnActions as a feature on the table. */ enableColumnActions?: boolean; /** Holds a collection of all cell actions to render when necessary. */ cellActions?: CollectedCellActions; /** * Enables cellActions as a feature on the table. */ enableCellActions?: boolean; /** Holds a collection of all column actions to render when necessary. */ columnActions?: CollectedColumnActions; /** * Enables rowActions as a feature on the table. */ enableRowActions?: boolean; /** Holds a collection of all row actions to render when necessary. */ rowActions?: (row: TData, { rowDensity, rowIndex, rowId, }: { rowDensity: 'default' | 'condensed' | 'comfortable'; rowIndex: number; rowId: string; }) => ReactNode; /** * Reference map to get to the original (non-exteded version) of the column * definition passed by the consumer in order to get emit it with a column or cell action. */ consumerColumnDefMap?: Map>; } /** @internal */ export type DataTableCellOrColumnActions = ReactNode[] | null; /** Extension interface to extend the types for the `Table` from the tanstack table */ export interface DataTableUserActionsInstance { /** * @internal * Allows to set the state of the floating menu and the context of the floating menu */ _setFloatingMenuInfo: (headerId: string | null, columnId: string, rowId: string | null, x: number, y: number) => void; /** * Allows global access to the column actions by columnId. */ getUserActionsForColumn: (columnId: string) => DataTableCellOrColumnActions; /** * Allows global access to the cell actions by columnId and rowId identifier. */ getUserActionsForCell: (columnId: string, rowId: string) => DataTableCellOrColumnActions; /** * Access to the floating context menu handler */ getUserActionFloatingMenuContextMenuHandler: () => (event: ReactMouseEvent) => void; /** * Sets the row ID of the row that currently has an open actions menu. * Pass `null` to clear. */ setOpenMenuRowId: (rowId: string | null) => void; /** * Gets the row ID of the row that currently has an open actions menu. */ getOpenMenuRowId: () => string | null; } /** * Extension interface to extend the types of the `Column` from the tanstack table. * @internal */ export interface DataTableUserActionsColumn { /** * Indicates whether this column has any available column actions. */ getCanColumnActions: () => boolean; /** * Returns the defined column actions that can be passed to the menu content. */ getColumnActions: () => DataTableCellOrColumnActions; /** * Returns the defined cell action elements for the column. */ getCellActionsContent: () => Array>; /** * Indicates whether this column has any available cell actions. */ getCanCellActions: () => boolean; } /** * Extension interface to extend the types of the `Cell` from the tanstack table. * @internal */ export interface DataTableUserActionsCell { /** * Returns the defined cell actions that can be passed to the menu content. */ getCellActions: () => DataTableCellOrColumnActions; } /** * Extension interface to extend the types of the `ColumnDef` from the tanstack table. * @internal */ export interface DataTableUserActionColumnDef { /** * Enables user actions for a specific column definition. * If set to * - `true`, all user actions can be enabled * - `{type: 'chart'}`, only certain user actions can be enabled * - `false`, all user actions are disabled */ enableUserActions?: boolean | { type: 'chart'; }; }