@threadlabs/looma 0.1.23 → 0.1.25

package/dist/collection/components/ui-multi-combobox/ui-multi-combobox.js

@@ -0,0 +1,503 @@
+import { Host, h } from "@stencil/core";
+/** A multi-value combobox with removable, customizable selected items. */
+export class UIMultiCombobox {
+    host;
+    label = '';
+    placeholder = '';
+    items = [];
+    config = {};
+    query;
+    defaultQuery = '';
+    disabled = false;
+    readOnly = false;
+    required = false;
+    name = '';
+    queryChange;
+    addItem;
+    removeItem;
+    createItem;
+    optionsChange;
+    raw = '';
+    rows = [];
+    combobox;
+    filteredConfig;
+    filteredConfigSource;
+    filteredSelection = '';
+    componentWillLoad() { this.raw = this.query ?? this.defaultQuery; }
+    syncQuery() {
+        if (this.query !== undefined)
+            this.raw = this.query;
+    }
+    get selectedValues() { return new Set(this.items.map(item => item.value)); }
+    get comboboxConfig() {
+        const selectionKey = this.items.map(item => item.value).join('\u0000');
+        if (this.filteredConfig && this.filteredConfigSource === this.config && this.filteredSelection === selectionKey) {
+            return this.filteredConfig;
+        }
+        const ownerFilter = this.config.filter;
+        const selected = this.selectedValues;
+        this.filteredConfigSource = this.config;
+        this.filteredSelection = selectionKey;
+        this.filteredConfig = {
+            ...this.config,
+            filter: (option, query, context) => !selected.has(option.value)
+                && (ownerFilter ? ownerFilter(option, query, context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase())),
+        };
+        return this.filteredConfig;
+    }
+    setQuery(query, trigger) {
+        if (this.query === undefined)
+            this.raw = query;
+        this.queryChange.emit({ query, display: query, trigger });
+    }
+    onQueryChange = (event) => {
+        event.stopPropagation();
+        this.setQuery(event.detail.query, event.detail.trigger);
+    };
+    onOptionsChange = (event) => {
+        event.stopPropagation();
+        this.rows = event.detail;
+        this.optionsChange.emit(event.detail);
+    };
+    onValueChange = (event) => {
+        event.stopPropagation();
+        if (event.detail.kind !== 'selection' || !event.detail.option)
+            return;
+        const item = event.detail.option;
+        this.addItem.emit({ item, index: this.items.length, trigger: event.detail.trigger });
+        // ui-combobox emits its selection value before the matching label query.
+        // Clear after both owner notifications so the stale label cannot win.
+        queueMicrotask(() => this.setQuery('', event.detail.trigger));
+    };
+    onCreateEntry = (event) => {
+        event.stopPropagation();
+        const query = event.detail.query.trim();
+        if (!query)
+            return;
+        this.setQuery('', event.detail.trigger);
+        this.createItem.emit({ query, trigger: event.detail.trigger });
+    };
+    remove(index, trigger) {
+        const item = this.items[index];
+        if (!item || item.disabled || this.disabled || this.readOnly)
+            return;
+        this.removeItem.emit({ item, index, trigger });
+        requestAnimationFrame(() => {
+            const buttons = this.host.shadowRoot?.querySelectorAll('[part="item"]') ?? [];
+            const next = buttons[Math.min(index, buttons.length - 1)] ?? buttons[index - 1];
+            if (next && next.dataset.value !== item.value)
+                next.focus();
+            else
+                void this.focusInput();
+        });
+    }
+    focusItem(index) {
+        this.host.shadowRoot?.querySelectorAll('[part="item"]')[index]?.focus();
+    }
+    onItemKeyDown = (event, index) => {
+        if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.focusItem(Math.max(0, index - 1));
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (index === this.items.length - 1)
+                void this.focusInput();
+            else
+                this.focusItem(index + 1);
+        }
+        else if (event.key === 'Backspace' || event.key === 'Delete') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.remove(index, 'keyboard');
+        }
+    };
+    onKeyDown = (event) => {
+        if (event.defaultPrevented || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+            return;
+        const input = event.composedPath().find(node => node instanceof HTMLInputElement);
+        if (!input || this.raw || (input.selectionStart ?? 0) > 0)
+            return;
+        if (event.key === 'ArrowLeft' && this.items.length) {
+            event.preventDefault();
+            this.focusItem(this.items.length - 1);
+        }
+        else if (event.key === 'Backspace' && this.items.length) {
+            event.preventDefault();
+            this.remove(this.items.length - 1, 'keyboard');
+        }
+    };
+    async focusInput() { await this.combobox?.focusInput(); }
+    render() {
+        return h(Host, { key: 'bdb03a28ea25b22340dc56381fa45031f0c47c27', onKeyDown: this.onKeyDown }, h("ui-combobox", { key: '51ba1ab747af9f216223bd71f524db79ef57b8a9', ref: element => this.combobox = element, label: this.label, "label-visibility": "sr-only", placeholder: this.placeholder, name: this.name, value: null, query: this.raw, config: this.comboboxConfig, size: "sm", disabled: this.disabled, readOnly: this.readOnly, required: this.required, "onQuery-change": this.onQueryChange, "onValue-change": this.onValueChange, "onCreate-entry": this.onCreateEntry, "onOptions-change": this.onOptionsChange }, h("div", { key: 'ebd8fd8e62db3c2e47b1bfc7558c01e7e1abb8ba', slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: event => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map(option => h("span", { slot: `option-${option.id}` }, h("slot", { name: `option-${option.id}` }, option.label))), h("span", { key: '99cd9848130de37e52a4f735c95e3754dbc64691', slot: "create" }, h("slot", { key: '84cc7c14716819bd968bdfcb9213fe3887a5c2b9', name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: '1660eb03425dea4d36797e416d91b051531a470d', slot: "loading" }, h("slot", { key: '10c979403e89331e8bdf69ff2db3f5bc272b2685', name: "loading" }, "Loading suggestions\u2026")), h("span", { key: '1c862b6c5906aa3ec5fc874de5a5119e13ef9422', slot: "empty" }, h("slot", { key: '1c70a1beb7321d3b2be888b3826a1dba2f6fcc70', name: "empty" }, "No suggestions.")), h("span", { key: '4b4da5cb8b22543b90ff9230191bbb2e81d16408', slot: "error" }, h("slot", { key: 'a371a5ce50895562ebc6e55227e4a4834af37f3d', name: "error" }, "Unable to load suggestions.")), h("div", { key: 'f82e38165d90bdbfa8413c0a561abf7ab5da0183', slot: "footer" }, h("slot", { key: '6c0bd2b89428832f4cb485f5d2e30a792859ba9e', name: "footer" }))));
+    }
+    static get is() { return "ui-multi-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-multi-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-multi-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "readonly MultiComboboxItem[]",
+                    "resolved": "readonly MultiComboboxItem[]",
+                    "references": {
+                        "MultiComboboxItem": {
+                            "location": "import",
+                            "path": "../../field/multi-combobox",
+                            "id": "src/field/multi-combobox.ts::MultiComboboxItem",
+                            "referenceLocation": "MultiComboboxItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "config": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboboxConfig",
+                    "resolved": "ComboboxConfig",
+                    "references": {
+                        "ComboboxConfig": {
+                            "location": "import",
+                            "path": "../../field/combobox",
+                            "id": "src/field/combobox.ts::ComboboxConfig",
+                            "referenceLocation": "ComboboxConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "query": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "query"
+            },
+            "defaultQuery": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-query",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "raw": {},
+            "rows": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "queryChange",
+                "name": "query-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ query: string; display: string; trigger: 'keyboard' | 'pointer' | 'programmatic' }",
+                    "resolved": "{ query: string; display: string; trigger: \"keyboard\" | \"pointer\" | \"programmatic\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "addItem",
+                "name": "add-item",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MultiComboboxItemChange",
+                    "resolved": "MultiComboboxItemChange",
+                    "references": {
+                        "MultiComboboxItemChange": {
+                            "location": "import",
+                            "path": "../../field/multi-combobox",
+                            "id": "src/field/multi-combobox.ts::MultiComboboxItemChange",
+                            "referenceLocation": "MultiComboboxItemChange"
+                        }
+                    }
+                }
+            }, {
+                "method": "removeItem",
+                "name": "remove-item",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MultiComboboxItemChange",
+                    "resolved": "MultiComboboxItemChange",
+                    "references": {
+                        "MultiComboboxItemChange": {
+                            "location": "import",
+                            "path": "../../field/multi-combobox",
+                            "id": "src/field/multi-combobox.ts::MultiComboboxItemChange",
+                            "referenceLocation": "MultiComboboxItemChange"
+                        }
+                    }
+                }
+            }, {
+                "method": "createItem",
+                "name": "create-item",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MultiComboboxCreate",
+                    "resolved": "MultiComboboxCreate",
+                    "references": {
+                        "MultiComboboxCreate": {
+                            "location": "import",
+                            "path": "../../field/multi-combobox",
+                            "id": "src/field/multi-combobox.ts::MultiComboboxCreate",
+                            "referenceLocation": "MultiComboboxCreate"
+                        }
+                    }
+                }
+            }, {
+                "method": "optionsChange",
+                "name": "options-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "readonly ComboboxOption[]",
+                    "resolved": "readonly ComboboxOption<unknown>[]",
+                    "references": {
+                        "ComboboxOption": {
+                            "location": "import",
+                            "path": "../../field/combobox",
+                            "id": "src/field/combobox.ts::ComboboxOption",
+                            "referenceLocation": "ComboboxOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "query",
+                "methodName": "syncQuery"
+            }];
+    }
+}

package/dist/collection/components/ui-popover/ui-popover.css

@@ -1,16 +1,25 @@
 :host {
   --ui-popover-viewport-gap: var(--ui-space-2, 0.5rem);
-  padding: var(--ui-space-3);
-  background: var(--ui-surface-elevated);
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-3);
-  box-shadow: var(--ui-shadow-lg);
+  box-sizing: border-box;
   max-inline-size: min(
     20rem,
     calc(100vw - (var(--ui-popover-viewport-gap) * 2))
   );
   max-block-size: calc(100dvh - (var(--ui-popover-viewport-gap) * 2));
   overflow: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.popover__surface {
+  box-sizing: border-box;
+  padding: var(--ui-space-3);
+  background: var(--ui-surface-elevated);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-3);
 }
 
 :host(:not([data-open])) {

package/dist/collection/components/ui-popover/ui-popover.js

@@ -1,10 +1,12 @@
 import { Host, h } from "@stencil/core";
 import { openOverlay, closeOverlay, requestTopOverlayClose } from "../../overlay/manager";
 import { dispatchDetail } from "../../utils/events";
+import { controlledOrDefault, isControlled } from "../../utils/controlled-state";
 import { createAnchoredSurface, } from "../../overlay/positioning";
 export class UIPopover {
     host;
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     /** Optional id of the element this popover follows in the top layer. */
     for;
@@ -14,7 +16,8 @@ export class UIPopover {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     onOpenChange() {
         this.syncOverlay();
@@ -73,8 +76,7 @@ export class UIPopover {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
         this.syncOverlay();
@@ -89,7 +91,8 @@ export class UIPopover {
         this.syncOverlay();
     }
     handleRequestClose(reason, trigger) {
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+            this.internalOpen = false;
         dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -102,7 +105,7 @@ export class UIPopover {
         }
     };
     render() {
-        return (h(Host, { key: 'cd957cb9fd5d1c05da7729a16d4cb229bc1deffa', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: 'd14960a1471948120f7173e18adae8d86e4fabb7' })));
+        return (h(Host, { key: 'a4986ace0f3c586774a549cb844287b28ccd0531', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("div", { key: '8f2c589916d06138ef72bfe0d039893b3c59a7cc', class: "popover__surface" }, h("slot", { key: 'ee70e7dcc53a99b5c80e56862a6eb00edcfcf912' }))));
     }
     static get is() { return "ui-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -127,16 +130,15 @@ export class UIPopover {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controlled open state. Omit it to use defaultOpen and local interaction state."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "open",
-                "defaultValue": "false"
+                "attribute": "open"
             },
             "defaultOpen": {
                 "type": "boolean",