@vertexvis/ui 0.1.0-canary.7 → 0.1.0-canary.9

package/dist/types/components/search-bar/search-bar.d.ts

@@ -1,67 +1,149 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { PopoverPlacement } from '../popover/popover';
-import { Result } from '../result-list/result-list';
+import { Result } from '../result-list/types';
 export type SearchBarVariant = 'standard' | 'filled' | 'underlined' | 'blank';
 export declare class SearchBar {
+  /**
+   * The search bar variant to display.
+   *
+   * Possible options are:
+   * - 'standard' (default)
+   * - 'filled'
+   * - 'underlined'
+   * - 'blank
+   */
   variant: SearchBarVariant;
-  resultItems?: Result[];
-  triggerCharacters: string[];
-  triggerCharacter?: string;
+  /**
+   * Whether this search bar is disabled.
+   */
+  disabled: boolean;
+  /**
+   * The character indicating that we should trigger a search.
+   *
+   * When this character is encountered, the text following it
+   * (omitting `breakCharacters`) will be emitted as a `searchChanged`
+   * event.
+   */
+  triggerCharacter: string;
+  /**
+   * Characters that should trigger a "break" of the search. If
+   * a value in this list is encountered when trying to parse back
+   * to the `triggerCharacter`, this will hide the result list.
+   */
   breakCharacters: string[];
-  debounce: number;
   /**
-   * Placeholder for text input.
+   * The items to display in this search bar's `<vertex-result-list>`.
+   *
+   * This can be used alongside the `searchChanged` event to query for
+   * results to display.
+   */
+  resultItems?: Result[];
+  /**
+   * The placement of the result list for this search bar.
+   *
+   * Corresponds to the value for the underlying <vertex-popover>
+   * placement value.
+   * @see(PopoverPlacement)
    */
-  placeholder?: string;
   placement: PopoverPlacement;
-  triggerCharacterPressed: EventEmitter<string>;
-  private cursorPosition?;
-  private open;
-  private triggerKey?;
-  private triggerRange?;
-  private hostEl;
   /**
-   * Emitted when the value has changed.
+   * The initial value of this search bar. This will be used in
+   * combination with the value of `replacements` to display existing
+   * replaced values.
    */
-  valueChanged: EventEmitter<void>;
+  value?: string;
   /**
-   * Emitted when input focused
+   * A placeholder to display when no text has been entered.
    */
-  inputFocus: EventEmitter<FocusEvent>;
+  placeholder?: string;
   /**
-   * Emitted when input blurred
+   * Replaced result values. This will be used in combination with the
+   * value of `value` to display existing replaced values.
+   *
+   * This value will be automatically updated as `Result`s are clicked
+   * within this search bar's `<vertex-result-list>`.
    */
-  inputBlur: EventEmitter<FocusEvent>;
+  replacements: Result[];
+  /**
+   * The URI type of the values to replace. When `replacements` are
+   * evaluated, this value will be used as the scheme portion of the
+   * URI to detect matches.
+   *
+   * Defaults to `user`, and will match URIs composed with the `user`
+   * scheme and a UUID. E.g.
+   * `user:00000000-0000-0000-0000-000000000000`
+   */
+  replacementUriType: string;
+  /**
+   * Emitted when the value of the current search triggered by
+   * the specified `triggerCharacter` has changed.
+   */
+  searchChanged: EventEmitter<string>;
+  /**
+   * Emitted when the value of the input has changed.
+   */
+  inputChanged: EventEmitter<string>;
+  /**
+   * Emitted when a result has been selected to replace the trigger text.
+   *
+   * Includes the ID of the `Result` selected.
+   */
+  resultReplaced: EventEmitter<Result>;
+  /**
+   * Emitted when the input is focused.
+   */
+  inputFocus: EventEmitter<FocusEvent>;
   /**
-   * Emitted when enter is pressed an a result is highlighted.
+   * Emitted when the input is blurred.
    */
-  resultsEnterPressed: EventEmitter<Result>;
+  inputBlur: EventEmitter<FocusEvent>;
+  private hostEl;
+  private cursorPosition?;
+  private displayedElements;
+  private hasTriggered;
   private contentEl?;
-  private triggerTimeout?;
-  protected componentWillLoad(): void;
+  private triggeredElement?;
+  private triggeredRange?;
+  private rawElements;
+  private lastReplacedSpace?;
+  constructor();
+  protected componentDidLoad(): void;
+  protected connectedCallback(): void;
   protected disconnectedCallback(): void;
-  replaceTriggeredValue(data: Record<string, unknown>): Promise<void>;
-  getEditableContent(): Promise<NodeListOf<ChildNode> | undefined>;
+  protected replaceContent(newValue?: string, oldValue?: string): void;
+  protected updateContent(newValue?: Result[], oldValue?: Result[]): void;
   render(): h.JSX.IntrinsicElements;
   private handleKeyDown;
   private handleKeyUp;
-  private updateTriggerValue;
-  private triggerText;
-  private restartTriggerInput;
-  private clearTriggerTimeout;
-  private updateCursorPosition;
-  private moveCursorToNodeEnd;
-  private updateInputCursorPosition;
-  private createReplacedElement;
-  private handleSelectionChange;
-  private getSelectionSubstring;
-  private insertAdjacentTextNode;
-  private updateTriggerState;
-  private updateTriggerRange;
-  private clearTriggerState;
-  private lastIndexOfBreakCharacter;
+  private handleInput;
+  private handleClick;
+  private handleWindowClick;
   private handleFocus;
   private handleBlur;
-  private handleInputPointerEvent;
-  private handleResultPointerDown;
+  private handleResultClick;
+  private isIdenticalElement;
+  private getTextContent;
+  private getCursorPosition;
+  /**
+   * Inspects the cursor position for the following conditions:
+   *
+   * 1. The cursor has moved to text that contains a valid string
+   * and trigger character, indicating we need to dispatch a
+   * `searchChanged` event and display the results.
+   *
+   * 2. The cursor has moved within text that contains a valid string
+   * and trigger character, indicating we need to dispatch a
+   * `searchChanged` event to update the currently displayed results.
+   *
+   * 3. The cursor has moved to text that does not contain a valid
+   * string and trigger character, indicating we need to hide any
+   * displayed search results.
+   */
+  private handleCursorPositionUpdate;
+  private readTriggerValue;
+  private includesBreakCharacter;
+  private firstIndexOfBreakCharacter;
+  private moveCursorToNodeEnd;
+  private getContentAsString;
+  private createReplacedElement;
 }

