@ahrowe/ui 0.30.0 → 0.31.0

package/dist/types/common/virtualList/useColumnResize.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { VirtualListColumn } from './virtualList.types';
+interface UseColumnResizeArgs<T> {
+    columns?: VirtualListColumn<T>[];
+    /**
+     * The columns currently rendered, in order. A ref rather than a value because
+     * the visible set is derived one hook later, and only the freeze reads it, at
+     * event time.
+     */
+    visibleColumnsRef: React.RefObject<VirtualListColumn<T>[]>;
+    resizableColumns: boolean;
+    /** Controlled widths. When provided, internal state is ignored. */
+    columnWidths?: Record<string, number>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
+    /** Restores widths saved under this key. Uncontrolled mode only. */
+    persistColumnsKey?: string;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+}
+export interface UseColumnResizeResult<T> {
+    widths: Record<string, number>;
+    /**
+     * True once every visible column has an exact px width. Nothing moves at that
+     * moment, but from then on the layout is pixels rather than `fr`/`fit`.
+     */
+    isFrozen: boolean;
+    isResizing: boolean;
+    /** Drops every user width and hands the layout back to the column definitions. */
+    reset: () => void;
+    /** Whether this column takes a resize at all, by handle or by keyboard. */
+    isResizable: (col: VirtualListColumn<T>) => boolean;
+    /** Widens (or, negative, narrows) one column. The keyboard entry point. */
+    resizeBy: (key: string, delta: number) => void;
+    /** Takes one column down to its minimum. */
+    resizeToMin: (key: string) => void;
+    /** Sizes one column to its widest rendered cell. */
+    autoFit: (key: string) => void;
+    /** Pointer props for one column's handle, or null when that column can't be resized. */
+    getHandleProps: (col: VirtualListColumn<T>) => React.HTMLAttributes<HTMLDivElement> | null;
+}
+/**
+ * User column resizing: the width state, and a drag that doesn't go through
+ * React.
+ *
+ * A pointer move writes the dragged column's custom property straight onto the
+ * list element. The header and every row read that same property, so one DOM
+ * write resizes all of them in a single layout pass. Going through state
+ * instead would re-render the header plus every visible row on every frame, and
+ * the handle would trail the cursor by one frame, which is the whole difference
+ * between this feeling attached to the pointer and feeling cheap. React is told
+ * once, on release.
+ *
+ * The first resize **freezes** every visible column to its measured width. A
+ * `fr` track can't express "this one column is now 240px" without the others
+ * silently absorbing the difference, and once they hit their minimum the dragged
+ * edge stops following the cursor, which is the worst moment for it to happen.
+ * Frozen, the table is exact pixels and simply scrolls horizontally instead.
+ */
+export declare function useColumnResize<T>({ columns, visibleColumnsRef, resizableColumns, columnWidths, onColumnWidthsChange, persistColumnsKey, rootRef, }: UseColumnResizeArgs<T>): UseColumnResizeResult<T>;
+export {};

package/dist/types/common/virtualList/useColumns.d.ts

