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

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

@@ -0,0 +1,38 @@
+import { Component } from '@motifx/core';
+import type { GridModel } from '../model/GridModel';
+import type { AdaptiveFormHost } from './adaptive-form-host';
+import { EditForm } from './EditForm';
+/**
+ * What a row's adaptive detail holds: the columns the width hides, each its title and the text its
+ * cell would show, laid out by the edit form's `FormLayout`; a cell the user can fill gets the
+ * editor its cell would get instead (edit modes `'row'`, `'cell'`, `'batch'`), writing into the
+ * row's draft as a cell does. The fields follow the columns that hide and show while it is open.
+ * It follows nothing: it draws itself again whenever the grid tells a change.
+ */
+export declare class AdaptiveForm<T> extends Component<HTMLDivElement> {
+    private readonly model;
+    readonly rowId: string;
+    readonly row: T;
+    private readonly host;
+    readonly form: EditForm<T>;
+    /** How the form is laid out. */
+    private readonly shape;
+    /** The form items: column names, and the app's own items from `onAdaptiveDetailRowPreparing`, kept as they are. */
+    private items;
+    /** What the fields were laid out from, as text: they are laid out again when it changes. */
+    private laidFrom;
+    /** What draws each text item (a column's title and text), while it shows. */
+    private readonly texts;
+    constructor(model: GridModel<T>, rowId: string, row: T, host: AdaptiveFormHost<T>);
+    /** The texts of the columns are read again from the row (`grid.repaint()`). */
+    redraw(): void;
+    /** Focuses its first editor; `false` when it has none. */
+    focusFirst(): boolean;
+    /** Lays the fields out again when the columns hidden or the options changed, and draws the texts. */
+    private draw;
+    private drawTexts;
+    /** The fields of the columns hidden now, as `onAdaptiveDetailRowPreparing` leaves them; `false` when nothing changed. */
+    private lay;
+    /** A column's title and the text its cell shows. */
+    private textItem;
+}

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

@@ -0,0 +1,43 @@
+import { ComponentBase } from '@motifx/core';
+import type { GridModel } from '../model/GridModel';
+import type { HeaderHost } from './header-host';
+import type { HeaderRow } from './HeaderRow';
+/**
+ * The rows of band headers above the header row: a row per level of bands, each band's header over
+ * its columns (`aria-colindex` of its first one, `aria-colspan`), the places over other columns
+ * empty. Over a pinned column no band covers stands an empty piece that stays with it. Plain
+ * elements in the head's row group, before the header row. Dragging a band's header moves the band,
+ * with its columns, among the columns and bands beside it; its menu button opens its menu. It
+ * follows nothing: each band's header draws itself again whenever the grid tells a change.
+ */
+export declare class BandRows<T> {
+    private readonly grid;
+    private readonly host;
+    private readonly header;
+    /** Holds the components of the bands' own header contents. */
+    private readonly owner;
+    readonly rows: HTMLDivElement[];
+    /** The mark of where a dragged band lands, over every header row. */
+    readonly indicator: HTMLDivElement;
+    private readonly cells;
+    /** The empty pieces over pinned columns, by row and field. */
+    private readonly fillers;
+    private readonly stops;
+    /** What draws each band's header, by band. */
+    private readonly drawers;
+    private head;
+    constructor(grid: GridModel<T>, host: HeaderHost, header: HeaderRow<T>, 
+    /** Holds the components of the bands' own header contents. */
+    owner: ComponentBase);
+    /** Draws every band's header as the grid is now. */
+    draw(): void;
+    /** The header element of a band, while it shows. */
+    cellElement(id: string): HTMLElement | undefined;
+    /** Lays the rows out over the visible columns, in `head` before the header row. */
+    arrange(visible: readonly string[], head: HTMLElement, before: Element): void;
+    dispose(): void;
+    private makeRow;
+    private makeCell;
+    /** Drag a band's header to move the band, with its columns, among the columns and bands beside it. */
+    private press;
+}

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

