import React from 'react'; export interface TableBatchBarLabels { /** "3 selected". Receives the count already formatted for the locale. */ selected?: (count: string) => string; /** "All 128 selected", once every matching row is. */ allSelected?: (total: string) => string; /** "Select all 128". */ selectAll?: (total: string) => string; /** "Clear selection". */ clear?: string; /** Names the actions Toolbar — "Actions for 3 selected rows". */ actions?: (count: string) => string; } export interface TableBatchBarProps { /** How many rows are selected — `useTableSelection`'s `count`. */ count: number; /** How many rows match, across every page. Needed to offer "select all". */ total?: number; /** Whether every matching row is selected — `isAllMatching`. */ isAllMatching?: boolean; /** Select every matching row. Leave it out to keep selection page-by-page. */ onSelectAll?: () => void; /** Select nothing. */ onClear: () => void; /** * The id on the Table this bar acts on. Clearing hands focus to that * table's select-all Checkbox, since the bar — and the button just pressed * — goes away with the selection. */ tableId?: string; /** Every string the bar renders, for translation. English by default. */ labels?: TableBatchBarLabels; /** The actions: Buttons and Dividers, placed in a Toolbar. */ children?: React.ReactNode; className?: string; } /** * TableBatchBar — the count, "select all N", the bulk actions and "clear", * shown while any row of a table is selected. * * ALWAYS MOUNTED, EVEN WHEN NOTHING IS SELECTED * * The count is a `role="status"` live region, and a live region only speaks * about changes to content it already held: one inserted into the page along * with its first message is, in most screen readers, silent. So the bar is * rendered from the start, empty and visually hidden at zero, and the first * ticked box is announced as "1 selected" instead of nothing. * * WHY "SELECT ALL" IS A BUTTON HERE AND NOT THE HEADER CHECKBOX * * See `useTableSelection`: the header selects the rows you can see, and * reaching the ones you cannot is a separate press, offered only once the * whole page is ticked and more rows match than it holds. * * The actions go in a Toolbar — one tab stop, arrows between them — named * for what they act on. */ export declare function TableBatchBar({ count, total, isAllMatching, onSelectAll, onClear, tableId, labels, children, className, }: TableBatchBarProps): React.JSX.Element; export declare namespace TableBatchBar { var displayName: string; } //# sourceMappingURL=TableBatchBar.d.ts.map