@@ -8,6 +8,10 @@ interface UseColumnsArgs<T> {
     onVisibleColumnsChange?: (keys: string[]) => void;
     persistColumnsKey?: string;
     showColumnToggle?: boolean;
+    /** User-set column widths, from `useColumnResize`. */
+    userWidths: Record<string, number>;
+    /** Whether those widths have taken over the layout. */
+    isFrozen: boolean;
     rootRef: React.RefObject<HTMLDivElement | null>;
     /** Visible-window bounds — re-measure `fit` columns as new cells scroll in. */
     startIndex: number;
@@ -16,10 +20,16 @@ interface UseColumnsArgs<T> {
     /** Re-measure `fit` columns when the container width settles (e.g. after a route transition). */
     containerWidth: number;
 }
-interface UseColumnsResult<T> {
+export interface UseColumnsResult<T> {
     hasColumns: boolean;
     visibleColumns: VirtualListColumn<T>[];
     columnTemplate: string | undefined;
+    /**
+     * Custom properties for the list element: the total width of a frozen layout,
+     * as a `calc()` over the per-column properties so that rewriting one width
+     * during a drag updates the total without any bookkeeping.
+     */
+    widthVars: React.CSSProperties;
     shouldShowToggle: boolean;
     effectiveVisible: Set<string>;
     /** How many default-visible columns the user has hidden (excludes defaultHidden). */
@@ -38,5 +48,5 @@ interface UseColumnsResult<T> {
  * `fit`-column width measurement that pins one shared px track across the header
  * and every row grid so they stay aligned.
  */
-export declare function useColumns<T>({ columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, showColumnToggle, rootRef, startIndex, endIndex, containerHeight, containerWidth, }: UseColumnsArgs<T>): UseColumnsResult<T>;
+export declare function useColumns<T>({ columns, items, multiSelect, visibleColumnKeys, onVisibleColumnsChange, persistColumnsKey, showColumnToggle, userWidths, isFrozen, rootRef, startIndex, endIndex, containerHeight, containerWidth, }: UseColumnsArgs<T>): UseColumnsResult<T>;
 export {};

package/dist/types/common/virtualList/useHeaderNavigation.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+interface StationProps {
+    tabIndex: number;
+    ref: (el: HTMLElement | null) => void;
+    onFocus: () => void;
+}
+interface UseHeaderNavigationResult {
+    getStationProps: (index: number) => StationProps;
+    /** True when the key moved the focus, so the caller stops handling it. */
+    handleNavigationKey: (event: React.KeyboardEvent, index: number) => boolean;
+}
+/**
+ * Roving tab stop across the header: the select-all cell, every column header,
+ * and the column menu are stations, and arrow keys move between them.
+ *
+ * Without it each of those is its own tab stop, so a table with eight sortable,
+ * resizable columns takes seventeen presses of Tab before the data. The stops
+ * also belong together: they all act on the same header, which is exactly the
+ * case the roving pattern exists for.
+ */
+export declare function useHeaderNavigation(stationCount: number): UseHeaderNavigationResult;
+export {};

package/dist/types/common/virtualList/useRowNavigation.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { VirtualListScrollOptions } from './virtualList.types';
+interface UseRowNavigationArgs {
+    enabled: boolean;
+    rowCount: number;
+    /** Row tops, from the windowing engine, used for paging and visibility. */
+    offsets: number[];
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    headerRef: React.RefObject<HTMLDivElement | null>;
+    scrollToIndex: (index: number, options?: VirtualListScrollOptions) => void;
+    /** Row index the active row starts on, normally the selected one. */
+    initialIndex: number;
+    multiSelect: boolean;
+    /** Undefined when the consumer gave the rows no activation of their own. */
+    onActivate?: (index: number) => void;
+    onToggleSelect: (index: number) => void;
+}
+interface UseRowNavigationResult {
+    /** Index of the row the arrow keys are on, or -1 when navigation is off. */
+    activeIndex: number;
+    /** Keeps the arrow keys where the pointer last was. */
+    setActiveIndex: (index: number) => void;
+    /**
+     * The row currently being used, or -1. Its controls are in the tab order and
+     * it stays mounted even when it scrolls out of the window.
+     */
+    enteredIndex: number;
+    containerProps: {
+        tabIndex?: number;
+        onKeyDown?: (event: React.KeyboardEvent) => void;
+        onFocus?: (event: React.FocusEvent) => void;
+        onBlur?: (event: React.FocusEvent) => void;
+    };
+}
+/**
+ * Arrow-key navigation over the rows, with the tab stop on the list itself.
+ *
+ * The stop cannot sit on the active row, the way a roving tabindex normally
+ * would: a virtualized row unmounts when it scrolls out of the window, and the
+ * list would be left with no tab stop at all (the same reason `Tree` puts its
+ * stop on its container). Instead the list keeps the focus and points at the
+ * active row with `aria-activedescendant`.
+ *
+ * Keys are only handled when the list element itself has the focus. A cell may
+ * hold an input, a dropdown or a button, and every one of them wants the arrows,
+ * Enter and Space for itself. `F2` steps into such a row and `Escape` steps back
+ * out, which is the one pair of keys that does work from inside a cell.
+ */
+export declare function useRowNavigation({ enabled, rowCount, offsets, rootRef, headerRef, scrollToIndex, initialIndex, multiSelect, onActivate, onToggleSelect, }: UseRowNavigationArgs): UseRowNavigationResult;
+export {};

package/dist/types/common/virtualList/useSorting.d.ts

@@ -0,0 +1,26 @@
+import { VirtualListColumn, VirtualListSort } from './virtualList.types';
+interface UseSortingArgs<T> {
+    items: T[];
+    columns?: VirtualListColumn<T>[];
+    /** Controlled sort. When provided, internal state is ignored. */
+    sort?: VirtualListSort | null;
+    defaultSort?: VirtualListSort | null;
+    onSortChange?: (sort: VirtualListSort | null) => void;
+}
+interface UseSortingResult<T> {
+    /** `items`, reordered when the sorted column carries a comparator. */
+    rows: T[];
+    effectiveSort: VirtualListSort | null;
+    /** True only when this hook reordered the rows, not when it merely reported. */
+    isSorted: boolean;
+    handleHeaderSort: (key: string) => void;
+}
+/**
+ * Header sorting, controlled or uncontrolled. Whether the list reorders the data
+ * or only reports the click is the column's decision, not a prop: a column with
+ * `sortValue`/`compare` is sorted here, a bare `sortable` one is left alone so a
+ * server-side sort can own it. Sorting a paginated list here would silently
+ * order only the rows loaded so far.
+ */
+export declare function useSorting<T>({ items, columns, sort, defaultSort, onSortChange, }: UseSortingArgs<T>): UseSortingResult<T>;
+export {};

package/dist/types/common/virtualList/useVirtualWindow.d.ts

@@ -30,14 +30,7 @@ interface UseVirtualWindowResult {
     showLoadMoreSpinner: boolean;
     /** The scroll-related imperative methods, for the component to compose into
      *  the forwarded handle alongside column controls. */
-    scrollApi: Omit<VirtualListHandle, 'recalculateColumns'>;
+    scrollApi: Omit<VirtualListHandle, 'recalculateColumns' | 'resetColumnWidths'>;
 }
-/**
- * The generic virtualization engine: viewport measurement, per-row height
- * caching, offset/visible-range computation, scroll coalescing, scroll
- * anchoring on height changes, infinite-load triggering, and the imperative
- * scroll handle. Mode-agnostic — knows nothing about columns, selection or
- * dragging.
- */
 export declare function useVirtualWindow<T>({ items, keys, getItemKey, estimatedRowHeight, rowGap, overscan, onLoadMore, loadMoreThreshold, isLoading, }: UseVirtualWindowArgs<T>): UseVirtualWindowResult;
 export {};

package/dist/types/common/virtualList/virtualList.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { VirtualListProps, VirtualListHandle } from './virtualList.types';
-export { buildOffsets, findStartIndex, getVisibleRange, resolveReorderTarget, resolveTreeDropTarget, lastDescendantIndex, buildColumnTemplate, } from './virtualList.utils';
+export { buildOffsets, findStartIndex, getVisibleRange, resolveReorderTarget, resolveTreeDropTarget, lastDescendantIndex, buildColumnTemplate, compareSortValues, isColumnSortable, isEmptySortValue, nextSort, sortItems, } from './virtualList.utils';
 declare const VirtualList: <T>(props: VirtualListProps<T> & {
     ref?: React.Ref<VirtualListHandle>;
 }) => React.ReactElement | null;

package/dist/types/common/virtualList/virtualList.types.d.ts

@@ -12,6 +12,15 @@ export type ColumnWidthFit = {
     type: 'fit';
 };
 export type ColumnWidthSpec = ColumnWidthFixed | ColumnWidthFlex | ColumnWidthFit;
+/** A value the built-in comparator can order. */
+export type SortValue = string | number | boolean | Date | null | undefined;
+export type SortDirection = 'asc' | 'desc';
+/** The column being sorted and the direction. `null` anywhere this appears means unsorted. */
+export interface VirtualListSort {
+    /** `key` of the sorted column. */
+    key: string;
+    direction: SortDirection;
+}
 export interface VirtualListColumn<T> {
     key: string;
     label: ReactNode;
@@ -39,6 +48,31 @@ export interface VirtualListColumn<T> {
      * no column remains toggleable.
      */
     hideFromToggle?: boolean;
+    /**
+     * Value this column is ordered by. Its presence makes the column sortable and
+     * lets the list sort `items` itself. `null`/`undefined`/`NaN` sort last, in
+     * both directions.
+     */
+    sortValue?: (item: T) => SortValue;
+    /**
+     * Ascending comparator, for an order `sortValue` can't express. Wins over
+     * `sortValue`, and also makes the column sortable. Descending negates its
+     * result, so it has no equivalent of the empty-values-last rule.
+     */
+    compare?: (a: T, b: T) => number;
+    /**
+     * Floor this column can be dragged to, in px. Default 48.
+     */
+    minWidth?: number;
+    /** Opt this column out of resizing while the list has `resizableColumns`. */
+    resizable?: boolean;
+    /**
+     * Makes the header clickable without the list reordering anything: the sort is
+     * only reported through `onSortChange`. For server-side or paginated sorting,
+     * where sorting the loaded rows would silently sort part of the data. Ignored
+     * when `sortValue` or `compare` is given.
+     */
+    sortable?: boolean;
 }
 export interface VirtualListScrollOptions {
     /** Where the target row lands in the viewport. Default: 'start'. */
@@ -62,8 +96,13 @@ export interface VirtualListHandle {
      * set (those reset automatically) — e.g. a cell's content grew in place.
      */
     recalculateColumns: () => void;
+    /**
+     * Drops every user-set column width and returns the table to the widths its
+     * columns declare. Also clears them from `persistColumnsKey` storage.
+     */
+    resetColumnWidths: () => void;
 }
-export type VirtualListSlots = 'root' | 'header' | 'headerCell' | 'headerToggle' | 'togglePopover' | 'toggleItem' | 'body' | 'row' | 'cell' | 'selectCell' | 'loadingIndicator' | 'dropIndicator' | 'columnChip';
+export type VirtualListSlots = 'root' | 'header' | 'headerCell' | 'headerToggle' | 'headerSort' | 'sortIcon' | 'resizeHandle' | 'activeRow' | 'togglePopover' | 'toggleItem' | 'toggleReset' | 'body' | 'row' | 'cell' | 'selectCell' | 'loadingIndicator' | 'dropIndicator' | 'columnChip';
 /** Where a tree-reorder drop lands relative to the row it is over. */
 export type TreeDropPosition = 'before' | 'inside' | 'after';
 /** The resolved drop target reported to `onTreeDrop`. */
@@ -125,6 +164,16 @@ export interface VirtualListProps<T> extends HtmlProps {
     getItemKey?: (item: T, index: number) => string | number;
     /** Called when a row is clicked. */
     onRowClick?: (item: T, index: number) => void;
+    /**
+     * Arrow-key navigation over the rows, on by default. The list takes one tab
+     * stop, the arrows move an active row, Enter fires `onRowClick` and Space
+     * toggles the selection in `multiSelect`. Keys are ignored while the focus is
+     * inside a cell, so a control in a row keeps its own.
+     *
+     * Turn it off for a list whose rows already handle their own keys, the way
+     * `Tree` does.
+     */
+    keyboardNavigation?: boolean;
     /** Controlled visible column keys. When provided, internal state is ignored. */
     visibleColumnKeys?: string[];
     /** Called when the user toggles a column in the popover. */
@@ -137,6 +186,38 @@ export interface VirtualListProps<T> extends HtmlProps {
      * to their `defaultHidden` value rather than the saved set.
      */
     persistColumnsKey?: string;
+    /**
+     * Controlled sort state. `null` is unsorted (source order). When provided,
+     * internal state is ignored.
+     */
+    sort?: VirtualListSort | null;
+    /** Initial sort in uncontrolled mode. Default: `null`. */
+    defaultSort?: VirtualListSort | null;
+    /**
+     * Called on each header click with the next step of the asc → desc → unsorted
+     * cycle. The list reorders `items` itself for columns that define `sortValue`
+     * or `compare`; for a `sortable` column it only reports, and sorting the data
+     * is yours to do.
+     */
+    onSortChange?: (sort: VirtualListSort | null) => void;
+    /**
+     * Lets the user drag a column's right edge to resize it, double-click it to fit
+     * the column to its content, or resize it from the keyboard once the handle has
+     * focus. The first resize pins every visible column to its current pixel width
+     * (nothing moves at that moment), after which the table is an exact pixel
+     * layout that scrolls horizontally rather than redistributing space.
+     */
+    resizableColumns?: boolean;
+    /** Controlled column widths in px, keyed by column key. */
+    columnWidths?: Record<string, number>;
+    /**
+     * Text of the gear-menu entry that undoes the user's column widths (default
+     * `'Reset column widths'`). The only text this component renders itself, so
+     * it is also the only one a localised app has to pass.
+     */
+    resetColumnWidthsLabel?: ReactNode;
+    /** Called with the full width map whenever the user resizes or auto-fits a column. */
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
     /** Show the gear column-toggle button in the header. Default: true when columns present. */
     showColumnToggle?: boolean;
     /**

package/dist/types/common/virtualList/virtualList.utils.d.ts

@@ -1,4 +1,4 @@
-import { ColumnWidthSpec, VirtualListColumn } from './virtualList.types';
+import { ColumnWidthSpec, SortValue, VirtualListColumn, VirtualListSort } from './virtualList.types';
 export declare function buildOffsets(keys: (string | number)[], heightsMap: Map<string | number, number>, estimatedRowHeight: number, rowGap?: number): {
     offsets: number[];
     totalHeight: number;
@@ -34,11 +34,93 @@ export declare function buildColumnTemplate(columns: {
     key: string;
     width: ColumnWidthSpec;
 }[], fitWidths?: Record<string, number>): string;
+/**
+ * What counts as a control inside a row, and so what gets held out of the tab
+ * order while its row is not the one being used.
+ *
+ * `[tabindex="-1"]` is deliberately excluded. The row's own select checkbox sits
+ * there and is reached with Space, and an element the consumer has already taken
+ * out of the tab order stays out.
+ */
+export declare const ROW_FOCUSABLE_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** Marks an element parked at `tabindex="-1"` by the list rather than by the consumer. */
+export declare const ROW_PARKED_ATTRIBUTE = "data-vl-parked";
+/**
+ * What `F2` steps into: the controls of a row, including the ones parked out of
+ * the tab order. Without the second half it would find nothing at all in a row
+ * whose controls are custom elements carrying a `tabindex`, because parking them
+ * is exactly what takes them out of the selector above.
+ */
+export declare const ROW_ENTER_SELECTOR = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [data-vl-parked]";
+/**
+ * The content width of one cell, in px. `scrollWidth` reports the true content
+ * width even when the cell is pinned narrower than its content, which is what
+ * lets a column recover from having been measured while it was still empty.
+ *
+ * Two corrections on top of it, both only resolved when they can apply, so the
+ * hot scroll path stays cheap for a plain in-flow cell:
+ *
+ * - `scrollWidth` includes the left padding but drops the right one once the
+ *   content overflows, so add it back.
+ * - A cell whose only children are FontAwesome icons reports just its padding:
+ *   their boxes overflow via `overflow: visible`, carry no intrinsic width, and
+ *   so never count towards `scrollWidth` (right-aligned, they even overflow
+ *   into negative offsets). Only then walk the descendants for their true span.
+ *   Once a real width pins, the cell is no longer collapsed and this stops.
+ */
+export declare function measureCellWidth(el: HTMLElement): number;
+/** Attribute selector for one column's cells. Column keys are arbitrary strings. */
+export declare function columnCellSelector(key: string): string;
+/** Floor for a user-resized column, unless the column raises it with `minWidth`. */
+export declare const MIN_COLUMN_WIDTH = 48;
+/**
+ * Width given to a column that gains one while the layout is already frozen,
+ * i.e. one revealed from the gear menu after the first resize. Every visible
+ * column has to be an exact px track for the total width (and so the horizontal
+ * scroll range) to be exact, and there is nothing measured to go on yet.
+ */
+export declare const DEFAULT_FROZEN_WIDTH = 160;
+/**
+ * Custom property carrying one column's width. Column keys are arbitrary
+ * strings, so anything a custom property can't contain is folded to `_`; two
+ * keys that differ only in those characters would share a track.
+ */
+export declare function columnWidthVar(key: string): string;
+/** Px width for a column the user hasn't sized, at the moment the layout freezes. */
+export declare function resolveFrozenWidth<T>(col: VirtualListColumn<T>): number;
+/**
+ * Grid template for a frozen layout: every column reads its own custom property,
+ * so a drag can rewrite one width with a single DOM write and have the header
+ * and every row follow in the same layout pass, without React rendering.
+ */
+export declare function buildFrozenTemplate<T>(columns: VirtualListColumn<T>[]): string;
 export declare const COLUMN_STORAGE_PREFIX = "ahroweui:virtuallist:columns:";
 export interface PersistedColumns {
     visible: string[];
     known: string[];
+    /** User-resized column widths in px. Absent in entries saved before resizing existed. */
+    widths?: Record<string, number>;
 }
 export declare function loadPersistedColumns(persistKey: string | undefined): PersistedColumns | null;
 /** Whether a column should start visible, honouring saved settings then `defaultHidden`. */
 export declare function isColumnInitiallyVisible<T>(col: VirtualListColumn<T>, persisted: PersistedColumns | null): boolean;
+/** Values with no order of their own, parked at the end of the list either way. */
+export declare function isEmptySortValue(value: SortValue): boolean;
+/**
+ * Ascending comparison of two non-empty `sortValue` results. Dates and booleans
+ * are normalised to numbers; anything with a string on either side goes through
+ * the collator, which is also what makes a mixed-type column produce a stable
+ * (if arbitrary) order rather than a random one.
+ */
+export declare function compareSortValues(a: SortValue, b: SortValue): number;
+/** Whether a header click on this column should do anything at all. */
+export declare function isColumnSortable<T>(col: VirtualListColumn<T>): boolean;
+/** The asc → desc → unsorted cycle a header click steps through. */
+export declare function nextSort(current: VirtualListSort | null, key: string): VirtualListSort | null;
+/**
+ * Returns `items` reordered by `sort`, or the same array reference when nothing
+ * applies: no sort, no such column, or a `sortable` column that only reports
+ * (its data is sorted by the consumer). Callers rely on that identity to tell
+ * "the list sorted this" from "the list left it alone".
+ */
+export declare function sortItems<T>(items: T[], sort: VirtualListSort | null | undefined, columns: VirtualListColumn<T>[] | undefined): T[];

package/dist/types/common/virtualList/virtualListHeader.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+import { UseColumnsResult } from './useColumns';
+import { UseColumnResizeResult } from './useColumnResize';
+import { SlotClassNames, SlotStyles } from '../types/slots.types';
+import { VirtualListColumn, VirtualListSlots, VirtualListSort } from './virtualList.types';
+interface VirtualListHeaderProps<T> {
+    headerRef: React.RefObject<HTMLDivElement | null>;
+    /** Every column, including hidden ones: the toggle menu lists them all. */
+    columns: VirtualListColumn<T>[];
+    cols: UseColumnsResult<T>;
+    resize: UseColumnResizeResult<T>;
+    sort: VirtualListSort | null;
+    onSort: (key: string) => void;
+    multiSelect: boolean;
+    allSelected: boolean;
+    someSelected: boolean;
+    onSelectAll: () => void;
+    resetColumnWidthsLabel: React.ReactNode;
+    classNames?: SlotClassNames<VirtualListSlots>;
+    styles?: SlotStyles<VirtualListSlots>;
+}
+/**
+ * The table-mode header row: one cell per visible column, each optionally a sort
+ * button and a resize handle, plus the column-visibility menu pinned to the
+ * right. It is a grid with the same template as every row, which is what keeps
+ * the columns aligned across the separate grids.
+ *
+ * The whole header is a single tab stop (see `useHeaderNavigation`). Focus lands
+ * on a header cell rather than on the button inside it, so every key a column
+ * understands is handled in one place: Enter or Space sorts, Alt plus the arrow
+ * keys resizes, Alt+Home and Alt+End take the column to its minimum or to its
+ * content width.
+ */
+declare function VirtualListHeader<T>({ headerRef, columns, cols, resize, sort, onSort, multiSelect, allSelected, someSelected, onSelectAll, resetColumnWidthsLabel, classNames, styles: slotStyles, }: VirtualListHeaderProps<T>): React.JSX.Element;
+export default VirtualListHeader;

package/dist/types/common/virtualList/virtualRow.d.ts

@@ -2,11 +2,24 @@ import { default as React } from 'react';
 import { TreeDropPosition } from './virtualList.types';
 export interface VirtualRowProps {
     index: number;
+    /** Referenced by the list's `aria-activedescendant` while this row is active. */
+    id?: string;
     top: number;
     /** Padding applied to the row (already normalised to a CSS string). */
     padding?: string;
     columnTemplate: string | undefined;
     isSelected: boolean;
+    /** The row the arrow keys are on. Distinct from selection. */
+    isActive?: boolean;
+    /**
+     * Hold this row's own controls out of the tab order unless it is the row being
+     * used. Off when the list leaves the keyboard to its rows.
+     */
+    manageTabStops?: boolean;
+    /** This is the row being used, so its controls are reachable with Tab. */
+    isEntered?: boolean;
+    activeClassName?: string;
+    activeStyle?: React.CSSProperties;
     showDivider: boolean;
     hover: boolean;
     onClick: () => void;
@@ -45,5 +58,5 @@ export interface VirtualRowProps {
  * grid (table mode), registering itself with the shared ResizeObserver and
  * carrying all the drag / drop-indicator wiring the parent assigns it.
  */
-declare function VirtualRow({ index, top, padding, columnTemplate, isSelected, showDivider, hover, onClick, observer, ariaRowIndex, ariaPosInSet, ariaSetSize, rowRole, reorderable, mouseDragEnabled, draggable, isDragging, reserveToggleGutter, onMouseDown, onMouseOver, onMouseLeave, onDragStart, onDragOver, onDragEnd, onDrop, onTouchStart, dropPosition, dropIndentPx, dropIndicatorClassName, dropIndicatorStyle, rowClassName, rowStyle, children, }: VirtualRowProps): React.JSX.Element;
+declare function VirtualRow({ index, id, top, padding, columnTemplate, isSelected, isActive, manageTabStops, isEntered, activeClassName, activeStyle, showDivider, hover, onClick, observer, ariaRowIndex, ariaPosInSet, ariaSetSize, rowRole, reorderable, mouseDragEnabled, draggable, isDragging, reserveToggleGutter, onMouseDown, onMouseOver, onMouseLeave, onDragStart, onDragOver, onDragEnd, onDrop, onTouchStart, dropPosition, dropIndentPx, dropIndicatorClassName, dropIndicatorStyle, rowClassName, rowStyle, children, }: VirtualRowProps): React.JSX.Element;
 export default VirtualRow;