stimeo-ui 0.18.0 → 0.18.1

package/dist/index.js

@@ -5735,6 +5735,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     return this.hasDialogTarget && !this.dialogTarget.hidden;
   }
   #onGlobalKeydown = (event) => {
+    if (event.defaultPrevented) return;
     if (this.#composition.isComposing(event) || !this.#matchesHotkey(event)) return;
     event.preventDefault();
     this.toggle();
@@ -9037,6 +9038,8 @@ var DismissibleController = class extends Controller {
       if (document.activeElement === candidate) return;
     }
     document.body.focus();
+    const remaining = document.activeElement;
+    if (remaining instanceof HTMLElement && root.contains(remaining)) remaining.blur();
   }
   *#focusFallbacks(root) {
     const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;
@@ -9482,6 +9485,7 @@ var EditableController = class extends Controller {
     this.#revertValue = null;
   }
   onDisplayKeydown(event) {
+    if (event.defaultPrevented) return;
     if (event.key === "F2") {
       event.preventDefault();
       this.edit();
@@ -11666,6 +11670,27 @@ var InputMaskController = class extends Controller {
   #textBeforeComposition = "";
   #formatted = null;
   #shown = { result: null, empty: true };
+  #edits = new ListenerSet();
+  #onBeforeInput = (event) => {
+    const data = event.data;
+    if (event.defaultPrevented || !event.cancelable || event.inputType !== "insertText" || data === null || Array.from(data).length !== 1 || !this.#started || this.#composition.isComposing(event))
+      return;
+    const input = this.element;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    if (start === null || end === null || start === end || input.readOnly || input.disabled || inheritsFieldsetDisabled(input) || !input.isConnected || !this.application.element.contains(input) || !(input.getAttribute("data-controller") ?? "").split(/\s+/).includes(this.identifier) || this.patternValue === "" || this.#formatted !== this.#declared || input.value !== this.#lastValue)
+      return;
+    const prefix = applyMask(input.value.slice(0, start), this.patternValue, this.#tokens);
+    for (const character of Array.from(this.patternValue).slice(prefix.tokenFlags.length)) {
+      const token = this.#tokens.get(character);
+      if (token) {
+        if (acceptedForm(token, data) === null) event.preventDefault();
+        return;
+      }
+      if (halfWidthChar(data) === halfWidthChar(character)) return;
+    }
+    event.preventDefault();
+  };
   #composition = new CompositionTracker({
     onStart: () => {
       this.#textBeforeComposition = this.element.value;
@@ -11701,6 +11726,7 @@ var InputMaskController = class extends Controller {
     this.#morph.observe(this.element);
     this.#started = true;
     this.#composition.observe(this.element);
+    this.#edits.add(this.element, "beforeinput", this.#onBeforeInput);
     if (!this.unmaskToHiddenValue) this.#withdraw();
     if (this.#composition.isComposing()) {
       this.#reformat("reconcile");
@@ -11715,6 +11741,7 @@ var InputMaskController = class extends Controller {
   disconnect() {
     this.#morph.disconnect();
     this.#started = false;
+    this.#edits.dispose();
     this.#composition.disconnect();
     this.#adoption.clearAll();
     this.#gate.disconnected(this, () => this.#retractRaw());
@@ -13885,7 +13912,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     focusAfterEnd: () => this.#focusInput()
   });
   #listeners = new ListenerSet();
+  #tab = null;
   connect() {
+    this.#tab = null;
     this.#tabindex.reclaim(this.element);
     this.#rows.connect();
     this.#normalizeSelection([]);
@@ -13897,6 +13926,9 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#selectionValues = this.#values;
     this.#syncFields();
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onTab);
+    for (const type of ["focus", "keydown", "keyup", "pointerdown"])
+      this.#listeners.add(document, type, this.#trackTab, { capture: true });
     this.#connected = true;
     this.#reconcile.observe(this.element);
   }
@@ -13918,6 +13950,7 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#composition.disconnect();
     this.#chipRow.disconnect();
     this.#listeners.dispose();
+    this.#tab = null;
     this.#releaseTabindex();
   }
   optionTargetConnected() {
@@ -14087,7 +14120,11 @@ var MultiSelectController = class _MultiSelectController extends Controller {
     this.#setActive(visible[0] ?? null);
     this.dispatch("filter", { detail: { query } });
   }
-  open() {
+  open(event) {
+    if (event instanceof FocusEvent && event === this.#tab) {
+      this.#tab = null;
+      return;
+    }
     if (!this.hasListTarget || !this.hasInputTarget) {
       this.#reflectEmpty();
       return;
@@ -14174,6 +14211,16 @@ var MultiSelectController = class _MultiSelectController extends Controller {
         break;
     }
   }
+  #onTab = (event) => {
+    if (event.key !== "Tab" || event.defaultPrevented || event.isComposing || !this.hasTagsTarget || !this.tagsTarget.contains(event.target))
+      return;
+    this.#tab = event;
+    this.close();
+  };
+  #trackTab = (event) => {
+    const key = this.#tab;
+    this.#tab = event.type === "focus" && key instanceof KeyboardEvent && !key.defaultPrevented && event.target === this.inputTargets[0] ? event : null;
+  };
   toggleOption(source) {
     const { event, host, origin, reason } = actionSource(source);
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
@@ -17986,6 +18033,7 @@ var PointerDragController = class _PointerDragController extends Controller {
   #tabindex = new TabindexLoan("0", this.identifier, { preserveFocus: true });
   #pointer = null;
   #keyboard = null;
+  #connected = false;
   #keyboardFocusSession = null;
   #listeners = new ListenerSet();
   #shadowFocus = new ListenerSet();
@@ -17999,6 +18047,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     this.#reflectSession();
   });
   connect() {
+    this.#connected = true;
     this.#morphRender.observe(this.element);
     if (!this.#pointer && !this.#keyboard) this.#followOutput = null;
     this.#gate.cancel();
@@ -18016,6 +18065,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
   }
   disconnect() {
+    this.#connected = false;
     this.#morphRender.disconnect();
     this.#listeners.dispose();
     this.#shadowFocus.dispose();
@@ -18042,7 +18092,9 @@ var PointerDragController = class _PointerDragController extends Controller {
   }
   handleTargetDisconnected(handle) {
     this.#restoreHandle(handle);
-    if (this.element.contains(handle)) return;
+    if (!this.#connected) return;
+    if (this.element.contains(handle) && (this.handleTargets.includes(handle) || DetachGate.isDetached(this)))
+      return;
     const interrupted = this.#pointer?.handle === handle && this.#pointer.started ? this.#pointer.pointerType : this.#keyboard?.handle === handle ? "keyboard" : null;
     if (this.#pointer?.handle === handle) this.#endPointerSession();
     if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();
@@ -18397,6 +18449,7 @@ var PopoverController = class extends Controller {
     this.#close("api");
     this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
     this.#listeners.add(this.element, "focusout", this.#onFocusOut);
+    this.#listeners.add(document, "focusin", this.#onDocumentFocusIn, { capture: true });
     this.#connected = true;
     this.#reporting = true;
   }
@@ -18503,6 +18556,14 @@ var PopoverController = class extends Controller {
     if (!(next instanceof Node) || this.element.contains(next)) return;
     this.#close("focus");
   };
+  #onDocumentFocusIn = (event) => {
+    if (!this.#closable) return;
+    const target = event.target;
+    if (!(target instanceof Node) || target === document.body || this.element.contains(target)) {
+      return;
+    }
+    this.#close("focus");
+  };
   get #isOpen() {
     return this.hasPanelTarget && !this.panelTarget.hidden;
   }