baseline-foundry 0.1.3

package/dist/interactive-tables.js

@@ -0,0 +1,184 @@
+const SORT_BUTTON_SELECTOR = ".bf-table.is-sortable th[aria-sort] > .bf-table-sort-button";
+const EXPAND_BUTTON_SELECTOR = ".bf-table.is-expanding .bf-table-expand-toggle[aria-controls]";
+const MOBILE_CARD_TABLE_SELECTOR = ".bf-table.is-mobile-card";
+const SORT_DIRECTIONS = ["none", "ascending", "descending"];
+function closestButton(target, selector) {
+    if (!(target instanceof Element)) {
+        return null;
+    }
+    return target.closest(selector);
+}
+function nextSortDirection(value) {
+    const currentIndex = SORT_DIRECTIONS.indexOf(value);
+    return SORT_DIRECTIONS[(currentIndex + 1 + SORT_DIRECTIONS.length) % SORT_DIRECTIONS.length];
+}
+function sortableHeader(button) {
+    const header = button.closest("th[aria-sort]");
+    return header?.closest("table")?.classList.contains("is-sortable") ? header : null;
+}
+function directRows(body) {
+    return Array.from(body.children).filter((child) => child instanceof HTMLTableRowElement);
+}
+function defaultCompare(locale) {
+    const collator = new Intl.Collator(locale, { numeric: true, sensitivity: "base" });
+    return (valueA, valueB) => collator.compare(valueA, valueB);
+}
+function cellValue(row, columnIndex) {
+    const cell = row.cells.item(columnIndex);
+    if (!cell) {
+        return "";
+    }
+    return Array.from(cell.childNodes)
+        .filter(node => !(node instanceof Element && node.classList.contains("bf-table-card-label")))
+        .map(node => node.textContent ?? "")
+        .join(" ")
+        .trim();
+}
+export function initSortableTables(options = {}) {
+    const root = options.root ?? document;
+    const compare = options.compare ?? defaultCompare(options.locale);
+    const originalOrder = new WeakMap();
+    for (const table of Array.from(root.querySelectorAll(".bf-table.is-sortable"))) {
+        for (const body of Array.from(table.tBodies)) {
+            originalOrder.set(body, directRows(body));
+        }
+    }
+    const onClick = (event) => {
+        const button = closestButton(event.target, SORT_BUTTON_SELECTOR);
+        if (!button || !root.contains(button)) {
+            return;
+        }
+        const header = sortableHeader(button);
+        const table = header?.closest("table.bf-table.is-sortable");
+        if (!header || !table) {
+            return;
+        }
+        const columnIndex = header.cellIndex;
+        const direction = nextSortDirection(header.getAttribute("aria-sort"));
+        for (const sortable of Array.from(table.querySelectorAll("th[aria-sort]"))) {
+            sortable.setAttribute("aria-sort", "none");
+        }
+        header.setAttribute("aria-sort", direction);
+        for (const body of Array.from(table.tBodies)) {
+            const initialRows = originalOrder.get(body) ?? directRows(body);
+            originalOrder.set(body, initialRows);
+            const initialIndex = new Map(initialRows.map((row, index) => [row, index]));
+            const rows = direction === "none" ? [...initialRows] : directRows(body).map((row, index) => ({ row, index }));
+            if (direction !== "none") {
+                const context = { columnIndex, direction, table };
+                const multiplier = direction === "ascending" ? 1 : -1;
+                rows.sort((entryA, entryB) => {
+                    if (!("row" in entryA) || !("row" in entryB)) {
+                        return 0;
+                    }
+                    const result = compare(cellValue(entryA.row, columnIndex), cellValue(entryB.row, columnIndex), context);
+                    return result === 0 ? entryA.index - entryB.index : result * multiplier;
+                });
+            }
+            for (const entry of rows) {
+                const row = entry instanceof HTMLTableRowElement ? entry : entry.row;
+                body.append(row);
+            }
+            if (direction === "none") {
+                for (const row of directRows(body)) {
+                    if (!initialIndex.has(row)) {
+                        body.append(row);
+                    }
+                }
+            }
+        }
+    };
+    root.addEventListener("click", onClick);
+    return () => root.removeEventListener("click", onClick);
+}
+function controlledExpansionRow(button) {
+    const id = button.getAttribute("aria-controls");
+    const table = button.closest("table.bf-table.is-expanding");
+    if (!id || !table) {
+        return null;
+    }
+    const row = button.ownerDocument.getElementById(id);
+    return row instanceof HTMLTableRowElement && row.classList.contains("bf-table-expanding-row") && row.closest("table") === table
+        ? row
+        : null;
+}
+function expansionLabel(button) {
+    return button.querySelector(".bf-table-expand-toggle-label");
+}
+function syncExpansion(button, row, expanded, defaultExpandedLabel, defaultCollapsedLabel) {
+    button.setAttribute("aria-expanded", String(expanded));
+    row.hidden = !expanded;
+    row.setAttribute("aria-hidden", String(!expanded));
+    const label = expansionLabel(button);
+    if (label) {
+        label.textContent = expanded
+            ? button.getAttribute("data-bf-expanded-label")?.trim() || defaultExpandedLabel
+            : button.getAttribute("data-bf-collapsed-label")?.trim() || defaultCollapsedLabel;
+    }
+}
+export function initExpandingTables(options = {}) {
+    const root = options.root ?? document;
+    const expandedLabel = options.expandedLabel ?? "Hide details";
+    const collapsedLabel = options.collapsedLabel ?? "Show details";
+    for (const button of Array.from(root.querySelectorAll(EXPAND_BUTTON_SELECTOR))) {
+        const row = controlledExpansionRow(button);
+        if (row) {
+            syncExpansion(button, row, button.getAttribute("aria-expanded") === "true", expandedLabel, collapsedLabel);
+        }
+    }
+    const onClick = (event) => {
+        const button = closestButton(event.target, EXPAND_BUTTON_SELECTOR);
+        if (!button || !root.contains(button)) {
+            return;
+        }
+        const row = controlledExpansionRow(button);
+        if (!row) {
+            return;
+        }
+        event.preventDefault();
+        syncExpansion(button, row, button.getAttribute("aria-expanded") !== "true", expandedLabel, collapsedLabel);
+    };
+    root.addEventListener("click", onClick);
+    return () => root.removeEventListener("click", onClick);
+}
+export function initMobileCardTables(options = {}) {
+    const root = options.root ?? document;
+    const generatedLabels = [];
+    for (const table of Array.from(root.querySelectorAll(MOBILE_CARD_TABLE_SELECTOR))) {
+        const headingRow = table.tHead?.rows.item(table.tHead.rows.length - 1);
+        if (!headingRow) {
+            continue;
+        }
+        const headings = Array.from(headingRow.cells, heading => heading.textContent?.trim() ?? "");
+        for (const body of Array.from(table.tBodies)) {
+            for (const row of directRows(body)) {
+                for (const cell of Array.from(row.cells)) {
+                    let label = cell.querySelector(":scope > .bf-table-card-label");
+                    if (!label) {
+                        label = cell.ownerDocument.createElement("span");
+                        label.className = "bf-table-card-label";
+                        label.setAttribute("aria-hidden", "true");
+                        cell.prepend(label);
+                        generatedLabels.push(label);
+                    }
+                    label.textContent = headings[cell.cellIndex] ?? "";
+                }
+            }
+        }
+    }
+    return () => {
+        for (const label of generatedLabels) {
+            label.remove();
+        }
+    };
+}
+export function initInteractiveTables(options = {}) {
+    const disposeSorting = initSortableTables(options);
+    const disposeExpanding = initExpandingTables(options);
+    const disposeMobileCards = initMobileCardTables(options);
+    return () => {
+        disposeMobileCards();
+        disposeExpanding();
+        disposeSorting();
+    };
+}

