@watermarkinsights/ripple 4.0.0-9 → 4.0.0

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -1,85 +1,145 @@
-import { h, Host, forceUpdate, } from "@stencil/core";
-import { csvToArray, debounce, generateId, hideTooltip, intl, measureText, safeParseJSON, shouldOpenUp, showTooltip, truncateText, } from "../../global/functions";
+import { h, forceUpdate } from "@stencil/core";
+import { csvToArray, debounce, hideTooltip, intl, measureText, shouldOpenUp, showTooltip, truncateText, findPrev, findNext, } from "../../global/functions";
 import { globalMessages } from "../../global/intl";
 export class TagInput {
   constructor() {
-    this.uid = this.el.id ? this.el.id : generateId();
+    this.addNewHelpText = intl.formatMessage({
+      id: "tagInput.addNewHelpText",
+      defaultMessage: "Press the Enter or Comma key to add a new tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    this.selectionHelpText = intl.formatMessage({
+      id: "tagInput.selectionHelpText",
+      defaultMessage: "Search and select a tag.",
+      description: "Help text appearing in a dropdown. Use imperative",
+    });
+    this.maxTagsReachedMessage = intl.formatMessage({
+      id: "tagInput.maxTagsReached",
+      defaultMessage: "No more tags can be added because the limit has been reached.",
+    });
+    this.tagAreaInstructions = intl.formatMessage({
+      id: "tagInput.tagAreaInstructions",
+      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
+    });
+    this.tagsAddedMessage = intl.formatMessage({
+      id: "tagInput.tagsAdded",
+      defaultMessage: "Tags added",
+      description: "Full message for context: 'Tags added: x/y",
+    });
     this.openUp = false;
     this.inModal = false;
+    this.lastAddedTags = []; // the tag(s) added by the user on their last action (for highlighting)
     this.debouncedUpdate = debounce(() => forceUpdate(this.el), 30);
     this.label = undefined;
-    this.labelPosition = "top";
-    this.options = "";
-    this.selectedTags = "";
-    this.info = undefined;
     this.errorMessage = undefined;
-    this.addNew = true;
+    this.info = undefined;
+    this.labelPosition = "top";
+    this.maxTags = undefined;
     this.placeholder = undefined;
     this.requiredField = false;
-    this.characterLimit = 50;
-    this.maxTags = undefined;
     this.tagInputType = "dropdown";
+    this.helpText = undefined;
+    this.addNew = true;
+    this.characterLimit = 50;
     this.colHeaders = undefined;
     this.colWidths = undefined;
     this.colWrap = undefined;
-    this.messageConfig = "";
-    this.focusedListItem = undefined;
-    this.focusedTag = null;
-    this.tablePosition = { row: 0, column: 1 };
     this.isExpanded = false;
-    this.tagsList = csvToArray(this.selectedTags);
-    this.optionsList = csvToArray(this.options);
-    this.charCount = 0;
     this.liveRegionMessage = "";
+    this.focusedOption = undefined;
+    this.focusedColumn = 0;
+    this.focusedTagIndex = undefined;
+    this.tagsList = [];
+  }
+  get isDropdown() {
+    return this.tagInputType === "dropdown";
+  }
+  get isTable() {
+    return this.tagInputType === "table";
+  }
+  get charCount() {
+    return this.inputEl ? this.inputEl.value.length : 0;
   }
   get tooltipVisible() {
     return document.getElementById("wm-tooltip").classList.contains("show");
   }
-  get focusedElement() {
-    return this.el.shadowRoot.activeElement;
+  get optionEls() {
+    return Array.from(this.el.querySelectorAll("wm-tag-option"));
+  }
+  // list of options matching user query
+  get filteredOptionEls() {
+    const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
+    const list = Array.from(this.optionEls).filter((o) => {
+      let values = "";
+      if (this.isDropdown) {
+        values = o.textContent.toLowerCase();
+      }
+      else if (this.isTable) {
+        values = [o.col1, o.col2, o.col3, o.col4].join("").toLowerCase();
+      }
+      return values.includes(query);
+    });
+    return list;
   }
-  get listItemEls() {
-    return Array.from(this.dropdownEl.querySelectorAll("li"));
+  // the ones that should be rendered as tags
+  get taggedOptions() {
+    return this.optionEls.filter((o) => o.selected || o.locked);
   }
-  get tagEls() {
+  // for visual stuff (measuring, truncating...)
+  get _tagEls() {
     return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(".tag")) : [];
   }
-  get nonLockedTagEls() {
-    return this.tagEls.filter((tag) => !tag.classList.contains("locked"));
+  // unlocked and selected tags, i.e. the ones that the user can interact with.
+  // (as opposed to locked tags who can't be focused / deleted)
+  // used for focus logic
+  get focusableTags() {
+    return this._tagEls.filter((t) => !t.classList.contains("locked"));
   }
-  get optionEls() {
-    return Array.from(this.dropdownEl.querySelectorAll(".option"));
+  get focusedTag() {
+    if (this.focusedTagIndex !== undefined && this.focusedTagIndex >= 0)
+      return this.focusableTags[this.focusedTagIndex];
   }
-  get wmRowEls() {
-    return Array.from(this.el.querySelectorAll("wm-tag-input-row"));
+  // 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);
   }
-  get localRowEls() {
-    return Array.from(this.el.shadowRoot.querySelectorAll("tr"));
+  // 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);
   }
-  get filteredRows() {
-    return this.wmRowEls.filter((row) => {
-      const query = this.inputEl ? this.inputEl.value.toLowerCase() : "";
-      const colValues = [row.col1, row.col2, row.col3, row.col4].join("").toLowerCase();
-      return colValues.includes(query);
-    });
+  // get the internal representation of a wm-tag-option
+  elFromTagOption(el) {
+    return this.el.shadowRoot.querySelector("#" + el.id);
   }
-  get nonLockedTagsList() {
-    let list = [];
-    if (this.tagInputType === "table") {
-      this.tagsList.forEach((id) => {
-        const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];
-        if (!correspondingRowEl.locked) {
-          list.push(id);
-        }
-      });
+  // focusedOption state refers to the wm-tag-option. This gets the corresponding element in the shadow DOM, or the "Add New" button.
+  get _focusedOption() {
+    if (!!this.focusedOption) {
+      return this.elFromTagOption(this.focusedOption);
     }
-    else if (this.tagInputType === "dropdown") {
-      list = this.tagsList;
+    else if (this.addNewButton && this.addNewButton.classList.contains("focused")) {
+      return this.addNewButton;
+    }
+  }
+  get _focusedCell() {
+    if (!!this._focusedOption) {
+      const allCells = Array.from(this._focusedOption.querySelectorAll("td"));
+      const index = this.focusedColumn || 0;
+      return allCells[index];
     }
-    return list;
+  }
+  get inputActiveDescendantId() {
+    if (this._focusedOption) {
+      if (this.isTable) {
+        const cells = Array.from(this._focusedOption.querySelectorAll("td"));
+        return cells[this.focusedColumn].id;
+      }
+      return this._focusedOption.id;
+    }
+    return null;
   }
   get tagLimitReached() {
-    return !!(this.maxTags && this.tagsList.length >= this.maxTags);
+    return !!(this.maxTags && this.taggedOptions.length >= this.maxTags);
   }
   get noResultsMessage() {
     return intl.formatMessage({
@@ -88,78 +148,62 @@ export class TagInput {
       description: "Message displayed when a user's search returns empty.",
     });
   }
-  get componentMessages() {
-    const addNewHelpText = intl.formatMessage({
-      id: "tagInput.addNewHelpText",
-      defaultMessage: "Press the Enter or Comma key to add a new tag.",
-      description: "Help text appearing in a dropdown. Use imperative",
-    });
-    const selectionHelpText = intl.formatMessage({
-      id: "tagInput.selectionHelpText",
-      defaultMessage: "Search and select a tag.",
-      description: "Help text appearing in a dropdown. Use imperative",
-    });
-    const maxTagsReachedMessage = intl.formatMessage({
-      id: "tagInput.maxTagsReached",
-      defaultMessage: "No more tags can be added because the limit has been reached.",
-    });
-    const tagAreaInstructions = intl.formatMessage({
-      id: "tagInput.tagAreaInstructions",
-      defaultMessage: "tag selection. Press Backspace or Delete to remove a tag.",
-    });
-    const tagsAddedMessage = intl.formatMessage({
-      id: "tagInput.tagsAdded",
-      defaultMessage: "Tags added",
-      description: "For the user to understand how close they are to the tag limit, followed by x/y count",
-    });
-    const defaultConfig = {
-      addNewHelpText: addNewHelpText,
-      selectionHelpText: selectionHelpText,
-      maxTagsReached: maxTagsReachedMessage,
-      tagAreaInstructions: tagAreaInstructions,
-      tagsAdded: tagsAddedMessage,
-    };
-    const userProvidedConfig = safeParseJSON(this.messageConfig);
-    return userProvidedConfig ? Object.assign(Object.assign({}, defaultConfig), userProvidedConfig) : defaultConfig;
-  }
   get inputMinimumWidth() {
-    // 150px is the minimum width of the input field, or the length of the placeholder text
-    const inputElStyles = getComputedStyle(this.inputEl);
-    const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);
-    const inputElBuffer = [
-      inputElStyles.paddingLeft,
-      inputElStyles.paddingRight,
-      inputElStyles.marginLeft,
-      inputElStyles.marginRight,
-      tagElStyles.marginRight,
-    ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
-    const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
-    return minimumWidth;
-  }
-  generateTagAddedMessage(tag) {
+    if (this._tagEls) {
+      // 150px is the minimum width of the input field, or the length of the placeholder text
+      const inputElStyles = getComputedStyle(this.inputEl);
+      const tagElStyles = getComputedStyle(this._tagEls[this._tagEls.length - 1]);
+      const inputElBuffer = [
+        inputElStyles.paddingLeft,
+        inputElStyles.paddingRight,
+        inputElStyles.marginLeft,
+        inputElStyles.marginRight,
+        tagElStyles.marginRight,
+      ].reduce((prev, curr) => prev + parseInt(curr.replace("px", "")), 0);
+      const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder).width + inputElBuffer);
+      return minimumWidth;
+    }
+    else {
+      return 150;
+    }
+  }
+  getTagName(o) {
+    // when the user is typing and adding a new option, all we can pass is the text typed. so for the dropdown type the tag name is the identifier. It also takes care of duplicates. Table variant requires an id as the tag name is the first column but we want to allow duplicates here (e.g. people with the same name)
+    return this.isDropdown ? o.textContent : o.col1;
+  }
+  tagAddedMessage(tag) {
     return intl.formatMessage({
       id: "tagInput.tagAdded",
       defaultMessage: "{tagName} added.",
       description: "A confirmation for adding a tag.",
     }, { tagName: tag });
   }
-  generateTagAlreadyAddedMessage(tag) {
+  tagRemovedMessage(tag) {
+    return intl.formatMessage({
+      id: "tagInput.tagRemoved",
+      defaultMessage: "{tagName} removed.",
+      description: "A confirmation for removing a tag.",
+    }, { tagName: tag });
+  }
+  tagAlreadyAddedMessage(tag) {
     return intl.formatMessage({
       id: "tagInput.tagAlreadyAdded",
       defaultMessage: "{tagName} has already been added.",
       description: "An alert for adding a tag that is already present.",
     }, { tagName: tag });
   }
+  isElOrChild(el) {
+    return el === this.el || this.el.shadowRoot.contains(el) || this.el.contains(el);
+  }
   componentWillLoad() {
     if (!this.placeholder) {
-      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);
+      this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.optionEls);
     }
     if (!this.label) {
       console.error("wm-tag-input must have a label property");
     }
-    this.consolidateSelectedTags();
     this.el.focus = () => {
-      const firstFocusableTag = this.nonLockedTagEls[0];
+      const firstFocusableTag = this.focusableTags[0];
       if (firstFocusableTag) {
         this.tagAreaEl.focus();
         this.focusTag(firstFocusableTag);
@@ -175,36 +219,114 @@ export class TagInput {
     if (this.el.closest("wm-modal")) {
       this.inModal = true;
     }
+    const lockedTags = [];
+    const regularTags = [];
+    this.optionEls.forEach((o) => {
+      if (o.locked) {
+        lockedTags.push(o);
+      }
+      else if (o.selected) {
+        regularTags.push(o);
+      }
+    });
+    this.tagsList = [...lockedTags, ...regularTags];
   }
   componentDidLoad() {
-    // prevent highlighting of pre-selected tags
-    this.tagEls.forEach((el) => el.classList.remove("highlight"));
+    // 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, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["selected"],
+      childList: true,
+    });
+    // Set up observer that ensures parent reload
+    // when children wm-tag-options are removed
+    const optionListObserver = new MutationObserver((optionListMutations) => optionListMutations.forEach((mutationRecord) => this.handleOptionListChange(mutationRecord)));
+    optionListObserver.observe(this.el, {
+      childList: true,
+    });
+    // Set up the observer that will handle focus
+    // when tag list changes
+    if (!!this.tagAreaEl) {
+      const tagListObserver = new MutationObserver((tagListMutations) => tagListMutations.forEach((mutationRecord) => this.handleTagListChange(mutationRecord)));
+      tagListObserver.observe(this.tagAreaEl, {
+        childList: true,
+      });
+    }
+  }
+  handleChangeAnnouncement(mutationRecord) {
+    const tagOptionEl = mutationRecord.target;
+    if (mutationRecord.type == "childList" && mutationRecord.removedNodes.length > 0) {
+      // announce deselection of user-added tag, whose element removal is picked up
+      this.announce(this.tagRemovedMessage(mutationRecord.removedNodes[0].textContent));
+    }
+    else if (mutationRecord.type == "attributes") {
+      // announce selection or deselection of all kinds of tags
+      if (tagOptionEl.selected) {
+        this.announce(this.tagAddedMessage(tagOptionEl.textContent));
+      }
+      else {
+        this.announce(this.tagRemovedMessage(tagOptionEl.textContent));
+      }
+    }
+  }
+  handleOptionListChange(record) {
+    const addedNodes = Array.from(record.addedNodes);
+    if (addedNodes.length > 0) {
+      addedNodes.forEach((n) => !this.tagsList.includes(n) && this.tagsList.push(n));
+    }
+    const removedNodes = Array.from(record.removedNodes);
+    if (removedNodes.length > 0) {
+      this.tagsList = this.tagsList.filter((t) => !removedNodes.includes(t));
+    }
+  }
+  handleTagOptionSelected(ev) {
+    const selOption = ev.target;
+    this.tagsList = this.tagsList.concat(selOption);
+  }
+  handleTagOptionDeselected(ev) {
+    const deselOption = ev.target;
+    this.tagsList = this.tagsList.filter((t) => t != deselOption);
+  }
+  handleTagListChange(mutationRecord) {
+    // there are 2 cases: the option still exists but is no longer selected,
+    // or it was removed altogether
+    const removedTag = mutationRecord.removedNodes[0];
+    if (!!removedTag) {
+      // this is a trick. focusedTag gets the ref from an index. When an element
+      // is removed it will fall back on the new element with that index if it exists
+      if (this.focusedTag) {
+        this.focusTag(this.focusedTag);
+      }
+      else if (this.focusableTags.length > 0) {
+        // Otherwise the last tag was deleted and we reassign to the new last tag.
+        const tagToFocus = this.focusableTags[this.focusableTags.length - 1];
+        this.focusTag(tagToFocus);
+      }
+      else {
+        // unless there are no more tags...
+        this.inputEl.focus();
+      }
+      this.lastAddedTags = [];
+    }
   }
   componentDidRender() {
     this.positionInput();
     // check each tag if truncation is needed
-    this.tagEls.forEach((tag) => {
+    this._tagEls.forEach((tag) => {
       const textEl = tag.querySelector(".tag-text");
       const wrapper = this.el.shadowRoot.querySelector(".tags-and-input-wrapper");
       const leftBound = textEl.getBoundingClientRect().left;
       // the numbers represent spacing values for padding, margin, and delete icon
       const rightBound = wrapper.getBoundingClientRect().right - 10 - 8 - 28;
-      let displayText = tag.dataset.tag;
-      if (this.tagInputType === "table") {
-        // table variant doesn't display the tag id, but the contents of the first column
-        const referencedRow = this.el.querySelector(`#${displayText}`);
-        displayText = referencedRow ? referencedRow.col1 : "";
-      }
-      textEl.textContent = truncateText(textEl, displayText, rightBound - leftBound, 5);
-    });
-  }
-  consolidateSelectedTags() {
-    this.tagsList.forEach((tag) => {
-      if (!this.includesCaseInsensitive(this.optionsList, tag)) {
-        this.options += `${this.options.length > 0 ? "," : ""}${tag}`;
+      const id = tag.id.replace("tag-", "");
+      const optionEl = id && this.el.querySelector("#" + id);
+      if (optionEl) {
+        // tag text for table variant is first column text
+        textEl.textContent = truncateText(textEl, this.getTagName(optionEl), rightBound - leftBound, 5);
       }
     });
-    this.optionsList = csvToArray(this.options);
   }
   createPlaceholderDefault(addNew, hasOptions) {
     const addAndSearchPlaceholder = intl.formatMessage({
@@ -234,38 +356,40 @@ export class TagInput {
     }
     return placeholder;
   }
-  reflectSelectedTags(newValue, oldValue) {
-    const isAddition = newValue.length > oldValue.length;
-    let changedTag = "";
-    let selectedTags = this.tagsList;
-    if (isAddition) {
-      changedTag = newValue.filter((val) => !oldValue.includes(val))[0];
-    }
-    else {
-      changedTag = oldValue.filter((val) => !newValue.includes(val))[0];
-    }
-    // event emitted by type table uses element references instead of strings
-    if (this.tagInputType === "table") {
-      changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];
-      selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`));
-    }
-    this.selectedTags = this.listToCSV(this.tagsList);
-    let detail = { value: selectedTags, tagChanged: changedTag };
-    this.wmTagInputChanged.emit(detail);
-  }
   handleErrorMessageChange() {
     if (this.errorMessage) {
       this.announce(this.errorMessage);
     }
   }
-  handleRowUpdate() {
-    forceUpdate(this.el);
-  }
-  closeIfNotElOrChild(ev) {
-    const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot.contains(ev.target);
-    if (this.tagInputType === "dropdown" && isntElOrChild && this.isExpanded) {
+  handleClick(ev) {
+    const el = ev.target;
+    if (this.isDropdown && !this.el.contains(el) && this.isExpanded) {
       this.closeDropdown();
     }
+    else if (Array.from(this.el.children).includes(el)) {
+      const option = el;
+      const tagName = this.getTagName(option);
+      this.lastAddedTags = [tagName];
+    }
+  }
+  handleOptionClick(ev) {
+    ev.preventDefault();
+    this.resetInput();
+    let option;
+    if (this.isTable) {
+      option = ev.target;
+      option = this.tagOptionFromEl(option.closest("tr"));
+    }
+    else {
+      option = this.tagOptionFromEl(ev.target);
+    }
+    // if someone wants to attach a click event listener on wm-tag-option
+    option.click();
+    if (!option.locked) {
+      option.selected
+        ? this.isTable && option.emitDeselectedEvent() // dropdown doesn't deselect on option click
+        : option.emitSelectedEvent();
+    }
   }
   // From wm-button
   // we need to listen for scroll events during the capture phase because they do not bubble up
@@ -277,8 +401,8 @@ export class TagInput {
     }
   }
   handleInputKeyDown(ev) {
-    if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {
-      this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length, this.characterLimit));
+    if (/^.$/.test(ev.key) && this.charCount >= this.characterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
     }
     // prevent keydown triggering on tag area
     ev.stopPropagation();
@@ -296,19 +420,19 @@ export class TagInput {
         this.handleInputArrowUp();
         break;
       case "ArrowLeft":
-        if (this.tagInputType === "table" && this.tablePosition.row) {
+        if (this.isTable) {
           ev.preventDefault();
-          this.moveLeftCell();
+          this.focusPrevCell();
         }
         break;
       case "ArrowRight":
-        if (this.tagInputType === "table" && this.tablePosition.row) {
+        if (this.isTable) {
           ev.preventDefault();
-          this.moveRightCell();
+          this.focusNextCell();
         }
         break;
       case "Escape":
-        if (this.tagInputType === "dropdown" && this.isExpanded) {
+        if (this.isDropdown && this.isExpanded) {
           this.closeDropdown();
         }
         break;
@@ -319,17 +443,14 @@ export class TagInput {
     }
   }
   handleInputFocus() {
-    if (this.tagInputType === "dropdown") {
+    if (this.isDropdown) {
       this.openDropdown();
-      this.clearListItemFocus();
+      this.clearOptionFocus();
     }
-    // force update needed to apply styled state of field-wrapper el
-    forceUpdate(this.el);
   }
-  handleInputChanged(value) {
-    this.charCount = value.length;
-    if (this.tagInputType === "dropdown") {
-      this.clearListItemFocus();
+  handleInputChanged(ev) {
+    this.clearOptionFocus();
+    if (this.isDropdown) {
       if (this.charCount >= this.characterLimit - 5) {
         this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
       }
@@ -337,415 +458,208 @@ export class TagInput {
         this.openDropdown();
       }
     }
-    else if (this.tagInputType === "table") {
-      this.clearCellFocus();
-    }
-    if (value.includes(",") && this.addNew) {
-      // covers both typing "," and pasting in text that includes ","
-      value.split(",").forEach((tag) => this.submitInput(this.addNew, tag.trim()));
-      this.announce(this.generateTagAddedMessage(value.split(",").join(", ")));
+    const val = ev.target.value;
+    if (val.includes(",") && this.addNew) {
+      this.addTags(val);
     }
     else {
       this.announceExistingOptions();
     }
   }
   handleInputEnter() {
-    if (this.tagInputType === "dropdown") {
-      if (this.focusedListItem) {
-        this.handleListItemClick(this.focusedListItem);
-      }
-      else {
-        this.submitInput(this.addNew, this.inputEl.value.trim());
-      }
-    }
-    else if (this.tagInputType === "table" && this.tablePosition.row > 0) {
-      this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);
-    }
-  }
-  submitInput(canAddNew, value) {
-    const hasNonWhiteSpaceCharacters = value.match(/\S/);
-    if (canAddNew && hasNonWhiteSpaceCharacters) {
-      this.addTag(value);
-      this.optionsList = this.addOption(value);
+    // user has selected an option in the list
+    if (this.focusedOption) {
+      const tagName = this.getTagName(this.focusedOption);
+      this.lastAddedTags = [tagName];
+      this.focusedOption.click();
+      this.focusedOption.selected
+        ? this.isTable && this.focusedOption.emitDeselectedEvent()
+        : this.focusedOption.emitSelectedEvent();
       this.resetInput();
     }
+    else if (this.isDropdown) {
+      // user is adding a new tag
+      const tagName = this.inputEl.value;
+      if (!!tagName) {
+        this.isExistingTag(tagName) ? this.announce(this.tagAlreadyAddedMessage(tagName)) : this.addTags(tagName);
+        this.resetInput();
+      }
+    }
   }
   handleInputArrowDown() {
-    if (this.tagInputType === "table") {
-      this.moveDownRow();
-    }
-    else if (this.tagInputType === "dropdown" && this.isExpanded) {
-      this.moveDownListItem();
+    if (this.isDropdown) {
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+      else {
+        let items = [];
+        // the id check prevents a bug where the ref is reassigned to the first option causing it to be added twice (after adding a new user option)
+        if (this.addNewButton && this.addNewButton.id === "add-new-btn") {
+          items.push(this.addNewButton);
+        }
+        this.filteredOptionEls.forEach((o) => {
+          items.push(this.elFromTagOption(o));
+        });
+        const next = findNext(items, this._focusedOption, true);
+        this.focusOption(next);
+      }
     }
-    else if (this.tagInputType === "dropdown") {
-      this.openDropdown();
+    else {
+      const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
+      const next = findNext(items, this._focusedOption, true);
+      this.focusOption(next);
     }
   }
   handleInputArrowUp() {
-    if (this.tagInputType === "table") {
-      this.moveUpRow();
-    }
-    else if (this.tagInputType === "dropdown" && this.isExpanded) {
-      this.moveUpListItem();
+    if (this.isDropdown) {
+      if (!this.isExpanded) {
+        this.openDropdown();
+      }
+      else {
+        let items = [];
+        if (this.addNewButton) {
+          items.push(this.addNewButton);
+        }
+        this.filteredOptionEls.forEach((o) => {
+          items.push(this.elFromTagOption(o));
+        });
+        const prev = findPrev(items, this._focusedOption, true);
+        this.focusOption(prev);
+      }
     }
-    else if (this.tagInputType === "dropdown") {
-      this.openDropdown();
+    else {
+      const items = this.filteredOptionEls.filter((o) => !o.locked).map((o) => this.elFromTagOption(o));
+      const prev = findPrev(items, this._focusedOption, true);
+      this.focusOption(prev);
     }
   }
   handleInputBackspace() {
-    if (this.inputEl.value === "" && this.tagsList.length > 0) {
+    if (this.inputEl.value === "" && this.focusableTags.length > 0) {
       // wait for events to finish firing before redirecting focus
       // prevents double input in input area and tag area
       window.requestAnimationFrame(() => {
-        if (this.nonLockedTagsList.length > 0) {
-          this.tagAreaEl.focus();
-          this.focusTag(this.tagEls[this.tagEls.length - 1]);
-        }
+        this.tagAreaEl.focus();
+        this.focusTag(this.focusableTags[this.focusableTags.length - 1]);
       });
     }
   }
-  handleListItemKeyDown(ev) {
-    const typedEvTarget = ev.target;
-    switch (ev.key) {
-      case "Enter":
-      case " ":
-        ev.preventDefault();
-        typedEvTarget.click();
-        break;
-      case "ArrowDown":
-        ev.preventDefault();
-        this.moveDownListItem();
-        break;
-      case "ArrowUp":
-        ev.preventDefault();
-        this.moveUpListItem();
-        break;
-      case "Escape":
-        if (this.focusedElement !== this.inputEl) {
-          this.inputEl.focus();
-        }
-        else if (this.tagInputType === "dropdown") {
-          this.closeDropdown();
-        }
-        break;
-    }
-  }
-  handleListItemClick(item) {
-    const tag = item.dataset.option.trim() || "";
-    if (this.includesCaseInsensitive(this.tagsList, tag)) {
-      this.announce(this.generateTagAlreadyAddedMessage(tag));
-    }
-    else {
-      this.resetInput();
-      this.addTag(tag);
-      this.optionsList = this.addOption(tag);
-      this.focusedListItem = null;
-    }
-  }
-  handleTableRowClick(rowId) {
-    const referencedRow = this.el.querySelector(`#${rowId}`);
-    const isLocked = referencedRow.locked;
-    if (!isLocked) {
-      if (this.includesCaseInsensitive(this.tagsList, rowId)) {
-        this.removeTag(rowId);
-      }
-      else if (!this.tagLimitReached) {
-        this.addTag(rowId);
-        this.resetInput();
-      }
-    }
-  }
   handleTagAreaKeyDown(ev) {
     switch (ev.key) {
       case "ArrowLeft":
       case "ArrowUp":
         ev.preventDefault();
-        this.moveLeftTag();
+        if (this.focusedTag) {
+          const prev = findPrev(this.focusableTags, this.focusedTag, true);
+          this.focusTag(prev);
+        }
         break;
       case "ArrowRight":
       case "ArrowDown":
         ev.preventDefault();
-        this.moveRightTag();
+        if (this.focusedTag) {
+          const next = findNext(this.focusableTags, this.focusedTag, true);
+          this.focusTag(next);
+        }
         break;
       case "Backspace":
       case "Delete":
-        this.handleTagAreaDelete();
+        if (this.focusedTag) {
+          const option = this.tagOptionFromTag(this.focusedTag);
+          if (!option.locked) {
+            option.emitDeselectedEvent();
+          }
+        }
         break;
     }
   }
-  handleTagAreaDelete() {
-    const isLocked = this.focusedTag && this.focusedTag.classList.contains("locked");
-    if (this.focusedTag && !isLocked) {
-      this.removeTag(this.focusedTag.dataset.tag);
-      if (this.nonLockedTagsList.length === 0) {
-        // focus input if no tags are left
-        this.inputEl.focus();
-      }
-      else {
-        const removingLastTag = this.focusedTag === this.tagEls[this.tagEls.length - 1];
-        // if removing the last tag, reassign focused tag to previous task
-        this.focusedTag = removingLastTag ? this.tagEls[this.tagEls.length - 2] : this.focusedTag;
-        this.focusTag(this.focusedTag);
-      }
-    }
-  }
-  handleBlur(ev, component) {
-    const isntElOrChild = ev.relatedTarget !== component && !this.el.shadowRoot.contains(ev.relatedTarget);
+  handleBlur(ev) {
     this.dismissTooltip();
-    this.clearCellFocus();
-    if (isntElOrChild) {
+    this.clearOptionFocus();
+    const relTarget = ev.relatedTarget;
+    if (!this.isElOrChild(relTarget)) {
       this.fieldWrapperEl.classList.remove("focused");
-      if (this.tagInputType === "dropdown") {
+      if (this.isDropdown) {
         this.closeDropdown();
       }
     }
   }
-  handleCellMouseEnter(ev) {
-    const cell = ev.target;
-    const contentWrapper = cell.querySelector(".cell-content-wrapper");
-    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-    if (isTruncated) {
-      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-      showTooltip("bottom", cell, cell.innerText);
-    }
-  }
-  handleTagAreaFocus() {
-    if (this.tagInputType === "dropdown") {
+  handleTagAreaFocus(ev) {
+    if (this.isDropdown) {
       this.closeDropdown();
     }
-    const firstFocusableTag = this.nonLockedTagEls[0];
-    firstFocusableTag && this.focusTag(firstFocusableTag);
-  }
-  handleRemoveButtonClick(tag) {
-    this.moveLeftTag();
-    this.removeTag(tag);
-  }
-  moveDownListItem() {
-    if (this.listItemEls.length > 0) {
-      const firstListItem = this.listItemEls[0];
-      if (!this.focusedListItem) {
-        this.focusListItem(firstListItem);
-      }
-      else if (this.focusedListItem.nextElementSibling) {
-        this.focusListItem(this.focusedListItem.nextElementSibling);
+    if (this.focusableTags.length > 0) {
+      const relTarget = ev.relatedTarget;
+      if (relTarget && relTarget.id === "input") {
+        const lastFocusableTag = this.focusableTags[this.focusableTags.length - 1];
+        this.focusTag(lastFocusableTag);
       }
       else {
-        this.focusListItem(firstListItem);
+        const firstFocusableTag = this.focusableTags[0];
+        this.focusTag(firstFocusableTag);
       }
     }
   }
-  moveUpListItem() {
-    if (this.listItemEls.length > 0) {
-      const lastListItem = this.listItemEls[this.listItemEls.length - 1];
-      if (!this.focusedListItem) {
-        this.focusListItem(lastListItem);
-      }
-      else if (this.focusedListItem.previousElementSibling) {
-        this.focusListItem(this.focusedListItem.previousElementSibling);
-      }
-      else {
-        this.clearListItemFocus();
+  focusPrevCell() {
+    if (this.focusedOption) {
+      if (this.focusedColumn > 0) {
+        this.focusedColumn -= 1;
       }
     }
   }
-  moveDownRow() {
-    if (this.filteredRows.length > 0) {
-      if (this.tablePosition.row === 0) {
-        this.tablePosition.row = 1;
-      }
-      else if (this.tablePosition.row === this.filteredRows.length) {
-        this.tablePosition.row = 1;
-      }
-      else {
-        this.tablePosition.row++;
-      }
-      // skip locked rows
-      const rowToFocus = this.filteredRows[this.tablePosition.row - 1];
-      if (rowToFocus.locked) {
-        this.moveDownRow();
-      }
-      else {
-        this.focusCell(this.tablePosition);
+  focusNextCell() {
+    if (this._focusedOption) {
+      const lastCellIdx = this._focusedOption.querySelectorAll("td").length - 1;
+      if (this.focusedColumn < lastCellIdx) {
+        this.focusedColumn += 1;
       }
     }
   }
-  moveUpRow() {
-    if (this.filteredRows.length > 0) {
-      if (this.tablePosition.row === 0) {
-        this.tablePosition.row = this.filteredRows.length;
-      }
-      else if (this.tablePosition.row === 1) {
-        this.tablePosition.row = 0;
+  focusOption(optionToFocus) {
+    if (optionToFocus) {
+      // will be undefined for the "Add New" button
+      this.focusedOption = this.tagOptionFromEl(optionToFocus);
+      if (optionToFocus === this.addNewButton) {
+        this.addNewButton.classList.add("focused");
       }
       else {
-        this.tablePosition.row--;
-      }
-      // skip locked rows
-      const rowToFocus = this.filteredRows[this.tablePosition.row - 1];
-      if (rowToFocus && rowToFocus.locked) {
-        this.moveUpRow();
-      }
-      else if (rowToFocus) {
-        this.focusCell(this.tablePosition);
+        this.addNewButton && this.addNewButton.classList.remove("focused");
       }
-      else {
-        this.clearCellFocus();
-      }
-    }
-  }
-  moveLeftCell() {
-    if (this.tablePosition.column != 1) {
-      this.tablePosition.column--;
-      this.focusCell(this.tablePosition);
-    }
-  }
-  moveRightCell() {
-    const numCols = csvToArray(this.colHeaders).length;
-    if (this.tablePosition.column < numCols) {
-      this.tablePosition.column++;
-      this.focusCell(this.tablePosition);
-    }
-  }
-  moveLeftTag() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling)) {
-      this.focusedTag = this.focusedTag.previousElementSibling;
-    }
-    else {
-      this.focusedTag = lastTag;
-    }
-    // skip locked tags
-    if (this.focusedTag.classList.contains("locked") && this.nonLockedTagEls.length > 0) {
-      this.moveLeftTag();
-    }
-    else {
-      this.focusTag(this.focusedTag);
-    }
-  }
-  moveRightTag() {
-    const firstTag = this.tagEls[0];
-    if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling)) {
-      this.focusedTag = this.focusedTag.nextElementSibling;
-    }
-    else {
-      this.focusedTag = firstTag;
-    }
-    // skip locked tags
-    if (this.focusedTag.classList.contains("locked")) {
-      this.moveRightTag();
-    }
-    else {
-      this.focusTag(this.focusedTag);
-    }
-  }
-  addOption(option) {
-    let newOptionsList = this.optionsList;
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);
-    if (!optionAlreadyExists) {
-      newOptionsList = newOptionsList.concat(option);
-    }
-    return newOptionsList;
-  }
-  removeOption(option) {
-    this.optionsList = this.filterCaseInsensitive(this.optionsList, option);
-  }
-  addTag(tag) {
-    let newTagsList = this.tagsList;
-    const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);
-    const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];
-    if (!tagAlreadyAdded) {
-      let textToAnnounce = tag;
-      if (this.tagInputType === "table") {
-        const referencedRow = this.el.querySelector(`#${tag}`);
-        textToAnnounce = referencedRow.col1;
-      }
-      this.announce(this.generateTagAddedMessage(textToAnnounce));
-      this.tagsList = newTagsList.concat(tagExistsAsOption || tag);
-      // if maxTags has been reached, focus should go to the tagArea
-      // otherwise, input field should be focused and in view
-      if (this.tagLimitReached) {
-        this.tagAreaEl.focus();
-      }
-      else {
-        // wait for component to render new selected tag before bringing bottom of wrapper in view
-        window.requestAnimationFrame(() => (this.tagsAndInputWrapperEl.scrollTop = this.tagsAndInputWrapperEl.scrollHeight));
+      if (this.isTable) {
+        // tooltip
+        const contentWrapper = this._focusedOption.querySelector(".cell-content-wrapper");
+        const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+        this.dismissTooltip();
+        if (isTruncated) {
+          // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+          showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
+        }
       }
+      optionToFocus.scrollIntoView({ block: "nearest" });
     }
   }
-  removeTag(tag) {
-    let textToAnnounce = tag;
-    if (this.tagInputType === "table") {
-      const referencedRow = this.el.querySelector(`#${tag}`);
-      textToAnnounce = referencedRow.col1;
-    }
-    const tagRemovedMessage = intl.formatMessage({ id: "tagInput.tagRemoved", defaultMessage: "{tag} removed" }, { tag: textToAnnounce });
-    this.announce(tagRemovedMessage);
-    this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);
-    if (this.tagInputType === "dropdown") {
-      // if a tag was introduced by the user, also remove it from the dropdown options
-      const devOptionsList = csvToArray(this.options);
-      if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {
-        this.removeOption(tag);
+  showTooltipIfTruncated(el) {
+    const displayedText = el.querySelector(".tag-text").textContent;
+    const id = el.id.replace("tag-", "");
+    if (id) {
+      const tagEl = this.el.querySelector("#" + id);
+      const fullText = this.getTagName(tagEl);
+      if (displayedText !== fullText && displayedText.includes("...")) {
+        showTooltip("bottom", el, fullText);
       }
     }
   }
-  focusListItem(item) {
-    this.focusedListItem = item;
-    this.inputEl.setAttribute("aria-activedescendant", this.focusedListItem.id);
-    item.scrollIntoView({ block: "nearest" });
-  }
   focusTag(element) {
-    if (element.classList.contains("locked")) {
-      this.focusedTag = null;
-      this.tagAreaEl.setAttribute("aria-activedescendant", "");
-    }
-    else {
-      this.focusedTag = element;
-      this.tagAreaEl.setAttribute("aria-activedescendant", this.focusedTag.id);
-      this.focusedTag.scrollIntoView({ block: "nearest" });
-    }
+    // technically it's the tag area that has focus. This function handles the aria-activedescendant value within that parent
+    this.focusedTagIndex = this.focusableTags.indexOf(element);
+    element.scrollIntoView({ block: "nearest" });
     window.requestAnimationFrame(() => {
       hideTooltip();
-      const textEl = element.querySelector(".tag-text");
-      const fullText = element.dataset.tag;
-      const isTruncated = fullText !== textEl.textContent && textEl.textContent.includes("...");
-      isTruncated && showTooltip("bottom", element, fullText);
+      this.showTooltipIfTruncated(element);
     });
   }
-  focusCell(position) {
-    this.clearCellFocus(false);
-    if (position.row) {
-      const rowToFocus = this.localRowEls[position.row];
-      const rowCells = rowToFocus.querySelectorAll("td");
-      const cellToFocus = rowCells[position.column - 1];
-      const contentWrapper = cellToFocus.querySelector(".cell-content-wrapper");
-      const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
-      rowToFocus.classList.add("focused");
-      cellToFocus.classList.add("focused");
-      cellToFocus.scrollIntoView({ block: "nearest" });
-      this.inputEl.setAttribute("aria-activedescendant", cellToFocus.id);
-      this.dismissTooltip();
-      if (isTruncated) {
-        // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
-        showTooltip("bottom", cellToFocus, cellToFocus.innerText);
-      }
-    }
-  }
-  clearTagFocus() {
-    this.tagAreaEl.setAttribute("aria-activedescendant", "");
-    this.focusedTag = null;
-  }
-  clearCellFocus(resetPosition = true) {
-    this.inputEl.setAttribute("aria-activedescendant", "");
-    if (resetPosition) {
-      this.tablePosition = { row: 0, column: 1 };
-    }
-    this.localRowEls.forEach((row) => {
-      row.classList.remove("focused");
-      row.querySelectorAll("td").forEach((cell) => {
-        cell.classList.remove("focused");
-      });
-    });
+  clearOptionFocus() {
+    this.focusedOption = undefined;
+    this.focusedColumn = 0;
   }
   openDropdown() {
     // offset of -2px to avoid overlapping the focus border
@@ -753,18 +667,10 @@ export class TagInput {
     this.isExpanded = true;
   }
   closeDropdown() {
-    this.clearListItemFocus();
+    this.clearOptionFocus();
     this.isExpanded = false;
   }
-  clearListItemFocus() {
-    this.focusedListItem = null;
-    this.inputEl.setAttribute("aria-activedescendant", "");
-    this.listItemEls.forEach((el) => {
-      el.classList.remove("focused");
-    });
-  }
   resetInput() {
-    this.charCount = 0;
     this.inputEl.value = "";
   }
   announce(message) {
@@ -774,15 +680,25 @@ export class TagInput {
     }
     this.liveRegionMessage = message;
   }
+  addTags(tagNames) {
+    // covers both typing "," and pasting in text that includes ","
+    // if tag added without "," (typing enter), split puts the whole string in an array
+    this.lastAddedTags = tagNames.split(",").filter((t) => t.match(/\S/));
+    this.lastAddedTags.forEach((tag) => {
+      this.wmTagInputTagAdded.emit(tag);
+    });
+    this.announce(this.tagAddedMessage(this.lastAddedTags.join(", ")));
+    this.resetInput();
+  }
   announceExistingOptions() {
     // request animation frame to wait for re-rendering of filtered options
     window.requestAnimationFrame(() => {
       let numResults = 0;
-      if (this.tagInputType === "dropdown") {
+      if (this.isDropdown) {
         numResults = this.optionEls.length;
       }
-      else if (this.tagInputType === "table") {
-        numResults = this.filteredRows.length;
+      else if (this.isTable) {
+        numResults = this.filteredOptionEls.length;
       }
       const existingOptionsMessage = intl.formatMessage({
         id: "tagInput.existingOptions",
@@ -799,117 +715,61 @@ export class TagInput {
     return message;
   }
   positionInput() {
-    const lastTag = this.tagEls[this.tagEls.length - 1];
-    // default placement to fall back to when no tags are present, or not enough space is available
-    this.inputEl.style.position = "static";
-    this.inputEl.style.width = "100%";
-    this.inputEl.classList.add("extended");
-    if (lastTag) {
-      const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
-      if (spaceAvailable >= this.inputMinimumWidth) {
-        // because the input has right: 0px
-        // all thats needed to properly place it is setting position: absolute, top, and width
-        this.inputEl.style.position = "absolute";
-        this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
-        this.inputEl.style.width = (spaceAvailable - 8).toString() + "px";
-        this.inputEl.classList.remove("extended");
+    if (this.tagAreaEl) {
+      const lastTag = this._tagEls[this._tagEls.length - 1];
+      // default placement to fall back to when no tags are present, or not enough space is available
+      this.inputEl.style.position = "static";
+      this.inputEl.style.width = "100%";
+      this.inputEl.classList.add("extended");
+      if (lastTag) {
+        const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;
+        if (spaceAvailable >= this.inputMinimumWidth) {
+          // because the input has right: 0px
+          // all thats needed to properly place it is setting position: absolute, top, and width
+          this.inputEl.style.position = "absolute";
+          this.inputEl.style.top = lastTag.offsetTop.toString() + "px";
+          this.inputEl.style.width = (spaceAvailable - 8).toString() + "px";
+          this.inputEl.classList.remove("extended");
+        }
       }
     }
   }
   handleTagMouseEnter(ev) {
-    const displayedText = ev.target.querySelector(".tag-text").textContent;
-    const fullText = ev.target.dataset.tag;
-    const isTruncated = displayedText !== fullText && displayedText.includes("...");
-    isTruncated && showTooltip("bottom", ev.target, fullText);
+    this.showTooltipIfTruncated(ev.target);
   }
   /// Helpers
   listToCSV(list) {
     return list.join(",");
   }
-  includesCaseInsensitive(list, element) {
-    const lowercaseList = list.map((str) => str.toLowerCase());
-    return lowercaseList.includes(element.toLowerCase());
-  }
-  filterCaseInsensitive(list, element) {
-    return list.filter((x) => x.toLowerCase() !== element.toLowerCase());
-  }
-  sortCaseInsensitive(list) {
-    // The vanilla .sort method places words that start with capital letters above others (ASCII order)
-    // so we need to pass in our own compare function to sort case-insensitive
-    return list.sort((a, b) => {
-      a = a.toLowerCase();
-      b = b.toLowerCase();
-      return a > b ? 1 : a < b ? -1 : 0;
-    });
-  }
-  /// Renders
-  renderTags() {
-    let lockedTags = [];
-    let unlockedTags = [];
-    this.tagsList.forEach((tag, idx) => {
-      const id = `tag${idx + 1}`;
-      let tagText = "";
-      let isLocked = false;
-      if (this.tagInputType === "dropdown") {
-        tagText = tag;
-      }
-      else if (this.tagInputType === "table") {
-        // display table tags using col1 of the row with the same id
-        // if one can't be found, display as empty
-        const referencedRow = this.el.querySelector(`#${tag}`);
-        tagText = referencedRow ? referencedRow.col1 : "";
-        isLocked = referencedRow ? referencedRow.locked : false;
-      }
-      // make sure locked tags always appear in front of list
-      const targetList = isLocked ? lockedTags : unlockedTags;
-      targetList.push(h("li", { id: id, class: `tag highlight ${this.focusedTag && this.focusedTag.id === id ? "focused" : ""} ${isLocked ? "locked" : ""}`, "data-tag": tag, role: "option", onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tag), h("span", { class: "tag-text", "aria-hidden": "true" }, tagText), isLocked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => this.handleRemoveButtonClick(tag) }))));
-    });
-    return [...lockedTags, ...unlockedTags];
+  isExistingTag(tag) {
+    const list = this.optionEls.map((o) => this.getTagName(o).toLowerCase());
+    return list.includes(tag.toLowerCase());
   }
   renderDropdown() {
-    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : false, "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.renderListItems(this.optionsList))));
-  }
-  renderListItems(optionsList) {
-    optionsList = this.sortCaseInsensitive(optionsList);
-    // filter by input
-    if (this.inputEl && this.inputEl.value) {
-      optionsList = this.optionsList.filter((option) => option.toLowerCase().includes(this.inputEl.value.toLowerCase()));
-    }
-    return optionsList.map((option, idx) => {
-      const id = `option${idx + 1}`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      const isSelected = this.includesCaseInsensitive(this.tagsList, option);
-      return (h("li", { class: `option ${isFocused ? "focused" : ""}`, role: "option", id: id, "data-option": option, "aria-selected": isSelected ? "true" : "false", "aria-disabled": isSelected ? "true" : "false", onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target) }, option));
-    });
-  }
-  renderAddNewButton() {
-    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
-    const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());
-    if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {
-      const id = `add-new-btn`;
-      const isFocused = this.focusedListItem && this.focusedListItem.id === id;
-      return (h("li", { role: "option", class: `add-new-btn ${isFocused ? "focused" : ""}`, id: id, "data-option": this.inputEl.value, onKeyDown: (ev) => this.handleListItemKeyDown(ev), onBlur: (ev) => this.handleBlur(ev, this.el), onClick: (ev) => this.handleListItemClick(ev.target), tabIndex: isFocused ? 0 : -1 }, `Add "${this.inputEl.value.trim()}"`));
-    }
-    else
-      return "";
+    return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
   }
   renderHelpText() {
+    if (this.helpText)
+      return this.helpText;
     let helpText = "";
-    if (this.optionsList.length > 0) {
-      helpText += this.componentMessages.selectionHelpText;
+    if (this._tagEls.length > 0) {
+      helpText += this.selectionHelpText;
     }
     if (this.addNew) {
-      helpText += " " + this.componentMessages.addNewHelpText;
+      helpText += " " + this.addNewHelpText;
     }
     return helpText;
   }
-  renderTagCounter() {
-    if (this.maxTags) {
-      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, `${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`, this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`)));
-    }
+  renderAddNewButton() {
+    const inputValue = this.inputEl.value.trim();
+    const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\S/);
+    const optionAlreadyExists = this.isExistingTag(this.inputEl.value.trim());
+    return (this.addNew &&
+      hasNonWhiteSpaceCharacters &&
+      !optionAlreadyExists && (h("li", { ref: (el) => (this.addNewButton = el), id: "add-new-btn", class: "add-new-btn", onClick: () => this.addTags(inputValue) }, "Add " + inputValue)));
   }
   renderTable() {
-    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredRows.length ? this.renderTableRows() : h("div", { class: "no-results" }, this.noResultsMessage))));
+    return (h("div", { class: "table-wrapper", onScroll: () => this.dismissTooltip() }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
   }
   renderTableHeaders() {
     return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => {
@@ -922,31 +782,76 @@ export class TagInput {
         width: this.colWidths ? csvToArray(this.colWidths)[idx] : "" }, header));
     })));
   }
-  renderTableRows() {
-    return this.filteredRows.map((row) => {
-      const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
-      return (h("tr", { id: row.id, class: `${row.locked ? "locked" : ""} ${isSelected ? "selected" : ""}`, role: "row", onClick: () => this.handleTableRowClick(row.id) }, this.renderTableCells(row)));
-    });
+  renderTag(o) {
+    const focused = this.focusedTag && this.focusedTag.id === "tag-" + o.id ? "focused" : "";
+    const tagName = this.getTagName(o);
+    const highlight = this.lastAddedTags.includes(tagName) ? "highlight" : "";
+    return (h("li", { id: "tag-" + o.id, role: "option", class: `tag ${highlight} ${focused} ${o.locked ? "locked" : ""}`, onMouseEnter: (ev) => this.handleTagMouseEnter(ev), onMouseLeave: hideTooltip }, h("span", { class: "sr-only" }, tagName), h("span", { class: "tag-text", "aria-hidden": "true" }, tagName), o.locked ? (h("div", { class: "icon lock" })) : (h("button", { class: "icon remove-btn", tabIndex: -1, onClick: () => o.emitDeselectedEvent() }))));
+  }
+  renderTags() {
+    return this.tagsList.map((o) => this.renderTag(o));
+  }
+  renderTagCounter() {
+    if (this.maxTags) {
+      return (h("div", { class: "lower-row" }, h("div", { id: "max-tags" }, this.renderMaxTags())));
+    }
+  }
+  renderMaxTags() {
+    if (this.helpText) {
+      return this.helpText;
+    }
+    else {
+      let msg = `${this.tagsAddedMessage}: ${this.taggedOptions.length}/${this.maxTags}`;
+      if (this.tagLimitReached) {
+        msg += `- ${this.maxTagsReachedMessage}`;
+      }
+      return msg;
+    }
+  }
+  handleCellMouseEnter(ev) {
+    const cell = ev.target;
+    const contentWrapper = cell.querySelector(".cell-content-wrapper");
+    const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;
+    if (isTruncated) {
+      // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
+      showTooltip("bottom", cell, cell.innerText);
+    }
   }
-  renderTableCells(row) {
-    const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);
-    const isSelected = this.includesCaseInsensitive(this.tagsList, row.id);
+  renderTableCells(o) {
+    const colValues = [o.col1, o.col2, o.col3, o.col4].filter((val) => !!val);
     return colValues.map((val, idx) => {
-      const localId = `${row.id}-col${idx + 1}`;
+      const cellId = `${o.id}-col${idx + 1}`;
       let overflowRule = "wrap";
       if (this.colWrap && csvToArray(this.colWrap)[idx]) {
         overflowRule = csvToArray(this.colWrap)[idx];
       }
-      return (h("td", { id: localId, role: "gridcell", "aria-describedby": `${localId}-description`, "aria-selected": isSelected.toString(), onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => this.dismissTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${localId}-description` }, row.locked ? "locked" : "")));
+      const classes = {
+        focused: !!this._focusedCell && cellId === this._focusedCell.id,
+      };
+      return (h("td", { id: cellId, class: classes, role: "gridcell", "aria-describedby": `${cellId}-description`, "aria-selected": o.selected ? "true" : "false", onMouseEnter: (ev) => this.handleCellMouseEnter(ev), onMouseLeave: () => hideTooltip() }, h("div", { class: `cell-content-wrapper ${overflowRule}` }, val), h("div", { class: "description", id: `${cellId}-description` }, o.locked ? "locked" : "")));
     });
   }
+  renderTableRow(o) {
+    const classes = {
+      selected: o.selected,
+      locked: o.locked,
+      focused: this.focusedOption && o === this.focusedOption ? true : false,
+    };
+    return (h("tr", { id: o.id, class: classes, onClick: (ev) => this.handleOptionClick(ev) }, this.renderTableCells(o)));
+  }
+  renderListItem(o) {
+    if (!!this.inputEl) {
+      const isFocused = this.focusedOption && o === this.focusedOption;
+      return (h("li", { id: o.id, role: "option", class: `option ${isFocused ? "focused" : ""}`, "aria-selected": o.selected ? "true" : "false", onClick: (ev) => this.handleOptionClick(ev) }, o.textContent));
+    }
+  }
   render() {
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: `input${this.uid}` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.focusedElement ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}`, ref: (el) => (this.tagsAndInputWrapperEl = el) }, this.tagsList.length > 0 && (h("ul", { ref: (el) => (this.tagAreaEl = el), class: "tag-area", role: "listbox", "aria-activedescendant": "", "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : ""}`, tabindex: this.nonLockedTagsList.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: () => this.handleTagAreaFocus(), onBlur: (ev) => {
-        this.clearTagFocus();
-        this.handleBlur(ev, this.el);
-      }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags())), h("input", { id: `input${this.uid}`, class: `input ${this.tagLimitReached ? "hidden" : ""}`, role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""}`, "aria-label": `${this.label} ${this.tagInputType === "dropdown" ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.tagInputType === "dropdown" ? this.isExpanded.toString() : null, placeholder: this.placeholder, maxLength: this.tagInputType === "dropdown" ? this.characterLimit : undefined, onInput: () => this.handleInputChanged(this.inputEl.value), onBlur: (ev) => {
-        this.handleBlur(ev, this.el);
-      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.tagInputType === "dropdown" && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.tagInputType === "dropdown" && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), this.errorMessage && h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.tagInputType === "table" && this.renderTable())));
+    return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", htmlFor: "input" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { class: "upper-row" }, h("div", { class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, h("ul", { ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this.focusableTags.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()), h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""}`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+        this.handleBlur(ev);
+      }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { id: "info", class: "info-text" }, this.info)), this.errorMessage && h("div", { id: "error" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "assertive", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
   }
   static get is() { return "wm-tag-input"; }
   static get encapsulation() { return "shadow"; }
@@ -980,59 +885,22 @@ export class TagInput {
         "attribute": "label",
         "reflect": false
       },
-      "labelPosition": {
+      "errorMessage": {
         "type": "string",
         "mutable": false,
-        "complexType": {
-          "original": "\"top\" | \"left\" | \"none\"",
-          "resolved": "\"left\" | \"none\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "\"top\""
-      },
-      "options": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "options",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "selectedTags": {
-        "type": "string",
-        "mutable": true,
         "complexType": {
           "original": "string",
-          "resolved": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "selected-tags",
-        "reflect": true,
-        "defaultValue": "\"\""
+        "attribute": "error-message",
+        "reflect": false
       },
       "info": {
         "type": "string",
@@ -1051,40 +919,40 @@ export class TagInput {
         "attribute": "info",
         "reflect": false
       },
-      "errorMessage": {
+      "labelPosition": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "\"top\" | \"left\" | \"none\"",
+          "resolved": "\"left\" | \"none\" | \"top\"",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "error-message",
-        "reflect": false
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"top\""
       },
-      "addNew": {
-        "type": "boolean",
+      "maxTags": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "add-new",
-        "reflect": false,
-        "defaultValue": "true"
+        "attribute": "max-tags",
+        "reflect": false
       },
       "placeholder": {
         "type": "string",
@@ -1121,12 +989,12 @@ export class TagInput {
         "reflect": false,
         "defaultValue": "false"
       },
-      "characterLimit": {
-        "type": "number",
+      "tagInputType": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "\"dropdown\" | \"table\"",
+          "resolved": "\"dropdown\" | \"table\"",
           "references": {}
         },
         "required": false,
@@ -1135,16 +1003,16 @@ export class TagInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "character-limit",
+        "attribute": "tag-input-type",
         "reflect": false,
-        "defaultValue": "50"
+        "defaultValue": "\"dropdown\""
       },
-      "maxTags": {
-        "type": "number",
+      "helpText": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
@@ -1153,15 +1021,15 @@ export class TagInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "max-tags",
+        "attribute": "help-text",
         "reflect": false
       },
-      "tagInputType": {
-        "type": "string",
+      "addNew": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "\"dropdown\" | \"table\"",
-          "resolved": "\"dropdown\" | \"table\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -1170,9 +1038,27 @@ export class TagInput {
           "tags": [],
           "text": ""
         },
-        "attribute": "tag-input-type",
+        "attribute": "add-new",
         "reflect": false,
-        "defaultValue": "\"dropdown\""
+        "defaultValue": "true"
+      },
+      "characterLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "character-limit",
+        "reflect": false,
+        "defaultValue": "50"
       },
       "colHeaders": {
         "type": "string",
@@ -1224,43 +1110,23 @@ export class TagInput {
         },
         "attribute": "col-wrap",
         "reflect": false
-      },
-      "messageConfig": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "message-config",
-        "reflect": false,
-        "defaultValue": "\"\""
       }
     };
   }
   static get states() {
     return {
-      "focusedListItem": {},
-      "focusedTag": {},
-      "tablePosition": {},
       "isExpanded": {},
-      "tagsList": {},
-      "optionsList": {},
-      "charCount": {},
-      "liveRegionMessage": {}
+      "liveRegionMessage": {},
+      "focusedOption": {},
+      "focusedColumn": {},
+      "focusedTagIndex": {},
+      "tagsList": {}
     };
   }
   static get events() {
     return [{
-        "method": "wmTagInputChanged",
-        "name": "wmTagInputChanged",
+        "method": "wmTagInputTagAdded",
+        "name": "wmTagInputTagAdded",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -1269,36 +1135,35 @@ export class TagInput {
           "text": ""
         },
         "complexType": {
-          "original": "{\n    value: string[] | HTMLWmTagInputRowElement[];\n    tagChanged: string | HTMLWmTagInputRowElement;\n  }",
-          "resolved": "{ value: string[] | HTMLWmTagInputRowElement[]; tagChanged: string | HTMLWmTagInputRowElement; }",
-          "references": {
-            "HTMLWmTagInputRowElement": {
-              "location": "global"
-            }
-          }
+          "original": "any",
+          "resolved": "any",
+          "references": {}
         }
       }];
   }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "tagsList",
-        "methodName": "reflectSelectedTags"
-      }, {
         "propName": "errorMessage",
         "methodName": "handleErrorMessageChange"
       }];
   }
   static get listeners() {
     return [{
-        "name": "wmTagInputRowUpdated",
-        "method": "handleRowUpdate",
+        "name": "privTagOptionSelected",
+        "method": "handleTagOptionSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "privTagOptionDeselected",
+        "method": "handleTagOptionDeselected",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
         "name": "click",
-        "method": "closeIfNotElOrChild",
+        "method": "handleClick",
         "target": "document",
         "capture": false,
         "passive": false
@@ -1308,6 +1173,12 @@ export class TagInput {
         "target": "window",
         "capture": true,
         "passive": true
+      }, {
+        "name": "blur",
+        "method": "handleBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }