@unofficialbox/box-open-elements 0.1.0

package/dist/patterns/content-explorer/adapters/breadcrumbs.js

@@ -0,0 +1,161 @@
+import { BaseElement } from "../../../core/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-explorer-breadcrumbs";
+const toKebabCase = (value) => value.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const elementStyles = `
+        :host {
+          display: block;
+          color: inherit;
+          font: inherit;
+        }
+
+        [part="breadcrumbs"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 0.15rem;
+          min-width: 0;
+        }
+
+        [part="breadcrumb"] {
+          appearance: none;
+          border: 0;
+          margin: 0;
+          padding: 0.3rem 0.55rem;
+          border-radius: 999px;
+          background: transparent;
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font: inherit;
+          font-size: 0.92rem;
+          font-weight: 500;
+          line-height: 1.2;
+          cursor: pointer;
+          max-width: 16rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          transition:
+            background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+        }
+
+        [part="breadcrumb"]:hover {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff) 92%);
+          color: var(--boe-token-surface-surface-brand, #0061d5);
+        }
+
+        [part="breadcrumb"]:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+        }
+
+        [part="breadcrumb"]:last-of-type {
+          color: var(--boe-token-text-text, #222222);
+          font-weight: 600;
+        }
+
+        [part="separator"] {
+          color: color-mix(in srgb, var(--boe-token-text-text-secondary, #6f6f6f) 55%, transparent);
+          font-size: 0.85rem;
+          user-select: none;
+        }
+
+        [part="empty"] {
+          color: var(--boe-token-text-text-secondary, #6f6f6f);
+          font-size: 0.9rem;
+        }
+      `;
+export class BoxExplorerBreadcrumbsElement extends BaseElement {
+    controllerValue = null;
+    unsubscribeFns = [];
+    get controller() {
+        return this.controllerValue;
+    }
+    set controller(value) {
+        this.controllerValue = value;
+        this.bindController();
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    connectedCallback() {
+        this.bindController();
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.teardownSubscriptions();
+    }
+    bindController() {
+        this.teardownSubscriptions();
+        if (!this.isConnected || !this.controllerValue) {
+            return;
+        }
+        for (const eventName of ["breadcrumbsChanged", "folderLoaded", "folderChanged"]) {
+            this.unsubscribeFns.push(this.controllerValue.subscribe(eventName, payload => {
+                this.dispatchEvent(new CustomEvent(toKebabCase(String(eventName)), {
+                    bubbles: true,
+                    composed: true,
+                    detail: payload,
+                }));
+                if (this.isRendered) {
+                    this.update();
+                }
+            }));
+        }
+    }
+    teardownSubscriptions() {
+        for (const unsubscribe of this.unsubscribeFns) {
+            unsubscribe();
+        }
+        this.unsubscribeFns = [];
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${elementStyles}</style>
+      <div part="content-host"></div>
+    `;
+    }
+    update() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        const breadcrumbs = this.controllerValue?.getState().breadcrumbs ?? [];
+        const markup = breadcrumbs.length
+            ? breadcrumbs
+                .map(crumb => `<button type="button" part="breadcrumb" data-folder-id="${escapeHtml(crumb.id)}">${escapeHtml(crumb.name)}</button>`)
+                .join('<span part="separator">/</span>')
+            : `<span part="empty">No breadcrumbs</span>`;
+        const host = this.shadowRoot.querySelector('[part="content-host"]');
+        if (!host) {
+            return;
+        }
+        host.innerHTML = `
+      <nav part="breadcrumbs">${markup}</nav>`;
+        this.shadowRoot.querySelectorAll('[part="breadcrumb"]').forEach(node => {
+            node.addEventListener("click", event => {
+                const folderId = event.currentTarget.getAttribute("data-folder-id");
+                if (folderId) {
+                    void this.controllerValue?.navigateTo(folderId);
+                }
+            });
+        });
+    }
+}
+export const defineBoxExplorerBreadcrumbsElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxExplorerBreadcrumbsElement);
+    return BoxExplorerBreadcrumbsElement;
+};

package/dist/patterns/content-explorer/adapters/item-summary.d.ts

@@ -0,0 +1,11 @@
+import type { ExplorerItem, ExplorerItemSharedLinkSummary } from "../types.js";
+/** Format byte size for list/table cells (e.g. `2.4 MB`). */
+export declare const formatItemSize: (size: number | null | undefined) => string;
+/** Format an ISO timestamp for list/table cells. */
+export declare const formatItemDate: (value: string | null | undefined) => string;
+export declare const formatItemOwner: (item: ExplorerItem) => string;
+export declare const formatItemShared: (sharedLink: ExplorerItemSharedLinkSummary | null | undefined) => string;
+/** Secondary meta line under the item name (list / composed shell). */
+export declare const formatItemMetaLine: (item: ExplorerItem) => string;
+/** Compact signature fragment so adapters re-render when summary fields change. */
+export declare const itemSummarySignature: (item: ExplorerItem) => Record<string, unknown>;

package/dist/patterns/content-explorer/adapters/item-summary.js

@@ -0,0 +1,72 @@
+const SIZE_UNITS = ["B", "KB", "MB", "GB", "TB"];
+const dateFormatter = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+});
+/** Format byte size for list/table cells (e.g. `2.4 MB`). */
+export const formatItemSize = (size) => {
+    if (size == null || !Number.isFinite(size) || size < 0) {
+        return "";
+    }
+    if (size < 1024) {
+        return `${Math.round(size)} B`;
+    }
+    let value = size;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < SIZE_UNITS.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+    }
+    const digits = value >= 10 || unitIndex === 0 ? 0 : 1;
+    return `${value.toFixed(digits)} ${SIZE_UNITS[unitIndex]}`;
+};
+/** Format an ISO timestamp for list/table cells. */
+export const formatItemDate = (value) => {
+    if (!value) {
+        return "";
+    }
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return "";
+    }
+    return dateFormatter.format(date);
+};
+export const formatItemOwner = (item) => item.owner?.name?.trim() ?? "";
+export const formatItemShared = (sharedLink) => {
+    if (!sharedLink?.isShared) {
+        return "";
+    }
+    switch (sharedLink.access) {
+        case "open":
+            return "Shared · Open";
+        case "company":
+            return "Shared · Company";
+        case "collaborators":
+            return "Shared · Collaborators";
+        case undefined:
+            return "Shared";
+        default: {
+            const _exhaustive = sharedLink.access;
+            return _exhaustive;
+        }
+    }
+};
+/** Secondary meta line under the item name (list / composed shell). */
+export const formatItemMetaLine = (item) => {
+    const parts = [
+        item.type === "file" ? formatItemSize(item.size) : "",
+        formatItemDate(item.modifiedAt),
+        formatItemOwner(item),
+        formatItemShared(item.sharedLink),
+    ].filter(Boolean);
+    return parts.join(" · ");
+};
+/** Compact signature fragment so adapters re-render when summary fields change. */
+export const itemSummarySignature = (item) => ({
+    size: item.size ?? null,
+    modifiedAt: item.modifiedAt ?? null,
+    owner: item.owner?.name ?? null,
+    shared: item.sharedLink?.isShared ? (item.sharedLink.access ?? true) : false,
+    parent: item.parent?.id ?? null,
+});

package/dist/patterns/content-explorer/adapters/items.d.ts

@@ -0,0 +1,4 @@
+import { BoxExplorerListElement } from "./list.js";
+export declare class BoxExplorerItemsElement extends BoxExplorerListElement {
+}
+export declare const defineBoxExplorerItemsElement: (tagName?: string) => typeof BoxExplorerItemsElement;

package/dist/patterns/content-explorer/adapters/items.js

@@ -0,0 +1,12 @@
+import { BoxExplorerListElement } from "./list.js";
+const DEFAULT_TAG_NAME = "box-explorer-items";
+export class BoxExplorerItemsElement extends BoxExplorerListElement {
+}
+export const defineBoxExplorerItemsElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxExplorerItemsElement);
+    return BoxExplorerItemsElement;
+};

package/dist/patterns/content-explorer/adapters/list.d.ts

@@ -0,0 +1,28 @@
+import { ContentExplorerController } from "../controller.js";
+import { resolveExplorerItemGesture } from "../types.js";
+import { BaseElement } from "../../../core/index.js";
+export declare class BoxExplorerListElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private controllerValue;
+    private focusItemId;
+    private unsubscribeFns;
+    get itemGesture(): ReturnType<typeof resolveExplorerItemGesture>;
+    set itemGesture(value: ReturnType<typeof resolveExplorerItemGesture>);
+    get controller(): ContentExplorerController | null;
+    set controller(value: ContentExplorerController | null);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private bindController;
+    private teardownSubscriptions;
+    private getFocusableItemIds;
+    private isFocusInsideHost;
+    private resolveFocusItemId;
+    private restoreFocus;
+    private findItemButton;
+    private itemsSignature;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private patchFocusAndSelection;
+    protected update(): void;
+}
+export declare const defineBoxExplorerListElement: (tagName?: string) => typeof BoxExplorerListElement;