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

package/dist/components/datagrid/view/toolbar-values.d.ts

@@ -0,0 +1,7 @@
+import type { GridToolbarItem } from '../grid-toolbar-item';
+import type { GridToolbarItemName } from '../grid-toolbar-item-name';
+/** The toolbar's options as the grid reads them: values, not functions. */
+export interface ToolbarValues {
+    visible: boolean | undefined;
+    items: readonly (GridToolbarItem | GridToolbarItemName)[] | undefined;
+}

package/dist/components/datebox/DateBox.d.ts

@@ -0,0 +1,77 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import type { DateKind } from '../../parts/dates/date-kind';
+import { Field } from '../../parts/field/Field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { ValidationRule } from '../../parts/validation/validation-rule';
+import type { DateBoxProps } from './date-box-props';
+/**
+ * A date, a time or both, typed in the locale's order through a mask (`22.11.2006`) or picked from
+ * a calendar and a list of times. `min`, `max` and `disabledDates` limit both ways.
+ *
+ * @example
+ * <DateBox label="&Birthday" max={new Date()} x-model={() => this.form.birthday} />
+ * <DateBox label="Meeting" type="datetime" timeStep={15} displayFormat={{ dateStyle: 'medium', timeStyle: 'short' }} />
+ */
+export declare class DateBox extends Field<Date | null, DateBoxProps> {
+    constructor(props?: IBaseProp<DateBoxProps>);
+    get type(): DateKind;
+    set type(value: Bind<DateKind>);
+    get min(): Date | null;
+    set min(value: Bind<Date | null>);
+    get max(): Date | null;
+    set max(value: Bind<Date | null>);
+    get disabledDates(): ((date: Date) => boolean) | null;
+    set disabledDates(value: Bind<((date: Date) => boolean) | null>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get displayFormat(): Intl.DateTimeFormatOptions | null;
+    set displayFormat(value: Bind<Intl.DateTimeFormatOptions | null>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get timeStep(): number;
+    set timeStep(value: Bind<number>);
+    get showSeconds(): boolean;
+    set showSeconds(value: Bind<boolean>);
+    get firstDayOfWeek(): number | null;
+    set firstDayOfWeek(value: Bind<number | null>);
+    get showWeekNumbers(): boolean;
+    set showWeekNumbers(value: Bind<boolean>);
+    get showTodayButton(): boolean;
+    set showTodayButton(value: Bind<boolean>);
+    get showPickerButton(): boolean;
+    set showPickerButton(value: Bind<boolean>);
+    get inputElement(): HTMLInputElement;
+    /** The text typed so far is not a whole, real date. */
+    get unfinished(): boolean;
+    get opened(): boolean;
+    set opened(value: boolean);
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the calendar (or the times); `false` when it cannot be used now. */
+    open(): boolean;
+    close(): void;
+    clear(): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): Date | null;
+    protected normalizeValue(value: Date | null): Date | null;
+    protected sameValue(a: Date | null, b: Date | null): boolean;
+    protected renderValue(value: Date | null): void;
+    protected builtInRules(): ValidationRule<Date | null>[];
+    protected isEmptyValue(value: Date | null): boolean;
+    private get dateParts();
+    private renderPattern;
+    private listen;
+    /** Commits what is typed when it is a whole, real date; empty text empties the value. */
+    private typed;
+    /** Not being edited: the value in `displayFormat`. */
+    private showDisplayText;
+    private renderToggle;
+    private renderClear;
+    private createPopup;
+    /** The calendar and the times, made the first time they are needed. */
+    private fillPopup;
+    /** The open picker follows the value and the limits. */
+    private syncPicker;
+}

package/dist/components/datebox/date-box-props.d.ts

@@ -0,0 +1,26 @@
+import type { Bind } from '@motifx/core';
+import type { DateKind } from '../../parts/dates/date-kind';
+import type { FieldProps } from '../../parts/field/field-props';
+/** Props of `DateBox`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface DateBoxProps extends FieldProps<Date | null> {
+    /** Default `'date'`. */
+    type?: Bind<DateKind>;
+    min?: Bind<Date | null>;
+    max?: Bind<Date | null>;
+    disabledDates?: Bind<((date: Date) => boolean) | null>;
+    /** Default: the page's language. It decides the order of the parts and the names of months and days. */
+    locale?: Bind<string>;
+    /** How the value is shown while the field is not being edited, e.g. `{ dateStyle: 'long' }`. */
+    displayFormat?: Bind<Intl.DateTimeFormatOptions | null>;
+    /** Shown while the field is empty and not focused. */
+    placeholder?: Bind<string>;
+    clearButton?: Bind<boolean>;
+    /** The minutes between the times offered. Default `30`. */
+    timeStep?: Bind<number>;
+    showSeconds?: Bind<boolean>;
+    firstDayOfWeek?: Bind<number | null>;
+    showWeekNumbers?: Bind<boolean>;
+    showTodayButton?: Bind<boolean>;
+    /** The button that opens the calendar or the times. Default `true`. */
+    showPickerButton?: Bind<boolean>;
+}

