import * as React from "react"; import type { BreakpointProp, FlushProp, LabelProp, TableCellIndentProp, TableColumnPriorityProp, TablePresetProp, WidthProp } from "../../props/vocabulary/index.js"; export type TableProps = React.HTMLAttributes & { /** * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table * wider than its container scrolls inside a keyboard-reachable wrapper (WCAG 2.1.1 / axe * `scrollable-region-focusable`). */ scrollable?: boolean; /** * Reach for this whenever the table carries rowSpan/colSpan merged cells — without column rules * the merge relationships are unreadable. Colour comes from the `--table-border-color` token * (default `--border`). */ bordered?: boolean; /** * Zebra rows — every even LOGICAL body row wears `--table-row-striped-background`, so a wide list * row is easy to follow across its columns. An expanded detail row (a `` * under its record) is skipped when counting and takes its record's stripe. Leave it out to * inherit the theme default (`--table-row-striped-alpha`, `0%` unless a service turns striping on * for every table); `true` / `false` override that default for this table only. */ striped?: boolean; /** * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain * table exactly as it is. */ preset?: TablePresetProp; /** * PER-INSTANCE column measures for `preset="action-collection"`, in place of re-pointing its * `--table-action-collection-*` knobs from a consumer stylesheet. * * Those knobs are global by design, and that is exactly the problem: two collections on the same * screen do not share a column budget. A console that widened `actions` globally so a Japanese * status badge would stop breaking to one character per line — an SC 1.4.10 reflow failure — * collapsed a sibling table's name column to ~15px in the same change. The only way out was a * scoped class in consumer CSS, and the comment that shipped with it said so: "until the package * can express a per-table measure, the retune stays on the collection needing it". * * Emitted as inline custom properties, the same contract `Flex width` uses for a call-site * measurement: the value is a raw length the design system cannot know, so it rides in `style` * and leaves `data-column-widths` on the DOM so each one stays countable. */ columnWidths?: { /** `--table-action-collection-actions-width` — the row-action column above the collapse step. */ actions?: string; /** `--table-action-collection-actions-width-compact` — the same column below it. */ actionsCompact?: string; /** `--table-action-collection-meta-width-compact` — a `meta`-priority column below the step. */ metaCompact?: string; /** * `--table-action-collection-min-inline-size-compact` — the legibility FLOOR the compact tier * keeps before the wrapper scrolls. The preset sizes its compact tier for one column per * priority; a collection carrying several of the same priority needs a wider floor or its * free-text column is squeezed toward zero. */ minInlineSizeCompact?: string; }; /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */ collapseBelow?: BreakpointProp; /** * Accessible name for the horizontal-scroll REGION — the `tabindex="0"` wrapper a keyboard user * lands on to scroll a table wider than its container, NOT the `` itself (pass `aria-label` * for that; it reaches the table element as it always has). * * Optional on purpose. A consumer is never forced to invent a name for every table: left out, the * region takes the localized `dataTable.scrollRegion` default ("Scrollable table"), which is what * a screen-reader user needs to hear anyway — that the arrow keys now scroll something. Pass a * plain string when the page can say WHICH table ("Pending approvals"); a non-string node cannot * be an `aria-label`, so it falls back to the default (the PermissionMatrix `label` contract). * * The region is only announced while it HAS overflow to reach: no overflow, no tab stop, no role * and no name, because a focus stop that scrolls nothing is noise. (gh#817) */ label?: LabelProp; }; /** * The scroll region's accessible name. A `label` is only usable as an `aria-label` when it is a * plain string, and no consumer is obliged to supply one at all — so anything else takes the * localized default, which still tells the user what the stop is for. Shared with `DataTable`, so * both tables name their region the same way. */ export declare function scrollRegionLabel(label: LabelProp | undefined, t: (key: string) => string): string; export declare const Table: React.ForwardRefExoticComponent & { /** * Whether the Table owns its own horizontal-scroll region (default `true`). When `true` a table * wider than its container scrolls inside a keyboard-reachable wrapper (WCAG 2.1.1 / axe * `scrollable-region-focusable`). */ scrollable?: boolean; /** * Reach for this whenever the table carries rowSpan/colSpan merged cells — without column rules * the merge relationships are unreadable. Colour comes from the `--table-border-color` token * (default `--border`). */ bordered?: boolean; /** * Zebra rows — every even LOGICAL body row wears `--table-row-striped-background`, so a wide list * row is easy to follow across its columns. An expanded detail row (a `` * under its record) is skipped when counting and takes its record's stripe. Leave it out to * inherit the theme default (`--table-row-striped-alpha`, `0%` unless a service turns striping on * for every table); `true` / `false` override that default for this table only. */ striped?: boolean; /** * Named collection contract. `"default"` (the default) emits no attribute and keeps the plain * table exactly as it is. */ preset?: TablePresetProp; /** * PER-INSTANCE column measures for `preset="action-collection"`, in place of re-pointing its * `--table-action-collection-*` knobs from a consumer stylesheet. * * Those knobs are global by design, and that is exactly the problem: two collections on the same * screen do not share a column budget. A console that widened `actions` globally so a Japanese * status badge would stop breaking to one character per line — an SC 1.4.10 reflow failure — * collapsed a sibling table's name column to ~15px in the same change. The only way out was a * scoped class in consumer CSS, and the comment that shipped with it said so: "until the package * can express a per-table measure, the retune stays on the collection needing it". * * Emitted as inline custom properties, the same contract `Flex width` uses for a call-site * measurement: the value is a raw length the design system cannot know, so it rides in `style` * and leaves `data-column-widths` on the DOM so each one stays countable. */ columnWidths?: { /** `--table-action-collection-actions-width` — the row-action column above the collapse step. */ actions?: string; /** `--table-action-collection-actions-width-compact` — the same column below it. */ actionsCompact?: string; /** `--table-action-collection-meta-width-compact` — a `meta`-priority column below the step. */ metaCompact?: string; /** * `--table-action-collection-min-inline-size-compact` — the legibility FLOOR the compact tier * keeps before the wrapper scrolls. The preset sizes its compact tier for one column per * priority; a collection carrying several of the same priority needs a wider floor or its * free-text column is squeezed toward zero. */ minInlineSizeCompact?: string; }; /** Defaults to `"sm"` (40rem). Ignored while `preset` is `"default"`. */ collapseBelow?: BreakpointProp; /** * Accessible name for the horizontal-scroll REGION — the `tabindex="0"` wrapper a keyboard user * lands on to scroll a table wider than its container, NOT the `
` itself (pass `aria-label` * for that; it reaches the table element as it always has). * * Optional on purpose. A consumer is never forced to invent a name for every table: left out, the * region takes the localized `dataTable.scrollRegion` default ("Scrollable table"), which is what * a screen-reader user needs to hear anyway — that the arrow keys now scroll something. Pass a * plain string when the page can say WHICH table ("Pending approvals"); a non-string node cannot * be an `aria-label`, so it falls back to the default (the PermissionMatrix `label` contract). * * The region is only announced while it HAS overflow to reach: no overflow, no tab stop, no role * and no name, because a focus stop that scrolls nothing is noise. (gh#817) */ label?: LabelProp; } & React.RefAttributes>; export declare const TableHeader: React.ForwardRefExoticComponent & React.RefAttributes>; export declare const TableBody: React.ForwardRefExoticComponent & React.RefAttributes>; export declare const TableRow: React.ForwardRefExoticComponent & React.RefAttributes>; /** * Column priority carried by BOTH the header cell and the body cells of a column. Read only by * `Table preset="action-collection"` below its collapse step, where it selects the column's * token-owned measure; unset columns take the remaining space. */ type TableCellPriority = { priority?: TableColumnPriorityProp; }; /** Logical column alignment, wrapping and measure, shared by header and body cells. * Numeric cells use tabular figures and end alignment unless align is explicit. */ type TableCellAxes = { align?: "start" | "center" | "end"; numeric?: boolean; wrap?: boolean; width?: WidthProp; }; /** * Rendered into the DOM unconditionally (so it exists for the preset's CSS to reveal) but visually * hidden above the collapse step, where the real `
` already carries the label — an ordinary * table with no `label` prop supplied gains no extra markup. */ type TableCellLabel = { label?: React.ReactNode; }; export declare const TableHead: React.ForwardRefExoticComponent, "align"> & TableCellPriority & TableCellAxes & React.RefAttributes>; /** * The cell's CONTENT owns its inset — an expanded detail panel, a nested table, a full-bleed media * strip. The cell drops its own padding so the child reaches the cell edges; without it the only * route was a zero-padding utility at the call site, which no service theme can reach. */ type TableCellFlush = { flush?: FlushProp; }; /** * Hierarchy depth. The indent is `--table-cell-space-x + depth × --table-cell-indent-space-step`, * computed in table-layout.css off the level this prop publishes as `--table-cell-indent-level`, * so a service retunes (or flattens) the step without touching JSX — the route TreeSelect's * `--tree-select-depth` already takes. Logical, so an RTL tree indents from the inline start. */ type TableCellIndent = { indent?: TableCellIndentProp; }; export declare const TableCell: React.ForwardRefExoticComponent, "align"> & TableCellPriority & TableCellLabel & TableCellFlush & TableCellIndent & TableCellAxes & React.RefAttributes>; export {};