@@ -0,0 +1,53 @@
+import { Button } from '../../button/Button';
+import type { GridActionLocation } from '../grid-action-location';
+import type { ActionEntry } from '../model/action-entry';
+import type { GridModel } from '../model/GridModel';
+type Shown<T> = {
+    buttons: ActionEntry<T>[];
+    menu: ActionEntry<T>[];
+};
+/**
+ * The actions of the target rows in the toolbar or the bottom bar, as kit buttons the bar holds
+ * (so its arrow keys and its "more" menu treat them as its own): one button per action, in order,
+ * and one "Actions" menu button for those that go into a menu (`actionsDisplay: 'menu'`, an action's
+ * `menu: 'always'`). Buttons are made as more are needed and kept, hidden while unused. It follows
+ * nothing: the bar that holds it draws it again (`draw`) whenever the grid tells a change.
+ */
+export declare class BarButtons<T> {
+    private readonly model;
+    private readonly location;
+    private readonly options;
+    /** The action buttons, in order. */
+    readonly buttons: Button[];
+    readonly menuButton: Button;
+    private current;
+    /** The menu's items as they were last given to the menu button. */
+    private menuSeen;
+    /** The icon each button shows, as it was last given. */
+    private readonly icons;
+    private disposed;
+    constructor(model: GridModel<T>, location: GridActionLocation, options: {
+        run: (entry: ActionEntry<T>) => void;
+        /** A new button joined: the bar puts it in its place. */
+        added: (button: Button) => void;
+        /** Whether the bar's item shows at all (the toolbar item's `visible`). */
+        visible?: () => boolean;
+        /** Id of the element that says what the buttons act on. */
+        describedBy?: string;
+    });
+    /** What shows now. */
+    shown(): Shown<T>;
+    /** The buttons and the menu button, in the order they stand. */
+    all(): Button[];
+    dispose(): void;
+    /** Draws the buttons and the menu button as the target rows and their actions are now. */
+    draw(): void;
+    private addButton;
+    /**
+     * Shows or hides a button, and writes its spoken name, what it acts on and its action's id. Hidden
+     * with the attribute: the button keeps its place among the bar's children.
+     */
+    private look;
+    private menuItem;
+}
+export {};

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

@@ -0,0 +1,83 @@
+import { Component, ComponentBase } from '@motifx/core';
+import { data } from '@motifx-community/data';
+import type { GridColumn } from '../grid-column';
+import type { GridModel } from '../model/GridModel';
+import type { EditorHost } from './editor-host';
+import type { EditorKind } from './editor-kind';
+import type { EditorValue } from './editor-value';
+/** Rows of a lookup editor's list asked for at a time. */
+type Options = Record<string, unknown>;
+/**
+ * The editor of the cell in edit mode: a kit field drawn without its frame inside the cell (a
+ * `TextBox`, a `NumberBox`, a `DateBox`, a `CheckBox` or a `DropDown`, by the column type; a
+ * `DropDown`, `ComboBox` or `Lookup` over the items of a lookup column), or the column's own
+ * `editor`. Only one exists at a time in the cells; it is made when editing starts and disposed when
+ * it ends. The edit form makes one per field, with its frame and label (`form`: the field props the
+ * form gives). `prepare` sees the kit field's props first and may change them, or say no (`false`).
+ */
+export declare class CellEditor<T> {
+    private readonly model;
+    readonly column: GridColumn<T>;
+    /** The row itself. */
+    private readonly row;
+    /** The values entered in the row when the editor is made. */
+    private readonly entered;
+    private readonly value;
+    private readonly initialText;
+    private readonly host;
+    private readonly form;
+    readonly kind: EditorKind;
+    /** The element placed in the cell. */
+    readonly box: Component<HTMLDivElement>;
+    /** The edit was called off before the editor was made. */
+    readonly cancelled: boolean;
+    private readonly field;
+    /** A custom editor's content, when it is a component. */
+    private content;
+    private custom;
+    private customText;
+    /** A `list` column whose options are still loading. */
+    private loadingOptions;
+    /** The text typed to start editing is in the input. */
+    private typedIn;
+    /** The lookup editor's own data source, on the adapter of the column's source. */
+    private ownSource;
+    private disposed;
+    constructor(model: GridModel<T>, column: GridColumn<T>, 
+    /** The row itself. */
+    row: T, 
+    /** The values entered in the row when the editor is made. */
+    entered: data.RowCheckContext<T>, value: unknown, initialText: string | undefined, host: EditorHost, owner: ComponentBase, prepare?: (options: Options) => boolean, form?: Options | null);
+    /** The editor component: the kit field, or a custom editor's content. */
+    get editor(): ComponentBase | null;
+    get element(): HTMLElement;
+    /** The element that takes the keys: the input, the check box, the list's field. */
+    get input(): HTMLElement | null;
+    /** A lookup's list is open. */
+    get listOpen(): boolean;
+    /** Focuses the editor; the text is selected, or the caret goes after what was typed to start editing (a lookup's list opens and searches it). */
+    focus(): void;
+    /** Reads the value; a number or a date that cannot be read is reported, not kept. */
+    read(): EditorValue;
+    /** What the editor chose for its value, to show for that key: the lookup item, or the text a custom editor gave. */
+    chosen(): unknown;
+    /**
+     * Whether a key belongs to the editor rather than to the grid: arrows and Home/End inside text,
+     * the arrows of a list, Space, and everything in a custom editor but Tab, Enter and Escape.
+     */
+    ownsKey(e: KeyboardEvent): boolean;
+    dispose(): void;
+    private options;
+    private cellOptions;
+    private createField;
+    private createList;
+    /**
+     * The props of a lookup's editor: its items narrowed for the row (`lookup.filter`), from the
+     * array, or from a data source of its own over the column's adapter (so its search never changes
+     * a source the page shows elsewhere), with search, the clear button and `editorOptions`.
+     */
+    private lookupOptions;
+    /** The lookup's editor: a `DropDown` (default), a `ComboBox` (it searches as it is typed in, so it needs a field to search) or a `Lookup`. A pick commits the cell. */
+    private createLookup;
+}
+export {};

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

