@motifx-community/ui 0.1.0-beta.0 → 0.1.0-beta.1

package/CHANGELOG.md

@@ -6,6 +6,24 @@ The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) and
 
 ## [Unreleased]
 
+## [0.1.0-beta.1] - 2026-11-04
+
+### DropDown and Lookup: a value on no loaded page is asked for by key
+
+- A value whose item is on no loaded page of `dataSource` is asked for by key, in one request with the keys the
+  other fields and grids over the same source need at that moment. Meanwhile the field waits: `aria-busy`, a
+  spinner in the arrow's place (`.mx-drop-down__spinner`, `data-loading`), the list closed, never the key as its
+  text. A record that carries the name too gives it as `valueText`, and the field shows it at once. A key the
+  source does not have shows itself, muted and underlined (`data-missing`), its title says why (`notInList`);
+  when the request failed, opening the list asks again.
+- Units `drop-down.spinner` and `drop-down.spinner-shape` and the `missing` state of `drop-down.value`, drawn in
+  every language. The docs: "A value on no loaded page" on the Lookup page.
+
+### Scheduler
+
+- The agenda view tells the Scheduler it is shown as soon as it is configured: a view change made while focus is
+  in the Scheduler moves focus into the agenda, as into the other views.
+
 ## [0.1.0-beta.0] - 2026-10-30
 
 The first preview on npm (`npm i @motifx-community/ui@beta`). The package also carries its documentation for

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

