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

package/dist/elements/list.js

@@ -0,0 +1,297 @@
+import { base } from "./shared.js";
+const parseValues = (value) => {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.filter((item) => typeof item === "string" || (typeof item === "number" && Number.isFinite(item))) : [];
+    }
+    catch {
+        return [];
+    }
+};
+export function defineListItem() {
+    if (customElements.get("spui-list-item"))
+        return;
+    class SpuiListItem extends HTMLElement {
+        static observedAttributes = ["value", "disabled-selection", "has-action"];
+        generatedValue = `spui-list-item-${crypto.randomUUID()}`;
+        itemValue;
+        connectedCallback() { this.render(); this.closest("spui-list")?.dispatchEvent(new Event("spui-list-items-change")); }
+        disconnectedCallback() { this.closest("spui-list")?.dispatchEvent(new Event("spui-list-items-change")); }
+        attributeChangedCallback() { if (this.isConnected)
+            this.closest("spui-list")?.dispatchEvent(new Event("spui-list-items-change")); }
+        get value() { const attr = this.getAttribute("value"); return this.itemValue ?? attr ?? (this.id || this.generatedValue); }
+        set value(value) { this.itemValue = value; this.setAttribute("value", String(value)); }
+        get disabledSelection() { return this.hasAttribute("disabled-selection"); }
+        set disabledSelection(value) { this.toggleAttribute("disabled-selection", value); }
+        render() {
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:6px 10px;border-radius:var(--spui-list-item-radius,var(--spui-control-radius,4px));outline:none;color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));cursor:default}:host(:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4));outline-offset:-2px}:host(:hover){background:var(--spui-list-row-hover,var(--spui-ui-surface-hover,#f5f5f5))}:host([aria-selected=true]){background:var(--spui-list-selected-background,color-mix(in srgb,var(--spui-ui-accent,#0078d4) 12%,var(--spui-ui-surface,#fff)))}:host([aria-selected=true]) .checkmark{opacity:1}:host([aria-disabled=true]){opacity:.55}.content{display:flex;align-items:center;gap:inherit;min-width:0;flex:1}.checkmark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;opacity:0;color:var(--spui-ui-accent,#0078d4);font-size:14px}.checkmark::before{content:"✓"}@media(forced-colors:active){:host([aria-selected=true]){outline:1px solid Highlight;background:Canvas;color:CanvasText}.checkmark{color:Highlight}}`;
+            const checkmark = document.createElement("span");
+            checkmark.className = "checkmark";
+            checkmark.part.add("checkmark");
+            checkmark.setAttribute("aria-hidden", "true");
+            checkmark.append(document.createElement("slot"));
+            const customCheckmark = checkmark.querySelector("slot");
+            customCheckmark.name = "checkmark";
+            customCheckmark.textContent = "✓";
+            const content = document.createElement("span");
+            content.className = "content";
+            content.part.add("content");
+            content.append(document.createElement("slot"));
+            shadow.replaceChildren(style, checkmark, content);
+        }
+    }
+    customElements.define("spui-list-item", SpuiListItem);
+}
+export function defineList() {
+    defineListItem();
+    if (customElements.get("spui-list"))
+        return;
+    class SpuiList extends HTMLElement {
+        static observedAttributes = ["selection-mode", "navigation-mode", "selected-items", "default-selected-items", "role"];
+        selected = [];
+        controlled;
+        generatedRole;
+        generatedItemRoles = new WeakMap();
+        activeIndex = 0;
+        onKeyDownBound = (event) => this.onKeyDown(event);
+        onClickBound = (event) => this.onClick(event);
+        onFocusBound = (event) => this.onFocus(event);
+        onCheckmarkChangeBound = (event) => this.onCheckmarkChange(event);
+        syncBound = () => this.syncItems();
+        constructor() { super(); }
+        connectedCallback() {
+            this.setAttribute("data-spui-list", "");
+            this.addEventListener("keydown", this.onKeyDownBound);
+            this.addEventListener("click", this.onClickBound);
+            this.addEventListener("focusin", this.onFocusBound);
+            this.addEventListener("change", this.onCheckmarkChangeBound);
+            this.addEventListener("spui-change", this.onCheckmarkChangeBound);
+            this.addEventListener("spui-list-items-change", this.syncBound);
+            if (this.hasAttribute("selected-items"))
+                this.controlled = parseValues(this.getAttribute("selected-items"));
+            else
+                this.selected = parseValues(this.getAttribute("default-selected-items"));
+            this.render();
+            this.syncItems();
+        }
+        disconnectedCallback() {
+            this.removeEventListener("keydown", this.onKeyDownBound);
+            this.removeEventListener("click", this.onClickBound);
+            this.removeEventListener("focusin", this.onFocusBound);
+            this.removeEventListener("change", this.onCheckmarkChangeBound);
+            this.removeEventListener("spui-change", this.onCheckmarkChangeBound);
+            this.removeEventListener("spui-list-items-change", this.syncBound);
+        }
+        attributeChangedCallback(name) {
+            if (!this.isConnected)
+                return;
+            if (name === "selected-items")
+                this.controlled = this.hasAttribute("selected-items") ? parseValues(this.getAttribute("selected-items")) : undefined;
+            if (name === "default-selected-items" && this.controlled === undefined)
+                this.selected = parseValues(this.getAttribute("default-selected-items"));
+            this.render();
+            this.syncItems();
+        }
+        get selectionMode() { const mode = this.getAttribute("selection-mode"); return mode === "single" || mode === "multiselect" ? mode : undefined; }
+        set selectionMode(value) { value ? this.setAttribute("selection-mode", value) : this.removeAttribute("selection-mode"); }
+        get navigationMode() { const mode = this.getAttribute("navigation-mode"); return mode === "items" || mode === "composite" ? mode : undefined; }
+        set navigationMode(value) { value ? this.setAttribute("navigation-mode", value) : this.removeAttribute("navigation-mode"); }
+        get selectedItems() { return [...(this.controlled ?? this.selected)]; }
+        set selectedItems(value) { this.controlled = value === undefined ? undefined : [...value]; this.syncItems(); }
+        get defaultSelectedItems() { return parseValues(this.getAttribute("default-selected-items")); }
+        set defaultSelectedItems(value) { this.setAttribute("default-selected-items", JSON.stringify([...value])); }
+        items() { return [...this.children].filter((element) => element.localName === "spui-list-item"); }
+        render() {
+            const mode = this.navigationMode;
+            const selection = this.selectionMode;
+            const currentRole = this.getAttribute("role");
+            const role = currentRole && currentRole !== this.generatedRole ? currentRole : (mode === "composite" ? "grid" : selection ? "listbox" : "list");
+            this.generatedRole = role;
+            if (this.getAttribute("role") !== role)
+                this.setAttribute("role", role);
+            if (selection === "multiselect")
+                this.setAttribute("aria-multiselectable", "true");
+            else
+                this.removeAttribute("aria-multiselectable");
+            const shadow = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+            const style = document.createElement("style");
+            style.textContent = `${base}:host{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spui-list-gap,2px);min-width:0;margin:0;padding:var(--spui-list-padding,0);color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));font-family:var(--spui-font-family,inherit)}:host(:focus-visible){outline:2px solid var(--spui-focus-ring,var(--spui-ui-accent,#0078d4))}@media(forced-colors:active){:host{border-color:CanvasText}}`;
+            const slot = document.createElement("slot");
+            slot.addEventListener("slotchange", this.syncBound);
+            shadow.replaceChildren(style, slot);
+        }
+        syncItems() {
+            const items = this.items();
+            const role = this.getAttribute("role") || "list";
+            const selection = this.selectionMode;
+            const focused = items.indexOf(this.shadowRoot?.activeElement);
+            if (focused >= 0)
+                this.activeIndex = focused;
+            if (this.activeIndex >= items.length)
+                this.activeIndex = Math.max(0, items.length - 1);
+            items.forEach((item, index) => {
+                const selectable = selection !== undefined;
+                const itemRole = role === "grid" ? "row" : role === "listbox" ? "option" : "listitem";
+                const currentRole = item.getAttribute("role");
+                const effectiveRole = currentRole && currentRole !== this.generatedItemRoles.get(item) ? currentRole : itemRole;
+                this.generatedItemRoles.set(item, effectiveRole);
+                if (currentRole !== effectiveRole)
+                    item.setAttribute("role", effectiveRole);
+                if (selectable) {
+                    const selected = this.selectedItems.includes(item.value ?? item.getAttribute("value") ?? "");
+                    item.setAttribute("aria-selected", String(selected));
+                    if (item.hasAttribute("disabled-selection") && !item.hasAttribute("has-action"))
+                        item.setAttribute("aria-disabled", "true");
+                    else
+                        item.removeAttribute("aria-disabled");
+                    const checkmarkSlot = item.shadowRoot?.querySelector('slot[name="checkmark"]');
+                    const assigned = checkmarkSlot?.assignedElements({ flatten: true }) ?? [];
+                    const controls = assigned.flatMap(element => [
+                        ...(element.matches('input[type="checkbox"],spui-checkbox') ? [element] : []),
+                        ...element.querySelectorAll('input[type="checkbox"],spui-checkbox')
+                    ]);
+                    for (const control of controls) {
+                        const checkbox = control;
+                        checkbox.checked = selected;
+                        checkbox.disabled = item.hasAttribute("disabled-selection");
+                        checkbox.tabIndex = -1;
+                    }
+                }
+                else {
+                    item.removeAttribute("aria-selected");
+                    item.removeAttribute("aria-disabled");
+                }
+                const managedTabOrder = this.navigationMode !== undefined || selectable;
+                item.tabIndex = managedTabOrder ? (index === this.activeIndex ? 0 : -1) : item.hasAttribute("has-action") ? 0 : -1;
+            });
+        }
+        onFocus(event) {
+            const item = event.target.closest("spui-list-item");
+            const index = item ? this.items().indexOf(item) : -1;
+            if (index >= 0) {
+                this.activeIndex = index;
+                this.syncItems();
+            }
+        }
+        onKeyDown(event) {
+            const current = event.target.closest("spui-list-item");
+            if (!current)
+                return;
+            const origin = event.composedPath()[0];
+            const nestedTarget = origin !== current;
+            const items = this.items();
+            const index = items.indexOf(current);
+            if (this.navigationMode === "composite" && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+                const rtl = getComputedStyle(this).direction === "rtl";
+                const step = (event.key === "ArrowRight" ? 1 : -1) * (rtl ? -1 : 1);
+                const focusable = [...current.querySelectorAll('a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])')].filter(node => !node.hasAttribute("disabled") && !node.hasAttribute("hidden"));
+                if (!nestedTarget) {
+                    if (step > 0 && focusable[0]) {
+                        event.preventDefault();
+                        focusable[0].focus();
+                    }
+                    else if (step < 0 && focusable.length) {
+                        event.preventDefault();
+                        focusable[focusable.length - 1].focus();
+                    }
+                }
+                else {
+                    const currentTarget = origin;
+                    const focusIndex = focusable.findIndex(node => node === currentTarget || node.contains(currentTarget));
+                    const next = focusable[focusIndex + step];
+                    if (next) {
+                        event.preventDefault();
+                        next.focus();
+                    }
+                    else if (step < 0 && focusIndex === 0) {
+                        event.preventDefault();
+                        current.focus();
+                    }
+                }
+                return;
+            }
+            if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") {
+                if (this.navigationMode === undefined && this.selectionMode === undefined)
+                    return;
+                event.preventDefault();
+                const direction = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" || event.key === "End" ? -1 : 1;
+                let next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : Math.max(0, Math.min(items.length - 1, index + direction));
+                while (items[next]?.getAttribute("aria-disabled") === "true" && next >= 0 && next < items.length)
+                    next += direction || 1;
+                if (items[next]) {
+                    this.activeIndex = next;
+                    this.syncItems();
+                    items[next].focus();
+                }
+                return;
+            }
+            if (nestedTarget || (event.key !== "Enter" && event.key !== " "))
+                return;
+            const value = current.value ?? current.getAttribute("value") ?? "";
+            if (event.key === " " && this.selectionMode) {
+                event.preventDefault();
+                if (!current.hasAttribute("disabled-selection"))
+                    this.toggleSelection(value, event);
+                return;
+            }
+            this.activate(current, event, value);
+        }
+        onClick(event) {
+            const current = event.target.closest("spui-list-item");
+            if (!current)
+                return;
+            const path = event.composedPath();
+            const itemIndex = path.indexOf(current);
+            if (path.slice(0, itemIndex < 0 ? path.length : itemIndex).some(node => node instanceof Element && node.matches("a,button,input,select,textarea,[contenteditable=true]")))
+                return;
+            const value = current.value ?? current.getAttribute("value") ?? "";
+            this.activate(current, event, value);
+        }
+        onCheckmarkChange(event) {
+            const path = event.composedPath();
+            const item = path.find((node) => node instanceof HTMLElement && node.localName === "spui-list-item");
+            if (!item || !path.some(node => node instanceof Element && node.getAttribute("slot") === "checkmark"))
+                return;
+            if (event.type === "change" && path.some(node => node instanceof Element && node.localName === "spui-checkbox"))
+                return;
+            if (!this.selectionMode || item.hasAttribute("disabled-selection")) {
+                this.syncItems();
+                return;
+            }
+            const detail = event.detail;
+            const target = event.target;
+            const checked = detail?.checked ?? target.checked;
+            if (checked === undefined)
+                return;
+            const value = item.value ?? item.getAttribute("value") ?? "";
+            this.setItemSelected(value, checked === true, event);
+        }
+        activate(item, originalEvent, value) {
+            const action = new CustomEvent("spui-list-item-action", { bubbles: true, composed: true, cancelable: true, detail: { originalEvent, value } });
+            item.dispatchEvent(action);
+            if (action.defaultPrevented)
+                return;
+            if (this.selectionMode && !item.hasAttribute("disabled-selection"))
+                this.toggleSelection(value, originalEvent);
+        }
+        toggleSelection(value, originalEvent) {
+            const selected = this.selectedItems;
+            this.setItemSelected(value, !selected.includes(value), originalEvent);
+        }
+        setItemSelected(value, selected, originalEvent) {
+            const current = this.selectedItems;
+            const next = this.selectionMode === "single"
+                ? (selected ? [value] : current.filter(item => item !== value))
+                : (selected ? current.includes(value) ? current : [...current, value] : current.filter(item => item !== value));
+            if (this.controlled === undefined)
+                this.selected = next;
+            this.syncItems();
+            this.dispatchEvent(new CustomEvent("spui-selection-change", { bubbles: true, composed: true, detail: { event: originalEvent, type: "change", selectedItems: next } }));
+        }
+    }
+    customElements.define("spui-list", SpuiList);
+}

