@nyaruka/temba-components 0.163.0 → 0.165.0

package/src/list/FlowList.ts

@@ -14,23 +14,38 @@ export class FlowList extends ContentList<Flow> {
   static get styles() {
     return css`
       ${ContentList.styles}
+      /* The name cell is a flex row (name text, issue icon, label
+         chips) that fills the grow column. When space runs out the
+         text spans ellipsize — the flex items shrink instead of the
+         cell hard-clipping them mid-glyph, which is what happens to
+         an inline-flex atomic inline under .cell-inner's ellipsis. */
       .flow-name {
         color: inherit;
         font-weight: var(--w-medium);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        min-width: 0;
+      }
+      .flow-name .name {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
       }
       .flow-labels {
-        display: inline-flex;
+        display: flex;
         align-items: center;
         gap: 4px;
-        margin-left: 4px;
+        min-width: 0;
+      }
+      /* Chips shrink with the row and ellipsize internally (the
+         label's own slot handles that) rather than being clipped
+         mid-chip at the column edge. */
+      .flow-labels temba-label {
+        min-width: 0;
       }
       .issue-icon {
+        flex: none;
         --icon-color: var(--warning);
       }
       .num {
@@ -84,13 +99,20 @@ export class FlowList extends ContentList<Flow> {
     this.valueKey = 'uuid';
     this.emptyMessage = 'No flows';
     this.searchPlaceholder = 'Search flows';
+    // The name column is a `grow` column — it pools the table's
+    // leftover width so long names (and their label chips) get all
+    // available space before truncating, instead of clipping against
+    // a fixed cap while slack sits in the spacer. minTableWidth arms
+    // a horizontal scroll once the container is too narrow to keep
+    // the columns usable, rather than clipping anything.
+    this.minTableWidth = '640px';
     this.columns = [
       {
         key: 'name',
         label: 'Name',
         sortable: true,
         minWidth: '160px',
-        maxWidth: '280px',
+        grow: true,
         pinned: true
       },
       {
@@ -174,7 +196,9 @@ export class FlowList extends ContentList<Flow> {
       case 'name': {
         const labels = item.labels || [];
         return html`<span class="flow-name"
-          >${item.name || ''}
+          ><span class="name" title="${item.name || ''}"
+            >${item.name || ''}</span
+          >
           ${item.has_issues
             ? html`<temba-icon
                 class="issue-icon"

package/src/list/MsgList.ts

@@ -2,6 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { ContentList, ContentListColumn } from './ContentList';
 import { Icon } from '../Icons';
 import { Msg } from '../interfaces';
+import { attachmentAsString } from '../utils';
 
 /**
  * Message CRUDL list — drop-in replacement for the rapidpro
@@ -14,9 +15,9 @@ export class MsgList extends ContentList<Msg> {
   static get styles() {
     return css`
       ${ContentList.styles}
-      /* The message cell holds the body text with its attachment
-         thumbnails right after it, and the flow / label pills pushed
-         to the trailing edge. The text sizes to content and
+      /* The message cell holds the body text on the leading edge, with
+         its attachment thumbnails and the flow / label pills grouped
+         and pushed to the trailing edge. The text sizes to content and
          ellipsizes when squeezed — resolved per row, so a busy row
          doesn't widen a column for all of them. */
       .msg-cell {
@@ -34,7 +35,7 @@ export class MsgList extends ContentList<Msg> {
         text-overflow: ellipsis;
         white-space: nowrap;
       }
-      /* Attachment thumbnails sit immediately after the text. */
+      /* Attachment thumbnails, immediately after the message text. */
       .msg-attachments {
         flex: 0 0 auto;
         display: flex;
@@ -44,10 +45,10 @@ export class MsgList extends ContentList<Msg> {
       /* Flow + label pills, pushed to the trailing edge of the cell. */
       .cell-pills {
         flex: 0 0 auto;
+        margin-left: auto;
         display: flex;
         align-items: center;
         gap: 6px;
-        margin-left: auto;
       }
       /* Attachment thumbnails are sized well below the 44px row so
          they never grow its height — a small square preview rather
@@ -160,13 +161,18 @@ export class MsgList extends ContentList<Msg> {
     }
   }
 
-  /** The message cell — body text, its attachment thumbnails, then
-   * the trailing flow / label pills. Each piece sizes to content, so
-   * the split is resolved independently for every row. */
+  /** The message cell — body text on the leading edge with its
+   * attachment thumbnails immediately after it, and the flow / label
+   * pills pushed to the trailing edge. Each piece sizes to content, so
+   * the split is resolved independently for every row. A message with
+   * no text renders no text span at all — otherwise its min-width
+   * would strand an attachment-only row's thumbnails away from the
+   * leading edge. */
   private renderMessageCell(item: Msg): TemplateResult {
+    const text = this.renderMessageText(item);
     return html`
       <div class="msg-cell">
-        <span class="msg-text">${this.renderMessageText(item)}</span>
+        ${text ? html`<span class="msg-text">${text}</span>` : ''}
         ${this.renderAttachments(item)}${this.renderPills(item)}
       </div>
     `;
@@ -208,8 +214,8 @@ export class MsgList extends ContentList<Msg> {
     return item.text || '';
   }
 
-  /** Attachment thumbnails for a row, sitting immediately after the
-   * message text, or '' when the row carries none. */
+  /** Attachment thumbnails for a row, immediately after the message
+   * text, or '' when the row carries none. */
   private renderAttachments(item: Msg): TemplateResult | string {
     const attachments = item.attachments || [];
     if (!attachments.length) return '';
@@ -219,7 +225,7 @@ export class MsgList extends ContentList<Msg> {
           (a) => html`
             <temba-thumbnail
               class="msg-thumb"
-              attachment=${a}
+              attachment=${attachmentAsString(a)}
             ></temba-thumbnail>
           `
         )}

package/src/list/SortableList.ts

@@ -92,6 +92,7 @@ export class SortableList extends RapidElement {
 
   draggingIdx = -1;
   draggingEle = null;
+  ghostOriginalDisplay = '';
   dropPlaceholder: HTMLDivElement = null;
   pendingDropIndex = -1;
   pendingTargetElement: HTMLElement = null;
@@ -111,9 +112,11 @@ export class SortableList extends RapidElement {
   }
 
   private getSortableElements(): Element[] {
+    // flatten so wrapper components can forward their host's children
+    // through a nested <slot>
     const eles = this.shadowRoot
       .querySelector('slot')
-      .assignedElements()
+      .assignedElements({ flatten: true })
       .filter(
         (ele) =>
           ele.classList.contains('sortable') &&
@@ -539,11 +542,38 @@ export class SortableList extends RapidElement {
   private beginDrag(
     target: HTMLElement,
     clientX: number,
-    clientY: number
+    clientY: number,
+    path: EventTarget[] = []
   ): boolean {
-    // if we have a drag handle, only allow dragging from that element
+    // if we have a drag handle, only allow dragging from that element. The
+    // handle may live inside a sortable child's shadow DOM (where event
+    // retargeting hides it from event.target), so walk the composed path up
+    // to the first .sortable host looking for it — and require that host to
+    // actually be one of ours, so a same-named class elsewhere in the path
+    // can't start a drag.
     if (this.dragHandle) {
-      if (!target.classList.contains(this.dragHandle)) {
+      const searchPath = path.length > 0 ? path : [target];
+      let onHandle = false;
+      let handleHost: Element = null;
+      for (const hop of searchPath) {
+        // shadow roots appear as non-Element hops mid-path (e.g. an icon
+        // inside the handle) — skip them rather than giving up
+        if (!(hop instanceof Element)) {
+          continue;
+        }
+        if (!onHandle && hop.classList.contains(this.dragHandle)) {
+          onHandle = true;
+        }
+        if (hop.classList.contains('sortable')) {
+          handleHost = onHandle ? hop : null;
+          break;
+        }
+      }
+      if (
+        !onHandle ||
+        !handleHost ||
+        !this.getSortableElements().includes(handleHost)
+      ) {
         return false;
       }
     }
@@ -572,7 +602,12 @@ export class SortableList extends RapidElement {
 
   private handleMouseDown(event: MouseEvent) {
     if (
-      this.beginDrag(event.target as HTMLElement, event.clientX, event.clientY)
+      this.beginDrag(
+        event.target as HTMLElement,
+        event.clientX,
+        event.clientY,
+        event.composedPath()
+      )
     ) {
       event.preventDefault();
       event.stopPropagation();
@@ -586,7 +621,12 @@ export class SortableList extends RapidElement {
     const touch = event.touches[0];
     if (!touch) return;
     if (
-      this.beginDrag(event.target as HTMLElement, touch.clientX, touch.clientY)
+      this.beginDrag(
+        event.target as HTMLElement,
+        touch.clientX,
+        touch.clientY,
+        event.composedPath()
+      )
     ) {
       event.stopPropagation();
       document.addEventListener('touchmove', this.handleTouchMove, {
@@ -690,8 +730,11 @@ export class SortableList extends RapidElement {
         this.isExternalDrag = true;
         this.hideDropPlaceholder();
 
-        // hide the ghost element when dragging externally
+        // hide the ghost element when dragging externally, remembering its
+        // display (inlined from the original's computed style) so re-entry
+        // can restore it - forcing 'block' would break flex-laid-out ghosts
         if (this.ghostElement) {
+          this.ghostOriginalDisplay = this.ghostElement.style.display;
           this.ghostElement.style.display = 'none';
         }
 
@@ -706,7 +749,8 @@ export class SortableList extends RapidElement {
 
         // show the ghost element again when dragging internally
         if (this.ghostElement) {
-          this.ghostElement.style.display = 'block';
+          this.ghostElement.style.display =
+            this.ghostOriginalDisplay || 'block';
         }
 
         this.fireCustomEvent(CustomEventType.DragInternal, {

package/src/list/TembaList.ts

@@ -220,6 +220,14 @@ export class TembaList extends RapidElement {
     return this.selected;
   }
 
+  /** Deselects without firing a change — e.g. mobile going back to the
+   *  list, so the same row can be selected again. */
+  public clearSelection() {
+    this.cursorIndex = -1;
+    this.selected = null;
+    this.value = null;
+  }
+
   public refresh(): void {
     this.refreshKey = 'requested_' + new Date().getTime();
   }

package/src/list/TembaMenu.ts

@@ -33,7 +33,6 @@ export interface MenuItem {
   avatar?: string;
   trigger?: boolean;
   event?: string;
-  mobile?: boolean;
   initial?: string;
 }
 
@@ -401,29 +400,13 @@ export class TembaMenu extends ResizeElement {
         flex-direction: row;
       }
 
-      .root.fully-collapsed.mobile .level.level-0 > .item {
+      /* when collapsed on mobile, the only thing in the header is the
+         hamburger — any new direct child of level-0 must opt in with
+         the .top class to stay visible here */
+      .root.fully-collapsed.mobile .level.level-0 > *:not(.top) {
         display: none;
       }
 
-      .root.fully-collapsed.mobile .level.level-0 > .empty {
-        display: block;
-        width: 100%;
-        min-width: inherit;
-        max-width: inherit;
-      }
-
-      .root .level.level-0 > .show-mobile {
-        display: none;
-      }
-
-      .root.mobile .level.level-0 > .show-mobile {
-        display: flex;
-      }
-
-      .root.fully-collapsed.mobile .level.level-0 > .show-mobile {
-        display: contents !important;
-      }
-
       .root.fully-collapsed.mobile .level.level-0 .expand-icon {
         max-height: 100%;
         padding: 1em;
@@ -455,27 +438,12 @@ export class TembaMenu extends ResizeElement {
         min-width: inherit;
       }
 
-      .mobile.fully-collapsed .item {
-      }
-
       .mobile .expand-icon {
         transition: none;
         transform: rotate(-90deg);
         align-self: center;
       }
 
-      .mobile.fully-collapsed .level-0 .empty {
-        flex-grow: 1;
-      }
-
-      .mobile.fully-collapsed .top-spacer {
-        flex-grow: 0;
-      }
-
-      .mobile.fully-collapsed #dd-workspace {
-        display: none;
-      }
-
       .mobile.fully-collapsed .expand-icon {
         transform: none;
       }
@@ -1203,8 +1171,7 @@ export class TembaMenu extends ResizeElement {
       expanding: this.expanding && this.expanding === menuItem.id,
       expanded: this.isExpanded(menuItem),
       iconless: !icon && !collapsedIcon && !menuItem.avatar,
-      pressed: this.pressedItem && this.pressedItem.id == menuItem.id,
-      'show-mobile': menuItem.mobile
+      pressed: this.pressedItem && this.pressedItem.id == menuItem.id
     });
 
     if (menuItem.avatar) {