@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/components/datagrid/view/GridBody.d.ts

@@ -0,0 +1,216 @@
+import { Component } from '@motifx/core';
+import type { GridModel } from '../model/GridModel';
+import type { GroupNode } from '../model/group-node';
+import { ScrollGeometry } from '../model/ScrollGeometry';
+import type { ActionWidths } from './ActionWidths';
+import type { DetailHost } from './detail-host';
+import { DetailRow } from './DetailRow';
+import { GridRow } from './GridRow';
+import { GroupFooterRow } from './GroupFooterRow';
+import { GroupRow } from './GroupRow';
+/**
+ * The body: a spacer as tall as the rows (capped, see `ScrollGeometry`) holding a small pool of
+ * absolutely placed `GridRow`s. On every scroll the pool is filled again for the rows in view: rows
+ * that stay in view keep their element, the others are reused. The DOM never grows with the row
+ * count. The active row and the row holding focus are kept even when they scroll out, so focus is
+ * never lost. A pooled row follows its row by id first (a new row opened above it moves it, the
+ * editor inside goes along), then by position (a loading row that gets its data). Group rows and
+ * group footers have pools of their own and follow their group by its id. A row's details
+ * (`masterDetail`) are not pooled: each belongs to its row, sits under it, and is as tall as it was
+ * measured (`ExtraHeights` keeps the sums), so the scroll bar and `reveal` stay right. The adaptive
+ * detail of the one row that has it open (the columns the width hides) is a detail row too, right
+ * under its row and before its details.
+ */
+export declare class GridBody<T> extends Component<HTMLDivElement> {
+    private readonly grid;
+    private readonly viewport;
+    private readonly widths;
+    /** Every row ever made; reused, never disposed before the grid. */
+    readonly pool: GridRow<T>[];
+    /** Every group row ever made. */
+    readonly groupPool: GroupRow<T>[];
+    /** Every group footer ever made. */
+    readonly footerPool: GroupFooterRow<T>[];
+    private byIndex;
+    private groupsByIndex;
+    private footersByIndex;
+    private readonly groupByElement;
+    private readonly footerByElement;
+    private readonly byElement;
+    private virtualTop;
+    private expectedScrollTop;
+    /** Set while the body lays out again in the same frame for details measured for the first time. */
+    private again;
+    private visible;
+    /** The edit form shown in place of a row (`editMode: 'form'`), and the height it was measured at. */
+    private form;
+    /** Rows' details by key text: made when first shown, kept while open (and closed, with `keepDetails`) up to `keepLimit` out of view. */
+    private readonly details;
+    private readonly detailByElement;
+    /** Details drawn now, by grid index of their row. */
+    private detailsByIndex;
+    /** The open details of the rows laid out, and what they were found for. */
+    private extras;
+    private extrasFor;
+    /** The data the kept details were last checked against. */
+    private checkedFor;
+    /** The page (and page size) of a paged grid the details were last tidied for. */
+    private pageFor;
+    private detailObserver;
+    /** The adaptive detail of the row that has it open, while it is laid out. */
+    private adaptive;
+    private layouts;
+    private readonly detailHost;
+    /** While a row is dragged with `'push'`: how far each row moves to make room, by grid index. */
+    private shiftOf;
+    private shifted;
+    /** Where each drawn row was laid out, from the top of the rows. */
+    private readonly laidTop;
+    private dragSource;
+    private dragPush;
+    /** The line where a dragged row would land (`'indicate'`), made the first time. */
+    private dropLine;
+    /** The row a dragged row would be dropped onto. */
+    private dropTarget;
+    constructor(grid: GridModel<T>, viewport: () => HTMLElement | null, widths: ActionWidths, host: Omit<DetailHost<T>, 'owner'>);
+    onConfigured(): void;
+    /** Geometry of the rows the body lays out (all rows, or one page); the edit form's row is as tall as the form, open details and the adaptive detail add their height. */
+    geometry(): ScrollGeometry;
+    /** The details drawn now, the adaptive detail among them, in grid order (a row's adaptive detail before its details). */
+    drawnDetails(): DetailRow<T>[];
+    /** The adaptive detail drawn under grid row `index`. */
+    adaptiveAt(index: number): DetailRow<T> | undefined;
+    /** The adaptive detail of the row that has it open, drawn or not. */
+    adaptiveDetail(): DetailRow<T> | null;
+    /** What is drawn under grid row `index`: its adaptive detail, then its details. */
+    detailsUnder(index: number): DetailRow<T>[];
+    /** The details drawn under grid row `index`. */
+    detailAt(index: number): DetailRow<T> | undefined;
+    /** The details of this grid an element is in (not those of a grid inside them). */
+    detailOf(el: Element | null): DetailRow<T> | undefined;
+    /** The options or the open rows changed in a way the body cannot see: the details are found again. */
+    refreshDetails(): void;
+    /** Disposes every row's details (another template); they are made again when they show. */
+    dropDetails(): void;
+    /** Measures the details drawn now (the ResizeObserver does it as their content changes); the rows after one that changed move. */
+    measureDetails(only?: Iterable<DetailRow<T>>): boolean;
+    /** Shows `content` (the edit form) in place of grid row `index` (the row `row`, `rowId`), across the grid, as tall as it is. */
+    showForm(rowId: string, row: T, index: number, content: HTMLElement): void;
+    /** `aria-rowindex` of grid row `i`: the open details and the adaptive detail above it count as rows. */
+    private ariaRowIndex;
+    /** Grid index of the row whose adaptive detail is open, while columns are hidden; -1 for none. */
+    private adaptiveIndex;
+    /** Its place among the rows laid out (all rows, or the page); -1 for none. */
+    private adaptiveLocal;
+    /** The open details of the rows laid out (all rows, or one page), found again when the rows or the open ones change. */
+    private openExtras;
+    private findExtras;
+    private measureDetail;
+    private dropDetail;
+    /** Takes the edit form away; its row shows again. */
+    hideForm(): void;
+    /** The cell that holds the edit form: the active cell while the form's row is the active row. */
+    formCell(): HTMLElement | null;
+    /** The grid index of the row the edit form stands for, or -1. */
+    formIndex(): number;
+    /** The form's height changed (fields shown, messages): the rows after it move. */
+    private measureForm;
+    /** Works out again which rows show and where. Safe to call from anywhere; reads are untracked. */
+    relayout(immediate?: boolean): void;
+    /** The browser scrolled (scroll bar, touch, focus). */
+    onScroll(): void;
+    /** Wheel input while the scroll bar is scaled: moves by the real amount in the full content, so a notch still moves a few rows. */
+    onWheel(e: WheelEvent): boolean;
+    /** Scrolls so that grid row `index` is fully visible (in paged mode, after going to its page). */
+    reveal(index: number, align?: 'nearest' | 'start' | 'end'): void;
+    /** Back to the first row (after a sort change). */
+    toStart(): void;
+    /** Rows the viewport shows fully, for PageUp/PageDown. */
+    pageRows(): number;
+    /** The pooled row that shows grid row `index`, if it is drawn. */
+    rowAt(index: number): GridRow<T> | undefined;
+    /** The cell element of grid row `index`, if that row is drawn; a group row's one cell, or a group footer itself, for any field. */
+    cellElement(index: number, field: string): HTMLElement | undefined;
+    /** The pooled row an element belongs to. */
+    rowOf(el: Element | null): GridRow<T> | undefined;
+    /** The pooled group row an element belongs to. */
+    groupRowOf(el: Element | null): GroupRow<T> | undefined;
+    /** The group row drawn for grid row `index`. */
+    groupRowAt(index: number): GroupRow<T> | undefined;
+    /** The pooled group footer an element belongs to. */
+    footerRowOf(el: Element | null): GroupFooterRow<T> | undefined;
+    /** The group footer drawn for grid row `index`. */
+    footerRowAt(index: number): GroupFooterRow<T> | undefined;
+    /** Cells of a column in the rows drawn now (for fitting the column to its content). */
+    renderedCells(field: string): HTMLElement[];
+    /** The rows drawn now, data rows, group rows and group footers, in grid order. */
+    drawn(): {
+        index: number;
+        element: HTMLElement;
+        group: GroupNode | null;
+    }[];
+    /** The rows drawn now, top to bottom, where they are laid out on the screen (the room made for a dragged row, moving or not, left out). */
+    placed(): {
+        index: number;
+        element: HTMLElement;
+        top: number;
+        bottom: number;
+    }[];
+    /**
+     * The look of a row drag: rows moved by what `shift` gives for their index (the room made for the
+     * row, `'push'`), now and as they scroll, until it is `null`; grid row `source` marked as the one
+     * dragged (-1: none), as a gap with `push`.
+     */
+    setDragLook(shift: ((index: number) => number) | null, source: number, push: boolean): void;
+    private applyShift;
+    /** The line where a dragged row would land, `y` pixels from the top of the rows; `null` hides it. */
+    showDropLine(y: number | null): void;
+    /** Marks the row a dragged row would be dropped onto, or none. */
+    markDropTarget(el: HTMLElement | null): void;
+    /** Draws every row in use again, with the rows' details and adaptive detail. */
+    repaint(): void;
+    /** Draws the rows with these ids again (their key as text), with their details and adaptive detail; the others stay as they are. */
+    repaintRows(ids: ReadonlySet<string>): void;
+    /** The rows drawn now draw again the parts that read what was told. */
+    private drawTold;
+    /** A column added at run time: every pooled row gets its cell. */
+    addColumn(field: string): void;
+    /** A column taken out, or made again: its cells go from every pooled row. */
+    removeColumn(field: string): void;
+    /** Display order of the cells, after a column layout change. */
+    arrange(visible: string[]): void;
+    /** Gives the spacer the height of the rows, before a scroll position is written too (a row added at the end makes the rows taller). */
+    private sizeSpacer;
+    private setVirtualTop;
+    private layout;
+    /**
+     * Details under the rows that show theirs (made the first time); the others are parked, and those
+     * not wanted any more disposed. Returns the details drawn now that were not before.
+     */
+    private placeDetails;
+    /**
+     * Disposes the details not wanted any more: closed ones (without `keepDetails`), those of the page left (without
+     * `keepAcrossPages`), those whose row is gone, the ones seen longest ago past `keepLimit`.
+     */
+    private tidyDetails;
+    /**
+     * The adaptive detail under grid row `at` while that row is drawn (made the first time, made again
+     * for another row or another row object), parked while it is not; gone once it is closed. Returns
+     * it when it is drawn now and was not before.
+     */
+    private placeAdaptive;
+    private createAdaptive;
+    private dropAdaptive;
+    private createDetail;
+    /** Measures a detail row again whenever its content changes size. */
+    private observe;
+    /** The edit form's row: at its row's place, as wide as the viewport and kept in it while the rows scroll sideways. */
+    private placeForm;
+    /** Group rows: the one that showed a group keeps it, the others take the rest. */
+    private placeGroups;
+    /** Group footers: the one that showed a group's footer keeps it, the others take the rest. */
+    private placeFooters;
+    private createFooterRow;
+    private createGroupRow;
+    private createRow;
+}

