@unofficialbox/box-open-elements 0.4.0 → 0.6.0

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

@@ -9,7 +9,14 @@ const escapeHtml = (value) => value
     .replaceAll(">", ">")
     .replaceAll('"', """)
     .replaceAll("'", "'");
+const isSafeColorValue = (value) => /^#[0-9a-fA-F]{3,8}$/.test(value) || /^[a-zA-Z]+$/.test(value);
 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;
@@ -149,10 +156,19 @@ const elementStyles = `
           );
         }
       `;
-export class BoxAnnotationToolbarElement extends BaseElement {
+export class AnnotationToolbar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["actions", "active-tool-id", "color-options", "current-color", "label", "tools"];
     }
+    headerEl;
+    toolsEl;
+    colorsEl;
+    actionsSectionEl;
+    actionsEl;
+    toolsSignature = null;
+    colorsSignature = null;
+    actionsSignature = "";
     get actions() {
         return this.parseJsonAttribute("actions", []);
     }
@@ -201,12 +217,6 @@ export class BoxAnnotationToolbarElement extends BaseElement {
     set tools(value) {
         this.setAttribute("tools", JSON.stringify(value));
     }
-    connectedCallback() {
-        super.connectedCallback();
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        super.attributeChangedCallback(name, oldValue, newValue);
-    }
     parseJsonAttribute(name, fallback) {
         const raw = this.getAttribute(name);
         if (!raw) {
@@ -242,52 +252,43 @@ export class BoxAnnotationToolbarElement extends BaseElement {
             detail: color,
         }));
     }
-    renderTemplate() {
-        if (!this.shadowRoot) {
-            return;
-        }
-        this.shadowRoot.innerHTML = `
-      <style>${elementStyles}</style>
-      <div part="content-host"></div>
-    `;
+    enabledButtons(container) {
+        return Array.from(container.querySelectorAll("button")).filter(button => !button.disabled);
     }
-    update() {
-        if (!this.shadowRoot) {
-            return;
-        }
-        const toolMarkup = this.tools.length
+    rebuildTools() {
+        this.toolsEl.innerHTML = this.tools.length
             ? this.tools
-                .map(tool => {
-                const isActive = tool.id === this.activeToolId;
-                return `
+                .map(tool => `
               <button
                 type="button"
                 part="tool"
                 data-tool-id="${escapeHtml(tool.id)}"
                 ${tool.disabled ? "disabled" : ""}
-                aria-pressed="${isActive ? "true" : "false"}"
+                aria-pressed="false"
               >
                 <span part="tool-icon">${escapeHtml(tool.icon ?? "")}</span>
                 <span part="tool-label">${escapeHtml(tool.label)}</span>
               </button>
-            `;
-            })
+            `)
                 .join("")
             : `<div part="empty">No annotation tools configured.</div>`;
-        const colorMarkup = this.colorOptions.length
+    }
+    rebuildColors() {
+        this.colorsEl.innerHTML = this.colorOptions.length
             ? this.colorOptions
                 .map(color => {
-                const selected = color.value === this.currentColor;
+                const styleAttr = isSafeColorValue(color.value)
+                    ? ` style="--annotation-color:${escapeHtml(color.value)};"`
+                    : "";
                 return `
               <button
                 type="button"
                 part="color"
                 data-color-id="${escapeHtml(color.id)}"
                 data-color-value="${escapeHtml(color.value)}"
-                aria-pressed="${selected ? "true" : "false"}"
+                aria-pressed="false"
                 aria-label="${escapeHtml(color.label)}"
-                title="${escapeHtml(color.label)}"
-                style="--annotation-color:${escapeHtml(color.value)};"
+                title="${escapeHtml(color.label)}"${styleAttr}
               >
                 <span part="color-swatch"></span>
               </button>
@@ -295,99 +296,158 @@ export class BoxAnnotationToolbarElement extends BaseElement {
             })
                 .join("")
             : `<div part="empty">No colors configured.</div>`;
-        const actionMarkup = this.actions.length
-            ? 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("")
-            : "";
-        const host = this.shadowRoot.querySelector('[part="content-host"]');
-        if (!host) {
+    }
+    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("");
+    }
+    patchToolSelection() {
+        this.toolsEl.querySelectorAll('[part="tool"]').forEach(button => {
+            const isActive = button.getAttribute("data-tool-id") === this.activeToolId;
+            button.setAttribute("aria-pressed", isActive ? "true" : "false");
+        });
+        const buttons = this.enabledButtons(this.toolsEl);
+        const activeIndex = buttons.findIndex(button => button.getAttribute("aria-pressed") === "true");
+        applyRovingTabindex(buttons, activeIndex >= 0 ? activeIndex : 0);
+    }
+    patchColorSelection() {
+        this.colorsEl.querySelectorAll('[part="color"]').forEach(button => {
+            const selected = button.getAttribute("data-color-value") === this.currentColor;
+            button.setAttribute("aria-pressed", selected ? "true" : "false");
+        });
+        const buttons = this.enabledButtons(this.colorsEl);
+        const activeIndex = buttons.findIndex(button => button.getAttribute("aria-pressed") === "true");
+        applyRovingTabindex(buttons, activeIndex >= 0 ? activeIndex : 0);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
             return;
         }
-        host.innerHTML = `
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
       <article part="toolbar">
-        <div part="header">${escapeHtml(this.label)}</div>
+        <div part="header"></div>
         <div part="body">
           <section part="section">
             <div part="section-title">Tools</div>
-            <div part="tools" role="toolbar" aria-label="${escapeHtml(this.label)} tools">
-              ${toolMarkup}
-            </div>
+            <div part="tools" role="toolbar"></div>
           </section>
           <section part="section">
             <div part="section-title">Colors</div>
-            <div part="colors" role="toolbar" aria-label="${escapeHtml(this.label)} colors">
-              ${colorMarkup}
-            </div>
+            <div part="colors" role="toolbar"></div>
+          </section>
+          <section part="section" hidden>
+            <div part="section-title">Actions</div>
+            <div part="actions"></div>
           </section>
-          ${actionMarkup
-            ? `
-              <section part="section">
-                <div part="section-title">Actions</div>
-                <div part="actions">
-                  ${actionMarkup}
-                </div>
-              </section>
-            `
-            : ""}
         </div>
       </article>
     `;
-        this.shadowRoot.querySelectorAll('[part="tool"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const toolId = button.getAttribute("data-tool-id");
-                const tool = this.tools.find(item => item.id === toolId);
-                if (tool && !tool.disabled) {
-                    this.emitToolSelected(tool);
-                }
-            });
+        this.headerEl = this.shadowRoot.querySelector('[part="header"]');
+        this.toolsEl = this.shadowRoot.querySelector('[part="tools"]');
+        this.colorsEl = this.shadowRoot.querySelector('[part="colors"]');
+        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
+        this.actionsSectionEl = this.actionsEl.closest("section");
+    }
+    setupListeners() {
+        this.toolsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="tool"]');
+            if (!button || !this.toolsEl.contains(button)) {
+                return;
+            }
+            const toolId = button.getAttribute("data-tool-id");
+            const tool = this.tools.find(item => item.id === toolId);
+            if (tool && !tool.disabled) {
+                this.emitToolSelected(tool);
+            }
+        });
+        this.colorsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="color"]');
+            if (!button || !this.colorsEl.contains(button)) {
+                return;
+            }
+            const colorId = button.getAttribute("data-color-id");
+            const color = this.colorOptions.find(item => item.id === colorId);
+            if (color) {
+                this.emitColorSelected(color);
+            }
         });
-        this.shadowRoot.querySelectorAll('[part="color"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const colorId = button.getAttribute("data-color-id");
-                const color = this.colorOptions.find(item => item.id === colorId);
-                if (color) {
-                    this.emitColorSelected(color);
-                }
+        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.toolsEl.addEventListener("keydown", event => {
+            handleRovingKeydown(event, this.enabledButtons(this.toolsEl), {
+                orientation: "horizontal",
             });
         });
-        this.shadowRoot.querySelectorAll('[part="action"]').forEach(button => {
-            button.addEventListener("click", () => {
-                const actionId = button.getAttribute("data-action-id");
-                if (actionId) {
-                    this.emitAction(actionId);
-                }
+        this.colorsEl.addEventListener("keydown", event => {
+            handleRovingKeydown(event, this.enabledButtons(this.colorsEl), {
+                orientation: "horizontal",
             });
         });
-        const bindToolbar = (selector) => {
-            const toolbar = this.shadowRoot?.querySelector(selector);
-            if (!toolbar) {
+    }
+    update() {
+        if (!this.toolsEl) {
+            return;
+        }
+        this.headerEl.textContent = this.label;
+        this.toolsEl.setAttribute("aria-label", `${this.label} tools`);
+        this.colorsEl.setAttribute("aria-label", `${this.label} colors`);
+        const nextTools = this.getAttribute("tools");
+        if (nextTools !== this.toolsSignature || this.toolsEl.childElementCount === 0) {
+            this.toolsSignature = nextTools;
+            this.rebuildTools();
+        }
+        this.patchToolSelection();
+        const nextColors = this.getAttribute("color-options");
+        if (nextColors !== this.colorsSignature || this.colorsEl.childElementCount === 0) {
+            this.colorsSignature = nextColors;
+            this.rebuildColors();
+        }
+        this.patchColorSelection();
+        const actions = this.actions;
+        this.actionsSectionEl.hidden = actions.length === 0;
+        const nextActions = this.actionsKey();
+        if (nextActions !== this.actionsSignature || this.actionsEl.childElementCount === 0) {
+            this.actionsSignature = nextActions;
+            this.rebuildActions();
+        }
+        else {
+            this.patchActionLabels();
+        }
+    }
+    actionsKey() {
+        return JSON.stringify(this.actions.map(action => action.id));
+    }
+    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;
             }
-            const buttons = Array.from(toolbar.querySelectorAll("button")).filter(button => !button.disabled);
-            applyRovingTabindex(buttons, 0);
-            toolbar.addEventListener("keydown", event => {
-                handleRovingKeydown(event, buttons, { orientation: "horizontal" });
-            });
-        };
-        bindToolbar('[part="tools"]');
-        bindToolbar('[part="colors"]');
+            button.textContent = action.label;
+            button.dataset.tone = action.tone ?? "neutral";
+        });
     }
 }
-export const defineBoxAnnotationToolbarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAnnotationToolbarElement);
-    return BoxAnnotationToolbarElement;
-};
+AnnotationToolbar.register();

package/dist/patterns/preview/content-preview-adapter.d.ts

@@ -1,13 +1,22 @@
-import { type PreviewAdapterState, type PreviewProvider, type PreviewProviderActionDetail, type StaticPreviewProviderAdapter } from "./provider-adapter.js";
+import { type PreviewAdapterState, type PreviewCommand, type PreviewProvider, type PreviewProviderActionDetail, type StaticPreviewProviderAdapter } from "./provider-adapter.js";
 export type ContentPreviewAdapterConfig = {
     onAction?: (detail: PreviewProviderActionDetail) => void | Promise<void>;
+    onCommand?: (command: PreviewCommand) => void | Promise<void>;
     onMount?: (container: HTMLElement) => void;
     onUnmount?: () => void;
+    /**
+     * Boot the real preview engine into the container (e.g. `new Preview()` +
+     * `preview.show(fileId, token, { container })` for the Box Preview SDK).
+     * Return a teardown function; the adapter invokes it on unmount and before
+     * re-mounting into a different container.
+     */
+    createViewer?: (container: HTMLElement) => (() => void) | void;
     provider?: Partial<PreviewProvider>;
     state?: PreviewAdapterState | null;
 };
 export type ContentPreviewAdapter = StaticPreviewProviderAdapter & {
     mount: (container: HTMLElement) => void;
     unmount: () => void;
+    getMountedContainer: () => HTMLElement | null;
 };
 export declare const createContentPreviewAdapter: (config?: ContentPreviewAdapterConfig) => ContentPreviewAdapter;

package/dist/patterns/preview/content-preview-adapter.js

@@ -2,6 +2,7 @@ import { createStaticPreviewProviderAdapter, } from "./provider-adapter.js";
 export const createContentPreviewAdapter = (config = {}) => {
     const adapter = createStaticPreviewProviderAdapter({
         onAction: config.onAction,
+        onCommand: config.onCommand,
         provider: {
             id: "box-content-preview",
             label: "Box Content Preview",
@@ -12,19 +13,43 @@ export const createContentPreviewAdapter = (config = {}) => {
         state: config.state ?? null,
     });
     let mountedContainer = null;
+    let teardownViewer = null;
+    const teardown = () => {
+        teardownViewer?.();
+        teardownViewer = null;
+        mountedContainer = null;
+    };
     return {
         ...adapter,
         mount(container) {
+            if (mountedContainer === container) {
+                return;
+            }
+            // Re-mounting elsewhere tears the previous viewer down first.
+            if (mountedContainer) {
+                teardown();
+            }
             mountedContainer = container;
             config.onMount?.(container);
+            teardownViewer = config.createViewer?.(container) ?? null;
             adapter.setState({
                 ...(adapter.getState() ?? {}),
                 ready: true,
+                status: "ready",
             });
         },
         unmount() {
-            mountedContainer = null;
+            if (!mountedContainer) {
+                return;
+            }
+            teardown();
             config.onUnmount?.();
+            adapter.setState({
+                ...(adapter.getState() ?? {}),
+                ready: false,
+                status: "idle",
+            });
         },
+        getMountedContainer: () => mountedContainer,
     };
 };

package/dist/patterns/preview/preview-element.d.ts

@@ -1,13 +1,20 @@
-import type { PreviewAdapterState, PreviewProvider, PreviewProviderAdapter } from "./provider-adapter.js";
+import { type PreviewAdapterState, type PreviewCommand, type PreviewProvider, type PreviewProviderAdapter } from "./provider-adapter.js";
 import { BaseElement } from "../../core/index.js";
 export type PreviewElementAction = {
     id: string;
     label: string;
     tone?: string;
 };
-export declare class BoxPreviewElement extends BaseElement {
+/** Detail for the `command` event mirrored alongside adapter.sendCommand. */
+export type PreviewElementCommandDetail = {
+    command: PreviewCommand;
+    providerId: string | null;
+};
+export declare class Preview extends BaseElement {
+    static readonly tagName: string;
     private providerAdapterValue;
     private providerAdapterUnsubscribe;
+    private adapterMounted;
     static get observedAttributes(): string[];
     get actions(): PreviewElementAction[];
     set actions(value: PreviewElementAction[]);
@@ -29,13 +36,19 @@ export declare class BoxPreviewElement extends BaseElement {
     set providerAdapter(value: PreviewProviderAdapter | null);
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private parseJsonAttribute;
+    private attachProviderAdapter;
     private teardownProviderAdapter;
     private getActiveProvider;
     private getActiveAdapterState;
     private emitAction;
+    private emitCommand;
     protected renderTemplate(): void;
+    protected setupListeners(): void;
     protected update(): void;
+    /**
+     * Paging/zoom controls render only when the adapter accepts commands and the
+     * state carries the numeric fields to drive them.
+     */
+    private renderControls;
 }
-export declare const defineBoxPreviewElement: (tagName?: string) => typeof BoxPreviewElement;