package/dist/components/datebox/index.d.ts

@@ -0,0 +1,2 @@
+export { DateBox } from './DateBox';
+export type { DateBoxProps } from './date-box-props';

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,68 @@
+import { type Bind, type ComponentBase, type IBaseProp } from '@motifx/core';
+import type { OverlayCloseReason } from '../../parts/overlay/overlay-close-reason';
+import { OverlayPanel } from '../../parts/overlay/OverlayPanel';
+import type { DrawerMode } from './drawer-mode';
+import type { DrawerProps } from './drawer-props';
+import type { DrawerSide } from './drawer-side';
+/**
+ * A panel that slides in from an edge of the page or of a container: the start or the end (they
+ * follow the reading direction), the top or the bottom. It covers the content (`over`) or moves it
+ * aside (`push`, with `pushTarget`). A finger swiping it back towards its edge closes it, and one
+ * swiping in from the edge opens it (`edgeSwipe`). Like a bottom sheet it is a dialog: modal over
+ * the content by default, with Escape, a press on the scrim and the browser's back closing it,
+ * and focus moved in and back again.
+ *
+ * @example
+ * <Drawer title="Navigation" side="start" edgeSwipe x-model={() => this.state.menu}>…</Drawer>
+ */
+export declare class Drawer extends OverlayPanel<DrawerProps> {
+    static overlayClass: string;
+    constructor(props?: IBaseProp<DrawerProps>);
+    get side(): DrawerSide;
+    set side(value: Bind<DrawerSide>);
+    get mode(): DrawerMode;
+    set mode(value: Bind<DrawerMode>);
+    /** What push mode moves aside; a function given is read each time it opens. */
+    get pushTarget(): HTMLElement | ComponentBase | null;
+    set pushTarget(value: Bind<HTMLElement | ComponentBase | null>);
+    get size(): number | string | null;
+    set size(value: Bind<number | string | null>);
+    get edgeSwipe(): boolean;
+    set edgeSwipe(value: Bind<boolean>);
+    get edgeSize(): number;
+    set edgeSize(value: Bind<number>);
+    get swipeToClose(): boolean;
+    set swipeToClose(value: Bind<boolean>);
+    get flickSpeed(): number;
+    set flickSpeed(value: Bind<number>);
+    /** Modal as set; else modal over the content, not while it pushes the content aside. */
+    get modal(): boolean;
+    set modal(value: Bind<boolean>);
+    protected placePanel(): void;
+    protected closeBy(reason: OverlayCloseReason): boolean;
+    protected panelClosed(): void;
+    private get drawer();
+    /** The logical edge it comes from: `left` and `right` turned into start and end for the reading direction. */
+    private logicalSide;
+    private rtl;
+    /** Along which axis it moves, and which way is in: +1 from the left or the top, -1 from the right or the bottom. */
+    private axis;
+    private renderSide;
+    private renderSize;
+    /** The panel's size along its axis, in pixels. */
+    private panelSize;
+    /** How far the panel is from open, signed along its axis; `null` takes the drag position away. */
+    private setShift;
+    private push;
+    private pushBy;
+    private unpush;
+    /** Where a swipe from the edge is listened for: the container, else the whole page. */
+    private renderEdge;
+    private listenSwipe;
+    private edgeStart;
+    private begin;
+    private swipeMove;
+    /** The swipe is the drawer's: it opens (out of sight yet) to follow the finger. */
+    private take;
+    private swipeEnd;
+}