package/dist/components/datagrid/view/GridPager.d.ts

@@ -0,0 +1,69 @@
+import { Component } from '@motifx/core';
+import { DropDown } from '../../dropdown/DropDown';
+import { NumberBox } from '../../numberbox/NumberBox';
+import type { GridModel } from '../model/GridModel';
+import type { PagerHost } from './pager-host';
+type PageItem = {
+    key: string;
+    page: number;
+    gap: boolean;
+};
+/** A page size of the drop-down. */
+type SizeItem = {
+    key: string;
+    value: number;
+    text: string;
+};
+/**
+ * The pager under the rows of a paged grid: the page sizes, "Page 3 of 12 (250 items)", the first,
+ * previous, next and last buttons and a button per page around the current one. The compact look
+ * has a box for the page number and a drop-down of the page sizes instead; the adaptive look is
+ * compact while the full one does not fit in the bar. Its buttons are kept while they stay, so focus
+ * stays on a button that was pressed. It follows nothing: made in code, it draws itself again whenever
+ * the grid tells a change.
+ */
+export declare class GridPager<T> extends Component<HTMLElement> {
+    private readonly grid;
+    private readonly host;
+    /** The drop-down of the page sizes and the page number box of the compact look. */
+    sizeList: DropDown<SizeItem, number> | null;
+    pageBox: NumberBox | null;
+    /** The full pager does not fit (adaptive). */
+    private narrow;
+    /** The width the full pager needed when it was last drawn. */
+    private fullWidth;
+    /** What decides whether the full pager fits, as it was last seen. */
+    private fitSeen;
+    private readonly pages;
+    private readonly sizes;
+    private readonly sizeButtons;
+    private readonly pageParts;
+    private parts;
+    /** The buttons' look, the design language's: their size, the steps' variant, a page's and the current page's. */
+    private readonly buttons;
+    private readonly language;
+    constructor(grid: GridModel<T>, host: PagerHost);
+    /** Whether the compact look shows now. */
+    get compact(): boolean;
+    onConfigured(): void;
+    onMounted(): void;
+    /** The adaptive look: compact while the full pager is wider than the room the bar has. */
+    fit(): void;
+    initializeComponent(): void;
+    /** Draws the pager as the grid is now. */
+    draw(): void;
+    /** The buttons of the page sizes: one per size, kept while the size stays, the one in use pressed. */
+    private drawSizes;
+    /** The page buttons and gaps, kept by page while they stay. */
+    private drawPages;
+    /** "Page 3 of 12 (250 items)": `pagerInfoText`, else the `gridPageOf` text. */
+    info(): string;
+    /** Page buttons: first, last, `pagerNeighbors` on each side of the current one, with gaps; the same item for the same page. */
+    pageItems(): PageItem[];
+    /** The page sizes of the drop-down, the same item for the same size. */
+    private sizeItems;
+    private pageItem;
+    /** The arrow of a pager step; CSS turns it to point the way it goes. */
+    private stepIcon;
+}
+export {};