@@ -12,6 +12,10 @@ type Template<T> = ((item: T, host: HTMLElement) => (() => void) | void) | null;
  * 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`.
  *
+ * From a data source, a value on no loaded page is asked for by key: meanwhile the field shows
+ * `valueText` when it is given, else it waits (a spinner in the arrow's place, the list closed).
+ * A key the source does not have shows itself, marked.
+ *
  * @example
  * <DropDown label="&City" items={['Ankara', 'İstanbul', 'İzmir']} x-model={() => this.form.city} />
  * <DropDown label="Country" items={() => this.countries} textField="name" valueField="code" searchEnabled />
@@ -32,6 +36,8 @@ export declare class DropDown<T = unknown, V = unknown> extends Field<V | null,
     set enabledField(value: Bind<ItemField<T>>);
     get dataSource(): data.DataSource<T, unknown> | null;
     set dataSource(value: Bind<data.DataSource<T, unknown> | null>);
+    get valueText(): string;
+    set valueText(value: Bind<string>);
     get searchDelay(): number;
     set searchDelay(value: Bind<number>);
     get placeholder(): string;
@@ -76,6 +82,10 @@ export declare class DropDown<T = unknown, V = unknown> extends Field<V | null,
     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;
+    /** Asks the data source for the item of `value` (`again`: after its request failed); the field shows the answer. */
+    private lookUp;
+    /** What the field shows for `value` and its text. */
+    private valueLook;
     private renderSource;
     private sourceChanged;
     private visibleItems;
@@ -91,6 +101,10 @@ export declare class DropDown<T = unknown, V = unknown> extends Field<V | null,
     private watchList;
     private drawList;
     private renderField;
+    /** The texts of the wait and of a missing key are the kit's: the field draws them again when its language changes. */
+    private followLanguage;
+    /** The spinner in the arrow's place while the value's item is asked for; made the first time it is needed. */
+    private addSpinner;
     private renderClear;
 }
 export {};

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

@@ -9,6 +9,11 @@ export interface DropDownProps<T, V> extends FieldProps<V | null> {
     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>;
+    /**
+     * The value's text while its item is asked for from `dataSource` (the record often carries it:
+     * `valueText={() => order.customerName}`): the field shows it at once instead of waiting.
+     */
+    valueText?: Bind<string>;
     /** 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. */

package/dist/components/scheduler/view/AgendaView.d.ts

@@ -27,7 +27,7 @@ export declare class AgendaView<T> extends Component<HTMLDivElement, Props<T>> {
     constructor(props: Props<T>);
     private get host();
     onConfigured(): void;
-    onMounted(): void;
+    onConfig(): void;
     onDisposing(): void;
     /** All of the list, as the model has it now. */
     draw(): void;

package/dist/core/ui-strings.d.ts

@@ -9,6 +9,8 @@ export interface UiStrings {
     close: string;
     loading: string;
     noItems: string;
+    /** A value the list's source does not have. */
+    notInList: string;
     search: string;
     notifications: string;
     previousMonth: string;

package/dist/generated/tokens.d.ts

@@ -6345,6 +6345,16 @@ export declare const componentTokens: {
         readonly type: 'color';
         readonly layer: 'component';
     };
+    readonly 'drop-down.value.missing.color': {
+        readonly cssVar: '--mx-drop-down-value-missing-color';
+        readonly type: 'color';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.value.missing.text-decoration': {
+        readonly cssVar: '--mx-drop-down-value-missing-text-decoration';
+        readonly type: 'keyword';
+        readonly layer: 'component';
+    };
     readonly 'drop-down.chevron.size': {
         readonly cssVar: '--mx-drop-down-chevron-size';
         readonly type: 'dimension';
@@ -6370,6 +6380,36 @@ export declare const componentTokens: {
         readonly type: 'color';
         readonly layer: 'component';
     };
+    readonly 'drop-down.spinner.size': {
+        readonly cssVar: '--mx-drop-down-spinner-size';
+        readonly type: 'dimension';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.border-width': {
+        readonly cssVar: '--mx-drop-down-spinner-border-width';
+        readonly type: 'dimension';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.border-end-color': {
+        readonly cssVar: '--mx-drop-down-spinner-border-end-color';
+        readonly type: 'color';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.radius': {
+        readonly cssVar: '--mx-drop-down-spinner-radius';
+        readonly type: 'dimension';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner.color': {
+        readonly cssVar: '--mx-drop-down-spinner-color';
+        readonly type: 'color';
+        readonly layer: 'component';
+    };
+    readonly 'drop-down.spinner-shape.display': {
+        readonly cssVar: '--mx-drop-down-spinner-shape-display';
+        readonly type: 'keyword';
+        readonly layer: 'component';
+    };
     readonly 'field.width': {
         readonly cssVar: '--mx-field-width';
         readonly type: 'dimension';

package/dist/index.js

@@ -1756,6 +1756,7 @@ var en_exports = /* @__PURE__ */ __exportAll({
 	no: () => "No",
 	noItems: () => noItems$1,
 	noMatch: () => noMatch$1,
+	notInList: () => notInList$1,
 	notifications: () => notifications$1,
 	ok: () => "OK",
 	outOfRange: () => outOfRange$1,
@@ -2044,6 +2045,7 @@ var decrease$1 = "Decrease";
 var close$1 = "Close";
 var loading$1 = "Loading…";
 var noItems$1 = "No items";
+var notInList$1 = "Not found in the list";
 var search$1 = "Search";
 var notifications$1 = "Notifications";
 var previousMonth$1 = "Previous month";
@@ -2577,6 +2579,7 @@ var en_default = {
 	close: close$1,
 	loading: loading$1,
 	noItems: noItems$1,
+	notInList: notInList$1,
 	search: search$1,
 	notifications: notifications$1,
 	previousMonth: previousMonth$1,
@@ -3403,6 +3406,7 @@ var tr_exports = /* @__PURE__ */ __exportAll({
 	no: () => no,
 	noItems: () => noItems,
 	noMatch: () => noMatch,
+	notInList: () => notInList,
 	notifications: () => notifications,
 	ok: () => ok,
 	outOfRange: () => outOfRange,
@@ -3691,6 +3695,7 @@ var decrease = "Azalt";
 var close = "Kapat";
 var loading = "Yükleniyor…";
 var noItems = "Öğe yok";
+var notInList = "Listede bulunamadı";
 var notifications = "Bildirimler";
 var previousMonth = "Önceki ay";
 var nextMonth = "Sonraki ay";
@@ -4233,6 +4238,7 @@ var tr_default = {
 	close,
 	loading,
 	noItems,
+	notInList,
 	search: "Ara",
 	notifications,
 	previousMonth,
@@ -10221,6 +10227,15 @@ var KeyedItems = class KeyedItems {
 		}
 		return Promise.all(waits).then(() => void 0);
 	}
+	/** Asks again for the keys whose last request failed (and for those never asked for). */
+	retry(keys) {
+		const list = [...keys];
+		for (const key of list) {
+			const ks = keyString(key);
+			if (this.entries.get(ks)?.failed) this.entries.delete(ks);
+		}
+		return this.request(list);
+	}
 	/** Keeps what an editor chose for a key: its item, or its text. It shows at once, without a request. */
 	remember(key, itemOrText) {
 		if (key === null || key === void 0) return;
@@ -10541,6 +10556,18 @@ var DataItems = class {
 	findLoaded(value, valueOf, same = Object.is) {
 		return (this.source ? this.loaded : this.array).find((item) => same(valueOf(item), value));
 	}
+	/** What is known of the item `find` asked the data source for: still asked for, found, or not in the source. */
+	known(value) {
+		if (!this.source || value === null || value === void 0) return void 0;
+		return KeyedItems.of(this.source, this.valueField).get(value);
+	}
+	/** Asks the data source again for the item of `value` after its request failed. */
+	async retry(value) {
+		if (!this.source || value === null || value === void 0) return void 0;
+		const known = KeyedItems.of(this.source, this.valueField);
+		await known.retry([value]);
+		return known.get(value)?.item;
+	}
 	reload() {
 		return this.source ? this.source.reload() : Promise.resolve();
 	}
@@ -11021,6 +11048,7 @@ function itemOwnValue(item) {
 var OWN$48 = [
 	"items",
 	"dataSource",
+	"valueText",
 	"placeholder",
 	"searchEnabled",
 	"searchMode",
@@ -11044,6 +11072,10 @@ var PARTS$33 = Symbol("mx.dropdown");
 * 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`.
 *
