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

package/dist/components/datagrid/grid-action.d.ts

@@ -0,0 +1,55 @@
+import type { Bind } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+import type { GridActionLocation } from './grid-action-location';
+import type { GridActionRun } from './grid-action-run';
+import type { GridSelection } from './grid-selection';
+import type { RowState } from './row-state';
+/**
+ * A button of a row's actions. `text` is always there: it is the button's name for assistive
+ * technology even when only the icon shows. Give an element icon as a function (`() => myIcon()`),
+ * so every row gets its own.
+ *
+ * An action shows in its row, or in the toolbar or the bottom bar for the selected rows
+ * (`location`); there several rows share the actions they all have. On several rows `onclickMany`
+ * runs once with all of them; without it `onclick` runs for each row in turn.
+ */
+export interface GridAction<T = any> {
+    /** Names the action; its width is measured once per `id` and text. Rows share an action by its `id`. */
+    id: string;
+    text: Bind<string>;
+    icon?: Bind<IconSource | null | undefined>;
+    /** Show the text next to the icon. Default: only when there is no icon. */
+    showText?: boolean;
+    /** The colour of its button and of its menu items. Default `'standard'`. */
+    tone?: 'standard' | 'accent' | 'danger';
+    /** Shown as a tooltip. Default: `text` when only the icon shows. */
+    hint?: Bind<string>;
+    disabled?: boolean | ((row: T, state: RowState) => boolean);
+    /** `false` leaves the action out for that row. */
+    visible?: boolean | ((row: T, state: RowState) => boolean);
+    /** Where it shows. Default: the grid's `actionsLocation`. */
+    location?: Bind<GridActionLocation>;
+    /** In its "more" menu: when it does not fit, always, or never (a button even in the `'menu'` display). Default `'auto'`. */
+    menu?: Bind<'auto' | 'always' | 'never'>;
+    /** It can run on several rows at once. Default `true`; the grid's `edit` `false`. */
+    multiple?: Bind<boolean>;
+    /** On several rows: usable while it is enabled for all of them, or for any (it then runs on those). Default: the grid's `actionsMultipleEnabled`. */
+    multipleEnabled?: Bind<'all' | 'any'>;
+    /** On several rows one by one: a failed row stops the rest. Default: the grid's `actionsStopOnError`. */
+    stopOnError?: Bind<boolean>;
+    /** The count of rows it runs on, after its text ("Approve (3)"). Default: the grid's `actionsShowCount`. */
+    showCount?: Bind<boolean>;
+    /** In the row's context menu. Default: the grid's `actionsContextMenu`. */
+    contextMenu?: Bind<boolean>;
+    /** A line before it in a menu, to group the commands. */
+    beginGroup?: Bind<boolean>;
+    /** Runs for one row. A promise is waited for; a throw, a rejection or a promise of `false` counts the row as failed. */
+    onclick?: (row: T, state: RowState) => unknown;
+    /** Runs once for several rows (one row too, when there is no `onclick`). */
+    onclickMany?: (rows: T[], e: GridActionRun) => unknown;
+    /**
+     * Runs for a selection whose rows are not loaded ("select all" over a server): it gets the selection
+     * as `grid.selection` has it, to send to the server. Only actions that have it show in that state.
+     */
+    onclickSelection?: (selection: GridSelection, e: GridActionRun) => unknown;
+}

package/dist/components/datagrid/grid-adaptive-detail-row-preparing-event-args.d.ts

@@ -0,0 +1,14 @@
+import type { GridAdaptiveFormOptions } from './grid-adaptive-form-options';
+/**
+ * A row's adaptive detail is about to lay out its form: when it opens, and again when other columns
+ * hide or show. Change `formOptions` (DevExtreme's `onAdaptiveDetailRowPreparing`).
+ */
+export interface GridAdaptiveDetailRowPreparingEventArgs<T> {
+    readonly row: T;
+    /** The row's key; `undefined` for a new row. */
+    readonly key: unknown;
+    readonly rowIndex: number;
+    /** The form shows editors (the row can be edited in its cells). */
+    readonly editors: boolean;
+    formOptions: GridAdaptiveFormOptions;
+}

package/dist/components/datagrid/grid-adaptive-detail.d.ts