package/dist/components/datagrid/view/GridRow.d.ts

@@ -0,0 +1,95 @@
+import { ComponentBase } from '@motifx/core';
+import { KeyedItems } from '../../../parts/data/KeyedItems';
+import type { GridModel } from '../model/GridModel';
+import type { ActionWidths } from './ActionWidths';
+import { RowActions } from './RowActions';
+/**
+ * One pooled row of the body, drawn without components: a row element with a cell element per
+ * column. It is built once and then shows other rows while the user scrolls; `use` changes what it
+ * shows and draws it. It follows nothing: the body has it draw a part again (`drawLook`, `drawCells`,
+ * `drawRanges`, `drawActions`) when the grid tells what changed. Cells show the unsaved edit of their
+ * row when there is one. The selection check box and the action buttons are plain elements too; only
+ * a column's own `cell` content is a component.
+ */
+export declare class GridRow<T> {
+    private readonly model;
+    /** Holds the components of custom cells, so they live and go with it. */
+    private readonly host;
+    readonly element: HTMLDivElement;
+    /** Cell elements by field. */
+    readonly cells: Map<string, HTMLDivElement>;
+    /** Grid index (new rows included); -1 while the row is not used. */
+    index: number;
+    /** The row shown; `undefined` while it is loading. */
+    row: T | undefined;
+    /** The tracker's id of the row; `undefined` while it is loading. */
+    rowId: string | undefined;
+    /** The buttons of the actions cell, while the grid has actions. */
+    readonly actions: RowActions<T> | null;
+    /** Grows when the row shows another one or is drawn again: what a column's own cell content reads follows it. */
+    private readonly shown;
+    private readonly texts;
+    /** Components of the columns' own cell contents, by field. */
+    private readonly contents;
+    /** The nodes after a cell's text node that mark what the search found, and what they were drawn for. */
+    private readonly marked;
+    /** Whether the search marks cells now (read when the cells are drawn). */
+    private searching;
+    private readonly check;
+    private readonly expand;
+    /** The "…" of the adaptive detail. */
+    private readonly more;
+    constructor(model: GridModel<T>, 
+    /** Holds the components of custom cells, so they live and go with it. */
+    host: ComponentBase, widths: ActionWidths);
+    /** Draws all of the row as it is. */
+    draw(): void;
+    /** Shows grid row `index` at `top`. Visibility and position change at once, so a cell can take focus right after. */
+    use(index: number, row: T | undefined, rowId: string | undefined, top: number): void;
+    /**
+     * Shows whether the row's details are open (`masterDetail`): the arrow, and `aria-expanded` on the
+     * row too while the grid is a tree (grouped; ARIA allows it on the rows of a treegrid only).
+     * `controls` is the id of the details' row while it is drawn.
+     */
+    drawExpand(can: boolean, open: boolean, controls: string | null): void;
+    /** Shows whether the row's adaptive detail is open on its "…"; `controls` is the id of the detail's row while it is drawn. */
+    drawAdaptive(shown: boolean, open: boolean, controls: string | null): void;
+    /** Draws the row again as it is. */
+    redraw(): void;
+    /** Back to the pool, hidden. */
+    release(): void;
+    /** Puts the cells in display order and numbers the visible ones; while columns are virtual, only the columns drawn have their cells in the row. */
+    arrange(visible: string[]): void;
+    /** Keys of a lookup source came: the lookup cells that show one of them are drawn again (all of them for `null`). */
+    drawLookups(items: KeyedItems<any>, keys: readonly string[] | null): void;
+    /** A column added at run time gets its cell (placed by the next `arrange`). */
+    addColumn(field: string): void;
+    /** A column taken out loses its cell, and its own content goes. */
+    removeColumn(field: string): void;
+    dispose(): void;
+    private makeCell;
+    private cell;
+    /** A cell of one of the grid's own columns (selection, actions). */
+    private ownCell;
+    /** The row status cell: a mark by state (drawn by CSS), its name for assistive technology, the message on hover. */
+    private statusCell;
+    private context;
+    /** The row's own marks: its place, odd, active, status, selection, drag and the messages of its cells. */
+    drawLook(): void;
+    /**
+     * The cell ranges and the rows a drag selects, on the cells only: `data-range` with the edges of
+     * the ranges, `data-run` with the edges of the run, and `aria-selected` while cells can be
+     * selected. Only what changed is written; the cells' text is left alone.
+     */
+    drawRanges(): void;
+    drawActions(): void;
+    private resolve;
+    /** The cells' texts, their search marks, and whether they are changed, busy or in error. */
+    drawCells(): void;
+    /** `onCellPrepared` for each cell of the row (the grid's own columns too), then `onRowPrepared`. */
+    private tellPrepared;
+    /** Writes a cell's text, with what the search found in it marked (`<mark>`). */
+    private write;
+    /** A lookup cell: its text, empty and busy while the key loads, the key itself (muted, with a hint) when the source does not have it. */
+    private drawLookup;
+}

