@vertexvis/ui 0.1.0-canary.6 → 0.1.0-canary.8

package/dist/cjs/{text-field-0397fb34.js → text-field-bccbde1f.js}

@@ -81,6 +81,7 @@ const TextField = class {
   render() {
     var _a;
     const classes = index$1.classnames('txt-wrapper', {
+      'txt-wrapper-border': !this.multiline,
       'txt-standard': this.variant === 'standard',
       'txt-filled': this.variant === 'filled',
       'txt-underlined': this.variant === 'underlined',

package/dist/cjs/vertex-result-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const resultList = require('./result-list-1e592c3c.js');
+const resultList = require('./result-list-241ffe8d.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-bb40cfa7.js');
+const searchBar = require('./search-bar-91cbcd07.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/cjs/vertex-textfield.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const textField = require('./text-field-0397fb34.js');
+const textField = require('./text-field-bccbde1f.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 

package/dist/collection/collection-manifest.json

@@ -12,7 +12,6 @@
     "./components/icon-button/icon-button.js",
     "./components/radio/radio.js",
     "./components/resizable/resizable.js",
-    "./components/result-list/result-list.js",
     "./components/search-bar/search-bar.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
@@ -36,6 +35,7 @@
     "./components/menu-divider/menu-divider.js",
     "./components/menu-item/menu-item.js",
     "./components/radio-group/radio-group.js",
+    "./components/result-list/result-list.js",
     "./components/select/select.js",
     "./components/tooltip/tooltip.js"
   ],

package/dist/collection/components/result-list/result-list.js

@@ -1,6 +1,6 @@
 import { h, Host, } from '@stencil/core';
 import classNames from 'classnames';
-import { ElementPool } from '../../util/templates/element-pool';
+import { ElementPool, } from '../../util/templates/element-pool';
 import { generateInstanceFromTemplate, } from '../../util/templates/templates';
 import { getResultListHeight, scrollToResult } from './lib';
 export class ResultList {
@@ -29,7 +29,7 @@ export class ResultList {
       }
     };
     this.createResultPool = () => {
-      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance());
+      this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
     };
     this.createResultInstance = () => {
       if (this.stateMap.resultTemplate != null) {
@@ -41,6 +41,18 @@ export class ResultList {
         throw new Error('Result template not defined.');
       }
     };
+    this.createResultHandlers = () => {
+      return [
+        {
+          type: 'pointerdown',
+          handler: this.handlePointerDown,
+        },
+        {
+          type: 'click',
+          handler: this.handleResultClick,
+        },
+      ];
+    };
     this.layoutResults = () => {
       var _a, _b, _c, _d;
       const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
@@ -61,6 +73,7 @@ export class ResultList {
           el.style.top = `${(this.viewportStartIndex + index) * this.resultHeight}px`;
           el.style.width = '100%';
           el.setAttribute('is-focused', `${this.viewportStartIndex + index === this.lastFocusedIndex}`);
+          el.setAttribute('data-result-id', result.id);
           binding.bind(result);
         }
       });
@@ -103,6 +116,8 @@ export class ResultList {
     this.lastStartIndex = 0;
     this.lastFocusedIndex = 0;
     this.stateMap = {};
+    this.handleResultClick = this.handleResultClick.bind(this);
+    this.handlePointerDown = this.handlePointerDown.bind(this);
   }
   handleResultsChanged(results) {
     if (typeof results === 'string') {
@@ -148,6 +163,16 @@ export class ResultList {
         height: `${this.parsedResults.length * this.resultHeight}px`,
       } }, h("slot", null), h("slot", { name: "result" })))))));
   }
+  handlePointerDown(event) {
+    event.preventDefault();
+  }
+  handleResultClick(event) {
+    const closestIdElement = event.target.closest('[data-result-id]');
+    const result = this.parsedResults.find((r) => r.id === (closestIdElement === null || closestIdElement === void 0 ? void 0 : closestIdElement.getAttribute('data-result-id')));
+    if (result != null) {
+      this.resultClick.emit(result);
+    }
+  }
   computeViewportResults() {
     const viewportHeight = this.getListHeight();
     if (viewportHeight != null && this.resultHeight > 0) {
@@ -188,7 +213,8 @@ export class ResultList {
           "resolved": "Result[]",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         },
@@ -377,10 +403,31 @@ export class ResultList {
         },
         "complexType": {
           "original": "Result",
-          "resolved": "{ [x: string]: unknown; }",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+          "references": {
+            "Result": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        }
+      }, {
+        "method": "resultClick",
+        "name": "resultClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Result",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         }

package/dist/collection/components/result-list/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+export const getWindowSelection = () => {
+  if (typeof window !== 'undefined') {
+    return window.getSelection();
+  }
+  return undefined;
+};
+export const createDocumentRange = () => {
+  return document.createRange();
+};
+export const createTextNode = (text) => {
+  return new Text(text);
+};

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

@@ -1,21 +1,41 @@
-export const getWindowSelection = () => {
-  if (typeof window !== 'undefined') {
-    return window.getSelection();
-  }
-  return undefined;
+import { createTextNode } from './dom';
+export const createResultUri = (result) => {
+  return `${result.type}:${result.id}`;
 };
-export const createDocumentRange = () => {
-  return document.createRange();
+export const createSearchResultReplacement = (result, before, after) => {
+  const urn = createResultUri(result);
+  return {
+    before: createTextNode(before),
+    beforeSpace: createTextNode(createHairSpace()),
+    result: createTextNode(urn),
+    afterSpace: after != null ? createTextNode(createNoBreakSpace()) : undefined,
+    after: after != null ? createTextNode(after) : undefined,
+  };
 };
-export const isTextNode = (node) => {
-  return node instanceof Text;
+export const getNodesForSearchResultReplacement = (replacement) => {
+  const keys = Object.keys(replacement);
+  return keys
+    .map((key) => replacement[key])
+    .filter((node) => node != null);
 };
-export const isHtmlElement = (target) => {
-  return target instanceof HTMLElement;
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
+export const trimNonstandardSpaces = (text) => {
+  return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };
-export const isReplacedElement = (el) => {
-  return (el === null || el === void 0 ? void 0 : el.getAttribute('data-replaced')) === 'true';
+const createHairSpace = () => {
+  return String.fromCharCode(8202);
 };
-export const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+const createNoBreakSpace = () => {
+  return String.fromCharCode(160);
 };

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

@@ -11,15 +11,6 @@
   line-height: 1.4;
 }
 
-.test-mention {
-  display: inline-block;
-  color: blue;
-}
-
-.hidden {
-  visibility: hidden;
-}
-
 .content-input {
   width: 100%;
   box-sizing: border-box;
@@ -33,13 +24,6 @@
   white-space: pre-line;
 }
 
-.textarea {
-  overflow: hidden;
-  outline: none;
-  box-shadow: none;
-  resize: none;
-}
-
 .content-input:focus {
   outline: none;
 }