@box-kite/react 2.2.4 → 2.2.6

package/components/dataGrid/components/dataGridListGroup.d.ts

@@ -0,0 +1,13 @@
+import { default as GroupRowModel } from '../models/groupRowModel';
+interface Props<TRow> {
+    row: GroupRowModel<TRow>;
+    /** The row's version (`GridModel.rowVersion`). Not read: it is what tells the memo the row moved. */
+    version: string;
+}
+/**
+ * A group as a section header: the value, how many rows it holds, and their totals underneath. The toggle is
+ * the item's `List.Action`, so the whole header opens and closes the group.
+ */
+declare function DataGridListGroupImpl<TRow>(props: Props<TRow>): import("react").JSX.Element;
+declare const DataGridListGroup: typeof DataGridListGroupImpl;
+export default DataGridListGroup;

package/components/dataGrid/components/dataGridListItem.d.ts

@@ -0,0 +1,21 @@
+import { default as RowModel } from '../models/rowModel';
+interface Props<TRow> {
+    row: RowModel<TRow>;
+    /** Where the row sits in the grid's rows — what the record view opens at. */
+    index: number;
+    /** `aria-posinset`/`aria-setsize`: where the item is in the whole list, not in the part drawn. */
+    position?: number;
+    setSize?: number;
+    /** The row's version (`GridModel.rowVersion`). Not read: it is what tells the memo the row moved. */
+    version: string;
+}
+/**
+ * One row as a `List.Item`: a kicker, the title with one value opposite it, a subtitle, and a few labelled
+ * fields — the slots `ListModel.layout` hands out. The title is the item's `List.Action`: it opens the record
+ * view, and while the list is selecting it is the label of the row's checkbox, so a press anywhere on the
+ * item ticks it.
+ */
+declare function DataGridListItemImpl<TRow>(props: Props<TRow>): import("react").JSX.Element;
+/** Memoized on its props, so one row's selection or expansion redraws that item and not the list. */
+declare const DataGridListItem: typeof DataGridListItemImpl;
+export default DataGridListItem;

package/components/dataGrid/components/dataGridListLayout.d.ts

@@ -0,0 +1,20 @@
+import { BoxStyles } from '../../../types';
+/**
+ * The list layout's geometry, shared between its parts. The paint — colours, borders, states — is the
+ * `datagrid.list` style tree, which every engine entry carries; this is only ever in the DataGrid's chunk.
+ */
+declare namespace DataGridListLayout {
+    /** A square control a thumb can hit: 44px, the Apple and WCAG target. */
+    const ICON_BUTTON: BoxStyles;
+    /** A pill in the toolbar: Sort, Filters, Select. */
+    const PILL: BoxStyles;
+    /** One line of text that ends in an ellipsis rather than a second line. */
+    const TRUNCATE: BoxStyles;
+    /** A full-width field in a sheet: 44px tall, and 16px type so a phone does not zoom in on focus. */
+    const INPUT: BoxStyles;
+    /** A labelled value: the label small and muted over the value. */
+    const LABEL: BoxStyles;
+    /** The sheet's big buttons, at the bottom where a thumb is. */
+    const SHEET_BUTTON: BoxStyles;
+}
+export default DataGridListLayout;

package/components/dataGrid/components/dataGridListRecord.d.ts

@@ -0,0 +1,11 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * One row at a time: every column of it, a label over each value, in a sheet with a pager — the drill-in a
+ * list item leads to. The pager follows the list's own order and filters, Left/Right and a sideways swipe
+ * step it, and an editable column is edited here, through the same `def.onCellEdit` a table cell goes through.
+ */
+export default function DataGridListRecord<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListSelectionBar.d.ts

@@ -0,0 +1,11 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The selection, pinned to the bottom of the screen while there is one: how many rows are ticked and the two
+ * ways to change that in bulk. At the bottom because that is where a thumb is, and where a phone's own
+ * contextual bars put what a selection is for.
+ */
+export default function DataGridListSelectionBar<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/components/dataGridListSheet.d.ts