@@ -0,0 +1,25 @@
+import type { Bind } from '@motifx/core';
+import type { FieldLabelMode } from '../../parts/field/field-label-mode';
+/**
+ * The adaptive detail of a row: while columns hide to fit the width (`columnHidingEnabled`,
+ * `hidingPriority`), the "…" cell opens a row under the row with their titles and values, laid out
+ * by the kit's `FormLayout` (editors where the row can be edited in its cells). One row has it open
+ * at a time. Every field is a value or a function that is followed; read and change it later
+ * through `grid.adaptiveDetail`.
+ */
+export interface GridAdaptiveDetail {
+    /** Columns of the form. Default `2`. */
+    colCount?: Bind<number>;
+    /** As many columns as fit, each at least this wide (a CSS length); `colCount` is the most. Default `'16rem'`. */
+    minColWidth?: Bind<string | undefined>;
+    /** Where the titles go. Default `'side'`. */
+    labelMode?: Bind<FieldLabelMode>;
+    /** Editors instead of texts for the cells the user can fill, in the `'row'`, `'cell'` and `'batch'` edit modes. Default `true`. */
+    editors?: Bind<boolean>;
+    /** Editing a row with hidden columns it can fill opens its adaptive detail, and closes it when the row is left (DevExtreme's row editing). Default `true`. */
+    expandOnEdit?: Bind<boolean>;
+    /** Width of the "…" column, in pixels. Default `36`. */
+    columnWidth?: Bind<number>;
+    /** Keys on the "…" cell that open and close the detail (`KeyboardEvent.key` values). Default `['Enter', ' ']`. */
+    toggleKeys?: Bind<readonly string[]>;
+}

package/dist/components/datagrid/grid-adaptive-form-options.d.ts

@@ -0,0 +1,10 @@
+import type { FieldLabelMode } from '../../parts/field/field-label-mode';
+import type { FormItem } from '../formlayout/form-item';
+/** How an adaptive detail lays its form out: change it in `onAdaptiveDetailRowPreparing`. */
+export interface GridAdaptiveFormOptions {
+    /** The hidden columns by field, in display order; reorder them, take some out, or put kit form items (`template`, `group`) among them. */
+    items: (string | FormItem)[];
+    colCount: number;
+    minColWidth: string | undefined;
+    labelMode: FieldLabelMode;
+}

package/dist/components/datagrid/grid-adaptive-row-expanded-event-args.d.ts

@@ -0,0 +1,7 @@
+/** A row's adaptive detail opened or closed, by the user or from code. */
+export interface GridAdaptiveRowExpandedEventArgs<T> {
+    readonly row: T;
+    /** The row's key; `undefined` for a new row. */
+    readonly key: unknown;
+    readonly rowIndex: number;
+}

package/dist/components/datagrid/grid-adaptive-row-expanding-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { EventArgs } from '@motifx/core';
+/** A row's adaptive detail is about to open or close, by the user or from code; `cancel` keeps it as it is. */
+export interface GridAdaptiveRowExpandingEventArgs<T> extends EventArgs {
+    readonly row: T;
+    /** The row's key; `undefined` for a new row. */
+    readonly key: unknown;
+    readonly rowIndex: number;
+}

package/dist/components/datagrid/grid-band.d.ts