package/dist/components/drawer/drawer-mode.d.ts

@@ -0,0 +1,2 @@
+/** `over`: the drawer covers the content; `push`: it moves the content (`pushTarget`) aside by its size. */
+export type DrawerMode = 'over' | 'push';

package/dist/components/drawer/drawer-props.d.ts

@@ -0,0 +1,23 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { OverlayPanelProps } from '../../parts/overlay/overlay-panel-props';
+import type { DrawerMode } from './drawer-mode';
+import type { DrawerSide } from './drawer-side';
+/** Props of `Drawer`: the shared `OverlayPanelProps` plus its own. Each one is also a settable, reactive property. */
+export interface DrawerProps extends OverlayPanelProps {
+    /** The edge it slides in from. Default `'start'`. */
+    side?: Bind<DrawerSide>;
+    /** Over the content, or pushing it aside. Default `'over'`. */
+    mode?: Bind<DrawerMode>;
+    /** In `push` mode, what moves aside: an element or a component. Without it, `push` works as `over`. */
+    pushTarget?: Bind<HTMLElement | ComponentBase | null>;
+    /** Its width (its height from the top or the bottom): pixels or a CSS length; `null` for `drawer.size`. It never takes more than 85% of the room. Default `null`. */
+    size?: Bind<number | string | null>;
+    /** A finger swiping in from the edge opens it. Default `false`. */
+    edgeSwipe?: Bind<boolean>;
+    /** How far from the edge, in pixels, that swipe may start. Default `24`. */
+    edgeSize?: Bind<number>;
+    /** A finger swiping it back towards its edge closes it. Default `true`. */
+    swipeToClose?: Bind<boolean>;
+    /** How fast a flick opens or closes it however far it went, in pixels per millisecond. Default `0.4`. */
+    flickSpeed?: Bind<number>;
+}

package/dist/components/drawer/drawer-side.d.ts

@@ -0,0 +1,2 @@
+/** The edge a drawer comes from: `start` and `end` follow the reading direction, `left` and `right` do not. */
+export type DrawerSide = 'start' | 'end' | 'left' | 'right' | 'top' | 'bottom';

package/dist/components/drawer/index.d.ts

@@ -0,0 +1,4 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './drawer-props';
+export type { DrawerSide } from './drawer-side';
+export type { DrawerMode } from './drawer-mode';

package/dist/components/dropdown/DropDown.d.ts

