dustyui 1.0.2 → 2.0.0

package/dist/Tree/Tree.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import clsx from "clsx";
+import { getWindowItems } from "./getWindow.js";
+import { findVisibleAncestor, keyToAction, reduceTree, visibleRows, } from "./treeModel.js";
+import { useRowWindow } from "./useRowWindow.js";
+import { useTypeahead } from "./useTypeahead.js";
+import styles from "./Tree.module.css";
+const TAB_STOP = ':scope > [tabindex="0"]';
+const INTERACTIVE = [
+    "a[href]",
+    "button",
+    "input",
+    "select",
+    "textarea",
+    "summary",
+    "label",
+    '[role="button"]',
+    '[role="link"]',
+    '[role="checkbox"]',
+    '[role="switch"]',
+    '[contenteditable=""]',
+    '[contenteditable="true"]',
+    '[tabindex]:not([tabindex="-1"])',
+].join(",");
+function hasRow(rows, id) {
+    return id !== undefined && rows.some((row) => row.id === id);
+}
+function getSelected(rows, controlled, own) {
+    return hasRow(rows, controlled) ? controlled : own;
+}
+function isInsideControl(target, row) {
+    if (!(target instanceof Element)) {
+        return false;
+    }
+    const control = target.closest(INTERACTIVE);
+    return control !== null && control !== row && row.contains(control);
+}
+export function Tree({ root, label, renderRow, getRowText, expanded: controlledExpanded, defaultExpanded, onExpandedChange, selected: controlledSelected, onSelectedChange, className, onKeyDown, onFocus, onBlur, ref, ...props }) {
+    const [ownExpanded, setOwnExpanded] = useState(() => new Set(defaultExpanded));
+    const [ownSelected, setOwnSelected] = useState();
+    const element = useRef(null);
+    const focusAfterRender = useRef(false);
+    const hasFocusWithin = useRef(false);
+    const reported = useRef(controlledSelected);
+    const expanded = controlledExpanded ?? ownExpanded;
+    const rows = useMemo(() => visibleRows(root, expanded), [root, expanded]);
+    const [previousRows, setPreviousRows] = useState(rows);
+    if (previousRows !== rows) {
+        setPreviousRows(rows);
+        const before = getSelected(previousRows, controlledSelected, ownSelected);
+        if (before !== undefined && !hasRow(rows, before)) {
+            setOwnSelected(findVisibleAncestor(previousRows, before, rows));
+        }
+    }
+    const focused = getSelected(rows, controlledSelected, ownSelected);
+    const tabStop = useMemo(() => Math.max(0, rows.findIndex((row) => row.id === focused)), [rows, focused]);
+    const rowWindow = useRowWindow(element, rows.length);
+    const withTypedText = useTypeahead();
+    const scrolledTo = useRef(focused);
+    const notifySelected = useEffectEvent((id) => {
+        onSelectedChange?.(id);
+    });
+    useEffect(() => {
+        if (focused !== undefined &&
+            focused !== controlledSelected &&
+            focused !== reported.current) {
+            reported.current = focused;
+            notifySelected(focused);
+        }
+    }, [focused, controlledSelected]);
+    useImperativeHandle(ref, () => element.current);
+    useLayoutEffect(() => {
+        const container = element.current;
+        if (!container) {
+            return;
+        }
+        for (const child of container.children) {
+            if (!(child instanceof HTMLElement)) {
+                continue;
+            }
+            const gapRows = child.dataset.gapRows;
+            if (gapRows === undefined) {
+                child.style.setProperty("--tree-level", child.getAttribute("aria-level") ?? "1");
+            }
+            else {
+                child.style.setProperty("--tree-gap-rows", gapRows);
+            }
+        }
+        const lostFocus = hasFocusWithin.current && !container.contains(document.activeElement);
+        if (focusAfterRender.current || lostFocus) {
+            focusAfterRender.current = false;
+            const target = container.querySelector(TAB_STOP);
+            if (target instanceof HTMLElement) {
+                target.focus();
+            }
+        }
+        if (scrolledTo.current !== focused) {
+            scrolledTo.current = focused;
+            container
+                .querySelector(TAB_STOP)
+                ?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        }
+    });
+    function select(id) {
+        if (id === focused) {
+            return;
+        }
+        reported.current = id;
+        if (controlledSelected === undefined) {
+            setOwnSelected(id);
+        }
+        onSelectedChange?.(id);
+    }
+    function dispatch(action) {
+        const current = { expanded, focused: rows[tabStop]?.id };
+        const next = reduceTree(rows, current, action, getRowText);
+        if (next.expanded !== expanded) {
+            if (controlledExpanded === undefined) {
+                setOwnExpanded(next.expanded);
+            }
+            onExpandedChange?.(next.expanded);
+        }
+        if (next.focused !== undefined && next.focused !== focused) {
+            focusAfterRender.current = true;
+            select(next.focused);
+        }
+    }
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey ||
+            event.target !== event.currentTarget) {
+            return;
+        }
+        const action = keyToAction(event.key);
+        if (action) {
+            event.preventDefault();
+            dispatch(withTypedText(action, event.timeStamp));
+        }
+    }
+    function renderTreeRow(row, index) {
+        if (!row) {
+            return null;
+        }
+        return (_jsxs("div", { role: "treeitem", "aria-level": row.level, "aria-setsize": row.setSize, "aria-posinset": row.positionInSet, "aria-expanded": row.expandable ? row.expanded : undefined, "aria-selected": row.id === focused, tabIndex: index === tabStop ? 0 : -1, className: styles.row, style: { "--tree-level": row.level }, onClick: (event) => {
+                if (!isInsideControl(event.target, event.currentTarget)) {
+                    dispatch({ type: "toggle", id: row.id });
+                }
+            }, onFocus: () => select(row.id), onKeyDown: handleKeyDown, children: [_jsx("span", { className: styles.toggle, "aria-hidden": "true" }), _jsx("span", { children: renderRow(row) })] }, row.id));
+    }
+    return (_jsx("div", { ...props, ref: element, role: "tree", "aria-label": label, tabIndex: -1, className: clsx(styles.tree, className), onFocus: (event) => {
+            hasFocusWithin.current = true;
+            onFocus?.(event);
+        }, onBlur: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+                hasFocusWithin.current = false;
+            }
+            onBlur?.(event);
+        }, children: rowWindow
+            ? getWindowItems(rowWindow, rows.length, tabStop).map((item) => item.type === "gap" ? (_jsx("div", { role: "none", className: styles.gap, "data-gap-rows": item.rowCount, style: { "--tree-gap-rows": item.rowCount } }, `gap-${item.id}`)) : (renderTreeRow(rows[item.index], item.index)))
+            : rows.map(renderTreeRow) }));
+}