@@ -0,0 +1,24 @@
+import type { ComponentBase } from '@motifx/core';
+/**
+ * The full text of a cell or header title cut off with an ellipsis, the message of a cell with an
+ * error, or the hint of an action button, in the kit's `Tooltip`: after the pointer rests on it a
+ * moment, or at once when it gets keyboard focus. Whether the text is cut off is measured only then.
+ */
+export declare class CellTip {
+    /** Milliseconds the pointer rests before the tip shows. */
+    private readonly delay;
+    private readonly tip;
+    private timer;
+    private current;
+    constructor(owner: ComponentBase, 
+    /** Milliseconds the pointer rests before the tip shows. */
+    delay: () => number);
+    /** The pointer moved over the grid. */
+    hover(e: PointerEvent): void;
+    /** A cell or a header got keyboard focus. */
+    focus(el: HTMLElement): void;
+    hide(): void;
+    /** Whether there is something to show: a message, a hint, or text that is cut off. */
+    private worth;
+    private show;
+}

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

@@ -0,0 +1,59 @@
+import type { ComponentBase } from '@motifx/core';
+import { MenuList } from '../../../parts/menu/MenuList';
+import type { MenuItem } from '../../../parts/menu/menu-item';
+import { Popup } from '../../../parts/popup/Popup';
+import { TreeView } from '../../treeview/TreeView';
+import type { GridModel } from '../model/GridModel';
+import type { ColumnNode } from './column-node';
+import type { HeaderHost } from './header-host';
+/**
+ * The column menu, a kit `MenuList` in a `Popup`: sort, grouping, the header filter and clearing the
+ * column's filter, pin, fit, move, resize, hide, the list of columns (a submenu; also opened alone
+ * from the toolbar) and reset, each shown only while its feature is on for the column. Every item
+ * follows the grid's state while the menu is open. A band's menu pins, moves and hides the band.
+ * With bands the list of columns is the kit's `TreeView` with check boxes, bands over their columns,
+ * in a window of its own (DevExtreme's column chooser in its select mode).
+ */
+export declare class ColumnMenu<T> {
+    private readonly grid;
+    private readonly host;
+    private readonly owner;
+    readonly popup: Popup;
+    readonly list: MenuList;
+    /** The header the menu was opened for. */
+    private anchor;
+    private chooser;
+    constructor(grid: GridModel<T>, host: HeaderHost, owner: ComponentBase);
+    get opened(): boolean;
+    /** The tree of the column chooser while it is open (with bands), for tests and the grid. */
+    get tree(): TreeView<ColumnNode> | null;
+    /**
+     * Opens the menu of a column or band under `anchor`; focus goes back to `returnTo` when it
+     * closes. `prepare` may change the items, or return `null` to open nothing.
+     */
+    open(field: string, anchor: HTMLElement, returnTo: HTMLElement, prepare?: (items: MenuItem[]) => MenuItem[] | null): void;
+    /** Opens only the list of columns under `anchor` (the toolbar's button); focus goes back to it. */
+    openColumns(anchor: HTMLElement): void;
+    /** Whether the list of columns would have a column the user can hide. Reactive. */
+    hasColumns(): boolean;
+    close(): void;
+    /** Whether the menu of a column or band would have anything in it. */
+    hasEntries(field: string): boolean;
+    /** The list of columns: a check item per data column, which shows or hides it and keeps the menu open. */
+    private columnItems;
+    /** The column chooser with bands: the columns as a tree, a check box each, in a window under `anchor`. */
+    private openTree;
+    private makeChooser;
+    /** The columns and bands in a band (or at the top), as the tree shows them. */
+    private nodes;
+    /** The data columns the user shows: not hidden, nor in a hidden band. */
+    private shownLeaves;
+    /** What the tree's check boxes say: the columns checked show (with their bands), the others hide; the last shown one stays. */
+    private choose;
+    private hide;
+    private chosen;
+    /** The items of the menu of a column or band, in groups; an item whose feature is off is not visible. */
+    private items;
+    /** The groups' items in one list, a line before the first item that shows in each group after the first one that shows. */
+    private grouped;
+}

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

