import type { OnChangeFn } from '@tanstack/react-table'; import type { ComponentProps, PropsWithChildren, ReactNode } from 'react'; import type { DataTestId } from '../../../../core/types/data-props.js'; import type { StylingProps } from '../../../../core/types/styling-props.js'; import type { DATA_TABLE_DETAILS_ROW_IDENTIFIER, DATA_TABLE_DETAILS_ROW_PARITY } from '../../constants.js'; import type { DataTableRowData } from '../../row-data-types.js'; /** * Props for the `DataTable.ExpandableRow` template slot. * @public */ export interface DataTableExpandableRowBaseProps { /** * Define a render function as the child of this slot selection to * control what is rendered in the expanded row section. */ children: (params: { row: TData; }) => ReactNode; /** * Callback triggered when the state of the expanded row is changed. */ onExpandedRowsChange?: (expandedRows: Record) => void; /** * Allows you to disable individual rows from expanding by returning true from the * passed function. */ disableExpand?: (row: TData) => boolean; } /** * @public */ export interface DataTableExpandableRowControlledProps extends DataTableExpandableRowBaseProps { /** * Controlled state for the expanded rows of the DataTable. */ expandedRows?: true | Record; /** * Uncontrolled state for the expanded rows of the DataTable. */ defaultExpandedRows?: never; } /** * @public */ export interface DataTableExpandableRowUncontrolledProps extends DataTableExpandableRowBaseProps { /** * Controlled state for the expanded rows of the DataTable. */ expandedRows?: never; /** * Uncontrolled state for the expanded rows of the DataTable. */ defaultExpandedRows?: true | Record; } /** * @public */ export type DataTableExpandableRowProps = DataTableExpandableRowControlledProps | DataTableExpandableRowUncontrolledProps; /** * Wrapper helper props for the DataTable.ExpandableRow. * @public */ export interface DataTableExpandableRowWrapperProps extends PropsWithChildren, StylingProps, DataTestId, ComponentProps<'div'> { } /** * Represents the parity of a row (even or odd). * @internal */ export type RowParity = 'even' | 'odd'; /** * Structure for the expanded row state of the DataTable. * @internal */ export type DataTableRowDetailState = true | Record; /** * Extension interface to extend the types from the tanstack table options. * @internal */ export interface DataTableRowDetailsOptions { /** * Determines if the row details feature is enabled for this table instance. */ enableRowDetails?: true; /** * Stores the rowDetails template for rendering in the expandable. */ rowDetailsTemplate?: (params: { row: TData; }) => ReactNode; /** * Callback when the row details state changes. */ onRowDetailsOpenChange?: OnChangeFn; /** * RowModel option for the extended Details row model. */ getRowDetailsRowModel?: (table: any) => () => any; /** * Callback to check if a row is disabled or not. */ rowDetailsDisableRow?: (row: TData) => boolean; } /** * Extension interface to extend the types from the tanstack table instance. * @internal */ export interface DataTableRowDetailsInstance { /** * Internal identification id for the table instance to connect aria-controls * between the expander button and the row details. * @internal */ rowDetailsTableId: string; /** * Internal storage for the row model including the row details rows. * @internal */ _getRowDetailsRowModel?: () => any; /** * Allows access to the row details model if available. */ getRowDetailsRowModel: () => any; /** * Allows access to the row model coming before the row details. */ getPreRowDetailsRowModel: () => any; } /** * @internal * Extension interface to extend the types from the tanstack table instance. */ export interface DataTableRowDetailsRow { /** * Determines if the details row for a particular row is open. */ getIsDetailsOpen: () => boolean; /** * Determines if the details for this row can be shown. */ getCanOpenDetails: () => boolean; /** * Control command to toggle the state of the rowDetails. */ toggleDetails: () => void; /** * Defines the grid position for the row details row. */ getRowDetailsGridPosition: () => { gridColumnStart: number; gridColumnEnd: number | `span ${number}`; }; /** * Returns the aria control id to connect the expanding button to the * row details wrapper. */ getRowDetailsAriaControlsId: () => string; /** * Identifier for the row parity in case of details row this is set * in the row model. * @internal */ [DATA_TABLE_DETAILS_ROW_PARITY]?: RowParity; /** * Identifier if the row is a details row. * @internal */ [DATA_TABLE_DETAILS_ROW_IDENTIFIER]?: boolean; } /** * Extensions interface for the tanstack table state. * @internal */ export interface DataTableRowDetailsState { rowDetails?: DataTableRowDetailState; }