package/dist/Tree/Tree.module.css

@@ -0,0 +1,65 @@
+.tree {
+  overflow-x: auto;
+  color: var(--dusty-text);
+  font-family: var(--dusty-font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  padding-inline: calc((var(--tree-level, 1) - 1) * var(--tree-indent, 1rem))
+    0.5rem;
+  block-size: var(--tree-row-height, 1.3rem);
+  border-radius: var(--dusty-radius-sm);
+  white-space: nowrap;
+  cursor: default;
+}
+
+.gap {
+  block-size: calc(var(--tree-gap-rows, 0) * var(--tree-row-height, 1.3rem));
+}
+
+.row[aria-expanded] {
+  cursor: pointer;
+}
+
+.row[aria-selected="true"] {
+  background-color: var(--dusty-surface-selected);
+}
+
+.row:focus-visible {
+  outline: var(--dusty-focus-ring-width) solid var(--dusty-focus-ring);
+  outline-offset: calc(-1 * var(--dusty-focus-ring-width));
+}
+
+.toggle {
+  flex: none;
+  inline-size: 1rem;
+  color: var(--dusty-text-muted);
+  text-align: center;
+}
+
+.row[aria-expanded] > .toggle::before {
+  display: inline-block;
+  content: "▸";
+}
+
+.row[aria-expanded="true"] > .toggle::before {
+  rotate: 90deg;
+}
+
+@media (hover: hover) {
+  .row:hover:not([aria-selected="true"]) {
+    background-color: var(--dusty-surface-hover);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .row[aria-expanded] > .toggle::before {
+    transition: rotate 120ms ease-out;
+  }
+}

package/dist/Tree/getWindow.d.ts

@@ -0,0 +1,22 @@
+export interface RowWindow {
+    readonly start: number;
+    readonly end: number;
+}
+export interface WindowInput {
+    readonly rowCount: number;
+    readonly rowHeight: number;
+    readonly from: number;
+    readonly to: number;
+    readonly overscan: number;
+    readonly limit: number;
+}
+export type WindowItem = {
+    readonly type: "gap";
+    readonly id: "start" | "middle" | "end";
+    readonly rowCount: number;
+} | {
+    readonly type: "row";
+    readonly index: number;
+};
+export declare function getWindow({ rowCount, rowHeight, from, to, overscan, limit, }: WindowInput): RowWindow;
+export declare function getWindowItems(rowWindow: RowWindow, rowCount: number, pinned: number): WindowItem[];

package/dist/Tree/getWindow.js

@@ -0,0 +1,43 @@
+function clamp(value, minimum, maximum) {
+    if (Number.isNaN(value)) {
+        return minimum;
+    }
+    return Math.min(Math.max(value, minimum), maximum);
+}
+export function getWindow({ rowCount, rowHeight, from, to, overscan, limit, }) {
+    if (!(rowCount > 0) || !(rowHeight > 0)) {
+        return { start: 0, end: 0 };
+    }
+    const start = clamp(Math.floor(from / rowHeight) - overscan, 0, rowCount);
+    const end = clamp(Math.ceil(to / rowHeight) + overscan, start, Math.min(rowCount, start + Math.max(limit, 0)));
+    return { start, end };
+}
+export function getWindowItems(rowWindow, rowCount, pinned) {
+    const start = clamp(rowWindow.start, 0, rowCount);
+    const end = clamp(rowWindow.end, start, rowCount);
+    const isPinnedBefore = pinned >= 0 && pinned < start;
+    const isPinnedAfter = pinned >= end && pinned < rowCount;
+    const items = [];
+    function addGap(id, gapRowCount) {
+        if (gapRowCount > 0 || id === "start") {
+            items.push({ type: "gap", id, rowCount: gapRowCount });
+        }
+    }
+    addGap("start", isPinnedBefore ? pinned : start);
+    if (isPinnedBefore) {
+        items.push({ type: "row", index: pinned });
+        addGap("middle", start - pinned - 1);
+    }
+    for (let index = start; index < end; index++) {
+        items.push({ type: "row", index });
+    }
+    if (isPinnedAfter) {
+        addGap("middle", pinned - end);
+        items.push({ type: "row", index: pinned });
+        addGap("end", rowCount - pinned - 1);
+    }
+    else {
+        addGap("end", rowCount - end);
+    }
+    return items;
+}

package/dist/Tree/treeModel.d.ts

@@ -0,0 +1,55 @@
+export interface TreeNode {
+    readonly id: string;
+    readonly childCount: number;
+    children(): readonly this[];
+}
+export interface TreeRow<Node extends TreeNode = TreeNode> {
+    readonly node: Node;
+    readonly id: string;
+    readonly parentId: string | undefined;
+    readonly level: number;
+    readonly positionInSet: number;
+    readonly setSize: number;
+    readonly expandable: boolean;
+    readonly expanded: boolean;
+}
+export interface TreeState {
+    readonly expanded: ReadonlySet<string>;
+    readonly focused: string | undefined;
+}
+export type TreeAction = {
+    readonly type: "moveNext";
+} | {
+    readonly type: "movePrevious";
+} | {
+    readonly type: "moveFirst";
+} | {
+    readonly type: "moveLast";
+} | {
+    readonly type: "moveIn";
+} | {
+    readonly type: "moveOut";
+} | {
+    readonly type: "toggle";
+    readonly id?: string;
+} | {
+    readonly type: "expand";
+    readonly id: string;
+} | {
+    readonly type: "collapse";
+    readonly id: string;
+} | {
+    readonly type: "expandSiblings";
+} | {
+    readonly type: "focus";
+    readonly id: string;
+} | {
+    readonly type: "typeahead";
+    readonly text: string;
+};
+export declare const INITIAL_TREE_STATE: TreeState;
+export declare function visibleRows<Node extends TreeNode>(root: Node, expanded: ReadonlySet<string>): TreeRow<Node>[];
+export declare function reduceTree<Node extends TreeNode>(rows: readonly TreeRow<Node>[], state: TreeState, action: TreeAction, labelOf?: (row: TreeRow<Node>) => string): TreeState;
+export declare function findVisibleAncestor(previousRows: readonly TreeRow[], id: string, rows: readonly TreeRow[]): string | undefined;
+export declare function getTypeaheadText(typed: string, key: string, isContinuing: boolean): string;
+export declare function keyToAction(key: string): TreeAction | undefined;

package/dist/Tree/treeModel.js

@@ -0,0 +1,203 @@
+export const INITIAL_TREE_STATE = {
+    expanded: new Set(),
+    focused: undefined,
+};
+export function visibleRows(root, expanded) {
+    const rows = [];
+    const pending = [toRow(root, undefined, 1, 1, 1, expanded)];
+    for (let row = pending.pop(); row; row = pending.pop()) {
+        rows.push(row);
+        if (!row.expanded) {
+            continue;
+        }
+        const children = row.node.children();
+        for (let index = children.length - 1; index >= 0; index--) {
+            const child = children[index];
+            if (child) {
+                pending.push(toRow(child, row.id, row.level + 1, index + 1, children.length, expanded));
+            }
+        }
+    }
+    return rows;
+}
+function toRow(node, parentId, level, positionInSet, setSize, expanded) {
+    return {
+        node,
+        id: node.id,
+        parentId,
+        level,
+        positionInSet,
+        setSize,
+        get expandable() {
+            return node.childCount > 0;
+        },
+        expanded: expanded.has(node.id) && node.childCount > 0,
+    };
+}
+function withExpanded(state, change) {
+    const next = new Set(state.expanded);
+    change(next);
+    return next;
+}
+function isInside(rows, index, ancestorId) {
+    const byId = new Map(rows.map((row) => [row.id, row]));
+    for (let current = rows[index]; current?.parentId !== undefined; current = byId.get(current.parentId)) {
+        if (current.parentId === ancestorId) {
+            return true;
+        }
+    }
+    return false;
+}
+function focusedIndex(rows, state) {
+    return state.focused === undefined
+        ? -1
+        : rows.findIndex((row) => row.id === state.focused);
+}
+function focusRow(state, rows, index) {
+    const row = rows[Math.min(Math.max(index, 0), rows.length - 1)];
+    return row && row.id !== state.focused
+        ? { ...state, focused: row.id }
+        : state;
+}
+function expand(state, row) {
+    return row?.expandable && !row.expanded
+        ? {
+            ...state,
+            expanded: withExpanded(state, (expanded) => expanded.add(row.id)),
+        }
+        : state;
+}
+function collapse(state, rows, row) {
+    if (!row?.expanded) {
+        return state;
+    }
+    const index = focusedIndex(rows, state);
+    return {
+        expanded: withExpanded(state, (expanded) => expanded.delete(row.id)),
+        focused: index >= 0 && isInside(rows, index, row.id) ? row.id : state.focused,
+    };
+}
+function expandSiblings(state, rows, current) {
+    const closed = rows.filter((row) => row.parentId === current.parentId && row.expandable && !row.expanded);
+    if (closed.length === 0) {
+        return state;
+    }
+    return {
+        ...state,
+        expanded: withExpanded(state, (expanded) => {
+            for (const row of closed) {
+                expanded.add(row.id);
+            }
+        }),
+    };
+}
+function typeahead(state, rows, index, text, labelOf) {
+    const query = text.toLocaleLowerCase();
+    if (query === "") {
+        return state;
+    }
+    const start = query.length === 1 ? index + 1 : Math.max(index, 0);
+    for (let offset = 0; offset < rows.length; offset++) {
+        const candidate = (start + offset) % rows.length;
+        const row = rows[candidate];
+        if (row && labelOf(row).toLocaleLowerCase().startsWith(query)) {
+            return focusRow(state, rows, candidate);
+        }
+    }
+    return state;
+}
+export function reduceTree(rows, state, action, labelOf = () => "") {
+    if (rows.length === 0) {
+        return state;
+    }
+    const index = focusedIndex(rows, state);
+    const current = rows[index];
+    const byId = (id) => rows.find((row) => row.id === id);
+    switch (action.type) {
+        case "moveNext":
+            return focusRow(state, rows, index + 1);
+        case "movePrevious":
+            return focusRow(state, rows, index < 0 ? 0 : index - 1);
+        case "moveFirst":
+            return focusRow(state, rows, 0);
+        case "moveLast":
+            return focusRow(state, rows, rows.length - 1);
+        case "moveIn":
+            if (!current) {
+                return focusRow(state, rows, 0);
+            }
+            return current.expanded
+                ? focusRow(state, rows, index + 1)
+                : expand(state, current);
+        case "moveOut": {
+            if (!current) {
+                return focusRow(state, rows, 0);
+            }
+            if (current.expanded) {
+                return collapse(state, rows, current);
+            }
+            const parent = rows.findIndex((row) => row.id === current.parentId);
+            return parent >= 0 ? focusRow(state, rows, parent) : state;
+        }
+        case "toggle": {
+            const row = action.id === undefined ? current : byId(action.id);
+            return row?.expanded ? collapse(state, rows, row) : expand(state, row);
+        }
+        case "expand":
+            return expand(state, byId(action.id));
+        case "collapse":
+            return collapse(state, rows, byId(action.id));
+        case "expandSiblings":
+            return current ? expandSiblings(state, rows, current) : state;
+        case "focus":
+            return byId(action.id) ? { ...state, focused: action.id } : state;
+        case "typeahead":
+            return typeahead(state, rows, index, action.text, labelOf);
+    }
+}
+export function findVisibleAncestor(previousRows, id, rows) {
+    const visible = new Set(rows.map((row) => row.id));
+    const previous = new Map(previousRows.map((row) => [row.id, row]));
+    for (let current = previous.get(id); current; current =
+        current.parentId === undefined
+            ? undefined
+            : previous.get(current.parentId)) {
+        if (visible.has(current.id)) {
+            return current.id;
+        }
+    }
+    return undefined;
+}
+export function getTypeaheadText(typed, key, isContinuing) {
+    if (!isContinuing) {
+        return key;
+    }
+    const letter = key.toLocaleLowerCase();
+    const isRepeat = Array.from(typed.toLocaleLowerCase()).every((character) => character === letter);
+    return isRepeat ? key : typed + key;
+}
+export function keyToAction(key) {
+    switch (key) {
+        case "ArrowDown":
+            return { type: "moveNext" };
+        case "ArrowUp":
+            return { type: "movePrevious" };
+        case "ArrowRight":
+            return { type: "moveIn" };
+        case "ArrowLeft":
+            return { type: "moveOut" };
+        case "Home":
+            return { type: "moveFirst" };
+        case "End":
+            return { type: "moveLast" };
+        case "Enter":
+        case " ":
+            return { type: "toggle" };
+        case "*":
+            return { type: "expandSiblings" };
+        default:
+            return Array.from(key).length === 1
+                ? { type: "typeahead", text: key }
+                : undefined;
+    }
+}

package/dist/Tree/useRowWindow.d.ts

@@ -0,0 +1,3 @@
+import { type RefObject } from "react";
+import { type RowWindow } from "./getWindow.js";
+export declare function useRowWindow(element: RefObject<HTMLElement | null>, rowCount: number): RowWindow | undefined;

package/dist/Tree/useRowWindow.js

@@ -0,0 +1,78 @@
+import { useLayoutEffect, useState } from "react";
+import { getWindow } from "./getWindow.js";
+const WINDOW_THRESHOLD = 200;
+const WINDOW_OVERSCAN = 10;
+const WINDOW_LIMIT = 500;
+const INITIAL_WINDOW = { start: 0, end: 50 };
+const ESTIMATED_ROW_HEIGHT = 21;
+const TREE_ITEM = ':scope > [role="treeitem"]';
+const GAP = ":scope > [data-gap-rows]";
+function getRowHeight(tree) {
+    let gapHeight = 0;
+    let gapRows = 0;
+    for (const gap of tree.querySelectorAll(GAP)) {
+        gapHeight += gap.getBoundingClientRect().height;
+        gapRows += Number(gap.dataset.gapRows);
+    }
+    if (gapRows > 0 && gapHeight > 0) {
+        return gapHeight / gapRows;
+    }
+    return (tree.querySelector(TREE_ITEM)?.getBoundingClientRect().height ||
+        ESTIMATED_ROW_HEIGHT);
+}
+function getVisibleSpan(tree) {
+    const bounds = tree.getBoundingClientRect();
+    let top = Math.max(bounds.top, 0);
+    let bottom = Math.min(bounds.bottom, window.innerHeight);
+    for (let ancestor = tree.parentElement; ancestor; ancestor = ancestor.parentElement) {
+        if (getComputedStyle(ancestor).overflowY !== "visible") {
+            const clip = ancestor.getBoundingClientRect();
+            top = Math.max(top, clip.top);
+            bottom = Math.min(bottom, clip.bottom);
+        }
+    }
+    return { top, bottom };
+}
+export function useRowWindow(element, rowCount) {
+    const [rowWindow, setRowWindow] = useState(INITIAL_WINDOW);
+    const isWindowed = rowCount > WINDOW_THRESHOLD;
+    useLayoutEffect(() => {
+        const tree = element.current;
+        if (!isWindowed || !tree) {
+            return;
+        }
+        const container = tree;
+        function update() {
+            const origin = container.firstElementChild;
+            if (!origin) {
+                return;
+            }
+            const start = origin.getBoundingClientRect().top;
+            const { top, bottom } = getVisibleSpan(container);
+            const next = getWindow({
+                rowCount,
+                rowHeight: getRowHeight(container),
+                from: top - start,
+                to: bottom - start,
+                overscan: WINDOW_OVERSCAN,
+                limit: WINDOW_LIMIT,
+            });
+            setRowWindow((current) => current.start === next.start && current.end === next.end
+                ? current
+                : next);
+        }
+        const observer = new ResizeObserver(update);
+        observer.observe(container);
+        document.addEventListener("scroll", update, {
+            capture: true,
+            passive: true,
+        });
+        window.addEventListener("resize", update);
+        return () => {
+            observer.disconnect();
+            document.removeEventListener("scroll", update, { capture: true });
+            window.removeEventListener("resize", update);
+        };
+    }, [element, isWindowed, rowCount]);
+    return isWindowed ? rowWindow : undefined;
+}

package/dist/Tree/useTypeahead.d.ts

@@ -0,0 +1,2 @@
+import { type TreeAction } from "./treeModel.js";
+export declare function useTypeahead(): (action: TreeAction, timeStamp: number) => TreeAction;

package/dist/Tree/useTypeahead.js

@@ -0,0 +1,15 @@
+import { useRef } from "react";
+import { getTypeaheadText } from "./treeModel.js";
+const TYPEAHEAD_PAUSE = 500;
+export function useTypeahead() {
+    const typed = useRef({ text: "", at: 0 });
+    return (action, timeStamp) => {
+        if (action.type !== "typeahead") {
+            return action;
+        }
+        const isContinuing = timeStamp - typed.current.at < TYPEAHEAD_PAUSE;
+        const text = getTypeaheadText(typed.current.text, action.text, isContinuing);
+        typed.current = { text, at: timeStamp };
+        return { type: "typeahead", text };
+    };
+}

package/dist/announcer/announcer.d.ts

@@ -0,0 +1,2 @@
+export type Politeness = "polite" | "assertive";
+export declare function announce(message: string, politeness?: Politeness): void;