@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/list.js

@@ -1,297 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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 {};