@@ -0,0 +1,38 @@
+import type { Bind } from '@motifx/core';
+import type { BandCellContext } from './band-cell-context';
+import type { GridColumn } from './grid-column';
+import type { StickySide } from './sticky-side';
+/**
+ * A band: one header over several columns (DevExtreme's band column). It holds no data; its
+ * `columns`, columns and bands to any depth, show under its caption. A band is pinned, moved and
+ * hidden as a whole, and its columns move only inside it; hiding all of them hides it too. Give it
+ * flat instead with `isBand`, its columns naming it in their `ownerBand`. `movable`, `hideable`,
+ * `pinnable` and `menu` override the grid's `settings` for the band.
+ *
+ * @example
+ * { title: 'Contact', columns: [{ field: 'email', title: 'Email' }, { field: 'phone', title: 'Phone' }] }
+ */
+export interface GridBand<T = any> {
+    /** The band's identity in layouts, `columnOption`, `columnSettings` and the events. Default: `band-` and its place among the columns (`band-2`, `band-2-0`). */
+    name?: string;
+    /** Header text. */
+    title: Bind<string>;
+    /** The columns and bands under it, in order. */
+    columns?: readonly (GridColumn<T> | GridBand<T>)[];
+    /** A band given flat in the grid's columns (DevExtreme's `isBand`): the columns that name it in `ownerBand` go under it. */
+    isBand?: boolean;
+    /** The band this one sits in: its `name`, or its place in the grid's `columns`. */
+    ownerBand?: string | number;
+    /** Content of your own in the band's header instead of its title text, made once; read `ctx` in getters. The title stays its accessible name. */
+    headerCell?: (ctx: BandCellContext<T>) => unknown;
+    /** Where the caption sits. Default: the grid's `bandAlign` setting (`'center'`). */
+    align?: Bind<'start' | 'center' | 'end'>;
+    /** Keep the band, all its columns, at the start or end edge while scrolling sideways. */
+    sticky?: StickySide;
+    /** Start hidden, with all its columns. */
+    hidden?: boolean;
+    movable?: Bind<boolean>;
+    hideable?: Bind<boolean>;
+    pinnable?: Bind<boolean>;
+    menu?: Bind<boolean>;
+}

package/dist/components/datagrid/grid-bar-action.d.ts

@@ -0,0 +1,14 @@
+import type { GridAction } from './grid-action';
+import type { GridActionLocation } from './grid-action-location';
+/** An action the toolbar or the bottom bar shows now, for the rows it acts on (`grid.barActions`). */
+export interface GridBarAction<T> {
+    readonly action: GridAction<T>;
+    readonly location: GridActionLocation;
+    /** Its text, without the count. */
+    readonly text: string;
+    /** Rows it runs on (the selected count for a selection whose rows are not loaded). */
+    readonly count: number;
+    readonly disabled: boolean;
+    /** The rows it runs on; empty for a selection whose rows are not loaded. */
+    readonly rows: readonly T[];
+}

package/dist/components/datagrid/grid-built-in-actions.d.ts

@@ -0,0 +1,14 @@
+import type { GridAction } from './grid-action';
+/** The actions the grid has ready (`grid.actions`); in the `actions` prop they can also be named: `['edit', 'remove']`. */
+export interface GridBuiltInActions<T> {
+    /** Opens the editor of the row's first cell the user can fill. */
+    edit: GridAction<T>;
+    /** Deletes the row as the save mode says. */
+    remove: GridAction<T>;
+    /** Takes a deletion mark back (batch mode). */
+    restore: GridAction<T>;
+    /** Sends the row's edits now. */
+    save: GridAction<T>;
+    /** Drops the row's edits; a new row goes away. */
+    cancel: GridAction<T>;
+}

package/dist/components/datagrid/grid-cell-click-event-args.d.ts

@@ -0,0 +1,16 @@
+import type { EventArgs } from '@motifx/core';
+import type { GridRowType } from './grid-row-type';
+/** A cell was clicked (or double-clicked); `cancel` stops what the grid does with it (select, open or close a group, edit). */
+export interface GridCellClickEventArgs<T> extends EventArgs {
+    readonly field: string;
+    /** The row; `undefined` on a group row or while the row loads. */
+    readonly row: T | undefined;
+    /** Index of the row in the grid (new rows included). */
+    readonly rowIndex: number;
+    readonly rowType: GridRowType;
+    /** On a group row: the values of its groups from the top level down. */
+    readonly groupKey?: readonly unknown[];
+    /** The cell element. */
+    readonly element: HTMLElement;
+    readonly event: MouseEvent;
+}

package/dist/components/datagrid/grid-cell-extend-keys.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The keys that extend the last cell range from its far corner, by where the corner goes: a cell
+ * up, down, left or right, a screen of rows up or down, the row's first or last cell (`home`,
+ * `end`), the first or last row (`top`, `bottom`), the row's leftmost or rightmost cell, the very
+ * first or last cell. Each is a list of chords (`'Shift+ArrowUp'`, `'Mod+Shift+End'`).
+ */
+export interface GridCellExtendKeys {
+    up: readonly string[];
+    down: readonly string[];
+    left: readonly string[];
+    right: readonly string[];
+    pageUp: readonly string[];
+    pageDown: readonly string[];
+    home: readonly string[];
+    end: readonly string[];
+    top: readonly string[];
+    bottom: readonly string[];
+    leftmost: readonly string[];
+    rightmost: readonly string[];
+    first: readonly string[];
+    last: readonly string[];
+}

