@unofficialbox/box-open-elements 0.5.0 → 0.7.0

package/dist/patterns/preview/annotation-thread.js

@@ -10,6 +10,12 @@ const escapeHtml = (value) => value
     .replaceAll('"', """)
     .replaceAll("'", "'");
 const elementStyles = `
+        /* Author display rules on parts would otherwise defeat the UA's
+           [hidden] rule — state toggling relies on the hidden attribute. */
+        [hidden] {
+          display: none !important;
+        }
+
         :host {
           display: block;
           color: inherit;
@@ -46,11 +52,19 @@ const elementStyles = `
         [part="entries"] {
           display: grid;
           gap: 0.6rem;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+        }
+
+        [part="entry-item"] {
+          display: block;
         }
 
         [part="entry"] {
           appearance: none;
           display: grid;
+          inline-size: 100%;
           grid-template-columns: auto 1fr;
           gap: ${boePanel.gap};
           align-items: start;
@@ -144,9 +158,48 @@ const elementStyles = `
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
 
+        [part="composer"] {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        [part="composer-label"] {
+          font-size: 0.74rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="composer-input"] {
+          min-height: 4rem;
+          padding: 0.55rem;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 60%, transparent);
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          line-height: 1.5;
+          resize: vertical;
+        }
+
+        [part="composer-submit"] {
+          appearance: none;
+          justify-self: start;
+          min-height: 2rem;
+          padding: 0.4rem 0.7rem;
+          border: 1px solid transparent;
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+          font: inherit;
+          cursor: pointer;
+        }
+
         ${boeNeutralInteractiveStyles('[part="entry"]')}
         ${boeNeutralInteractiveStyles('[part="action"]')}
         ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+        ${boeBrandInteractiveStyles('[part="composer-submit"]')}
 
         [part="entry"][aria-pressed="true"],
         [part="entry"][aria-pressed="true"]:hover:not(:disabled) {
@@ -163,14 +216,29 @@ const elementStyles = `
 export class AnnotationThread extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["actions", "entries", "message", "selected-entry-id", "heading"];
+        return ["actions", "composable", "entries", "message", "selected-entry-id", "heading"];
     }
+    titleEl;
+    messageEl;
+    entriesEl;
+    emptyEl;
+    actionsEl;
+    composerEl;
+    composerInputEl;
+    entriesSignature = "";
+    actionsSignature = "";
     get actions() {
         return this.parseJsonAttribute("actions", []);
     }
     set actions(value) {
         this.setAttribute("actions", JSON.stringify(value));
     }
+    get composable() {
+        return this.hasAttribute("composable");
+    }
+    set composable(value) {
+        this.toggleAttribute("composable", value);
+    }
     get entries() {
         return this.parseJsonAttribute("entries", []);
     }
@@ -203,12 +271,6 @@ export class AnnotationThread extends BaseElement {
     set heading(value) {
         this.setAttribute("heading", value);
     }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-    }
     parseJsonAttribute(name, fallback) {
         const raw = this.getAttribute(name);
         if (!raw) {
@@ -239,94 +301,183 @@ export class AnnotationThread extends BaseElement {
             detail: entry,
         }));
     }
-    renderTemplate() {
-        if (!this.shadowRoot) {
+    submitComposer() {
+        const body = this.composerInputEl.value.trim();
+        if (!this.composable || !body) {
             return;
         }
-        this.shadowRoot.innerHTML = `
-      <style>${elementStyles}</style>
-      <div part="content-host"></div>
-    `;
+        this.dispatchEvent(new CustomEvent("entry-submitted", {
+            bubbles: true,
+            composed: true,
+            detail: {
+                body,
+                inReplyToId: this.selectedEntryId || null,
+            },
+        }));
+        this.composerInputEl.value = "";
     }
-    update() {
+    entriesKey() {
+        return this.getAttribute("entries") ?? "";
+    }
+    actionsKey() {
+        return JSON.stringify(this.actions.map(action => action.id));
+    }
+    rebuildEntries() {
+        this.entriesEl.innerHTML = this.entries
+            .map(entry => {
+            const selected = entry.id === this.selectedEntryId;
+            return `
+          <li part="entry-item" role="listitem">
+            <button
+              type="button"
+              part="entry"
+              data-entry-id="${escapeHtml(entry.id)}"
+              aria-pressed="${selected ? "true" : "false"}"
+            >
+              <span part="entry-avatar">${escapeHtml(entry.initials ?? entry.author.slice(0, 2).toUpperCase())}</span>
+              <span part="entry-copy">
+                <span part="entry-topline">
+                  <span part="entry-author">${escapeHtml(entry.author)}</span>
+                  ${entry.toolLabel ? `<span part="entry-tool">${escapeHtml(entry.toolLabel)}</span>` : ""}
+                  ${entry.status ? `<span part="entry-status">${escapeHtml(entry.status)}</span>` : ""}
+                </span>
+                <span part="entry-body">${escapeHtml(entry.body)}</span>
+                ${entry.createdAt ? `<span part="entry-time">${escapeHtml(entry.createdAt)}</span>` : ""}
+              </span>
+            </button>
+          </li>
+        `;
+        })
+            .join("");
+    }
+    patchEntrySelection() {
+        this.entriesEl.querySelectorAll('[part="entry"]').forEach(button => {
+            const selected = button.getAttribute("data-entry-id") === this.selectedEntryId;
+            button.setAttribute("aria-pressed", selected ? "true" : "false");
+        });
+    }
+    rebuildActions() {
+        this.actionsEl.innerHTML = this.actions
+            .map(action => `
+          <button type="button" part="action" data-action-id="${escapeHtml(action.id)}" data-tone="${escapeHtml(action.tone ?? "neutral")}">
+            ${escapeHtml(action.label)}
+          </button>
+        `)
+            .join("");
+    }
+    patchActionLabels() {
+        // Action IDs are arbitrary strings (quotes, newlines, …) — match on the
+        // dataset instead of interpolating them into a CSS selector.
+        const buttons = Array.from(this.actionsEl.querySelectorAll('[part="action"]'));
+        this.actions.forEach(action => {
+            const button = buttons.find(candidate => candidate.dataset.actionId === action.id);
+            if (!button) {
+                return;
+            }
+            button.textContent = action.label;
+            button.dataset.tone = action.tone ?? "neutral";
+        });
+    }
+    renderTemplate() {
         if (!this.shadowRoot) {
             return;
         }
-        const messageMarkup = this.message ? `<div part="message">${escapeHtml(this.message)}</div>` : "";
-        const actionsMarkup = this.actions.length
-            ? `
-          <div part="actions">
-            ${this.actions
-                .map(action => `
-                  <button type="button" part="action" data-action-id="${escapeHtml(action.id)}" data-tone="${escapeHtml(action.tone ?? "neutral")}">
-                    ${escapeHtml(action.label)}
-                  </button>
-                `)
-                .join("")}
-          </div>
-        `
-            : "";
-        const entriesMarkup = this.entries.length
-            ? `
-          <div part="entries" role="list" aria-label="${escapeHtml(this.heading)} entries">
-            ${this.entries
-                .map(entry => {
-                const selected = entry.id === this.selectedEntryId;
-                return `
-                  <button
-                    type="button"
-                    part="entry"
-                    data-entry-id="${escapeHtml(entry.id)}"
-                    aria-pressed="${selected ? "true" : "false"}"
-                  >
-                    <span part="entry-avatar">${escapeHtml(entry.initials ?? entry.author.slice(0, 2).toUpperCase())}</span>
-                    <span part="entry-copy">
-                      <span part="entry-topline">
-                        <span part="entry-author">${escapeHtml(entry.author)}</span>
-                        ${entry.toolLabel ? `<span part="entry-tool">${escapeHtml(entry.toolLabel)}</span>` : ""}
-                        ${entry.status ? `<span part="entry-status">${escapeHtml(entry.status)}</span>` : ""}
-                      </span>
-                      <span part="entry-body">${escapeHtml(entry.body)}</span>
-                      ${entry.createdAt ? `<span part="entry-time">${escapeHtml(entry.createdAt)}</span>` : ""}
-                    </span>
-                  </button>
-                `;
-            })
-                .join("")}
-          </div>
-        `
-            : `<div part="empty">No annotation thread entries available.</div>`;
-        const host = this.shadowRoot.querySelector('[part="content-host"]');
-        if (!host) {
-            return;
-        }
-        host.innerHTML = `
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
       <article part="thread">
         <header part="header">
-          <h2 part="title">${escapeHtml(this.heading)}</h2>
-          ${messageMarkup}
+          <h2 part="title"></h2>
+          <div part="message" hidden></div>
         </header>
-        ${entriesMarkup}
-        ${actionsMarkup}
+        <ul part="entries" role="list" hidden></ul>
+        <div part="empty" hidden>No annotation thread entries available.</div>
+        <div part="actions" hidden></div>
+        <div part="composer" hidden>
+          <label part="composer-label" for="annotation-thread-composer-input">Reply</label>
+          <textarea
+            part="composer-input"
+            id="annotation-thread-composer-input"
+            placeholder="Add a reply"
+          ></textarea>
+          <button type="button" part="composer-submit">Reply</button>
+        </div>
       </article>
     `;
-        this.shadowRoot.querySelectorAll('[part="entry"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const entryId = button.getAttribute("data-entry-id");
-                const entry = this.entries.find(item => item.id === entryId);
-                if (entry) {
-                    this.emitEntrySelected(entry);
-                }
-            });
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.messageEl = this.shadowRoot.querySelector('[part="message"]');
+        this.entriesEl = this.shadowRoot.querySelector('[part="entries"]');
+        this.emptyEl = this.shadowRoot.querySelector('[part="empty"]');
+        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
+        this.composerEl = this.shadowRoot.querySelector('[part="composer"]');
+        this.composerInputEl = this.shadowRoot.querySelector('[part="composer-input"]');
+    }
+    setupListeners() {
+        this.entriesEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="entry"]');
+            if (!button || !this.entriesEl.contains(button)) {
+                return;
+            }
+            const entryId = button.getAttribute("data-entry-id");
+            const entry = this.entries.find(item => item.id === entryId);
+            if (entry) {
+                this.emitEntrySelected(entry);
+            }
+        });
+        this.actionsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="action"]');
+            if (!button || !this.actionsEl.contains(button)) {
+                return;
+            }
+            const actionId = button.getAttribute("data-action-id");
+            if (actionId) {
+                this.emitAction(actionId);
+            }
         });
-        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const actionId = button.getAttribute("data-action-id");
-                if (actionId) {
-                    this.emitAction(actionId);
-                }
-            });
+        this.composerEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="composer-submit"]');
+            if (button) {
+                this.submitComposer();
+            }
         });
+        this.composerInputEl.addEventListener("keydown", event => {
+            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                this.submitComposer();
+            }
+        });
+    }
+    update() {
+        if (!this.entriesEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.messageEl.hidden = !this.message;
+        this.messageEl.textContent = this.message;
+        const entries = this.entries;
+        this.entriesEl.hidden = entries.length === 0;
+        this.emptyEl.hidden = entries.length > 0;
+        this.entriesEl.setAttribute("aria-label", `${this.heading} entries`);
+        const nextEntries = this.entriesKey();
+        if (nextEntries !== this.entriesSignature) {
+            this.entriesSignature = nextEntries;
+            this.rebuildEntries();
+        }
+        else {
+            this.patchEntrySelection();
+        }
+        const actions = this.actions;
+        this.actionsEl.hidden = actions.length === 0;
+        const nextActions = this.actionsKey();
+        if (nextActions !== this.actionsSignature || this.actionsEl.childElementCount === 0) {
+            this.actionsSignature = nextActions;
+            this.rebuildActions();
+        }
+        else {
+            this.patchActionLabels();
+        }
+        const composable = this.composable;
+        this.composerEl.hidden = !composable;
+        this.composerInputEl.disabled = !composable;
     }
 }
 AnnotationThread.register();

package/dist/patterns/preview/annotation-toolbar.d.ts

@@ -1,16 +1,16 @@
 import { BaseElement } from "../../core/index.js";
-type AnnotationToolbarTool = {
+export type AnnotationToolbarTool = {
     disabled?: boolean;
     icon?: string;
     id: string;
     label: string;
 };
-type AnnotationToolbarAction = {
+export type AnnotationToolbarAction = {
     id: string;
     label: string;
     tone?: string;
 };
-type AnnotationToolbarColor = {
+export type AnnotationToolbarColor = {
     id: string;
     label: string;
     value: string;
@@ -18,6 +18,14 @@ type AnnotationToolbarColor = {
 export declare class AnnotationToolbar extends BaseElement {
     static readonly tagName: string;
     static get observedAttributes(): string[];
+    private headerEl;
+    private toolsEl;
+    private colorsEl;
+    private actionsSectionEl;
+    private actionsEl;
+    private toolsSignature;
+    private colorsSignature;
+    private actionsSignature;
     get actions(): AnnotationToolbarAction[];
     set actions(value: AnnotationToolbarAction[]);
     get activeToolId(): string;
@@ -30,13 +38,19 @@ export declare class AnnotationToolbar extends BaseElement {
     set label(value: string);
     get tools(): AnnotationToolbarTool[];
     set tools(value: AnnotationToolbarTool[]);
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private parseJsonAttribute;
     private emitAction;
     private emitToolSelected;
     private emitColorSelected;
+    private enabledButtons;
+    private rebuildTools;
+    private rebuildColors;
+    private rebuildActions;
+    private patchToolSelection;
+    private patchColorSelection;
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     protected update(): void;
+    private actionsKey;
+    private patchActionLabels;
 }
-export {};