@motifx-community/ui 0.1.0-beta.2 → 0.1.0-beta.3

package/docs/card.md

@@ -1,6 +1,6 @@
 # Card
 
-> Display · @motifx-community/ui 0.1.0-beta.2
+> Display · @motifx-community/ui 0.1.0-beta.3
 
 A surface holding one thing: a picture, a header with an avatar and titles, content and a row of actions. Parts with nothing in them are left out.
 
@@ -10,16 +10,16 @@ A surface holding one thing: a picture, a header with an avatar and titles, cont
 import { Card } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, Card, Stack } from '@motifx-community/ui';
 
-/** A card from JSX follows its functions; one made with `new` takes the same properties from code. */
-export default function FromCode() {
+/** A card from JSX follows its functions; one made with `new` takes the same properties programmatically. */
+export default function Programmatic() {
   const s = reactive({ following: false });
   const coded = new Card({ title: 'Made in code', subtitle: 'new Card({ … })', variant: 'outline' });
 
@@ -250,5 +250,5 @@ export default function Sizes() {
 | Property | Access | Description |
 | --- | --- | --- |
 | `every prop above` | read/write | A value or a function, like the prop. |
-| `contentPart` | read-only | The part holding the content, for adding to it from code. |
+| `contentPart` | read-only | The part holding the content, for adding to it programmatically. |
 | `avatarControl` | read-only | The avatar before the titles, when it has one. |

package/docs/checkbox.md

@@ -1,6 +1,6 @@
 # CheckBox
 
-> Choice · @motifx-community/ui 0.1.0-beta.2
+> Choice · @motifx-community/ui 0.1.0-beta.3
 
 A checkbox with its caption: checked, unchecked or indeterminate, three states on request, read-only, required and checked with its group. A native checkbox underneath, drawn from the design tokens.
 
@@ -10,21 +10,21 @@ A checkbox with its caption: checked, unchecked or indeterminate, three states o
 import { CheckBox } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function; `x-model` binds the value two-way. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function; `x-model` binds the value two-way. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, CheckBox, Stack } from '@motifx-community/ui';
 
-/** A checkbox bound to state with x-model, and checkboxes created with `new` and added from code. */
-export default function FromCode() {
+/** A checkbox bound to state with x-model, and checkboxes created with `new` and added programmatically. */
+export default function Programmatic() {
   const s = reactive({ remember: true, result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const box = new CheckBox({ label: `Option ${++added}`, threeState: true });
     box.onValueChanged((e) => (s.result = `${box.label}: ${String(e.value)}`));
     host?.controls.add(box);
@@ -35,7 +35,7 @@ export default function FromCode() {
     <>
       <CheckBox label="&Remember me" x-model={() => s.remember} helpText={() => (s.remember ? 'You stay signed in.' : 'You sign in every time.')} />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a checkbox from code" variant="outline" onclick={addFromCode} />
+        <Button text="Add a checkbox programmatically" variant="outline" onclick={addProgrammatic} />
         <output class="cb-result">{() => s.result}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />

package/docs/chip.md

@@ -1,6 +1,6 @@
 # Chip and ChipGroup
 
-> Display · @motifx-community/ui 0.1.0-beta.2
+> Display · @motifx-community/ui 0.1.0-beta.3
 
 A short text with an icon or an avatar before it: a filter to turn on, a choice among a few, or something picked that can be removed. A group selects one or several and moves between them with the arrow keys.
 
@@ -10,16 +10,16 @@ A short text with an icon or an avatar before it: a filter to turn on, a choice
 import { Chip, ChipGroup } from '@motifx-community/ui';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
-Every prop takes a value or a function. Created with `new`, the same properties are set from code.
+Every prop takes a value or a function. Created with `new`, the same properties are set programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Chip, Stack } from '@motifx-community/ui';
 
-/** A chip from JSX follows its functions; one made with `new` takes the same properties from code. */
-export default function FromCode() {
+/** A chip from JSX follows its functions; one made with `new` takes the same properties programmatically. */
+export default function Programmatic() {
   const s = reactive({ vegan: false });
   const coded = new Chip({ text: 'Spicy', selectable: true });
 

package/docs/colorbox.md

@@ -1,6 +1,6 @@
 # ColorBox and ColorPicker
 
-> Editors · @motifx-community/ui 0.1.0-beta.2
+> Editors · @motifx-community/ui 0.1.0-beta.3
 
 A colour as a field, with a picker in a popup; or the picker on its own. The picker has an area of saturation and brightness, a hue strip, an opacity strip, inputs for the channels and preset colours.
 
@@ -20,8 +20,8 @@ import { ColorBox, Stack } from '@motifx-community/ui';
 
 const PALETTE = ['#3b5bdb', '#1971c2', '#0c8599', '#2b8a3e', '#f08c00', '#e8590c', '#e03131', '#c2255c', '#862e9c', '#495057'];
 
-/** A colour field bound with `x-model`: type a hex, or open the picker (Alt+Down); one made with `new` from code. */
-export default function FromCode() {
+/** A colour field bound with `x-model`: type a hex, or open the picker (Alt+Down); one made with `new` programmatically. */
+export default function Programmatic() {
   const s = reactive({ accent: '#3b5bdb' as string | null });
   const coded = new ColorBox({ label: 'Made in code', value: '#2b8a3e', clearButton: true });
 

package/docs/combobox.md

@@ -1,6 +1,6 @@
 # ComboBox and Autocomplete
 
-> Choice · @motifx-community/ui 0.1.0-beta.2
+> Choice · @motifx-community/ui 0.1.0-beta.3
 
 A text field with a list that follows what is typed. The items come from memory or from a data source of the data layer, searched on the server. `Autocomplete` is the free-text kind: the value is the text.
 
@@ -11,7 +11,7 @@ import { ComboBox, Autocomplete } from '@motifx-community/ui';
 import { data } from '@motifx-community/data';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
 ```tsx
 /** The cities the combo boxes of the examples suggest. */
@@ -97,20 +97,20 @@ The items part is shared: `DataItems` feeds any list control from an array or a
 
 ## Example files
 
-`FromCode.tsx`
+`Programmatic.tsx`
 
 ```tsx
 import { reactive } from '@motifx/core';
 import { Button, ComboBox, Stack } from '@motifx-community/ui';
 import { cities } from './cities';
 
-/** A combo box bound with x-model, and combo boxes created with `new` and added from code. */
-export default function FromCode() {
+/** A combo box bound with x-model, and combo boxes created with `new` and added programmatically. */
+export default function Programmatic() {
   const form = reactive({ city: 'İzmir' as string | null, result: '' });
   let added = 0;
   let host: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const town = new ComboBox<string, string>({ label: `Town ${++added}`, items: cities, minSearchLength: 2 });
     town.onValueChanged((e) => (form.result = `${town.label}: ${e.value ?? '—'}`));
     host?.controls.add(town);
@@ -121,7 +121,7 @@ export default function FromCode() {
     <>
       <ComboBox label="&City" items={cities} x-model={() => form.city} clearButton />
       <output class="cb-city">{() => `city: ${form.city ?? '—'}`}</output>
-      <Button text="Add a combo box from code" variant="outline" onclick={addFromCode} />
+      <Button text="Add a combo box programmatically" variant="outline" onclick={addProgrammatic} />
       <output class="cb-made">{() => form.result}</output>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />
     </>

package/docs/control.md

@@ -1,8 +1,8 @@
 # Control
 
-> Foundations · @motifx-community/ui 0.1.0-beta.2
+> Foundations · @motifx-community/ui 0.1.0-beta.3
 
-The base of every control in the package. It gives each one the same `text`, `enabled`, `visible` and `tabStop`, and the same focus methods, whether the control is written in JSX and bound to state or created with `new` and changed from code.
+The base of every control in the package. It gives each one the same `text`, `enabled`, `visible` and `tabStop`, and the same focus methods, whether the control is written in JSX and bound to state or created with `new` and changed programmatically.
 
 ## Import
 
@@ -12,7 +12,7 @@ import { Control, type ControlProps } from '@motifx-community/ui';
 
 Every component of the package ([Button](button.md), …) extends it; extend it for your own controls.
 
-## From JSX and from code
+## Declarative and programmatic
 
 Both ways are complete; the developer using the control decides.
 
@@ -33,12 +33,12 @@ unread.text = () => `Unread (${this.mail.count})`; // a function is followed
 ```tsx
 import { Button, Stack } from '@motifx-community/ui';
 
-/** Buttons created with `new`, added to a container, and their text changed from code on a click. */
-export default function AddFromCode() {
+/** Buttons created with `new`, added to a container, and their text changed programmatically on a click. */
+export default function AddProgrammatically() {
   let added = 0;
   let target: Stack | null = null;
 
-  const addFromCode = () => {
+  const addProgrammatic = () => {
     const b = new Button({ text: `Button ${++added}` });
     b.motif.on('click', () => (b.text = `${b.text} ✓`));
     target?.controls.add(b);
@@ -46,7 +46,7 @@ export default function AddFromCode() {
 
   return (
     <>
-      <Button text="Add a button from code" onclick={addFromCode} />
+      <Button text="Add a button programmatically" onclick={addProgrammatic} />
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (target = c)} />
     </>
   );
@@ -61,7 +61,7 @@ export default function AddFromCode() {
 
 - With `x-model` the model always shows the control's state: a change by the user, by your code (`ctrl.value = …`, `select()`, `show()`) or by a rule you gave (`decimals`, a mask, `min` / `max`) is written back to it.
 
-- A property set from code takes the same: a function (`ctrl.enabled = () => !state.busy`) is bound in place of what was there and followed; a value (`ctrl.enabled = false`) drops what was bound, and from then on the code owns it.
+- A property set programmatically takes the same: a function (`ctrl.enabled = () => !state.busy`) is bound in place of what was there and followed; a value (`ctrl.enabled = false`) drops what was bound, and from then on the code owns it.
 
 - Every property is reactive to read: `{() => ctrl.text}` in JSX or a `bindings.watch` follows it, whichever way it changed.
 
@@ -84,7 +84,7 @@ If focus was inside, it moves to the next usable element in the same window (or
 ```tsx
 import { Button, Panel, Stack } from '@motifx-community/ui';
 
-/** A panel disabled and enabled from code: everything inside follows, and the inner button keeps its own `enabled`. */
+/** A panel disabled and enabled programmatically: everything inside follows, and the inner button keeps its own `enabled`. */
 export default function EnabledPanel() {
   let panel: Panel | null = null;
   let inner: Button | null = null;
@@ -171,7 +171,7 @@ class Badge extends Control<HTMLSpanElement, BadgeProps> {
 | --- | --- |
 | `static elementTag` | The root element. `div` unless the subclass sets another (`button` for a button). |
 | `focusElement` | Getter: the element that takes focus; the root by default. Composite controls override it. It runs from the constructor, so derive it from `this.element`. |
-| `observeProperty(name, apply)` | Renders a property without an effect: `apply` runs now and on every change, from a getter prop or from code. |
+| `observeProperty(name, apply)` | Renders a property without an effect: `apply` runs now and on every change, from a getter prop or programmatically. |
 | `getProperty(name) / setProperty(name, value)` | The storage behind the shared properties, for your own: tracked read, and set-from-code (which replaces a bound getter). |
 | `bindProperty(name, prop)` | Binds one of your own props: a getter is read now and followed by a binding of the control (so `reState()` reads it again), a value is stored once. Call it from your constructor. |
 | `applyProperty(name, value) / peekProperty(name)` | Render your own properties without an effect: override `applyProperty` (call `super`); read the current value untracked with `peekProperty`. Can run from the constructor: touch only `this.element`. |
@@ -187,7 +187,7 @@ The base adds no listeners per control and pays only for what is used.
 | `A plain value (`enabled={false}`, `new Badge({ text })`)` | Stored and written to the DOM once. |
 | `A getter (`enabled={() => !state.busy}`)` | One binding for that property, stopped when the control is disposed or another value or function is set. |
 | `Reading a property` | A small change counter, created the first time someone reads it. |
-| `Setting from code` | A direct DOM write; readers are notified through the counter. |
+| `Setting programmatically` | A direct DOM write; readers are notified through the counter. |
 | ``enabled = false`` | One pass over the control's subtree, plus one shared observer while anything is disabled (it disappears when nothing is). |
 
 ## API reference
@@ -207,7 +207,7 @@ The base adds no listeners per control and pays only for what is used.
 
 | Property | Type | Access | Description |
 | --- | --- | --- | --- |
-| `text` | `string` | read/write, reactive | Set from code with a value or a function, like the prop (see "How a property gets its value"). |
+| `text` | `string` | read/write, reactive | Set programmatically with a value or a function, like the prop (see "How a property gets its value"). |
 | `enabled` | `boolean` | read/write, reactive | This control's own value, as set or bound (like the HTML `disabled` attribute). |
 | `isEnabled` | `boolean` | read-only, reactive | Whether it can be used now: enabled itself and in every control it sits in (like CSS `:enabled`). Windows shown inside do not inherit it. |
 | `visible` | `boolean` | read/write, reactive | This control's own value; a hidden parent does not change it. |

package/docs/datagrid-api.md

@@ -1,6 +1,6 @@
 # DataGrid: API reference
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Columns
 
@@ -185,13 +185,13 @@ export interface Order {
 | `filterValue, filterEnabled` | `Bind<data.FilterExpression \| null>`, `Bind<boolean>` | `null`, `true` | The filter value the filter panel shows and the builder edits (with `filterSyncEnabled`, the filter row's and header filters' too) and whether it applies; functions are followed, the user's changes come in `onFilterChanged`. See [Filter panel and builder](datagrid-filtering.md#filter-panel). |
 | `filterPanelText, filterBuilder, filterBuilderPopup` | function, objects | — | The panel's text; the builder's props (any of `FilterBuilder` but `value` and `fields`); its window (`title`, `width`, `height`, …). |
 | `onFilterBuilderOpening / Opened / Closing / Closed` | `(e) => void` | — | The builder's window opens and closes; the `…ing` ones cancel (`e.apply` says whether OK was pressed). |
-| `searchText / onSearchTextChanged` | `Bind<string>` / `(e) => void` | `''` | The search panel’s text (a function is followed); told when it changes, typed or set from code (`{ text }`). The two together bind it both ways. |
+| `searchText / onSearchTextChanged` | `Bind<string>` / `(e) => void` | `''` | The search panel’s text (a function is followed); told when it changes, typed or set programmatically (`{ text }`). The two together bind it both ways. |
 | `toolbar` | `{ visible?: Bind<boolean>, items?: Bind<(GridToolbarItem \| GridToolbarItemName)[]> }` | the items whose features are on | The bar above the rows: which items, in which order and place; `visible` left out shows it while it has an item. |
 | `export` | `{ formats?, allowExportSelectedData?, texts? }`, each a `Bind` | `{ formats: ['csv'] }` | What the toolbar’s export button (`exportButton`) offers: a command per format (`'xlsx'`, `'csv'`, any of your own), and “Export selected rows” for each with `allowExportSelectedData`; one command is a plain button, more a menu. `texts`: `exportTo`, `exportAll`, `exportSelectedRows` (`{format}` is the format’s name), `formats` (names by code). Live through `grid.export`. |
 | `onRowExpanding / onRowExpanded` | `(e) => void` | — | Before and after a group or a row's details open: `{ kind, key, row }` — `kind: 'group'` with the values of the groups from the top level down, or `kind: 'detail'` with the row's key and the row; `e.cancel = true` keeps it closed. |
 | `onRowCollapsing / onRowCollapsed` | `(e) => void` | — | Before and after a group or a row's details close; `e.cancel = true` keeps it open. |
 | `masterDetail` | `GridMasterDetail<T>`, each field a `Bind` | `{ enabled: false }` | Details under the rows: the expand column (`enabled`), what they hold (`template`), `autoExpandAll`, `canExpand`, `keepDetails`, `keepAcrossPages`, `keepLimit`, `height`, `estimatedHeight`, `columnWidth`, `toggleKeys`, `arrowKeys`. Live through `grid.masterDetail`. See [Master-detail](datagrid-master-detail.md#master-detail). |
-| `onGroupingChanging / onGroupingChanged` | `(e) => void` | — | Before and after the grouping changes, by the user or from code: `{ group, previous, byUser }`; `e.cancel = true` keeps it. |
+| `onGroupingChanging / onGroupingChanged` | `(e) => void` | — | Before and after the grouping changes, by the user or programmatically: `{ group, previous, byUser }`; `e.cancel = true` keeps it. |
 | `onGroupDropping` | `(e) => void` | — | A header or a chip dropped to change the grouping: `{ field, from, to, index }`; `e.cancel = true` cancels the drop. |
 | `groupCell` | `(ctx) => component` | — | Content of your own in the group rows of columns without a `groupCell`. |
 | `summary` | `Bind<GridSummary>` | — | The summaries: `totalItems` in the row under the rows, `groupItems` in group rows and footers, and how they are worked out. See [Summaries](datagrid-grouping.md#summaries). |
@@ -257,7 +257,7 @@ export interface Order {
 | `selectRow(row, add?) / deselectRow(row) / isSelected(row)` |  | One row in or out of the selection. |
 | `selectAll() / clearSelection()` |  | Every row of the filter, loaded or not; none. |
 | `clearFilters()` |  | Takes every filter away, the filter value too, and the search text. |
-| `openFilterBuilder() / closeFilterBuilder(apply?) / clearFilterValue()` | `boolean` / `boolean` / `void` | The filter panel's builder window and its Clear, from code. |
+| `openFilterBuilder() / closeFilterBuilder(apply?) / clearFilterValue()` | `boolean` / `boolean` / `void` | The filter panel's builder window and its Clear, programmatically. |
 | `searchByText(text)` | `void` | Searches for a text at once, as the search panel does; `''` stops searching. |
 | `showColumnChooser()` | `void` | Opens the column list, under the toolbar’s column button when it shows. |
 | `expandAll(level?) / collapseAll(level?)` | `void` | Opens or closes every group of a level (0 is the top level), or of every level. |
@@ -285,7 +285,7 @@ export interface Order {
 | `focusCell(i, field?) / editCell(i, field) / editRow(i) / closeEditCell()` | `boolean` | Moves the active cell as the arrows do; opens a cell’s editor, or the first one of a row (in the form modes its form); keeps the open editor’s value and closes it. |
 | `editRowByKey(key)` | `boolean` | `editRow` for the row with this key, while it is loaded. |
 | `saveEditData() / cancelEditData()` | `Promise<boolean>` / `void` | Saves or gives up what is being edited, as Save and Cancel do: the edit form, else the row being edited; in batch mode every unsaved change. |
-| `beginUpdate() / endUpdate()` | `void` | Changes from code in between lay the rows out once, at the last `endUpdate()`. |
+| `beginUpdate() / endUpdate()` | `void` | Changes programmatically in between lay the rows out once, at the last `endUpdate()`. |
 | `repaint()` | `void` | Draws again, without loading, what shows your data: the rows, their details and adaptive detail, the group rows and footers, the totals, the toolbar and the actions (after a row, an option or what a template or `onRowPrepared` reads was changed in place). |
 | `repaintRows(keys)` | `void` | Draws again only the rows with these keys, with their actions and details: after you changed those rows in place. |
 | `refreshSummary()` | `void` | Reads the summary items again and works the values out again: after an item, the items or the rows’ values were changed in place. |

package/docs/datagrid-bands.md

@@ -1,6 +1,6 @@
 # DataGrid: Bands and adaptive columns
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Band headers
 

package/docs/datagrid-drag-select.md

@@ -1,6 +1,6 @@
 # DataGrid: Selecting by dragging
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Rows
 
@@ -40,7 +40,7 @@ export interface Order {
 
 ## Over 100,000 rows
 
-Ranges are marks on the cells drawn now: the pooled rows and, with virtual columns, the columns in view. Drawing one over 100,000 rows × 60 columns keeps the frame rate, and a change of a range writes only the marks that changed, never a cell's text. The buttons set ranges by key from code.
+Ranges are marks on the cells drawn now: the pooled rows and, with virtual columns, the columns in view. Drawing one over 100,000 rows × 60 columns keeps the frame rate, and a change of a range writes only the marks that changed, never a cell's text. The buttons set ranges by key programmatically.
 
 ```tsx
 import { reactive } from '@motifx/core';

package/docs/datagrid-drag.md

@@ -1,6 +1,6 @@
 # DataGrid: Row drag and drop
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Reorder rows
 

package/docs/datagrid-editing.md

@@ -1,6 +1,6 @@
 # DataGrid: Editing
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Editing and save modes
 
@@ -131,7 +131,7 @@ export interface Order {
 
 | Member | Gets / returns | What it does |
 | --- | --- | --- |
-| `onActionRunning` | `{ action, rows, selection, location, cancel }` | An action is about to run (in a row, a bar, a row’s menu or from code); `cancel` keeps it from running. `rows` is empty for a selection that is not loaded. |
+| `onActionRunning` | `{ action, rows, selection, location, cancel }` | An action is about to run (in a row, a bar, a row’s menu or programmatically); `cancel` keeps it from running. `rows` is empty for a selection that is not loaded. |
 | `onActionRan` | `{ action, rows, location, done, failed, canceled, errors }` | An action ran. Without a listener, what failed rows threw goes to the console. |
 | `runAction(id, rows?)` | `Promise<GridActionRanEventArgs \| null>` | Runs an action on `rows`, or on the rows the bars act on now, where it is visible and enabled; `null` when it is not there or was cancelled. |
 | `actionTargets` | `T[]`, reactive | The rows the bars act on now; empty for a selection that is not loaded. |

package/docs/datagrid-filtering.md

@@ -1,6 +1,6 @@
 # DataGrid: Filtering and search
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Filters
 
@@ -55,7 +55,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 | `filterPanelText` | The panel's text, from the one it would show. `({ text, filterValue }) => string`. |
 | `filterBuilder` | Any prop of `FilterBuilder` but `value` and `fields` (`customOperations`, `maxGroupLevel`, `groupOperations`, its events…); live as `grid.filterBuilder`. `GridFilterBuilderOptions`, default `{}`. |
 | `filterBuilderPopup` | The window: `title`, `showTitle`, `width` (`'40rem'`), `height`, `resizable`, `movable`, `showCloseButton`, `showMaximize`, `fullScreen`; live as `grid.filterBuilderPopup`. `GridFilterBuilderPopup`, default `{}`. |
-| `openFilterBuilder(), closeFilterBuilder(apply?), clearFilterValue()` | What the panel does, from code. `filterText` is the panel's text, `filterBuilderInstance` the open builder. |
+| `openFilterBuilder(), closeFilterBuilder(apply?), clearFilterValue()` | What the panel does, programmatically. `filterText` is the panel's text, `filterBuilderInstance` the open builder. |
 | `onFilterBuilderOpening / Opened, onFilterBuilderClosing / Closed` | `e.cancel` keeps the builder closed, or open; `e.apply` / `e.applied` say whether OK was pressed. `onFilterChanging` (cancelable) and `onFilterChanged` carry `filterValue` and `filterEnabled` too. |
 
 ## Ranges, dates and entries
@@ -80,7 +80,7 @@ export interface Order {
 
 ## Search panel
 
-`searchPanel` puts a search box in the toolbar: its text is looked for in every searchable column at once, after a short typing pause. Each column reads it by its type — text columns contain it (without case, in the locale), number, date and yes/no columns match it when it reads as one of their values, list columns by their option texts — and the columns are joined with OR, then with the filter row and the header filter with AND. A text no column can read leaves no row. The filter goes to the data source like any other (`data.where`, `data.or`), so a server runs it; what was found is marked in the cells. `searchText` binds the text both ways with `onSearchTextChanged`; `searchByText()` searches from code.
+`searchPanel` puts a search box in the toolbar: its text is looked for in every searchable column at once, after a short typing pause. Each column reads it by its type — text columns contain it (without case, in the locale), number, date and yes/no columns match it when it reads as one of their values, list columns by their option texts — and the columns are joined with OR, then with the filter row and the header filter with AND. A text no column can read leaves no row. The filter goes to the data source like any other (`data.where`, `data.or`), so a server runs it; what was found is marked in the cells. `searchText` binds the text both ways with `onSearchTextChanged`; `searchByText()` searches programmatically.
 
 A lookup column is searched by its texts: the lookup source — here a customers service apart from the sales' server — is asked for the items whose text holds the search (at most `searchLimit`), and their keys go to the rows' server as `customerId in [...]`. A column with a `textFrom` field searches that field of the row instead.
 

package/docs/datagrid-forms.md

@@ -1,6 +1,6 @@
 # DataGrid: Edit forms and popups
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Edit forms and popups
 

package/docs/datagrid-grouping.md

@@ -1,6 +1,6 @@
 # DataGrid: Grouping and summaries
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Grouping
 

package/docs/datagrid-layout.md

@@ -1,6 +1,6 @@
 # DataGrid: Layout and events
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Toolbar
 
@@ -162,7 +162,7 @@ export interface Order {
 
 ## Events
 
-Every action of the user has an event, given as a prop or listened to with `grid.onX((e) => …)`; one that is about to happen (`…ing`) can be stopped with `e.cancel = true`, and most can change what happens (the values sent, the items of a menu, the text copied). Here amounts over 900 are drawn in bold, the rows get a menu of their own (right click, or Shift + F10), a change to “Cancelled” is not saved, and the list tells what happened. Methods do the same from code: `editCell`, `cellValue`, `navigateToRow`, `columnOption`, `state()` and the others in the [API reference](datagrid-api.md#api).
+Every action of the user has an event, given as a prop or listened to with `grid.onX((e) => …)`; one that is about to happen (`…ing`) can be stopped with `e.cancel = true`, and most can change what happens (the values sent, the items of a menu, the text copied). Here amounts over 900 are drawn in bold, the rows get a menu of their own (right click, or Shift + F10), a change to “Cancelled” is not saved, and the list tells what happened. Methods do the same programmatically: `editCell`, `cellValue`, `navigateToRow`, `columnOption`, `state()` and the others in the [API reference](datagrid-api.md#api).
 
 ```tsx
 /** An order, as the examples' made-up server keeps it. */
@@ -199,13 +199,13 @@ export interface Order {
 | `onFocusedRowChanging / onFocusedRowChanged` | `{ rowIndex, previousRowIndex, row }` / `{ rowIndex, row, key }` | yes / — | The active row changes. |
 | `onKeyHandling` | `{ event, rowIndex, field }` | yes | A key went down in the rows, an editor, the filter row or a group chip, before the grid handles it; cancel and handle it yourself. DevExtreme calls it `onKeyDown`, a DOM event name in JSX. |
 | `onOptionChanged` | `{ name, field?, value, previous }` |  | A setting was assigned: `grid.settings`, `columnSettings(field)` (with `field`), `toolbar` (`toolbar.visible`, `toolbar.items`), `columnOption` (with `field`); a column was added or taken out (`name: 'columns'`, the fields). |
-| `onSortChanging / onSortChanged` | `{ sort, previous, byUser }` | yes / — | The sort is about to change, by the user or from code. |
+| `onSortChanging / onSortChanged` | `{ sort, previous, byUser }` | yes / — | The sort is about to change, by the user or programmatically. |
 | `onFilterChanging / onFilterChanged` | `{ filters, previous }` / `{ filters, filter }` | yes / — | The filter row and header filters are about to apply; cancel puts the ones before back in the cells. |
 | `onSearchTextChanging / onSearchTextChanged` | `{ text, previous }` / `{ text }` | yes / — | The search text is about to change; cancel keeps the one before in the box. |
 | `onPageChanging / onPageChanged` | `{ page, previous }` | yes / — | Another page is about to show. |
 | `onPageSizeChanging / onPageSizeChanged` | `{ pageSize, previous }` | yes / — | The rows per page are about to change (0: all); the grid goes back to the first page. |
 | `onMoreRowsLoading / onMoreRowsLoaded` | `{ skip, take }` / `{ skip, count, ended }` | yes / — | Infinite mode: the next part of the rows is about to load; it came. |
-| `onSelectionChanging / onSelectionChanged` | `{ selection, previous }` / `{ selection }` | yes / — | The selection is about to change, by the user or from code. |
+| `onSelectionChanging / onSelectionChanged` | `{ selection, previous }` / `{ selection }` | yes / — | The selection is about to change, by the user or programmatically. |
 | `onLayoutChanging / onLayoutChange` | `{ layout, previous }` / `layout` | yes / — | The user resized, moved, hid, pinned, sorted or reset; cancel puts the layout before back. |
 | `onGroupingChanging / onGroupingChanged, onGroupDropping` | see [Grouping](datagrid-grouping.md#grouping) | yes | The grouping; a dropped header or chip. |
 | `onRowExpanding / onRowExpanded, onRowCollapsing / onRowCollapsed` | `{ kind, key, row }` | yes / — | A group (`kind: 'group'`) or a row's details (`kind: 'detail'`) open or close. |

package/docs/datagrid-lookups.md

@@ -1,6 +1,6 @@
 # DataGrid: Lookup columns
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Lookup columns
 

package/docs/datagrid-master-detail.md

@@ -1,6 +1,6 @@
 # DataGrid: Master-detail
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Master-detail
 
@@ -30,7 +30,7 @@ export function makeCustomers(n: number): Customer[] {
 
 | Option | Type | Default | What it does |
 | --- | --- | --- | --- |
-| `masterDetail.enabled` | `Bind<boolean>` | `false` | The expand column, after the status and check box columns and pinned like them: the user opens and closes the details. Off, they open from code only. |
+| `masterDetail.enabled` | `Bind<boolean>` | `false` | The expand column, after the status and check box columns and pinned like them: the user opens and closes the details. Off, they open programmatically only. |
 | `masterDetail.template` | `(ctx: DetailContext<T>) => unknown` | — | What a row’s details hold: a component (another `DataGrid`, a `FormLayout`, `Tabs` …), an element or a text. Made the first time the details show. `ctx`: `row` (the row itself) and `rowIndex`, both read again in getters when the row shows another one and on `grid.repaint()` or `grid.repaintRows(keys)`, `key`, `grid`, `collapse()`. |
 | `masterDetail.autoExpandAll` | `Bind<boolean>` | `false` | Every row starts open. Changing it, `enabled` or `template` opens or closes every row again. |
 | `masterDetail.canExpand` | `Bind<boolean> \| (row) => boolean` | `true` | Whether a row has details; a row without has no arrow, and `expandRow` leaves it closed. New rows not saved yet have none. |
@@ -89,7 +89,7 @@ The arrow is a button with `aria-expanded` and `aria-controls`; the row says `ar
 
 | Event | Gets | When |
 | --- | --- | --- |
-| `onRowExpanding / onRowCollapsing` | `{ kind: 'detail', key, row, cancel }` | A row’s details are about to open or close, by the user or from code; `cancel` keeps them as they are. The same events as for groups (`kind: 'group'`). |
+| `onRowExpanding / onRowCollapsing` | `{ kind: 'detail', key, row, cancel }` | A row’s details are about to open or close, by the user or programmatically; `cancel` keeps them as they are. The same events as for groups (`kind: 'group'`). |
 | `onRowExpanded / onRowCollapsed` | `{ kind: 'detail', key, row }` | They opened or closed. |
 | `onRowPrepared` | `{ rowType: 'detail', row, rowIndex, element }` | A row’s details were drawn for a row. |
 | `onOptionChanged` | `{ name: 'masterDetail.enabled', value, previous }` | A `masterDetail` option was assigned through `grid.masterDetail`. |

package/docs/datagrid-scrolling.md

@@ -1,6 +1,6 @@
 # DataGrid: Scrolling
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Scrolling modes
 

package/docs/datagrid-selection.md

@@ -1,6 +1,6 @@
 # DataGrid: Selection and export
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 ## Selection
 
@@ -308,7 +308,7 @@ import { Button, CheckBox, DataGrid, Stack } from '@motifx-community/ui';
 import type { Order } from './order';
 import { columns, makeOrders } from './orders';
 
-/** Ctrl+C and Ctrl+V as tab-separated text, and the same from code. */
+/** Ctrl+C and Ctrl+V as tab-separated text, and the same programmatically. */
 export default function Clipboard() {
   const s = reactive({ raw: false, headers: false, newRows: false, copied: '' });
   let grid: DataGrid<Order> | null = null;
@@ -340,7 +340,7 @@ export default function Clipboard() {
         ref={(g: DataGrid<Order>) => (grid = g)}
       />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Copy from code" variant="outline" onclick={() => (s.copied = grid?.copy() ?? '')} />
+        <Button text="Copy programmatically" variant="outline" onclick={() => (s.copied = grid?.copy() ?? '')} />
         <Button text="Paste two lines at the active cell" variant="outline" onclick={() => grid?.paste('Ada Lovelace\tİzmir\nGrace Hopper\tAnkara')} />
         <output class="dg-copied">{() => (s.copied ? `Copied: ${s.copied.replace(/\t/g, ' → ').replace(/\r?\n/g, ' ¶ ')}` : '')}</output>
       </Stack>

package/docs/datagrid.md

@@ -1,6 +1,6 @@
 # DataGrid
 
-> DataGrid · @motifx-community/ui 0.1.0-beta.2
+> DataGrid · @motifx-community/ui 0.1.0-beta.3
 
 A grid for data entry and large data: rows in memory or from any adapter of the data layer, a virtual list or pages, sorting, column layout, editing with the kit's editors, new rows with the Tab chain, three save modes, row actions, selection, filters, a search panel, grouping, summaries, a toolbar, lookup columns from other services, copy and paste, export and a layout that is kept — and every feature can be turned off, for the grid or for one column.
 
@@ -11,7 +11,7 @@ import { DataGrid, type GridColumn } from '@motifx-community/ui';
 import { data } from '@motifx-community/data';
 ```
 
-## From JSX and from code
+## Declarative and programmatic
 
 Give rows in memory with `rows` and their key with `rowKey`; the grid puts them in a `DataSource` over an `ArrayAdapter` itself. Every prop takes a value or a function. Created with `new`, the grid is an object like any other: add it, sort it, ask it.
 
@@ -77,7 +77,7 @@ export class SlowAdapter<T extends object, K> extends data.ArrayAdapter<T, K> {
 
 ## Pager
 
-The pager under the rows shows the page sizes (`pageSizeSelector`, the sizes of `allowedPageSizes`, `all` for one page with every row), “Page 3 of 12 (250 items)” (`pagerInfo`, `pagerInfoText` with `{0}`, `{1}`, `{2}`), the first, previous, next and last buttons (`pagerNavigation`) and the pages around the current one (`pagerNeighbors`). `pagerDisplayMode` picks its look: `full` with page buttons and the sizes as buttons, `compact` with a box for the page number and a drop-down of the sizes, `adaptive` (the default) full while it fits in the grid's width. The rows per page change from code with `pageSize(n)` too; either way `onPageSizeChanging` can keep the old size, the grid goes back to the first page, and with `layoutKey` the size is kept with the layout. PageUp and PageDown turn the page (`pageKeys`).
+The pager under the rows shows the page sizes (`pageSizeSelector`, the sizes of `allowedPageSizes`, `all` for one page with every row), “Page 3 of 12 (250 items)” (`pagerInfo`, `pagerInfoText` with `{0}`, `{1}`, `{2}`), the first, previous, next and last buttons (`pagerNavigation`) and the pages around the current one (`pagerNeighbors`). `pagerDisplayMode` picks its look: `full` with page buttons and the sizes as buttons, `compact` with a box for the page number and a drop-down of the sizes, `adaptive` (the default) full while it fits in the grid's width. The rows per page change programmatically with `pageSize(n)` too; either way `onPageSizeChanging` can keep the old size, the grid goes back to the first page, and with `layoutKey` the size is kept with the layout. PageUp and PageDown turn the page (`pageKeys`).
 
 ```tsx
 /** An order, as the examples' made-up server keeps it. */
@@ -95,7 +95,7 @@ export interface Order {
 
 ## Example files
 
-`FromCode.tsx`
+`Programmatic.tsx`
 
 ```tsx
 import { reactive } from '@motifx/core';
@@ -103,8 +103,8 @@ import { Button, DataGrid, Stack } from '@motifx-community/ui';
 import type { Order } from './order';
 import { columns, makeOrders, newOrder } from './orders';
 
-/** Rows in memory given with `rows`, rows added from code, and a grid created with `new`. */
-export default function FromCode() {
+/** Rows in memory given with `rows`, rows added programmatically, and a grid created with `new`. */
+export default function Programmatic() {
   const s = reactive({ orders: makeOrders(40) });
   let grid: DataGrid<Order> | null = null;
   let host: Stack | null = null;
@@ -139,9 +139,9 @@ export default function FromCode() {
         ref={(g: DataGrid<Order>) => (grid = g)}
       />
       <Stack orientation="horizontal" wrap align="center">
-        <Button text="Add a row from code" variant="outline" onclick={() => void grid?.addRow({ customer: 'Ada Lovelace' })} />
+        <Button text="Add a row programmatically" variant="outline" onclick={() => void grid?.addRow({ customer: 'Ada Lovelace' })} />
         <Button text="Push an order into the array" variant="outline" onclick={pushOrder} />
-        <Button text="Add a grid from code" variant="outline" onclick={addGrid} />
+        <Button text="Add a grid programmatically" variant="outline" onclick={addGrid} />
         <output class="dg-local-count">{() => `${s.orders.length} orders in the array`}</output>
       </Stack>
       <Stack orientation="horizontal" wrap align="center" ref={(c: Stack) => (host = c)} />