@@ -0,0 +1,96 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import { Field } from '../../parts/field/Field';
+import type { ItemField } from '../../parts/list/item-field';
+import { OptionList } from '../../parts/list/OptionList';
+import { Popup } from '../../parts/popup/Popup';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+import type { DropDownProps } from './drop-down-props';
+type Template<T> = ((item: T, host: HTMLElement) => (() => void) | void) | null;
+/**
+ * Picks one item from a list (the APG select-only combobox): the field shows the chosen item, the
+ * list opens below it with the keyboard or a press, and can be searched. Items are plain values,
+ * `DropDownItem`s or your own objects read through `textField` / `valueField`.
+ *
+ * @example
+ * <DropDown label="&City" items={['Ankara', 'İstanbul', 'İzmir']} x-model={() => this.form.city} />
+ * <DropDown label="Country" items={() => this.countries} textField="name" valueField="code" searchEnabled />
+ */
+export declare class DropDown<T = unknown, V = unknown> extends Field<V | null, DropDownProps<T, V>> {
+    constructor(props?: IBaseProp<DropDownProps<T, V>>);
+    get items(): readonly T[];
+    set items(value: Bind<readonly T[]>);
+    get textField(): ItemField<T> | undefined;
+    set textField(value: Bind<ItemField<T>>);
+    get valueField(): ItemField<T> | undefined;
+    set valueField(value: Bind<ItemField<T>>);
+    get iconField(): ItemField<T> | undefined;
+    set iconField(value: Bind<ItemField<T>>);
+    get groupField(): ItemField<T> | undefined;
+    set groupField(value: Bind<ItemField<T>>);
+    get enabledField(): ItemField<T> | undefined;
+    set enabledField(value: Bind<ItemField<T>>);
+    get dataSource(): data.DataSource<T, unknown> | null;
+    set dataSource(value: Bind<data.DataSource<T, unknown> | null>);
+    get searchDelay(): number;
+    set searchDelay(value: Bind<number>);
+    get placeholder(): string;
+    set placeholder(value: Bind<string>);
+    get searchEnabled(): boolean;
+    set searchEnabled(value: Bind<boolean>);
+    get searchMode(): 'contains' | 'startswith';
+    set searchMode(value: Bind<'contains' | 'startswith'>);
+    get clearButton(): boolean;
+    set clearButton(value: Bind<boolean>);
+    get itemTemplate(): Template<T>;
+    set itemTemplate(value: Bind<Template<T>>);
+    get fieldTemplate(): Template<T>;
+    set fieldTemplate(value: Bind<Template<T>>);
+    get matchWidth(): boolean;
+    set matchWidth(value: Bind<boolean>);
+    /** The item whose value is the value, when it is known. */
+    get selectedItem(): T | undefined;
+    /** Whether the list is open. Reactive. Setting it opens or closes it. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    get onOpened(): MotifEvent<void>;
+    get onClosed(): MotifEvent<PopupCloseReason>;
+    /** Opens the list; `search` starts the search box with that text (or jumps to it without one). `false` when it cannot be used now. */
+    open(search?: string): boolean;
+    close(): void;
+    /** Empties the field as its clear button does. */
+    clear(): void;
+    /**
+     * Reads the items again after they were changed in place: the field's text and the open list. Your items may be
+     * plain or reactive; the drop-down reads them as they are.
+     */
+    refresh(): void;
+    /** For subclasses: the popup and its list were made (e.g. to add a header above the list). */
+    protected popupCreated(_popup: Popup, _list: OptionList<T>): void;
+    protected createControl(): HTMLElement;
+    protected emptyValue(): V | null;
+    protected renderValue(): void;
+    private get dropParts();
+    private itemText;
+    private itemValue;
+    private indexOfValue;
+    /** The item of `value`: among the items in memory, or the one known from a data source (asked by key when needed). */
+    private itemOfValue;
+    private renderSource;
+    private sourceChanged;
+    private visibleItems;
+    private listen;
+    private displayKeyDown;
+    /** Keys while the list is open, from the field or the search box. */
+    private listKeyDown;
+    private typeAhead;
+    private pointAt;
+    private choose;
+    private createPopup;
+    /** While open, the list follows the items and their fields. */
+    private watchList;
+    private drawList;
+    private renderField;
+    private renderClear;
+}
+export {};

package/dist/components/dropdown/drop-down-item.d.ts

@@ -0,0 +1,10 @@
+import type { Bind } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+/** The item shape a drop-down reads without being told; any shape works with `textField` / `valueField`. */
+export interface DropDownItem<V = unknown> {
+    value: V;
+    text: Bind<string>;
+    icon?: Bind<IconSource>;
+    group?: Bind<string>;
+    enabled?: Bind<boolean>;
+}

package/dist/components/dropdown/drop-down-props.d.ts