package/dist/list-tree.d.ts

@@ -0,0 +1,4 @@
+export interface ListTreeInitOptions {
+    root?: ParentNode;
+}
+export declare function initListTree(options?: ListTreeInitOptions): () => void;

package/dist/list-tree.js

@@ -0,0 +1,44 @@
+const TOGGLE_SELECTOR = ".bf-list-tree-toggle";
+const ITEM_SELECTOR = ".bf-list-tree-item";
+const LIST_SELECTOR = ".bf-list-tree";
+function getNestedList(item, toggle) {
+    const listId = toggle.getAttribute("aria-controls");
+    if (listId) {
+        return toggle.ownerDocument.getElementById(listId);
+    }
+    for (const child of Array.from(item.children)) {
+        if (child instanceof HTMLElement && child.matches(LIST_SELECTOR)) {
+            return child;
+        }
+    }
+    return null;
+}
+export function initListTree(options = {}) {
+    const root = options.root ?? document;
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const toggle = target.closest(TOGGLE_SELECTOR);
+        if (!toggle) {
+            return;
+        }
+        const item = toggle.closest(ITEM_SELECTOR);
+        if (!item) {
+            return;
+        }
+        const isExpanded = toggle.getAttribute("aria-expanded") === "true" || item.getAttribute("aria-expanded") === "true";
+        const nextExpanded = String(!isExpanded);
+        item.setAttribute("aria-expanded", nextExpanded);
+        toggle.setAttribute("aria-expanded", nextExpanded);
+        const nestedList = getNestedList(item, toggle);
+        if (nestedList) {
+            nestedList.setAttribute("aria-hidden", String(isExpanded));
+        }
+    };
+    root.addEventListener("click", onClick);
+    return () => {
+        root.removeEventListener("click", onClick);
+    };
+}