@@ -0,0 +1,31 @@
+import type { ColumnModel } from '../model/ColumnModel';
+import type { StickyOffset } from '../model/sticky-offset';
+/**
+ * Per-column CSS of one grid: columns not shown, alignment and sticky offsets, written as rules keyed
+ * by `data-field` (a pinned band's header by `data-band`, at the offset of its columns). Changing a width or pinning a column rewrites this sheet only; no cell gets a
+ * binding of its own and no row is touched. A constructable stylesheet adopted by the document (or
+ * shadow root) where there is one, which also works under a strict Content Security Policy; else a
+ * `<style>` element inside the grid.
+ */
+export declare class ColumnStyles<T> {
+    private readonly columns;
+    private readonly gridId;
+    private css;
+    /** The text the sheet holds: written again only when it changes, since writing a sheet has every element's style worked out again. */
+    private written;
+    private sheet;
+    private root;
+    private styleEl;
+    private stopWatch;
+    constructor(columns: ColumnModel<T>, gridId: string);
+    /** `placed`: every column's cells get their track by number, so a row may leave out the cells of columns not drawn (virtual columns). */
+    update(visible: string[], offsets: Map<string, StickyOffset>, align: Map<string, string>, bands?: readonly {
+        id: string;
+        first: number;
+        count: number;
+    }[], placed?: boolean): void;
+    attach(host: HTMLElement): void;
+    detach(): void;
+    private drop;
+    private apply;
+}

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

@@ -0,0 +1,56 @@
+import { ComponentBase } from '@motifx/core';
+import type { DetailContext } from '../detail-context';
+import type { GridModel } from '../model/GridModel';
+import type { DetailHost } from './detail-host';
+/**
+ * The details of one row (`masterDetail`): a row element under its master row with one cell across
+ * the grid, holding what the template made for the row. It is not pooled: the content belongs to its
+ * row, is made the first time the details show and is kept while the row is open, also out of view
+ * (parked: laid out but not drawn, so the content keeps its scroll positions), until it is disposed.
+ * A row's adaptive detail (`kind: 'adaptive'`, the values of the columns the width hides) is one too,
+ * with content of its own (`make`).
+ */
+export declare class DetailRow<T> {
+    private readonly model;
+    private readonly host;
+    /** The row's key as text, and the key itself. */
+    readonly id: string;
+    readonly key: unknown;
+    row: T;
+    readonly kind: 'detail' | 'adaptive';
+    /** Makes the content instead of `masterDetail.template`. */
+    private readonly make;
+    readonly element: HTMLDivElement;
+    readonly cell: HTMLDivElement;
+    /** What holds the content, named after the row (a cell named apart from its content would read wrong). */
+    private readonly box;
+    /** Grid index of the master row while drawn; -1 while parked. */
+    index: number;
+    /** Measured height; 0 until it was drawn. */
+    height: number;
+    /** When it was last drawn (a count of layouts), so the ones seen longest ago go first. */
+    seen: number;
+    private content;
+    private built;
+    private readonly version;
+    constructor(model: GridModel<T>, host: DetailHost<T>, 
+    /** The row's key as text, and the key itself. */
+    id: string, key: unknown, row: T, elementId: string, kind?: 'detail' | 'adaptive', 
+    /** Makes the content instead of `masterDetail.template`. */
+    make?: ((ctx: DetailContext<T>) => unknown) | null);
+    /** What the content was made as, once it is: a component, or `null`. */
+    get component(): ComponentBase | null;
+    /** Whether it is drawn now. */
+    get shown(): boolean;
+    /** Draws the details of grid row `index` at `top`, as wide as the viewport and kept in it while the rows scroll sideways. */
+    use(index: number, row: T, top: number, left: number, width: number, columns: number): void;
+    /** What the content reads of the row through its context is read again (`grid.repaint()`); its adaptive form draws its texts again. */
+    redraw(): void;
+    /** Out of view: kept, not drawn. */
+    park(): void;
+    /** Disposes the content and takes the row out of the body. */
+    dispose(): void;
+    /** Makes the content from the template, once. */
+    private build;
+    private context;
+}

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

