@fieldia/viewer 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldia/viewer",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Mount a Fieldia page in any web page: plain DOM, no framework.",
   "license": "MIT",
   "homepage": "https://fieldia.dev",
@@ -24,8 +24,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@fieldia/core": "0.4.0",
-    "@fieldia/widgets": "0.4.0",
+    "@fieldia/core": "0.5.0",
+    "@fieldia/widgets": "0.5.0",
     "tslib": "^2.8.1"
   },
   "sideEffects": false,

package/src/index.d.mts

@@ -1 +1,2 @@
 export * from './lib/viewer.mjs';
+export * from './lib/dialog.mjs';

package/src/index.d.ts

@@ -1 +1,2 @@
 export * from './lib/viewer';
+export * from './lib/dialog';

package/src/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./lib/viewer"), exports);
+tslib_1.__exportStar(require("./lib/dialog"), exports);
 //# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B;AAC7B,uDAA6B"}

package/src/index.mjs

@@ -1,2 +1,3 @@
 export * from './lib/viewer.mjs';
+export * from './lib/dialog.mjs';
 //# sourceMappingURL=index.mjs.map

package/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../../libs/viewer/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/src/lib/dialog.d.mts

@@ -0,0 +1,48 @@
+import type { Locale, RecordId, RelatedRecord, Values } from '@fieldia/core';
+import { type Skin, type ViewerOptions } from './viewer.mjs';
+/**
+ * A page in a dialog: a new related record, a line to edit, a quick task. The
+ * dialog saves (Save & Close) or closes without saving (Discard, ×, Escape);
+ * the page's own Save and Discard stay hidden. The focus moves into the dialog,
+ * Tab stays inside it, and the focus goes back where it was when it closes.
+ */
+export interface FormDialogOptions extends ViewerOptions {
+    title: string;
+    size?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * "save" (the default) saves the record through the data source. "values"
+     * only checks the form and hands its values back, for something saved with
+     * a bigger record, such as a line.
+     */
+    mode?: 'save' | 'values';
+    /**
+     * Recalculates the values as they change, for a dialog with no data source of
+     * its own: a line's subtotal following its quantity. What comes back is shown.
+     */
+    recompute?: (values: Values) => Promise<Values>;
+    /** Where the dialog goes: the document's body by default. */
+    container?: HTMLElement;
+}
+export interface FormDialogResult {
+    /** True when Save & Close was pressed and the form accepted. */
+    saved: boolean;
+    recordId: RecordId | null;
+    values: Values;
+}
+export declare function openFormDialog(options: FormDialogOptions): Promise<FormDialogResult>;
+export interface SearchDialogOptions {
+    title: string;
+    /** Finds records for what is typed: the field's own search, filter and all. */
+    search(query: string, limit: number): Promise<RelatedRecord[]>;
+    locale?: Locale;
+    skin?: Skin;
+    dir?: 'ltr' | 'rtl';
+    /** Where the dialog goes: the document's body by default. */
+    container?: HTMLElement;
+}
+/**
+ * A searchable list in a dialog, for "Search more…": every record the field may
+ * point to, narrowed as the person types, picked with a click or the keyboard.
+ * Resolves with the record picked, or null when closed.
+ */
+export declare function openSearchDialog(options: SearchDialogOptions): Promise<RelatedRecord | null>;

package/src/lib/dialog.d.ts