@@ -0,0 +1,36 @@
+import type { Bind } from '@motifx/core';
+import type { data } from '@motifx-community/data';
+import type { FieldProps } from '../../parts/field/field-props';
+import type { ItemField } from '../../parts/list/item-field';
+import type { PopupCloseReason } from '../../parts/popup/popup-close-reason';
+/** Props of `DropDown`: the field props plus its own. Each one is also a settable, reactive property. */
+export interface DropDownProps<T, V> extends FieldProps<V | null> {
+    /** Plain values, `DropDownItem`s, or objects of your own read through the `…Field` props. A function is followed. */
+    items?: Bind<readonly T[]>;
+    /** Items from the data layer; the search box searches it (`searchFields`). Wins over `items`. */
+    dataSource?: Bind<data.DataSource<T, unknown> | null>;
+    /** Milliseconds between the last key in the search box and a data source search. Default `250`. */
+    searchDelay?: Bind<number>;
+    /** Default `'text'` of an object item, the item itself otherwise. */
+    textField?: Bind<ItemField<T>>;
+    /** Default `'value'` when the object has one, the item itself otherwise. */
+    valueField?: Bind<ItemField<T>>;
+    iconField?: Bind<ItemField<T>>;
+    /** Items with the same group follow each other under its name. */
+    groupField?: Bind<ItemField<T>>;
+    enabledField?: Bind<ItemField<T>>;
+    placeholder?: Bind<string>;
+    /** A search box at the top of the list. */
+    searchEnabled?: Bind<boolean>;
+    /** Default `'contains'`. */
+    searchMode?: Bind<'contains' | 'startswith'>;
+    clearButton?: Bind<boolean>;
+    /** Draws an option's content; may return a cleanup. */
+    itemTemplate?: Bind<((item: T, host: HTMLElement) => (() => void) | void) | null>;
+    /** Draws the chosen item in the field; may return a cleanup. */
+    fieldTemplate?: Bind<((item: T, host: HTMLElement) => (() => void) | void) | null>;
+    /** Default `true`: the list is at least as wide as the field. */
+    matchWidth?: Bind<boolean>;
+    onOpened?: () => void;
+    onClosed?: (reason: PopupCloseReason) => void;
+}

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { DropDown } from './DropDown';
+export type { DropDownProps } from './drop-down-props';
+export type { DropDownItem } from './drop-down-item';

package/dist/components/filterbuilder/FilterBuilder.d.ts