package/dist/components/datagrid/grid-cell-point.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A cell of the grid: its column and its row, by key or by grid index. Given by code, either is
+ * enough (the key wins); read back, both are filled (`key` is `undefined` for a new row or a row
+ * still loading).
+ */
+export interface GridCellPoint {
+    field: string;
+    key?: unknown;
+    rowIndex?: number;
+}

package/dist/components/datagrid/grid-cell-prepared-event-args.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A cell was drawn for a row: style it or add to it. The element is reused for other rows while the
+ * user scrolls, so set and clear what you change (`classList.toggle`, `dataset`), every time.
+ */
+export interface GridCellPreparedEventArgs<T> {
+    readonly field: string;
+    readonly row: T;
+    readonly rowIndex: number;
+    /** The value shown: the unsaved one when there is one. */
+    readonly value: unknown;
+    readonly isNew: boolean;
+    readonly element: HTMLElement;
+}

package/dist/components/datagrid/grid-cell-range.d.ts

@@ -0,0 +1,11 @@
+import type { GridCellPoint } from './grid-cell-point';
+/**
+ * A rectangle of cells: the rows from `from` to `to` in the grid's order, in the columns between
+ * them. `from` is where the range was started (its anchor), `to` its far corner. `fields` are the
+ * columns it covers, in display order; given by code it may be left out.
+ */
+export interface GridCellRange {
+    from: GridCellPoint;
+    to: GridCellPoint;
+    fields?: string[];
+}

package/dist/components/datagrid/grid-cell-selection-changed-event-args.d.ts

@@ -0,0 +1,7 @@
+import type { GridCellRange } from './grid-cell-range';
+/** The cell ranges changed, by the user or by code. */
+export interface GridCellSelectionChangedEventArgs {
+    ranges: GridCellRange[];
+    /** The change comes from a range being drawn with the pointer. */
+    byDrag: boolean;
+}

package/dist/components/datagrid/grid-cell-selection-changing-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { EventArgs } from '@motifx/core';
+import type { GridCellRange } from './grid-cell-range';
+/** The cell ranges are about to change (by the user or by code); `cancel` keeps them as they are. */
+export interface GridCellSelectionChangingEventArgs extends EventArgs {
+    readonly ranges: GridCellRange[];
+    readonly previous: GridCellRange[];
+    /** The change comes from a range being drawn with the pointer. */
+    readonly byDrag: boolean;
+}

package/dist/components/datagrid/grid-cell-summary-item.d.ts

@@ -0,0 +1,2 @@
+/** A part of the selected cells' summary in the bottom bar. */
+export type GridCellSummaryItem = 'count' | 'sum' | 'average' | 'min' | 'max';

package/dist/components/datagrid/grid-cell-summary.d.ts

@@ -0,0 +1,14 @@
+/** What the selected cells add up to, as a spreadsheet's status bar shows it. Only loaded rows count. */
+export interface GridCellSummary {
+    /** Cells in the ranges, each once. */
+    cells: number;
+    /** Cells that hold a value. */
+    count: number;
+    /** Cells that hold a number. */
+    numbers: number;
+    sum: number;
+    /** `null` while no cell holds a number. */
+    average: number | null;
+    min: number | null;
+    max: number | null;
+}

package/dist/components/datagrid/grid-cell-value.d.ts

@@ -0,0 +1,9 @@
+/** One selected cell, as `getSelectedCellValues()` gives it: its value (the unsaved edit, when there is one). */
+export interface GridCellValue<T> {
+    rowIndex: number;
+    /** The row's key; `undefined` for a new row. */
+    key: unknown;
+    field: string;
+    value: unknown;
+    row: T;
+}

package/dist/components/datagrid/grid-changes.d.ts

@@ -0,0 +1,10 @@
+import type { RowChange } from './row-change';
+/** Unsaved changes, as `grid.changes` returns them. */
+export interface GridChanges<T> {
+    /** New rows: the grid's row for each, and the values entered in it. */
+    added: RowChange<T>[];
+    updated: RowChange<T>[];
+    removed: T[];
+    /** Number of rows with a change. */
+    count: number;
+}