@@ -0,0 +1,48 @@
+import type { Locale, RecordId, RelatedRecord, Values } from '@fieldia/core';
+import { type Skin, type ViewerOptions } from './viewer';
+/**
+ * A page in a dialog: a new related record, a line to edit, a quick task. The
+ * dialog saves (Save & Close) or closes without saving (Discard, ×, Escape);
+ * the page's own Save and Discard stay hidden. The focus moves into the dialog,
+ * Tab stays inside it, and the focus goes back where it was when it closes.
+ */
+export interface FormDialogOptions extends ViewerOptions {
+    title: string;
+    size?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * "save" (the default) saves the record through the data source. "values"
+     * only checks the form and hands its values back, for something saved with
+     * a bigger record, such as a line.
+     */
+    mode?: 'save' | 'values';
+    /**
+     * Recalculates the values as they change, for a dialog with no data source of
+     * its own: a line's subtotal following its quantity. What comes back is shown.
+     */
+    recompute?: (values: Values) => Promise<Values>;
+    /** Where the dialog goes: the document's body by default. */
+    container?: HTMLElement;
+}
+export interface FormDialogResult {
+    /** True when Save & Close was pressed and the form accepted. */
+    saved: boolean;
+    recordId: RecordId | null;
+    values: Values;
+}
+export declare function openFormDialog(options: FormDialogOptions): Promise<FormDialogResult>;
+export interface SearchDialogOptions {
+    title: string;
+    /** Finds records for what is typed: the field's own search, filter and all. */
+    search(query: string, limit: number): Promise<RelatedRecord[]>;
+    locale?: Locale;
+    skin?: Skin;
+    dir?: 'ltr' | 'rtl';
+    /** Where the dialog goes: the document's body by default. */
+    container?: HTMLElement;
+}
+/**
+ * A searchable list in a dialog, for "Search more…": every record the field may
+ * point to, narrowed as the person types, picked with a click or the keyboard.
+ * Resolves with the record picked, or null when closed.
+ */
+export declare function openSearchDialog(options: SearchDialogOptions): Promise<RelatedRecord | null>;