@@ -0,0 +1,158 @@
+import { type Bind, type Event as MotifEvent, type IBaseProp } from '@motifx/core';
+import { data } from '@motifx-community/data';
+import { Control } from '../../core/control';
+import type { ControlSize } from '../../core/control-size';
+import type { UiStrings } from '../../core/ui-strings';
+import type { FilterBuilderCondition } from './filter-builder-condition';
+import type { FilterBuilderCustomOperation } from './filter-builder-custom-operation';
+import type { FilterBuilderEditorPreparedEventArgs } from './filter-builder-editor-prepared-event-args';
+import type { FilterBuilderEditorPreparingEventArgs } from './filter-builder-editor-preparing-event-args';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderGroupOperation } from './filter-builder-group-operation';
+import type { FilterBuilderItem } from './filter-builder-item';
+import type { FilterBuilderItemAddedEventArgs } from './filter-builder-item-added-event-args';
+import type { FilterBuilderItemAddingEventArgs } from './filter-builder-item-adding-event-args';
+import type { FilterBuilderItemChangedEventArgs } from './filter-builder-item-changed-event-args';
+import type { FilterBuilderItemChangingEventArgs } from './filter-builder-item-changing-event-args';
+import type { FilterBuilderItemRemovedEventArgs } from './filter-builder-item-removed-event-args';
+import type { FilterBuilderItemRemovingEventArgs } from './filter-builder-item-removing-event-args';
+import { FilterBuilderModel } from './FilterBuilderModel';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+import type { FilterBuilderProps } from './filter-builder-props';
+import type { FilterBuilderValueChangedEventArgs } from './filter-builder-value-changed-event-args';
+/**
+ * Builds a filter of the data layer by hand: a tree of groups (and, or, not and, not or) and
+ * conditions (a field, an operation, a value), edited with the mouse and the keyboard. The value
+ * is a `data.FilterExpression`, ready for any adapter. Each value is edited with the kit's editor
+ * for the field's type. The tree is one Tab stop: the arrow keys move between its buttons.
+ *
+ * @example
+ * <FilterBuilder fields={fields} x-model={() => this.state.filter} />
+ *
+ * const builder = new FilterBuilder({ fields, value: data.where('city', '=', 'Ankara') });
+ * builder.addCondition(builder.root, 'amount');
+ */
+export declare class FilterBuilder extends Control<HTMLDivElement, FilterBuilderProps> {
+    constructor(props?: IBaseProp<FilterBuilderProps>);
+    get value(): data.FilterExpression | null;
+    set value(value: Bind<data.FilterExpression | null>);
+    get fields(): readonly FilterBuilderField[];
+    set fields(value: Bind<readonly FilterBuilderField[]>);
+    get customOperations(): readonly FilterBuilderCustomOperation[];
+    set customOperations(value: Bind<readonly FilterBuilderCustomOperation[]>);
+    get groupOperations(): readonly FilterBuilderGroupOperation[];
+    set groupOperations(value: Bind<readonly FilterBuilderGroupOperation[]>);
+    get maxGroupLevel(): number | null;
+    set maxGroupLevel(value: Bind<number | null>);
+    get allowHierarchicalFields(): boolean;
+    set allowHierarchicalFields(value: Bind<boolean>);
+    get label(): string;
+    set label(value: Bind<string>);
+    get texts(): Partial<UiStrings>;
+    set texts(value: Bind<Partial<UiStrings>>);
+    get locale(): string;
+    set locale(value: Bind<string>);
+    get size(): ControlSize;
+    set size(value: Bind<ControlSize>);
+    get addKeys(): readonly string[];
+    set addKeys(value: Bind<readonly string[]>);
+    get removeKeys(): readonly string[];
+    set removeKeys(value: Bind<readonly string[]>);
+    /** The root group of the tree; change it through the methods. */
+    get root(): FilterBuilderGroup;
+    /** The filter as one line of text (`[City] Equals 'Ankara' And …`), conditions without their value left out. Reactive. */
+    get filterText(): string;
+    /**
+     * Reads the options (fields, custom operations) and the value again after they were changed in place, and draws
+     * the rows again. Your fields and value may be plain or reactive; the builder reads them as they are.
+     */
+    refresh(): void;
+    /** The logic behind the builder: operations of a field, texts, the tree of an expression. */
+    get model(): FilterBuilderModel;
+    /** The element with `role="treegrid"`. */
+    get treeElement(): HTMLElement | null;
+    /** The condition whose value editor is open. */
+    get editingCondition(): FilterBuilderCondition | null;
+    get onValueChanged(): MotifEvent<FilterBuilderValueChangedEventArgs>;
+    /** A condition or group is about to be added; `e.cancel = true` keeps it out. */
+    get onItemAdding(): MotifEvent<FilterBuilderItemAddingEventArgs>;
+    get onItemAdded(): MotifEvent<FilterBuilderItemAddedEventArgs>;
+    /** A condition or group is about to be taken out; `e.cancel = true` keeps it. */
+    get onItemRemoving(): MotifEvent<FilterBuilderItemRemovingEventArgs>;
+    get onItemRemoved(): MotifEvent<FilterBuilderItemRemovedEventArgs>;
+    /** A field, operation, value or group operation is about to change; change `e.value`, or `e.cancel = true`. */
+    get onItemChanging(): MotifEvent<FilterBuilderItemChangingEventArgs>;
+    get onItemChanged(): MotifEvent<FilterBuilderItemChangedEventArgs>;
+    /** A value editor is about to be made: change `e.options`, set `e.editor`, or `e.cancel = true`. */
+    get onEditorPreparing(): MotifEvent<FilterBuilderEditorPreparingEventArgs>;
+    get onEditorPrepared(): MotifEvent<FilterBuilderEditorPreparedEventArgs>;
+    /** The value, ready for the data layer (the same as `value`). */
+    getFilterExpression(): data.FilterExpression | null;
+    /** Adds a condition at the end of a group (the root by default), on a field (the first by default). */
+    addCondition(group?: FilterBuilderGroup, dataField?: string): FilterBuilderCondition | null;
+    /** Adds a group with one condition at the end of a group (the root by default); `null` past `maxGroupLevel`. */
+    addGroup(group?: FilterBuilderGroup): FilterBuilderGroup | null;
+    /** Takes a condition or a group (with what it holds) out. The root stays. */
+    removeItem(item: FilterBuilderItem): boolean;
+    /** Puts a condition on another field; its operation and value stay where the new field allows them. */
+    setField(condition: FilterBuilderCondition, dataField: string): boolean;
+    setOperation(condition: FilterBuilderCondition, operation: FilterBuilderOperation): boolean;
+    setConditionValue(condition: FilterBuilderCondition, value: unknown): boolean;
+    setGroupOperation(group: FilterBuilderGroup, operation: FilterBuilderGroupOperation): boolean;
+    /** Empties the tree. */
+    clear(): void;
+    /** Opens the value editor of a condition and focuses it. */
+    openEditor(condition: FilterBuilderCondition): boolean;
+    /** Closes the open value editor, keeping its value (or not). */
+    closeEditor(keep?: boolean): void;
+    /** Focuses a button of an item's row: its field by default, a group's operation. */
+    focusItem(item: FilterBuilderItem, part?: 'remove' | 'group' | 'add' | 'field' | 'operation' | 'value'): boolean;
+    focus(): boolean;
+    private addItem;
+    private addGroupTo;
+    private remove;
+    private changeField;
+    private changeOperation;
+    private changeValue;
+    private changeGroupOperation;
+    /** Runs the changing event, the change and the changed event; `false` when it was cancelled. */
+    private ask;
+    /** Conditions an `onItemAdding` handler moved to another field get that field's operation. */
+    private fitOperations;
+    /** A condition put on another field keeps its operation and value only where they still make sense there. */
+    private fitToField;
+    /** The tree changed: the value follows (when it is another filter) and the rows are drawn again. */
+    private changed;
+    /** A value from the prop or from code: the tree is built again, unless it is the value the tree stands for already. */
+    private takeValue;
+    private inTree;
+    /** Reads what the rows show, so the drawing effect follows it. */
+    private watchOptions;
+    /** Draws every row again, the same button keeping focus. */
+    private draw;
+    private drawGroup;
+    private drawCondition;
+    /** The fields to choose from, as submenus of their parts with `allowHierarchicalFields`. */
+    private fieldMenu;
+    private newRow;
+    private addRemove;
+    private addCell;
+    private cellOf;
+    /** The button that is the tree's Tab stop: the one focused last, else the first. */
+    private currentCell;
+    private cellAt;
+    private moveTo;
+    private listen;
+    private onMoveKey;
+    private startEditor;
+    private focusEditor;
+    /** The editor of a value: your own (the operation's, the field's, or from `onEditorPreparing`), else the kit's for the field's type. */
+    private makeEditor;
+    private kitEditor;
+    private onEditorKey;
+    /** Closes the value editor: its value is kept (`keep`) or given up, and focus goes back to the value's button (`focus`). */
+    private stopEditor;
+    private get parts();
+    private createParts;
+}