+* From a data source, a value on no loaded page is asked for by key: meanwhile the field shows
+* `valueText` when it is given, else it waits (a spinner in the arrow's place, the list closed).
+* A key the source does not have shows itself, marked.
+*
 * @example
 * <DropDown label="&City" items={['Ankara', 'İstanbul', 'İzmir']} x-model={() => this.form.city} />
 * <DropDown label="Country" items={() => this.countries} textField="name" valueField="code" searchEnabled />
@@ -11072,14 +11104,11 @@ var DropDown = class extends Field {
 			return {
 				items: this.items,
 				value: this.value,
+				valueText: this.getProperty("valueText") ?? "",
 				placeholder: this.getProperty("placeholder") ?? "",
 				template: this.getProperty("fieldTemplate")
 			};
-		}, ({ items, value, placeholder, template }) => {
-			const item = this.itemOfValue(items, value);
-			const text = item === void 0 ? value == null ? "" : String(value) : this.itemText(item);
-			this.renderField(item, text, placeholder, template);
-		});
+		}, ({ items, value, valueText, placeholder, template }) => this.renderField(items, value, valueText, placeholder, template));
 		this.observeProperty("dataSource", () => this.renderSource());
 		this.observeProperty("valueField", (field) => parts.source.valueField = typeof field === "string" ? field : void 0);
 		parts.source.onChanged(() => this.sourceChanged());