package/dist/components/datagrid/view/GridToolbar.d.ts

@@ -0,0 +1,79 @@
+import { ComponentBase } from '@motifx/core';
+import { Toolbar } from '../../toolbar/Toolbar';
+import type { GridModel } from '../model/GridModel';
+import type { Switches } from '../model/Switches';
+import type { ToolbarHost } from './toolbar-host';
+import type { ToolbarValues } from './toolbar-values';
+/**
+ * The bar above the rows, on the kit's `Toolbar` (one Tab stop, arrow keys between its items, a
+ * "more" menu for what does not fit): the grid's own items whose features are on, or the items the
+ * app lists, the `before` ones at the start and the `after` ones at the end. Items are made once
+ * and kept while they stay. It follows nothing of the grid: the grid draws it again (`draw`) whenever
+ * it tells a change; what the app's items give as functions is followed, once for all of them.
+ */
+export declare class GridToolbar<T> {
+    private readonly model;
+    private readonly options;
+    private readonly host;
+    private readonly owner;
+    readonly bar: Toolbar;
+    private made;
+    /** The elements in the order they stand: the `before` items, the gap, the `after` items. */
+    private order;
+    private readonly spacer;
+    private readonly ids;
+    private nextId;
+    /** The list last placed, to place again when the row actions get another button. */
+    private placed;
+    /** What the list was worked out from last time: it is worked out again only when this changes. */
+    private listSeen;
+    /** The fields of the app's items, as the follow read them last. */
+    private values;
+    private stopItems;
+    private disposed;
+    constructor(model: GridModel<T>, options: Switches<ToolbarValues>, host: ToolbarHost, owner: ComponentBase);
+    /** The app's items are read again: the list, and what each shows (`grid.repaint()`). */
+    redraw(): void;
+    /** The control made for an item (`'searchPanel'`, `'exportButton'`, or a name of the app's own), while it is in the bar. */
+    controlOf(name: string): ComponentBase | null;
+    /** The element of an item while it is in the bar. */
+    elementOf(name: string): HTMLElement | null;
+    /** Whether the bar shows: as `visible` says, else while an item shows. */
+    shown(): boolean;
+    /**
+     * Draws the bar as the grid is now: the list of items when what it comes from changed (or `again`, the app's items
+     * read again), then what each item shows.
+     */
+    draw(again?: boolean): void;
+    /** What the list of items comes from: the `items` option and which of the grid's items have their feature on. */
+    private listFrom;
+    /** Whether the list holds the items placed, in their places. */
+    private samePlace;
+    /** Whether one of the grid's items has its feature on. */
+    private has;
+    /** The items of the bar now, in order. */
+    private entries;
+    /**
+     * Follows the fields of the app's items, functions and reactive data alike, with one of the grid's bindings (so
+     * `reState()` reads them again too): a change draws the bar again. The values read are the ones drawn.
+     */
+    private followItems;
+    /** A field of an item as the follow read it. */
+    private field;
+    private idOf;
+    /** Makes what is new, drops what left, and puts the elements in order: the `before` items, the gap, the `after` items. */
+    private place;
+    /** Puts the elements in order again (building the bar appends its controls after the gap). */
+    arrange(): void;
+    private make;
+    private makeButton;
+    /** What one of the grid's buttons shows and does. */
+    private ownButton;
+    private makeSearch;
+    private makeGroupPanel;
+    /** The actions of the target rows: a hidden element that says what they act on, then their buttons. */
+    private makeRowActions;
+    private makeContent;
+    /** Writes whether the element may go into the "more" menu where the toolbar reads it, and lays the bar out again when it changes. */
+    private overflow;
+}