@@ -0,0 +1,30 @@
+import { DialogTrigger } from '../../dialog';
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+    open: boolean;
+    /** The trigger was pressed. */
+    onOpen?: () => void;
+    onClose: () => void;
+    title: React.ReactNode;
+    /** The button that opens it, so focus goes back there when it closes. */
+    trigger?: (trigger: DialogTrigger) => React.ReactNode;
+    /** Controls in the header between the title and the close button — the record view's pager. */
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
+    /** The record view: as tall as a long row needs. */
+    tall?: boolean;
+    /** Handlers for the scrolling body — the record view's swipe. */
+    bodyProps?: React.HTMLAttributes<HTMLDivElement>;
+    bodyRef?: React.Ref<HTMLDivElement>;
+    /** Keys anywhere in the sheet — the record view's pager. */
+    onKeyDown?: (event: React.KeyboardEvent) => void;
+    children: React.ReactNode;
+}
+/**
+ * A bottom sheet: a modal `<dialog>` docked to the bottom edge, which brings the top layer, the backdrop,
+ * Escape, focus containment and focus return with it. The header is a handle — pulled down far enough, the
+ * sheet closes, the way a sheet on a phone does.
+ */
+export default function DataGridListSheet<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListSortSheet.d.ts

@@ -0,0 +1,10 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The Sort button and the sheet it opens. A list has no headers to press, so the sort is a choice of column
+ * and a choice of direction — two radio groups, applied as they are picked, since a sort is one decision.
+ */
+export default function DataGridListSortSheet<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListToolbar.d.ts

@@ -0,0 +1,10 @@
+import { default as GridModel } from '../models/gridModel';
+interface Props<TRow> {
+    grid: GridModel<TRow>;
+}
+/**
+ * The list's toolbar: the title and how many rows there are, the search, and a row of pills — Sort, Filters,
+ * Select — followed by one chip per filter in force, each removable on its own.
+ */
+export default function DataGridListToolbar<TRow>(props: Props<TRow>): import("react").JSX.Element;
+export {};

package/components/dataGrid/components/dataGridListValue.d.ts

@@ -0,0 +1,12 @@
+import { default as ColumnModel } from '../models/columnModel';
+import { default as RowModel } from '../models/rowModel';
+interface Props<TRow> {
+    row: RowModel<TRow>;
+    column: ColumnModel<TRow>;
+}
+/**
+ * One value of a row, drawn the way its column draws it in the table: through the column's own `Cell` where
+ * there is one — a badge, a sparkline, a link — so a list item and a table row never disagree.
+ */
+export default function DataGridListValue<TRow>(props: Props<TRow>): import("react").JSX.Element | null;
+export {};

package/components/dataGrid/contracts/dataGridContract.d.ts

@@ -2,6 +2,8 @@ import { BoxProps } from '../../../box';
 import { ChangeHandler } from '../../../react/a11y/useControllableState';
 import { ComponentsAndVariants } from '../../../types';
 import { SortDirection } from '../../../utils/array/arrayUtils';
+import { FormatOptions } from '../../../utils/date/format';
+import { ZoneInput } from '../../../utils/date/zones';
 import { default as AggregateCellModel } from '../models/aggregateCellModel';
 import { default as CellModel } from '../models/cellModel';
 import { DataGridLocaleText } from '../models/localeText';
@@ -163,7 +165,7 @@ export interface DataGridPagination {
     pageSize: number;
 }
 /** Filter type for column-level filtering */