package/dist/types/components.d.ts

@@ -21,9 +21,8 @@ import { PopoverPlacement as PopoverPlacement1, PopoverResizeBehavior } from "./
 import { DetectOverflowOptions, FlipOptions, OffsetOptions } from "@floating-ui/dom";
 import { RadioChangeEventDetail } from "./components/radio/radio";
 import { HorizontalDragDirection, ResizableBoundsUpdate, ResizeEventDetails, VerticalDragDirection } from "./components/resizable/resizable";
-import { Result } from "./components/result-list/result-list";
+import { Result } from "./components/result-list/types";
 import { SearchBarVariant } from "./components/search-bar/search-bar";
-import { Result as Result1 } from "./components/result-list/result-list";
 import { LabelDisplay, SliderChangeEventDetails, SliderSize } from "./components/slider/slider";
 import { SpinnerColor, SpinnerSize } from "./components/spinner/spinner";
 import { InputChangeEventDetail as InputChangeEventDetail1, TextFieldAutocomplete, TextFieldType, TextFieldVariant, TextSize as TextSize1 } from "./components/text-field/text-field";
@@ -572,18 +571,46 @@ export namespace Components {
         "viewportStartIndex": number;
     }
     interface VertexSearchBar {
+        /**
+          * Characters that should trigger a "break" of the search. If a value in this list is encountered when trying to parse back to the `triggerCharacter`, this will hide the result list.
+         */
         "breakCharacters": string[];
-        "debounce": number;
-        "getEditableContent": () => Promise<NodeListOf<ChildNode> | undefined>;
         /**
-          * Placeholder for text input.
+          * Whether this search bar is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * A placeholder to display when no text has been entered.
          */
         "placeholder"?: string;
+        /**
+          * The placement of the result list for this search bar.  Corresponds to the value for the underlying <vertex-popover> placement value.
+          * @see  (PopoverPlacement)
+         */
         "placement": PopoverPlacement;
-        "replaceTriggeredValue": (data: Record<string, unknown>) => Promise<void>;
-        "resultItems"?: Result1[];
-        "triggerCharacter"?: string;
-        "triggerCharacters": string[];
+        /**
+          * The URI type of the values to replace. When `replacements` are evaluated, this value will be used as the scheme portion of the URI to detect matches.  Defaults to `user`, and will match URIs composed with the `user` scheme and a UUID. E.g. `user:00000000-0000-0000-0000-000000000000`
+         */
+        "replacementUriType": string;
+        /**
+          * Replaced result values. This will be used in combination with the value of `value` to display existing replaced values.  This value will be automatically updated as `Result`s are clicked within this search bar's `<vertex-result-list>`.
+         */
+        "replacements": Result[];
+        /**
+          * The items to display in this search bar's `<vertex-result-list>`.  This can be used alongside the `searchChanged` event to query for results to display.
+         */
+        "resultItems"?: Result[];
+        /**
+          * The character indicating that we should trigger a search.  When this character is encountered, the text following it (omitting `breakCharacters`) will be emitted as a `searchChanged` event.
+         */
+        "triggerCharacter": string;
+        /**
+          * The initial value of this search bar. This will be used in combination with the value of `replacements` to display existing replaced values.
+         */
+        "value"?: string;
+        /**
+          * The search bar variant to display.  Possible options are: - 'standard' (default) - 'filled' - 'underlined' - 'blank
+         */
         "variant": SearchBarVariant;
     }
     interface VertexSelect {
@@ -1767,6 +1794,7 @@ declare namespace LocalJSX {
         "items"?: Result[];
         "itemsJson"?: string;
         "onEnterPressed"?: (event: VertexResultListCustomEvent<Result>) => void;
+        "onResultClick"?: (event: VertexResultListCustomEvent<Result>) => void;
         "open"?: boolean;
         "overScanCount"?: number;
         "placement"?: PopoverPlacement;
@@ -1776,33 +1804,66 @@ declare namespace LocalJSX {
         "viewportStartIndex"?: number;
     }
     interface VertexSearchBar {
+        /**
+          * Characters that should trigger a "break" of the search. If a value in this list is encountered when trying to parse back to the `triggerCharacter`, this will hide the result list.
+         */
         "breakCharacters"?: string[];
-        "debounce"?: number;
         /**
-          * Emitted when input blurred
+          * Whether this search bar is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the input is blurred.
          */
         "onInputBlur"?: (event: VertexSearchBarCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when input focused
+          * Emitted when the value of the input has changed.
+         */
+        "onInputChanged"?: (event: VertexSearchBarCustomEvent<string>) => void;
+        /**
+          * Emitted when the input is focused.
          */
         "onInputFocus"?: (event: VertexSearchBarCustomEvent<FocusEvent>) => void;
         /**
-          * Emitted when enter is pressed an a result is highlighted.
+          * Emitted when a result has been selected to replace the trigger text.  Includes the ID of the `Result` selected.
          */
-        "onResultsEnterPressed"?: (event: VertexSearchBarCustomEvent<Result1>) => void;
-        "onTriggerCharacterPressed"?: (event: VertexSearchBarCustomEvent<string>) => void;
+        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result>) => void;
         /**
-          * Emitted when the value has changed.
+          * Emitted when the value of the current search triggered by the specified `triggerCharacter` has changed.
          */
-        "onValueChanged"?: (event: VertexSearchBarCustomEvent<void>) => void;
+        "onSearchChanged"?: (event: VertexSearchBarCustomEvent<string>) => void;
         /**
-          * Placeholder for text input.
+          * A placeholder to display when no text has been entered.
          */
         "placeholder"?: string;
+        /**
+          * The placement of the result list for this search bar.  Corresponds to the value for the underlying <vertex-popover> placement value.
+          * @see  (PopoverPlacement)
+         */
         "placement"?: PopoverPlacement;
-        "resultItems"?: Result1[];
+        /**
+          * The URI type of the values to replace. When `replacements` are evaluated, this value will be used as the scheme portion of the URI to detect matches.  Defaults to `user`, and will match URIs composed with the `user` scheme and a UUID. E.g. `user:00000000-0000-0000-0000-000000000000`
+         */
+        "replacementUriType"?: string;
+        /**
+          * Replaced result values. This will be used in combination with the value of `value` to display existing replaced values.  This value will be automatically updated as `Result`s are clicked within this search bar's `<vertex-result-list>`.
+         */
+        "replacements"?: Result[];
+        /**
+          * The items to display in this search bar's `<vertex-result-list>`.  This can be used alongside the `searchChanged` event to query for results to display.
+         */
+        "resultItems"?: Result[];
+        /**
+          * The character indicating that we should trigger a search.  When this character is encountered, the text following it (omitting `breakCharacters`) will be emitted as a `searchChanged` event.
+         */
         "triggerCharacter"?: string;
-        "triggerCharacters"?: string[];
+        /**
+          * The initial value of this search bar. This will be used in combination with the value of `replacements` to display existing replaced values.
+         */
+        "value"?: string;
+        /**
+          * The search bar variant to display.  Possible options are: - 'standard' (default) - 'filled' - 'underlined' - 'blank
+         */
         "variant"?: SearchBarVariant;
     }
     interface VertexSelect {

package/dist/types/types/icon.d.ts

@@ -41,6 +41,7 @@ export declare enum IconNames {
   'comment-reopen' = "comment-reopen",
   'comment-resolve' = "comment-resolve",
   'comment-show' = "comment-show",
+  'compare' = "compare",
   'copy' = "copy",
   'cross-section' = "cross-section",
   'cube-orthographic' = "cube-orthographic",

package/dist/types/util/templates/element-pool.d.ts

@@ -1,12 +1,19 @@
 import { Binding } from './binding';
 import { InstancedTemplate } from './templates';
 export type ElementFactory = () => InstancedTemplate<HTMLElement>;
+export interface EventHandlerDescriptor {
+  type: string;
+  handler: (event: any) => void;
+}
+export type EventHandlerFactory = (element: HTMLElement) => EventHandlerDescriptor[];
 export declare class ElementPool {
   private container;
   private elementFactory;
+  private eventHandlerFactory?;
   private readonly elements;
   private instanceMap;
-  constructor(container: Element, elementFactory: ElementFactory);
+  private handlerMap;
+  constructor(container: Element, elementFactory: ElementFactory, eventHandlerFactory?: EventHandlerFactory | undefined);
   swapHeadToTail(count: number): HTMLElement[];
   swapTailToHead(count: number): HTMLElement[];
   updateElements(count: number): HTMLElement[];
@@ -14,5 +21,7 @@ export declare class ElementPool {
   updateElementFactory(elementFactory: ElementFactory): void;
   iterateElements(f: (element: HTMLElement, binding: Binding, index: number) => void): void;
   private createElement;
+  private addEventListeners;
   private deleteElement;
+  private removeEventListeners;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-canary.7",
+  "version": "0.1.0-canary.9",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -84,7 +84,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
-    "@vertexvis/utils": "^0.21.0"
+    "@vertexvis/utils": "^0.21.0",
+    "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "db5773075aa75fd34101ce8012e9277912ef95ce"
+  "gitHead": "1bc7a1e9527e77b38bd2400d4bbe0266ec358f9d"
 }