@@ -0,0 +1,50 @@
+import type { GridModel } from '../model/GridModel';
+import type { DragSelectHost } from './drag-select-host';
+import type { GridBody } from './GridBody';
+/**
+ * Selecting by dragging: a press on a row or a cell that moves past `dragSelectionThreshold` selects
+ * the rows passed (multiple selection) or draws a range of cells (`cellSelection`), live; a shorter
+ * move stays a click, so clicks that select or start editing work as before. Near or past an edge the
+ * rows scroll, down and sideways, frame by frame, and the cells that come into view are taken in. On
+ * a touch screen a drag scrolls, unless a long press starts the selection (`dragSelectionTouch`).
+ * Escape gives the drag up. While it runs the browser selects no text; Alt+drag is left to it.
+ */
+export declare class DragSelect<T> {
+    private readonly model;
+    private readonly body;
+    private readonly host;
+    private pressed;
+    private readonly stops;
+    constructor(model: GridModel<T>, body: GridBody<T>, host: DragSelectHost);
+    /** A drag selection is running (past the threshold). */
+    get active(): boolean;
+    dispose(): void;
+    /** A press in the rows: watched when a drag selection may start from it. Returns whether it is. */
+    press(e: PointerEvent): boolean;
+    /**
+     * A phone decides when the finger lands whether the page may scroll at once, by whether the place
+     * has a touchmove listener that can stop it; one added on the press is too late. With the long press
+     * the rows hold one from the start, and it stops the scroll only while a selection is drawn.
+     * Returns what removes it.
+     */
+    holdTouch(rows: HTMLElement): () => void;
+    /** The rows changed while a drag runs (rows that were loading came): the selection is made again where the pointer is. */
+    refresh(): void;
+    /** What a press on grid row `index`, column `field` would select by dragging; `null` for nothing. */
+    private kindAt;
+    private listen;
+    private onMove;
+    private onUp;
+    /** Past the threshold (or the long press): the selection starts at the pressed cell. Returns whether it goes on. */
+    private start;
+    /** Where the pointer is now (kept inside the rows' area): the row and column the selection reaches. */
+    private track;
+    /** Scrolls while the pointer is near or past an edge, a step a frame, and takes in the rows and columns that come. */
+    private autoScroll;
+    private end;
+    private area;
+    /** The grid row at height `y` (kept inside the rows shown): the last one starting above it. */
+    private rowAt;
+    /** The selectable column at `x` (kept inside the viewport): a pinned one over the others, else the nearest. */
+    private fieldAt;
+}

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

@@ -0,0 +1,59 @@
+import { Component } from '@motifx/core';
+import { Button } from '../../button/Button';
+import { FormLayout } from '../../formlayout/FormLayout';
+import type { GridModel } from '../model/GridModel';
+import type { Switches } from '../model/Switches';
+import { CellEditor } from './CellEditor';
+import type { EditFormHost } from './edit-form-host';
+import type { FormValues } from './form-values';
+/**
+ * The edit form of a row (`editMode` `'form'` and `'popup'`): the kit's `FormLayout` with a field per
+ * column, each the editor its cell would get (by type, a lookup's, the column's own) with its frame
+ * and label. The fields stand for the row's draft: a value is written when its field is left or an
+ * item is picked, the grid's checks show their messages on the fields, and a field whose value
+ * changed through another one (`setCellValue`) is made again. Save and Cancel are its own buttons,
+ * under the fields or in the window that holds the form. It follows nothing of the grid: it draws
+ * itself again whenever the grid tells a change.
+ */
+export declare class EditForm<T> extends Component<HTMLDivElement> {
+    private readonly model;
+    readonly rowId: string;
+    readonly row: T;
+    private readonly settings;
+    private readonly host;
+    readonly layout: FormLayout;
+    /** Save and Cancel. */
+    readonly buttons: Component<HTMLDivElement>;
+    readonly saveButton: Button;
+    readonly cancelButton: Button;
+    private readonly placed;
+    private readonly message;
+    private readonly isNew;
+    /** The `items` option the fields were laid out from, as text; `null` before the first time. */
+    private itemsFrom;
+    constructor(model: GridModel<T>, rowId: string, row: T, settings: Switches<FormValues>, host: EditFormHost<T>, inline: boolean);
+    /** Draws the form as the grid and the row's draft are now; values written some other way (an async `setCellValue`) remake their fields. */
+    draw(): void;
+    /** Lays the fields out again from the `items` option: what it holds changed in a way its text does not show. */
+    relayout(): void;
+    /** Focuses a field's editor, else the first one that can be filled in. */
+    focus(field?: string): boolean;
+    /** Writes a field's value into the row's draft. `false` when its editor cannot read what it holds. */
+    keep(field: string): boolean;
+    /** Writes every field; the first one whose editor cannot read its value, or `null`. */
+    keepAll(): string | null;
+    /** The editor of a field. */
+    editorOf(field: string): CellEditor<T> | null;
+    private readOnly;
+    /** The form items: the given ones, else every column; a column's field gets the grid's editor. */
+    private items;
+    /** Every column, the visible ones in their order, then the hidden ones; `formItem.order` first. */
+    private columnFields;
+    private item;
+    /** A column's place in the form: a holder its editor is made in when the form lays it out. */
+    private fieldItem;
+    /** Makes (or makes again) the editor of a field, with the value of the draft. */
+    private make;
+    /** Fields whose value in the draft is not the one their editor was made with are made again. */
+    private follow;
+}

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

@@ -0,0 +1,26 @@
+import { FilterBuilder } from '../../filterbuilder/FilterBuilder';
+import type { FilterBuilderCustomOperation } from '../../filterbuilder/filter-builder-custom-operation';
+import { MxForm } from '../../form/MxForm';
+import type { GridModel } from '../model/GridModel';
+import type { FilterBuilderWindowHost } from './filter-builder-window-host';
+/**
+ * The filter builder in a modal window (the kit's `MxForm`), on the grid's filter value: OK makes
+ * the builder's value the filter value, Cancel, Escape and the close button leave it as it was.
+ * Every column with `filterBuilder` on is a field; the builder's own props come from `filterBuilder`.
+ * It follows nothing of the grid: while it is open it draws itself again whenever the grid tells a change.
+ */
+export declare class FilterBuilderWindow<T> {
+    private readonly model;
+    private readonly host;
+    builder: FilterBuilder | null;
+    window: MxForm | null;
+    /** What draws the open window again. */
+    private drawOpen;
+    constructor(model: GridModel<T>, host: FilterBuilderWindowHost);
+    get opened(): boolean;
+    /** The custom operations of the builder's props, also for the panel's text. */
+    customOperations(): readonly FilterBuilderCustomOperation[];
+    open(): boolean;
+    /** Closes the window; with `apply` the builder's value becomes the filter value. `false` when `onFilterBuilderClosing` kept it open. */
+    close(apply: boolean, closing?: boolean): boolean;
+}

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

@@ -0,0 +1,42 @@
+import { type ComponentBase } from '@motifx/core';
+import type { Field } from '../../../parts/field/Field';
+import type { GridModel } from '../model/GridModel';
+/**
+ * One cell of the filter row: a condition button (by the column type; none for a check box column)
+ * and the kit's editor for the value — a `TextBox`, `NumberBox` or `DateBox`, two of them for
+ * "between", none for "empty" and "not empty", a `DropDown` for list and yes/no columns. The editors
+ * are bound to the grid's filters both ways and are out of the Tab order: the grid is one tab stop.
+ * It follows nothing: the filter row draws it again (`draw`) whenever the grid tells a change.
+ */
+export declare class FilterCell<T> {
+    private readonly model;
+    readonly field: string;
+    readonly cell: HTMLElement;
+    /** The condition button; `null` for a check box column. */
+    readonly condition: HTMLButtonElement | null;
+    readonly editors: Field<any>[];
+    /** What `draw` does, part by part. */
+    private readonly drawers;
+    private readonly stops;
+    /** Holds the editors; it goes with the cell. */
+    private readonly holder;
+    private disposed;
+    constructor(model: GridModel<T>, field: string, cell: HTMLElement, owner: ComponentBase);
+    /** Draws the editors and the condition as the column's filter is now. */
+    draw(): void;
+    /** The element that takes the keys of an editor (its input or its list's field). */
+    inputOf(editor: Field<any>): HTMLElement;
+    /** The editors that show now. */
+    shownEditors(): Field<any>[];
+    /** Focuses the first editor; a character typed on the cell starts its text. Returns whether there was one. */
+    focus(typed?: string): boolean;
+    dispose(): void;
+    /**
+     * A lookup column's list: "(All)" first, then the texts of its keys, searched by text. Its values
+     * are asked for the first time it opens, and again when the other filters changed since.
+     */
+    private lookupList;
+    /** The choices of a list or yes/no column; "All" first stands for no filter. */
+    private choices;
+    private createCondition;
+}

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

@@ -0,0 +1,21 @@
+import { Component } from '@motifx/core';
+import type { GridModel } from '../model/GridModel';
+import type { FilterPanelHost } from './filter-panel-host';
+/**
+ * The filter panel under the rows: a check box that turns the filter value on and off, the filter
+ * as text (pressing it opens the filter builder), "Create Filter" while there is none, and "Clear".
+ * It follows nothing: made in code, it draws itself again whenever the grid tells a change.
+ */
+export declare class FilterPanel<T> extends Component<HTMLDivElement> {
+    private readonly grid;
+    private readonly host;
+    /** The text button, where focus goes back when the builder closes. */
+    textButton: HTMLButtonElement | null;
+    private enabled;
+    private clear;
+    constructor(grid: GridModel<T>, host: FilterPanelHost);
+    onConfigured(): void;
+    initializeComponent(): void;
+    /** Draws the panel as the grid's filter is now. */
+    draw(): void;
+}

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

@@ -0,0 +1,29 @@
+import { Component } from '@motifx/core';
+import { type GridModel } from '../model/GridModel';
+import { FilterCell } from './FilterCell';
+/**
+ * The filter row under the header: a cell per column, built when the row first shows; a column's
+ * editors are made the first time its cell is needed. Cells are plain elements carrying
+ * `data-field`, so the grid's per-column sheet pins and hides them with the headers.
+ */
+export declare class FilterRow<T> extends Component<HTMLDivElement> {
+    private readonly grid;
+    readonly filterCells: Map<string, FilterCell<T>>;
+    private readonly cellEls;
+    constructor(grid: GridModel<T>);
+    onConfigured(): void;
+    /** Draws the row and its cells as the grid is now. */
+    draw(): void;
+    /** Puts the cells in display order, numbers the visible ones and makes the editors the row needs now; while columns are virtual, only the columns drawn have their cell in the row. */
+    arrange(visible: string[]): void;
+    /** Makes the editors of the visible columns that have a filter cell, while the row shows. */
+    makeCells(visible: string[]): void;
+    /** A column's cell (one added at run time too; placed by the next `arrange`). */
+    addColumn(field: string): void;
+    private makeCell;
+    /** A column taken out, or made again: its cell and editors go. */
+    removeColumn(field: string): void;
+    cellElement(field: string): HTMLElement | undefined;
+    /** The filter cell an element belongs to. */
+    cellOf(el: Element | null): FilterCell<T> | undefined;
+}