@nyaruka/temba-components 0.113.0 → 0.114.0

package/src/omnibox/Omnibox.ts

@@ -1,8 +1,7 @@
-import { TemplateResult, html, css } from 'lit';
+import { TemplateResult, html, PropertyValues } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import { RapidElement } from '../RapidElement';
-import { Select } from '../select/Select';
+import { Select, SelectOption } from '../select/Select';
 import { Icon } from '../vectoricon';
 
 enum OmniType {
@@ -10,7 +9,7 @@ enum OmniType {
   Contact = 'contact'
 }
 
-export interface OmniOption {
+export interface OmniOption extends SelectOption {
   id: string;
   name: string;
   type: OmniType;
@@ -26,24 +25,9 @@ const postNameStyle = {
   fontSize: '12px'
 };
 
-export class Omnibox extends RapidElement {
-  static get styles() {
-    return css`
-      temba-select:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      :host {
-      }
-    `;
-  }
-
-  @property()
-  endpoint: string;
-
-  @property()
-  name: string;
+export class Omnibox extends Select<OmniOption> {
+  @property({ type: String })
+  valueKey = 'uuid';
 
   @property({ type: Boolean })
   groups = false;
@@ -51,38 +35,43 @@ export class Omnibox extends RapidElement {
   @property({ type: Boolean })
   contacts = false;
 
-  @property({ type: Array })
-  value: OmniOption[] = [];
-
-  @property({ type: Array })
-  errors: string[];
-
-  @property()
+  @property({ type: String })
   placeholder = 'Select recipients';
 
   @property({ type: Boolean })
-  disabled = false;
+  multi = true;
 
-  @property({ type: String, attribute: 'help_text' })
-  helpText: string;
-
-  @property({ type: Boolean, attribute: 'help_always' })
-  helpAlways: boolean;
+  @property({ type: Boolean })
+  searchable = true;
 
-  @property({ type: Boolean, attribute: 'widget_only' })
-  widgetOnly: boolean;
+  @property({ type: Boolean })
+  searchOnFocus = true;
 
-  @property({ type: Boolean, attribute: 'hide_label' })
-  hideLabel: boolean;
+  @property({ type: Boolean })
+  queryParam = 'search';
+
+  public update(changes: PropertyValues): void {
+    super.update(changes);
+
+    if (
+      (changes.has('groups') || changes.has('contacts')) &&
+      (this.groups || this.contacts)
+    ) {
+      let types = '&types=';
+      if (this.groups) {
+        types += 'g';
+      }
 
-  @property({ type: String })
-  label: string;
+      if (this.contacts) {
+        types += 'c';
+      }
 
-  @property({ type: String, attribute: 'info_text' })
-  infoText = '';
+      this.endpoint = this.endpoint + types;
+    }
+  }
 
   /** An option in the drop down */
-  private renderOption(option: OmniOption): TemplateResult {
+  public renderOptionDefault(option: OmniOption): TemplateResult {
     return html`
       <div style="display:flex;">
         <div style="margin-right: 8px">${this.getIcon(option)}</div>
@@ -115,7 +104,7 @@ export class Omnibox extends RapidElement {
   }
 
   /** Selection in the multi-select select box */
-  private renderSelection(option: OmniOption): TemplateResult {
+  public renderSelectedItemDefault(option: OmniOption): TemplateResult {
     return html`
       <div
         style="flex:1 1 auto; display: flex; align-items: stretch; color: var(--color-text-dark); font-size: 12px;"
@@ -147,54 +136,4 @@ export class Omnibox extends RapidElement {
       return html`<temba-icon name="${Icon.contact}"></temba-icon>`;
     }
   }
-
-  private getEndpoint() {
-    const endpoint = this.endpoint;
-    let types = '&types=';
-    if (this.groups) {
-      types += 'g';
-    }
-
-    if (this.contacts) {
-      types += 'c';
-    }
-
-    return endpoint + types;
-  }
-
-  public getValues(): any[] {
-    const select = this.shadowRoot.querySelector('temba-select') as Select;
-    return select.values;
-  }
-
-  public isMatch() {
-    return true;
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <temba-select
-        name=${this.name}
-        endpoint=${this.getEndpoint()}
-        placeholder=${this.placeholder}
-        queryParam="search"
-        .label=${this.label}
-        .helpText=${this.helpText}
-        .widgetOnly=${this.widgetOnly}
-        ?disabled=${this.disabled}
-        .errors=${this.errors}
-        .values=${this.value}
-        .renderOption=${this.renderOption.bind(this)}
-        .renderSelectedItem=${this.renderSelection.bind(this)}
-        .inputRoot=${this}
-        .isMatch=${this.isMatch}
-        .infoText=${this.infoText}
-        searchable
-        searchOnFocus
-        multi
-        ><div slot="right">
-          <slot name="right"></slot></div
-      ></temba-select>
-    `;
-  }
 }

package/src/options/Options.ts

@@ -3,16 +3,15 @@ import { property } from 'lit/decorators.js';
 import { CustomEventType } from '../interfaces';
 import { RapidElement, EventHandler } from '../RapidElement';
 import { styleMap } from 'lit-html/directives/style-map.js';
-import {
-  getClasses,
-  getScrollParent,
-  isElementVisible,
-  throttle
-} from '../utils';
+import { getClasses, getScrollParent, throttle } from '../utils';
 
 export class Options extends RapidElement {
   static get styles() {
     return css`
+      :host {
+        --transition-speed: 0;
+      }
+
       .options-container {
         background: var(--color-options-bg);
         user-select: none;
@@ -21,7 +20,7 @@ export class Options extends RapidElement {
         margin-top: var(--options-margin-top);
         display: flex;
         flex-direction: column;
-        transform: scaleY(0.5) translateY(-5em);
+        // transform: scaleY(0.5) translateY(-5em);
         transition: transform var(--transition-speed)
             cubic-bezier(0.71, 0.18, 0.61, 1.33),
           opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
@@ -93,12 +92,12 @@ export class Options extends RapidElement {
       .options {
         border-radius: var(--curvature-widget);
         overflow-y: auto;
-        max-height: 225px;
+        max-height: 200px;
         border: none;
       }
 
       .show {
-        transform: scaleY(1) translateY(0);
+        // transform: scaleY(1) translateY(0);
         border: 1px solid var(--color-widget-border);
         opacity: 1;
         z-index: 1;
@@ -281,14 +280,14 @@ export class Options extends RapidElement {
 
   resolvedRenderOption: { (option: any, selected: boolean): TemplateResult };
 
-  public firstUpdated() {
+  public firstUpdated(changed: Map<string, any>) {
+    super.firstUpdated(changed);
     if (!this.block) {
       this.scrollParent = getScrollParent(this);
       this.calculatePosition = this.calculatePosition.bind(this);
       if (this.scrollParent) {
         this.scrollParent.addEventListener('scroll', this.calculatePosition);
       }
-      this.calculatePosition();
     }
 
     this.resolvedRenderOption = (
@@ -302,9 +301,14 @@ export class Options extends RapidElement {
         this.scrollParent.removeEventListener('scroll', this.calculatePosition);
       }
     }
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
   }
 
-  private isFocused() {
+  private isFocused(): boolean {
+    // TODO: this really doesn't seem right
     const focused =
       this.closestElement(document.activeElement.tagName) ===
       document.activeElement;
@@ -312,9 +316,29 @@ export class Options extends RapidElement {
     return focused;
   }
 
+  private resizeObserver: ResizeObserver;
+
   public updated(changed: Map<string, any>) {
     super.updated(changed);
 
+    if (changed.has('anchorTo') && this.anchorTo) {
+      const optionsContainer =
+        this.shadowRoot.querySelector('.options-container');
+
+      if (!this.resizeObserver) {
+        this.resizeObserver = new ResizeObserver((entries) => {
+          window.requestAnimationFrame((): void | undefined => {
+            if (!Array.isArray(entries) || !entries.length) {
+              return;
+            }
+            this.calculatePosition();
+            this.adjustWidth();
+          });
+        });
+        this.resizeObserver.observe(optionsContainer);
+      }
+    }
+
     // if our cursor changed, lets make sure our scrollbox is showing it
     if (!this.internalFocusDisabled && changed.has('cursorIndex')) {
       this.fireCustomEvent(CustomEventType.CursorChanged, {
@@ -327,11 +351,12 @@ export class Options extends RapidElement {
         this.tempOptions = changed.get('options');
         window.setTimeout(() => {
           this.tempOptions = [];
-        }, 300);
+        }, 0);
       }
     }
 
     if (changed.has('options')) {
+      this.adjustWidth();
       this.calculatePosition();
 
       // allow scrolls to trigger again
@@ -370,12 +395,6 @@ export class Options extends RapidElement {
         }
       }
     }
-
-    if (changed.has('visible')) {
-      window.setTimeout(() => {
-        this.calculatePosition();
-      }, 100);
-    }
   }
 
   private renderOptionDefault(option: any, selected: boolean): TemplateResult {
@@ -528,6 +547,16 @@ export class Options extends RapidElement {
     }
   }
 
+  private adjustWidth() {
+    if (this.anchorTo) {
+      const anchorBounds = this.anchorTo.getBoundingClientRect();
+      this.width =
+        this.staticWidth > 0
+          ? this.staticWidth
+          : anchorBounds.width - 2 - this.marginHorizontal * 2;
+    }
+  }
+
   private calculatePosition() {
     if (this.visible && !this.block) {
       const optionsBounds = this.shadowRoot
@@ -535,34 +564,16 @@ export class Options extends RapidElement {
         .getBoundingClientRect();
 
       if (this.anchorTo) {
+        this.top = 0;
         const anchorBounds = this.anchorTo.getBoundingClientRect();
-        const topTop = anchorBounds.top - optionsBounds.height;
-
-        if (this.anchorTo && this.scrollParent) {
-          if (!isElementVisible(this.anchorTo, this.scrollParent)) {
-            // this.fireCustomEvent(CustomEventType.Canceled);
-          }
+        if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
+          this.top = -(optionsBounds.height + anchorBounds.height + 20);
         }
-
-        if (
-          topTop > 0 &&
-          anchorBounds.bottom + optionsBounds.height > window.innerHeight
-        ) {
-          this.top = topTop; //  + window.pageYOffset;
-          this.poppedTop = true;
-        } else {
-          this.top = anchorBounds.bottom; //  + window.pageYOffset;
-          this.poppedTop = false;
-        }
-
         this.left = anchorBounds.left;
-        this.width =
-          this.staticWidth > 0
-            ? this.staticWidth
-            : anchorBounds.width - 2 - this.marginHorizontal * 2;
 
-        if (this.anchorRight) {
-          this.left = anchorBounds.right - this.width;
+        // adjust for parent scrolling
+        if (this.scrollParent) {
+          this.top += -this.scrollParent.scrollTop;
         }
       }
     }
@@ -594,16 +605,7 @@ export class Options extends RapidElement {
     }
   }
 
-  // we need to swallow mouse down so we don't grab focus
-  private handleMouseDown(evt: MouseEvent) {
-    evt.preventDefault();
-    evt.stopPropagation();
-  }
-
   private handleOptionClick(evt: MouseEvent) {
-    evt.preventDefault();
-    evt.stopPropagation();
-
     const index = (evt.currentTarget as HTMLElement).getAttribute(
       'data-option-index'
     );
@@ -631,7 +633,7 @@ export class Options extends RapidElement {
     };
 
     if (this.top) {
-      containerStyle['top'] = `${this.top}px`;
+      containerStyle[`transform`] = `translateY(${this.top}px)`;
     }
 
     if (this.left) {
@@ -668,18 +670,13 @@ export class Options extends RapidElement {
 
     return html`
       <div class=${classes} style=${styleMap(containerStyle)}>
-        <div
-          class="options-scroll"
-          @scroll=${this.handleInnerScroll}
-          @mousedown=${this.handleMouseDown}
-        >
+        <div class="options-scroll" @scroll=${this.handleInnerScroll}>
           <div class="${classesInner}" style=${styleMap(optionsStyle)}>
             ${options.map((option, index) => {
               return html`<div
                 data-option-index="${index}"
                 @mousemove=${this.handleMouseMove}
-                @click=${this.handleOptionClick}
-                @mousedown=${this.handleMouseDown}
+                @mousedown=${this.handleOptionClick}
                 class="option ${index === this.cursorIndex &&
                 !this.internalFocusDisabled
                   ? 'focused'

package/src/select/PopupSelect.ts

@@ -0,0 +1,53 @@
+import { css, html } from 'lit';
+import { RapidElement } from '../RapidElement';
+import { property } from 'lit/decorators.js';
+
+export class PopupSelect extends RapidElement {
+  public static styles = css`
+    :host {
+    }
+
+    .dropdown {
+      background: #fff;
+      border-radius: 0.5em;
+      padding: 0.15em;
+      border-radius: var(--curvature);
+    }
+
+    temba-select {
+      width: 250px;
+      display: block;
+      --color-widget-border: transparent;
+      --widget-box-shadow: none;
+    }
+  `;
+
+  @property({ type: String })
+  placeholder: string = '';
+
+  @property({ type: String })
+  endpoint: string = '';
+
+  private handleChange() {
+    this.blur();
+  }
+
+  public render() {
+    return html`
+      <div>
+        <temba-dropdown>
+          <div slot="toggle"><slot name="toggle"></slot></div>
+          <div class="dropdown" slot="dropdown">
+            <temba-select
+              placeholder=${this.placeholder}
+              endpoint=${this.endpoint}
+              clearable
+              searchable
+              @change=${this.handleChange}
+            ></temba-select>
+          </div>
+        </temba-dropdown>
+      </div>
+    `;
+  }
+}