@nyaruka/temba-components 0.158.0 → 0.158.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.158.0",
+  "version": "0.158.3",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",

package/src/display/Dropdown.ts

@@ -205,13 +205,22 @@ export class Dropdown extends RapidElement {
         return;
       }
 
+      // Anchor the dropdown to the toggle's viewport coordinates.
+      // The dropdown is `position: fixed`, so viewport coords are
+      // the right reference frame. Without an explicit anchor the
+      // browser resolves `top: auto; left: auto` from the element's
+      // in-flow position, which mis-places the dropdown when the
+      // page is scrolled. Always setting top/left from
+      // getBoundingClientRect makes positioning scroll-invariant.
       const dropdownStyle = {
         border: '1px solid rgba(0,0,0,0.1)',
-        marginTop: '0.5em'
+        marginTop: '0.5em',
+        top: toggleBounds.bottom + 'px',
+        left: toggleBounds.left + 'px'
       };
 
       // if off the the right, bump it left
-      if (dropdownBounds.right > window.innerWidth) {
+      if (toggleBounds.left + dropdownBounds.width > window.innerWidth) {
         dropdownStyle['left'] =
           toggleBounds.right - dropdownBounds.width + 'px';
         delete dropdownStyle['right'];
@@ -219,7 +228,7 @@ export class Dropdown extends RapidElement {
       }
 
       // if off to the bottom, bump it up
-      if (dropdownBounds.bottom > window.innerHeight) {
+      if (toggleBounds.bottom + dropdownBounds.height > window.innerHeight) {
         dropdownStyle['top'] = toggleBounds.top - dropdownBounds.height + 'px';
         dropdownStyle['marginTop'] = '-0.5em';
         bumpedUp = true;
@@ -237,9 +246,12 @@ export class Dropdown extends RapidElement {
       // anchored to far-left toggles (e.g. rail items) don't rub against
       // the window edge. Shift the dropdown right and slide the arrow
       // back the same amount so it still points at the toggle.
+      // Check against the intended `left` (toggleBounds.left) rather
+      // than the dropdown's currently-rendered bounds, since the new
+      // left is what we're about to set.
       const MIN_LEFT = 8;
-      if (dropdownBounds.left < MIN_LEFT && !bumpedLeft) {
-        const shift = MIN_LEFT - dropdownBounds.left;
+      if (toggleBounds.left < MIN_LEFT && !bumpedLeft) {
+        const shift = MIN_LEFT - toggleBounds.left;
         dropdownStyle['left'] = MIN_LEFT + 'px';
         arrowLeft -= shift;
       }

package/src/flow/nodes/split_by_resthook.ts

@@ -87,10 +87,10 @@ export const split_by_resthook: NodeConfig = {
     const existingCases = originalNode.router?.cases || [];
 
     const { router, exits } = createSuccessFailureRouter(
-      '@webhook.json.status',
+      '@webhook.status',
       {
-        type: 'has_text',
-        arguments: []
+        type: 'has_number_between',
+        arguments: ['200', '299']
       },
       existingCategories,
       existingExits,

package/src/interfaces.ts

@@ -323,5 +323,8 @@ export enum CustomEventType {
   RevisionViewed = 'temba-revision-viewed',
   RevisionCancelled = 'temba-revision-cancelled',
   RevisionReverted = 'temba-revision-reverted',
-  RevisionsClosed = 'temba-revisions-closed'
+  RevisionsClosed = 'temba-revisions-closed',
+  RowClick = 'temba-row-click',
+  SelectionChange = 'temba-selection-change',
+  BulkAction = 'temba-bulk-action'
 }

package/src/layout/TabPane.ts

@@ -226,7 +226,9 @@ export class TabPane extends RapidElement {
       }
     }
     this.options = tabs;
-    this.index = 0;
+    if (this.index < 0 || this.index >= tabs.length) {
+      this.index = 0;
+    }
   }
 
   public firstUpdated(

package/src/list/ContactList.ts

@@ -0,0 +1,225 @@
+import { css, html, PropertyValues, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ContentList, ContentListColumn } from './ContentList';
+import { Icon } from '../Icons';
+import { Contact } from '../interfaces';
+import { getUrl } from '../utils';
+
+const FIELD_PREFIX = 'field:';
+
+/**
+ * Contact CRUDL list — drop-in replacement for the rapidpro
+ * `contacts/contact_list.html` table. Each row carries a contact
+ * silhouette as the leading icon, name + URN, group pills, and a
+ * last-seen duration. Name + Last-seen are sortable.
+ *
+ * Featured contact fields from the workspace render as extra
+ * columns between URN and Groups. The component fetches them from
+ * {@link ContactList.fieldsEndpoint} on connect; cells read each
+ * contact's value out of `item.fields[<key>]`.
+ */
+export class ContactList extends ContentList<Contact> {
+  static get styles() {
+    return css`
+      ${ContentList.styles}
+      .contact-name {
+        color: inherit;
+        font-weight: var(--w-medium);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .contact-urn {
+        color: var(--text-3);
+        font-size: 12.5px;
+      }
+      /* Featured-field values are concrete data (someone's age,
+         their state, etc.) — bold text, not a pill. Truncated
+         with a title tooltip so long entries don't blow up the
+         row width. */
+      .field-value {
+        font-weight: var(--w-semibold);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: block;
+      }
+      .group-list {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
+    `;
+  }
+
+  /** Endpoint returning `{ results: ContactField[] }`. Fields where
+   * `featured: true` become extra columns. */
+  @property({ type: String, attribute: 'fields-endpoint' })
+  fieldsEndpoint = '/api/v2/fields.json';
+
+  @state()
+  private featuredFields: any[] = [];
+
+  private pendingFieldsController?: AbortController;
+
+  constructor() {
+    super();
+    this.valueKey = 'uuid';
+    this.emptyMessage = 'No contacts';
+    this.searchPlaceholder = 'Search contacts';
+    this.columns = this.buildColumns();
+    this.bulkActions = [
+      { key: 'send', label: 'Send', icon: Icon.compose },
+      { key: 'flow', label: 'Start flow', icon: Icon.flow },
+      { key: 'archive', label: 'Archive', icon: Icon.archive },
+      { key: 'delete', label: 'Delete', icon: Icon.delete, destructive: true }
+    ];
+  }
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.loadFields();
+  }
+
+  public disconnectedCallback(): void {
+    if (this.pendingFieldsController) {
+      this.pendingFieldsController.abort();
+      this.pendingFieldsController = undefined;
+    }
+    super.disconnectedCallback();
+  }
+
+  protected updated(changes: PropertyValues): void {
+    super.updated(changes);
+    if (changes.has('fieldsEndpoint') && this.fieldsEndpoint) {
+      this.loadFields();
+    }
+  }
+
+  private async loadFields(): Promise<void> {
+    if (!this.fieldsEndpoint) return;
+    // Abort any in-flight fields request so a stale response can't
+    // overwrite featuredFields/columns after a new endpoint is set
+    // or the component has disconnected.
+    if (this.pendingFieldsController) {
+      this.pendingFieldsController.abort();
+    }
+    const controller = new AbortController();
+    this.pendingFieldsController = controller;
+    try {
+      const response = await getUrl(this.fieldsEndpoint, controller);
+      // If the controller has been swapped or cleared, the response
+      // is from a stale request — drop it on the floor.
+      if (this.pendingFieldsController !== controller) return;
+      const all = response.json?.results || [];
+      this.featuredFields = all
+        .filter((f: any) => f.featured)
+        .sort((a: any, b: any) => (b.priority ?? 0) - (a.priority ?? 0));
+      this.columns = this.buildColumns();
+    } catch (err) {
+      if ((err as DOMException)?.name !== 'AbortError') {
+        // eslint-disable-next-line no-console
+        console.error('failed to fetch contact fields', err);
+      }
+    } finally {
+      if (this.pendingFieldsController === controller) {
+        this.pendingFieldsController = undefined;
+      }
+    }
+  }
+
+  /** Columns: name, urn, <featured fields>, groups, last seen. */
+  private buildColumns(): ContentListColumn[] {
+    const fieldColumns: ContentListColumn[] = (this.featuredFields || []).map(
+      (f: any) => ({
+        key: FIELD_PREFIX + f.key,
+        label: f.name || f.label || f.key,
+        width: '110px',
+        grow: 0
+      })
+    );
+    return [
+      { key: 'name', label: 'Name', sortable: true, grow: 2 },
+      { key: 'urn', label: 'URN', width: '150px', grow: 0 },
+      ...fieldColumns,
+      { key: 'groups', label: 'Groups', grow: 1 },
+      {
+        key: 'last_seen_on',
+        label: 'Last seen',
+        sortable: true,
+        width: '110px',
+        grow: 0,
+        align: 'right'
+      }
+    ];
+  }
+
+  protected getRowIcon(_item: Contact): string | null {
+    return Icon.contact;
+  }
+
+  protected getRowHref(item: Contact): string | null {
+    return item?.uuid ? `/contact/read/${item.uuid}/` : null;
+  }
+
+  protected renderCell(
+    item: Contact,
+    column: ContentListColumn
+  ): TemplateResult | string {
+    if (column.key.startsWith(FIELD_PREFIX)) {
+      const fieldKey = column.key.substring(FIELD_PREFIX.length);
+      const raw = item.fields?.[fieldKey];
+      const value = raw == null || raw === '' ? '' : String(raw);
+      return value
+        ? html`<span class="field-value" title=${value}>${value}</span>`
+        : '';
+    }
+    switch (column.key) {
+      case 'name':
+        return html`<span class="contact-name" title=${item.name || ''}
+          >${item.name || '—'}</span
+        >`;
+      case 'urn':
+        return html`<span class="contact-urn"
+          >${this.primaryUrn(item) || ''}</span
+        >`;
+      case 'groups':
+        return this.renderGroups(item);
+      case 'last_seen_on':
+        return item.last_seen_on
+          ? html`<temba-date
+              value=${item.last_seen_on}
+              display="duration"
+            ></temba-date>`
+          : '';
+      default:
+        return super.renderCell(item, column);
+    }
+  }
+
+  private primaryUrn(item: Contact): string {
+    const i = item as any;
+    if (i.urn) return i.urn;
+    if (Array.isArray(i.urns) && i.urns.length > 0) {
+      const u = i.urns[0];
+      return typeof u === 'string' ? u.split(':')[1] || u : u?.display || '';
+    }
+    return '';
+  }
+
+  private renderGroups(item: Contact): TemplateResult {
+    const groups = item.groups || [];
+    if (groups.length === 0) return html``;
+    return html`
+      <div class="group-list">
+        ${groups.map(
+          (g: any) =>
+            html`<temba-label type="group" icon=${Icon.group}
+              >${g.name}</temba-label
+            >`
+        )}
+      </div>
+    `;
+  }
+}