import type { ReactNode } from "react";
import type { GroupedListItem, GroupedListSize } from "./GroupedList.tsx";
export type GroupedListRowProps = {
    isTextTruncated: boolean;
    item: GroupedListItem;
    size: GroupedListSize;
};
/**
 * Its own file because each row measures its own text, and a hook
 * cannot run in a loop.
 *
 * ### The tooltip appears only while the text is clipped
 *
 * `useIsTextClipped` is `Badge`'s: an ellipsis leaves no trace in the
 * DOM, so the only way to know a label is cut off is to measure it.
 * A `title` on every row would put a tooltip on forty short names to
 * help the one long one. In a selectable row the text lets the
 * pointer through, so the clipped label's tooltip moves to the button
 * the pointer is actually over.
 *
 * ### The actions wrap; they never squeeze the text
 *
 * The row is a wrapping flex line. The text column asks for 12rem
 * and grows into the rest, and the aside asks for at least 11rem, so
 * in a wide list the aside and the actions sit at the inline end of
 * the same line, and in a list narrower than all of them they drop
 * under the text instead of crushing the label to an ellipsis and
 * nothing. No container query: the wrap is decided by the content
 * itself.
 *
 * ### The layers of a selectable row
 *
 * In tree order, and every one of them positioned, so they paint in
 * that order with no `z-index` to keep in step: the button (bottom),
 * the text and the aside (pointer passes through), the actions
 * (their own targets), and the highlight ring (top, pointer passes
 * through) — the ring is last so a hovered row cannot paint over it.
 */
export declare const GroupedListRow: ({ isTextTruncated, item, size, }: GroupedListRowProps) => ReactNode;
//# sourceMappingURL=GroupedListRow.d.ts.map