@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements/toolbar.js

@@ -1,381 +0,0 @@
-import { buttonControlCss } from "./button.js";
-import { base } from "./shared.js";
-const itemSelector = "button:not(:disabled),a[href],input:not([type='hidden']):not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex]:not([tabindex='-1']),[data-toolbar-focus]";
-export function defineToolbarGroup() {
-    if (customElements.get("spui-toolbar-group"))
-        return;
-    class SpuiToolbarGroup extends HTMLElement {
-        static observedAttributes = ["label", "orientation"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync() {
-            this.setAttribute("role", "group");
-            const label = this.getAttribute("aria-label") || this.getAttribute("label");
-            if (label)
-                this.setAttribute("aria-label", label);
-            else
-                this.removeAttribute("aria-label");
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--spui-toolbar-group-gap,4px);min-width:0}:host([orientation=vertical]){flex-direction:column;align-items:stretch;width:100%}`;
-            shadow.append(style, document.createElement("slot"));
-        }
-    }
-    customElements.define("spui-toolbar-group", SpuiToolbarGroup);
-}
-export function defineToolbarSeparator() {
-    if (customElements.get("spui-toolbar-separator"))
-        return;
-    class SpuiToolbarSeparator extends HTMLElement {
-        static observedAttributes = ["orientation", "vertical"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync() {
-            this.setAttribute("role", "separator");
-            const orientation = this.hasAttribute("vertical") ? (this.getAttribute("vertical") === "false" ? "horizontal" : "vertical") : this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
-            if (this.getAttribute("orientation") !== orientation)
-                this.setAttribute("orientation", orientation);
-            this.setAttribute("aria-orientation", orientation);
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{box-sizing:border-box;display:inline-flex;flex:0 0 auto;align-items:stretch;align-self:stretch;min-height:24px;padding-inline:var(--spui-toolbar-separator-inset,3px)}.line{width:1px;background:var(--spui-toolbar-separator,var(--spui-ui-stroke,var(--spui-semantic-body-divider,#d1d1d1)))}:host([orientation=horizontal]){align-self:center;min-height:0;width:100%;height:1px;padding-inline:0;padding-block:var(--spui-toolbar-separator-inset,3px)}:host([orientation=horizontal]) .line{width:100%;height:1px}@media(forced-colors:active){.line{background:CanvasText}}`;
-            const line = document.createElement("span");
-            line.className = "line";
-            line.part.add("line");
-            line.setAttribute("aria-hidden", "true");
-            const wrapper = document.createElement("slot");
-            wrapper.name = "wrapper";
-            wrapper.append(line);
-            shadow.append(style, wrapper);
-        }
-    }
-    customElements.define("spui-toolbar-separator", SpuiToolbarSeparator);
-}
-export function defineToolbarRadioGroup() {
-    if (customElements.get("spui-toolbar-radio-group"))
-        return;
-    class SpuiToolbarRadioGroup extends HTMLElement {
-        static observedAttributes = ["label", "aria-label", "orientation"];
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync() {
-            this.setAttribute("role", "radiogroup");
-            if (!this.hasAttribute("aria-label") && this.hasAttribute("label"))
-                this.setAttribute("aria-label", this.getAttribute("label") ?? "");
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--spui-toolbar-group-gap,4px);min-width:0}:host([orientation=vertical]){flex-direction:column;align-items:stretch;width:100%}`;
-            shadow.append(style, document.createElement("slot"));
-        }
-    }
-    customElements.define("spui-toolbar-radio-group", SpuiToolbarRadioGroup);
-}
-export function defineToolbarRadioButton() {
-    if (customElements.get("spui-toolbar-radio-button"))
-        return;
-    class SpuiToolbarRadioButton extends HTMLElement {
-        static observedAttributes = ["name", "value", "checked", "disabled", "appearance", "size", "aria-label", "aria-labelledby", "aria-describedby", "title"];
-        get checked() { return this.hasAttribute("checked"); }
-        set checked(value) { this.toggleAttribute("checked", Boolean(value)); }
-        connectedCallback() { if (!this.shadowRoot)
-            this.render(); this.sync(); }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        sync() {
-            const button = this.shadowRoot?.querySelector("button");
-            if (!button)
-                return;
-            button.disabled = this.hasAttribute("disabled");
-            button.setAttribute("aria-checked", String(this.checked));
-            const label = this.getAttribute("aria-label");
-            if (label)
-                button.setAttribute("aria-label", label);
-            else
-                button.removeAttribute("aria-label");
-            for (const name of ["aria-labelledby", "aria-describedby", "title"]) {
-                const value = this.getAttribute(name);
-                value === null ? button.removeAttribute(name) : button.setAttribute(name, value);
-            }
-            const appearance = this.getAttribute("appearance") ?? "subtle";
-            button.className = appearance === "primary" ? "primary" : appearance === "transparent" ? "transparent" : "subtle";
-        }
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const button = document.createElement("button");
-            button.type = "button";
-            button.setAttribute("role", "radio");
-            button.setAttribute("aria-checked", "false");
-            button.part.add("control");
-            const icon = document.createElement("slot");
-            icon.name = "icon";
-            button.append(icon, document.createElement("slot"));
-            button.addEventListener("click", event => {
-                if (this.hasAttribute("disabled"))
-                    return;
-                this.dispatchEvent(new CustomEvent("spui-toolbar-radio-select", { bubbles: true, composed: true, detail: { name: this.getAttribute("name") ?? "", value: this.getAttribute("value") ?? "", sourceEvent: event, currentTarget: event.currentTarget } }));
-            });
-            const style = document.createElement("style");
-            style.textContent = `${buttonControlCss}:host{display:inline-block;vertical-align:middle}`;
-            shadow.append(style, button);
-            this.sync();
-        }
-    }
-    customElements.define("spui-toolbar-radio-button", SpuiToolbarRadioButton);
-}
-export function defineToolbar() {
-    if (customElements.get("spui-toolbar"))
-        return;
-    defineToolbarGroup();
-    defineToolbarSeparator();
-    defineToolbarRadioGroup();
-    defineToolbarRadioButton();
-    class SpuiToolbar extends HTMLElement {
-        static observedAttributes = ["label", "orientation", "vertical", "loop", "size"];
-        observer;
-        events;
-        observedShadowRoots = new WeakSet();
-        syncFrame = 0;
-        controlledCheckedValues;
-        uncontrolledCheckedValues = {};
-        get checkedValues() { return this.controlledCheckedValues; }
-        set checkedValues(value) {
-            if (value === undefined) {
-                if (this.controlledCheckedValues)
-                    this.uncontrolledCheckedValues = this.controlledCheckedValues;
-                this.controlledCheckedValues = undefined;
-            }
-            else
-                this.controlledCheckedValues = value;
-            this.syncRadioButtons();
-        }
-        get defaultCheckedValues() { return this.uncontrolledCheckedValues; }
-        set defaultCheckedValues(value) { if (!this.controlledCheckedValues && value)
-            this.uncontrolledCheckedValues = value; this.syncRadioButtons(); }
-        get selectedValues() { return this.controlledCheckedValues ?? this.uncontrolledCheckedValues; }
-        connectedCallback() {
-            if (!this.shadowRoot)
-                this.render();
-            this.observer?.disconnect();
-            this.observer = new MutationObserver(() => this.scheduleSync());
-            const changes = { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled", "hidden", "aria-disabled"] };
-            this.observer.observe(this, changes);
-            for (let parent = this.parentElement; parent; parent = parent.parentElement)
-                this.observer.observe(parent, { attributes: true, attributeFilter: ["disabled"] });
-            this.observeShadowRoots(this);
-            this.events?.abort();
-            this.events = new AbortController();
-            this.addEventListener("keydown", this.onKeyDown, { signal: this.events.signal });
-            this.addEventListener("focusin", this.onFocusIn, { signal: this.events.signal });
-            this.addEventListener("spui-toolbar-radio-select", this.onRadioSelect, { signal: this.events.signal });
-            this.addEventListener("spui-checked-change", this.onToggleChange, { signal: this.events.signal });
-            this.sync();
-            this.scheduleSync();
-        }
-        disconnectedCallback() { this.observer?.disconnect(); this.observedShadowRoots = new WeakSet(); this.events?.abort(); cancelAnimationFrame(this.syncFrame); this.syncFrame = 0; }
-        attributeChangedCallback() { if (this.isConnected)
-            this.sync(); }
-        items() {
-            const result = [];
-            const visit = (nodes) => {
-                for (const child of nodes) {
-                    if (child instanceof HTMLSlotElement) {
-                        const assigned = child.assignedNodes({ flatten: true });
-                        visit(assigned.length ? assigned : child.childNodes);
-                        continue;
-                    }
-                    if (!(child instanceof HTMLElement))
-                        continue;
-                    if (child.matches(itemSelector) && !child.matches(":disabled") && !child.closest("[hidden], [inert]") && child.getAttribute("aria-disabled") !== "true")
-                        result.push(child);
-                    visit(child.shadowRoot?.childNodes ?? child.childNodes);
-                }
-            };
-            const slot = this.shadowRoot?.querySelector("slot");
-            if (slot) {
-                const assigned = slot.assignedNodes({ flatten: true });
-                visit(assigned.length ? assigned : slot.childNodes);
-            }
-            else
-                visit(this.childNodes);
-            return result;
-        }
-        scheduleSync() {
-            if (this.syncFrame)
-                return;
-            this.syncFrame = requestAnimationFrame(() => { this.syncFrame = 0; if (this.isConnected)
-                this.sync(); });
-        }
-        syncItems() {
-            const items = this.items();
-            const active = items.find(item => item === this.shadowRoot?.activeElement || item === this.ownerDocument.activeElement || item.matches(":focus"));
-            const remembered = items.find(item => item.dataset.toolbarFocus === "true");
-            const initial = items[0];
-            const current = active ?? remembered ?? initial;
-            for (const item of items) {
-                item.tabIndex = item === current ? 0 : -1;
-                item.dataset.toolbarFocus = String(item === current);
-            }
-        }
-        observeShadowRoots(root) {
-            const visit = (node) => {
-                if (node instanceof HTMLElement && node.shadowRoot) {
-                    const shadow = node.shadowRoot;
-                    if (!this.observedShadowRoots.has(shadow)) {
-                        this.observer?.observe(shadow, { childList: true, subtree: true, attributes: true, attributeFilter: ["disabled", "hidden", "aria-disabled"] });
-                        this.observedShadowRoots.add(shadow);
-                    }
-                    for (const child of shadow.childNodes)
-                        visit(child);
-                }
-                for (const child of node.childNodes)
-                    visit(child);
-            };
-            for (const child of root.childNodes)
-                visit(child);
-        }
-        onFocusIn = (event) => {
-            const items = this.items();
-            const target = event.composedPath().find(node => node instanceof HTMLElement && items.includes(node));
-            if (!target)
-                return;
-            for (const item of items) {
-                item.tabIndex = item === target ? 0 : -1;
-                item.dataset.toolbarFocus = String(item === target);
-            }
-        };
-        onKeyDown = (event) => {
-            if (event.altKey || event.ctrlKey || event.metaKey)
-                return;
-            const items = this.items();
-            const current = event.composedPath().find(node => node instanceof HTMLElement && items.includes(node));
-            if (!current)
-                return;
-            const vertical = this.getAttribute("orientation") === "vertical";
-            const rtl = getComputedStyle(this).direction === "rtl";
-            const nextKey = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
-            const previousKey = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
-            const index = items.indexOf(current);
-            let next;
-            const loop = this.getAttribute("loop") !== "false";
-            if (event.key === nextKey)
-                next = items[index + 1] ?? (loop ? items[0] : undefined);
-            else if (event.key === previousKey)
-                next = items[index - 1] ?? (loop ? items.at(-1) : undefined);
-            else if (event.key === "Home")
-                next = items[0];
-            else if (event.key === "End")
-                next = items.at(-1);
-            if (!next)
-                return;
-            event.preventDefault();
-            for (const item of items) {
-                item.tabIndex = item === next ? 0 : -1;
-                item.dataset.toolbarFocus = String(item === next);
-            }
-            next.focus();
-        };
-        sync() {
-            this.observeShadowRoots(this);
-            const toolbar = this.shadowRoot?.querySelector("[role=toolbar]");
-            if (!toolbar)
-                return;
-            const orientation = this.hasAttribute("vertical") ? (this.getAttribute("vertical") === "false" ? "horizontal" : "vertical") : this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
-            toolbar.setAttribute("aria-orientation", orientation);
-            toolbar.setAttribute("aria-label", this.getAttribute("label") || this.getAttribute("aria-label") || "Toolbar");
-            toolbar.dataset.size = this.getAttribute("size") || "medium";
-            this.dataset.orientation = orientation;
-            for (const group of this.querySelectorAll("spui-toolbar-group"))
-                if (group.closest("spui-toolbar") === this)
-                    group.setAttribute("orientation", orientation);
-            for (const group of this.querySelectorAll("spui-toolbar-radio-group"))
-                if (group.closest("spui-toolbar") === this)
-                    group.setAttribute("orientation", orientation);
-            for (const button of this.querySelectorAll("spui-button,spui-toggle-button,spui-toolbar-radio-button")) {
-                if (button.closest("spui-toolbar") === this && !button.hasAttribute("size"))
-                    button.setAttribute("size", this.getAttribute("size") || "medium");
-            }
-            const separatorOrientation = orientation === "vertical" ? "horizontal" : "vertical";
-            for (const separator of this.querySelectorAll("spui-toolbar-separator"))
-                if (separator.closest("spui-toolbar") === this && !separator.hasAttribute("vertical"))
-                    separator.setAttribute("orientation", separatorOrientation);
-            this.syncItems();
-            this.syncRadioButtons();
-        }
-        syncRadioButtons() {
-            for (const button of this.querySelectorAll("spui-toolbar-radio-button")) {
-                if (button.closest("spui-toolbar") !== this)
-                    continue;
-                const name = button.getAttribute("name") ?? "";
-                const value = button.getAttribute("value") ?? "";
-                const checked = Boolean(name && value && this.selectedValues[name]?.includes(value));
-                button.toggleAttribute("checked", checked);
-                if (!button.hasAttribute("size") && this.hasAttribute("size"))
-                    button.setAttribute("size", this.getAttribute("size") ?? "medium");
-            }
-            for (const button of this.querySelectorAll("spui-toggle-button[name][value]")) {
-                if (button.closest("spui-toolbar") !== this)
-                    continue;
-                const name = button.getAttribute("name") ?? "";
-                const value = button.getAttribute("value") ?? "";
-                button.toggleAttribute("checked", Boolean(name && value && this.selectedValues[name]?.includes(value)));
-                if (!button.hasAttribute("size") && this.hasAttribute("size"))
-                    button.setAttribute("size", this.getAttribute("size") ?? "medium");
-            }
-        }
-        onRadioSelect = (event) => {
-            const { name, value, sourceEvent, currentTarget } = event.detail;
-            if (!name || !value)
-                return;
-            const checkedItems = [value];
-            if (!this.controlledCheckedValues)
-                this.uncontrolledCheckedValues = { ...this.uncontrolledCheckedValues, [name]: checkedItems };
-            this.syncRadioButtons();
-            this.dispatchEvent(new CustomEvent("spui-checked-value-change", { bubbles: true, composed: true, detail: { name, checkedItems, sourceEvent, currentTarget } }));
-        };
-        onToggleChange = (event) => {
-            const button = event.target;
-            if (!(button instanceof HTMLElement) || button.tagName.toLowerCase() !== "spui-toggle-button" || button.closest("spui-toolbar") !== this)
-                return;
-            const name = button.getAttribute("name") ?? "";
-            const value = button.getAttribute("value") ?? "";
-            if (!name || !value)
-                return;
-            const checked = new Set(this.selectedValues[name] ?? []);
-            if (event.detail.checked)
-                checked.add(value);
-            else
-                checked.delete(value);
-            const checkedItems = [...checked];
-            if (!this.controlledCheckedValues)
-                this.uncontrolledCheckedValues = { ...this.uncontrolledCheckedValues, [name]: checkedItems };
-            this.syncRadioButtons();
-            this.dispatchEvent(new CustomEvent("spui-checked-value-change", { bubbles: true, composed: true, detail: { name, checkedItems, sourceEvent: event.detail.sourceEvent, currentTarget: event.detail.currentTarget } }));
-        };
-        render() {
-            const shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `${base}:host{display:block;min-width:0}.toolbar{box-sizing:border-box;display:flex;align-items:center;gap:var(--spui-toolbar-gap,6px);min-width:0;max-width:100%;overflow:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;padding:var(--spui-toolbar-padding,4px);border:1px solid var(--spui-toolbar-border,var(--spui-ui-stroke,var(--colorNeutralStroke2,#e1dfdd)));border-radius:var(--spui-toolbar-radius,var(--spui-control-radius,6px));background:var(--spui-toolbar-background,var(--spui-ui-surface,var(--colorNeutralBackground1,#fff)));color:var(--spui-ui-text,var(--colorNeutralForeground1,#242424));font:inherit}.toolbar:focus-within{outline:var(--spui-toolbar-focus-outline,none)}:host([orientation=vertical]) .toolbar{flex-direction:column;align-items:stretch;width:max-content;max-width:100%;max-height:100%;overflow:auto;overflow-x:hidden}@media(forced-colors:active){.toolbar{border-color:CanvasText;background:Canvas}::slotted(*){forced-color-adjust:auto}}`;
-            const toolbar = document.createElement("div");
-            toolbar.className = "toolbar";
-            toolbar.setAttribute("role", "toolbar");
-            toolbar.setAttribute("part", "control");
-            toolbar.tabIndex = -1;
-            toolbar.append(document.createElement("slot"));
-            shadow.append(style, toolbar);
-            this.sync();
-        }
-    }
-    customElements.define("spui-toolbar", SpuiToolbar);
-}

package/dist/elements/tooltip.d.ts

@@ -1,76 +0,0 @@
-import { type FloatingAlign, type FloatingPlacement } from "./floating-position.js";
-export type TooltipRelationship = "label" | "description" | "inaccessible";
-export type TooltipAppearance = "normal" | "inverted";
-export type TooltipVisibleChangeData = {
-    visible: boolean;
-    documentKeyboardEvent?: KeyboardEvent;
-};
-export type TooltipPosition = FloatingPlacement | "above" | "below" | "before" | "after";
-export type TooltipPositioningShorthand = "above" | "above-start" | "above-end" | "below" | "below-start" | "below-end" | "before" | "before-top" | "before-bottom" | "after" | "after-top" | "after-bottom";
-export type TooltipPositioningRect = {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-};
-export type TooltipPositioningTargetRect = TooltipPositioningRect & Pick<DOMRectReadOnly, "top" | "left" | "bottom" | "right">;
-export type TooltipPositioningTarget = HTMLElement | {
-    getBoundingClientRect: () => TooltipPositioningTargetRect;
-    contextElement?: Element;
-};
-export type TooltipPositioningBoundary = TooltipPositioningRect | HTMLElement | HTMLElement[] | "clippingParents" | "scrollParent" | "window" | null;
-export type TooltipPositioningOffsetParams = {
-    positionedRect: TooltipPositioningRect;
-    targetRect: TooltipPositioningRect;
-    position: "above" | "below" | "before" | "after";
-    alignment?: FloatingAlign;
-};
-export type TooltipPositioningOffset = number | {
-    mainAxis: number;
-    crossAxis?: number;
-} | ((params: TooltipPositioningOffsetParams) => number | {
-    mainAxis: number;
-    crossAxis?: number;
-});
-export type TooltipPositioningPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
-export type TooltipPositioningEndData = {
-    placement: TooltipPositioningPlacement;
-    escaped: boolean;
-    referenceHidden: boolean;
-};
-export type TooltipPositioningImperativeRef = {
-    updatePosition: () => void;
-    setTarget: (target: TooltipPositioningTarget | null) => void;
-};
-export type TooltipPositioningRef = {
-    readonly current: TooltipPositioningImperativeRef | null;
-} | ((value: TooltipPositioningImperativeRef | null) => void) | null;
-export type TooltipPositioningOptions = {
-    align?: FloatingAlign;
-    arrowPadding?: number;
-    autoSize?: boolean | "always" | "width" | "width-always" | "height" | "height-always";
-    coverTarget?: boolean;
-    fallbackPositions?: TooltipPositioningShorthand[];
-    flipBoundary?: TooltipPositioningBoundary;
-    matchTargetSize?: "width";
-    offset?: TooltipPositioningOffset;
-    onPositioningEnd?: (event: CustomEvent<TooltipPositioningEndData>) => void;
-    overflowBoundary?: TooltipPositioningBoundary;
-    overflowBoundaryPadding?: number | Partial<{
-        top: number;
-        end: number;
-        bottom: number;
-        start: number;
-    }>;
-    pinned?: boolean;
-    position?: TooltipPosition;
-    positionFixed?: boolean;
-    positioningRef?: TooltipPositioningRef;
-    shiftToCoverTarget?: boolean;
-    strategy?: "absolute" | "fixed";
-    target?: TooltipPositioningTarget | null;
-    useTransform?: boolean;
-    disableUpdateOnResize?: boolean;
-};
-export type TooltipPositioning = TooltipPosition | TooltipPositioningShorthand | TooltipPositioningOptions;
-export declare function defineTooltip(): void;