package/dist/components/datagrid/grid-column-form-item.d.ts

@@ -0,0 +1,16 @@
+import type { Bind } from '@motifx/core';
+/** A column's field in the edit form. */
+export interface GridColumnFormItem {
+    /** `false` leaves the column out of the form. Default `true`. */
+    visible?: Bind<boolean>;
+    /** Form columns it spans; `'all'` the whole line. */
+    colSpan?: number | 'all';
+    /** The label. Default: the column's title. */
+    label?: Bind<string>;
+    /** A line under the editor. */
+    helpText?: Bind<string>;
+    /** Props of its editor in the form only, over the column's (`lookup.editorOptions`). */
+    editorOptions?: Record<string, unknown>;
+    /** Its place in the form; lower first. Default: the column's place. */
+    order?: number;
+}

package/dist/components/datagrid/grid-column-item.d.ts

@@ -0,0 +1,4 @@
+import type { GridBand } from './grid-band';
+import type { GridColumn } from './grid-column';
+/** What the grid's `columns` hold: columns, and bands over columns. */
+export type GridColumnItem<T = any> = GridColumn<T> | GridBand<T>;

package/dist/components/datagrid/grid-column.d.ts

@@ -0,0 +1,190 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { CellContext } from './cell-context';
+import type { ColumnResizeMode } from './column-resize-mode';
+import type { ColumnType } from './column-type';
+import type { EditorContext } from './editor-context';
+import type { GroupCellContext } from './group-cell-context';
+import type { HeaderCellContext } from './header-cell-context';
+import type { GridFilterOperator } from './grid-filter-operator';
+import type { GridHeaderFilterInterval } from './grid-header-filter-interval';
+import type { GridHeaderFilterItems } from './grid-header-filter-items';
+import type { GridColumnFormItem } from './grid-column-form-item';
+import type { GridLookup } from './grid-lookup';
+import type { GridValidationRule } from './grid-validation-rule';
+import type { ListOption } from './list-option';
+import type { StickySide } from './sticky-side';
+/**
+ * Definition of one column. `editable`, `creatable`, `sortable`, `resizable`, `movable`, `hideable`,
+ * `pinnable`, `menu`, `filterRow`, `headerFilter`, `filterBuilder`, `copyable`, `cellSelectable`, `exportable`, `syncLookupFilterValues`, `searchable`, `groupable`, `showWhenGrouped`, `allowCollapsing`, `groupCount` and `groupMenu` override the grid's `settings` for this column; each is a value or a function
+ * that is followed (`editable` and `creatable` also take a function of the row, which decides per row).
+ *
+ * @example
+ * { field: 'amount', title: 'Amount', type: 'number', width: 120, sticky: 'end', movable: false }
+ */
+export interface GridColumn<T = any> {
+    /** Key of the value in the row (a dotted path reads a nested one); also the column's identity in layouts and sort items. */
+    field: string;
+    /** Header text. */
+    title: Bind<string>;
+    /** Content of your own in the header cell instead of the title text, made once; read `ctx` in getters. The title stays the cell's accessible name. */
+    headerCell?: (ctx: HeaderCellContext<T>) => unknown;
+    /** Value type; decides alignment, formatting, comparison and the editor. Default `'text'`. */
+    type?: ColumnType;
+    /** Width in pixels. Default: the grid's `columnWidth` setting (140). */
+    width?: number;
+    /** Smallest width the user can resize to. Default: the grid's `columnMinWidth` setting (48). */
+    minWidth?: number;
+    /** Largest width the user can resize to. */
+    maxWidth?: number;
+    /** Share of the free space this column takes when the grid is wider than its columns. */
+    flex?: number;
+    /** Keep the column at the start or end edge while scrolling sideways. A column in a band sticks with its band. */
+    sticky?: StickySide;
+    /** The band this column sits in when the columns are given flat: the band's `name`, or its place in the grid's `columns` (DevExtreme's `ownerBand`). */
+    ownerBand?: string | number;
+    /**
+     * When the grid is narrower than its columns, columns with a priority hide, the lowest first, and
+     * show in the row's adaptive detail (`columnHidingEnabled`). Given on any column, only columns
+     * with one hide. Pinned and grouped columns never hide. Followed when a function.
+     */
+    hidingPriority?: Bind<number | undefined>;
+    /** Start hidden; the user can show it from the column menu. */
+    hidden?: boolean;
+    /** Horizontal alignment. Default: `end` for numbers, `center` for booleans, `start` otherwise. */
+    align?: 'start' | 'center' | 'end';
+    /** Reads the value instead of `row[field]`. */
+    value?: (row: T) => unknown;
+    /**
+     * How the value shows: `Intl` options for a number or a date column (`{ style: 'currency', currency: 'EUR' }`,
+     * `{ dateStyle: 'medium' }`), which an Excel export turns into the cell's number format too, or a
+     * function that writes the text (exported as that text). Default: `Intl` formatting by `type` and `locale`.
+     */
+    format?: ((value: unknown, row: T) => string) | Intl.NumberFormatOptions | Intl.DateTimeFormatOptions;
+    /** Compares two values for sorting rows in memory. Default: by `type`, text in the locale. */
+    compare?: (a: unknown, b: unknown) => number;
+    /** Custom cell content, built once per pooled cell. Read `ctx.row` inside getters. */
+    cell?: (ctx: CellContext<T>) => unknown;
+    editable?: boolean | ((row: T) => boolean);
+    creatable?: boolean | ((row: T) => boolean);
+    sortable?: Bind<boolean>;
+    resizable?: Bind<boolean>;
+    /** How this column's edge is dragged; overrides the grid's `resizeMode`. */
+    resizeMode?: Bind<ColumnResizeMode>;
+    /**
+     * `'virtual'`: the column gets cells only while it is in view; `'standard'`: always (a cell content
+     * with a state of its own). Overrides the grid's `columnRenderingMode`.
+     */
+    columnRenderingMode?: Bind<'standard' | 'virtual'>;
+    /** Typing a character on a cell opens its editor. Overrides the grid's `editOnKeyPress`. */
+    editOnKeyPress?: Bind<boolean>;
+    /** A double-click or one click opens a cell's editor. Overrides the grid's `startEditAction`. */
+    startEditAction?: Bind<'click' | 'dblClick'>;
+    /** A yes/no column: pasted texts read as yes. Overrides the grid's `trueTexts`. */
+    trueTexts?: readonly string[];
+    /** A yes/no column: pasted texts read as no. Overrides the grid's `falseTexts`. */
+    falseTexts?: readonly string[];
+    movable?: Bind<boolean>;
+    hideable?: Bind<boolean>;
+    pinnable?: Bind<boolean>;
+    menu?: Bind<boolean>;
+    filterRow?: Bind<boolean>;
+    headerFilter?: Bind<boolean>;
+    filterBuilder?: Bind<boolean>;
+    copyable?: Bind<boolean>;
+    cellSelectable?: Bind<boolean>;
+    exportable?: Bind<boolean>;
+    /** The conditions the filter row offers for this column, in order. Default: all of the column type's. */
+    filterOperators?: readonly GridFilterOperator[];
+    /** The condition the filter row starts with. Default: the first of `filterOperators`, else by type. */
+    filterOperator?: GridFilterOperator;
+    /**
+     * How the header filter groups the values: a range size for a number column (`100`: "0 – 100",
+     * "100 – 200"; `[1000, 100]` a tree of ranges), the deepest part of the year → month → day … tree
+     * for a date column (`'month'`), `null` for one entry per value. Default: none for numbers, the
+     * grid's `headerFilterDateInterval` for dates.
+     */
+    headerFilterInterval?: Bind<GridHeaderFilterInterval>;
+    /** The header filter's entries instead of the column's values: `{ text, value }` items (a value may be a filter expression), or a function that gives them. */
+    headerFilterItems?: GridHeaderFilterItems<T>;
+    /** The values chosen in the header filter, followed when a function. The grid's `filters` hold them as the column's `values`. */
+    filterValues?: Bind<readonly unknown[] | undefined>;
+    /** `'exclude'`: the rows with `filterValues` are left out instead of kept. Followed when a function. Default `'include'`. */
+    filterType?: Bind<'include' | 'exclude'>;
+    /** An empty value stops the row from being saved. */
+    required?: boolean;
+    /**
+     * Checks a value; return the message to show, or nothing. `row` is the row itself; `context` has
+     * the values entered and not saved yet (`values`) and `getValue(field)`, the value a field is saved with.
+     */
+    validate?: (value: unknown, row: T, context: data.RowCheckContext<T>) => string | null | undefined;
+    /**
+     * DevExtreme's rule set, checked after `required` and `validate`: `required`, `numeric`, `range`,
+     * `stringLength`, `pattern`, `email`, `compare`, `custom` and `async`. A value is checked when it is
+     * written and when the row is checked before it is saved; the row waits for an `async` rule.
+     */
+    validationRules?: readonly GridValidationRule<T>[];
+    /** How the column shows in the edit form (`editMode` `'form'` or `'popup'`). */
+    formItem?: GridColumnFormItem;
+    /** Choices of a `list` column: an array, or a function of the row and its entered values (`context.getValue(field)`; may return a promise). */
+    options?: readonly ListOption[] | ((row: T, context: data.RowCheckContext<T>) => readonly ListOption[] | Promise<readonly ListOption[]>);
+    /**
+     * A custom editor, made when the cell is edited: a `Field` (its `value` is read), or any component
+     * that calls `ctx.setValue`.
+     */
+    editor?: (ctx: EditorContext<T>) => unknown;
+    /**
+     * The cell keeps a key and shows the text of its item from another source (a service, an array).
+     * The column is shown, edited, filtered, sorted, copied and exported as a lookup; `type` still
+     * decides the alignment.
+     */
+    lookup?: GridLookup<T>;
+    /**
+     * The text of a lookup cell read from the row itself (`'customer.name'` of an expanded relation);
+     * the lookup source is then asked only to edit and to list. The field form is also what a server
+     * sorts by.
+     */
+    textFrom?: string | ((row: T) => string);
+    /** The field the rows are sorted by for this column (a server sorts by it), instead of `field`. */
+    sortField?: string;
+    /**
+     * Called when the user commits a value into a cell (editor, paste, Delete), before it is written.
+     * `values` starts as `{ [field]: value }`; change it to write other fields too (clear the city when
+     * the state changes). `row` is the row itself; `context` has the values entered so far
+     * (`context.values`, `context.getValue(field)`). May return a promise: the cell shows that it is
+     * busy until it settles.
+     */
+    setCellValue?: (values: Record<string, unknown>, value: unknown, row: T, context: data.RowCheckContext<T>) => void | Promise<void>;
+    /** The filter row and header filter of a lookup column list only the keys of rows the other filters leave. Overrides the grid's `syncLookupFilterValues`. */
+    syncLookupFilterValues?: Bind<boolean>;
+    /** The search panel looks in this column. Default: on, unless the column turns its own filters off. */
+    searchable?: Bind<boolean>;
+    /** The user can group by this column. Overrides the grid's `groupable`. */
+    groupable?: Bind<boolean>;
+    /**
+     * The column's place among the grouped columns, 0 first; the rows start grouped by it. A function is
+     * followed: a new value moves the column there, `undefined` takes it out.
+     */
+    groupIndex?: Bind<number | undefined>;
+    /** A grouped column still shows among the other columns. Overrides the grid's `showWhenGrouped`. */
+    showWhenGrouped?: Bind<boolean>;
+    /** The user can open and close this column's groups. Overrides the grid's `allowCollapsing`. */
+    allowCollapsing?: Bind<boolean>;
+    /** This column's group rows show their row count. Overrides the grid's `groupCount`. */
+    groupCount?: Bind<boolean>;
+    /** The grouping items of the column menu for this column. Overrides the grid's `groupMenu`. */
+    groupMenu?: Bind<boolean>;
+    /** This column's groups open from their arrow or from a click on the row. Overrides the grid's `groupExpandMode`. */
+    groupExpandMode?: Bind<'button' | 'rowClick'>;
+    /** Orders this column's groups, in memory (`dir` still turns the order). Default: by their values, like a sort. */
+    groupCompare?: (a: unknown, b: unknown) => number;
+    /** The groups of this column start open. Default: the grid's `autoExpandAll`. */
+    autoExpandGroup?: Bind<boolean>;
+    /**
+     * What the rows are grouped by instead of the value: a function of the row (rows in memory), or the
+     * field a server groups by. Groups are ordered by it too.
+     */
+    calculateGroupValue?: string | ((row: T) => unknown);
+    /** Content of your own in the column's group rows, made once per pooled group row; read `ctx` in getters. */
+    groupCell?: (ctx: GroupCellContext<T>) => unknown;
+}

