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

package/dist/collection/components/menu/menu.js

@@ -182,7 +182,7 @@ export class Menu {
         "mutable": false,
         "complexType": {
           "original": "Partial<Popover>",
-          "resolved": "undefined | ({ open?: boolean | undefined; placement?: Placement | undefined; position?: string | Point | undefined; anchorBounds?: Pick<DOMRect, \"height\" | \"width\" | \"x\" | \"y\"> | undefined; backdrop?: boolean | undefined; animated?: boolean | undefined; anchorSelector?: string | undefined; boundarySelector?: string | undefined; resizeBehavior?: PopoverResizeBehavior | undefined; overflowBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; } | undefined; flipBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; crossAxis?: boolean | undefined; mainAxis?: boolean | undefined; fallbackPlacements?: Placement[] | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; boundary?: Boundary | undefined; } | undefined; offsetBehavior?: OffsetOptions | undefined; updateOnResize?: boolean | undefined; dismissed?: EventEmitter<void> | undefined; connectedCallback?: (() => void) | undefined; componentDidUpdate?: (() => void) | undefined; componentDidLoad?: (() => void) | undefined; disconnectedCallback?: (() => void) | undefined; updatePosition?: ((position?: string | Point | undefined) => void) | undefined; updatePlacement?: (() => void) | undefined; updateOpened?: ((open?: boolean | undefined) => void) | undefined; updateAnimated?: (() => void) | undefined; updateMiddleware?: (() => void) | undefined; setWindow?: ((partialWindow: Pick<Window, \"innerHeight\" | \"innerWidth\">) => void) | undefined; render?: (() => IntrinsicElements) | undefined; })",
+          "resolved": "undefined | ({ open?: boolean | undefined; placement?: Placement | undefined; position?: string | Point | undefined; anchorBounds?: Pick<DOMRect, \"height\" | \"width\" | \"x\" | \"y\"> | undefined; backdrop?: boolean | undefined; animated?: boolean | undefined; anchorSelector?: string | undefined; boundarySelector?: string | undefined; resizeBehavior?: PopoverResizeBehavior | undefined; overflowBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; boundary?: Boundary | undefined; } | undefined; flipBehavior?: { rootBoundary?: RootBoundary | undefined; elementContext?: ElementContext | undefined; altBoundary?: boolean | undefined; padding?: Padding | undefined; crossAxis?: boolean | undefined; mainAxis?: boolean | undefined; fallbackPlacements?: Placement[] | undefined; fallbackStrategy?: \"bestFit\" | \"initialPlacement\" | undefined; fallbackAxisSideDirection?: \"none\" | \"start\" | \"end\" | undefined; flipAlignment?: boolean | undefined; boundary?: Boundary | undefined; } | undefined; offsetBehavior?: OffsetOptions | undefined; updateOnResize?: boolean | undefined; dismissed?: EventEmitter<void> | undefined; resizeObserverFactory?: ((cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver) | undefined; connectedCallback?: (() => void) | undefined; componentDidUpdate?: (() => void) | undefined; componentDidLoad?: (() => void) | undefined; disconnectedCallback?: (() => void) | undefined; updatePosition?: ((position?: string | Point | undefined) => void) | undefined; updatePlacement?: (() => void) | undefined; updateOpened?: ((open?: boolean | undefined) => void) | undefined; updateAnimated?: (() => void) | undefined; updateMiddleware?: (() => void) | undefined; updateResizeObserver?: (() => void) | undefined; setWindow?: ((partialWindow: Pick<Window, \"innerHeight\" | \"innerWidth\">) => void) | undefined; render?: (() => IntrinsicElements) | undefined; })",
           "references": {
             "Partial": {
               "location": "global"

package/dist/collection/components/popover/popover.js

@@ -24,13 +24,17 @@ export class Popover {
     this.updateOnResize = false;
     this.opened = false;
     this.computedPlacement = this.placement;
+    this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
     this.updateListener = this.updateListener.bind(this);
     this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.handleMiddlewareChange = this.handleMiddlewareChange.bind(this);
     this.setWindow = this.setWindow.bind(this);
+    this.updateResizeObserver = this.updateResizeObserver.bind(this);
   }
   connectedCallback() {
     this.updatePosition(this.position);
+    this.updateResizeObserver();
   }
   componentDidUpdate() {
     if (this.shouldUpdatePosition) {
@@ -52,12 +56,14 @@ export class Popover {
     }
   }
   disconnectedCallback() {
+    var _a;
     this.viewportWidth = undefined;
     this.viewportHeight = undefined;
     this.opened = false;
     if (this.resizeBehavior === 'dynamic') {
       window.removeEventListener('resize', this.handleResize);
     }
+    (_a = this.boundaryResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   updatePosition(position) {
     if (position != null) {
@@ -81,6 +87,16 @@ export class Popover {
   updateMiddleware() {
     this.handleMiddlewareChange();
   }
+  updateResizeObserver() {
+    const observer = this.getOrCreateResizeObserver();
+    observer.disconnect();
+    if (this.boundarySelector != null) {
+      const element = document.querySelector(this.boundarySelector);
+      if (element != null) {
+        observer.observe(element);
+      }
+    }
+  }
   /**
    * @private Used for internals or testing.
    */
@@ -186,6 +202,12 @@ export class Popover {
     this.viewportWidth = this.partialWindow.innerWidth;
     this.viewportHeight = this.partialWindow.innerHeight;
   }
+  getOrCreateResizeObserver() {
+    if (this.boundaryResizeObserver == null) {
+      this.boundaryResizeObserver = this.resizeObserverFactory(this.handleMiddlewareChange);
+    }
+    return this.boundaryResizeObserver;
+  }
   getTransformClass() {
     if (this.animated) {
       switch (this.computedPlacement) {
@@ -485,6 +507,32 @@ export class Popover {
         "attribute": "update-on-resize",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "resizeObserverFactory": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(\n    cb: (entries: ResizeObserverEntry[]) => void\n  ) => ResizeObserver",
+          "resolved": "(cb: (entries: ResizeObserverEntry[]) => void) => ResizeObserver",
+          "references": {
+            "ResizeObserverEntry": {
+              "location": "global"
+            },
+            "ResizeObserver": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "defaultValue": "(cb) => new ResizeObserver(cb)"
       }
     };
   }
@@ -538,6 +586,9 @@ export class Popover {
       }, {
         "propName": "offsetBehavior",
         "methodName": "updateMiddleware"
+      }, {
+        "propName": "boundarySelector",
+        "methodName": "updateResizeObserver"
       }];
   }
 }

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) {
@@ -377,7 +402,26 @@ export class ResultList {
         },
         "complexType": {
           "original": "Result",
-          "resolved": "{ [x: string]: unknown; }",
+          "resolved": "{ id: string; type: string; } & Record<string, unknown>",
+          "references": {
+            "Result": {
+              "location": "local"
+            }
+          }
+        }
+      }, {
+        "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"

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 != null && text !== '' ? text : ' ');
+};

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

@@ -1,21 +1,29 @@
-export const getWindowSelection = () => {
-  if (typeof window !== 'undefined') {
-    return window.getSelection();
-  }
-  return undefined;
+import { createTextNode } from './dom';
+export const createResultUrn = (result) => {
+  return `${result.type}:${result.id}`;
 };
-export const createDocumentRange = () => {
-  return document.createRange();
+export const createSearchResultReplacement = (result, before, after) => {
+  const urn = createResultUrn(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;
+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

@@ -1,23 +1,7 @@
 .wrapper {
   display: flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  font-family: var(--vertex-ui-font-family);
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.test-mention {
-  display: inline-block;
-  color: blue;
-}
-
-.hidden {
-  visibility: hidden;
+  border: 1px solid var(--vertex-ui-neutral-600);
+  border-radius: 0.5rem;
 }
 
 .content-input {
@@ -33,17 +17,6 @@
   white-space: pre-line;
 }
 
-.textarea {
-  overflow: hidden;
-  outline: none;
-  box-shadow: none;
-  resize: none;
-}
-
-.content-input:focus {
-  outline: none;
-}
-
 /* standard */
 .standard {
   border-color: var(--vertex-ui-neutral-400);