@watermarkinsights/ripple 5.32.0-alpha.8 → 5.32.0

package/dist/cjs/wm-tag-input.cjs.entry.js

@@ -109,6 +109,14 @@ const TagInput = class {
         });
         return list;
     }
+    // internal representations (dropdown li or table tr) of the options matching the user query.
+    // An option has no such element until the render that follows its insertion, so the list can be
+    // shorter than filteredOptionEls.
+    get filteredOptionRowEls() {
+        return this.filteredOptionEls
+            .map((o) => this.elFromTagOption(o))
+            .filter((el) => !!el);
+    }
     // the ones that should be rendered as tags
     get taggedOptions() {
         return this.optionEls.filter((o) => o.selected || o.locked);
@@ -122,18 +130,23 @@ const TagInput = class {
             return this._tagEls[this.focusedTagIndex];
         }
     }
+    // an empty id would make querySelector throw on the "#" selector
+    optionById(id) {
+        return id ? this.el.querySelector("#" + id) : undefined;
+    }
     // get the wm-tag-option, given the internal representation (dropdown li or table tr)
     tagOptionFromEl(el) {
-        return el.id === "add-new-btn" ? undefined : this.el.querySelector("#" + el.id);
+        return el.id === "add-new-btn" ? undefined : this.optionById(el.id);
     }
     // get the wm-tag-option, given the internal representation of a tag
     tagOptionFromTag(el) {
-        const id = el.id.replace("tag-", "");
-        return this.el.querySelector("#" + id);
+        return this.optionById(el.id.replace("tag-", ""));
     }
     // get the internal representation of a wm-tag-option
     elFromTagOption(el) {
-        return this.el.shadowRoot.querySelector("#" + el.id);
+        return el.id
+            ? this.el.shadowRoot.querySelector("#" + el.id)
+            : undefined;
     }
     // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
     get _focusedOption() {
@@ -222,7 +235,18 @@ const TagInput = class {
     isElOrChild(el) {
         return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
     }
+    // Rows and tags are rendered with the id of their wm-tag-option, and that id is the only link
+    // back from a row or a tag to its option. wm-tag-option assigns its own id when it loads, which
+    // happens after this component renders, so any missing id is assigned here instead.
+    assignOptionIds() {
+        this.optionEls.forEach((o) => {
+            if (!o.id) {
+                o.id = functions.generateId();
+            }
+        });
+    }
     componentWillLoad() {
+        this.assignOptionIds();
         if (!this.placeholder) {
             this.placeholder = this.createPlaceholderDefault(this.addNew, this.optionEls.length > 0);
         }
@@ -254,7 +278,6 @@ const TagInput = class {
         this.tagsList = [...lockedTags, ...regularTags];
     }
     componentDidLoad() {
-        this.handleLayoutChange();
         // Set up observer to announce changes in selected tags, or removed user-added tags
         const observerAnnouncer = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleChangeAnnouncement(mutationRecord)));
         observerAnnouncer.observe(this.el, {
@@ -305,6 +328,7 @@ const TagInput = class {
     handleOptionListChange(record) {
         const addedNodes = Array.from(record.addedNodes);
         if (addedNodes.length > 0) {
+            this.assignOptionIds();
             addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
         }
         const removedNodes = Array.from(record.removedNodes);
@@ -360,8 +384,7 @@ const TagInput = class {
             const leftBound = textEl.getBoundingClientRect().left;
             // the numbers represent spacing values for padding, margin, and delete icon
             const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
-            const id = tag.id.replace("tag-", "");
-            const optionEl = id && this.el.querySelector("#" + id);
+            const optionEl = this.tagOptionFromTag(tag);
             if (optionEl) {
                 // tag text for table variant is first column text
                 textEl.textContent = functions.truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
@@ -413,12 +436,15 @@ const TagInput = class {
         this.resetInput();
         let option;
         if (this.isTable) {
-            option = ev.target;
-            option = this.tagOptionFromEl(option.closest("tr"));
+            const target = ev.target;
+            option = this.tagOptionFromEl(target.closest("tr"));
         }
         else {
             option = this.tagOptionFromEl(ev.target);
         }
+        if (!option) {
+            return;
+        }
         // if someone wants to attach a click event listener on wm-tag-option
         option.click();
         if (option.locked) {
@@ -539,15 +565,13 @@ const TagInput = class {
                 if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
                     items.push(this.addNewButton);
                 }
-                this.filteredOptionEls.forEach((o) => {
-                    items.push(this.elFromTagOption(o));
-                });
+                items.push(...this.filteredOptionRowEls);
                 const next = functions.findNext(items, this._focusedOption, true);
                 this.focusOption(next);
             }
         }
         else {
-            const items = this.filteredOptionEls.map((o) => this.elFromTagOption(o));
+            const items = this.filteredOptionRowEls;
             const next = functions.findNext(items, this._focusedOption, true);
             this.focusOption(next);
         }
@@ -562,15 +586,13 @@ const TagInput = class {
                 if (this.addNewButton) {
                     items.push(this.addNewButton);
                 }
-                this.filteredOptionEls.forEach((o) => {
-                    items.push(this.elFromTagOption(o));
-                });
+                items.push(...this.filteredOptionRowEls);
                 const prev = functions.findPrev(items, this._focusedOption, true);
                 this.focusOption(prev);
             }
         }
         else {
-            const items = this.filteredOptionEls.map((o) => this.elFromTagOption(o));
+            const items = this.filteredOptionRowEls;
             const prev = functions.findPrev(items, this._focusedOption, true);
             this.focusOption(prev);
         }
@@ -608,6 +630,9 @@ const TagInput = class {
             case "Delete":
                 if (this.focusedTag) {
                     const option = this.tagOptionFromTag(this.focusedTag);
+                    if (!option) {
+                        break;
+                    }
                     if (option.locked) {
                         this.announce(this.tagLockedMessage(this.getTagName(option)));
                     }
@@ -748,9 +773,8 @@ const TagInput = class {
     }
     showTooltipIfTruncated(el) {
         const displayedText = el.querySelector(".tag-text").textContent;
-        const id = el.id.replace("tag-", "");
-        if (id) {
-            const tagEl = this.el.querySelector("#" + id);
+        const tagEl = this.tagOptionFromTag(el);
+        if (tagEl) {
             const fullText = this.getTagName(tagEl);
             if (displayedText !== fullText && displayedText.includes("...")) {
                 functions.showTooltip("bottom", el, fullText);
@@ -944,10 +968,10 @@ const TagInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: '98021c788751a158eaf7c9719f5a6cdbce179e5f', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '5be1c5b7258830ba9f4ed48aac32c0cf08b7191a', class: "label-wrapper" }, index.h("label", { key: 'bcd2f7c977c282e4347671531cd91963469ea243', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '987909d0fda0916c7ad77a5b6b2fbe364918fdf7', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '74d2d1eb3cffb3084c575a07d9784592e3c83b0b', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '7859920825578196f0d5680106b96be1f5f34ed2', class: "upper-row" }, index.h("div", { key: '117dc1c1083a00856b321011eb3b50839213f836', class: "svg-icon svg-search" }), index.h("div", { key: '461bba7d72ada741ee7fd0be8de693d2b7f0de35', class: `tags-and-input-wrapper` }, index.h("ul", { key: 'd8ca1a36892f5af26a6916aa328ec237626961d7', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (index.h("div", { key: '3320626934db9d58503b2964530e0bac1126775e', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '9342d3b7db294e8c6c791bb0b4debfa537ab4029', class: "label-wrapper" }, index.h("label", { key: '48f8454c94c26ee09d69221d5985d9bc6d14ad90', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '533458abd912ff8608419c53560baf6ff3e8ecb2', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '8581fb8e727570200a2a024db5b3c767d79fb433', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: 'dc8aa608d413c1ccf2ce686d78ac14944f200421', class: "upper-row" }, index.h("div", { key: '8c076d96f42b6ce47d6ca49068fae2e51bbba705', class: "svg-icon svg-search" }), index.h("div", { key: '7dba4a97ab9435c4cd2f930e91922247349f0269', class: `tags-and-input-wrapper` }, index.h("ul", { key: '96f539b009fdc8cf9b267b8b7d9f9d110c00a24b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: 'c7da0972ff25cc19d03e6e1fb1b9097439f1f723', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: '9d8ee83e7ff75dece20f57e96f987187f8ea4379', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '61485889ea39dd305b051fc76a38726dea4ecba4', id: "info", class: "info-text" }, this.info)), index.h("div", { key: 'd6d2837acc24ff0334231bbc94ddaf482b4eb058', id: "error" }, this.errorMessage), index.h("div", { key: 'b1d420a77815803987916019cf32744eb3b54191', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: '85c5677a7c97baf49906f90d0a2e20af3853b3d7', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'a60ae5ab37b6a973127ef0dbc73fdd25defa2b00', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: 'f66a9b7ab8687707e271dc606c54486e799a2dcc', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '0e644fd0b06345ff5bb459e2dc46f7f6601bc92d', id: "error" }, this.errorMessage), index.h("div", { key: '94bea1eb5b48bd5a669d0f8a4ae98cc1ddde7692', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }