@nyaruka/temba-components 0.169.0 → 0.170.1

package/package.json

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

package/src/display/Button.ts

@@ -101,9 +101,11 @@ export class Button extends LitElement {
         background: var(--success, #16a34a);
         color: #fff;
       }
+      /* Hover darkening: static pre-mixed values first for browsers
+         without color-mix(), re-derived from the token below. */
       .attention-button:hover,
       .affirmative:hover {
-        background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
+        background: #138f41;
       }
 
       /* DS .btn-danger — flat danger fill (no lift). */
@@ -112,7 +114,17 @@ export class Button extends LitElement {
         color: #fff;
       }
       .destructive-button:hover {
-        background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
+        background: #b73737;
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .attention-button:hover,
+        .affirmative:hover {
+          background: color-mix(in srgb, var(--success, #16a34a) 88%, black);
+        }
+        .destructive-button:hover {
+          background: color-mix(in srgb, var(--danger, #d03f3f) 88%, black);
+        }
       }
 
       /* DS .btn-ghost — text-only, hover fills with sunken */

package/src/display/Chat.ts

@@ -2,7 +2,7 @@ import { TemplateResult, html, nothing, PropertyValueMap, css } from 'lit';
 import { property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { RapidElement } from '../RapidElement';
-import { CustomEventType } from '../interfaces';
+import { CustomEventType, QuickReply } from '../interfaces';
 import { TicketEvent } from '../events';
 import { renderEventSummary } from '../events/eventRenderers';
 import { DEFAULT_AVATAR } from '../webchat/assets';
@@ -81,7 +81,7 @@ interface User extends ObjectReference {
 export interface Msg {
   text: string;
   channel: ObjectReference;
-  quick_replies: string[];
+  quick_replies: (string | QuickReply)[];
   urn: string;
   direction: string;
   type: string;
@@ -518,19 +518,15 @@ export class Chat extends RapidElement {
          same theme vars the flat fills used — color-mix keeps host
          re-theming working — with a whisper of shadow for depth and
          a hairline border mixed just darker than the fill so bubbles
-         hold their edge against the background. */
+         hold their edge against the background. Base rules carry flat
+         fills and pre-mixed borders for browsers without color-mix()
+         (pre-Chrome 111); the @supports block below layers the
+         gradients on top. */
       .bubble {
         padding: 10px 14px;
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
-          var(--color-chat-in, #e5e5ea) 100%
-        );
+        background: var(--color-chat-in, #e5e5ea);
         border-radius: 18px;
-        border: var(
-          --chat-border-in,
-          1px solid color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
-        );
+        border: var(--chat-border-in, 1px solid #d5d5da);
         box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
       }
 
@@ -550,20 +546,40 @@ export class Chat extends RapidElement {
       }
 
       .incoming .bubble {
-        background: linear-gradient(
-          180deg,
-          color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
-          var(--color-chat-out, #007aff) 58%,
-          color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
-        );
-        border: var(
-          --chat-border-out,
-          1px solid
-            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
-        );
+        background: var(--color-chat-out, #007aff);
+        border: var(--chat-border-out, 1px solid #006ee6);
         color: white;
       }
 
+      @supports (color: color-mix(in srgb, red, red)) {
+        .bubble {
+          background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--color-chat-in, #e5e5ea) 62%, white) 0%,
+            var(--color-chat-in, #e5e5ea) 100%
+          );
+          border: var(
+            --chat-border-in,
+            1px solid
+              color-mix(in srgb, var(--color-chat-in, #e5e5ea) 93%, black)
+          );
+        }
+
+        .incoming .bubble {
+          background: linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--color-chat-out, #007aff) 90%, white) 0%,
+            var(--color-chat-out, #007aff) 58%,
+            color-mix(in srgb, var(--color-chat-out, #007aff) 95%, black) 100%
+          );
+          border: var(
+            --chat-border-out,
+            1px solid
+              color-mix(in srgb, var(--color-chat-out, #007aff) 90%, black)
+          );
+        }
+      }
+
       .incoming .latest .bubble {
         border-bottom-right-radius: 4px;
       }
@@ -573,8 +589,11 @@ export class Chat extends RapidElement {
       }
 
       /* Notes get the same top-lit gradient treatment as message
-         bubbles, derived from their sticky-note yellow. */
+         bubbles, derived from their sticky-note yellow. The flat fill
+         first is the fallback for browsers without color-mix() — all
+         literals here, so the invalid gradient drops at parse time. */
       .note .bubble {
+        background: #fffac3;
         background: linear-gradient(
           180deg,
           color-mix(in srgb, #fffac3 62%, white) 0%,

package/src/display/Dropdown.ts

@@ -9,9 +9,6 @@ import { styleMap } from 'lit-html/directives/style-map.js';
 export class Dropdown extends RapidElement {
   static get styles() {
     return css`
-      :host {
-      }
-
       .wrapper {
         position: relative;
       }
@@ -25,9 +22,6 @@ export class Dropdown extends RapidElement {
         overflow: auto;
       }
 
-      .dropdown:focus {
-      }
-
       .dropdown.dormant {
         height: 0;
         overflow: hidden;
@@ -35,7 +29,16 @@ export class Dropdown extends RapidElement {
 
       .dropdown {
         position: fixed;
-        z-index: 2;
+        /* open popups sit above floating windows (simulator, 5000) and
+           other page chrome, but below dialogs and toasts (10000);
+           temba-content-menu mirrors this value on its temba-dropdown
+           flex item (see ContentMenu.ts) */
+        z-index: 9000;
+        /* the dormant (height: 0) rule is applied 250ms after close, so
+           until then this stays a laid-out, invisible fixed box at
+           z-index 9000 over whatever it was covering — ignore pointer
+           events unless we're actually open */
+        pointer-events: none;
         padding: 0;
         opacity: 0;
         border-radius: calc(var(--curvature) * 1.5);
@@ -67,6 +70,7 @@ export class Dropdown extends RapidElement {
 
       .open .dropdown {
         opacity: 1;
+        pointer-events: auto;
         transform: translateY(0.5em) scale(1);
       }
 

package/src/display/Label.ts

@@ -100,7 +100,10 @@ export default class Label extends LitElement {
          dark variant shade), so flow stays bluish, group stays purplish,
          etc. — no grey wash. */
       .label[class*='pill-'].clickable .mask:hover {
-        background: color-mix(in oklab, currentColor 10%, transparent);
+        /* Neutral wash first for browsers without color-mix() — the
+           currentColor mix can't fall back per-declaration because
+           currentColor keeps it valid until computed-value time. */
+        background: rgba(0, 0, 0, 0.06);
       }
       .label[class*='pill-'] temba-icon {
         margin-right: 0;
@@ -121,14 +124,26 @@ export default class Label extends LitElement {
         margin: 0;
         border: 0;
         border-radius: 999px;
-        background: color-mix(in oklab, currentColor 25%, transparent);
+        background: rgba(0, 0, 0, 0.12);
         color: inherit;
         opacity: 0.8;
         --icon-color: currentColor;
       }
       .label[class*='pill-'] .remove:hover {
         opacity: 1;
-        background: color-mix(in oklab, currentColor 45%, transparent);
+        background: rgba(0, 0, 0, 0.22);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .label[class*='pill-'].clickable .mask:hover {
+          background: color-mix(in oklab, currentColor 10%, transparent);
+        }
+        .label[class*='pill-'] .remove {
+          background: color-mix(in oklab, currentColor 25%, transparent);
+        }
+        .label[class*='pill-'] .remove:hover {
+          background: color-mix(in oklab, currentColor 45%, transparent);
+        }
       }
 
       /* When a removable X is present, tighten the mask's left padding

package/src/display/Options.ts

@@ -338,6 +338,13 @@ export class Options extends RapidElement {
   @property({ attribute: false })
   renderOption: { (option: any, selected: boolean): TemplateResult };
 
+  // renders between rows (and above the first) when the data crosses a
+  // grouping boundary - the result sits outside the option rows so it never
+  // picks up their hover or selection treatment. Returning null means the
+  // rows aren't a boundary and nothing is rendered between them.
+  @property({ attribute: false })
+  renderDivider: { (prev: any, option: any): TemplateResult | null };
+
   @property({ attribute: false })
   renderOptionName: { (option: any, selected: boolean): TemplateResult };
 
@@ -816,20 +823,26 @@ export class Options extends RapidElement {
           <div class="${classesInner}" style=${styleMap(optionsStyle)}>
             ${options.length > 0
               ? options.map((option, index) => {
-                  return html`<div
-                    data-option-index="${index}"
-                    @mousemove=${this.handleMouseMove}
-                    @mousedown=${this.handleOptionClick}
-                    class="option ${index === this.cursorIndex &&
-                    !this.internalFocusDisabled
-                      ? 'focused'
-                      : ''}"
-                  >
-                    ${this.resolvedRenderOption(
-                      option,
-                      index === this.cursorIndex
-                    )}
-                  </div>`;
+                  return html`${this.renderDivider
+                      ? this.renderDivider(
+                          index > 0 ? options[index - 1] : null,
+                          option
+                        )
+                      : null}
+                    <div
+                      data-option-index="${index}"
+                      @mousemove=${this.handleMouseMove}
+                      @mousedown=${this.handleOptionClick}
+                      class="option ${index === this.cursorIndex &&
+                      !this.internalFocusDisabled
+                        ? 'focused'
+                        : ''}"
+                    >
+                      ${this.resolvedRenderOption(
+                        option,
+                        index === this.cursorIndex
+                      )}
+                    </div>`;
                 })
               : this.visible && this.showEmptyMessage
                 ? html`<div

package/src/display/TembaDate.ts

@@ -1,4 +1,4 @@
-import { css, html, PropertyValues, TemplateResult } from 'lit';
+import { css, html, nothing, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { RapidElement } from '../RapidElement';
 import { Store } from '../store/Store';
@@ -47,7 +47,14 @@ export class TembaDate extends RapidElement {
     }
   }
 
-  public render(): TemplateResult {
+  public render(): TemplateResult | typeof nothing {
+    // unparseable values and zero-value times (e.g. go's zero time,
+    // 0001-01-01T00:00:00Z, for a contact that has never been seen) aren't
+    // real dates - render nothing rather than something like "2025 years ago"
+    if (this.datetime && !(this.datetime.isValid && this.datetime.year > 1)) {
+      return nothing;
+    }
+
     if (this.datetime && this.store) {
       this.datetime.setLocale(this.store.getLocale());
 

package/src/form/Compose.ts

@@ -1,7 +1,13 @@
 import { TemplateResult, html, css, PropertyValues, nothing } from 'lit';
 import { FieldElement } from './FieldElement';
 import { property } from 'lit/decorators.js';
-import { Attachment, CustomEventType, Language, Shortcut } from '../interfaces';
+import {
+  Attachment,
+  CustomEventType,
+  Language,
+  QuickReply,
+  Shortcut
+} from '../interfaces';
 import { Icon } from '../Icons';
 import { DEFAULT_MEDIA_ENDPOINT } from '../utils';
 import { Select } from './select/Select';
@@ -12,7 +18,7 @@ import { setCaretOffset } from '../excellent/caret-utils';
 export interface ComposeValue {
   text: string;
   attachments: { uuid: string }[];
-  quick_replies: string[];
+  quick_replies: (string | QuickReply)[];
   optin: string;
   template: string;
   variables: string[];
@@ -236,7 +242,7 @@ export class Compose extends FieldElement {
     [lang: string]: {
       text: string;
       attachments: Attachment[];
-      quick_replies: string[];
+      quick_replies: (string | QuickReply)[];
       optin?: { name: string; uuid: string };
       template?: string;
       variables?: string[];
@@ -357,11 +363,12 @@ export class Compose extends FieldElement {
       this.currentText = langValue.text || '';
       this.initialText = langValue.text || '';
       this.currentAttachments = langValue.attachments || [];
-      this.currentQuickReplies = (langValue.quick_replies || []).map(
-        (value) => {
-          return { name: value, value };
-        }
-      );
+      this.currentQuickReplies = (langValue.quick_replies || [])
+        .map((reply) =>
+          typeof reply === 'string' ? reply : (reply.text ?? null)
+        )
+        .filter((reply): reply is string => reply !== null)
+        .map((value) => ({ name: value, value }));
       this.currentOptin = langValue['optin'] ? [langValue['optin']] : [];
     }
 
@@ -410,25 +417,14 @@ export class Compose extends FieldElement {
     // own keydown inserts a newline (which would flash before the send
     // clears it); bubble keeps Enter-to-send working from anywhere else
     // in the compose after inner widgets have had their shot at it
-    this.addEventListener(
-      'keydown',
-      this.handleHostKeyDown as EventListener,
-      true
-    );
-    this.addEventListener('keydown', this.handleHostKeyDown as EventListener);
+    this.addEventListener('keydown', this.handleHostKeyDownCapture, true);
+    this.addEventListener('keydown', this.handleHostKeyDownBubble);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener(
-      'keydown',
-      this.handleHostKeyDown as EventListener,
-      true
-    );
-    this.removeEventListener(
-      'keydown',
-      this.handleHostKeyDown as EventListener
-    );
+    this.removeEventListener('keydown', this.handleHostKeyDownCapture, true);
+    this.removeEventListener('keydown', this.handleHostKeyDownBubble);
   }
 
   private handleShortcutIconClick() {
@@ -454,7 +450,18 @@ export class Compose extends FieldElement {
     });
   }
 
-  private handleHostKeyDown = (evt: KeyboardEvent) => {
+  // events from inside our shadow tree are retargeted to the host, so
+  // both registrations see eventPhase as AT_TARGET — the phase can't
+  // tell us which registration is firing, so each binds it explicitly
+  private handleHostKeyDownCapture = (evt: KeyboardEvent) => {
+    this.handleHostKeyDown(evt, true);
+  };
+
+  private handleHostKeyDownBubble = (evt: KeyboardEvent) => {
+    this.handleHostKeyDown(evt, false);
+  };
+
+  private handleHostKeyDown = (evt: KeyboardEvent, capture: boolean) => {
     if (evt.key === 'Escape' && this.showShortcuts) {
       evt.preventDefault();
       evt.stopPropagation();
@@ -474,10 +481,12 @@ export class Compose extends FieldElement {
       // during capture only editor presses are claimed — anything else
       // (quick replies, attachments) waits for the bubble so the widget
       // it targets keeps first claim on the event
-      if (
-        evt.eventPhase === Event.CAPTURING_PHASE &&
-        !(editor && evt.composedPath().includes(editor))
-      ) {
+      if (capture && !(editor && evt.composedPath().includes(editor))) {
+        return;
+      }
+      // by the bubble an inner widget may have claimed the Enter for
+      // itself (e.g. the quick reply select adding a tag) — not a send
+      if (!capture && evt.defaultPrevented) {
         return;
       }
       if (editor) {

package/src/form/select/Select.ts

@@ -371,14 +371,27 @@ export class Select<T extends SelectOption> extends FieldElement {
         margin: 0;
         border: 0;
         border-radius: 999px;
-        background: color-mix(in oklab, currentColor 25%, transparent);
+        /* Neutral wash first for browsers without color-mix(); the
+           currentColor-tinted version below needs the @supports gate
+           because currentColor keeps the declaration valid until
+           computed-value time. */
+        background: rgba(0, 0, 0, 0.12);
         color: inherit;
         opacity: 0.8;
         --icon-color: currentColor;
       }
       .multi .remove-item:hover {
         opacity: 1;
-        background: color-mix(in oklab, currentColor 45%, transparent);
+        background: rgba(0, 0, 0, 0.22);
+      }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .multi .remove-item {
+          background: color-mix(in oklab, currentColor 25%, transparent);
+        }
+        .multi .remove-item:hover {
+          background: color-mix(in oklab, currentColor 45%, transparent);
+        }
       }
 
       input {

package/src/interfaces.ts

@@ -47,6 +47,14 @@ export interface Attachment {
   error: string;
 }
 
+/** A quick reply as stored/served by the server (engine shape) —
+ * `text` buttons carry text, `location` requests may omit it. */
+export interface QuickReply {
+  type?: string;
+  text?: string;
+  extra?: string;
+}
+
 export enum DateStyle {
   DayFirst = 'day_first',
   MonthFirst = 'month_first',
@@ -231,8 +239,9 @@ export interface Broadcast {
   /** Base-language attachments (`{content_type, url}` objects or
    * `contentType:url` strings). */
   attachments?: (string | Attachment)[];
-  /** Base-language quick replies. */
-  quick_replies?: string[];
+  /** Base-language quick replies — engine `{text}` objects, with
+   * plain strings tolerated for older data. */
+  quick_replies?: (string | QuickReply)[];
   /** The opt-in the broadcast requests, when it is one. */
   optin?: ObjectReference | null;
   /** The WhatsApp template the broadcast sends, when it uses one. */
@@ -271,7 +280,7 @@ export interface Msg {
   text: string;
   status: string;
   channel: ObjectReference;
-  quick_replies: string[];
+  quick_replies: (string | QuickReply)[];
   urn: string;
   /** The message's contact — populated by the messages CRUDL
    * endpoint. Carries whichever of name/urn the endpoint exposes. */
@@ -479,6 +488,7 @@ export enum CustomEventType {
   StoreUpdated = 'temba-store-updated',
   Ready = 'temba-ready',
   OrderChanged = 'temba-order-changed',
+  ColumnOrderChanged = 'temba-column-order-changed',
   DragStart = 'temba-drag-start',
   DragStop = 'temba-drag-stop',
   DragExternal = 'temba-drag-external',

package/src/list/BroadcastList.ts

@@ -198,7 +198,8 @@ export class BroadcastList extends ContentList<Broadcast> {
       }
       .menu-button.destructive:hover {
         border-color: #dc2626;
-        background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #fdf2f2;
       }
       .detail-body {
         display: flex;
@@ -243,15 +244,25 @@ export class BroadcastList extends ContentList<Broadcast> {
         align-items: flex-start;
         gap: 0.6em;
         padding: 0.9em 1em 1em;
-        background: color-mix(
-          in srgb,
-          var(--sunken, #f1f3f5) 45%,
-          var(--surface, #fff)
-        );
+        /* pre-mixed fallback for browsers without color-mix() */
+        background: #f9fafa;
         border: 1px solid var(--border, #e4e7ec);
         border-radius: var(--r);
         line-height: 1.5;
       }
+
+      @supports (color: color-mix(in srgb, red, red)) {
+        .menu-button.destructive:hover {
+          background: color-mix(in srgb, #dc2626 6%, var(--surface, #fff));
+        }
+        .detail-message {
+          background: color-mix(
+            in srgb,
+            var(--sunken, #f1f3f5) 45%,
+            var(--surface, #fff)
+          );
+        }
+      }
       .detail-message temba-expression-highlight {
         align-self: stretch;
         white-space: pre-wrap;
@@ -872,7 +883,9 @@ export class BroadcastList extends ContentList<Broadcast> {
                           ${broadcast.quick_replies.map(
                             (reply) =>
                               html`<temba-label type="neutral"
-                                >${reply}</temba-label
+                                >${typeof reply === 'string'
+                                  ? reply
+                                  : (reply.text ?? reply.type)}</temba-label
                               >`
                           )}
                         </div>`