package/dist/components/datagrid/view/GroupFooterRow.d.ts

@@ -0,0 +1,32 @@
+import type { GridModel } from '../model/GridModel';
+import type { GroupNode } from '../model/group-node';
+/**
+ * One pooled footer row of a group: after the group's rows, a cell per column with the group items
+ * shown in the footer (`showInGroupFooter`), on one line each. Made once and reused for other groups
+ * while the user scrolls, like the other rows. The row itself takes focus, as a group row's cell does.
+ * It follows nothing: it is drawn when it shows another group, and the body draws it again when the
+ * grid tells a change it reads.
+ */
+export declare class GroupFooterRow<T> {
+    private readonly model;
+    readonly element: HTMLDivElement;
+    readonly cells: Map<string, HTMLDivElement>;
+    /** Grid index; -1 while the row is not used. */
+    index: number;
+    node: GroupNode | null;
+    constructor(model: GridModel<T>);
+    /** A column's cell (one added at run time too; placed by the next `arrange`). */
+    addColumn(field: string): void;
+    removeColumn(field: string): void;
+    /** Shows the footer of the group at grid row `index`, at `top`. */
+    use(index: number, node: GroupNode, top: number): void;
+    redraw(): void;
+    /** Back to the pool, hidden. */
+    release(): void;
+    /** Puts the cells in display order and numbers the visible ones; while columns are virtual, only the columns drawn have their cell in the row. */
+    arrange(visible: string[]): void;
+    dispose(): void;
+    /** Draws the row as the grid is now. */
+    draw(): void;
+    private drawRow;
+}

