import type { ReactNode } from "react";
import type { SortDirection } from "../SortableTableHeader/SortableTableHeader.tsx";
export type DataTableColumn<Row> = {
    /**
     * Lands on this column's `<th>` **and** on every `<td>` under it,
     * which is what makes it the place a width goes: `w-32` on one
     * column is the only sizing this component has, and it is
     * deliberately the consumer's to write.
     */
    className?: string;
    /**
     * The column's name. Rendered twice on purpose — once in the
     * header row, and once inside each cell as the label the stacked
     * layout needs — so it has to be a node that can be rendered more
     * than once. The in-cell copy is `aria-hidden`, because the
     * `columnheader` association already says it to assistive
     * technology.
     */
    header: ReactNode;
    /**
     * Whether this column offers a sort control. A column without one
     * renders a plain `<th>` with **no** `aria-sort` at all, which is
     * the attribute's way of saying "this column cannot be sorted" —
     * `"none"` would claim the opposite.
     */
    isSortable?: boolean;
    /** Stable id. Also the `columnKey` a sort request comes back with. */
    key: string;
    renderCell: (row: Row) => ReactNode;
};
export type DataTableSort = {
    columnKey: string;
    direction: SortDirection;
};
export type DataTableSelection<Row> = {
    /**
     * The accessible name of a row's checkbox. A tick box called
     * "Select row" seven times over is seven identical controls in a
     * screen reader's forms list, so this is required rather than
     * defaulted — it is normally the same value the first column
     * renders.
     */
    getRowLabel: (row: Row) => string;
    /** The whole next set, never a delta. */
    onSelectionChange: (selectedRowKeys: string[]) => void;
    selectAllLabel?: string;
    selectedRowKeys: readonly string[];
};
export type DataTableReflowAt = "md" | "lg" | "xl";
export type DataTableProps<Row> = {
    /** Auto uses the container width; stacked keeps the labelled list at every width. */
    layout?: "auto" | "stacked";
    /** Dense tables can reflow earlier: md=32rem, lg=48rem, xl=64rem. */
    reflowAt?: DataTableReflowAt;
    className?: string;
    columns: readonly DataTableColumn<Row>[];
    /**
     * What fills the table when `rows` is empty — an `EmptyState`,
     * normally. Rendered in a `colSpan` cell **inside** the table, so
     * the header row and the sort the reader just performed are still
     * there. Swapping the whole table out for a message is how a
     * filter that matches nothing takes the controls away with it.
     */
    emptyState?: ReactNode;
    getRowKey: (row: Row) => string;
    /**
     * Shows the `<caption>`. Off by default: most tables sit under a
     * heading the page already renders, and printing the name twice is
     * how a table ends up with two titles.
     */
    isLabelVisible?: boolean;
    /**
     * The table's accessible name, as a real `<caption>`. Required,
     * because a screen reader listing "table with 6 columns, 40 rows"
     * and no name is a table nobody can choose to enter.
     */
    label: string;
    onSortChange?: (sort: DataTableSort) => void;
    rows: readonly Row[];
    selection?: DataTableSelection<Row>;
    /**
     * Which column is sorted and which way — **the fact, not the
     * doing.** The rows arrive already ordered; this only says which
     * header lights up and what `aria-sort` announces.
     */
    sort?: DataTableSort;
};
/**
 * **A table that reflows instead of scrolling, sized by its
 * container.**
 *
 * ### It composes `SortableTableHeader`; it does not replace it
 *
 * The header cell shipped first, on its own, and stays on its own:
 * it is already in a published 1.0.0 with a consumer of its own
 * (mux-magic's `FileExplorerModal`), and subsuming it would be a
 * breaking change bought for nothing. Every sortable column here
 * renders that component, so there is exactly one place in the fleet
 * that knows `aria-sort` belongs on the `<th>` while the click
 * target is a `<button>` inside it, and one place to fix if that is
 * ever wrong.
 *
 * That composition is also why this is a **real `<table>`**. A grid
 * of `<div role="row">`s is the other reasonable choice, and it
 * cannot host a `<th>` at all — so it would have meant either
 * duplicating the header or breaking it.
 *
 * ### The narrow layout reflows; it never scrolls sideways
 *
 * Below `--cq-md` (32rem) each row stops being a row and becomes a
 * labelled block — the column name beside its value, one pair per
 * line — while the header row wraps into a strip of sort controls
 * that stays reachable. Above it, a normal table.
 *
 * The two rejected alternatives are worth naming because both are
 * common:
 *
 *  - **Horizontal scroll.** WCAG 2.2 SC 1.4.10 (Reflow) exists
 *    because of it, and the consumer this was built for bans it
 *    outright ("No horizontal scroll, ever"). A pan surface also
 *    hides the *existence* of the columns off-screen.
 *  - **Dropping low-priority columns.** Cheapest to build and the
 *    only one that loses data: the assignee column does not come
 *    back, and there is no gesture that asks for it.
 *
 * ### Container queries, never a media query
 *
 * The width that matters is the element's, not the window's. A table
 * in a three-up board lane is narrow on a 4K monitor, and the owner
 * of this fleet browses zoomed in — a 1500px window at 175% zoom is
 * ~860 effective pixels, so a `@media (max-width: …)` is measuring
 * something that is not the question. The `@container` is declared
 * on the wrapper and queried by its descendants, because a container
 * query never matches the element that declares it.
 *
 * ### What it does not own
 *
 * **Sorting the data.** `sort` says which column is sorted;
 * `onSortChange` asks for a different one. Comparing two values is
 * per-column app logic — a date, a title, a priority enum with an
 * order that is not alphabetical — and a table that sorted its own
 * rows would have to be handed a comparator per column to do it,
 * which is the same code in a worse place. The rows arrive ordered.
 *
 * **The selected set.** `selection.selectedRowKeys` is authoritative
 * and lives with the consumer, because every use of a selection —
 * the count in a toolbar, the bulk action, the undo — is outside
 * this component. That is the opposite of `Checkbox`, and for a
 * stated reason: the platform owns one checkbox's checkedness, and
 * nothing at all owns "these five rows".
 *
 * **Column widths.** No drag handle, no measured layout. The browser's
 * own auto table layout sizes columns to their content, which is a
 * better algorithm than anything worth reimplementing, and
 * `column.className` overrides it. Drag-to-resize is a *persistence*
 * question (whose widths, stored where, keyed on what) that a
 * component cannot answer for its consumer.
 *
 * **Virtualisation.** Deliberately absent; see the decision record.
 * Every row is in the DOM, which is what keeps the accessibility
 * tree honest and the auto column layout possible.
 */
export declare const DataTable: <Row>({ className, columns, emptyState, getRowKey, isLabelVisible, label, layout, reflowAt, onSortChange, rows, selection, sort, }: DataTableProps<Row>) => ReactNode;
//# sourceMappingURL=DataTable.d.ts.map