@vertexvis/ui 0.1.0-canary.2 → 0.1.0-canary.20

package/dist/collection/components/icon-button/icon-button.js

@@ -50,7 +50,7 @@ export class IconButton {
         "mutable": false,
         "complexType": {
           "original": "IconName",
-          "resolved": "\"help\" | \"open\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"plus\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"version-history\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
+          "resolved": "\"compare\" | \"help\" | \"open\" | \"expand\" | \"info\" | \"copy\" | \"menu\" | \"ellipse\" | \"line\" | \"download\" | \"rotate\" | \"close\" | \"flip\" | \"reset\" | \"resize\" | \"search\" | \"caret-down\" | \"caret-up\" | \"adjustments\" | \"align-to-global\" | \"align-to-part\" | \"align-to-surface\" | \"align-view-to-plane\" | \"annotation\" | \"arrow-filled\" | \"arrow-line-left\" | \"arrow-line-right\" | \"arrow-partial\" | \"arrow-triangle-left\" | \"arrow-triangle-right\" | \"arrow-up-circled\" | \"attachment\" | \"axis-x\" | \"axis-y\" | \"axis-z\" | \"back\" | \"box-cursor\" | \"box-select\" | \"camera\" | \"caret-left\" | \"caution\" | \"check\" | \"check-circle\" | \"caret-right\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"circle-outline\" | \"close-circle-fill\" | \"close-circle\" | \"collapse-all\" | \"columns\" | \"comment-add\" | \"comment-filled\" | \"comment-reopen\" | \"comment-resolve\" | \"comment-show\" | \"compress\" | \"cross-section\" | \"cube-orthographic\" | \"cube-perspective\" | \"cube-stack\" | \"delete\" | \"drag-indicator\" | \"error-circle\" | \"expand-all\" | \"export\" | \"file\" | \"file-pdf\" | \"fit-all\" | \"fit-selected\" | \"folder-plus\" | \"forward\" | \"gear\" | \"invert\" | \"line-dot-left\" | \"line-dot-right\" | \"line-hash-left\" | \"line-hash-right\" | \"locate\" | \"markup\" | \"notification\" | \"open-window\" | \"pan\" | \"pencil\" | \"person-height\" | \"person-run\" | \"person-short\" | \"person-tall\" | \"person-walk\" | \"pin-fill\" | \"pin-line\" | \"pin-text\" | \"pin-text-fill\" | \"pin-text-square\" | \"plus\" | \"plus-with-arrow\" | \"pmi\" | \"precise-measurement\" | \"rabbit\" | \"ruler\" | \"show-only-nearby\" | \"snapshots\" | \"star\" | \"tape-measure\" | \"teleport-and-align\" | \"teleport-toward\" | \"teleport\" | \"turtle\" | \"update\" | \"version-history\" | \"views\" | \"visibility-hidden\" | \"visibility-partial\" | \"visibility-visible\" | \"zoom\"",
           "references": {
             "IconName": {
               "location": "import",

package/dist/collection/components/index.js

@@ -8,9 +8,9 @@ export * from './card-group/card-group';
 export * from './chip/chip';
 export * from './click-to-edit-text-field/click-to-edit-text-field';
 export * from './collapsible/collapsible';
-export * from './color-circle/color-circle';
 export * from './color-circle-picker/color-circle-picker';
 export * from './color-picker/color-picker';
+export * from './color-swatch/color-swatch';
 export * from './context-menu/context-menu';
 export * from './dialog/dialog';
 export * from './draggable-popover/draggable-popover';
@@ -32,6 +32,8 @@ export * from './search-bar/search-bar';
 export * from './select/select';
 export * from './slider/slider';
 export * from './spinner/spinner';
+export * from './tab/tab';
+export * from './tabs/tabs';
 export * from './text-field/text-field';
 export * from './toast/toast';
 export * from './toggle/toggle';

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) {
@@ -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,29 @@
+export const getWindowSelection = () => {
+  if (typeof window !== 'undefined') {
+    return window.getSelection();
+  }
+  return undefined;
+};
+export const nodeHasChildNodes = (node) => {
+  return node.hasChildNodes();
+};
+export const createDocumentRange = () => {
+  return document.createRange();
+};
+export const createTextNode = (text) => {
+  return new Text(text);
+};
+export const createBreak = () => {
+  return document.createElement('br');
+};
+export const createWrappingDiv = (nodes) => {
+  const el = document.createElement('div');
+  el.append(...nodes);
+  return el;
+};
+export const isHtmlElement = (node) => {
+  return node instanceof HTMLElement;
+};
+export const isBrElement = (node) => {
+  return node instanceof HTMLBRElement;
+};

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

@@ -1,21 +1,82 @@
-export const getWindowSelection = () => {
-  if (typeof window !== 'undefined') {
-    return window.getSelection();
-  }
-  return undefined;
+import { createBreak, 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())
+      : createTextNode(createHairSpace()),
+    after: after != null ? createTextNode(after) : undefined,
+  };
 };
-export const isTextNode = (node) => {
-  return node instanceof Text;
+/**
+ * Newline characters and spaces are represented slightly differently within a
+ * content editable element between browsers. This method standardizes the
+ * representation of those characters to avoid having to write branching logic
+ * to support each individual browser.
+ */
+export const standardizeNewlinesAndSpaces = (node) => {
+  const content = node.textContent;
+  if (content === '\n') {
+    return [createBreak()];
+  }
+  else if (content != null && content.includes('\n')) {
+    const split = content.split('\n');
+    return split.reduce((res, substr, i) => {
+      const previous = split[i - 1];
+      // Ignore the empty string if the prior element was converted
+      // to a breaking element to prevent duplication of newlines.
+      if (substr === '' && previous !== '') {
+        return res;
+      }
+      return [
+        ...res,
+        // Standard spaces are not always respected with in `Text`
+        // elements when appended to a contenteditable element. This
+        // conversion preserves that spacing.
+        createTextNode(substr.replace(/ /g, createNoBreakSpace())),
+        createBreak(),
+      ];
+    }, []);
+  }
+  return [node];
+};
+export const getNodesForSearchResultReplacement = (replacement, isBreaking = false) => {
+  const keys = Object.keys(replacement);
+  const replacementElements = keys
+    .map((key) => replacement[key])
+    .filter((node) => node != null);
+  // If the element is intended to replace a breaking element such
+  // as a `<div>` wrapper, a newline is required alongside the standard
+  // replacement elements.
+  if (isBreaking) {
+    return [createTextNode('\n'), ...replacementElements];
+  }
+  return replacementElements;
 };
-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;
 }