@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/swatch-picker.js

@@ -1,363 +0,0 @@
-import { base } from "./shared.js";
-const ITEM_TAGS = ["spui-color-swatch", "spui-image-swatch", "spui-empty-swatch"];
-function pickerFor(item) { return item.closest("spui-swatch-picker"); }
-export function defineColorSwatch() {
-    if (customElements.get("spui-color-swatch"))
-        return;
-    class SpuiColorSwatch extends HTMLElement {
-        static observedAttributes = ["color", "value", "disabled", "size", "shape", "border-color", "aria-label", "selected"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render();
-        else
-            this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-flex;flex:none}button{box-sizing:border-box;position:relative;display:grid;place-items:center;width:var(--spui-swatch-size,28px);height:var(--spui-swatch-size,28px);padding:3px;border:1px solid var(--swatch-border,var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1)));border-radius:var(--spui-swatch-radius,4px);background:transparent;color:var(--spui-ui-text,CanvasText);cursor:pointer}button::before{content:"";display:block;width:100%;height:100%;border-radius:inherit;background:var(--swatch-color,transparent)}.indicator{position:absolute;inset:3px;z-index:1;display:grid;place-items:center;pointer-events:none;color:var(--spui-ui-text,CanvasText)}.indicator[hidden],:host(:not([disabled])) .disabled-indicator{display:none}:host([selected]) button{border-color:transparent;box-shadow:inset 0 0 0 2px var(--spui-ui-accent,var(--spui-focus-ring,#0078d4)),inset 0 0 0 5px var(--spui-ui-surface,#fff)}button[aria-selected=true]{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}:host([shape=circular]) button,:host([shape=circular]) button::before{border-radius:50%}:host([shape=rounded]) button,:host([shape=rounded]) button::before{border-radius:var(--spui-control-radius,6px)}@media(forced-colors:active){button{border-color:ButtonText}button[aria-selected=true],button:focus-visible{outline-color:Highlight}:host([selected]) button{box-shadow:inset 0 0 0 2px Highlight,inset 0 0 0 5px Canvas}}`;
-            const button = document.createElement("button");
-            button.type = "button";
-            button.addEventListener("click", event => {
-                if (button.disabled)
-                    return;
-                const detail = { value: this.getAttribute("value") ?? this.getAttribute("color") ?? "", color: this.getAttribute("color") ?? "" };
-                this.dispatchEvent(new CustomEvent("spui-swatch-select", { bubbles: true, composed: true, detail: { ...detail, originalEvent: event } }));
-            });
-            const icon = document.createElement("span");
-            icon.className = "indicator icon";
-            icon.append(Object.assign(document.createElement("slot"), { name: "icon" }));
-            const disabledIcon = document.createElement("span");
-            disabledIcon.className = "indicator disabled-indicator";
-            const disabledSlot = document.createElement("slot");
-            disabledSlot.name = "disabled-icon";
-            const fallback = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            fallback.setAttribute("viewBox", "0 0 16 16");
-            fallback.setAttribute("aria-hidden", "true");
-            fallback.innerHTML = '<circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M4 12 12 4" fill="none" stroke="currentColor" stroke-width="1.5"/>';
-            disabledSlot.append(fallback);
-            disabledIcon.append(disabledSlot);
-            button.append(icon, disabledIcon);
-            shadow.append(style, button);
-            this.sync();
-        }
-        sync() {
-            const button = this.shadowRoot?.querySelector("button");
-            if (!button)
-                return;
-            const picker = pickerFor(this);
-            const grid = picker?.getAttribute("layout") !== "row";
-            const size = this.getAttribute("size") || picker?.getAttribute("size") || "medium";
-            const shape = this.getAttribute("shape") || picker?.getAttribute("shape") || "square";
-            const sizeMap = { "extra-small": "20px", small: "24px", medium: "28px", large: "32px" };
-            button.style.setProperty("--spui-swatch-size", sizeMap[size] || sizeMap.medium);
-            button.style.setProperty("--spui-swatch-radius", shape === "circular" ? "50%" : "var(--spui-control-radius,6px)");
-            button.style.setProperty("--swatch-color", this.getAttribute("color") || "transparent");
-            button.style.setProperty("--swatch-border", this.getAttribute("border-color") || "var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1))");
-            button.disabled = this.hasAttribute("disabled");
-            if (grid) {
-                this.setAttribute("role", "gridcell");
-                this.setAttribute("aria-selected", String(this.hasAttribute("selected")));
-                button.removeAttribute("role");
-                button.removeAttribute("aria-selected");
-            }
-            else {
-                this.removeAttribute("role");
-                this.removeAttribute("aria-selected");
-                button.setAttribute("role", "radio");
-                button.removeAttribute("aria-selected");
-            }
-            button.setAttribute("aria-label", this.getAttribute("aria-label") || this.getAttribute("value") || this.getAttribute("color") || "Color swatch");
-            button.tabIndex = picker?.getAttribute("focus-mode") === "tab" ? 0 : this.hasAttribute("tab-stop") ? 0 : -1;
-        }
-    }
-    customElements.define("spui-color-swatch", SpuiColorSwatch);
-}
-export function defineImageSwatch() {
-    if (customElements.get("spui-image-swatch"))
-        return;
-    class SpuiImageSwatch extends HTMLElement {
-        static observedAttributes = ["src", "value", "disabled", "size", "shape", "aria-label", "selected"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render();
-        else
-            this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-flex;flex:none}button{box-sizing:border-box;width:var(--spui-swatch-size,28px);height:var(--spui-swatch-size,28px);padding:3px;border:1px solid var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1));border-radius:var(--spui-swatch-radius,4px);background:transparent;cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}:host([selected]) button{border-color:transparent;box-shadow:inset 0 0 0 2px var(--spui-ui-accent,var(--spui-focus-ring,#0078d4)),inset 0 0 0 5px var(--spui-ui-surface,#fff)}button[aria-selected=true],button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}@media(forced-colors:active){button{border-color:ButtonText}button:focus-visible{outline-color:Highlight}:host([selected]) button{box-shadow:inset 0 0 0 2px Highlight,inset 0 0 0 5px Canvas}}`;
-            const button = document.createElement("button");
-            button.type = "button";
-            const image = document.createElement("img");
-            image.alt = "";
-            button.append(image);
-            button.addEventListener("click", event => { if (!button.disabled)
-                this.dispatchEvent(new CustomEvent("spui-swatch-select", { bubbles: true, composed: true, detail: { value: this.getAttribute("value") ?? "", color: "", originalEvent: event } })); });
-            shadow.append(style, button);
-            this.sync();
-        }
-        sync() {
-            const button = this.shadowRoot?.querySelector("button"), image = this.shadowRoot?.querySelector("img");
-            if (!button || !image)
-                return;
-            const picker = pickerFor(this), grid = picker?.getAttribute("layout") !== "row";
-            const sizeMap = { "extra-small": "20px", small: "24px", medium: "28px", large: "32px" };
-            button.style.setProperty("--spui-swatch-size", sizeMap[this.getAttribute("size") || picker?.getAttribute("size") || "medium"] || sizeMap.medium);
-            button.style.setProperty("--spui-swatch-radius", (this.getAttribute("shape") || picker?.getAttribute("shape")) === "circular" ? "50%" : "var(--spui-control-radius,6px)");
-            button.disabled = this.hasAttribute("disabled");
-            if (grid) {
-                this.setAttribute("role", "gridcell");
-                this.setAttribute("aria-selected", String(this.hasAttribute("selected")));
-                button.removeAttribute("role");
-                button.removeAttribute("aria-selected");
-            }
-            else {
-                this.removeAttribute("role");
-                this.removeAttribute("aria-selected");
-                button.setAttribute("role", "radio");
-                button.removeAttribute("aria-selected");
-            }
-            button.setAttribute("aria-label", this.getAttribute("aria-label") || this.getAttribute("value") || "Image swatch");
-            image.src = this.getAttribute("src") || "";
-            button.tabIndex = picker?.getAttribute("focus-mode") === "tab" ? 0 : this.hasAttribute("tab-stop") ? 0 : -1;
-        }
-    }
-    customElements.define("spui-image-swatch", SpuiImageSwatch);
-}
-export function defineEmptySwatch() {
-    if (customElements.get("spui-empty-swatch"))
-        return;
-    class SpuiEmptySwatch extends HTMLElement {
-        static observedAttributes = ["disabled", "size", "shape", "aria-label"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render();
-        else
-            this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-flex}button{width:var(--spui-swatch-size,28px);height:var(--spui-swatch-size,28px);border:1px dashed var(--spui-ui-stroke,var(--colorNeutralStroke1,#d1d1d1));border-radius:var(--spui-swatch-radius,4px);background:transparent;color:var(--spui-ui-text,CanvasText);font:inherit;font-size:20px;cursor:pointer}button:focus-visible{outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}@media(forced-colors:active){button{border-color:ButtonText}button:focus-visible{outline-color:Highlight}}`;
-            const button = document.createElement("button");
-            button.type = "button";
-            button.textContent = "+";
-            button.addEventListener("click", () => { if (!button.disabled)
-                this.dispatchEvent(new CustomEvent("spui-empty-swatch-activate", { bubbles: true, composed: true })); });
-            shadow.append(style, button);
-            this.sync();
-        }
-        sync() {
-            const button = this.shadowRoot?.querySelector("button");
-            if (!button)
-                return;
-            const picker = pickerFor(this), sizeMap = { "extra-small": "20px", small: "24px", medium: "28px", large: "32px" };
-            button.style.setProperty("--spui-swatch-size", sizeMap[this.getAttribute("size") || picker?.getAttribute("size") || "medium"] || sizeMap.medium);
-            button.style.setProperty("--spui-swatch-radius", (this.getAttribute("shape") || picker?.getAttribute("shape")) === "circular" ? "50%" : "var(--spui-control-radius,6px)");
-            button.disabled = this.hasAttribute("disabled");
-            const label = this.getAttribute("aria-label")?.trim() || "Add color";
-            button.setAttribute("aria-label", label);
-            if (picker?.getAttribute("layout") !== "row") {
-                this.setAttribute("role", "gridcell");
-                if (this.getAttribute("aria-label") !== label)
-                    this.setAttribute("aria-label", label);
-                button.removeAttribute("role");
-            }
-            else {
-                this.removeAttribute("role");
-                button.setAttribute("role", picker?.getAttribute("selection-mode") === "multiple" ? "checkbox" : "radio");
-            }
-            button.tabIndex = picker?.getAttribute("focus-mode") === "tab" ? 0 : this.hasAttribute("tab-stop") ? 0 : -1;
-        }
-    }
-    customElements.define("spui-empty-swatch", SpuiEmptySwatch);
-}
-export function defineSwatchPickerRow() {
-    if (customElements.get("spui-swatch-picker-row"))
-        return;
-    class SpuiSwatchPickerRow extends HTMLElement {
-        connectedCallback() { if (!this.shadowRoot) {
-            this.setAttribute("role", "row");
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:flex;flex-wrap:nowrap;gap:var(--spui-swatch-gap,4px);align-items:center;min-width:0}slot{display:contents}`;
-            const slot = document.createElement("slot");
-            shadow.append(style, slot);
-        } }
-    }
-    customElements.define("spui-swatch-picker-row", SpuiSwatchPickerRow);
-}
-export function defineSwatchPicker() {
-    if (customElements.get("spui-swatch-picker"))
-        return;
-    defineColorSwatch();
-    defineImageSwatch();
-    defineEmptySwatch();
-    defineSwatchPickerRow();
-    class SpuiSwatchPicker extends HTMLElement {
-        static observedAttributes = ["aria-label", "layout", "size", "shape", "spacing", "focus-mode", "selection-mode", "selected-value", "default-selected-value", "selected-values", "default-selected-values", "columns"];
-        itemSlot;
-        events;
-        selected = new Set();
-        controlled = false;
-        activeValue = "";
-        get selectionMode() { return this.multiple() ? "multiple" : "single"; }
-        set selectionMode(value) { if (value === "multiple")
-            this.setAttribute("selection-mode", value);
-        else
-            this.removeAttribute("selection-mode"); }
-        get selectedValue() { return this.selected.values().next().value ?? ""; }
-        set selectedValue(value) { this.setAttribute("selected-value", value); }
-        get selectedValues() { return [...this.selected]; }
-        set selectedValues(values) { this.setAttribute("selected-values", JSON.stringify(Array.isArray(values) ? values : [])); }
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.events?.abort();
-            this.events = new AbortController();
-            this.itemSlot.addEventListener("slotchange", this.refresh, { signal: this.events.signal });
-            this.addEventListener("spui-swatch-select", this.onSelect, { signal: this.events.signal });
-            this.addEventListener("keydown", this.onKeyDown, { signal: this.events.signal });
-            this.controlled = this.hasAttribute("selected-value") || this.hasAttribute("selected-values");
-            this.selected = this.readValues(this.controlled ? "selected" : "default");
-            this.refresh();
-        }
-        disconnectedCallback() { this.events?.abort(); this.events = undefined; }
-        attributeChangedCallback(name) {
-            if (!this.isConnected || !this.shadowRoot)
-                return;
-            if (["selected-value", "selected-values"].includes(name)) {
-                this.controlled = this.hasAttribute("selected-value") || this.hasAttribute("selected-values");
-                this.selected = this.readValues(this.controlled ? "selected" : "default");
-            }
-            else if (["default-selected-value", "default-selected-values"].includes(name) && !this.controlled)
-                this.selected = this.readValues("default");
-            this.refresh();
-        }
-        multiple() { return this.getAttribute("selection-mode") === "multiple"; }
-        readValues(kind) {
-            const plural = this.getAttribute(kind === "selected" ? "selected-values" : "default-selected-values");
-            if (plural !== null) {
-                try {
-                    const parsed = JSON.parse(plural);
-                    return new Set(Array.isArray(parsed) ? parsed.filter((value) => typeof value === "string") : []);
-                }
-                catch {
-                    return new Set();
-                }
-            }
-            const singular = this.getAttribute(kind === "selected" ? "selected-value" : "default-selected-value");
-            return new Set(singular ? [singular] : []);
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:inline-block;max-width:100%;--spui-swatch-gap:var(--spui-swatch-picker-gap,4px)}.items{display:grid;grid-template-columns:repeat(var(--spui-swatch-columns,6),max-content);gap:var(--spui-swatch-gap);align-items:center;justify-content:start;max-width:100%}:host([layout=row]) .items{display:flex;flex-wrap:wrap}:host([spacing=small]){--spui-swatch-gap:2px}:host([spacing=medium]){--spui-swatch-gap:4px}:host([aria-disabled=true]){opacity:.55}`;
-            style.textContent += ".items>slot{display:contents}";
-            this.itemSlot = document.createElement("slot");
-            const items = document.createElement("div");
-            items.className = "items";
-            items.setAttribute("part", "control");
-            items.append(this.itemSlot);
-            shadow.append(style, items);
-        }
-        swatches() { return this.itemSlot.assignedElements({ flatten: true }).flatMap(element => element.localName === "spui-swatch-picker-row" ? [...element.querySelectorAll(ITEM_TAGS.join(","))] : ITEM_TAGS.includes(element.localName) ? [element] : []); }
-        refresh = () => {
-            const grid = this.getAttribute("layout") !== "row", multiple = this.multiple();
-            const items = this.swatches();
-            this.setAttribute("role", grid ? "grid" : multiple ? "group" : "radiogroup");
-            if (grid && multiple)
-                this.setAttribute("aria-multiselectable", "true");
-            else
-                this.removeAttribute("aria-multiselectable");
-            const label = this.getAttribute("aria-label");
-            if (!label)
-                this.setAttribute("aria-label", "Choose a color");
-            const columns = Math.max(1, Number(this.getAttribute("columns")) || 6);
-            this.style.setProperty("--spui-swatch-columns", String(columns));
-            const enabled = items.filter(item => !item.hasAttribute("disabled"));
-            if (!enabled.some(item => (item.getAttribute("value") || item.getAttribute("color")) === this.activeValue)) {
-                const active = enabled.find(item => this.selected.has(item.getAttribute("value") || item.getAttribute("color") || "")) ?? enabled[0];
-                this.activeValue = active?.getAttribute("value") || active?.getAttribute("color") || "";
-            }
-            items.forEach(item => {
-                const value = item.getAttribute("value") || item.getAttribute("color") || "";
-                item.toggleAttribute("selected", this.selected.has(value));
-                item.toggleAttribute("tab-stop", this.getAttribute("focus-mode") === "tab" || value === this.activeValue);
-                const root = item.shadowRoot?.querySelector("button");
-                if (root) {
-                    if (grid) {
-                        item.setAttribute("role", "gridcell");
-                        item.setAttribute("aria-selected", String(this.selected.has(value)));
-                        root.removeAttribute("role");
-                        root.removeAttribute("aria-selected");
-                        root.removeAttribute("aria-checked");
-                    }
-                    else {
-                        item.removeAttribute("role");
-                        item.removeAttribute("aria-selected");
-                        root.setAttribute("role", multiple ? "checkbox" : "radio");
-                        root.removeAttribute("aria-selected");
-                        root.setAttribute("aria-checked", String(this.selected.has(value)));
-                    }
-                    root.tabIndex = this.getAttribute("focus-mode") === "tab" ? 0 : item.hasAttribute("tab-stop") ? 0 : -1;
-                }
-            });
-        };
-        onSelect = (event) => {
-            const { value, color } = event.detail, next = new Set(this.selected);
-            this.activeValue = value;
-            if (this.multiple()) {
-                if (next.has(value))
-                    next.delete(value);
-                else
-                    next.add(value);
-            }
-            else {
-                next.clear();
-                next.add(value);
-            }
-            if (!this.controlled)
-                this.selected = next;
-            this.refresh();
-            const selectedSwatch = this.swatches().find(item => (item.getAttribute("value") || item.getAttribute("color")) === value);
-            this.dispatchEvent(new CustomEvent("spui-selection-change", { bubbles: true, composed: true, detail: { event: event.detail?.originalEvent ?? event, type: "click", selectedValue: value, selectedSwatch: selectedSwatch?.getAttribute("color") ?? selectedSwatch?.getAttribute("src") ?? color, selectedColor: color, selectedValues: [...next], selectedColors: [...next].map(selected => this.swatches().find(item => (item.getAttribute("value") || item.getAttribute("color")) === selected)?.getAttribute("color") || ""), selectionMode: this.multiple() ? "multiple" : "single" } }));
-        };
-        onKeyDown = (event) => {
-            if (this.getAttribute("focus-mode") === "tab")
-                return;
-            const items = this.swatches().filter(item => !item.hasAttribute("disabled"));
-            const current = items.findIndex(item => item.shadowRoot?.activeElement === item.shadowRoot?.querySelector("button"));
-            if (current < 0)
-                return;
-            const columns = Math.max(1, Number(this.getAttribute("columns")) || 6);
-            let next = current;
-            const rtl = getComputedStyle(this).direction === "rtl";
-            if (event.key === "ArrowRight")
-                next += rtl ? -1 : 1;
-            else if (event.key === "ArrowLeft")
-                next += rtl ? 1 : -1;
-            else if (event.key === "ArrowDown")
-                next += columns;
-            else if (event.key === "ArrowUp")
-                next -= columns;
-            else if (event.key === "Home")
-                next = 0;
-            else if (event.key === "End")
-                next = items.length - 1;
-            else
-                return;
-            event.preventDefault();
-            next = (next + items.length) % items.length;
-            this.activeValue = items[next].getAttribute("value") || items[next].getAttribute("color") || "";
-            this.refresh();
-            items[next]?.focus();
-        };
-    }
-    customElements.define("spui-swatch-picker", SpuiSwatchPicker);
-}

package/dist/elements/table.d.ts

@@ -1,21 +0,0 @@
-export type TableColumnId = string | number;
-export interface TableColumnDefinition<TItem> {
-    columnId: TableColumnId;
-    compare: (a: TItem, b: TItem) => number;
-    renderHeaderCell: (data?: unknown) => unknown;
-    renderCell: (item: TItem) => unknown;
-}
-export type CreateTableColumnOptions<TItem> = Partial<Omit<TableColumnDefinition<TItem>, "columnId">> & {
-    columnId: TableColumnId;
-};
-export declare function createTableColumn<TItem>(options: CreateTableColumnOptions<TItem>): TableColumnDefinition<TItem>;
-export declare function defineTableCellActions(): void;
-export declare function defineTableCellLayout(): void;
-export declare function defineTableCell(): void;
-export declare function defineTableHeaderCell(): void;
-export declare function defineTableRow(): void;
-export declare function defineTableHeader(): void;
-export declare function defineTableBody(): void;
-export declare function defineTableSelectionCell(): void;
-export declare function defineTableResizeHandle(): void;
-export declare function defineTable(): void;