@@ -11089,6 +11118,7 @@ var DropDown = class extends Field {
 			clearTimeout(parts.timer);
 			parts.source.dispose();
 			parts.stopList?.();
+			parts.stopLanguage?.();
 			parts.releaseField();
 			parts.opened.dispose();
 			parts.closed.dispose();
@@ -11136,6 +11166,12 @@ var DropDown = class extends Field {
 	set dataSource(value) {
 		this.assignProperty("dataSource", value);
 	}
+	get valueText() {
+		return this.getProperty("valueText") ?? "";
+	}
+	set valueText(value) {
+		this.assignProperty("valueText", value);
+	}
 	get searchDelay() {
 		return this.getProperty("searchDelay") ?? (this.dataSource ? 250 : 0);
 	}
@@ -11208,8 +11244,9 @@ var DropDown = class extends Field {
 	}
 	/** 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) {
-		if (!this.isEnabled || this.peekProperty("readOnly")) return false;
 		const parts = this.dropParts;
+		if (!this.isEnabled || this.peekProperty("readOnly") || parts.state === "loading") return false;
+		if (parts.state === "failed") this.lookUp(this.peekValue(), true);
 		const popup = parts.popup ??= this.createPopup();
 		if (popup.isOpen) return true;
 		parts.filter = "";
@@ -11292,6 +11329,9 @@ var DropDown = class extends Field {
 				source: new DataItems(),
 				chosen: void 0,
 				lookup: 0,
+				state: "shown",
+				spinner: null,
+				stopLanguage: null,
 				timer: void 0,
 				opened: new Emitter(),
 				closed: new Emitter()
@@ -11328,13 +11368,54 @@ var DropDown = class extends Field {
 		if (parts.chosen !== void 0 && same(parts.chosen)) return parts.chosen;
 		const near = parts.source.findLoaded(value, (item) => this.itemValue(item), (a, b) => this.sameValue(a, b));
 		if (near !== void 0) return near;
+		const known = parts.source.known(value);
+		if (known?.item !== void 0) return known.item;
+		if (known?.state !== "found" && known?.state !== "missing") this.lookUp(value);
+	}
+	/** Asks the data source for the item of `value` (`again`: after its request failed); the field shows the answer. */
+	lookUp(value, again = false) {
+		const parts = this.dropParts;
 		const lookup = ++parts.lookup;
-		parts.source.find(value, (item) => this.itemValue(item)).then((item) => {
-			if (lookup !== parts.lookup || this.isDisposed || item === void 0) return;
-			parts.chosen = item;
+		(again ? parts.source.retry(value) : parts.source.find(value, (item) => this.itemValue(item))).then((item) => {
+			if (lookup !== parts.lookup || this.isDisposed) return;
+			if (item !== void 0) parts.chosen = item;
 			this.setProperty("chosenTick", lookup);
 		});
 	}
+	/** What the field shows for `value` and its text. */
+	valueLook(items, value, valueText) {
+		const item = this.itemOfValue(items, value);
+		if (item !== void 0) return {
+			item,
+			text: this.itemText(item),
+			state: "shown"
+		};
+		if (value === null || value === void 0) return {
+			text: "",
+			state: "shown"
+		};
+		const parts = this.dropParts;
+		if (!parts.source.dataSource) return {
+			text: String(value),
+			state: "shown"
+		};
+		const known = parts.source.known(value);
+		if (known?.state === "found") return {
+			text: known.text ?? valueText,
+			state: "shown"
+		};
+		if (known?.state === "missing") return {
+			text: valueText || String(value),
+			state: known.failed ? "failed" : "missing"
+		};
+		return valueText ? {
+			text: valueText,
+			state: "shown"
+		} : {
+			text: "",
+			state: "loading"
+		};
+	}
 	renderSource() {
 		const parts = this.dropParts;
 		const source = this.peekProperty("dataSource");
@@ -11400,7 +11481,7 @@ var DropDown = class extends Field {
 			} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && e.key !== " ") {
 				if (!this.open()) return;
 				this.typeAhead(e.key);
-			} else if (e.key === "Escape" && this.peekProperty("clearButton") && !this.isEmptyValue(this.peekValue()) && !this.peekProperty("readOnly")) {
+			} else if (e.key === "Escape" && this.peekProperty("clearButton") && !this.isEmptyValue(this.peekValue()) && !this.peekProperty("readOnly") && parts.state !== "loading") {
 				e.preventDefault();
 				e.stopPropagation();
 				this.commit(null, e);
@@ -11546,20 +11627,57 @@ var DropDown = class extends Field {
 			if (at >= 0) list.setActive(at, false);
 		}
 	}
-	renderField(item, text, placeholder, template) {
+	renderField(items, value, valueText, placeholder, template) {
 		const parts = this.dropParts;
+		const { item, text, state } = this.valueLook(items, value, valueText);
 		parts.releaseField();
 		parts.releaseField = () => {};
-		const empty = item === void 0 && !text;
+		parts.state = state;
+		const loading = state === "loading";
+		const empty = item === void 0 && !text && !loading;
 		parts.text.toggleAttribute("data-placeholder", empty);
-		if (item !== void 0 && template) {
+		parts.text.toggleAttribute("data-missing", state === "missing" || state === "failed");
+		this.element.toggleAttribute("data-loading", loading);
+		if (loading) parts.display.setAttribute("aria-busy", "true");
+		else parts.display.removeAttribute("aria-busy");
+		if (state !== "shown") this.followLanguage();
+		if (loading) {
+			const hidden = document.createElement("span");
+			hidden.className = "mx-sr-only";
+			hidden.textContent = uiLocale.strings.loading;
+			parts.text.replaceChildren(hidden);
+			this.addSpinner();
+		} else if (item !== void 0 && template) {
 			parts.text.replaceChildren();
 			parts.releaseField = template(item, parts.text) ?? (() => {});
 		} else parts.text.textContent = empty ? placeholder : text;
+		if (state === "missing" || state === "failed") parts.text.title = state === "failed" ? uiLocale.strings.loadFailed : uiLocale.strings.notInList;
+		else parts.text.removeAttribute("title");
 		this.element.toggleAttribute("data-placeholder", !!placeholder);
 	}
+	/** The texts of the wait and of a missing key are the kit's: the field draws them again when its language changes. */
+	followLanguage() {
+		const parts = this.dropParts;
+		if (parts.stopLanguage) return;
+		const changed = uiLocale.onChanged(() => {
+			if (!this.isDisposed && parts.state !== "shown") this.setProperty("refreshed", (this.peekProperty("refreshed") ?? 0) + 1);
+		});
+		parts.stopLanguage = () => changed.dispose();
+	}
+	/** The spinner in the arrow's place while the value's item is asked for; made the first time it is needed. */
+	addSpinner() {
+		const parts = this.dropParts;
+		if (parts.spinner) return;
+		const spinner = document.createElement("span");
+		spinner.className = "mx-drop-down__spinner";
+		spinner.setAttribute("aria-hidden", "true");
+		this.area("actions").append(spinner);
+		parts.spinner = spinner;
+	}
 	renderClear() {
-		this.showClearButton(!!this.peekProperty("clearButton"), (e) => this.commit(null, e), "mx-drop-down__clear");
+		this.showClearButton(!!this.peekProperty("clearButton"), (e) => {
+			if (this.dropParts.state !== "loading") this.commit(null, e);
+		}, "mx-drop-down__clear");
 	}
 };
 //#endregion
@@ -73312,7 +73430,7 @@ var AgendaView = class extends Component {
 		onReState(this, () => this.draw());
 		this.motif.setDisposable(host.keepDrawn(() => this.draw()));
 	}
-	onMounted() {
+	onConfig() {
 		this.host.viewShown();
 	}
 	onDisposing() {