@nyaruka/temba-components 0.113.0 → 0.114.0

package/src/dropdown/Dropdown.ts

@@ -2,10 +2,16 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { getClasses } from '../utils';
+import { CustomEventType } from '../interfaces';
+
+import { styleMap } from 'lit-html/directives/style-map.js';
 
 export class Dropdown extends RapidElement {
   static get styles() {
     return css`
+      :host {
+      }
+
       .wrapper {
         position: relative;
       }
@@ -19,15 +25,20 @@ export class Dropdown extends RapidElement {
         overflow: auto;
       }
 
+      .dropdown:focus {
+      }
+
+      .dropdown.dormant {
+        pointer-events: none;
+      }
+
       .dropdown {
-        position: absolute;
-        opacity: 0;
+        position: fixed;
         z-index: 2;
-        pointer-events: none;
         padding: 0;
+        opacity: 0;
         border-radius: var(--curvature);
         background: #fff;
-        transform: translateY(1em) scale(0.9);
         transition: all calc(0.8 * var(--transition-speed)) var(--bounce);
         user-select: none;
         margin-top: 0px;
@@ -64,7 +75,7 @@ export class Dropdown extends RapidElement {
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.7);
-        opacity: 0;
+        opacity: 0.5;
         transition: opacity var(--transition-speed) ease-in-out;
         pointer-events: none;
         z-index: 1;
@@ -85,149 +96,176 @@ export class Dropdown extends RapidElement {
   open = false;
 
   @property({ type: Boolean })
-  top = false;
-
-  @property({ type: Boolean })
-  bottom = false;
-
-  @property({ type: Boolean })
-  left = false;
-
-  @property({ type: Boolean })
-  right = false;
-
-  @property({ type: Number })
-  arrowSize = 6;
+  dormant = true;
 
   @property({ type: Number })
-  arrowOffset = this.arrowSize * 2;
+  arrowSize = 8;
 
   @property({ type: Number })
-  offsetX = 0;
-
-  @property({ type: Number })
-  offsetY = 0;
+  margin = 10;
 
   @property({ type: Boolean })
   mask = false;
 
+  @property({ type: Object, attribute: false })
+  dropdownStyle = {};
+
+  @property({ type: Object, attribute: false })
+  arrowStyle = {};
+
   constructor() {
     super();
-    this.ensureOnScreen = this.ensureOnScreen.bind(this);
+    this.calculatePosition = this.calculatePosition.bind(this);
   }
 
+  private activeFocus: any;
+  private blurHandler: any;
+
   public firstUpdated(props: any) {
     super.firstUpdated(props);
+    this.resetBlurHandler();
+  }
 
-    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;
-    arrow.style.borderWidth = this.arrowSize + 'px';
-    arrow.style.top = '-' + this.arrowSize + 'px';
+  private resetBlurHandler() {
+    const dropdown = this.shadowRoot.querySelector(
+      '.dropdown'
+    ) as HTMLDivElement;
+
+    if (this.activeFocus) {
+      this.activeFocus.removeEventListener('blur', this.blurHandler);
+    }
 
-    if (this.arrowOffset < 0) {
-      arrow.style.right = Math.abs(this.arrowOffset) + 'px';
+    this.activeFocus = dropdown;
+    this.blurHandler = this.handleBlur.bind(this);
+
+    this.activeFocus.addEventListener('blur', this.blurHandler);
+  }
+
+  private handleBlur(event: FocusEvent) {
+    const newTarget = event.relatedTarget as any;
+
+    if (this.contains(newTarget)) {
+      newTarget.addEventListener('blur', this.blurHandler);
+      this.activeFocus = newTarget;
     } else {
-      arrow.style.left = this.arrowOffset + 'px';
+      this.closeDropdown();
     }
+  }
+
+  private openDropdown() {
+    this.open = true;
+    this.dormant = false;
+    this.resetBlurHandler();
 
     const dropdown = this.shadowRoot.querySelector(
       '.dropdown'
     ) as HTMLDivElement;
+    dropdown.focus();
+    dropdown.click();
 
-    dropdown.addEventListener('blur', () => {
-      // we nest this to deal with clicking the toggle to close
-      // as we don't want it to toggle an immediate open, probably
-      // a better way to deal with this
-      window.setTimeout(() => {
-        this.open = false;
-        // blur our host element too
-        (this.shadowRoot.host as HTMLDivElement).blur();
-      }, 200);
-    });
+    this.fireCustomEvent(CustomEventType.Opened);
+  }
+
+  private closeDropdown() {
+    this.activeFocus.removeEventListener('blur', this.blurHandler);
+
+    this.open = false;
+    this.resetBlurHandler();
+
+    window.setTimeout(() => {
+      this.dormant = true;
+    }, 250);
+
+    this.blur();
   }
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
-    const dropdown = this.shadowRoot.querySelector(
-      '.dropdown'
-    ) as HTMLDivElement;
 
-    if (changedProperties.has('offsetY') || changedProperties.has('offsetX')) {
-      dropdown.style.marginTop = this.offsetY + 'px';
-      if (dropdown.offsetLeft + dropdown.clientWidth > window.outerWidth) {
-        dropdown.style.marginLeft =
-          '-' + (dropdown.clientWidth - this.clientWidth - this.offsetX) + 'px';
-      } else {
-        if (this.right) {
-          dropdown.style.marginRight = this.offsetX + 'px';
-        } else {
-          dropdown.style.marginLeft = this.offsetX + 'px';
-        }
-      }
+    if (changedProperties.has('open')) {
+      this.dropdownStyle = {};
     }
 
-    if (changedProperties.has('open')) {
-      // check right away if we are on the screen, and then again moments after render
-      window.setTimeout(this.ensureOnScreen, 0);
-      window.setTimeout(this.ensureOnScreen, 100);
+    if (changedProperties.has('dropdownStyle')) {
+      if (Object.keys(this.dropdownStyle).length === 0) {
+        this.calculatePosition();
+      }
     }
   }
 
-  public ensureOnScreen() {
+  public calculatePosition() {
     const dropdown = this.shadowRoot.querySelector(
       '.dropdown'
     ) as HTMLDivElement;
+    const toggle = this.querySelector('div[slot="toggle"]');
+
+    const arrow = this.shadowRoot.querySelector('.arrow') as HTMLDivElement;
+
+    let bumpedUp = false;
+    let bumpedLeft = false;
 
-    if (dropdown) {
-      // dropdown will go off the screen, let's push it up
-      const toggle = this.querySelector('div[slot="toggle"]');
+    if (dropdown && toggle) {
+      const dropdownBounds = dropdown.getBoundingClientRect();
+      const toggleBounds = toggle.getBoundingClientRect();
+      const arrowBounds = arrow.getBoundingClientRect();
 
       if (!toggle) {
         return;
       }
 
-      if (dropdown.getBoundingClientRect().bottom > window.innerHeight - 100) {
-        if (this.bottom) {
-          dropdown.style.top = toggle.clientHeight + 'px';
-        } else {
-          dropdown.style.top = '';
-          dropdown.style.bottom = toggle.clientHeight + 'px';
-        }
-      } else if (dropdown.getBoundingClientRect().top < 0) {
-        if (this.bottom) {
-          dropdown.style.top = toggle.clientHeight + 'px';
-        } else {
-          dropdown.style.top = toggle.clientHeight + 'px';
-          dropdown.style.bottom = '';
-        }
+      const dropdownStyle = {
+        border: '1px solid rgba(0,0,0,0.1)',
+        marginTop: '0.5em'
+      };
+
+      // if off the the right, bump it left
+      if (dropdownBounds.right > window.innerWidth) {
+        dropdownStyle['left'] =
+          toggleBounds.right - dropdownBounds.width + 'px';
+        delete dropdownStyle['right'];
+        bumpedLeft = true;
       }
 
-      if (dropdown.getBoundingClientRect().right > window.innerWidth) {
-        dropdown.style.left = '';
-        dropdown.style.right = '0px';
-      } else if (dropdown.getBoundingClientRect().left < 0) {
-        dropdown.style.left = 0 + 'px';
-        dropdown.style.right = '';
+      // if off to the bottom, bump it up
+      if (dropdownBounds.bottom > window.innerHeight) {
+        dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';
+        dropdownStyle['margin-top'] = '-0.5em';
+        bumpedUp = true;
       }
-    }
-  }
 
-  public handleToggleClicked(event: MouseEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!this.open) {
-      this.open = true;
+      const arrowStyle = {
+        left: toggleBounds.width / 2 - arrowBounds.width / 2 + 'px',
+        borderWidth: this.arrowSize + 'px',
+        top: '-' + this.arrowSize + 'px'
+      };
+
+      if (bumpedUp) {
+        // rotate our arrow 180 degrees
+        arrowStyle['transform'] = 'rotate(180deg)';
+
+        // and place it at the bottom of the dropdown
+        arrowStyle['top'] = 'auto';
+        arrowStyle['bottom'] = '-' + this.arrowSize + 'px';
+      }
 
-      const dropdown = this.shadowRoot.querySelector(
-        '.dropdown'
-      ) as HTMLDivElement;
-      dropdown.focus();
+      if (bumpedLeft) {
+        arrowStyle['right'] =
+          toggleBounds.width / 2 - arrowBounds.width / 2 + 'px';
+        delete arrowStyle['left'];
+      }
+
+      this.arrowStyle = arrowStyle;
+      this.dropdownStyle = dropdownStyle;
     }
+    this.requestUpdate();
   }
 
-  private handleDropdownMouseDown(event: MouseEvent): void {
-    // block mouse down when clicking inside dropdown so we don't lose focus yet
+  public handleToggleClicked(event: MouseEvent): void {
     event.preventDefault();
     event.stopPropagation();
+    if (!this.open && this.dormant) {
+      this.openDropdown();
+    }
   }
 
   public render(): TemplateResult {
@@ -236,7 +274,11 @@ export class Dropdown extends RapidElement {
         ? html`<div class="mask  ${this.open ? 'open' : ''}" />`
         : null}
 
-      <div class="wrapper ${this.open ? 'open' : ''}">
+      <div
+        class="wrapper ${getClasses({
+          open: this.open
+        })}"
+      >
         <slot
           name="toggle"
           class="toggle"
@@ -245,15 +287,12 @@ export class Dropdown extends RapidElement {
         <div
           class="${getClasses({
             dropdown: true,
-            right: this.right,
-            left: this.left,
-            top: this.top,
-            bottom: this.bottom
+            dormant: this.dormant
           })}"
+          style=${styleMap(this.dropdownStyle)}
           tabindex="0"
-          @mousedown=${this.handleDropdownMouseDown}
         >
-          <div class="arrow"></div>
+          <div class="arrow" style=${styleMap(this.arrowStyle)}></div>
           <div class="dropdown-wrapper">
             <slot name="dropdown" tabindex="1"></slot>
           </div>

package/src/interfaces.ts

@@ -56,6 +56,7 @@ export interface User {
   id?: number;
   first_name?: string;
   last_name?: string;
+  name?: string;
   email?: string;
   role?: string;
   created_on?: string;
@@ -281,5 +282,7 @@ export enum CustomEventType {
   Resized = 'temba-resized',
   DetailsChanged = 'temba-details-changed',
   Error = 'temba-error',
-  Interrupt = 'temba-interrupt'
+  Interrupt = 'temba-interrupt',
+  Opened = 'temba-opened',
+  TicketUpdated = 'temba-ticket-updated'
 }

package/src/list/ContentMenu.ts

@@ -34,10 +34,14 @@ export enum ContentMenuItemType {
 export class ContentMenu extends RapidElement {
   static get styles() {
     return css`
+      :host {
+        tabindex: 0;
+      }
       .container {
         --button-y: 0.4em;
         --button-x: 1em;
         display: flex;
+        align-items: center;
       }
 
       .button_item,
@@ -45,10 +49,12 @@ export class ContentMenu extends RapidElement {
         margin-left: 1rem;
       }
 
+      temba-button {
+        margin-right: 0.5rem;
+      }
       .toggle {
         --icon-color: rgb(102, 102, 102);
-        padding: 0.5rem;
-        margin-left: 0.5rem;
+        padding: 0.4em;
       }
 
       .toggle:hover {
@@ -62,6 +68,7 @@ export class ContentMenu extends RapidElement {
         color: rgb(45, 45, 45);
         z-index: 50;
         min-width: 200px;
+        tabindex: 0;
       }
 
       .divider {
@@ -75,6 +82,7 @@ export class ContentMenu extends RapidElement {
         font-size: 1.1rem;
         cursor: pointer;
         font-weight: 400;
+        tabindex: 0;
       }
 
       .item:hover {
@@ -145,7 +153,6 @@ export class ContentMenu extends RapidElement {
 
   protected updated(changes: Map<string, any>) {
     super.updated(changes);
-
     if (changes.has('endpoint') || changes.has('legacy')) {
       this.fetchContentMenu();
     }
@@ -168,12 +175,7 @@ export class ContentMenu extends RapidElement {
           </temba-button>`;
         })}
         ${this.items && this.items.length > 0
-          ? html`<temba-dropdown
-              arrowsize="8"
-              arrowoffset="${this.arrowTopLeft ? '12' : '-12'}"
-              offsety="6"
-              bottom
-            >
+          ? html`<temba-dropdown>
               <div slot="toggle" class="toggle">
                 <temba-icon name="menu" size="1.5"></temba-icon>
               </div>

package/src/list/RunList.ts

@@ -70,7 +70,9 @@ export class RunList extends TembaList {
 
     if (changedProperties.has('results')) {
       if (this.results) {
-        const select = this.shadowRoot.querySelector('temba-select') as Select;
+        const select = this.shadowRoot.querySelector(
+          'temba-select'
+        ) as Select<any>;
         select.setOptions(this.results);
         this.resultKeys = this.results.reduce(
           (current, result) => ({ ...current, [result.key]: result }),

package/src/list/TembaList.ts

@@ -224,6 +224,10 @@ export class TembaList extends RapidElement {
     return this.endpoint;
   }
 
+  protected sanitizeResults(results: any[]): Promise<any[]> {
+    return Promise.resolve(results);
+  }
+
   /**
    * Refreshes the first page, updating any found items in our list
    */
@@ -250,10 +254,12 @@ export class TembaList extends RapidElement {
         controller
       );
 
+      const sanitizedResults = await this.sanitizeResults(page.results);
       const items = [...this.items];
+
       // remove any dupes already in our list
-      if (page.results) {
-        page.results.forEach((newOption: any) => {
+      if (sanitizedResults) {
+        sanitizedResults.forEach((newOption: any) => {
           if (this.sanitizeOption) {
             this.sanitizeOption(newOption);
           }
@@ -268,9 +274,9 @@ export class TembaList extends RapidElement {
         });
 
         // insert our new items at the front
-        let results = page.results;
+        let results = sanitizedResults;
         if (this.reverseRefresh) {
-          results = page.results.reverse();
+          results = sanitizedResults.reverse();
         }
         const newItems = [...results, ...items];
 
@@ -332,13 +338,15 @@ export class TembaList extends RapidElement {
 
       try {
         const page = await fetchResultsPage(endpoint, controller);
+        const sanitizedResults = await this.sanitizeResults(page.results);
+
         // sanitize our options if necessary
         if (this.sanitizeOption) {
-          page.results.forEach(this.sanitizeOption);
+          sanitizedResults.forEach(this.sanitizeOption);
         }
 
-        if (page.results) {
-          fetchedItems = fetchedItems.concat(page.results);
+        if (sanitizedResults) {
+          fetchedItems = fetchedItems.concat(sanitizedResults);
         }
 
         // save our next pages
@@ -427,14 +435,16 @@ export class TembaList extends RapidElement {
     if (this.nextPage && !this.loading) {
       this.loading = true;
       fetchResultsPage(this.nextPage).then((page: ResultsPage) => {
-        if (this.sanitizeOption) {
-          page.results.forEach(this.sanitizeOption);
-        }
+        this.sanitizeResults(page.results).then((sanitizedResults) => {
+          if (this.sanitizeOption) {
+            sanitizedResults.forEach(this.sanitizeOption);
+          }
 
-        this.items = [...this.items, ...page.results];
-        this.nextPage = page.next;
-        this.pages++;
-        this.loading = false;
+          this.items = [...this.items, ...sanitizedResults];
+          this.nextPage = page.next;
+          this.pages++;
+          this.loading = false;
+        });
       });
     }
   }

package/src/list/TembaMenu.ts

@@ -154,7 +154,7 @@ export class TembaMenu extends ResizeElement {
       }
 
       .level-0 > temba-dropdown .icon-wrapper {
-        padding: 0.2em 0.4em 0.2em 0.4em;
+        padding: 0.2em 0.4em 0.2em 0em;
       }
 
       .level-0 > .item.selected::before,
@@ -202,6 +202,12 @@ export class TembaMenu extends ResizeElement {
       }
 
       temba-dropdown {
+        margin: 0 0.25em;
+      }
+
+      temba-dropdown > div[slot='dropdown'] {
+        width: 300px;
+        overflow: hidden;
       }
 
       temba-dropdown > div[slot='dropdown'] .avatar > .details {
@@ -1200,21 +1206,14 @@ export class TembaMenu extends ResizeElement {
 
     if (menuItem.popup) {
       return html`
-        <temba-dropdown
-          offsetx="10"
-          arrowoffset="8"
-          arrowSize="0"
-          drop_align="left"
-          id="dd-${menuItem.id}"
-        >
+        <temba-dropdown id="dd-${menuItem.id}">
           <div slot="toggle">${item}</div>
-          <div slot="dropdown" style="width:300px;overflow:hidden;">
-            <div style="max-height:400px;overflow-y:auto">
-              ${(menuItem.items || []).map((child: MenuItem) => {
-                child.level = menuItem.level + 1;
-                return html`${this.renderMenuItem(child, menuItem)}`;
-              })}
-            </div>
+
+          <div slot="dropdown">
+            ${(menuItem.items || []).map((child: MenuItem) => {
+              child.level = menuItem.level + 1;
+              return html`${this.renderMenuItem(child, menuItem)}`;
+            })}
           </div>
         </temba-dropdown>
       `;

package/src/list/TicketList.ts

@@ -18,6 +18,15 @@ export class TicketList extends TembaList {
     return this.endpoint;
   }
 
+  protected sanitizeResults(results: any[]): Promise<any[]> {
+    return new Promise<any[]>((resolve) => {
+      const contacts: Contact[] = results as Contact[];
+      this.store.resolveUsers(contacts, ['ticket.assignee']).then(() => {
+        resolve(contacts);
+      });
+    });
+  }
+
   constructor() {
     super();
 
@@ -76,7 +85,9 @@ export class TicketList extends TembaList {
               <div>
                 ${!contact.ticket.closed_on && contact.ticket.assignee
                   ? html`<temba-user
+                      name=${contact.ticket.assignee.name}
                       email=${contact.ticket.assignee.email}
+                      avatar=${contact.ticket.assignee.avatar}
                       scale="0.8"
                     ></temba-user>`
                   : null}