@unofficialbox/box-open-elements 0.1.0

package/dist/components/collections/tree-grid.js

@@ -0,0 +1,593 @@
+import { BaseElement } from "../../core/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-tree-grid";
+const escapeHtml = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+const collectBranchValues = (items) => {
+    const values = [];
+    for (const item of items) {
+        if ((item.children?.length ?? 0) > 0) {
+            values.push(item.value, ...collectBranchValues(item.children ?? []));
+        }
+    }
+    return values;
+};
+const treeGridStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="controls"] {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-bottom: 0.625rem;
+  }
+
+  [part="controls"][hidden] {
+    display: none;
+  }
+
+  [part~="control"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: inline-grid;
+    place-items: center;
+    appearance: none;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 88%, var(--boe-token-surface-surface, #ffffff) 12%);
+    border-radius: ${boeRadius.size};
+    padding: 0;
+    line-height: 1;
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    box-shadow: none;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="control"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part~="control"] svg {
+    width: 0.75rem;
+    height: 0.75rem;
+    display: block;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 1.3;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  [part~="control"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 2px;
+  }
+
+  [part="tree-grid"] {
+    display: grid;
+    gap: 0;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border-radius: ${boeRadius.large};
+    overflow: hidden;
+    background: var(--boe-token-surface-surface, #ffffff);
+  }
+
+  [part="header-row"],
+  [part="row"] {
+    display: grid;
+    grid-template-columns: var(--tree-grid-columns, minmax(260px, 1.5fr));
+    align-items: center;
+  }
+
+  [part="header-cell"],
+  [part="cell"],
+  [part="tree-cell"] {
+    padding: 0.5rem 0.65rem;
+    min-width: 0;
+  }
+
+  [part="header-cell"] {
+    font-size: 0.78rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 88%, var(--boe-token-surface-surface, #ffffff) 12%);
+    border-bottom: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, transparent);
+  }
+
+  [part="row"] {
+    border-bottom: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 92%, transparent);
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="row"]:hover {
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-hover, #eef4fb) 68%, var(--boe-token-surface-surface, #ffffff) 32%);
+  }
+
+  [part="row-selected"],
+  [part="row-selected"]:hover {
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    box-shadow: inset 3px 0 0 var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  [part="tree-content"] {
+    display: grid;
+    grid-template-columns: 1.125rem minmax(0, 1fr);
+    gap: 0.55rem;
+    align-items: center;
+    padding-left: calc(var(--tree-grid-depth, 0) * 1.25rem);
+  }
+
+  [part~="toggle"] {
+    width: 1.125rem;
+    height: 1.125rem;
+    display: inline-grid;
+    place-items: center;
+    appearance: none;
+    border: none;
+    border-radius: ${boeRadius.size};
+    padding: 0;
+    line-height: 1;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    cursor: pointer;
+    transition:
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="toggle"]:hover {
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part~="toggle"] svg {
+    width: 0.625rem;
+    height: 0.625rem;
+    display: block;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 1.6;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition: transform ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  /* Collapsed chevron points right; expanded rotates it down (flat Box idiom). */
+  [part~="toggle-expanded"] svg {
+    transform: rotate(90deg);
+  }
+
+  [part="spacer"] {
+    width: 1.125rem;
+    height: 1.125rem;
+    display: inline-block;
+  }
+
+  [part~="item"] {
+    appearance: none;
+    text-align: left;
+    border: 1px solid transparent;
+    border-radius: ${boeRadius.med};
+    padding: 0.35rem 0.5rem;
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part~="item"]:hover {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-hover, #eef4fb) 62%, var(--boe-token-surface-surface, #ffffff) 38%);
+  }
+
+  [part~="item-selected"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-item-surface-selected, #f2f7fd) 72%, var(--boe-token-surface-surface, #ffffff) 28%);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  ${boeFocusVisibleStyles('[part~="item"]')}
+  ${boeFocusVisibleStyles('[part~="toggle"]')}
+
+  [part="empty"] {
+    padding: 0.6rem 0.65rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+`;
+export class BoxTreeGridElement extends BaseElement {
+    static get observedAttributes() {
+        return ["columns", "items", "label", "value"];
+    }
+    expandedInternal = new Set();
+    valueInternal = "";
+    focusValue = null;
+    controlsEl;
+    expandAllEl;
+    collapseAllEl;
+    treeGridEl;
+    headerRowEl;
+    bodyEl;
+    get columns() {
+        const raw = this.getAttribute("columns");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set columns(value) {
+        this.setAttribute("columns", JSON.stringify(value));
+    }
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw) {
+            return [];
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+        this.seedExpandedState(value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Tree Grid";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get value() {
+        return this.valueInternal;
+    }
+    set value(nextValue) {
+        this.valueInternal = nextValue;
+        this.setAttribute("value", nextValue);
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    connectedCallback() {
+        this.seedExpandedState(this.items);
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "items") {
+            this.seedExpandedState(this.items);
+        }
+        if (name === "value") {
+            this.valueInternal = this.getAttribute("value") ?? "";
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    seedExpandedState(items) {
+        this.expandedInternal.clear();
+        for (const item of items) {
+            if ((item.children?.length ?? 0) > 0) {
+                this.expandedInternal.add(item.value);
+            }
+        }
+    }
+    emitExpandChanged(value, expanded) {
+        this.dispatchEvent(new CustomEvent("expand-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { value, expanded },
+        }));
+    }
+    toggleExpanded(value) {
+        const expanded = !this.expandedInternal.has(value);
+        if (expanded) {
+            this.expandedInternal.add(value);
+        }
+        else {
+            this.expandedInternal.delete(value);
+        }
+        this.emitExpandChanged(value, expanded);
+        this.update();
+    }
+    expandAll() {
+        this.expandedInternal = new Set(collectBranchValues(this.items));
+        this.update();
+    }
+    collapseAll() {
+        this.expandedInternal.clear();
+        this.update();
+    }
+    getVisibleRows(items, depth = 0) {
+        const rows = [];
+        for (const item of items) {
+            const hasChildren = (item.children?.length ?? 0) > 0;
+            rows.push({ depth, hasChildren, value: item.value });
+            if (hasChildren && this.expandedInternal.has(item.value)) {
+                rows.push(...this.getVisibleRows(item.children ?? [], depth + 1));
+            }
+        }
+        return rows;
+    }
+    renderToggleIcon() {
+        // A single right-pointing chevron; CSS rotates it 90° when expanded.
+        return `
+      <svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+        <path d="M4.5 2.5 8 6l-3.5 3.5" />
+      </svg>
+    `;
+    }
+    renderControlIcon(type) {
+        // Double chevron: pointing down = expand all, pointing up = collapse all.
+        const paths = type === "expand-all"
+            ? '<path d="M3 4.25 6 7l3-2.75" /><path d="M3 7.25 6 10l3-2.75" />'
+            : '<path d="M3 7.75 6 5l3 2.75" /><path d="M3 4.75 6 2l3 2.75" />';
+        return `
+      <svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+        ${paths}
+      </svg>
+    `;
+    }
+    renderRows(items, depth = 0) {
+        return items
+            .map(item => {
+            const hasChildren = (item.children?.length ?? 0) > 0;
+            const isExpanded = this.expandedInternal.has(item.value);
+            const isSelected = item.value === this.valueInternal;
+            const togglePart = isExpanded ? "toggle toggle-expanded" : "toggle";
+            const rowPart = isSelected ? "row row-selected" : "row";
+            const itemPart = isSelected ? "item item-selected" : "item";
+            const cellMarkup = (item.cells ?? [])
+                .map((cell, index) => `
+              <div part="cell" role="gridcell" data-column-index="${index + 1}">
+                ${escapeHtml(cell)}
+              </div>
+            `)
+                .join("");
+            const childrenMarkup = hasChildren && isExpanded ? this.renderRows(item.children ?? [], depth + 1) : "";
+            return `
+          <div
+            part="${rowPart}"
+            role="row"
+            data-depth="${depth}"
+            data-selected="${String(isSelected)}"
+            aria-level="${depth + 1}"
+            ${hasChildren ? `aria-expanded="${String(isExpanded)}"` : ""}
+            aria-selected="${String(isSelected)}"
+          >
+            <div part="tree-cell" role="gridcell">
+              <div part="tree-content" style="--tree-grid-depth:${depth};">
+                ${hasChildren
+                ? `<button
+                        type="button"
+                        part="${togglePart}"
+                        data-value="${escapeHtml(item.value)}"
+                        aria-expanded="${String(isExpanded)}"
+                      >${this.renderToggleIcon()}</button>`
+                : `<span part="spacer" aria-hidden="true"></span>`}
+                <button
+                  type="button"
+                  part="${itemPart}"
+                  role="rowheader"
+                  data-value="${escapeHtml(item.value)}"
+                  data-branch="${String(hasChildren)}"
+                  tabindex="${item.value === (this.focusValue ?? (this.valueInternal || this.items[0]?.value || "")) ? "0" : "-1"}"
+                >
+                  ${escapeHtml(item.label)}
+                </button>
+              </div>
+            </div>
+            ${cellMarkup}
+          </div>
+          ${childrenMarkup}
+        `;
+        })
+            .join("");
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${treeGridStyles}</style>
+      <div part="controls" hidden>
+        <button
+          type="button"
+          part="control control-expand-all"
+          data-action="expand-all"
+          aria-label="Expand all"
+          title="Expand all"
+        >${this.renderControlIcon("expand-all")}</button>
+        <button
+          type="button"
+          part="control control-collapse-all"
+          data-action="collapse-all"
+          aria-label="Collapse all"
+          title="Collapse all"
+        >${this.renderControlIcon("collapse-all")}</button>
+      </div>
+      <section part="tree-grid" role="treegrid">
+        <div part="header-row" role="row"></div>
+        <div part="body" role="rowgroup"></div>
+      </section>
+    `;
+        this.controlsEl = this.shadowRoot.querySelector('[part="controls"]');
+        this.expandAllEl = this.shadowRoot.querySelector('[data-action="expand-all"]');
+        this.collapseAllEl = this.shadowRoot.querySelector('[data-action="collapse-all"]');
+        this.treeGridEl = this.shadowRoot.querySelector('[part="tree-grid"]');
+        this.headerRowEl = this.shadowRoot.querySelector('[part="header-row"]');
+        this.bodyEl = this.shadowRoot.querySelector('[part="body"]');
+    }
+    setupListeners() {
+        this.controlsEl.addEventListener("click", event => {
+            const control = event.target?.closest('[part~="control"]');
+            if (!control || !this.controlsEl.contains(control)) {
+                return;
+            }
+            const action = control.dataset.action;
+            if (action === "expand-all") {
+                this.expandAll();
+                return;
+            }
+            if (action === "collapse-all") {
+                this.collapseAll();
+            }
+        });
+        this.bodyEl.addEventListener("click", event => {
+            const target = event.target;
+            const toggle = target?.closest('[part~="toggle"]');
+            if (toggle && this.bodyEl.contains(toggle)) {
+                const value = toggle.dataset.value ?? "";
+                if (value) {
+                    this.focusValue = value;
+                    this.toggleExpanded(value);
+                }
+                return;
+            }
+            const item = target?.closest('[part~="item"]');
+            if (!item || !this.bodyEl.contains(item)) {
+                return;
+            }
+            const value = item.dataset.value ?? "";
+            if (!value || value === this.valueInternal) {
+                return;
+            }
+            this.valueInternal = value;
+            this.setAttribute("value", value);
+            this.dispatchEvent(new CustomEvent("value-changed", {
+                bubbles: true,
+                composed: true,
+                detail: { value },
+            }));
+            this.update();
+        });
+        this.bodyEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const element = keyboardEvent.target?.closest('[part~="item"]');
+            if (!element || !this.bodyEl.contains(element)) {
+                return;
+            }
+            const value = element.dataset.value ?? "";
+            const isBranch = element.dataset.branch === "true";
+            const visibleRows = this.getVisibleRows(this.items);
+            const currentIndex = visibleRows.findIndex(row => row.value === value);
+            if (keyboardEvent.key === "ArrowDown" || keyboardEvent.key === "ArrowUp") {
+                keyboardEvent.preventDefault();
+                const nextIndex = keyboardEvent.key === "ArrowDown"
+                    ? Math.min(visibleRows.length - 1, currentIndex + 1)
+                    : Math.max(0, currentIndex - 1);
+                const nextRow = visibleRows[nextIndex];
+                if (nextRow) {
+                    this.focusValue = nextRow.value;
+                    this.update();
+                }
+                return;
+            }
+            if (keyboardEvent.key === "ArrowRight" && isBranch) {
+                keyboardEvent.preventDefault();
+                if (!this.expandedInternal.has(value)) {
+                    this.expandedInternal.add(value);
+                    this.emitExpandChanged(value, true);
+                    this.focusValue = value;
+                    this.update();
+                }
+                return;
+            }
+            if (keyboardEvent.key === "ArrowLeft" && isBranch) {
+                keyboardEvent.preventDefault();
+                if (this.expandedInternal.has(value)) {
+                    this.expandedInternal.delete(value);
+                    this.emitExpandChanged(value, false);
+                    this.focusValue = value;
+                    this.update();
+                }
+                return;
+            }
+            if (keyboardEvent.key === "Enter" || keyboardEvent.key === " ") {
+                keyboardEvent.preventDefault();
+                element.click();
+                return;
+            }
+            if (keyboardEvent.key === "Home" || keyboardEvent.key === "End") {
+                keyboardEvent.preventDefault();
+                const nextRow = keyboardEvent.key === "Home" ? visibleRows[0] : visibleRows[visibleRows.length - 1];
+                if (nextRow) {
+                    this.focusValue = nextRow.value;
+                    this.update();
+                }
+            }
+        });
+    }
+    update() {
+        if (!this.controlsEl || !this.treeGridEl || !this.headerRowEl || !this.bodyEl) {
+            return;
+        }
+        const columns = this.columns;
+        const branchValues = collectBranchValues(this.items);
+        const hasBranches = branchValues.length > 0;
+        const allExpanded = hasBranches && branchValues.every(value => this.expandedInternal.has(value));
+        const columnTemplate = ["minmax(260px, 1.5fr)", ...columns.slice(1).map(() => "minmax(120px, 1fr)")].join(" ");
+        this.controlsEl.hidden = !hasBranches;
+        this.expandAllEl.disabled = allExpanded;
+        this.collapseAllEl.disabled = !this.expandedInternal.size;
+        this.treeGridEl.style.setProperty("--tree-grid-columns", columnTemplate);
+        this.treeGridEl.setAttribute("aria-label", this.label);
+        this.headerRowEl.innerHTML = columns
+            .map((column, index) => `
+          <div part="header-cell" role="columnheader" data-column-index="${index}">
+            ${escapeHtml(column.label)}
+          </div>
+        `)
+            .join("");
+        this.bodyEl.innerHTML = this.items.length
+            ? this.renderRows(this.items)
+            : `<div part="empty">No items loaded</div>`;
+        if (this.focusValue) {
+            const valueToFocus = this.focusValue;
+            this.focusValue = null;
+            queueMicrotask(() => {
+                const target = Array.from(this.bodyEl.querySelectorAll('[part~="item"]')).find(node => node.dataset.value === valueToFocus);
+                target?.focus();
+            });
+        }
+    }
+}
+export const defineBoxTreeGridElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTreeGridElement);
+    return BoxTreeGridElement;
+};

package/dist/components/collections/tree.d.ts

@@ -0,0 +1,37 @@
+import { BaseElement } from "../../core/index.js";
+type BoxTreeItem = {
+    children?: BoxTreeItem[];
+    label: string;
+    value?: string;
+};
+export declare class BoxTreeElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private expandedInternal;
+    private valueInternal;
+    private focusKey;
+    private controlsEl;
+    private expandAllEl;
+    private collapseAllEl;
+    private treeEl;
+    get label(): string;
+    set label(value: string);
+    get items(): BoxTreeItem[];
+    set items(value: BoxTreeItem[]);
+    get value(): string;
+    set value(nextValue: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private seedExpandedState;
+    private toggleExpanded;
+    private expandAll;
+    private collapseAll;
+    private getVisibleNodes;
+    private renderToggleIcon;
+    private renderControlIcon;
+    private renderItems;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxTreeElement: (tagName?: string) => typeof BoxTreeElement;
+export {};