@spfx-fast/sharepoint-ui 0.0.0-stage → 0.4.1

package/dist/elements/tree.js

@@ -0,0 +1,273 @@
+import { base } from "./shared.js";
+import { flattenAllTree, flattenTree } from "./tree-model.js";
+/** Accessible framework-neutral tree with nested data and roving focus. */
+export function defineTree() {
+    if (customElements.get("spui-tree"))
+        return;
+    class SpuiTree extends HTMLElement {
+        static observedAttributes = ["aria-label", "label", "selection-mode", "toggle-label", "empty-label", "appearance", "size", "navigation-mode"];
+        data = [];
+        renderer;
+        selected = new Set();
+        checked = new Map();
+        expanded = new Set();
+        activeKey = "";
+        root;
+        typeAhead = { text: "", time: 0 };
+        get items() { return this.data; }
+        set items(value) { this.data = Array.isArray(value) ? value : []; this.paint(); }
+        get renderItem() { return this.renderer; }
+        set renderItem(value) { this.renderer = value; this.paint(); }
+        get selectedKeys() { return [...this.selected]; }
+        set selectedKeys(value) { this.selected = new Set((value ?? []).map(String)); this.checked = new Map([...this.selected].map(key => [key, true])); this.paint(); }
+        get checkedItems() { return this.selectedKeys; }
+        set checkedItems(value) {
+            this.checked = new Map(Array.from(value ?? [], item => Array.isArray(item) ? [String(item[0]), item[1]] : [String(item), true]));
+            this.selected = new Set([...this.checked].filter(([, checked]) => checked === true || checked === "mixed").map(([key]) => key));
+            this.paint();
+        }
+        get expandedKeys() { return [...this.expanded]; }
+        set expandedKeys(value) { this.expanded = new Set((value ?? []).map(String)); this.paint(); }
+        get openItems() { return this.expandedKeys; }
+        set openItems(value) { this.expandedKeys = value; }
+        get defaultOpenItems() { return this.expandedKeys; }
+        set defaultOpenItems(value) { if (!this.isConnected)
+            this.expandedKeys = value; }
+        connectedCallback() { if (!this.shadowRoot)
+            this.render(); this.paint(); }
+        attributeChangedCallback() { this.paint(); }
+        render() {
+            const shadow = this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0}.tree{box-sizing:border-box;min-width:0;outline:none;color:var(--spui-ui-text,var(--spui-semantic-body-text,#323130));font-family:var(--spui-font-family,inherit)}.tree:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px;border-radius:var(--spui-control-radius,4px)}.item{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;min-height:36px;padding-block:4px;padding-inline-end:8px;padding-inline-start:calc(8px + var(--spui-tree-level,0) * 20px);border-radius:var(--spui-control-radius,4px);cursor:default;user-select:none}.item:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.item[aria-selected=true],.item[aria-checked=true]{background:color-mix(in srgb,var(--spui-ui-accent,#0078d4) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)));color:var(--spui-ui-text,var(--spui-semantic-body-text,#323130))}.item:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}.item[aria-disabled=true]{opacity:.55;cursor:not-allowed}.disclosure{flex:none;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:var(--spui-control-radius,4px);background:transparent;color:inherit;cursor:pointer}.disclosure:hover{background:var(--spui-ui-surface-hover,var(--spui-ui-canvas,#f5f5f5))}.disclosure:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}.chevron{width:0;height:0;border-block:4px solid transparent;border-inline-start:5px solid currentColor;transition:transform var(--spui-motion-duration-fast,120ms) var(--spui-motion-easing-standard,cubic-bezier(.2,0,0,1))}.disclosure[aria-expanded=true] .chevron{transform:rotate(90deg)}.check{flex:none;width:14px;height:14px;border:1px solid currentColor;border-radius:3px}.item[aria-checked=true] .check{background:var(--spui-ui-accent,#0078d4);box-shadow:inset 0 0 0 3px var(--spui-ui-surface,#fff)}.item[aria-checked=mixed] .check{background:linear-gradient(var(--spui-ui-accent,#0078d4),var(--spui-ui-accent,#0078d4)) center/8px 2px no-repeat}.item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty{padding:12px;color:var(--spui-ui-muted,var(--spui-semantic-body-subtext,#616161))}@media(prefers-reduced-motion:reduce){.chevron{transition:none}}@media(forced-colors:active){.item[aria-selected=true],.item[aria-checked=true],.item[aria-checked=mixed]{outline:1px solid Highlight}.item:focus-visible,.disclosure:focus-visible{outline-color:Highlight}}`;
+            style.textContent += `:host([size=small]) .item{min-height:28px}:host([appearance=transparent]) .item:hover,:host([appearance=transparent]) .item[aria-selected=true],:host([appearance=transparent]) .item[aria-checked=true]{background:transparent}:host([appearance=subtle-alpha]) .item:hover{background:color-mix(in srgb,var(--spui-ui-text,#323130) 5%,transparent)}`;
+            this.root = document.createElement("div");
+            this.root.className = "tree";
+            this.root.setAttribute("role", "tree");
+            this.root.addEventListener("click", event => this.onClick(event));
+            this.root.addEventListener("keydown", event => this.onKeyDown(event));
+            shadow.append(style, this.root);
+        }
+        visible() { return flattenTree(this.data, this.expanded); }
+        allNodes() { return flattenAllTree(this.data); }
+        isRtl() { return getComputedStyle(this).direction === "rtl"; }
+        mode() { const mode = this.getAttribute("selection-mode"); return mode === "none" || mode === "single" ? mode : mode === "multiple" || mode === "multiselect" ? "multiple" : "none"; }
+        paint(focusKey) {
+            if (!this.isConnected || !this.root)
+                return;
+            const treeRoot = this.root.getRootNode();
+            const active = focusKey ?? (treeRoot instanceof ShadowRoot ? treeRoot.activeElement?.closest("[data-tree-key]")?.dataset.treeKey : undefined);
+            const rows = this.visible();
+            if (!rows.some(row => row.key === this.activeKey))
+                this.activeKey = rows[0]?.key ?? "";
+            this.root.replaceChildren();
+            this.root.setAttribute("aria-label", this.getAttribute("label") || this.getAttribute("aria-label") || "Tree");
+            if (this.mode() === "multiple")
+                this.root.setAttribute("aria-multiselectable", "true");
+            else
+                this.root.removeAttribute("aria-multiselectable");
+            if (!rows.length) {
+                const empty = document.createElement("div");
+                empty.className = "empty";
+                empty.textContent = this.getAttribute("empty-label") || "No items";
+                this.root.append(empty);
+                return;
+            }
+            const fragment = document.createDocumentFragment();
+            rows.forEach(entry => {
+                const row = document.createElement("div");
+                row.className = "item";
+                row.dataset.treeKey = entry.key;
+                row.style.setProperty("--spui-tree-level", String(entry.level - 1));
+                row.setAttribute("role", "treeitem");
+                row.setAttribute("aria-level", String(entry.level));
+                row.setAttribute("aria-posinset", String(entry.position));
+                row.setAttribute("aria-setsize", String(entry.setSize));
+                row.tabIndex = entry.key === this.activeKey ? 0 : -1;
+                if (entry.node.children?.length)
+                    row.setAttribute("aria-expanded", String(this.expanded.has(entry.key)));
+                if (this.mode() === "multiple")
+                    row.setAttribute("aria-checked", String(this.checked.get(entry.key) ?? this.selected.has(entry.key)));
+                else if (this.mode() !== "none")
+                    row.setAttribute("aria-selected", String(this.selected.has(entry.key)));
+                if (entry.node.disabled)
+                    row.setAttribute("aria-disabled", "true");
+                if (entry.node.children?.length) {
+                    const disclosure = document.createElement("button");
+                    disclosure.type = "button";
+                    disclosure.className = "disclosure";
+                    disclosure.dataset.toggleTreeKey = entry.key;
+                    disclosure.tabIndex = -1;
+                    disclosure.disabled = Boolean(entry.node.disabled);
+                    disclosure.setAttribute("aria-label", `${this.getAttribute("toggle-label") || "Expand or collapse"} ${entry.node.label}`);
+                    disclosure.setAttribute("aria-expanded", String(this.expanded.has(entry.key)));
+                    const chevron = document.createElement("span");
+                    chevron.className = "chevron";
+                    chevron.setAttribute("aria-hidden", "true");
+                    disclosure.append(chevron);
+                    row.append(disclosure);
+                }
+                else {
+                    const spacer = document.createElement("span");
+                    spacer.className = "disclosure";
+                    spacer.setAttribute("aria-hidden", "true");
+                    row.append(spacer);
+                }
+                if (this.mode() === "multiple") {
+                    const check = document.createElement("span");
+                    check.className = "check";
+                    check.setAttribute("aria-hidden", "true");
+                    row.append(check);
+                }
+                const content = this.renderer?.(entry.node, entry.level) ?? entry.node.label;
+                const label = document.createElement("span");
+                label.className = "item-label";
+                if (content instanceof Node)
+                    label.append(content);
+                else
+                    label.textContent = String(content);
+                row.append(label);
+                fragment.append(row);
+            });
+            this.root.append(fragment);
+            if (active)
+                this.root.querySelector(`[data-tree-key="${CSS.escape(active)}"]`)?.focus();
+        }
+        onClick(event) {
+            const target = event.target;
+            const toggle = target.closest("[data-toggle-tree-key]");
+            if (toggle) {
+                this.toggleExpanded(toggle.dataset.toggleTreeKey);
+                return;
+            }
+            const row = target.closest("[data-tree-key]");
+            if (!row || target.closest("a,button,input,select,textarea"))
+                return;
+            const key = row.dataset.treeKey;
+            this.activeKey = key;
+            const node = this.visible().find(entry => entry.key === key)?.node;
+            if (node && !node.disabled && this.mode() !== "none")
+                this.toggleSelection(key);
+            else
+                this.paint(key);
+        }
+        onKeyDown(event) {
+            const row = event.target.closest("[data-tree-key]");
+            if (!row)
+                return;
+            const key = row.dataset.treeKey;
+            const rows = this.visible();
+            const index = rows.findIndex(entry => entry.key === key);
+            const entry = rows[index];
+            if (!entry)
+                return;
+            const treegrid = this.getAttribute("navigation-mode") === "treegrid";
+            if (treegrid && event.target !== row) {
+                if (event.key === (this.isRtl() ? "ArrowRight" : "ArrowLeft")) {
+                    event.preventDefault();
+                    row.focus();
+                }
+                return;
+            }
+            if (treegrid && event.key === (this.isRtl() ? "ArrowLeft" : "ArrowRight")) {
+                const action = row.querySelector("button:not(.disclosure):not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])");
+                if (action) {
+                    event.preventDefault();
+                    action.focus();
+                    return;
+                }
+            }
+            let focusKey;
+            if (event.key === "ArrowDown")
+                focusKey = rows[index + 1]?.key;
+            else if (event.key === "ArrowUp")
+                focusKey = rows[index - 1]?.key;
+            else if (event.key === "Home")
+                focusKey = rows[0]?.key;
+            else if (event.key === "End")
+                focusKey = rows.at(-1)?.key;
+            else if ((event.key === (this.isRtl() ? "ArrowLeft" : "ArrowRight")) && entry.node.children?.length) {
+                event.preventDefault();
+                if (!this.expanded.has(key))
+                    this.toggleExpanded(key);
+                else if (rows[index + 1]?.parentKey === key) {
+                    this.activeKey = rows[index + 1].key;
+                    this.paint(this.activeKey);
+                }
+                return;
+            }
+            else if (event.key === (this.isRtl() ? "ArrowRight" : "ArrowLeft")) {
+                event.preventDefault();
+                if (this.expanded.has(key))
+                    this.toggleExpanded(key);
+                else if (entry.parentKey) {
+                    this.activeKey = entry.parentKey;
+                    this.paint(this.activeKey);
+                }
+                return;
+            }
+            else if (event.key === "Enter") {
+                event.preventDefault();
+                if (entry.node.children?.length)
+                    this.toggleExpanded(key);
+                else if (!entry.node.disabled)
+                    this.toggleSelection(key);
+                return;
+            }
+            else if (event.key === " ") {
+                event.preventDefault();
+                if (!entry.node.disabled)
+                    this.toggleSelection(key);
+                return;
+            }
+            else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                const now = Date.now(), repeated = now - this.typeAhead.time <= 700 && this.typeAhead.text === event.key;
+                const text = now - this.typeAhead.time > 700 ? event.key : repeated ? event.key : this.typeAhead.text + event.key;
+                this.typeAhead = { text, time: now };
+                const prefix = text.toLocaleLowerCase(this.lang || undefined);
+                const found = [...rows.slice(index + 1), ...rows.slice(0, index + 1)].find(candidate => candidate.node.label.toLocaleLowerCase(this.lang || undefined).startsWith(prefix));
+                if (found) {
+                    event.preventDefault();
+                    focusKey = found.key;
+                }
+                else
+                    return;
+            }
+            else
+                return;
+            event.preventDefault();
+            if (focusKey) {
+                this.activeKey = focusKey;
+                this.paint(focusKey);
+            }
+            else
+                this.paint(key);
+        }
+        toggleExpanded(key) {
+            if (this.allNodes().find(entry => entry.key === key)?.node.disabled)
+                return;
+            if (this.expanded.has(key))
+                this.expanded.delete(key);
+            else
+                this.expanded.add(key);
+            this.activeKey = key;
+            this.paint(key);
+            this.dispatchEvent(new CustomEvent("spui-tree-expanded-change", { detail: { expandedKeys: [...this.expanded] }, bubbles: true, composed: true }));
+        }
+        toggleSelection(key) {
+            if (this.mode() === "none")
+                return;
+            const current = this.checked.get(key) ?? this.selected.has(key);
+            const checked = current === "mixed" ? true : !current;
+            if (this.mode() === "single")
+                this.checked = new Map();
+            this.checked.set(key, checked);
+            this.selected = new Set([...this.checked].filter(([, value]) => value === true || value === "mixed").map(([selectedKey]) => selectedKey));
+            this.activeKey = key;
+            this.paint(key);
+            const selectedItems = this.allNodes().filter(entry => this.selected.has(entry.key)).map(entry => entry.node);
+            this.dispatchEvent(new CustomEvent("spui-tree-selection-change", { detail: { selectedKeys: [...this.selected], selectedItems, checkedItems: new Map(this.checked), checked, selectionMode: this.mode() === "multiple" ? "multiselect" : "single" }, bubbles: true, composed: true }));
+        }
+    }
+    customElements.define("spui-tree", SpuiTree);
+}

package/dist/elements/view-card.d.ts

@@ -0,0 +1,2 @@
+/** A SharePoint-ready record card with stable semantic parts and freely composed slots. */
+export declare function defineViewCard(): void;

package/dist/elements/view-card.js

@@ -0,0 +1,78 @@
+import { base } from "./shared.js";
+/** A SharePoint-ready record card with stable semantic parts and freely composed slots. */
+export function defineViewCard() {
+    if (customElements.get("spui-view-card"))
+        return;
+    class SpuiViewCard extends HTMLElement {
+        static observedAttributes = ["kind", "title", "subtitle", "description"];
+        connectedCallback() {
+            if (this.shadowRoot)
+                return;
+            const shadow = this.attachShadow({ mode: "open" });
+            const article = document.createElement("article");
+            article.part.add("surface");
+            const header = document.createElement("header");
+            header.part.add("header");
+            const leading = document.createElement("div");
+            leading.className = "leading";
+            leading.part.add("leading");
+            leading.append(slot("leading"));
+            const heading = document.createElement("div");
+            heading.className = "heading";
+            const eyebrow = document.createElement("div");
+            eyebrow.className = "eyebrow";
+            eyebrow.part.add("eyebrow");
+            eyebrow.append(slot("eyebrow"));
+            const title = document.createElement("h3");
+            title.part.add("title");
+            title.append(slot("title", "title"));
+            const subtitle = document.createElement("p");
+            subtitle.className = "subtitle";
+            subtitle.part.add("subtitle");
+            subtitle.append(slot("subtitle", "subtitle"));
+            heading.append(eyebrow, title, subtitle);
+            const status = document.createElement("div");
+            status.className = "status";
+            status.part.add("status");
+            status.append(slot("status"));
+            header.append(leading, heading, status);
+            const description = document.createElement("p");
+            description.className = "description";
+            description.part.add("description");
+            description.append(slot("description", "description"));
+            const body = document.createElement("div");
+            body.className = "body";
+            body.part.add("body");
+            body.append(slot());
+            const footer = document.createElement("footer");
+            footer.part.add("actions");
+            footer.append(slot("actions"));
+            article.append(header, description, body, footer);
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{display:block;min-width:0}article{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spui-control-gap,12px);min-height:100%;padding:var(--spui-card-padding,16px);border:1px solid var(--spui-card-border,var(--spui-ui-stroke,var(--spui-semantic-card-border,#d1d1d1)));border-radius:var(--spui-card-radius,8px);background:var(--spui-card-background,var(--spui-ui-surface,var(--spui-semantic-card-background,#fff)));box-shadow:var(--spui-card-shadow,0 1px 3px #0001);color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--spui-control-gap,12px)}.leading:empty,.eyebrow:empty,.subtitle:empty,.description:empty,.status:empty,footer:empty,.body:empty{display:none}.leading{display:grid;place-items:center;min-width:36px;min-height:36px}.heading{min-width:0}.eyebrow{margin:0 0 3px;color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font-size:12px;font-weight:600;letter-spacing:.02em}h3{margin:0;font-size:16px;line-height:1.35;font-weight:650;overflow-wrap:anywhere}.subtitle,.description{margin:3px 0 0;color:var(--spui-ui-muted,var(--spui-semantic-body-text,#616161));font-size:13px;line-height:1.45}.description{margin:0;font-size:14px;color:var(--spui-ui-text,var(--spui-semantic-body-text,inherit))}.status{justify-self:end;align-self:start;font-size:12px}.body{padding-top:10px;border-top:1px solid var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1));font-size:13px}footer{display:flex;align-items:center;gap:var(--spui-control-gap,8px);margin-top:auto;padding-top:4px}::slotted([slot=leading]){max-width:48px;max-height:48px}::slotted([slot=status]){display:inline-flex;align-items:center;padding:4px 9px;border:1px solid var(--spui-base-stroke,var(--spui-ui-stroke,#d1d1d1));border-radius:999px;background:color-mix(in srgb,var(--spui-base-accent,var(--spui-ui-accent,#0078d4)) 12%,var(--spui-base-surface,var(--spui-ui-surface,#fff)));color:var(--spui-ui-text,inherit);font-size:12px;font-weight:600}::slotted([slot=actions]){font:inherit}:host([kind=person]) .leading{border-radius:50%;overflow:hidden}:host([kind=person]) .leading:empty{border-radius:50%;background:var(--spui-ui-canvas,#f5f5f5)}:host([data-spui-appearance=glass]),:host-context([data-spui-appearance=glass]) article{backdrop-filter:var(--spui-card-backdrop,none)}@media(prefers-reduced-motion:reduce){article{scroll-behavior:auto}}@media(forced-colors:active){article{border-color:CanvasText;box-shadow:none}}`;
+            shadow.append(style, article);
+            for (const name of SpuiViewCard.observedAttributes)
+                this.updateFallback(name);
+        }
+        attributeChangedCallback(name) {
+            this.updateFallback(name);
+        }
+        updateFallback(name) { const fallback = this.shadowRoot?.querySelector(`[data-fallback="${name}"]`); if (fallback)
+            fallback.textContent = this.getAttribute(name) ?? ""; }
+    }
+    customElements.define("spui-view-card", SpuiViewCard);
+}
+function slot(name, attribute) {
+    const element = document.createElement("slot");
+    if (name)
+        element.name = name;
+    if (attribute) {
+        const fallback = document.createElement("span");
+        fallback.dataset.fallback = attribute;
+        element.append(fallback);
+    }
+    else
+        element.addEventListener("slotchange", () => { if (element.parentElement)
+            element.parentElement.hidden = element.assignedElements().length === 0; });
+    return element;
+}

package/dist/elements/virtual-list.d.ts

@@ -0,0 +1,41 @@
+export type VirtualListItemRenderer<T = unknown> = (item: T, index: number) => Node | string | number | null;
+export interface VirtualListDataSource<T = unknown> {
+    readonly length: number;
+    getItem(index: number): T | undefined;
+    loadRange(start: number, end: number, signal: AbortSignal): void | Promise<void>;
+    subscribe?(listener: () => void): () => void;
+}
+export interface SharePointVirtualListElement extends HTMLElement {
+    items: unknown[];
+    dataSource?: VirtualListDataSource;
+    renderItem?: VirtualListItemRenderer;
+    itemKey?: (item: unknown, index: number) => string | number;
+    axis: "vertical" | "horizontal";
+    itemSize: number;
+    rowHeight: number;
+    measureItems: boolean;
+    scrollToIndex(index: number, align?: "start" | "center" | "end", behavior?: ScrollBehavior): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "spui-virtual-list": SharePointVirtualListElement;
+    }
+}
+/** Prefix-sum index for measured rows; point updates and offset lookups are O(log n). */
+export declare class VariableSizeIndex {
+    private sizes;
+    private tree;
+    private estimate;
+    private count;
+    private uniform;
+    constructor(count?: number, estimate?: number, sizes?: readonly number[]);
+    get length(): number;
+    get totalSize(): number;
+    reset(count: number, estimate: number, sizes?: readonly number[]): void;
+    size(index: number): number;
+    offset(index: number): number;
+    set(index: number, size: number): number;
+    indexAt(offset: number): number;
+}
+/** Fixed or measured one-dimensional virtual list. DOM work is bounded by the viewport plus overscan. */
+export declare function defineVirtualList(): void;