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

package/dist/types/components/result-list/result-list.d.ts

@@ -1,7 +1,10 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
 import { PopoverPlacement } from '../popover/popover';
-export type Result = Record<string, unknown>;
+export type Result = {
+  id: string;
+  type: string;
+} & Record<string, unknown>;
 export declare class ResultList {
   items: Result[];
   itemsJson?: string;
@@ -20,9 +23,11 @@ export declare class ResultList {
   private lastFocusedIndex;
   private stateMap;
   private hostEl;
+  private resultClick;
   private resizeObserver;
   private computedResultHeight?;
   private resultsScrollEl?;
+  constructor();
   handleResultsChanged(results: Array<Result> | string | undefined): void;
   handleOpenChanged(): void;
   protected componentWillLoad(): void;
@@ -35,7 +40,10 @@ export declare class ResultList {
   private ensureTemplateDefined;
   private createResultPool;
   private createResultInstance;
+  private createResultHandlers;
   private layoutResults;
+  private handlePointerDown;
+  private handleResultClick;
   private computeViewportResults;
   private getListHeight;
   private handleScroll;

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

@@ -0,0 +1,3 @@
+export declare const getWindowSelection: () => Selection | undefined | null;
+export declare const createDocumentRange: () => Range;
+export declare const createTextNode: (text?: string) => Text;

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

@@ -1,6 +1,12 @@
-export declare const getWindowSelection: () => Selection | undefined | null;
-export declare const createDocumentRange: () => Range;
-export declare const isTextNode: (node: Node) => node is Text;
-export declare const isHtmlElement: (target: EventTarget) => target is HTMLElement;
-export declare const isReplacedElement: (el?: HTMLElement | null) => el is HTMLElement;
-export declare const createTextNode: (text?: string) => Text;
+import { Result } from '../result-list/result-list';
+export interface SearchResultReplacement {
+  before: Text;
+  beforeSpace: Text;
+  result: Text;
+  afterSpace?: Text;
+  after?: Text;
+}
+export declare const createResultUrn: (result: Result) => string;
+export declare const createSearchResultReplacement: (result: Result, before: string, after?: string) => SearchResultReplacement;
+export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement) => Text[];
+export declare const trimNonstandardSpaces: (text: string) => string;

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

@@ -3,65 +3,122 @@ import { PopoverPlacement } from '../popover/popover';
 import { Result } from '../result-list/result-list';
 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[];
+  /**
+   * 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(): 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;
+  private handleCursorPositionUpdate;
+  private readTriggerValue;
+  private includesBreakCharacter;
+  private firstIndexOfBreakCharacter;
+  private moveCursorToNodeEnd;
+  private getContentAsString;
+  private createReplacedElement;
 }

package/dist/types/components/select/select.d.ts

@@ -24,6 +24,11 @@ export declare class Select {
    * or closing.
    */
   animated: boolean;
+  /**
+   * Whether this select will omit the currently selected
+   * value in the dropdown list.
+   */
+  hideSelected: boolean;
   /**
    * Emitted when the selected option of this element
    * changes, and contains the value that it has been
@@ -51,10 +56,13 @@ export declare class Select {
   connectedCallback(): void;
   disconnectedCallback(): void;
   handleUpdateValue(value?: string): void;
+  protected handleUpdateDisplayValue(): void;
   render(): h.JSX.IntrinsicElements;
   private handleOpen;
   private handleDismiss;
   private updateDisplayValue;
   private removeOptionListeners;
+  private clearSelectedOptionFlag;
+  private getSelectedOption;
   private getBounds;
 }

package/dist/types/components/tooltip/tooltip.d.ts

@@ -40,18 +40,25 @@ export declare class Tooltip {
   hostElement: HTMLElement;
   private open;
   private tooltipId;
+  private pointerEntered;
   private openTimeout?;
   private targetElement?;
   private contentElement?;
   private displayedSlottedContent?;
+  private internalContentElement?;
   constructor();
   disconnectedCallback(): void;
+  protected handleContentChange(): void;
+  protected handleDisabledChange(): void;
   render(): h.JSX.IntrinsicElements;
   private addElement;
   private removeElement;
   private createPopoverElement;
   private createContentElement;
+  private updateContentElementClass;
+  private updateContentElementChildren;
   private handlePointerEnter;
   private handlePointerLeave;
+  private createOpenTimeout;
   private clearOpenTimeout;
 }

package/dist/types/components.d.ts

@@ -470,6 +470,9 @@ export namespace Components {
           * The behavior that this popover will have when the window is resized. Can be either 'dynamic' or 'fixed', and defaults to 'dynamic'.  'dynamic' will cause a position-based popover to adjust its position relative to the window resize to keep it in the same relative position. 'fixed' will keep the popover in the same position even if that means it would disappear off-screen.
          */
         "resizeBehavior": PopoverResizeBehavior;
+        "resizeObserverFactory": (
+    cb: (entries: ResizeObserverEntry[]) => void
+  ) => ResizeObserver;
         /**
           * Indicates if the position of the popover should be updated when the popover's content size changes.
          */
@@ -569,18 +572,42 @@ 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>;
+        /**
+          * 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": Result1[];
+        /**
+          * 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"?: Result1[];
-        "triggerCharacter"?: string;
-        "triggerCharacters": string[];
+        /**
+          * 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 {
@@ -592,6 +619,10 @@ export namespace Components {
           * Whether this select is disabled.
          */
         "disabled": boolean;
+        /**
+          * Whether this select will omit the currently selected value in the dropdown list.
+         */
+        "hideSelected": boolean;
         /**
           * A placeholder to use when no option has been selected. Defaults to "Select an option...".
          */
@@ -1760,6 +1791,7 @@ declare namespace LocalJSX {
         "items"?: Result[];
         "itemsJson"?: string;
         "onEnterPressed"?: (event: VertexResultListCustomEvent<Result>) => void;
+        "onResultClick"?: (event: VertexResultListCustomEvent<Result>) => void;
         "open"?: boolean;
         "overScanCount"?: number;
         "placement"?: PopoverPlacement;
@@ -1769,33 +1801,62 @@ 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<Result1>) => 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;
+        /**
+          * 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"?: Result1[];
+        /**
+          * 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"?: Result1[];
+        /**
+          * 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 {
@@ -1807,6 +1868,10 @@ declare namespace LocalJSX {
           * Whether this select is disabled.
          */
         "disabled"?: boolean;
+        /**
+          * Whether this select will omit the currently selected value in the dropdown list.
+         */
+        "hideSelected"?: boolean;
         /**
           * Emitted when the selected option of this element changes, and contains the value that it has been changed to.
          */

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-testing.4",
+  "version": "0.1.0-testing.5",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -86,5 +86,5 @@
     "@floating-ui/dom": "^1.6.5",
     "@vertexvis/utils": "^0.21.0"
   },
-  "gitHead": "4805247439f97482ac5ea8d7ca04b567a4581ed9"
+  "gitHead": "8013122df0b6a3d4a6def2e30f5084b12e520ea7"
 }