-export type ColumnFilterType = 'text' | 'number' | 'multiselect';
+export type ColumnFilterType = 'text' | 'number' | 'multiselect' | 'date';
 /** Text filter configuration (fuzzy search) */
 export interface TextFilterValue {
     type: 'text';
@@ -181,8 +183,19 @@ export interface MultiselectFilterValue {
     type: 'multiselect';
     values: (string | number | boolean | null)[];
 }
+/**
+ * Date filter: one day, before or after one, or a span of days, each `YYYY-MM-DD` — compared on the reader's
+ * calendar, so an instant late on the 19th in their zone is on the 19th whatever UTC says.
+ */
+export interface DateFilterValue {
+    type: 'date';
+    operator: 'on' | 'before' | 'after' | 'between';
+    value: string;
+    /** For 'between': the last day, included. */
+    valueTo?: string;
+}
 /** Union type for all filter values */
-export type FilterValue = TextFilterValue | NumberFilterValue | MultiselectFilterValue;
+export type FilterValue = TextFilterValue | NumberFilterValue | MultiselectFilterValue | DateFilterValue;
 /** Column filters record - maps column key to filter value */
 export type ColumnFilters<TRow> = Partial<Record<keyof TRow | Key, FilterValue>>;
 /** Filter configuration for a column */
@@ -197,10 +210,10 @@ export interface ColumnFilterConfig {
     }[];
     /** For number: step value for input */
     step?: number;
-    /** For number: min value */
-    min?: number;
-    /** For number: max value */
-    max?: number;
+    /** For number: min value. For date: the earliest day, `YYYY-MM-DD`. */
+    min?: number | string;
+    /** For number: max value. For date: the latest day. */
+    max?: number | string;
 }
 /** Configuration for expandable row detail panel */
 export interface RowDetailConfig<TRow> {
@@ -270,10 +283,11 @@ export interface TreeDataConfig<TRow> {
     selection?: 'self' | 'cascade';
 }
 /**
- * The four editors the grid draws for itself. A column wanting anything else — a date picker, a colour,
- * a lookup against a table — declares `EditCell` instead and renders it, driven by the same model.
+ * The editors the grid draws for itself — `date`, `time` and `datetime` are a `DateField` in the cell. A column
+ * wanting anything else — a colour, a lookup against a table — declares `EditCell` instead and renders it,
+ * driven by the same model.
  */
-export type CellEditorType = 'text' | 'number' | 'checkbox' | 'select';
+export type CellEditorType = 'text' | 'number' | 'checkbox' | 'select' | 'date' | 'time' | 'datetime';
 /** One option of a `select` editor. `value` is what the cell holds; `label` is what the list shows. */
 export interface CellEditorOption {
     value: string | number | boolean | null;
@@ -288,9 +302,17 @@ export interface CellEditorConfig<TRow> {
     placeholder?: string;
     /** `number` only, handed to the input as it stands. */
     step?: number;
-    min?: number;
-    max?: number;
+    /** A number for `number`; an ISO string for the date editors, whose value outside it is marked invalid. */
+    min?: number | string;
+    max?: number | string;
+    /** `datetime` only: whose wall clock it is typed on. Default the reader's; `'none'` for no zone. */
+    zone?: ZoneInput | 'none';
 }
+/**
+ * How a column writes a date: `'date'`, `'time'`, `'datetime'`, `'relative'` (`3 days ago`), or `Intl` options
+ * with a `zone`. In the reader's language and on their wall clock, like `<DateTime>`.
+ */
+export type ColumnDateFormat = 'date' | 'time' | 'datetime' | 'relative' | Omit<FormatOptions, 'locale'>;
 /** Whether a column can be edited: every row of it, or the rows a predicate says. */
 export type ColumnEditable<TRow> = boolean | ((row: TRow) => boolean);
 /**
@@ -466,6 +488,25 @@ export interface DataGridHandle {
      */
     clearEdits(): void;
 }
+/**
+ * Where a column goes in a list item, when the grid draws itself as a list. `title` is the item's name,
+ * `kicker` a small line above it (an id, a date), `subtitle` a line under it, `end` the one value opposite
+ * the title (a total, a status), `field` a labelled value, `detail` only the record view, `hidden` nowhere.
+ */
+export type ListRole = 'title' | 'kicker' | 'subtitle' | 'end' | 'field' | 'detail' | 'hidden';
+/** How the grid draws itself: a table, a list, or whichever its own width suits. */
+export type DataGridLayout = 'auto' | 'table' | 'list';
+/** The list layout's settings. */
+export interface ListConfig {
+    /** The grid's own width, in px, below which `layout: 'auto'` draws a list. Default: 576 (36rem). */
+    breakpoint?: number;
+    /** How many `field`s an item shows before the rest wait for the record view. Default: 4. */
+    fields?: number;
+    /** How many items one "Show more" adds. Default: 20. A paginated grid draws its page instead. */
+    batchSize?: number;
+    /** Whether pressing an item opens the record view, every column of one row with a pager. Default: true. */
+    recordView?: boolean;
+}
 export interface ColumnType<TRow> {
     key: Key;
     header?: string;
@@ -504,6 +545,11 @@ export interface ColumnType<TRow> {
      * numbers gets a numeric keypad without being told.
      */
     editor?: CellEditorType | CellEditorConfig<TRow>;
+    /**
+     * Writes the column's values as dates, in the reader's language and zone — an ISO string or a `Date`. A `Date`
+     * is written as a date-time without being told, since it cannot be rendered as it stands.
+     */
+    dateFormat?: ColumnDateFormat;
     /**
      * An editor of your own, for what the four built-in ones do not cover. It is handed the cell, and the
      * cell carries the draft value and the two ways out (`commitEdit`, `cancelEdit`) — so a custom editor
@@ -522,6 +568,11 @@ export interface ColumnType<TRow> {
     flexible?: boolean;
     /** Control the header context menu. false hides it entirely. Object controls individual sections. Inherits from GridDefinition.contextMenu if undefined. */
     contextMenu?: boolean | ContextMenuConfig;
+    /**
+     * Where this column goes in a list item. Default: the first column is the title, the first end-aligned one
+     * sits opposite it, the next `def.list.fields` are fields and the rest wait for the record view.
+     */
+    list?: ListRole;
 }
 export interface GridDefinition<TRow> {
     rowKey?: KeysMatching<TRow, Key> | ((rowData: TRow) => Key);
@@ -553,6 +604,14 @@ export interface GridDefinition<TRow> {
      */
     rangeSelection?: boolean;
     rowHeight?: number;
+    /**
+     * How the grid draws itself. `'auto'` (default) is a table, and a list once the grid itself is narrower
+     * than `def.list.breakpoint` — its own width rather than the viewport's, so a grid in a narrow column of
+     * a wide page reads as a list too. `'table'` and `'list'` choose one for good.
+     */
+    layout?: DataGridLayout;
+    /** The list layout's settings: the breakpoint, how many fields an item shows, the record view. */
+    list?: ListConfig;
     /** Number of visible rows. Set to 'all' to render all rows without virtualization or vertical scrollbar. */
     visibleRowsCount?: number | 'all';
     topBar?: boolean;

package/components/dataGrid/models/columnModel.d.ts

@@ -1,4 +1,4 @@
-import { ColumnAggregate, ColumnEditable, ColumnFilterConfig, ColumnType, ContextMenuConfig, FilterValue, Key, NumberFilterValue, PinPosition, PinPositionInput, SortDirection } from '../contracts/dataGridContract';
+import { ColumnAggregate, ColumnEditable, ColumnFilterConfig, ColumnType, ContextMenuConfig, DateFilterValue, FilterValue, Key, NumberFilterValue, PinPosition, PinPositionInput, SortDirection } from '../contracts/dataGridContract';
 import { default as GridModel } from './gridModel';
 import { default as HeaderCellModel } from './headerCellModel';
 /** Discriminates the structural role of a column — replaces scattered `key === *_CELL_KEY` checks. */
@@ -80,6 +80,8 @@ export default class ColumnModel<TRow> {
     }[];
     setTextFilter(value: string): void;
     setNumberFilter(operator: NumberFilterValue['operator'], value: string | number, valueTo?: string | number): void;
+    /** A day, before or after one, or a span — `null` for a value still being typed, which is no filter yet. */
+    setDateFilter(operator: DateFilterValue['operator'], value: string | null, valueTo?: string | null): void;
     setMultiselectFilter(values: (string | number | boolean | null)[]): void;
     clearFilter(): void;
     /**

package/components/dataGrid/models/editModel.d.ts

@@ -1,8 +1,10 @@
-import { CellEdit, CellEditorConfig, Key } from '../contracts/dataGridContract';
+import { CellEdit, CellEditorConfig, CellEditorType, Key } from '../contracts/dataGridContract';
 import { default as ColumnModel } from './columnModel';
 import { default as GridModel } from './gridModel';
 import { RangeBounds } from './rangeModel';
 import { default as RowModel } from './rowModel';
+/** Whether an editor is a `DateField`. */
+export declare function isDateEditor(type: CellEditorType): boolean;
 /** A key that starts an edit by replacing the value: one printable character, unmodified. */
 export declare function isTypingKey(event: React.KeyboardEvent): boolean;
 /**

package/components/dataGrid/models/gridModel.d.ts

@@ -9,6 +9,7 @@ import { default as EditModel } from './editModel';
 import { default as ExportModel } from './exportModel';
 import { default as FilterModel } from './filterModel';
 import { default as GroupRowModel } from './groupRowModel';
+import { default as ListModel } from './listModel';
 import { DataGridLocaleText } from './localeText';
 import { default as PaginationModel } from './paginationModel';
 import { default as RangeModel } from './rangeModel';
@@ -239,6 +240,8 @@ export default class GridModel<TRow> {
     readonly edits: EditModel<TRow>;
     /** The current cell, the block of cells marked around it, and what the clipboard is written from. */
     readonly range: RangeModel<TRow>;
+    /** The grid drawn as a list, for a phone. */
+    readonly list: ListModel<TRow>;
     /**
      * Throw the fetched blocks away and ask for them again. The grid invalidates on its own whenever it
      * changes the query; this is for the half it cannot see — a filter of the page's own, a row somebody

package/components/dataGrid/models/listModel.d.ts

@@ -0,0 +1,129 @@
+import { FilterValue, Key } from '../contracts/dataGridContract';
+import { default as ColumnModel } from './columnModel';
+import { default as GridModel } from './gridModel';
+import { default as GroupRowModel } from './groupRowModel';
+import { default as RowModel } from './rowModel';
+/** 36rem: where Polaris, Roselli and the Scottish Government's tables all give up on columns. */
+export declare const DEFAULT_LIST_BREAKPOINT = 576;
+/** How many labelled values an item shows before the rest wait for the record view. */
+export declare const DEFAULT_LIST_FIELDS = 4;
+/** How many items one "Show more" adds — a couple of screens of phone. */
+export declare const DEFAULT_LIST_BATCH = 20;
+/** Which columns an item draws where. Every list is in column order. */
+export interface ListItemLayout<TRow> {
+    title?: ColumnModel<TRow>;
+    kicker?: ColumnModel<TRow>;
+    subtitle: ColumnModel<TRow>[];
+    end?: ColumnModel<TRow>;
+    fields: ColumnModel<TRow>[];
+    /** The columns only the record view shows. */
+    detail: ColumnModel<TRow>[];
+}
+/** One column filter that is set, the way its chip says it. */
+export interface ActiveFilterChip<TRow> {
+    column: ColumnModel<TRow>;
+    label: string;
+    value: string;
+}
+export type ListSheet = 'sort' | 'filter';
+/** One entry of the list, and where it sits in the grid's own rows — which is what a record is opened at. */
+export interface ListEntry<TRow> {
+    row: RowModel<TRow> | GroupRowModel<TRow>;
+    index: number;
+}
+/**
+ * The grid drawn for a phone: a list of items instead of a table. It decides when the grid switches, which
+ * column goes where in an item, how many items are drawn, which sheet is open, whether the list is selecting,
+ * and which row the record view is on. The rows, the filters and the sort stay the grid's — an item is another
+ * drawing of the same row, so whatever a table does to a row it does to an item.
+ */
+export default class ListModel<TRow> {
+    readonly grid: GridModel<TRow>;
+    constructor(grid: GridModel<TRow>);
+    private get config();
+    get breakpoint(): number;
+    private _width;
+    /** The grid's own width in px, 0 until something has measured it — which a server render never does. */
+    get width(): number;
+    /** Whether the grid draws a list. `auto` decides on the grid's own width rather than the viewport's. */
+    get active(): boolean;
+    /** Report the grid's width. Only crossing the breakpoint redraws anything. */
+    setWidth: (width: number) => void;
+    /**
+     * Which column goes where. A column's `list` role wins; otherwise the first data column is the title, the
+     * first end-aligned one — a total, an amount — sits opposite it, the next few are fields and the rest wait
+     * for the record view. A grouped column is its group's header, so it is not repeated in every item.
+     */
+    readonly layout: import('../../../utils/memo').Memo<{
+        title: ColumnModel<TRow> | undefined;
+        kicker: ColumnModel<TRow> | undefined;
+        subtitle: ColumnModel<TRow>[];
+        end: ColumnModel<TRow> | undefined;
+        fields: ColumnModel<TRow>[];
+        detail: ColumnModel<TRow>[];
+    }>;
+    /** Every column the record view lists, in column order. */
+    get recordColumns(): ColumnModel<TRow>[];
+    private get batch();
+    private _limit?;
+    /**
+     * What the list is a list of. A different answer is a different list, so "Show more" starts again from one
+     * batch — while opening a group or a detail panel changes the rows and not the question, and keeps what the
+     * reader has already scrolled through.
+     */
+    private get query();
+    /** Where the list is cut: whole batches, or nowhere when the grid is paginated, since a page is the batch. */
+    private get count();
+    private _more;
+    /**
+     * The entries drawn now, up to the cut — a detail panel is drawn inside its own item. A walk from the top
+     * rather than a filter, because a datasource's list is lazy and walking all of it is a model per row.
+     */
+    get visibleItems(): ListEntry<TRow>[];
+    /** Whether entries are left past the cut. Read after `visibleItems`, which is what measures it. */
+    get hasMore(): boolean;
+    /** How many entries the next "Show more" adds. Read after `visibleItems`. */
+    get nextBatch(): number;
+    showMore: () => void;
+    private _selecting;
+    /**
+     * Whether a press on an item ticks it rather than opening it. Selection is a mode on a phone — iOS's edit
+     * mode, Android's contextual bar — because a checkbox on every item is a target a thumb hits by accident.
+     */
+    get selecting(): boolean;
+    setSelecting: (selecting: boolean) => void;
+    /** The id of a row's checkbox, which the item's title is the label of — so a press anywhere on the item ticks it. */
+    checkboxId(key: Key): string;
+    private _sheet;
+    /** Which bottom sheet is open — the sort or the filters — or `null`. */
+    get sheet(): ListSheet | null;
+    openSheet: (sheet: ListSheet | null) => void;
+    /** The columns the sort sheet offers. */
+    get sortableColumns(): ColumnModel<TRow>[];
+    /** The column the grid is sorted by, when it is one the sheet offers. */
+    get sortedColumn(): ColumnModel<TRow> | undefined;
+    /** The columns the filter sheet offers. */
+    get filterableColumns(): ColumnModel<TRow>[];
+    /** Every column filter that is set, the way a chip says it. */
+    get activeFilters(): ActiveFilterChip<TRow>[];
+    /** A filter in words: `“ali”`, `≥ 30`, `20–40`, `Japan, Spain +2`. */
+    describe(column: ColumnModel<TRow>, filter: FilterValue): string;
+    private _record;
+    /** The row the record view is showing, or `undefined` while it is shut. */
+    get record(): RowModel<TRow> | undefined;
+    /** Whether pressing an item opens its record. */
+    get recordViewEnabled(): boolean;
+    /** Open the record view on a row, at its index in the grid's rows. */
+    openRecord: (row: RowModel<TRow>, index: number) => void;
+    closeRecord: () => void;
+    private neighbour;
+    get hasPreviousRecord(): boolean;
+    get hasNextRecord(): boolean;
+    /** Step to the record before or after this one, past group headers and detail panels. */
+    stepRecord: (step: 1 | -1) => void;
+    /** Where the record sits among the rows — "3 of 40" — counting rows, not group headers. */
+    get recordPosition(): {
+        position: number;
+        total: number;
+    } | undefined;
+}

package/components/dataGrid/models/localeText.d.ts

@@ -60,6 +60,10 @@ export interface DataGridLocaleText {
     filterSelectAll: string;
     /** How a multiselect filter lists a `null` value. */
     filterEmptyValue: string;
+    /** What a `true` cell is read out and listed as; it is drawn as a check. */
+    booleanTrue: string;
+    /** What a `false` cell is read out and listed as; it is drawn as a cross. */
+    booleanFalse: string;
     /** What an empty grid shows when there is no `noDataComponent`. */
     noRows: string;
     loadingRows: string;
@@ -101,6 +105,38 @@ export interface DataGridLocaleText {
     previousPage: string;
     nextPage: string;
     lastPage: string;
+    /** The sort button before anything is sorted, and the sort sheet's title. */
+    sortBy: string;
+    /** The sort button once a column is sorted: the column and the direction. */
+    sortedBy: (column: string, descending: boolean) => string;
+    ascending: string;
+    descending: string;
+    /** The filters button and the filter sheet's title. */
+    filters: string;
+    /** The filters button's accessible name, with how many are set. */
+    filtersLabel: (count: number) => string;
+    /** The filter sheet's main button: it closes the sheet and says how many rows are left. */
+    showRows: (count: number) => string;
+    /** What closes a sheet or the record view. */
+    close: string;
+    /** The button under the cards: how many the next press adds. */
+    showMore: (count: number) => string;
+    /** Under the cards: how many of the rows are drawn. */
+    shownCount: (shown: number, total: number) => string;
+    /** The record view's pager: "3 of 40". */
+    recordPosition: (position: number, total: number) => string;
+    previousRow: string;
+    nextRow: string;
+    /** The heading over a `rowDetail` panel in the record view. */
+    details: string;
+    /** The toggle that puts the list into selecting, where a press ticks a row rather than opening it. */
+    selectRows: string;
+    clearSearch: string;
+    /** The record view's button beside an editable value; its name is `editCell`. */
+    edit: string;
+    /** The list's selection bar: how many rows are ticked, short enough for a phone's width. */
+    selectedRows: (count: number) => string;
+    selectAll: string;
     /** What the live region says when the selection changes. */
     selectionAnnouncement: (selected: number, total: number) => string;
 }

package/components/dataGrid/models/viewportModel.d.ts

@@ -59,7 +59,5 @@ export default class ViewportModel<TRow> {
     get emptyHeight(): number;
     /** Where a row sits inside the scrolled body — what a keyboard jump scrolls to. */
     rowTop(index: number): number;
-    /** Binary search for the first row whose offset is <= scrollTop (variable-height rows). */
-    private findStartIndex;
     window(scrollTop: number, direction?: ScrollDirection): ViewportWindow;
 }

package/components/dataGrid/useDateParts.d.ts

@@ -0,0 +1,17 @@
+import { default as DataGridDateParts } from './components/dataGridDateParts';
+type DateParts = typeof DataGridDateParts;
+/**
+ * Fetch the grid's date parts — the formatter, the `DateField` editor and the date filters. A chunk of its own,
+ * since a grid with no dates in it should not carry a date library, so it is asked for the first time a cell,
+ * an editor or a filter needs one.
+ */
+export declare function loadDateParts(): Promise<DateParts>;
+/** The parts if they have arrived — what a model asks, since it cannot wait for them. */
+export declare function dateParts(): DateParts | undefined;
+/**
+ * The parts once they are here, or `undefined` while the cell goes on showing the raw value. Always `undefined`
+ * on the first render, which is what a server rendered too; a layout effect swaps them in before the paint when
+ * they are already loaded. No `React.lazy`, for the reason `useListLayout` gives.
+ */
+export default function useDateParts(active: boolean): DateParts | undefined;
+export {};

package/components/dataGrid/useListLayout.d.ts

@@ -0,0 +1,13 @@
+import { default as DataGridList } from './components/dataGridList';
+type ListLayout = typeof DataGridList;
+/**
+ * Fetch the list layout. It is a chunk of its own — the sheets, the record view and the `<dialog>` under them
+ * are 10 KB gzipped a wide screen never draws — so it is asked for the first time a grid is narrow.
+ */
+export declare function loadListLayout(): Promise<ListLayout>;
+/**
+ * The list layout's component once it has arrived, or `undefined` while the grid should go on drawing its
+ * table. No `React.lazy`: a Suspense boundary is the one thing a React 16 or 17 server cannot render.
+ */
+export default function useListLayout(active: boolean): ListLayout | undefined;
+export {};