package/dist/elements/menu.d.ts

@@ -0,0 +1,33 @@
+export type MenuOpenChangeType = "menuTriggerContextMenu" | "menuTriggerClick" | "menuTriggerMouseEnter" | "menuSafeZoneMouseEnter" | "menuSafeZoneTimeout" | "menuTriggerMouseLeave" | "menuTriggerMouseMove" | "menuTriggerKeyDown" | "menuItemClick" | "menuPopoverMouseEnter" | "menuPopoverKeyDown" | "clickOutside" | "scrollOutside" | "menuMouseEnter" | "programmatic";
+type MenuOpenChangeSourceData = {
+    type: "menuTriggerContextMenu" | "menuTriggerClick" | "menuTriggerMouseEnter" | "menuSafeZoneMouseEnter" | "menuTriggerMouseLeave" | "menuTriggerMouseMove" | "menuItemClick" | "menuPopoverMouseEnter";
+    event: MouseEvent;
+} | {
+    type: "menuTriggerKeyDown" | "menuPopoverKeyDown";
+    event: KeyboardEvent;
+    keyboard?: boolean;
+} | {
+    type: "menuSafeZoneTimeout" | "programmatic";
+    event: Event;
+} | {
+    type: "clickOutside" | "scrollOutside" | "menuMouseEnter";
+    event: MouseEvent | TouchEvent;
+};
+export type MenuOpenChangeData = {
+    bubble?: boolean;
+    keyboard?: boolean;
+    open: boolean;
+} & MenuOpenChangeSourceData;
+export declare function defineMenuItem(): void;
+export declare function defineMenuDivider(): void;
+export declare function defineMenuGroup(): void;
+export declare function defineMenuGroupHeader(): void;
+export declare function defineMenuItemLink(): void;
+export declare function defineMenuList(): void;
+export declare function defineMenuPopover(): void;
+export declare function defineMenuSplitGroup(): void;
+export declare function defineMenuTrigger(): void;
+export declare function defineMenu(): void;
+export declare function defineMenuBarItem(): void;
+export declare function defineMenuBar(): void;
+export {};