package/src/lib/dialog.js

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.openFormDialog = openFormDialog;
+exports.openSearchDialog = openSearchDialog;
+const widgets_1 = require("@fieldia/widgets");
+const viewer_1 = require("./viewer");
+let dialogs = 0;
+const FOCUSABLE = 'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+function openFormDialog(options) {
+    const doc = options.container?.ownerDocument ?? document;
+    const container = options.container ?? doc.body;
+    const opener = doc.activeElement instanceof doc.defaultView.HTMLElement ? doc.activeElement : null;
+    const labels = { ...viewer_1.VIEWER_LABELS[options.locale ?? 'en'], ...options.labels };
+    const id = `fd-dialog-${++dialogs}`;
+    const make = (tag, attrs = {}, text) => {
+        const element = doc.createElement(tag);
+        for (const [name, value] of Object.entries(attrs))
+            element.setAttribute(name, value);
+        if (text !== undefined)
+            element.textContent = text;
+        return element;
+    };
+    const title = make('h2', { id: `${id}-title`, class: 'fd-form-dialog-title' }, options.title);
+    const closeButton = make('button', { type: 'button', class: 'fd-dialog-close', 'aria-label': labels.close }, '×');
+    const body = make('div', { class: 'fd-form-dialog-body' });
+    const discard = make('button', { type: 'button', class: 'fd-button' }, labels.discard);
+    const saveClose = make('button', { type: 'button', class: 'fd-button fd-button-primary' }, labels.saveClose);
+    const box = make('div', {
+        // Its own tokens and skin: the dialog sits outside the page that opened it.
+        class: `fd-theme fd-form-dialog fd-size-${options.size ?? 'medium'}`,
+        'data-fd-skin': options.skin ?? 'underline',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-labelledby': title.id,
+        tabindex: '-1',
+    });
+    if (options.dir)
+        box.setAttribute('dir', options.dir);
+    box.append(make('div', { class: 'fd-form-dialog-head' }), body, make('div', { class: 'fd-actions fd-actions-end fd-form-dialog-foot' }));
+    box.firstElementChild?.append(title, closeButton);
+    box.lastElementChild?.append(discard, saveClose);
+    const backdrop = make('div', { class: 'fd-dialog-backdrop fd-form-dialog-backdrop' });
+    backdrop.append(box);
+    container.append(backdrop);
+    const handle = (0, viewer_1.mountViewer)(body, { ...options, showActions: false });
+    let done = false;
+    if (options.recompute)
+        recalculate(handle.form, options.page.fields, options.recompute, () => done);
+    const focusables = () => [...box.querySelectorAll(FOCUSABLE)].filter((element) => !element.closest('[hidden], [inert]') && !element.disabled);
+    // Into the dialog: its first field, once the record is in, or the dialog itself meanwhile.
+    const firstField = () => body.querySelector('input:not([type="hidden"]), select, textarea, [contenteditable="true"]');
+    (firstField() ?? box).focus();
+    void handle.form.settled().then(() => {
+        if (doc.activeElement === box || !box.contains(doc.activeElement))
+            firstField()?.focus();
+    });
+    return new Promise((resolve) => {
+        const close = (saved) => {
+            if (done)
+                return;
+            done = true;
+            const state = handle.form.getState();
+            // The form never changes its values in place, so these are safe to hand back.
+            const result = { saved, recordId: state.recordId ?? null, values: state.values };
+            handle.destroy();
+            backdrop.remove();
+            opener?.focus();
+            resolve(result);
+        };
+        saveClose.addEventListener('click', async () => {
+            saveClose.disabled = true;
+            const accepted = options.mode === 'values' ? handle.check() : await handle.save();
+            saveClose.disabled = false;
+            if (accepted)
+                close(true);
+        });
+        discard.addEventListener('click', () => close(false));
+        closeButton.addEventListener('click', () => close(false));
+        box.addEventListener('keydown', (event) => {
+            // A key a field used itself (Escape closing a list) is not the dialog's.
+            if (event.defaultPrevented)
+                return;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                close(false);
+            }
+            else if (event.key === 'Tab') {
+                const all = focusables();
+                if (!all.length)
+                    return;
+                const first = all[0];
+                const last = all[all.length - 1];
+                if (event.shiftKey && doc.activeElement === first) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (!event.shiftKey && doc.activeElement === last) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            }
+        });
+    });
+}
+/** Each change of the values asks for them recalculated, and shows the answer unless they changed again meanwhile. */
+function recalculate(form, fields, recompute, closed) {
+    let seen = JSON.stringify(form.getState().values);
+    let writing = false;
+    form.subscribe(() => {
+        const values = form.getState().values;
+        const now = JSON.stringify(values);
+        if (writing || now === seen)
+            return;
+        seen = now;
+        recompute(values).then((next) => {
+            if (closed() || JSON.stringify(form.getState().values) !== now)
+                return; // a newer answer is on its way
+            writing = true;
+            for (const [name, value] of Object.entries(next)) {
+                if (name in fields && JSON.stringify(values[name] ?? null) !== JSON.stringify(value ?? null))
+                    form.setValue(name, value);
+            }
+            writing = false;
+            seen = JSON.stringify(form.getState().values);
+        }, () => undefined);
+    });
+}
+/**
+ * A searchable list in a dialog, for "Search more…": every record the field may
+ * point to, narrowed as the person types, picked with a click or the keyboard.
+ * Resolves with the record picked, or null when closed.
+ */
+function openSearchDialog(options) {
+    const doc = options.container?.ownerDocument ?? document;
+    const container = options.container ?? doc.body;
+    const opener = doc.activeElement instanceof doc.defaultView.HTMLElement ? doc.activeElement : null;
+    const labels = viewer_1.VIEWER_LABELS[options.locale ?? 'en'];
+    const words = widgets_1.WIDGET_LABELS[options.locale ?? 'en'];
+    const id = `fd-dialog-${++dialogs}`;
+    const make = (tag, attrs = {}, text) => {
+        const element = doc.createElement(tag);
+        for (const [name, value] of Object.entries(attrs))
+            element.setAttribute(name, value);
+        if (text !== undefined)
+            element.textContent = text;
+        return element;
+    };
+    const title = make('h2', { id: `${id}-title`, class: 'fd-form-dialog-title' }, options.title);
+    const closeButton = make('button', { type: 'button', class: 'fd-dialog-close', 'aria-label': labels.close }, '×');
+    const query = make('input', { type: 'search', class: 'fd-input', 'aria-label': words.search, placeholder: words.search, 'aria-controls': `${id}-list`, autocomplete: 'off' });
+    const list = make('ul', { id: `${id}-list`, class: 'fd-search-list', role: 'listbox', 'aria-labelledby': title.id });
+    const cancel = make('button', { type: 'button', class: 'fd-button' }, labels.cancel);
+    const box = make('div', {
+        class: `fd-theme fd-form-dialog fd-search-dialog fd-size-small`,
+        'data-fd-skin': options.skin ?? 'underline',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-labelledby': title.id,
+    });
+    if (options.dir)
+        box.setAttribute('dir', options.dir);
+    const head = make('div', { class: 'fd-form-dialog-head' });
+    head.append(title, closeButton);
+    const body = make('div', { class: 'fd-form-dialog-body fd-search-body' });
+    body.append(query, list);
+    const foot = make('div', { class: 'fd-actions fd-actions-end fd-form-dialog-foot' });
+    foot.append(cancel);
+    box.append(head, body, foot);
+    const backdrop = make('div', { class: 'fd-dialog-backdrop fd-form-dialog-backdrop' });
+    backdrop.append(box);
+    container.append(backdrop);
+    query.focus();
+    return new Promise((resolve) => {
+        let found = [];
+        let active = -1;
+        let asked = 0;
+        let timer;
+        const close = (picked) => {
+            clearTimeout(timer);
+            asked++;
+            backdrop.remove();
+            opener?.focus();
+            resolve(picked);
+        };
+        const draw = () => {
+            list.replaceChildren(...found.map((record, i) => {
+                const option = make('li', { id: `${id}-option-${i}`, role: 'option', class: `fd-option${i === active ? ' fd-active' : ''}`, 'aria-selected': String(i === active) }, record.label);
+                option.addEventListener('click', () => close(record));
+                return option;
+            }));
+            if (!found.length)
+                list.append(make('li', { class: 'fd-empty' }, words.noResults));
+            if (active >= 0)
+                query.setAttribute('aria-activedescendant', `${id}-option-${active}`);
+            else
+                query.removeAttribute('aria-activedescendant');
+        };
+        const look = () => {
+            clearTimeout(timer);
+            const mine = ++asked;
+            timer = setTimeout(async () => {
+                const records = await options.search(query.value, 80).catch(() => []);
+                if (mine !== asked)
+                    return; // a newer search, or the dialog closed
+                found = records;
+                active = -1;
+                draw();
+            }, 180);
+        };
+        query.addEventListener('input', look);
+        query.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (!found.length)
+                    return;
+                active = (active + (event.key === 'ArrowDown' ? 1 : -1) + found.length) % found.length;
+                draw();
+                list.children[active]?.scrollIntoView?.({ block: 'nearest' });
+            }
+            else if (event.key === 'Enter' && active >= 0) {
+                event.preventDefault();
+                close(found[active]);
+            }
+        });
+        cancel.addEventListener('click', () => close(null));
+        closeButton.addEventListener('click', () => close(null));
+        box.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                close(null);
+            }
+        });
+        look();
+    });
+}
+//# sourceMappingURL=dialog.js.map