package/dist/components/datagrid/grid-content-ready-event-args.d.ts

@@ -0,0 +1,5 @@
+/** Rows arrived and are laid out (after a load, a filter, a sort, a page, a resize). */
+export interface GridContentReadyEventArgs {
+    /** Data rows of the filter, saved new rows included. */
+    readonly total: number;
+}

package/dist/components/datagrid/grid-context-menu-preparing-event-args.d.ts

@@ -0,0 +1,15 @@
+import type { EventArgs } from '@motifx/core';
+import type { MenuItem } from '../../parts/menu/menu-item';
+/**
+ * A menu is about to open: a header's column menu (`target: 'header'`), or a row's menu on a right
+ * click or the context menu key (`target: 'row'`, which opens only when `items` has something).
+ * Change `items` (add, remove, reorder); `cancel` opens nothing.
+ */
+export interface GridContextMenuPreparingEventArgs<T> extends EventArgs {
+    readonly target: 'header' | 'row';
+    readonly field: string;
+    /** `'row'`: the row; `undefined` on a group row. */
+    readonly row?: T;
+    readonly rowIndex: number;
+    items: MenuItem[];
+}

package/dist/components/datagrid/grid-copying-event-args.d.ts

@@ -0,0 +1,13 @@
+import type { EventArgs } from '@motifx/core';
+import type { GridCellRange } from './grid-cell-range';
+/** Cells are about to go to the clipboard (Ctrl+C, `copy()`); change `text` or `html`, or `cancel`. */
+export interface GridCopyingEventArgs extends EventArgs {
+    /** Tab-separated text. */
+    text: string;
+    /** An HTML table of the same cells. */
+    html: string;
+    /** Rows copied (lines, for cell ranges); 0 for the active cell alone. */
+    readonly rows: number;
+    /** The cell ranges copied (`cellSelection`); empty for rows or the active cell. */
+    readonly ranges: readonly GridCellRange[];
+}