package/dist/components/filterbuilder/FilterBuilderModel.d.ts

@@ -0,0 +1,79 @@
+import { data } from '@motifx-community/data';
+import type { UiStrings } from '../../core/ui-strings';
+import type { FilterBuilderCondition } from './filter-builder-condition';
+import type { FilterBuilderCustomOperation } from './filter-builder-custom-operation';
+import type { FilterBuilderDataType } from './filter-builder-data-type';
+import type { FilterBuilderField } from './filter-builder-field';
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderGroupOperation } from './filter-builder-group-operation';
+import type { FilterBuilderItem } from './filter-builder-item';
+import type { FilterBuilderModelOptions } from './filter-builder-model-options';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+/**
+ * The logic of a filter builder, without its view: the fields and the operations they offer, the
+ * tree of groups and conditions and the data layer's filter expression it stands for (both ways),
+ * and the texts of operations, values and whole filters. Reads its options each time, so they can
+ * be reactive.
+ */
+export declare class FilterBuilderModel {
+    private readonly options;
+    /** Bumped when texts of lookup values arrive. */
+    readonly state: {
+        texts: number;
+    };
+    constructor(options: () => FilterBuilderModelOptions);
+    text(key: keyof UiStrings, values?: Record<string, unknown>): string;
+    get locale(): string;
+    fields(): readonly FilterBuilderField[];
+    field(dataField: string): FilterBuilderField | undefined;
+    /** A field the builder does not know still reads: a plain text field of that name. */
+    fieldOrPlain(dataField: string): FilterBuilderField;
+    caption(dataField: string): string;
+    dataType(field: FilterBuilderField): FilterBuilderDataType;
+    customOperations(): readonly FilterBuilderCustomOperation[];
+    customOperation(name: FilterBuilderOperation): FilterBuilderCustomOperation | undefined;
+    groupOperations(): readonly FilterBuilderGroupOperation[];
+    maxGroupLevel(): number | null;
+    /** The operations a field offers, in order: its own `filterOperations`, else by its type and the custom operations for that type. */
+    operations(field: FilterBuilderField): FilterBuilderOperation[];
+    /** The operations of a field's type, with the custom operations for that type: what a field without `filterOperations` offers. */
+    typeOperations(field: FilterBuilderField): FilterBuilderOperation[];
+    defaultOperation(field: FilterBuilderField): FilterBuilderOperation;
+    hasValue(op: FilterBuilderOperation): boolean;
+    operationText(op: FilterBuilderOperation): string;
+    groupText(op: FilterBuilderGroupOperation): string;
+    newGroup(operation?: FilterBuilderGroupOperation): FilterBuilderGroup;
+    /** A condition on a field (the first one by default) with its default operation and no value; `null` without fields. */
+    newCondition(dataField?: string): FilterBuilderCondition | null;
+    /** How deep an item sits: the root is 0. */
+    level(item: FilterBuilderItem): number;
+    /** Whether a group may get a group inside it (`maxGroupLevel`). */
+    canAddGroup(group: FilterBuilderGroup): boolean;
+    /** The value a condition keeps when its operation changes: a list, a range or one value, as far as it goes. */
+    valueFor(operation: FilterBuilderOperation, previous: FilterBuilderOperation, value: unknown): unknown;
+    /** Whether a condition has what its operation needs; one that has not is left out of the value. */
+    isComplete(c: FilterBuilderCondition): boolean;
+    /** The data layer's filter a group stands for; conditions without their value are left out. */
+    toExpression(group: FilterBuilderGroup): data.FilterExpression | null;
+    /** The tree of an expression: a group at the root, whatever the expression is. */
+    fromExpression(e: data.FilterExpression | null | undefined): FilterBuilderGroup;
+    /** Whether two expressions are the same filter (dates by their moment). */
+    same(a: data.FilterExpression | null | undefined, b: data.FilterExpression | null | undefined): boolean;
+    private conditionExpression;
+    private readItem;
+    private readGroup;
+    private recognize;
+    /** One value as text: the field's `customizeText`, its lookup's text, its format, yes / no. */
+    formatValue(field: FilterBuilderField, value: unknown, operation?: FilterBuilderOperation): string;
+    /** The text of a condition's value on its button: one value, a range ("1 – 5"), or a list ("A, B"). */
+    valueText(c: FilterBuilderCondition): string;
+    /** A filter as one line of text: `[City] Equals 'Ankara' And [Amount] Is greater than '100'`. */
+    filterText(e: data.FilterExpression | null | undefined): string;
+    /** The text of the tree as it is (conditions without their value left out). */
+    treeText(group: FilterBuilderGroup): string;
+    private groupLine;
+    private conditionText;
+    private plainText;
+    /** A lookup value's text; one not known yet is asked for, and the texts are drawn again when it comes. */
+    private lookupText;
+}

package/dist/components/filterbuilder/default-operations.d.ts

@@ -0,0 +1,4 @@
+import type { FilterBuilderDataType } from './filter-builder-data-type';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+/** The operations a field offers by its data type when it names none; a lookup field the same whatever its type. */
+export declare function defaultOperations(dataType: FilterBuilderDataType, lookup?: boolean): readonly FilterBuilderOperation[];

package/dist/components/filterbuilder/filter-builder-condition.d.ts

@@ -0,0 +1,12 @@
+import type { FilterBuilderGroup } from './filter-builder-group';
+import type { FilterBuilderOperation } from './filter-builder-operation';
+/** A condition of the builder's tree. Change it through the builder's methods, so its events run. */
+export interface FilterBuilderCondition {
+    readonly kind: 'condition';
+    /** The field's `dataField`. */
+    field: string;
+    operation: FilterBuilderOperation;
+    /** `[from, to]` for `between`, an array for `in` and `notin`, nothing for `isblank` and `isnotblank`. */
+    value: unknown;
+    parent: FilterBuilderGroup | null;
+}