package/dist/panel-drawer.d.ts

@@ -0,0 +1,4 @@
+export interface PanelDrawerInitOptions {
+    root?: ParentNode;
+}
+export declare function initPanelDrawers(options?: PanelDrawerInitOptions): () => void;

package/dist/panel-drawer.js

@@ -0,0 +1,171 @@
+const APPLICATION_SELECTOR = ".bf-application";
+const DRAWER_SELECTOR = ".bf-aside.is-overlay, .bf-aside.is-drawer";
+const TOGGLE_SELECTOR = "[data-panel-drawer-toggle]";
+const CLOSE_SELECTOR = "[data-panel-drawer-close]";
+const OVERLAY_SELECTOR = ".bf-application-overlay";
+const APPLICATION_OPEN_CLASS = "is-drawer-expanded";
+const DRAWER_OPEN_CLASS = "is-open";
+const lastTriggerByDrawer = new WeakMap();
+function queryAllWithinRoot(root, selector) {
+    const elements = Array.from(root.querySelectorAll(selector));
+    if (root instanceof Element && root.matches(selector)) {
+        elements.unshift(root);
+    }
+    return elements;
+}
+function getDrawers(root) {
+    return queryAllWithinRoot(root, DRAWER_SELECTOR);
+}
+function normalizeTargetId(value) {
+    if (!value) {
+        return null;
+    }
+    return value.startsWith("#") ? value.slice(1) : value;
+}
+function getApplication(drawer) {
+    return drawer.closest(APPLICATION_SELECTOR);
+}
+function getAssociatedToggles(root, drawer) {
+    return queryAllWithinRoot(root, TOGGLE_SELECTOR).filter(toggle => {
+        return resolveDrawer(toggle, root) === drawer;
+    });
+}
+function resolveDrawer(control, root) {
+    const targetId = normalizeTargetId(control.getAttribute("aria-controls")
+        ?? (control instanceof HTMLElement ? control.dataset.panelDrawerTarget ?? null : null));
+    if (targetId) {
+        const target = root.querySelector(`#${CSS.escape(targetId)}`);
+        if (target?.matches(DRAWER_SELECTOR)) {
+            return target;
+        }
+    }
+    const application = control.closest(APPLICATION_SELECTOR);
+    return application?.querySelector(DRAWER_SELECTOR) ?? null;
+}
+function updateToggles(root, drawer, expanded) {
+    for (const toggle of getAssociatedToggles(root, drawer)) {
+        toggle.setAttribute("aria-expanded", String(expanded));
+    }
+}
+function isOpen(drawer) {
+    const application = getApplication(drawer);
+    if (!application) {
+        return drawer.classList.contains(DRAWER_OPEN_CLASS);
+    }
+    return application.classList.contains(APPLICATION_OPEN_CLASS) || drawer.classList.contains(DRAWER_OPEN_CLASS);
+}
+function syncApplicationState(application) {
+    const hasOpenDrawer = Array.from(application.querySelectorAll(DRAWER_SELECTOR)).some(drawer => {
+        return drawer.classList.contains(DRAWER_OPEN_CLASS);
+    });
+    application.classList.toggle(APPLICATION_OPEN_CLASS, hasOpenDrawer);
+    const overlay = application.querySelector(OVERLAY_SELECTOR);
+    if (overlay) {
+        overlay.setAttribute("aria-hidden", String(!hasOpenDrawer));
+    }
+}
+function focusDrawer(drawer) {
+    const focusTarget = drawer.querySelector("[data-panel-drawer-autofocus], [data-panel-drawer-close], button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])");
+    if (focusTarget) {
+        queueMicrotask(() => focusTarget.focus());
+    }
+}
+function openDrawer(drawer, root, trigger) {
+    for (const otherDrawer of getDrawers(root)) {
+        if (otherDrawer !== drawer && isOpen(otherDrawer)) {
+            closeDrawer(otherDrawer, root, false);
+        }
+    }
+    drawer.classList.add(DRAWER_OPEN_CLASS);
+    drawer.setAttribute("aria-hidden", "false");
+    updateToggles(root, drawer, true);
+    const application = getApplication(drawer);
+    if (application) {
+        syncApplicationState(application);
+    }
+    if (trigger) {
+        lastTriggerByDrawer.set(drawer, trigger);
+    }
+    focusDrawer(drawer);
+}
+function closeDrawer(drawer, root, restoreFocus) {
+    drawer.classList.remove(DRAWER_OPEN_CLASS);
+    drawer.setAttribute("aria-hidden", "true");
+    updateToggles(root, drawer, false);
+    const application = getApplication(drawer);
+    if (application) {
+        syncApplicationState(application);
+    }
+    if (restoreFocus) {
+        lastTriggerByDrawer.get(drawer)?.focus();
+    }
+}
+function syncInitialState(root) {
+    for (const drawer of getDrawers(root)) {
+        drawer.setAttribute("aria-hidden", String(!isOpen(drawer)));
+        updateToggles(root, drawer, isOpen(drawer));
+        const application = getApplication(drawer);
+        if (application) {
+            syncApplicationState(application);
+        }
+    }
+}
+export function initPanelDrawers(options = {}) {
+    const root = options.root ?? document;
+    syncInitialState(root);
+    const onClick = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element)) {
+            return;
+        }
+        const toggle = target.closest(TOGGLE_SELECTOR);
+        if (toggle) {
+            const drawer = resolveDrawer(toggle, root);
+            if (!drawer) {
+                return;
+            }
+            if (isOpen(drawer)) {
+                closeDrawer(drawer, root, false);
+            }
+            else {
+                openDrawer(drawer, root, toggle);
+            }
+            event.preventDefault();
+            return;
+        }
+        const closeControl = target.closest(CLOSE_SELECTOR);
+        if (closeControl) {
+            const drawer = resolveDrawer(closeControl, root)
+                ?? closeControl.closest(DRAWER_SELECTOR);
+            if (drawer) {
+                closeDrawer(drawer, root, true);
+            }
+            event.preventDefault();
+            return;
+        }
+        const overlay = target.closest(OVERLAY_SELECTOR);
+        if (overlay) {
+            const application = overlay.closest(APPLICATION_SELECTOR);
+            const drawer = application?.querySelector(DRAWER_SELECTOR);
+            if (drawer) {
+                closeDrawer(drawer, root, true);
+            }
+        }
+    };
+    const onKeyDown = (event) => {
+        if (!(event instanceof KeyboardEvent) || event.key !== "Escape") {
+            return;
+        }
+        for (const drawer of getDrawers(root)) {
+            if (isOpen(drawer)) {
+                closeDrawer(drawer, root, true);
+            }
+        }
+    };
+    root.addEventListener("click", onClick);
+    root.addEventListener("keydown", onKeyDown);
+    return () => {
+        root.removeEventListener("click", onClick);
+        root.removeEventListener("keydown", onKeyDown);
+    };
+}