package/dist/components/datagrid/view/GroupPanel.d.ts

@@ -0,0 +1,41 @@
+import type { GridModel } from '../model/GridModel';
+import type { GroupPanelHost } from './group-panel-host';
+/**
+ * The group panel at the start of the toolbar: a chip per grouped column, in order, or a line that
+ * says where to drop a header. A chip turns the order of its groups (click, Enter), ungroups (Delete,
+ * or dragged back onto the headers) and moves along the panel (dragged, or Shift + Left / Right);
+ * the toolbar's arrow keys go from chip to chip. Headers dropped on it group by their column. It
+ * follows nothing: it draws itself again whenever the grid tells a change.
+ */
+export declare class GroupPanel<T> {
+    private readonly model;
+    private readonly host;
+    readonly element: HTMLDivElement;
+    private readonly empty;
+    private readonly hint;
+    private readonly drop;
+    private readonly chips;
+    private suppressClick;
+    private readonly stops;
+    constructor(model: GridModel<T>, host: GroupPanelHost);
+    /** Whether headers can be dropped here now: the panel shows and dragging is on. */
+    get accepts(): boolean;
+    /** Where drops for the panel are taken: the whole toolbar it sits in, not only its chips. */
+    get dropArea(): HTMLElement;
+    /** Marks the drop area while a header that can be grouped is dragged. */
+    showReady(on: boolean): void;
+    /** The place among the chips a point drops at, or -1 when it is not over the drop area. */
+    dropIndexAt(x: number, y: number): number;
+    /** Marks where a drop at place `index` lands; -1 hides the mark. */
+    showDrop(index: number): void;
+    /** The chip of a grouped column, while it shows. */
+    chipOf(field: string): HTMLButtonElement | undefined;
+    dispose(): void;
+    private draw;
+    private drawPanel;
+    private makeChip;
+    /** Delete ungroups; Shift + Left / Right moves the chip (Enter and Space press it). */
+    private onChipKey;
+    /** Dragging a chip: along the panel moves it, onto the headers ungroups it (the column lands where it is dropped). */
+    private pressChip;
+}

