dap-design-system 0.38.21 → 0.38.23

package/dist/dds.d.ts

@@ -760,10 +760,20 @@ declare class ComboboxBaseElement extends GenericFormElement {
     selectedItem: any;
     currentItem: any;
     selectedText: string;
+    private optionListObserver;
     static readonly styles: CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
+    private setupOptionListObserver;
+    private updateComboboxState;
+    private cleanupOptionListObserver;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     get isAutoComplete(): boolean;
+    /**
+     * Get all option items directly from the combobox element
+     * This is more reliable for dynamic updates than the option list component
+     */
+    private getComboboxOptions;
     get isOpenOnEmpty(): boolean;
     get isOpenOnAutocomplete(): boolean;
     get shouldHideClearIcon(): boolean;
@@ -775,7 +785,7 @@ declare class ComboboxBaseElement extends GenericFormElement {
     private handleSelectedItemChange;
     private handleTextSearch;
     private handleArrowKeys;
-    handleKeyDown: (event: KeyboardEvent) => Promise<void | 0>;
+    handleKeyDown: (event: KeyboardEvent) => Promise<false | void | 0>;
     handleInput: (event: InputEvent) => Promise<void>;
     clearSelection(): Promise<void>;
     handleListKeyDown: (event: CustomEvent) => void;

package/dist/dds.js

@@ -6359,11 +6359,10 @@ var Rv = Object.defineProperty, mt = (t, e, i, o) => {
 };
 const Tn = class Tn extends ve {
   constructor() {
-    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.handleClick = () => {
-      var e;
-      !((e = this.optionList) != null && e.getAllOptions().length) && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
+    super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.optionListObserver = null, this.handleClick = () => {
+      !this.getComboboxOptions().length && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
     }, this.handleKeyDown = (e) => V(this, null, function* () {
-      var i, o;
+      var i;
       if (e.key !== "Tab") {
         if (e.key === "Enter")
           return this.handleEnterKey(e);
@@ -6371,12 +6370,17 @@ const Tn = class Tn extends ve {
           return this.hideDropDown(), this.focus();
         if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && this.isAutoComplete)
           return this.handleArrowKeys(e);
-        yield this.updateComplete, yield (i = this.optionList) == null ? void 0 : i.updateComplete, (this.openOnEmpty || (o = this.optionList) != null && o.getAllOptions().length) && this.showDropDown();
+        if (this.isAutoComplete && ((i = this.triggerInput) != null && i.value) && !this.opened) {
+          const o = this.getComboboxOptions().length > 0;
+          (this.openOnEmpty || o) && this.showDropDown();
+        }
       }
     }), this.handleInput = (e) => V(this, null, function* () {
-      var o, r;
       const i = this.triggerInput;
-      e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = i.value, this.search && (this.value = i.value)) : this.search ? (this.selectedText = i.value, this.value = i.value) : i.value === "" && e.inputType === "deleteContentBackward" && this.clearSelection(), this.emit("dds-input", { input: i.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), yield this.updateComplete, yield (o = this.optionList) == null ? void 0 : o.updateComplete, !this.openOnEmpty && !((r = this.optionList) != null && r.getAllOptions().length) && this.hideDropDown();
+      if (e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = i.value, this.search && (this.value = i.value)) : this.search ? (this.selectedText = i.value, this.value = i.value) : i.value === "" && e.inputType === "deleteContentBackward" && this.clearSelection(), this.emit("dds-input", { input: i.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), this.isAutoComplete && i.value && !this.opened) {
+        const o = this.getComboboxOptions().length > 0;
+        (this.openOnEmpty || o) && this.showDropDown();
+      }
     }), this.handleListKeyDown = (e) => {
       e.detail.key === "Escape" && (this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus());
     }, this.handleDocumentMouseDown = (e) => {
@@ -6405,18 +6409,55 @@ const Tn = class Tn extends ve {
   firstUpdated(e) {
     return V(this, null, function* () {
       var i, o;
-      qt(Tn.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, this.value && (this.selectedItem = (i = this.optionList) == null ? void 0 : i.getAllOptions().find((r) => r.value === this.value), this.selectedText = ((o = this.selectedItem) == null ? void 0 : o.optionText) || "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = this.value));
+      qt(Tn.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, this.value && (this.selectedItem = (i = this.optionList) == null ? void 0 : i.getAllOptions().find((r) => r.value === this.value), this.selectedText = ((o = this.selectedItem) == null ? void 0 : o.optionText) || "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = this.value)), this.setupOptionListObserver();
+    });
+  }
+  setupOptionListObserver() {
+    this.optionList && (this.optionListObserver && this.optionListObserver.disconnect(), this.optionListObserver = new MutationObserver((e) => {
+      let i = !1;
+      e.forEach((o) => {
+        if (o.type === "childList") {
+          const r = Array.from(o.addedNodes).some(
+            (s) => s.nodeName === "DAP-DS-OPTION-ITEM"
+          ), a = Array.from(o.removedNodes).some(
+            (s) => s.nodeName === "DAP-DS-OPTION-ITEM"
+          );
+          (r || a) && (i = !0);
+        }
+      }), i && this.updateComboboxState();
+    }), this.optionListObserver.observe(this, {
+      childList: !0,
+      subtree: !0
+    }));
+  }
+  updateComboboxState() {
+    requestAnimationFrame(() => {
+      var o;
+      const e = this.getComboboxOptions().length > 0, i = ((o = this.triggerInput) == null ? void 0 : o.value) && this.triggerInput.value.trim() !== "";
+      e && i && this.isAutoComplete ? this.opened || this.showDropDown() : !e && !this.openOnEmpty && i && this.hideDropDown();
     });
   }
+  cleanupOptionListObserver() {
+    this.optionListObserver && (this.optionListObserver.disconnect(), this.optionListObserver = null);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.cleanupOptionListObserver();
+  }
   attributeChangedCallback(e, i, o) {
     e === "value" && !o && this.clearSelection(), super.attributeChangedCallback(e, i, o);
   }
   get isAutoComplete() {
     return this.searchMode === "autocomplete" || this.searchMode === "manual";
   }
+  /**
+   * Get all option items directly from the combobox element
+   * This is more reliable for dynamic updates than the option list component
+   */
+  getComboboxOptions() {
+    return Array.from(this.querySelectorAll("dap-ds-option-item"));
+  }
   get isOpenOnEmpty() {
-    var e;
-    return this.openOnEmpty || !this.openOnEmpty && ((e = this.optionList) == null ? void 0 : e.getAllOptions().length) > 0;
+    return this.openOnEmpty || !this.openOnEmpty && this.getComboboxOptions().length > 0;
   }
   get isOpenOnAutocomplete() {
     return this.isAutoComplete && this.isOpenOnEmpty;
@@ -6448,8 +6489,7 @@ const Tn = class Tn extends ve {
   }
   handleDefaultEnter() {
     return V(this, null, function* () {
-      var e;
-      return this.opened ? this.hideDropDown() : (this.openOnEmpty || ((e = this.optionList) == null ? void 0 : e.getAllOptions().length)) && this.showDropDown();
+      return this.opened ? this.hideDropDown() : (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete) && this.showDropDown();
     });
   }
   handleSelectedItemChange(e) {
@@ -6464,9 +6504,8 @@ const Tn = class Tn extends ve {
   }
   handleArrowKeys(e) {
     return V(this, null, function* () {
-      var i;
       if (e.preventDefault(), !this.opened)
-        if (this.openOnEmpty || (i = this.optionList) != null && i.getAllOptions().length)
+        if (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete)
           this.showDropDown();
         else
           return;
@@ -6480,8 +6519,7 @@ const Tn = class Tn extends ve {
   }
   showDropDown() {
     return V(this, null, function* () {
-      var e;
-      this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !((e = this.optionList) != null && e.getAllOptions().length) || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
+      this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !this.getComboboxOptions().length && !this.isAutoComplete || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
     });
   }
   hideDropDown() {
@@ -13109,22 +13147,30 @@ const xl = class xl extends $ {
     super.updated(e), e.has("open") && e.get("open") !== void 0 && (this.open ? this.handleOpen() : this.handleCloseAction());
   }
   handleOpen() {
-    this.emit("dds-before-open"), this.scrollLock(!0), this.previouslyFocusedElement = this.getActiveElement(), this.dialog.showModal(), this.dialog.addEventListener(
+    this.emit("dds-before-open", void 0, {
+      cancelable: !0
+    }).defaultPrevented || (this.scrollLock(!0), this.previouslyFocusedElement = this.getActiveElement(), this.dialog.showModal(), this.dialog.addEventListener(
       "transitionend",
       () => {
-        this.emit("dds-opened"), this.focusableElements = this.getFocusableElements(), this.focusableElements.length > 0 && this.focusableElements[0].focus();
+        this.emit("dds-opened", void 0, {
+          cancelable: !0
+        }).defaultPrevented || (this.focusableElements = this.getFocusableElements(), this.focusableElements.length > 0 && this.focusableElements[0].focus());
       },
       { once: !0 }
-    ), this.setAttribute("aria-hidden", "false");
+    ), this.setAttribute("aria-hidden", "false"));
   }
   handleCloseAction() {
-    this.emit("dds-before-close"), this.dialog.close(), this.scrollLock(!1), this.dialog.addEventListener(
+    this.emit("dds-before-close", void 0, {
+      cancelable: !0
+    }).defaultPrevented || (this.dialog.close(), this.scrollLock(!1), this.dialog.addEventListener(
       "transitionend",
       () => {
-        this.emit("dds-closed"), this.previouslyFocusedElement instanceof HTMLElement && this.previouslyFocusedElement.focus();
+        this.emit("dds-closed", void 0, {
+          cancelable: !0
+        }).defaultPrevented || this.previouslyFocusedElement instanceof HTMLElement && this.previouslyFocusedElement.focus();
       },
       { once: !0 }
-    ), this.setAttribute("aria-hidden", "true");
+    ), this.setAttribute("aria-hidden", "true"));
   }
   firstUpdated(e) {
     super.firstUpdated(e), this.open ? (this.setAttribute("aria-hidden", "false"), this.dialog.showModal()) : this.setAttribute("aria-hidden", "true");
@@ -13147,20 +13193,40 @@ const xl = class xl extends $ {
     ).defaultPrevented || this.hide();
   }
   handleCancel(e) {
-    this.closeOnEsc !== "true" && (e.preventDefault(), this.canceled = !0);
+    if (this.closeOnEsc !== "true") {
+      e.preventDefault(), this.canceled = !0;
+      return;
+    }
+    e.preventDefault();
   }
   handleEscClose(e) {
-    if (this.canceled) {
+    if (this.canceled || this.closeOnEsc !== "true") {
       e.preventDefault();
       return;
     }
-    this.open && this.handleClose("esc");
+    e.preventDefault();
   }
   handleOkButton() {
-    this.emit("dds-ok"), this.handleClose("ok-button");
+    this.emit(
+      "dds-ok",
+      {
+        source: "ok-button"
+      },
+      {
+        cancelable: !0
+      }
+    ).defaultPrevented || this.handleClose("ok-button");
   }
   handleCancelButton() {
-    this.emit("dds-cancel"), this.handleClose("cancel-button");
+    this.emit(
+      "dds-cancel",
+      {
+        source: "cancel-button"
+      },
+      {
+        cancelable: !0
+      }
+    ).defaultPrevented || this.handleClose("cancel-button");
   }
   handleClick(e) {
     this.closeOnOverlayClick === "true" && e.target === this.dialog && this.handleClose("overlay");
@@ -13170,7 +13236,7 @@ const xl = class xl extends $ {
       this.handleFocusTrap(e);
       return;
     }
-    this.closeOnEsc === "true" && e.key === "Escape" ? this.handleClose("esc") : e.key === "Escape" && (e.preventDefault(), e.stopImmediatePropagation());
+    e.key === "Escape" && (this.closeOnEsc === "true" ? this.handleClose("esc") : (e.preventDefault(), e.stopImmediatePropagation()));
   }
   getFocusableElements() {
     const e = [