@threadlabs/looma 0.10.4 → 0.10.6

package/components/ui-combobox/ui-combobox.html

@@ -26,7 +26,9 @@
     >The input's text, when the consumer controls it. Once set, the consumer owns the text: typing reports query-change, and the input returns to query unless
       query is updated to match. Leave it unset to let the combobox manage its own text, showing the chosen option's label.</prop>
     <prop name="allowFreeText" type="boolean" default="false">Allows values that do not match an authored option.</prop>
-    <prop name="allowCreate" type="boolean" default="false">Offers the current query as a new option.</prop>
+    <prop name="allowCreate" type="boolean" default="false"
+    >Offers the current query as a new option, reported as create-item. When nothing else matches, the offer is highlighted, so Enter creates it; with nothing
+      highlighted, Enter in multiple mode commits the typed text as a token separator does.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Disables the input and every button in the field: the chosen-item badges, the clear and disclosure buttons, and the help button. The list closes and cannot
       be opened, the value cannot be cleared, and a named combobox submits nothing with its form.</prop>

package/components/ui-combobox/ui-combobox.js

@@ -136,6 +136,9 @@ export default function controller(host) {
       // iterator row instead of the option objects it contains.
       host.state.rows = Array.from(groups.values()).flat();
       host.state.loading = false;
+      // When nothing matches what was typed, the offer to create it is the only choice, so it is
+      // the one Enter makes, and it is highlighted as such.
+      if (query && !host.state.rows.some((row) => !row.disabled) && canCreate()) host.state.active = host.state.rows.length;
       host.dispatch("options-change", host.state.rows);
     };
     applyOptions(current.options);
@@ -385,6 +388,9 @@ export default function controller(host) {
     else if (["Home", "End"].includes(event.key) && host.state.expanded && host.state.active >= 0) { event.preventDefault(); move(event.key); }
     else if (event.key === "Enter" && host.state.expanded) {
       if (host.state.active >= 0) { event.preventDefault(); choose(host.state.active, "keyboard"); }
+      // With nothing highlighted, Enter commits what was typed, as a token separator does.
+      else if (host.state.multiple && String(host.state.raw).trim()) { event.preventDefault(); commitQuery("keyboard"); }
+      else if (canCreate()) { event.preventDefault(); choose((host.state.rows ?? []).length, "keyboard"); }
       else if (config().allowFreeText) { event.preventDefault(); commit(null, host.state.raw, null, "free-entry", "keyboard"); close(); }
     }
   };
@@ -455,7 +461,17 @@ export default function controller(host) {
     input.value = host.state.display;
     resetValidation();
   });
-  const observer = new MutationObserver(relabel);
+  // Options can change while the list is open, as when a consumer adds the option it just created;
+  // the open list shows them at once rather than at the next keystroke.
+  const optionsKey = () => JSON.stringify((config().options ?? []).map((row) => [row.value, row.label, row.disabled]));
+  let lastOptionsKey = optionsKey();
+  const observer = new MutationObserver(() => {
+    relabel();
+    const key = optionsKey();
+    if (key === lastOptionsKey) return;
+    lastOptionsKey = key;
+    if (host.state.expanded) search(fullSet ? "disclosure" : "options");
+  });
   observer.observe(authored, { childList: true, subtree: true, characterData: true, attributes: true });
   let lastItems = host.state.items;
   if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
@@ -464,6 +480,12 @@ export default function controller(host) {
     if (host.state.items !== lastItems) {
       lastItems = host.state.items;
       if (Array.isArray(lastItems)) host.state.internalItems = lastItems;
+      // The list shows the selection; a consumer that adds or removes an item later (after creating
+      // it, say) is reflected at once rather than at the next search.
+      if (host.state.multiple && host.state.rows?.length) {
+        const selected = selectedValues();
+        host.state.rows = host.state.rows.map((row) => ({ ...row, selected: selected.has(row.value) }));
+      }
     }
     if (host.state.value !== lastValue) { lastValue = host.state.value; syncValue(); }
     if (host.state.query !== lastQuery) { lastQuery = host.state.query; syncQuery(); }

package/components/ui-tree-item/ui-tree-item.html

@@ -380,19 +380,23 @@
       }
     }
 
+    /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
+       empty column, right before the icon; a branch's disclosure is there, so its handle sits just
+       outside the row. It is bare until pointed at: a resting surface behind it read as a faint
+       patch rather than as a control. */
     .drag-handle {
       position: absolute;
       z-index: 2;
       inset-block-start: 50%;
-      inset-inline-start: -22px;
-      inline-size: 20px;
-      block-size: 32px;
+      inset-inline-start: 0;
+      inline-size: var(--_tree-disclosure-size);
+      block-size: 24px;
       display: grid;
       place-items: center;
-      padding: 7px 3px;
+      padding: 5px 2px;
       color: var(--ui-text-muted);
-      background: var(--ui-surface-elevated);
-      border: 1px solid transparent;
+      background: transparent;
+      border: 0;
       border-radius: var(--ui-radius-sm);
       cursor: grab;
       /* Hidden until the row is hovered, but always hittable: the handle sits outside the row, and moving
@@ -409,6 +413,16 @@
       opacity: 1;
     }
 
+    :host-state([isContainer]) > .row > .drag-handle {
+      inset-inline-start: calc(-1 * var(--_tree-disclosure-size) - 2px);
+    }
+
+    .drag-handle:hover,
+    .drag-handle:focus-visible {
+      color: var(--ui-text-primary);
+      background: var(--ui-surface-hover);
+    }
+
     .drag-handle:active {
       cursor: grabbing;
     }