import { ReactNode, FC, Ref } from 'react'; import { SortDirection as RaSortDirection, TableHeaderProps as RaTableHeaderProps, ColumnProps as RaColumnProps, TableBodyProps as RaTableBodyProps, RowProps as RaRowProps, CellProps as RaCellProps, Selection } from 'react-aria-components'; import { HTMLChakraProps, UnstyledProp } from '@chakra-ui/react/styled-system'; import { UPDATE_ACTIONS } from './constants'; import { OmitInternalProps } from '../../type-utils'; type DataTableSlotRecipeProps = { /** Whether to truncate cell content with ellipsis */ truncated?: boolean; /** Density variant controlling row height and padding */ density?: "default" | "condensed"; } & UnstyledProp; export type DataTableRootSlotProps = HTMLChakraProps<"div", DataTableSlotRecipeProps>; export type DataTableTableSlotProps = Omit, "translate"> & { translate?: "yes" | "no"; ref?: React.Ref; }; export type DataTableHeaderSlotProps = HTMLChakraProps<"tr">; export type DataTableColumnSlotProps = HTMLChakraProps<"th">; export type DataTableBodySlotProps = HTMLChakraProps<"tbody">; export type DataTableRowSlotProps = HTMLChakraProps<"tr">; export type DataTableCellSlotProps = HTMLChakraProps<"td">; export type SortDirection = RaSortDirection; export type SortDescriptor = { column: string; direction: SortDirection; }; export type DataTableColumnItem> = { id: string; header: ReactNode; accessor: (row: T) => ReactNode; render?: (cell: { value: unknown; row: T; column: DataTableColumnItem; }) => ReactNode; isResizable?: boolean; width?: number | null; defaultWidth?: number | null; minWidth?: number | null; maxWidth?: number | null; sticky?: boolean; isSortable?: boolean; isRowHeader?: boolean; headerIcon?: ReactNode; [key: string]: unknown; }; export type DataTableRowItem> = T & { id: string; isDisabled?: boolean; [key: string]: unknown; }; export type DataTableDensity = "default" | "condensed"; export type DataTableCustomSettings = { icon?: ReactNode; label: ReactNode; panel: ReactNode; }; export type DataTableContextValue> = { columns: DataTableColumnItem[]; rows: DataTableRowItem[]; visibleColumns?: string[]; onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void; renderEmptyState?: RaTableBodyProps["renderEmptyState"]; search?: string; sortDescriptor?: SortDescriptor; selectedKeys?: Selection; defaultSelectedKeys?: Selection; expanded: Set; allowsSorting?: boolean; selectionMode?: "none" | "single" | "multiple"; disallowEmptySelection?: boolean; maxHeight?: string | number; isTruncated?: boolean; density?: "default" | "condensed"; nestedKey?: string; onSortChange?: (descriptor: SortDescriptor) => void; onSelectionChange?: (keys: Selection) => void; onRowClick?: (row: DataTableRowItem) => void; toggleExpand: (id: string) => void; activeColumns: DataTableColumnItem[]; filteredRows: DataTableRowItem[]; sortedRows: DataTableRowItem[]; showExpandColumn: boolean; showSelectionColumn: boolean; pinnedRowIds: string[]; selectRowLabel: string; disabledKeys?: Selection; onRowAction?: (row: DataTableRowItem, action: "click" | "select") => void; isResizable?: boolean; pinnedRows: Set; onPinToggle?: (rowId: string) => void; togglePin: (id: string) => void; onColumnsChange?: (columns: DataTableColumnItem[]) => void; onVisibilityChange?: (visibleColumnIds: string[]) => void; }; export type TableSelectionContextValue = { selectedKeys?: Selection; defaultSelectedKeys?: Selection; onSelectionChange?: (keys: Selection) => void; }; export type CustomSettingsContextValue = { customSettings?: DataTableCustomSettings; }; type DataTableVariantProps = OmitInternalProps; export type DataTableProps> = Omit & { /** * React ref to be forwarded to the root element */ ref?: React.Ref; columns: DataTableColumnItem[]; unstyled?: boolean; rows: DataTableRowItem[]; visibleColumns?: string[]; renderEmptyState?: RaTableBodyProps["renderEmptyState"]; isResizable?: boolean; allowsSorting?: boolean; search?: string; maxHeight?: string | number; sortDescriptor?: SortDescriptor; defaultSortDescriptor?: SortDescriptor; onSortChange?: (descriptor: SortDescriptor) => void; selectionMode?: "none" | "single" | "multiple"; selectionBehavior?: "toggle" | "replace"; disallowEmptySelection?: boolean; selectedKeys?: Selection; defaultSelectedKeys?: Selection; onSelectionChange?: (keys: Selection) => void; onRowClick?: (row: DataTableRowItem) => void; onDetailsClick?: (row: DataTableRowItem) => void; renderDetails?: (row: DataTableRowItem) => ReactNode; children?: ReactNode; density?: DataTableDensity; isTruncated?: boolean; footer?: ReactNode; nestedKey?: string; disabledKeys?: Selection; onRowAction?: (row: DataTableRowItem, action: "click" | "select") => void; /** Controlled expansion state - map of row IDs to their expanded state */ expandedRows?: Set; /** Default expansion state for uncontrolled mode */ defaultExpandedRows?: Set; /** Callback fired when expansion state changes */ onExpandRowsChange?: (expanded: Set) => void; pinnedRows?: Set; defaultPinnedRows?: Set; onPinToggle?: (rowId: string) => void; onColumnsChange?: (columns: DataTableColumnItem[]) => void; onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void; customSettings?: DataTableCustomSettings; }; /**Combined props for the TableHeader element (Chakra styles + Aria behavior). */ export type DataTableHeaderProps = RaTableHeaderProps & DataTableHeaderSlotProps & { ref?: Ref; }; /** Combined props for the Column element (Chakra styles + Aria behavior). */ export type DataTableColumnProps = RaColumnProps & Omit & { ref?: Ref; column?: DataTableColumnItem; unstyled?: boolean; isInternalColumn?: boolean; tabIndex?: number; }; /** Type signature for the `DataTable.Column` sub-component. */ export type DataTableColumnComponent = FC; /** Combined props for the TableBody element (Chakra styles + Aria behavior). */ export type DataTableBodyProps = RaTableBodyProps & DataTableBodySlotProps & { ref?: Ref; }; /** Combined props for the Row element (Chakra styles + Aria behavior). */ export type DataTableRowProps = RaRowProps & DataTableRowSlotProps & { ref?: Ref; row: T; depth?: number; }; /** Combined props for the Cell element (Chakra styles + Aria behavior). */ export type DataTableCellProps = RaCellProps & DataTableCellSlotProps & { ref?: Ref; isDisabled?: boolean; }; /** * Type for column list items used in the DataTable.Manager component * with DraggableList for managing column visibility and order. */ export type ColumnManagerListItem = { id: string; label: React.ReactNode; }; export {};