package/src/lib/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../../../libs/viewer/src/lib/dialog.ts"],"names":[],"mappings":"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"}

package/src/lib/dialog.mjs

@@ -0,0 +1,232 @@
+import { WIDGET_LABELS } from '@fieldia/widgets';
+import { mountViewer, VIEWER_LABELS } from './viewer.mjs';
+let dialogs = 0;
+const FOCUSABLE = 'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+export function openFormDialog(options) {
+    const doc = options.container?.ownerDocument ?? document;
+    const container = options.container ?? doc.body;
+    const opener = doc.activeElement instanceof doc.defaultView.HTMLElement ? doc.activeElement : null;
+    const labels = { ...VIEWER_LABELS[options.locale ?? 'en'], ...options.labels };
+    const id = `fd-dialog-${++dialogs}`;
+    const make = (tag, attrs = {}, text) => {
+        const element = doc.createElement(tag);
+        for (const [name, value] of Object.entries(attrs))
+            element.setAttribute(name, value);
+        if (text !== undefined)
+            element.textContent = text;
+        return element;
+    };
+    const title = make('h2', { id: `${id}-title`, class: 'fd-form-dialog-title' }, options.title);
+    const closeButton = make('button', { type: 'button', class: 'fd-dialog-close', 'aria-label': labels.close }, '×');
+    const body = make('div', { class: 'fd-form-dialog-body' });
+    const discard = make('button', { type: 'button', class: 'fd-button' }, labels.discard);
+    const saveClose = make('button', { type: 'button', class: 'fd-button fd-button-primary' }, labels.saveClose);
+    const box = make('div', {
+        // Its own tokens and skin: the dialog sits outside the page that opened it.
+        class: `fd-theme fd-form-dialog fd-size-${options.size ?? 'medium'}`,
+        'data-fd-skin': options.skin ?? 'underline',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-labelledby': title.id,
+        tabindex: '-1',
+    });
+    if (options.dir)
+        box.setAttribute('dir', options.dir);
+    box.append(make('div', { class: 'fd-form-dialog-head' }), body, make('div', { class: 'fd-actions fd-actions-end fd-form-dialog-foot' }));
+    box.firstElementChild?.append(title, closeButton);
+    box.lastElementChild?.append(discard, saveClose);
+    const backdrop = make('div', { class: 'fd-dialog-backdrop fd-form-dialog-backdrop' });
+    backdrop.append(box);
+    container.append(backdrop);
+    const handle = mountViewer(body, { ...options, showActions: false });
+    let done = false;
+    if (options.recompute)
+        recalculate(handle.form, options.page.fields, options.recompute, () => done);
+    const focusables = () => [...box.querySelectorAll(FOCUSABLE)].filter((element) => !element.closest('[hidden], [inert]') && !element.disabled);
+    // Into the dialog: its first field, once the record is in, or the dialog itself meanwhile.
+    const firstField = () => body.querySelector('input:not([type="hidden"]), select, textarea, [contenteditable="true"]');
+    (firstField() ?? box).focus();
+    void handle.form.settled().then(() => {
+        if (doc.activeElement === box || !box.contains(doc.activeElement))
+            firstField()?.focus();
+    });
+    return new Promise((resolve) => {
+        const close = (saved) => {
+            if (done)
+                return;
+            done = true;
+            const state = handle.form.getState();
+            // The form never changes its values in place, so these are safe to hand back.
+            const result = { saved, recordId: state.recordId ?? null, values: state.values };
+            handle.destroy();
+            backdrop.remove();
+            opener?.focus();
+            resolve(result);
+        };
+        saveClose.addEventListener('click', async () => {
+            saveClose.disabled = true;
+            const accepted = options.mode === 'values' ? handle.check() : await handle.save();
+            saveClose.disabled = false;
+            if (accepted)
+                close(true);
+        });
+        discard.addEventListener('click', () => close(false));
+        closeButton.addEventListener('click', () => close(false));
+        box.addEventListener('keydown', (event) => {
+            // A key a field used itself (Escape closing a list) is not the dialog's.
+            if (event.defaultPrevented)
+                return;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                close(false);
+            }
+            else if (event.key === 'Tab') {
+                const all = focusables();
+                if (!all.length)
+                    return;
+                const first = all[0];
+                const last = all[all.length - 1];
+                if (event.shiftKey && doc.activeElement === first) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (!event.shiftKey && doc.activeElement === last) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            }
+        });
+    });
+}
+/** Each change of the values asks for them recalculated, and shows the answer unless they changed again meanwhile. */
+function recalculate(form, fields, recompute, closed) {
+    let seen = JSON.stringify(form.getState().values);
+    let writing = false;
+    form.subscribe(() => {
+        const values = form.getState().values;
+        const now = JSON.stringify(values);
+        if (writing || now === seen)
+            return;
+        seen = now;
+        recompute(values).then((next) => {
+            if (closed() || JSON.stringify(form.getState().values) !== now)
+                return; // a newer answer is on its way
+            writing = true;
+            for (const [name, value] of Object.entries(next)) {
+                if (name in fields && JSON.stringify(values[name] ?? null) !== JSON.stringify(value ?? null))
+                    form.setValue(name, value);
+            }
+            writing = false;
+            seen = JSON.stringify(form.getState().values);
+        }, () => undefined);
+    });
+}
+/**
+ * A searchable list in a dialog, for "Search more…": every record the field may
+ * point to, narrowed as the person types, picked with a click or the keyboard.
+ * Resolves with the record picked, or null when closed.
+ */
+export function openSearchDialog(options) {
+    const doc = options.container?.ownerDocument ?? document;
+    const container = options.container ?? doc.body;
+    const opener = doc.activeElement instanceof doc.defaultView.HTMLElement ? doc.activeElement : null;
+    const labels = VIEWER_LABELS[options.locale ?? 'en'];
+    const words = WIDGET_LABELS[options.locale ?? 'en'];
+    const id = `fd-dialog-${++dialogs}`;
+    const make = (tag, attrs = {}, text) => {
+        const element = doc.createElement(tag);
+        for (const [name, value] of Object.entries(attrs))
+            element.setAttribute(name, value);
+        if (text !== undefined)
+            element.textContent = text;
+        return element;
+    };
+    const title = make('h2', { id: `${id}-title`, class: 'fd-form-dialog-title' }, options.title);
+    const closeButton = make('button', { type: 'button', class: 'fd-dialog-close', 'aria-label': labels.close }, '×');
+    const query = make('input', { type: 'search', class: 'fd-input', 'aria-label': words.search, placeholder: words.search, 'aria-controls': `${id}-list`, autocomplete: 'off' });
+    const list = make('ul', { id: `${id}-list`, class: 'fd-search-list', role: 'listbox', 'aria-labelledby': title.id });
+    const cancel = make('button', { type: 'button', class: 'fd-button' }, labels.cancel);
+    const box = make('div', {
+        class: `fd-theme fd-form-dialog fd-search-dialog fd-size-small`,
+        'data-fd-skin': options.skin ?? 'underline',
+        role: 'dialog',
+        'aria-modal': 'true',
+        'aria-labelledby': title.id,
+    });
+    if (options.dir)
+        box.setAttribute('dir', options.dir);
+    const head = make('div', { class: 'fd-form-dialog-head' });
+    head.append(title, closeButton);
+    const body = make('div', { class: 'fd-form-dialog-body fd-search-body' });
+    body.append(query, list);
+    const foot = make('div', { class: 'fd-actions fd-actions-end fd-form-dialog-foot' });
+    foot.append(cancel);
+    box.append(head, body, foot);
+    const backdrop = make('div', { class: 'fd-dialog-backdrop fd-form-dialog-backdrop' });
+    backdrop.append(box);
+    container.append(backdrop);
+    query.focus();
+    return new Promise((resolve) => {
+        let found = [];
+        let active = -1;
+        let asked = 0;
+        let timer;
+        const close = (picked) => {
+            clearTimeout(timer);
+            asked++;
+            backdrop.remove();
+            opener?.focus();
+            resolve(picked);
+        };
+        const draw = () => {
+            list.replaceChildren(...found.map((record, i) => {
+                const option = make('li', { id: `${id}-option-${i}`, role: 'option', class: `fd-option${i === active ? ' fd-active' : ''}`, 'aria-selected': String(i === active) }, record.label);
+                option.addEventListener('click', () => close(record));
+                return option;
+            }));
+            if (!found.length)
+                list.append(make('li', { class: 'fd-empty' }, words.noResults));
+            if (active >= 0)
+                query.setAttribute('aria-activedescendant', `${id}-option-${active}`);
+            else
+                query.removeAttribute('aria-activedescendant');
+        };
+        const look = () => {
+            clearTimeout(timer);
+            const mine = ++asked;
+            timer = setTimeout(async () => {
+                const records = await options.search(query.value, 80).catch(() => []);
+                if (mine !== asked)
+                    return; // a newer search, or the dialog closed
+                found = records;
+                active = -1;
+                draw();
+            }, 180);
+        };
+        query.addEventListener('input', look);
+        query.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (!found.length)
+                    return;
+                active = (active + (event.key === 'ArrowDown' ? 1 : -1) + found.length) % found.length;
+                draw();
+                list.children[active]?.scrollIntoView?.({ block: 'nearest' });
+            }
+            else if (event.key === 'Enter' && active >= 0) {
+                event.preventDefault();
+                close(found[active]);
+            }
+        });
+        cancel.addEventListener('click', () => close(null));
+        closeButton.addEventListener('click', () => close(null));
+        box.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                close(null);
+            }
+        });
+        look();
+    });
+}
+//# sourceMappingURL=dialog.mjs.map