@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/share/share-panel.js

@@ -0,0 +1,565 @@
+import { BaseElement } from "../../core/index.js";
+import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-share-panel";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const escapeSelectorValue = (value) => value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="panel"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          padding: ${boePanel.padding};
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
+          border-radius: ${boePanel.radius};
+          background: ${boePanel.background};
+        }
+
+        [part="header"] {
+          display: grid;
+          gap: 0.45rem;
+        }
+
+        [part="title"] {
+          font-size: 1.1rem;
+          font-weight: 700;
+          line-height: 1.15;
+        }
+
+        [part="message"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          line-height: 1.55;
+        }
+
+        [part="shared-link"],
+        [part="settings"],
+        [part="collaborators"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="shared-link"] {
+          padding: 0.65rem;
+          border-radius: ${boePanel.radius};
+          background: var(--boe-token-surface-surface, #ffffff);
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+        }
+
+        [part="shared-link-header"] {
+          display: flex;
+          gap: ${boePanel.gap};
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        [part="shared-link-label"],
+        [part="section-title"] {
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="shared-link-access"] {
+          display: inline-flex;
+          padding: 0.35rem 0.6rem;
+          border-radius: 999px;
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          font-size: 0.8rem;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        [part="shared-link-url"] {
+          appearance: none;
+          width: 100%;
+          text-align: left;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 52%, transparent);
+          border-radius: ${boeRadius.control};
+          background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 82%, var(--boe-token-surface-surface, #ffffff) 18%);
+          color: var(--boe-token-text-text, #1f1e1b);
+          font: inherit;
+          padding: 0.55rem 0.7rem;
+          cursor: pointer;
+        }
+
+        [part="shared-link-meta"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.6rem;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.92rem;
+        }
+
+        [part="shared-link-status"] {
+          font-weight: 600;
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 70%, var(--boe-token-text-text, #222222));
+        }
+
+        [part="settings-list"] {
+          display: grid;
+          gap: ${boePanel.gap};
+          margin: 0;
+        }
+
+        [part="setting"] {
+          display: flex;
+          gap: ${boePanel.gap};
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.55rem 0.7rem;
+          border-radius: ${boeRadius.med};
+          background: var(--boe-token-surface-surface, #ffffff);
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 42%, transparent);
+        }
+
+        [part="setting-label"] {
+          margin: 0;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-weight: 600;
+        }
+
+        [part="setting-value"] {
+          margin: 0;
+          font-weight: 600;
+          color: var(--boe-token-text-text, #1f1e1b);
+        }
+
+        [part="setting-value"][data-tone="success"] {
+          color: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 70%, var(--boe-token-text-text, #222222));
+        }
+
+        [part="setting-value"][data-tone="accent"] {
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="collaborator-list"] {
+          display: grid;
+          gap: ${boePanel.gap};
+        }
+
+        [part="collaborator"] {
+          display: grid;
+          grid-template-columns: auto 1fr;
+          gap: ${boePanel.gap};
+          align-items: center;
+          width: 100%;
+          text-align: left;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 52%, transparent);
+          border-radius: ${boePanel.radius};
+          padding: 0.55rem 0.7rem;
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          cursor: pointer;
+        }
+
+        [part="collaborator-avatar"] {
+          inline-size: 2.5rem;
+          block-size: 2.5rem;
+          display: grid;
+          place-items: center;
+          border-radius: 999px;
+          background: rgba(0, 97, 213, 0.12);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+          font-weight: 700;
+        }
+
+        [part="collaborator-meta"] {
+          display: grid;
+          gap: 0.15rem;
+        }
+
+        [part="collaborator-name"] {
+          font-weight: 600;
+        }
+
+        [part="collaborator-role"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+        }
+
+        [part="collaborator-description"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.94rem;
+        }
+
+        [part="actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${boePanel.gap};
+        }
+
+        [part="action"] {
+          appearance: none;
+          border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 70%, transparent);
+          border-radius: 999px;
+          background: var(--boe-token-surface-surface, #ffffff);
+          color: inherit;
+          font: inherit;
+          font-weight: 600;
+          padding: 0.4rem 0.7rem;
+          cursor: pointer;
+        }
+
+        ${boeNeutralInteractiveStyles('[part="shared-link-url"]')}
+        ${boeNeutralInteractiveStyles('[part="collaborator"]')}
+        ${boeNeutralInteractiveStyles('[part="action"]')}
+        ${boeBrandInteractiveStyles('[part="action"][data-tone="primary"]')}
+
+        [part="action"][data-tone="primary"] {
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          border-color: var(--boe-token-text-text, #1f1e1b);
+          color: var(--boe-token-text-text-on-brand, #ffffff);
+        }
+      `;
+export class BoxSharePanelElement extends BaseElement {
+    static get observedAttributes() {
+        return ["actions", "collaborators", "message", "settings", "shared-link", "heading"];
+    }
+    titleEl;
+    messageEl;
+    sharedLinkEl;
+    sharedLinkLabelEl;
+    sharedLinkAccessEl;
+    sharedLinkUrlEl;
+    sharedLinkStatusEl;
+    sharedLinkExpiryEl;
+    settingsSectionEl;
+    settingsListEl;
+    collaboratorsSectionEl;
+    collaboratorListEl;
+    actionsEl;
+    settingsSignature = "";
+    collaboratorsSignature = "";
+    actionsSignature = "";
+    get actions() {
+        return this.parseJsonAttribute("actions", []);
+    }
+    set actions(value) {
+        this.setAttribute("actions", JSON.stringify(value));
+    }
+    get collaborators() {
+        return this.parseJsonAttribute("collaborators", []);
+    }
+    set collaborators(value) {
+        this.setAttribute("collaborators", JSON.stringify(value));
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get settings() {
+        return this.parseJsonAttribute("settings", []);
+    }
+    set settings(value) {
+        this.setAttribute("settings", JSON.stringify(value));
+    }
+    get sharedLink() {
+        return this.parseJsonAttribute("shared-link", null);
+    }
+    set sharedLink(value) {
+        if (!value) {
+            this.removeAttribute("shared-link");
+            return;
+        }
+        this.setAttribute("shared-link", JSON.stringify(value));
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Share";
+    }
+    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) {
+            return fallback;
+        }
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return fallback;
+        }
+    }
+    emitAction(actionId) {
+        this.dispatchEvent(new CustomEvent("action", {
+            bubbles: true,
+            composed: true,
+            detail: { action: actionId },
+        }));
+    }
+    emitCollaboratorSelected(collaborator) {
+        this.dispatchEvent(new CustomEvent("collaborator-selected", {
+            bubbles: true,
+            composed: true,
+            detail: collaborator,
+        }));
+    }
+    settingsKey() {
+        return JSON.stringify(this.settings.map(setting => setting.label));
+    }
+    collaboratorsKey() {
+        return JSON.stringify(this.collaborators.map(collaborator => collaborator.id ?? collaborator.name));
+    }
+    actionsKey() {
+        return JSON.stringify(this.actions.map(action => ({ id: action.id, tone: action.tone ?? "neutral" })));
+    }
+    rebuildSettings() {
+        this.settingsListEl.innerHTML = this.settings
+            .map(setting => `
+          <div part="setting">
+            <dt part="setting-label">${escapeHtml(setting.label)}</dt>
+            <dd part="setting-value" data-tone="${escapeHtml(setting.tone ?? "neutral")}">${escapeHtml(setting.value)}</dd>
+          </div>
+        `)
+            .join("");
+    }
+    patchSettings() {
+        const rows = this.settingsListEl.querySelectorAll('[part="setting"]');
+        this.settings.forEach((setting, index) => {
+            const row = rows[index];
+            if (!row) {
+                return;
+            }
+            const labelEl = row.querySelector('[part="setting-label"]');
+            const valueEl = row.querySelector('[part="setting-value"]');
+            if (labelEl) {
+                labelEl.textContent = setting.label;
+            }
+            if (valueEl) {
+                valueEl.textContent = setting.value;
+                valueEl.dataset.tone = setting.tone ?? "neutral";
+            }
+        });
+    }
+    rebuildCollaborators() {
+        this.collaboratorListEl.innerHTML = this.collaborators
+            .map(collaborator => `
+          <button
+            type="button"
+            part="collaborator"
+            data-collaborator-name="${escapeHtml(collaborator.name)}"
+            data-collaborator-role="${escapeHtml(collaborator.role)}"
+            data-collaborator-description="${escapeHtml(collaborator.description ?? "")}"
+            data-collaborator-id="${escapeHtml(collaborator.id ?? "")}"
+          >
+            <span part="collaborator-avatar">${escapeHtml(collaborator.initials ?? collaborator.name.slice(0, 2).toUpperCase())}</span>
+            <span part="collaborator-meta">
+              <span part="collaborator-name">${escapeHtml(collaborator.name)}</span>
+              <span part="collaborator-role">${escapeHtml(collaborator.role)}</span>
+              <span part="collaborator-description" ${collaborator.description ? "" : "hidden"}>${escapeHtml(collaborator.description ?? "")}</span>
+            </span>
+          </button>
+        `)
+            .join("");
+    }
+    patchCollaborators() {
+        this.collaborators.forEach(collaborator => {
+            const button = this.collaboratorListEl.querySelector(collaborator.id
+                ? `[data-collaborator-id="${escapeSelectorValue(collaborator.id)}"]`
+                : `[data-collaborator-name="${escapeSelectorValue(collaborator.name)}"]`);
+            if (!button) {
+                return;
+            }
+            button.dataset.collaboratorName = collaborator.name;
+            button.dataset.collaboratorRole = collaborator.role;
+            button.dataset.collaboratorDescription = collaborator.description ?? "";
+            button.dataset.collaboratorId = collaborator.id ?? "";
+            const avatar = button.querySelector('[part="collaborator-avatar"]');
+            const nameEl = button.querySelector('[part="collaborator-name"]');
+            const roleEl = button.querySelector('[part="collaborator-role"]');
+            const descriptionEl = button.querySelector('[part="collaborator-description"]');
+            if (avatar) {
+                avatar.textContent = collaborator.initials ?? collaborator.name.slice(0, 2).toUpperCase();
+            }
+            if (nameEl) {
+                nameEl.textContent = collaborator.name;
+            }
+            if (roleEl) {
+                roleEl.textContent = collaborator.role;
+            }
+            if (descriptionEl) {
+                descriptionEl.hidden = !collaborator.description;
+                descriptionEl.textContent = collaborator.description ?? "";
+            }
+        });
+    }
+    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() {
+        this.actions.forEach(action => {
+            const button = this.actionsEl.querySelector(`[data-action-id="${escapeSelectorValue(action.id)}"]`);
+            if (!button) {
+                return;
+            }
+            button.textContent = action.label;
+            button.dataset.tone = action.tone ?? "neutral";
+        });
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <section part="panel">
+        <header part="header">
+          <h2 part="title"></h2>
+          <div part="message" hidden></div>
+        </header>
+        <section part="shared-link" hidden>
+          <div part="shared-link-header">
+            <div part="shared-link-label"></div>
+            <div part="shared-link-access"></div>
+          </div>
+          <button type="button" part="shared-link-url" data-action-id="copy-link"></button>
+          <div part="shared-link-meta">
+            <span part="shared-link-status" hidden></span>
+            <span part="shared-link-expiry" hidden></span>
+          </div>
+        </section>
+        <section part="settings" hidden>
+          <div part="section-title">Settings</div>
+          <dl part="settings-list"></dl>
+        </section>
+        <section part="collaborators" hidden>
+          <div part="section-title">Collaborators</div>
+          <div part="collaborator-list"></div>
+        </section>
+        <div part="actions" hidden></div>
+      </section>
+    `;
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.messageEl = this.shadowRoot.querySelector('[part="message"]');
+        this.sharedLinkEl = this.shadowRoot.querySelector('[part="shared-link"]');
+        this.sharedLinkLabelEl = this.shadowRoot.querySelector('[part="shared-link-label"]');
+        this.sharedLinkAccessEl = this.shadowRoot.querySelector('[part="shared-link-access"]');
+        this.sharedLinkUrlEl = this.shadowRoot.querySelector('[part="shared-link-url"]');
+        this.sharedLinkStatusEl = this.shadowRoot.querySelector('[part="shared-link-status"]');
+        this.sharedLinkExpiryEl = this.shadowRoot.querySelector('[part="shared-link-expiry"]');
+        this.settingsSectionEl = this.shadowRoot.querySelector('[part="settings"]');
+        this.settingsListEl = this.shadowRoot.querySelector('[part="settings-list"]');
+        this.collaboratorsSectionEl = this.shadowRoot.querySelector('[part="collaborators"]');
+        this.collaboratorListEl = this.shadowRoot.querySelector('[part="collaborator-list"]');
+        this.actionsEl = this.shadowRoot.querySelector('[part="actions"]');
+    }
+    setupListeners() {
+        this.sharedLinkUrlEl.addEventListener("click", () => {
+            this.emitAction("copy-link");
+        });
+        this.actionsEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="action"]');
+            if (!button || !this.actionsEl.contains(button)) {
+                return;
+            }
+            const actionId = button.dataset.actionId ?? "";
+            if (actionId) {
+                this.emitAction(actionId);
+            }
+        });
+        this.collaboratorListEl.addEventListener("click", event => {
+            const button = event.target.closest('[part="collaborator"]');
+            if (!button || !this.collaboratorListEl.contains(button)) {
+                return;
+            }
+            this.emitCollaboratorSelected({
+                id: button.dataset.collaboratorId || undefined,
+                name: button.dataset.collaboratorName ?? "",
+                role: button.dataset.collaboratorRole ?? "",
+                description: button.dataset.collaboratorDescription || undefined,
+            });
+        });
+    }
+    update() {
+        if (!this.titleEl || !this.actionsEl) {
+            return;
+        }
+        this.titleEl.textContent = this.heading;
+        this.messageEl.hidden = !this.message;
+        this.messageEl.textContent = this.message;
+        const sharedLink = this.sharedLink;
+        this.sharedLinkEl.hidden = !sharedLink;
+        if (sharedLink) {
+            this.sharedLinkLabelEl.textContent = sharedLink.label ?? "Shared link";
+            this.sharedLinkAccessEl.textContent = sharedLink.access;
+            this.sharedLinkUrlEl.textContent = sharedLink.url;
+            this.sharedLinkStatusEl.hidden = !sharedLink.status;
+            this.sharedLinkStatusEl.textContent = sharedLink.status ?? "";
+            this.sharedLinkExpiryEl.hidden = !sharedLink.expiresAt;
+            this.sharedLinkExpiryEl.textContent = sharedLink.expiresAt ? `Expires ${sharedLink.expiresAt}` : "";
+        }
+        const settings = this.settings;
+        this.settingsSectionEl.hidden = settings.length === 0;
+        const nextSettings = this.settingsKey();
+        if (nextSettings !== this.settingsSignature || this.settingsListEl.childElementCount === 0) {
+            this.settingsSignature = nextSettings;
+            this.rebuildSettings();
+        }
+        else {
+            this.patchSettings();
+        }
+        const collaborators = this.collaborators;
+        this.collaboratorsSectionEl.hidden = collaborators.length === 0;
+        const nextCollaborators = this.collaboratorsKey();
+        if (nextCollaborators !== this.collaboratorsSignature ||
+            this.collaboratorListEl.childElementCount === 0) {
+            this.collaboratorsSignature = nextCollaborators;
+            this.rebuildCollaborators();
+        }
+        else {
+            this.patchCollaborators();
+        }
+        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();
+        }
+    }
+}
+export const defineBoxSharePanelElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxSharePanelElement);
+    return BoxSharePanelElement;
+};