package/dist/components/datagrid/view/GroupRow.d.ts

@@ -0,0 +1,62 @@
+import { ComponentBase } from '@motifx/core';
+import type { GridModel } from '../model/GridModel';
+import type { GroupNode } from '../model/group-node';
+/**
+ * One pooled group row of the body: an arrow, "Column: value", the row count and the group summary
+ * items in one cell that spans the columns, moved in by its level. Items aligned by column
+ * (`alignByColumn`) get cells of their own under their columns, and the group's cell ends before
+ * the first of them. Like the data rows it is made once and shows other groups while the user
+ * scrolls; a column's own `groupCell` content is made the first time the row shows a group of that
+ * column, and kept. It follows nothing: it is drawn when it shows another group, and the body draws
+ * again the parts that read what the grid tells (`drawLook`, `drawText`, `drawSummary`).
+ */
+export declare class GroupRow<T> {
+    private readonly model;
+    /** Holds the components of `groupCell` contents, so they live and go with it. */
+    private readonly host;
+    readonly element: HTMLDivElement;
+    readonly cell: HTMLDivElement;
+    /** Grid index; -1 while the row is not used. */
+    index: number;
+    node: GroupNode | null;
+    /** Grows with each other group shown: what a column's own content reads of its context follows it. */
+    private readonly shown;
+    private readonly text;
+    private readonly caption;
+    private readonly count;
+    private readonly summary;
+    /** Cells of the items aligned by column, by field; made when first needed. */
+    private readonly aligned;
+    private visible;
+    /** Columns' own contents, by field, and those that are components. */
+    private readonly own;
+    private readonly contents;
+    constructor(model: GridModel<T>, 
+    /** Holds the components of `groupCell` contents, so they live and go with it. */
+    host: ComponentBase);
+    /** Draws the whole row as the grid is now. */
+    draw(): void;
+    /** Shows the group at grid row `index`, at `top`. */
+    use(index: number, node: GroupNode, top: number): void;
+    /** Draws the row again as it is. */
+    redraw(): void;
+    /** Back to the pool, hidden. */
+    release(): void;
+    /** The cell spans the visible columns, up to the first one holding an aligned item. */
+    arrange(visible: string[]): void;
+    /** Lookup keys came: the text is drawn again when it shows one. */
+    drawLookup(): void;
+    /** A column taken out, or made again: its aligned cell and its own content go. */
+    removeColumn(field: string): void;
+    dispose(): void;
+    drawLook(): void;
+    /**
+     * Group summary items: after the count, or under their columns (`alignByColumn`), not under the
+     * first column, which holds the text, nor under a column that does not show.
+     */
+    drawSummary(): void;
+    drawText(): void;
+    /** A column's own content, made the first time this row shows one of its groups. */
+    private ownContent;
+    private context;
+}

