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

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

@@ -0,0 +1,4 @@
+export type Result = {
+  id: string;
+  type: string;
+} & Record<string, unknown>;

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

@@ -0,0 +1,8 @@
+export declare const getWindowSelection: () => Selection | undefined | null;
+export declare const nodeHasChildNodes: (node: Node) => boolean;
+export declare const createDocumentRange: () => Range;
+export declare const createTextNode: (text: string) => Text;
+export declare const createBreak: () => HTMLBRElement;
+export declare const createWrappingDiv: (nodes: Node[]) => HTMLDivElement;
+export declare const isHtmlElement: (node?: Node | EventTarget | null) => node is HTMLElement;
+export declare const isBrElement: (node: Node) => node is HTMLBRElement;

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

@@ -1,6 +1,31 @@
-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/types';
+export interface SearchResultReplacement {
+  before: Text;
+  beforeSpace: Text;
+  result: Text;
+  afterSpace: Text;
+  after?: Text;
+}
+export declare const createResultUri: (result: Result) => string;
+export declare const createSearchResultReplacement: (result: Result, before: string, after?: string) => SearchResultReplacement;
+/**
+ * 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 declare const standardizeNewlinesAndSpaces: (node: ChildNode) => ChildNode[];
+export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement, isBreaking?: boolean) => Text[];
+/**
+ * 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 declare const trimNonstandardSpaces: (text: string) => string;

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

@@ -1,67 +1,150 @@
 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 attemptReplaceElement;
+  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/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/tab/tab.d.ts

@@ -0,0 +1,11 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export declare class Tab {
+  /**
+   * The label to include in tab list.
+   */
+  label: string;
+  active: boolean;
+  tabClick: EventEmitter<string>;
+  render(): h.JSX.IntrinsicElements;
+  private handleClick;
+}

package/dist/types/components/tab/util.d.ts

@@ -0,0 +1 @@
+export declare function isTabElement(element: Element): element is HTMLVertexTabElement;

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

@@ -0,0 +1,23 @@
+import { EventEmitter, h } from '../../stencil-public-runtime';
+export declare class Tabs {
+  active?: string;
+  private labels;
+  private activeBounds?;
+  private activeButtonEl?;
+  private hostEl;
+  /**
+   * An event that is emitted whenever the selected tab changes
+   * and contains the label of the newly selected tab.
+   */
+  selectedTabChanged: EventEmitter<string>;
+  private indicatorInitialized;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  protected componentDidUpdate(): void;
+  protected handleActiveButtonChange(): void;
+  render(): h.JSX.IntrinsicElements;
+  private handleLabelClick;
+  private updateActiveOnTab;
+  private findTabByLabel;
+  private updateTabLabels;
+}

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;
 }