package/dist/patterns/share/unified-share-controller.d.ts

@@ -0,0 +1,52 @@
+import { Controller } from "../../core/index.js";
+import type { CollaboratorSummary, ShareDataSource, SharedLinkState } from "./contracts.js";
+export interface UnifiedShareControllerConfig {
+    itemId: string;
+    itemType?: "file" | "folder";
+    dataSource: ShareDataSource;
+}
+export type UnifiedShareTab = "link" | "people";
+export type UnifiedShareStatus = "idle" | "loading" | "ready" | "error";
+export interface UnifiedShareState {
+    status: UnifiedShareStatus;
+    sharedLink: SharedLinkState | null;
+    collaborators: CollaboratorSummary[];
+    activeTab: UnifiedShareTab;
+    updatingLink: boolean;
+    error: string | null;
+}
+type UnifiedShareEvents = {
+    stateChanged: {
+        state: UnifiedShareState;
+    };
+    loaded: {
+        sharedLink: SharedLinkState | null;
+        collaborators: CollaboratorSummary[];
+    };
+    linkChanged: {
+        sharedLink: SharedLinkState | null;
+    };
+    error: {
+        error: string;
+    };
+};
+/**
+ * The orchestration behind the unified share surface. It loads the item's share
+ * state (shared link + collaborators) from a `ShareDataSource`, drives shared-
+ * link access changes back through the same source, and tracks the active tab.
+ * Purely headless — the modal element renders `getState()` and reacts to
+ * `stateChanged`.
+ */
+export declare class UnifiedShareController extends Controller<UnifiedShareState, UnifiedShareEvents> {
+    private readonly config;
+    private inFlight;
+    constructor(config: UnifiedShareControllerConfig);
+    private update;
+    private toMessage;
+    /** Load the item's shared link and collaborators. No-op while any request is in flight. */
+    load(): Promise<void>;
+    /** Change the shared-link access level through the data source. No-op while any request is in flight. */
+    setAccess(access: NonNullable<SharedLinkState["access"]>): Promise<void>;
+    setActiveTab(tab: UnifiedShareTab): void;
+}
+export {};