@vertexvis/ui 0.1.0-testing.3 → 0.1.0-testing.5

package/dist/collection/components/search-bar/search-bar.js

@@ -1,94 +1,73 @@
 import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
 import { generateInstanceFromTemplate } from '../../util/templates/templates';
-import { createDocumentRange, createTextNode, getWindowSelection, isHtmlElement, isReplacedElement, isTextNode, } from './lib';
+import { createDocumentRange, createTextNode, getWindowSelection } from './dom';
+import { createResultUrn, createSearchResultReplacement, getNodesForSearchResultReplacement, trimNonstandardSpaces, } from './lib';
 export class SearchBar {
   constructor() {
-    this.handleKeyDown = (event) => {
-      if ((this.triggerCharacters.includes(event.key) ||
-        this.triggerCharacter === event.key) &&
-        this.triggerKey == null) {
-        this.triggerKey = event.key;
-        this.updateCursorPosition();
-        this.triggerCharacterPressed.emit('');
-      }
-      else {
-        this.restartTriggerInput();
-      }
-      if (event.key === 'Backspace') {
-        const selection = getWindowSelection();
-        if (selection && (selection === null || selection === void 0 ? void 0 : selection.rangeCount) > 0) {
-          const range = selection.getRangeAt(0);
-          range.deleteContents();
-        }
-      }
-      this.valueChanged.emit();
+    this.rawElements = [];
+    this.isIdenticalElement = (child, other) => {
+      return (child === this.triggeredElement ||
+        this.getTextContent(child) === this.getTextContent(other));
     };
-    this.handleKeyUp = (event) => {
-      if (event.key === 'Backspace') {
-        this.updateTriggerState(this.getSelectionSubstring());
-      }
-      if (event.key === 'Enter') {
-        this.clearTriggerState();
+    this.getTextContent = (node) => {
+      var _a;
+      if (node instanceof HTMLElement) {
+        return node.innerText;
       }
-      this.valueChanged.emit();
+      return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
     };
-    this.updateTriggerValue = (data) => {
-      var _a, _b, _c, _d, _e;
-      if (this.triggerKey != null &&
-        this.triggerRange != null &&
-        this.triggerRange.startContainer === this.triggerRange.endContainer) {
-        const triggerRangeNode = this.triggerRange.startContainer;
-        if (isTextNode(triggerRangeNode)) {
-          const before = createTextNode((_a = triggerRangeNode.textContent) === null || _a === void 0 ? void 0 : _a.slice(0, this.triggerRange.startOffset - 1));
-          const after = createTextNode((_b = triggerRangeNode.textContent) === null || _b === void 0 ? void 0 : _b.slice(this.triggerRange.endOffset));
-          const replaced = this.createReplacedElement(data);
-          (_c = triggerRangeNode.parentElement) === null || _c === void 0 ? void 0 : _c.insertBefore(before, triggerRangeNode);
-          (_d = triggerRangeNode.parentElement) === null || _d === void 0 ? void 0 : _d.insertBefore(after, triggerRangeNode.nextSibling);
-          (_e = triggerRangeNode.parentElement) === null || _e === void 0 ? void 0 : _e.insertBefore(replaced, after);
-          triggerRangeNode.remove();
-          this.moveCursorToNodeEnd(after, true);
+    this.handleCursorPositionUpdate = () => {
+      var _a, _b, _c;
+      const windowRange = (_a = getWindowSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
+      if (windowRange != null) {
+        if (!this.hasTriggered) {
+          const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
+          if (triggerText != null) {
+            this.hasTriggered = true;
+            this.triggeredRange = windowRange;
+            this.triggeredElement = windowRange.commonAncestorContainer;
+            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+          }
+        }
+        else if (this.hasTriggered) {
+          const triggerText = this.readTriggerValue((_c = windowRange.commonAncestorContainer.textContent) !== null && _c !== void 0 ? _c : '', windowRange.startOffset);
+          if (triggerText != null) {
+            this.triggeredRange = windowRange;
+            this.triggeredElement = windowRange.commonAncestorContainer;
+            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+          }
+          else {
+            this.hasTriggered = false;
+            this.triggeredRange = undefined;
+            this.triggeredElement = undefined;
+          }
         }
       }
+      this.cursorPosition = this.getCursorPosition();
     };
-    this.triggerText = () => {
-      var _a, _b;
-      if (this.triggerKey != null &&
-        this.triggerRange != null &&
-        this.triggerRange.startContainer === this.triggerRange.endContainer) {
-        const triggerRangeNode = this.triggerRange.startContainer;
-        return ((_b = (_a = triggerRangeNode.textContent) === null || _a === void 0 ? void 0 : _a.slice(this.triggerRange.startOffset, this.triggerRange.endOffset)) !== null && _b !== void 0 ? _b : '');
-      }
-      return '';
+    this.readTriggerValue = (value, fromIndex) => {
+      const adjustedValue = value.replace(String.fromCharCode(160), ' ');
+      const beforeSubstr = adjustedValue.substring(0, fromIndex);
+      const afterSubstr = adjustedValue.substring(fromIndex);
+      const adjustedBeforeSubstr = beforeSubstr.includes(this.triggerCharacter)
+        ? beforeSubstr.substring(beforeSubstr.lastIndexOf(this.triggerCharacter))
+        : '';
+      const adjustedAfterSubstr = afterSubstr.substring(0, this.firstIndexOfBreakCharacter(afterSubstr));
+      const result = `${adjustedBeforeSubstr}${adjustedAfterSubstr}`;
+      return result.includes(this.triggerCharacter) &&
+        !this.includesBreakCharacter(result)
+        ? result
+        : undefined;
     };
-    this.restartTriggerInput = () => {
-      this.clearTriggerTimeout();
-      this.triggerTimeout = setTimeout(() => {
-        if (this.triggerRange != null && this.triggerKey != null) {
-          this.triggerCharacterPressed.emit(this.triggerText());
-        }
-        this.triggerTimeout = undefined;
-      }, this.debounce);
+    this.includesBreakCharacter = (value) => {
+      return this.breakCharacters.some((bc) => value.includes(bc));
     };
-    this.clearTriggerTimeout = () => {
-      if (this.triggerTimeout != null) {
-        clearTimeout(this.triggerTimeout);
-        this.triggerTimeout = undefined;
-      }
-    };
-    this.updateCursorPosition = () => {
-      var _a;
-      const selection = getWindowSelection();
-      if (selection != null && selection.rangeCount > 0) {
-        const cursorBounds = selection.getRangeAt(0).getBoundingClientRect();
-        const inputBounds = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        const cursorBottom = cursorBounds.bottom || (inputBounds === null || inputBounds === void 0 ? void 0 : inputBounds.bottom) || 0;
-        const cursorTop = cursorBounds.top || (inputBounds === null || inputBounds === void 0 ? void 0 : inputBounds.top) || 0;
-        this.cursorPosition = {
-          x: cursorBounds.left || (inputBounds === null || inputBounds === void 0 ? void 0 : inputBounds.left) || 0,
-          y: this.placement.includes('top') ? cursorTop : cursorBottom,
-        };
-      }
+    this.firstIndexOfBreakCharacter = (value) => {
+      const indices = this.breakCharacters
+        .map((bc) => value.indexOf(bc))
+        .filter((i) => i >= 0);
+      return indices.length > 0 ? Math.min(...indices) : value.length;
     };
     this.moveCursorToNodeEnd = (node, collapseToStart = false) => {
       const selection = getWindowSelection();
@@ -100,143 +79,124 @@ export class SearchBar {
         selection.addRange(range);
       }
     };
-    this.updateInputCursorPosition = (target) => {
-      if (isHtmlElement(target)) {
-        const targetElement = isReplacedElement(target.parentElement)
-          ? target.parentElement
-          : target;
-        if (isReplacedElement(targetElement)) {
-          this.insertAdjacentTextNode(targetElement);
-        }
+    this.getContentAsString = () => {
+      if (this.contentEl != null) {
+        return trimNonstandardSpaces(Array.from(this.contentEl.childNodes).reduce((res, n) => {
+          var _a;
+          if (n instanceof HTMLElement &&
+            n.getAttribute('data-replaced') === 'true') {
+            return `${res}${n.getAttribute('data-original')}`;
+          }
+          else if (n instanceof HTMLElement) {
+            return `${res}${n.innerText}`;
+          }
+          else {
+            return `${res}${(_a = n.textContent) !== null && _a !== void 0 ? _a : ''}`;
+          }
+        }, ''));
       }
+      return '';
     };
-    this.createReplacedElement = (data) => {
+    this.createReplacedElement = (original, data) => {
       const template = this.hostEl.querySelector('template[slot="replaced"]');
       if (template != null) {
         const instance = generateInstanceFromTemplate(template);
         instance.bindings.bind(data);
+        instance.element.id = data.id;
         instance.element.style.display = 'inline-block';
         instance.element.contentEditable = 'false';
+        instance.element.tabIndex = -1;
         instance.element.setAttribute('data-replaced', 'true');
+        instance.element.setAttribute('data-original', original);
         return instance.element;
       }
       else {
         throw new Error('Replaced template not defined.');
       }
     };
-    this.handleSelectionChange = () => {
-      this.updateTriggerState(this.getSelectionSubstring());
-    };
-    this.getSelectionSubstring = () => {
-      var _a;
-      const selection = getWindowSelection();
-      if (selection != null && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        this.updateTriggerRange();
-        if (range != null &&
-          range.startOffset === range.endOffset &&
-          isTextNode(range.startContainer) &&
-          range.startContainer.textContent != null &&
-          !isReplacedElement(range.startContainer.parentElement) &&
-          ((_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.contains(range.startContainer))) {
-          return range.startContainer.textContent.slice(this.lastIndexOfBreakCharacter(range.startContainer.textContent.slice(0, range.startOffset)) + 1, range.startOffset);
-        }
-      }
-      return '';
-    };
-    this.insertAdjacentTextNode = (el) => {
-      el.insertAdjacentText('afterend', '');
-      if (el.nextSibling != null) {
-        this.moveCursorToNodeEnd(el.nextSibling);
-      }
-    };
-    this.updateTriggerState = (text) => {
-      const triggers = this.triggerCharacter != null
-        ? [...this.triggerCharacters, this.triggerCharacter]
-        : this.triggerCharacters;
-      const trigger = triggers.find((tc) => text.includes(tc));
-      if (trigger != null) {
-        this.restartTriggerInput();
-        this.triggerKey = trigger;
-        this.updateTriggerRange();
-        if (this.cursorPosition == null) {
-          this.updateCursorPosition();
-        }
-        this.open = true;
-      }
-      else {
-        this.clearTriggerState();
-      }
-    };
-    this.updateTriggerRange = () => {
-      var _a;
-      const selection = getWindowSelection();
-      if (selection != null && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        if (this.triggerKey != null) {
-          this.triggerRange = (_a = this.triggerRange) !== null && _a !== void 0 ? _a : range.cloneRange();
-          this.triggerRange.setEnd(range.endContainer, range.endOffset);
-        }
-      }
-    };
-    this.clearTriggerState = () => {
-      this.triggerKey = undefined;
-      this.triggerRange = undefined;
-      this.cursorPosition = undefined;
-      this.open = false;
-      this.clearTriggerTimeout();
-    };
-    this.lastIndexOfBreakCharacter = (search) => {
-      const index = this.breakCharacters.reduce((index, bc) => {
-        const searchIndex = search
-          .replace(String.fromCharCode(160), ' ')
-          .lastIndexOf(bc);
-        return searchIndex > index ? searchIndex : index;
-      }, -1);
-      return index;
-    };
-    this.handleFocus = (ev) => {
-      this.inputFocus.emit(ev);
-    };
-    this.handleBlur = (ev) => {
-      this.open = false;
-      this.inputBlur.emit(ev);
-    };
-    this.handleInputPointerEvent = (ev) => {
-      if (ev.target != null) {
-        this.updateInputCursorPosition(ev.target);
-      }
-    };
-    this.handleResultPointerDown = (ev) => {
-      ev.preventDefault();
-    };
     this.variant = 'standard';
+    this.disabled = false;
+    this.triggerCharacter = '@';
+    this.breakCharacters = [' ', '\n'];
     this.resultItems = undefined;
-    this.triggerCharacters = [];
-    this.triggerCharacter = undefined;
-    this.breakCharacters = [' '];
-    this.debounce = 100;
-    this.placeholder = undefined;
     this.placement = 'bottom-start';
-    this.cursorPosition = undefined;
-    this.open = false;
-    this.triggerKey = undefined;
-    this.triggerRange = undefined;
+    this.value = undefined;
+    this.placeholder = undefined;
+    this.replacements = [];
+    this.cursorPosition = { x: 0, y: 0 };
+    this.displayedElements = [];
+    this.hasTriggered = false;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleWindowClick = this.handleWindowClick.bind(this);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleCursorPositionUpdate =
+      this.handleCursorPositionUpdate.bind(this);
+    this.updateContent = this.updateContent.bind(this);
+    this.replaceContent = this.replaceContent.bind(this);
+  }
+  componentDidLoad() {
+    this.replaceContent(this.value);
   }
-  componentWillLoad() {
-    document.addEventListener('selectionchange', this.handleSelectionChange);
+  connectedCallback() {
+    window.addEventListener('click', this.handleWindowClick);
   }
   disconnectedCallback() {
-    document.removeEventListener('selectionchange', this.handleSelectionChange);
+    window.removeEventListener('click', this.handleWindowClick);
   }
-  async replaceTriggeredValue(data) {
-    this.updateTriggerValue(data);
-    this.clearTriggerState();
-    this.valueChanged.emit();
+  replaceContent(newValue, oldValue) {
+    if (newValue != null && newValue !== oldValue) {
+      const matches = newValue.match(/[a-z]*:[0-9a-z-]{36}/g);
+      const replacementsMap = this.replacements.reduce((map, r) => (Object.assign(Object.assign({}, map), { [createResultUrn(r)]: r })), {});
+      let nextSubstr = newValue;
+      const parts = matches != null
+        ? matches === null || matches === void 0 ? void 0 : matches.reduce((res, m) => {
+          if (replacementsMap[m] != null) {
+            const urn = createResultUrn(replacementsMap[m]);
+            const index = nextSubstr.indexOf(urn);
+            const before = nextSubstr.substring(0, index);
+            const after = nextSubstr.substring(index + urn.length);
+            const replacement = createSearchResultReplacement(replacementsMap[m], before);
+            nextSubstr = after;
+            return [
+              ...res,
+              replacement.before,
+              replacement.beforeSpace,
+              replacement.result,
+            ];
+          }
+          return res;
+        }, [])
+        : [];
+      this.rawElements = [...parts, createTextNode(nextSubstr)];
+      this.updateContent();
+    }
   }
-  async getEditableContent() {
-    var _a;
-    return (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.childNodes;
+  updateContent() {
+    if (this.contentEl != null) {
+      this.contentEl.innerHTML = '';
+      this.displayedElements = this.rawElements.map((el) => {
+        const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
+        const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(r.id));
+        if (raw != null && replacement != null) {
+          const replacementElement = this.createReplacedElement(raw, replacement);
+          return replacementElement;
+        }
+        return el;
+      });
+      this.displayedElements.forEach((el) => {
+        var _a;
+        (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.appendChild(typeof el === 'string' ? createTextNode(el) : el);
+      });
+      if (this.lastReplacedSpace != null) {
+        this.moveCursorToNodeEnd(this.lastReplacedSpace);
+      }
+      this.inputChanged.emit(this.getContentAsString());
+    }
   }
   render() {
     var _a;
@@ -245,11 +205,91 @@ export class SearchBar {
       filled: this.variant === 'filled',
       underlined: this.variant === 'underlined',
       blank: this.variant === 'blank',
+      disabled: this.disabled,
     });
-    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", ref: (ref) => (this.contentEl = ref), role: "textbox", contenteditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, onPointerDown: this.handleInputPointerEvent, onPointerUp: this.handleInputPointerEvent })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.open &&
+    return (h(Host, null, h("div", { class: classes }, h("span", { class: "content-input", role: "textbox", contentEditable: "true", "aria-multiline": "true", "data-placeholder": this.placeholder, ref: (el) => (this.contentEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleCursorPositionUpdate, onClick: this.handleCursorPositionUpdate, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), h("vertex-result-list", { position: this.cursorPosition, placement: this.placement, open: this.hasTriggered &&
         this.resultItems != null &&
-        this.resultItems.length > 0 &&
-        this.cursorPosition != null, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onPointerDown: this.handleResultPointerDown, onEnterPressed: (event) => this.resultsEnterPressed.emit(event.detail) }, h("slot", { name: "results" })), h("slot", { name: "replaced" })));
+        this.resultItems.length > 0, items: (_a = this.resultItems) !== null && _a !== void 0 ? _a : [], onEnterPressed: this.handleResultClick, onResultClick: this.handleResultClick }, h("slot", { name: "results" })), h("slot", { name: "replaced" })));
+  }
+  handleKeyDown(event) {
+    if (this.hasTriggered && this.breakCharacters.includes(event.key)) {
+      this.hasTriggered = false;
+      this.triggeredRange = undefined;
+      this.triggeredElement = undefined;
+    }
+  }
+  handleKeyUp(event) {
+    this.handleCursorPositionUpdate();
+    this.cursorPosition = this.getCursorPosition();
+  }
+  async handleInput() {
+    this.inputChanged.emit(this.getContentAsString());
+  }
+  handleClick() {
+    this.handleCursorPositionUpdate();
+  }
+  handleWindowClick(event) {
+    if (event.target instanceof HTMLElement &&
+      event.target.getAttribute('data-replaced') === 'true' &&
+      event.target.nextSibling != null) {
+      this.moveCursorToNodeEnd(event.target.nextSibling, true);
+    }
+  }
+  handleFocus(event) {
+    this.inputFocus.emit(event);
+  }
+  handleBlur(event) {
+    this.hasTriggered = false;
+    this.inputBlur.emit(event);
+  }
+  handleResultClick(event) {
+    var _a;
+    const triggeredRange = this.triggeredRange;
+    const triggeredElement = this.triggeredElement;
+    const value = triggeredElement instanceof HTMLElement
+      ? triggeredElement.innerText
+      : triggeredElement === null || triggeredElement === void 0 ? void 0 : triggeredElement.textContent;
+    if (this.contentEl != null &&
+      triggeredRange != null &&
+      triggeredElement != null &&
+      value != null) {
+      const triggeredValue = (_a = this.readTriggerValue(value, triggeredRange.startOffset)) !== null && _a !== void 0 ? _a : '';
+      const split = value.split(triggeredValue);
+      const before = split[0];
+      const after = split[1];
+      const replacement = createSearchResultReplacement(event.detail, before, after);
+      this.lastReplacedSpace = replacement.afterSpace;
+      this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
+        // TODO: see if we can do anything about the collapse to single line in safari
+        if (this.isIdenticalElement(e, triggeredElement)) {
+          return [...re, ...getNodesForSearchResultReplacement(replacement)];
+        }
+        else {
+          return [...re, e];
+        }
+      }, []);
+      this.hasTriggered = false;
+      this.replacements = [
+        ...this.replacements.filter((r) => r.id !== event.detail.id),
+        event.detail,
+      ];
+      this.resultReplaced.emit(event.detail);
+    }
+  }
+  getCursorPosition() {
+    var _a;
+    const selection = getWindowSelection();
+    if (selection != null && selection.rangeCount > 0) {
+      const cursorBounds = selection.getRangeAt(0).getBoundingClientRect();
+      const contentBounds = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      const cursorBottom = cursorBounds.bottom || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.bottom) || 0;
+      const cursorTop = cursorBounds.top || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.top) || 0;
+      return {
+        x: cursorBounds.left || (contentBounds === null || contentBounds === void 0 ? void 0 : contentBounds.left) || 0,
+        y: this.placement.includes('top') ? cursorTop : cursorBottom,
+      };
+    }
+    throw new Error('Unable to retrieve window selection.');
   }
   static get is() { return "vertex-search-bar"; }
   static get encapsulation() { return "scoped"; }
@@ -281,64 +321,47 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The search bar variant to display.\n\nPossible options are:\n- 'standard' (default)\n- 'filled'\n- 'underlined'\n- 'blank"
         },
         "attribute": "variant",
         "reflect": false,
         "defaultValue": "'standard'"
       },
-      "resultItems": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "Result[]",
-          "resolved": "Result[] | undefined",
-          "references": {
-            "Result": {
-              "location": "import",
-              "path": "../result-list/result-list"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "triggerCharacters": {
-        "type": "unknown",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string[]",
-          "resolved": "string[]",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Whether this search bar is disabled."
         },
-        "defaultValue": "[]"
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "triggerCharacter": {
         "type": "string",
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string | undefined",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The character indicating that we should trigger a search.\n\nWhen this character is encountered, the text following it\n(omitting `breakCharacters`) will be emitted as a `searchChanged`\nevent."
         },
         "attribute": "trigger-character",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'@'"
       },
       "breakCharacters": {
         "type": "unknown",
@@ -352,29 +375,57 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Characters that should trigger a \"break\" of the search. If\na value in this list is encountered when trying to parse back\nto the `triggerCharacter`, this will hide the result list."
         },
-        "defaultValue": "[' ']"
+        "defaultValue": "[' ', '\\n']"
       },
-      "debounce": {
-        "type": "number",
+      "resultItems": {
+        "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "Result[]",
+          "resolved": "Result[] | undefined",
+          "references": {
+            "Result": {
+              "location": "import",
+              "path": "../result-list/result-list"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The items to display in this search bar's `<vertex-result-list>`.\n\nThis can be used alongside the `searchChanged` event to query for\nresults to display."
+        }
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverPlacement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "PopoverPlacement": {
+              "location": "import",
+              "path": "../popover/popover"
+            }
+          }
         },
-        "attribute": "debounce",
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": " (PopoverPlacement)"
+            }],
+          "text": "The placement of the result list for this search bar.\n\nCorresponds to the value for the underlying <vertex-popover>\nplacement value."
+        },
+        "attribute": "placement",
         "reflect": false,
-        "defaultValue": "100"
+        "defaultValue": "'bottom-start'"
       },
-      "placeholder": {
+      "value": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -386,21 +437,38 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Placeholder for text input."
+          "text": "The initial value of this search bar. This will be used in\ncombination with the value of `replacements` to display existing\nreplaced values."
         },
-        "attribute": "placeholder",
+        "attribute": "value",
         "reflect": false
       },
-      "placement": {
+      "placeholder": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PopoverPlacement",
-          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A placeholder to display when no text has been entered."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "replacements": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Result[]",
+          "resolved": "Result[]",
           "references": {
-            "PopoverPlacement": {
+            "Result": {
               "location": "import",
-              "path": "../popover/popover"
+              "path": "../result-list/result-list"
             }
           }
         },
@@ -408,32 +476,29 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Replaced result values. This will be used in combination with the\nvalue of `value` to display existing replaced values.\n\nThis value will be automatically updated as `Result`s are clicked\nwithin this search bar's `<vertex-result-list>`."
         },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'bottom-start'"
+        "defaultValue": "[]"
       }
     };
   }
   static get states() {
     return {
       "cursorPosition": {},
-      "open": {},
-      "triggerKey": {},
-      "triggerRange": {}
+      "displayedElements": {},
+      "hasTriggered": {}
     };
   }
   static get events() {
     return [{
-        "method": "triggerCharacterPressed",
-        "name": "triggerCharacterPressed",
+        "method": "searchChanged",
+        "name": "searchChanged",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the value of the current search triggered by\nthe specified `triggerCharacter` has changed."
         },
         "complexType": {
           "original": "string",
@@ -441,48 +506,49 @@ export class SearchBar {
           "references": {}
         }
       }, {
-        "method": "valueChanged",
-        "name": "valueChanged",
+        "method": "inputChanged",
+        "name": "inputChanged",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when the value has changed."
+          "text": "Emitted when the value of the input has changed."
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         }
       }, {
-        "method": "inputFocus",
-        "name": "inputFocus",
+        "method": "resultReplaced",
+        "name": "resultReplaced",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when input focused"
+          "text": "Emitted when a result has been selected to replace the trigger text.\n\nIncludes the ID of the `Result` selected."
         },
         "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
+          "original": "Result",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
           "references": {
-            "FocusEvent": {
-              "location": "global"
+            "Result": {
+              "location": "import",
+              "path": "../result-list/result-list"
             }
           }
         }
       }, {
-        "method": "inputBlur",
-        "name": "inputBlur",
+        "method": "inputFocus",
+        "name": "inputFocus",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when input blurred"
+          "text": "Emitted when the input is focused."
         },
         "complexType": {
           "original": "FocusEvent",
@@ -494,74 +560,34 @@ export class SearchBar {
           }
         }
       }, {
-        "method": "resultsEnterPressed",
-        "name": "resultsEnterPressed",
+        "method": "inputBlur",
+        "name": "inputBlur",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when enter is pressed an a result is highlighted."
+          "text": "Emitted when the input is blurred."
         },
         "complexType": {
-          "original": "Result",
-          "resolved": "{ [x: string]: unknown; }",
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
           "references": {
-            "Result": {
-              "location": "import",
-              "path": "../result-list/result-list"
+            "FocusEvent": {
+              "location": "global"
             }
           }
         }
       }];
   }
-  static get methods() {
-    return {
-      "replaceTriggeredValue": {
-        "complexType": {
-          "signature": "(data: Record<string, unknown>) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "Record": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "getEditableContent": {
-        "complexType": {
-          "signature": "() => Promise<NodeListOf<ChildNode> | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "NodeListOf": {
-              "location": "global"
-            },
-            "ChildNode": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<NodeListOf<ChildNode> | undefined>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
   static get elementRef() { return "hostEl"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "replaceContent"
+      }, {
+        "propName": "replacements",
+        "methodName": "updateContent"
+      }];
+  }
 }