package/dist/components/datagrid/grid-custom-summary-info.d.ts

@@ -0,0 +1,17 @@
+import type { DataGrid } from './DataGrid';
+/**
+ * What `calculateCustomSummary` receives, once per step of one item over one set of rows: `'start'`
+ * (set `totalValue` to begin with), `'calculate'` once per row (fold `value` into `totalValue`),
+ * `'finalize'` (adjust `totalValue`, which becomes the item's value).
+ */
+export interface GridCustomSummaryInfo<T = any> {
+    /** The item's `name`. */
+    readonly name: string | undefined;
+    readonly summaryProcess: 'start' | 'calculate' | 'finalize';
+    /** `'calculate'`: the row's value in the item's column, or the row itself when the item has no column. */
+    readonly value: unknown;
+    totalValue: unknown;
+    /** For a group item, the group's level (0 for the top one); `undefined` for a total item. */
+    readonly groupIndex: number | undefined;
+    readonly component: DataGrid<T>;
+}

package/dist/components/datagrid/grid-data-error-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { data } from '@motifx-community/data';
+/** Loading or saving failed. The grid shows it too (the error overlay, the row's mark). */
+export interface GridDataErrorEventArgs<T> {
+    readonly error: data.DataError;
+    readonly operation: 'load' | 'save';
+    /** `'save'`: the row that was not saved. */
+    readonly row?: T;
+}

package/dist/components/datagrid/grid-date-interval.d.ts

@@ -0,0 +1,2 @@
+/** A part of a date the header filter lists a date column by: the deepest level of its year → month → day … tree. */
+export type GridDateInterval = 'year' | 'quarter' | 'month' | 'day' | 'hour' | 'minute' | 'second';

package/dist/components/datagrid/grid-edit-canceled-event-args.d.ts

@@ -0,0 +1,4 @@
+/** Unsaved changes were dropped. */
+export interface GridEditCanceledEventArgs<T> {
+    readonly rows: readonly T[];
+}