package/dist/components/datagrid/view/HeaderFilter.d.ts

@@ -0,0 +1,55 @@
+import { type ComponentBase } from '@motifx/core';
+import { ListBox } from '../../listbox/ListBox';
+import { TreeView } from '../../treeview/TreeView';
+import type { GridFilterValue } from '../grid-filter-value';
+import type { FilterTreeNode } from '../model/filter-tree-node';
+import type { GridModel } from '../model/GridModel';
+/**
+ * The header filter: a window next to the header with the column's values in the kit's `ListBox`
+ * (a search box, "Select all", a check box per value with its count; long lists load and draw only
+ * where they scroll) and Apply / Cancel. The chosen values filter the column (any of them); none,
+ * or all of them, take the column's value filter away. A column grouped into date parts or ranges
+ * in more than one level shows the kit's `TreeView` with check boxes instead (year → month → day …),
+ * "Select all" above it. As in DevExtreme, choosing every value of the list and then leaving some out
+ * keeps the left-out ones (`filterType: 'exclude'`), so values that come later are kept too.
+ */
+export declare class HeaderFilter<T> {
+    private readonly model;
+    private readonly owner;
+    private popup;
+    private body;
+    private list;
+    private values;
+    private treeView;
+    private all;
+    private nodes;
+    private loading;
+    private note;
+    private field;
+    /** The list leaves out what is not chosen (every value was chosen, then some taken away). */
+    private excluding;
+    constructor(model: GridModel<T>, owner: ComponentBase);
+    get opened(): boolean;
+    /** The list of the open window, for tests and the grid. */
+    get listBox(): ListBox<GridFilterValue, unknown> | null;
+    /** The tree of the open window (date parts, ranges in levels), for tests and the grid. */
+    get tree(): TreeView<FilterTreeNode> | null;
+    /** The column of the open window. */
+    get column(): string;
+    open(field: string, anchor: HTMLElement, returnTo: HTMLElement): void;
+    close(): void;
+    /** Applies the chosen values: none, or every one of them, is no value filter. */
+    apply(): Promise<void>;
+    private openList;
+    private openTree;
+    /** The nodes to check for the column's filter: its values (and what is under them), or every node but those it leaves out. */
+    private checkedOf;
+    /** The tree's choice: its fully checked nodes, the highest ones (a year, not each of its days). */
+    private applyTree;
+    /** "Select all" shows whether every node, none or some are checked. */
+    private showAll;
+    private drawItem;
+    private create;
+    /** The list or the tree and its values go when the window closes; the next opening asks again. */
+    private release;
+}