@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/theme.js

@@ -1,167 +1,41 @@
-import { getSharePointUIStyleTokens } from "./appearance.js";
-/** Compose reusable theme packs left-to-right; later packs override earlier values within each group. */
-export function composeSharePointUIDesignThemes(...themes) {
-    return themes.reduce((merged, theme) => ({
-        ...merged,
-        ...theme,
-        palette: { ...merged.palette, ...theme?.palette },
-        fluentTokens: { ...merged.fluentTokens, ...theme?.fluentTokens },
-        colors: { ...merged.colors, ...theme?.colors },
-        typography: { ...merged.typography, ...theme?.typography },
-        spacing: { ...merged.spacing, ...theme?.spacing },
-        shape: { ...merged.shape, ...theme?.shape },
-        elevation: { ...merged.elevation, ...theme?.elevation },
-        materials: { ...merged.materials, ...theme?.materials },
-        motion: { ...merged.motion, ...theme?.motion },
-        layers: { ...merged.layers, ...theme?.layers },
-        customProperties: { ...merged.customProperties, ...theme?.customProperties }
-    }), {});
-}
-const designTokenMap = {
-    "colors.accent": "--spui-ui-accent", "colors.accentHover": "--spui-ui-accent-hover", "colors.accentPressed": "--spui-ui-accent-pressed",
-    "colors.accentSubtle": "--spui-ui-accent-subtle", "colors.accentSubtleHover": "--spui-ui-accent-subtle-hover", "colors.accentSubtlePressed": "--spui-ui-accent-subtle-pressed", "colors.accentForeground": "--spui-ui-accent-text", "colors.secondaryHover": "--spui-button-secondary-hover",
-    "colors.foreground": "--spui-ui-text", "colors.foregroundMuted": "--spui-ui-muted", "colors.foregroundTertiary": "--spui-ui-text-muted", "colors.foregroundSubtle": "--spui-ui-foreground-subtle",
-    "colors.foregroundDisabled": "--spui-ui-foreground-disabled", "colors.canvas": "--spui-ui-canvas",
-    "colors.surface": "--spui-ui-surface", "colors.surfaceHover": "--spui-ui-surface-hover", "colors.surfaceAlt": "--spui-ui-surface-alt", "colors.surfaceSecondary": "--spui-ui-surface-secondary", "colors.surfaceSubtle": "--spui-ui-surface-subtle", "colors.surfaceRaised": "--spui-ui-surface-raised",
-    "colors.surfaceSunken": "--spui-ui-surface-sunken", "colors.border": "--spui-ui-stroke", "colors.borderSubtle": "--spui-ui-border-subtle",
-    "colors.borderStrong": "--spui-ui-border-strong", "colors.borderFocus": "--spui-ui-border-focus", "colors.borderDisabled": "--spui-ui-border-disabled",
-    "colors.selectedBackground": "--spui-selection-background", "colors.selectedBackgroundHover": "--spui-selection-background-hover", "colors.selectedForeground": "--spui-selection-foreground",
-    "colors.selectedBorder": "--spui-selection-border", "colors.link": "--spui-link-color", "colors.linkVisited": "--spui-link-visited", "colors.overlay": "--spui-overlay-scrim",
-    "colors.info": "--spui-ui-info", "colors.infoSurface": "--spui-ui-info-surface",
-    "colors.success": "--spui-ui-success", "colors.successSurface": "--spui-ui-success-surface", "colors.warning": "--spui-ui-warning",
-    "colors.warningSurface": "--spui-ui-warning-surface", "colors.danger": "--spui-ui-danger", "colors.dangerSurface": "--spui-ui-danger-surface", "colors.focus": "--spui-ui-focus", "colors.focusRing": "--spui-focus-ring",
-    "typography.fontFamily": "--spui-font-family", "typography.fontFamilyMono": "--spui-font-family-mono",
-    "typography.fontSize": "--spui-text-font-size", "typography.fontSizeSmall": "--spui-text-font-size-small",
-    "typography.fontSizeLarge": "--spui-text-font-size-large", "typography.fontSizeHeading": "--spui-text-font-size-heading",
-    "typography.fontWeight": "--spui-text-font-weight", "typography.fontWeightStrong": "--spui-text-font-weight-strong",
-    "typography.lineHeight": "--spui-text-line-height", "typography.lineHeightHeading": "--spui-text-line-height-heading",
-    "typography.fontSize100": "--fontSizeBase100", "typography.fontSize200": "--fontSizeBase200", "typography.fontSize300": "--fontSizeBase300",
-    "typography.fontSize400": "--fontSizeBase400", "typography.fontSize500": "--fontSizeBase500", "typography.fontSize600": "--fontSizeBase600",
-    "typography.fontSize700": "--fontSizeHero700", "typography.fontSize800": "--fontSizeHero800", "typography.fontSize900": "--fontSizeHero900", "typography.fontSize1000": "--fontSizeHero1000",
-    "typography.fontSize1100": "--spui-text-font-size-1100", "typography.fontSize1200": "--spui-text-font-size-1200",
-    "typography.lineHeight100": "--lineHeightBase100", "typography.lineHeight200": "--lineHeightBase200", "typography.lineHeight300": "--lineHeightBase300",
-    "typography.lineHeight400": "--lineHeightBase400", "typography.lineHeight500": "--lineHeightBase500", "typography.lineHeight600": "--lineHeightBase600",
-    "typography.lineHeight700": "--lineHeightHero700", "typography.lineHeight800": "--lineHeightHero800", "typography.lineHeight900": "--lineHeightHero900", "typography.lineHeight1000": "--lineHeightHero1000",
-    "typography.lineHeight1100": "--spui-text-line-height-1100", "typography.lineHeight1200": "--spui-text-line-height-1200",
-    "typography.fontWeightRegular": "--fontWeightRegular", "typography.fontWeightMedium": "--fontWeightMedium",
-    "typography.fontWeightSemibold": "--fontWeightSemibold", "typography.fontWeightBold": "--fontWeightBold",
-    "typography.letterSpacing": "--spui-text-letter-spacing",
-    "spacing.controlHeight": "--spui-control-height", "spacing.controlGap": "--spui-control-gap", "spacing.controlPaddingInline": "--spui-control-padding-inline",
-    "spacing.controlPaddingBlock": "--spui-control-padding-block", "spacing.cardPadding": "--spui-card-padding", "spacing.fieldGap": "--spui-field-gap",
-    "spacing.sectionGap": "--spui-section-gap", "spacing.listGap": "--spui-list-gap", "spacing.touchTargetMin": "--spui-touch-target-min",
-    "shape.controlRadius": "--spui-control-radius", "shape.inputRadius": "--spui-input-radius", "shape.cardRadius": "--spui-card-radius",
-    "shape.surfaceRadius": "--spui-surface-radius", "shape.pillRadius": "--spui-pill-radius", "shape.focusRingWidth": "--spui-focus-ring-width",
-    "elevation.cardShadow": "--spui-card-shadow", "elevation.controlShadow": "--spui-control-shadow", "elevation.popoverShadow": "--spui-popover-shadow",
-    "elevation.overlayShadow": "--spui-overlay-shadow", "elevation.focusShadow": "--spui-focus-shadow",
-    "materials.glassBlur": "--spui-glass-blur", "materials.glassSaturation": "--spui-glass-saturation",
-    "materials.glassSurfaceOpacity": "--spui-glass-surface-opacity", "materials.glassCanvasOpacity": "--spui-glass-canvas-opacity", "materials.glassBorderOpacity": "--spui-glass-border-opacity",
-    "motion.durationFast": "--spui-motion-duration-fast", "motion.durationNormal": "--spui-motion-duration-normal", "motion.durationSlow": "--spui-motion-duration-slow",
-    "motion.easingStandard": "--spui-motion-easing-standard", "motion.easingEmphasized": "--spui-motion-easing-emphasized",
-    "layers.dropdown": "--spui-layer-dropdown", "layers.popover": "--spui-layer-popover", "layers.toast": "--spui-layer-toast"
+import { createContext, createElement, useContext } from "react";
+const defaults = {
+    accent: "#0f6cbd",
+    accentText: "#ffffff",
+    background: "#f5f5f5",
+    border: "#d1d1d1",
+    radius: "4px",
+    surface: "#ffffff",
+    text: "#242424",
+    muted: "#616161",
 };
-export function getSharePointUIDesignTokens(theme) {
-    const accent = theme?.colors?.accent ?? theme?.brandColor ?? theme?.palette?.themePrimary;
-    const result = {};
-    for (const [name, value] of Object.entries(theme?.palette ?? {})) {
-        if (value !== undefined)
-            result[`--spui-palette-${toKebab(name)}`] = String(value);
-    }
-    for (const [name, value] of Object.entries(theme?.fluentTokens ?? {})) {
-        if (value !== undefined && (typeof value === "string" || typeof value === "number")) {
-            result[name.startsWith("--") ? name : `--${name}`] = String(value);
-        }
-    }
-    if (accent)
-        Object.assign(result, {
-            "--spui-ui-accent": accent,
-            "--spui-ui-accent-hover": `color-mix(in srgb, ${accent} 84%, black)`,
-            "--spui-selection-background": `color-mix(in srgb, ${accent} 14%, var(--spui-ui-surface))`,
-            "--spui-selection-border": accent,
-            "--spui-link-color": `var(--spui-semantic-link, color-mix(in srgb, ${accent} 55%, var(--spui-ui-text) 45%))`,
-            "--spui-focus-ring": "var(--spui-ui-border-focus)",
-            "--spui-ui-info": accent,
-            "--spui-ui-info-surface": `color-mix(in srgb, ${accent} 12%, var(--spui-ui-surface))`,
-            "--spui-primary-background": accent,
-            "--spui-primary-hover": `color-mix(in srgb, ${accent} 84%, black)`
-        });
-    if (accent && !theme?.colors?.accentForeground) {
-        const hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(accent)?.[1];
-        if (hex) {
-            const normalized = hex.length === 3 ? [...hex].map(value => value + value).join("") : hex;
-            const channels = normalized.match(/[\da-f]{2}/gi).map(value => Number.parseInt(value, 16) / 255).map(value => value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4);
-            const luminance = channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
-            result["--spui-ui-accent-text"] = luminance > 0.179 ? "#000000" : "#ffffff";
-        }
-    }
-    for (const [group, values] of Object.entries(theme ?? {})) {
-        if (group === "brandColor" || group === "palette" || group === "customProperties")
-            continue;
-        for (const [name, value] of Object.entries(values ?? {})) {
-            if (value !== undefined) {
-                const token = designTokenMap[`${group}.${name}`];
-                if (token)
-                    result[token] = String(value);
-            }
+const sharePointVars = {
+    accent: "--themePrimary",
+    accentText: "--white",
+    background: "--neutralLighterAlt",
+    border: "--neutralQuaternaryAlt",
+    surface: "--white",
+    text: "--neutralPrimary",
+    muted: "--neutralSecondary",
+};
+const ThemeContext = createContext(defaults);
+export function createSharePointTheme(overrides = {}) {
+    const inherited = {};
+    if (typeof document !== "undefined") {
+        const style = getComputedStyle(document.documentElement);
+        for (const [token, variable] of Object.entries(sharePointVars)) {
+            const value = style.getPropertyValue(variable).trim();
+            if (value)
+                inherited[token] = value;
         }
     }
-    // App-specific properties are the final design-pack layer; direct provider tokens still win later.
-    for (const [name, value] of Object.entries(theme?.customProperties ?? {})) {
-        if (name.startsWith("--") && name.length > 2)
-            result[name] = String(value);
-    }
-    return result;
+    return { ...defaults, ...inherited, ...overrides };
 }
-const appliedProperties = new WeakMap();
-const toKebab = (key) => key.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
-export function applySharePointTheme(target, theme, fluentTokens, options = {}) {
-    const style = target.style;
-    for (const name of appliedProperties.get(target) ?? [])
-        style.removeProperty(name);
-    const names = new Set();
-    if (theme) {
-        for (const [group, values] of Object.entries({ palette: theme.palette, semantic: theme.semanticColors })) {
-            for (const [name, value] of Object.entries(values ?? {})) {
-                if (!value)
-                    continue;
-                const property = `--spui-${group}-${toKebab(name)}`;
-                style.setProperty(property, value);
-                names.add(property);
-            }
-        }
-        for (const [group, values] of Object.entries({ effects: theme.effects, spacing: theme.spacing, "default-font-style": theme.defaultFontStyle })) {
-            for (const [name, value] of Object.entries(values ?? {})) {
-                if (typeof value !== "string" && typeof value !== "number")
-                    continue;
-                const property = `--spui-${group}-${toKebab(name)}`;
-                style.setProperty(property, String(value));
-                names.add(property);
-            }
-        }
-        for (const [name, values] of Object.entries(theme.fonts ?? {})) {
-            for (const [propertyName, value] of Object.entries(values ?? {})) {
-                if (typeof value !== "string" && typeof value !== "number")
-                    continue;
-                const property = `--spui-fonts-${toKebab(name)}-${toKebab(propertyName)}`;
-                style.setProperty(property, String(value));
-                names.add(property);
-            }
-        }
-        style.setProperty("--spui-is-inverted", theme.isInverted ? "1" : "0");
-        names.add("--spui-is-inverted");
-    }
-    for (const [name, value] of Object.entries(fluentTokens ?? {})) {
-        if (typeof value !== "string" && typeof value !== "number")
-            continue;
-        const property = name.startsWith("--") ? name : `--${name}`;
-        style.setProperty(property, String(value));
-        names.add(property);
-    }
-    target.dataset.spuiAppearance = options.appearance ?? "fluent";
-    const styleTokens = getSharePointUIStyleTokens(options.appearance, { ...getSharePointUIDesignTokens(options.theme), ...options.tokens }, options.baseAppearance, options.density);
-    for (const [property, value] of Object.entries(styleTokens)) {
-        style.setProperty(property, String(value));
-        names.add(property);
-    }
-    style.colorScheme = String(styleTokens["--spui-color-scheme"] ?? "light");
-    appliedProperties.set(target, names);
+export function SharePointThemeProvider({ children, theme, }) {
+    const value = createSharePointTheme(theme);
+    const style = Object.fromEntries(Object.entries(theme ?? {}).map(([key, token]) => [`--spui-${key}`, token]));
+    return createElement(ThemeContext.Provider, { value }, createElement("div", { className: "spui-theme", style }, children));
+}
+export function useSharePointTheme() {
+    return useContext(ThemeContext);
 }

package/dist/toast.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    open: boolean;
+    message: ReactNode;
+    durationMs?: number;
+    dismissLabel?: string;
+    onDismiss: () => void;
+};
+export declare function Toast({ open, message, durationMs, dismissLabel, onDismiss, className, ...props }: ToastProps): ReactElement | null;

package/dist/toast.js

@@ -0,0 +1,12 @@
+import { createElement, useEffect } from "react";
+export function Toast({ open, message, durationMs = 5000, dismissLabel = "Dismiss", onDismiss, className = "", ...props }) {
+    useEffect(() => {
+        if (!open || durationMs <= 0)
+            return;
+        const timer = setTimeout(onDismiss, durationMs);
+        return () => clearTimeout(timer);
+    }, [open, durationMs, onDismiss]);
+    if (!open)
+        return null;
+    return createElement("div", { ...props, role: "status", "aria-live": "polite", className: `spui-toast ${className}`.trim() }, createElement("span", null, message), createElement("button", { type: "button", "aria-label": dismissLabel, onClick: onDismiss }, dismissLabel));
+}

package/dist/tree.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type TreeNode = {
+    id: string;
+    label: ReactNode;
+    href?: string;
+    children?: readonly TreeNode[];
+    defaultOpen?: boolean;
+};
+export type TreeProps = Omit<HTMLAttributes<HTMLUListElement>, "children" | "aria-label"> & {
+    label: string;
+    items: readonly TreeNode[];
+};
+export declare function Tree({ label, items, className, ...props }: TreeProps): ReactElement;

package/dist/tree.js

@@ -0,0 +1,9 @@
+import { createElement } from "react";
+function renderNodes(nodes) {
+    return nodes.map(node => createElement("li", { key: node.id }, node.children?.length
+        ? createElement("details", { open: node.defaultOpen }, createElement("summary", null, node.href ? createElement("a", { href: node.href }, node.label) : node.label), createElement("ul", null, renderNodes(node.children)))
+        : node.href ? createElement("a", { href: node.href }, node.label) : node.label));
+}
+export function Tree({ label, items, className = "", ...props }) {
+    return createElement("ul", { ...props, "aria-label": label, className: `spui-tree ${className}`.trim() }, renderNodes(items));
+}

package/dist/view-card.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type ViewCardProps = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+};
+export declare function ViewCard({ title, subtitle, description, className, children, ...props }: ViewCardProps): ReactElement;

package/dist/view-card.js

@@ -0,0 +1,4 @@
+import { createElement } from "react";
+export function ViewCard({ title, subtitle, description, className = "", children, ...props }) {
+    return createElement("article", { ...props, className: `spui-view-card ${className}`.trim() }, createElement("h2", null, title), subtitle && createElement("p", { className: "spui-view-subtitle" }, subtitle), description && createElement("p", null, description), children);
+}

package/dist/view-switcher.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactElement } from "react";
+export type ViewOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type ViewSwitcherProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "aria-label"> & {
+    label: string;
+    value: string;
+    views: readonly ViewOption[];
+    onChange: (value: string) => void;
+};
+export declare function ViewSwitcher({ label, value, views, onChange, className, ...props }: ViewSwitcherProps): ReactElement;

package/dist/view-switcher.js

@@ -0,0 +1,7 @@
+import { createElement } from "react";
+export function ViewSwitcher({ label, value, views, onChange, className = "", ...props }) {
+    return createElement("div", { ...props, role: "group", "aria-label": label, className: `spui-view-switcher ${className}`.trim() }, views.map(view => createElement("button", {
+        key: view.value, type: "button", disabled: view.disabled,
+        "aria-pressed": value === view.value, onClick: () => onChange(view.value),
+    }, view.label)));
+}

package/dist/virtual-list.d.ts

@@ -0,0 +1,11 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+export type VirtualListProps<Item> = Omit<HTMLAttributes<HTMLDivElement>, "children" | "aria-label"> & {
+    label: string;
+    items: readonly Item[];
+    itemHeight: number;
+    height: number;
+    getItemKey: (item: Item, index: number) => string;
+    renderItem: (item: Item, index: number) => ReactNode;
+    overscan?: number;
+};
+export declare function VirtualList<Item>({ label, items, itemHeight, height, getItemKey, renderItem, overscan, className, style, ...props }: VirtualListProps<Item>): ReactElement;

package/dist/virtual-list.js

@@ -0,0 +1,25 @@
+import { createElement, useState } from "react";
+export function VirtualList({ label, items, itemHeight, height, getItemKey, renderItem, overscan = 3, className = "", style, ...props }) {
+    const [scrollTop, setScrollTop] = useState(0);
+    const rowHeight = Math.max(1, itemHeight);
+    const viewportHeight = Math.max(1, height);
+    const extra = Math.max(0, Math.floor(overscan));
+    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - extra);
+    const end = Math.min(items.length, start + Math.ceil(viewportHeight / rowHeight) + extra * 2);
+    const onScroll = (event) => setScrollTop(event.currentTarget.scrollTop);
+    return createElement("div", {
+        ...props,
+        role: "list",
+        "aria-label": label,
+        tabIndex: 0,
+        className: `spui-virtual-list ${className}`.trim(),
+        style: { ...style, height: viewportHeight, overflowY: "auto" },
+        onScroll,
+    }, createElement("div", { role: "presentation", "aria-hidden": true, style: { height: start * rowHeight } }), items.slice(start, end).map((item, offset) => {
+        const index = start + offset;
+        return createElement("div", {
+            key: getItemKey(item, index), role: "listitem", "aria-posinset": index + 1, "aria-setsize": items.length,
+            className: "spui-virtual-list-item", style: { height: rowHeight },
+        }, renderItem(item, index));
+    }), createElement("div", { role: "presentation", "aria-hidden": true, style: { height: (items.length - end) * rowHeight } }));
+}