nexus-shared 1.1.20 → 2.0.0

package/dist/Components/Inputs/TreeView.js

@@ -0,0 +1,947 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, iconAlertCircle, iconCheck, iconChevronRight, iconChevronsDown, iconChevronsUp, iconLoader2, iconLock, iconPencil, iconPlus, iconTrash, iconX, InlineIcon, } from "nexus-icons";
+import { isValidElement, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { afterAnimation } from "../../Helpers/AnimationHelpers.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { TREE_DEFAULT_KEYS, TreeStore, } from "../../Helpers/TreeStore.js";
+import { Button } from "../Documents/Button.js";
+import { ContextMenu } from "../Documents/Menu.js";
+import { messageBox } from "../Layouts/MessageBox.js";
+import { CheckBox } from "./CheckBox.js";
+import { hasContent } from "./Field.js";
+import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+/** Row heights in pixels, the same as `--nx-tree-row` in Nexus.Tree.css. Fixed heights let the tree place any row without rendering the rows above it. */
+const ROW_HEIGHT = { sm: 28, md: 32, lg: 38 };
+/** Space above the first row and below the last, in pixels (`--nx-tree-pad`). */
+const PAD = 4;
+/** Rows rendered past each edge of the viewport, so a short scroll finds its rows already there. */
+const OVERSCAN = 12;
+/** Letters typed within this time, in milliseconds, add up to one search for a row. */
+const TYPEAHEAD_DELAY = 600;
+const SKELETON_WIDTHS = ["42%", "58%", "36%", "64%", "48%"];
+let draftCounter = 0;
+/** A value for an item added in the browser, until a server gives it one. */
+function newTreeValue() {
+    const uuid = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : null;
+    return uuid ?? `new-${Date.now().toString(36)}-${(++draftCounter).toString(36)}`;
+}
+const errorText = (error) => (error instanceof Error && error.message ? error.message : typeof error === "string" && error ? error : "Something went wrong.");
+const isItem = (value) => typeof value === "object" && value !== null;
+const sameItems = (a, b) => a === b || (a.length === b.length && a.every((item, index) => item === b[index]));
+/**
+ * A tree of items from a flat list: a permission tree (controller > menu > action) with checkboxes that cascade and
+ * items the user may not change, or a tree of categories to add, rename, and delete. Only the rows in view are
+ * rendered, so collapsed items never reach the page, and 100,000 expanded items scroll like 40. Expanding and
+ * collapsing slide open and closed (at once with reduced motion).
+ *
+ * Keys: arrows move and expand, Home and End jump, letters find a row, Space checks, Enter opens, `*` expands the
+ * siblings, F2 renames, Delete deletes, Insert adds under the focused row, and Shift+F10 opens the actions menu.
+ *
+ * @example
+ * <TreeView label="Permissions" items={permissions} checkable name="actionIds" defaultExpanded={1} isItemDisabled={item => !item.canAssign} />
+ */
+export function TreeView(props) {
+    const { items, valueKey = TREE_DEFAULT_KEYS.value, parentKey = TREE_DEFAULT_KEYS.parent, labelKey = TREE_DEFAULT_KEYS.label, descriptionKey = "description", iconKey = "icon", isItemDisabled, lockedMessage = "You do not have permission to change this item.", label, hint, error, size = "md", checkable = false, cascade = true, valueMode = "leaves", value, defaultValue, onValueChange, name, form, counts = true, defaultExpanded, creatable = false, editable = false, deletable = false, canChange, onCreate, onUpdate, onDelete, onItemsChange, confirmDelete = true, maxLabelLength = 100, onItemClick, loading = false, emptyMessage = "No items", toolbar = true, height, maxHeight = 420, readOnly = false, readOnlyMessage = "Read-only: this tree cannot be changed.", disabled = false, id, className, style, "aria-label": ariaLabel, ref, } = props;
+    const generatedId = useId();
+    const treeId = id ?? generatedId;
+    const labelId = `${treeId}-label`;
+    const messageId = `${treeId}-message`;
+    const rowHeight = ROW_HEIGHT[size];
+    // The store holds the tree outside React. It is built again only when a key or a checking rule changes.
+    const disabledRef = useRef(isItemDisabled);
+    disabledRef.current = isItemDisabled;
+    const config = [valueKey, parentKey, labelKey, cascade, valueMode].join("
");
+    const holderRef = useRef(null);
+    // Whether the user (or the handle) changed the checks since the items came, so new items keep them.
+    const touchedRef = useRef(false);
+    if (holderRef.current?.config !== config) {
+        // A new rule (another value mode, say) keeps what was checked and expanded.
+        const previous = holderRef.current?.store;
+        const store = new TreeStore(items, {
+            valueKey,
+            parentKey,
+            labelKey,
+            cascade,
+            valueMode,
+            isItemDisabled: item => (disabledRef.current ? disabledRef.current(item) : read(item, "disabled") === true || read(item, "isDisabled") === true),
+        }, value ?? (previous && touchedRef.current ? previous.value() : defaultValue));
+        if (previous)
+            store.expandValues(previous.expandedValues());
+        else if (defaultExpanded === "all")
+            store.expandAll();
+        else if (typeof defaultExpanded === "number")
+            store.expandAll(defaultExpanded);
+        else if (defaultExpanded)
+            store.expandValues(defaultExpanded);
+        holderRef.current = { config, store, items, value };
+    }
+    const holder = holderRef.current;
+    const store = holder.store;
+    if (!sameItems(holder.items, items)) {
+        store.setItems(items, value ?? (touchedRef.current ? store.value() : defaultValue));
+        holder.items = items;
+        holder.value = value;
+    }
+    if (value !== undefined && value !== holder.value) {
+        store.setValue(value);
+        holder.value = value;
+    }
+    const [version, bump] = useReducer((count) => count + 1, 0);
+    const [range, setRange] = useState(() => ({ start: 0, end: Math.ceil((typeof maxHeight === "number" ? maxHeight : 600) / rowHeight) + OVERSCAN }));
+    const rangeRef = useRef(range);
+    rangeRef.current = range;
+    const [motion, setMotion] = useState(null);
+    const motionIdRef = useRef(0);
+    const [focusKey, setFocusKey] = useState(null);
+    const [editing, setEditing] = useState(null);
+    const editingRef = useRef(null);
+    editingRef.current = editing;
+    const editTextRef = useRef("");
+    const [saving, setSaving] = useState(false);
+    const savingRef = useRef(false);
+    const [busyKeys, setBusyKeys] = useState(() => new Set());
+    const [message, setMessage] = useState(null);
+    const [contextKey, setContextKey] = useState(undefined);
+    const panelRef = useRef(null);
+    const viewportRef = useRef(null);
+    const motionRef = useRef(null);
+    const hadFocusRef = useRef(false);
+    const restoringRef = useRef(false);
+    const pendingScrollRef = useRef(null);
+    const pendingFocusRef = useRef(null);
+    const typeaheadRef = useRef({ text: "", at: 0 });
+    const blocked = readOnly || disabled;
+    const noticeAnchor = (target) => {
+        const row = target.closest(".nx-tree__row");
+        return row?.querySelector(".nx-tree__check, .nx-tree__text") ?? row;
+    };
+    const readOnlyNotice = useReadOnlyNotice(readOnly && !disabled, viewportRef, readOnlyMessage, { anchor: noticeAnchor, typing: false, lock: "label" });
+    const lockedNotice = useReadOnlyNotice(!blocked, viewportRef, lockedMessage, { anchor: noticeAnchor, typing: false, lock: "label" });
+    // The row a note points at: when it leaves the page (scrolled out of the window), the note goes too.
+    const noteRowRef = useRef(null);
+    function showNote(notice, target) {
+        noteRowRef.current = target?.closest(".nx-tree__row") ?? null;
+        notice.show(target);
+    }
+    const rows = store.rows;
+    const total = rows.length;
+    // The value for a form, read again only when something could have changed it.
+    const formValues = useMemo(() => (name ? store.value() : []), [name, store, version, items, value]);
+    function rowElement(key) {
+        const node = key === null ? undefined : store.get(key);
+        return node ? (viewportRef.current?.querySelector(`[data-uid="${node.uid}"]`) ?? null) : null;
+    }
+    function nodeOfTarget(target) {
+        const row = target instanceof Element ? target.closest(".nx-tree__row[data-key]") : null;
+        return row?.dataset.key === undefined ? undefined : store.get(row.dataset.key);
+    }
+    function focusedNode() {
+        const node = focusKey === null ? undefined : store.get(focusKey);
+        return node && store.isVisible(node) ? node : undefined;
+    }
+    // Scrolling and focus
+    function syncRange(viewport, force = false) {
+        const top = Math.max(0, viewport.scrollTop - PAD);
+        const first = Math.floor(top / rowHeight);
+        const last = Math.ceil((top + viewport.clientHeight) / rowHeight);
+        const current = rangeRef.current;
+        const covered = first >= current.start && last <= current.end && current.end - current.start <= last - first + 4 * OVERSCAN;
+        if (covered && !force)
+            return;
+        const next = { start: Math.max(0, first - OVERSCAN), end: last + OVERSCAN };
+        if (next.start === current.start && next.end === current.end)
+            return;
+        rangeRef.current = next;
+        setRange(next);
+    }
+    function scrollToIndex(index) {
+        const viewport = viewportRef.current;
+        if (!viewport || index < 0)
+            return;
+        const top = PAD + index * rowHeight;
+        if (top - PAD < viewport.scrollTop)
+            viewport.scrollTop = top - PAD;
+        else if (top + rowHeight + PAD > viewport.scrollTop + viewport.clientHeight)
+            viewport.scrollTop = top + rowHeight + PAD - viewport.clientHeight;
+        syncRange(viewport);
+    }
+    /** Moves focus to a row: scrolls it into view after the next render, then focuses it. */
+    function focusNode(node) {
+        if (store.reveal(node))
+            setMotion(null);
+        setFocusKey(node.key);
+        pendingScrollRef.current = store.indexOf(node);
+        pendingFocusRef.current = node.key;
+        bump();
+    }
+    function moveTo(index) {
+        if (total === 0)
+            return;
+        const node = rows[Math.max(0, Math.min(index, total - 1))];
+        if (node)
+            focusNode(node);
+    }
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        const scrollIndex = pendingScrollRef.current;
+        if (scrollIndex !== null) {
+            pendingScrollRef.current = null;
+            scrollToIndex(scrollIndex);
+        }
+        const key = pendingFocusRef.current;
+        if (key !== null) {
+            const row = rowElement(key);
+            if (row) {
+                pendingFocusRef.current = null;
+                // An open editor in the row keeps focus.
+                if (!row.contains(document.activeElement))
+                    row.focus({ preventScroll: true });
+            }
+            return;
+        }
+        // A focused row that scrolled out of the window, or was replaced, leaves focus nowhere: keep it in the tree.
+        const active = document.activeElement;
+        if (hadFocusRef.current && (!active || active === document.body)) {
+            restoringRef.current = true;
+            (rowElement(focusKey) ?? viewport).focus({ preventScroll: true });
+            restoringRef.current = false;
+        }
+    });
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        syncRange(viewport, true);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => syncRange(viewport));
+        observer.observe(viewport);
+        return () => observer.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowHeight]);
+    // A note under a row that scrolled away would point at nothing.
+    useLayoutEffect(() => {
+        const row = noteRowRef.current;
+        if (!row || row.isConnected)
+            return;
+        noteRowRef.current = null;
+        readOnlyNotice.hide();
+        lockedNotice.hide();
+    });
+    // An open or close ends when its animation does, or at once when none runs (reduced motion).
+    useLayoutEffect(() => {
+        if (!motion)
+            return;
+        const group = motionRef.current;
+        if (!group) {
+            setMotion(null);
+            return;
+        }
+        return afterAnimation(group, motion.type === "open" ? "nx-tree-open" : "nx-tree-close", () => setMotion(null));
+    }, [motion]);
+    function onPanelFocus() {
+        hadFocusRef.current = true;
+    }
+    function onPanelBlur(event) {
+        const next = event.relatedTarget;
+        if (next instanceof Node && panelRef.current?.contains(next))
+            return;
+        if (next) {
+            hadFocusRef.current = false;
+            readOnlyNotice.hide();
+            lockedNotice.hide();
+            return;
+        }
+        // Focus went nowhere: a click on the page, or a focused row that left the DOM. The first is settled after this frame.
+        requestAnimationFrame(() => {
+            if (!panelRef.current?.contains(document.activeElement))
+                hadFocusRef.current = false;
+        });
+    }
+    function onViewportFocus(event) {
+        // A row focused any way (a click, Tab, a script) becomes the row keys move from.
+        const focused = nodeOfTarget(event.target);
+        if (focused && event.target === rowElement(focused.key)) {
+            setFocusKey(focused.key);
+            return;
+        }
+        if (event.target !== event.currentTarget || restoringRef.current)
+            return;
+        // Tab reached the tree while its focused row is out of view: bring the row back.
+        const node = focusedNode() ?? rows[0];
+        if (node)
+            focusNode(node);
+    }
+    // Changes and events
+    function emitValue() {
+        onValueChange?.(store.value(), store.valueItems());
+    }
+    function afterCheck() {
+        touchedRef.current = true;
+        // Controlled: the next render sets the tree back to `value`, unless the page passes the new one.
+        if (value !== undefined)
+            holder.value = undefined;
+        bump();
+        emitValue();
+    }
+    function emitItems() {
+        if (!onItemsChange)
+            return;
+        const list = store.items();
+        holder.items = list;
+        onItemsChange(list);
+    }
+    function valueSignature() {
+        return onValueChange ? store.value().join("
") : "";
+    }
+    function emitValueIfChanged(before) {
+        if (onValueChange && valueSignature() !== before)
+            afterCheck();
+    }
+    function setBusy(key, busy) {
+        setBusyKeys(current => {
+            const next = new Set(current);
+            if (busy)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+    }
+    function openMotion(change) {
+        return change.count > 0 ? { id: ++motionIdRef.current, type: "open", at: change.at, count: change.count } : null;
+    }
+    function closeMotion(change) {
+        const visible = change.before.slice(change.at, Math.min(change.at + change.count, rangeRef.current.end));
+        return visible.length > 0 && change.at >= rangeRef.current.start ? { id: ++motionIdRef.current, type: "close", at: change.at, rows: visible } : null;
+    }
+    function toggleCheck(node, target) {
+        if (!checkable || disabled || node.draft)
+            return;
+        if (readOnly) {
+            showNote(readOnlyNotice, target);
+            return;
+        }
+        if (node.locked) {
+            showNote(lockedNotice, target);
+            return;
+        }
+        if (store.toggle(node))
+            afterCheck();
+    }
+    function toggleAll() {
+        if (blocked)
+            return;
+        if (store.toggleAll())
+            afterCheck();
+    }
+    function toggleExpand(node) {
+        if (node.children.length === 0)
+            return;
+        const edit = editingRef.current;
+        if (edit && node.expanded && isInside(store.get(edit.key), node)) {
+            void runAfterEdit(() => toggleExpand(node));
+            return;
+        }
+        const change = node.expanded ? store.collapse(node) : store.expand(node);
+        setMotion(change ? (node.expanded ? openMotion(change) : closeMotion(change)) : null);
+        // Focus inside a collapsed item moves up to it.
+        const focused = focusKey === null ? undefined : store.get(focusKey);
+        if (focused && !store.isVisible(focused) && hadFocusRef.current)
+            focusNode(node);
+        bump();
+    }
+    function expandAll() {
+        store.expandAll();
+        setMotion(null);
+        bump();
+    }
+    function collapseAll() {
+        const focused = focusedNode();
+        store.collapseAll();
+        setMotion(null);
+        if (focused) {
+            let top = focused;
+            while (top.parent)
+                top = top.parent;
+            setFocusKey(top.key);
+            pendingScrollRef.current = store.indexOf(top);
+        }
+        bump();
+    }
+    // Adding, renaming, deleting
+    function allowed(action, node) {
+        if (blocked)
+            return false;
+        if ((action === "create" && !creatable) || (action === "update" && !editable) || (action === "delete" && !deletable))
+            return false;
+        if (node && (node.disabledPath || node.draft))
+            return false;
+        return canChange ? canChange(action, node ? node.item : null) : true;
+    }
+    /** Why an action on a row does nothing: a note for a locked item or a read-only tree. */
+    function explainRefusal(action, node) {
+        const target = node ? rowElement(node.key) : null;
+        const offered = (action === "create" && creatable) || (action === "update" && editable) || (action === "delete" && deletable);
+        if (!offered || disabled)
+            return;
+        if (readOnly)
+            showNote(readOnlyNotice, target);
+        else if (node?.disabledPath)
+            showNote(lockedNotice, target);
+    }
+    /** Saves an open editor first, so switching to another action never drops what was typed. */
+    async function runAfterEdit(action) {
+        if (editingRef.current && !(await commitEdit("switch")))
+            return;
+        action();
+    }
+    function openEditor(edit, text) {
+        editTextRef.current = text;
+        editingRef.current = edit;
+        setEditing(edit);
+        setMessage(null);
+    }
+    function closeEditor() {
+        editingRef.current = null;
+        setEditing(null);
+    }
+    function startCreate(parent) {
+        if (!allowed("create", parent)) {
+            explainRefusal("create", parent);
+            return;
+        }
+        void runAfterEdit(() => {
+            if (parent && store.get(parent.key) !== parent)
+                return;
+            if (parent && store.reveal(parent))
+                setMotion(null);
+            const wasOpen = parent ? parent.expanded : true;
+            const parentIndex = parent ? store.indexOf(parent) : -1;
+            const before = store.rows;
+            const draft = { [valueKey]: newTreeValue(), [parentKey]: parent ? parent.value : null, [labelKey]: "" };
+            const node = store.insert(parent, draft, { draft: true });
+            const index = store.indexOf(node);
+            setMotion(openMotion(wasOpen ? { at: index, count: 1 } : { at: parentIndex + 1, count: store.rows.length - before.length }));
+            openEditor({ key: node.key, mode: "create" }, "");
+            setFocusKey(node.key);
+            pendingScrollRef.current = index;
+            bump();
+        });
+    }
+    function startRename(node) {
+        if (!allowed("update", node)) {
+            explainRefusal("update", node);
+            return;
+        }
+        void runAfterEdit(() => {
+            if (store.get(node.key) !== node)
+                return;
+            if (store.reveal(node))
+                setMotion(null);
+            openEditor({ key: node.key, mode: "update" }, node.label);
+            setFocusKey(node.key);
+            pendingScrollRef.current = store.indexOf(node);
+            bump();
+        });
+    }
+    function removeNode(node) {
+        const index = store.indexOf(node);
+        const before = store.rows;
+        store.remove(node);
+        setMotion(index >= 0 ? closeMotion({ at: index, count: before.length - store.rows.length, before }) : null);
+        return index;
+    }
+    function cancelEdit() {
+        const edit = editingRef.current;
+        if (!edit || savingRef.current)
+            return;
+        const node = store.get(edit.key);
+        closeEditor();
+        setMessage(null);
+        if (!node)
+            return;
+        if (edit.mode === "create" && node.draft) {
+            const index = removeNode(node);
+            const next = node.parent ?? store.rows[Math.max(0, Math.min(index, store.rows.length) - 1)];
+            if (next)
+                focusNode(next);
+        }
+        else {
+            focusNode(node);
+        }
+        bump();
+    }
+    /** Saves the open editor. Resolves with whether it closed, so a following action may run. */
+    async function commitEdit(via) {
+        const edit = editingRef.current;
+        if (!edit)
+            return true;
+        if (savingRef.current)
+            return false;
+        const node = store.get(edit.key);
+        if (!node) {
+            closeEditor();
+            return true;
+        }
+        const text = editTextRef.current.trim();
+        if (edit.mode === "update" && text === node.label) {
+            closeEditor();
+            if (via === "enter")
+                focusNode(node);
+            return true;
+        }
+        if (!text) {
+            if (via !== "enter") {
+                cancelEdit();
+                return true;
+            }
+            setMessage("Enter a name.");
+            return false;
+        }
+        savingRef.current = true;
+        setSaving(true);
+        setBusy(node.key, true);
+        const key = node.key;
+        const valueBefore = valueSignature();
+        try {
+            let item;
+            if (edit.mode === "create") {
+                const parent = node.parent;
+                const draft = { ...node.item, [labelKey]: text };
+                const result = await onCreate?.({ parent: parent ? parent.item : null, parentValue: parent ? parent.value : null, label: text, item: draft });
+                item = isItem(result) ? result : draft;
+            }
+            else {
+                const renamed = { ...node.item, [labelKey]: text };
+                const result = await onUpdate?.({ item: node.item, value: node.value, label: text });
+                item = isItem(result) ? result : renamed;
+            }
+            // New items may have come meanwhile; the node is gone with them.
+            if (store.get(key) === node)
+                store.update(node, item);
+            if (editingRef.current === edit)
+                closeEditor();
+            setMessage(null);
+            if (store.get(node.key) === node && (via === "enter" || hadFocusRef.current))
+                focusNode(node);
+            emitItems();
+            emitValueIfChanged(valueBefore);
+            bump();
+            return true;
+        }
+        catch (reason) {
+            setMessage(`Could not save "${text}": ${errorText(reason)}`);
+            pendingFocusRef.current = null;
+            requestAnimationFrame(() => panelRef.current?.querySelector(".nx-tree__input")?.focus());
+            return false;
+        }
+        finally {
+            savingRef.current = false;
+            setSaving(false);
+            setBusy(key, false);
+        }
+    }
+    async function requestDelete(node) {
+        if (!allowed("delete", node)) {
+            explainRefusal("delete", node);
+            return false;
+        }
+        if (editingRef.current && !(await commitEdit("switch")))
+            return false;
+        if (store.get(node.key) !== node)
+            return false;
+        const subtree = store.subtree(node);
+        if (subtree.some(item => item.disabledPath)) {
+            setMessage(`"${node.label}" holds items you cannot change, so it cannot be deleted.`);
+            return false;
+        }
+        const name = node.label || "this item";
+        if (confirmDelete) {
+            const under = subtree.length - 1;
+            const confirmed = await messageBox.confirm({
+                title: `Delete "${name}"?`,
+                message: under > 0 ? `The ${under.toLocaleString()} ${under === 1 ? "item" : "items"} under it will be deleted too.` : "This cannot be undone.",
+                tone: "danger",
+                confirmLabel: "Delete",
+            });
+            if (!confirmed) {
+                if (store.get(node.key) === node)
+                    focusNode(node);
+                return false;
+            }
+        }
+        if (store.get(node.key) !== node)
+            return false;
+        const key = node.key;
+        setBusy(key, true);
+        try {
+            await onDelete?.({ item: node.item, value: node.value, items: subtree.filter(item => !item.draft).map(item => item.item) });
+            if (store.get(key) !== node)
+                return true;
+            const valueBefore = valueSignature();
+            const index = removeNode(node);
+            const next = store.rows[Math.max(0, Math.min(index, store.rows.length - 1))];
+            if (next)
+                focusNode(next);
+            setMessage(null);
+            emitItems();
+            emitValueIfChanged(valueBefore);
+            bump();
+            return true;
+        }
+        catch (reason) {
+            setMessage(`Could not delete "${name}": ${errorText(reason)}`);
+            return false;
+        }
+        finally {
+            setBusy(key, false);
+        }
+    }
+    // Pointer and keys
+    function onViewportPointerDown(event) {
+        // The context menu opens on the row that was pressed, or at the top level on empty space.
+        const node = nodeOfTarget(event.target);
+        setContextKey(node ? node.key : null);
+    }
+    function onViewportClick(event) {
+        const target = event.target;
+        if (target.closest(".nx-tree__edit, .nx-tree__actions, .nx-tree__motion--close"))
+            return;
+        const node = nodeOfTarget(target);
+        if (!node)
+            return;
+        setFocusKey(node.key);
+        if (disabled)
+            return;
+        if (target.closest(".nx-tree__toggle")) {
+            toggleExpand(node);
+            return;
+        }
+        if (node.draft)
+            return;
+        if (checkable) {
+            toggleCheck(node, target);
+        }
+        else if (onItemClick) {
+            if (node.disabledPath)
+                showNote(lockedNotice, target);
+            else
+                onItemClick(node.item);
+        }
+        else if (node.children.length > 0) {
+            toggleExpand(node);
+        }
+    }
+    function onViewportKeyDown(event) {
+        if (event.defaultPrevented || event.target.closest(".nx-tree__edit"))
+            return;
+        setContextKey(undefined);
+        if (event.key === "Escape" && noteRowRef.current) {
+            noteRowRef.current = null;
+            readOnlyNotice.hide();
+            lockedNotice.hide();
+            event.preventDefault();
+            return;
+        }
+        if (disabled || total === 0)
+            return;
+        const node = focusedNode() ?? rows[0];
+        const index = store.indexOf(node);
+        const target = rowElement(node.key) ?? event.currentTarget;
+        const page = Math.max(1, Math.floor((viewportRef.current?.clientHeight ?? rowHeight) / rowHeight) - 1);
+        const { key, ctrlKey, metaKey, altKey } = event;
+        let handled = true;
+        if (key === "ArrowDown")
+            moveTo(index + 1);
+        else if (key === "ArrowUp")
+            moveTo(index - 1);
+        else if (key === "Home")
+            moveTo(0);
+        else if (key === "End")
+            moveTo(total - 1);
+        else if (key === "PageDown")
+            moveTo(index + page);
+        else if (key === "PageUp")
+            moveTo(index - page);
+        else if (key === "ArrowRight") {
+            if (node.children.length === 0)
+                handled = false;
+            else if (!node.expanded)
+                toggleExpand(node);
+            else
+                moveTo(index + 1);
+        }
+        else if (key === "ArrowLeft") {
+            if (node.expanded)
+                toggleExpand(node);
+            else if (node.parent)
+                focusNode(node.parent);
+            else
+                handled = false;
+        }
+        else if (key === " " && !ctrlKey && !metaKey) {
+            if (checkable)
+                toggleCheck(node, target);
+        }
+        else if (key === "Enter") {
+            if (onItemClick && !checkable && !node.disabledPath)
+                onItemClick(node.item);
+            else if (node.children.length > 0)
+                toggleExpand(node);
+            else if (checkable)
+                toggleCheck(node, target);
+        }
+        else if (key === "*") {
+            const siblings = node.parent ? node.parent.children : store.roots;
+            store.expandValues(siblings.filter(sibling => sibling.children.length > 0).map(sibling => sibling.value));
+            setMotion(null);
+            bump();
+        }
+        else if (key === "F2")
+            startRename(node);
+        else if (key === "Delete")
+            void requestDelete(node);
+        else if (key === "Insert")
+            startCreate(node);
+        else if (key.length === 1 && !ctrlKey && !metaKey && !altKey && key !== " ") {
+            const now = performance.now();
+            const typed = typeaheadRef.current;
+            typed.text = now - typed.at < TYPEAHEAD_DELAY ? typed.text + key.toLowerCase() : key.toLowerCase();
+            typed.at = now;
+            // The same letter again moves to the next row starting with it; a longer text keeps the row while it still matches.
+            const repeated = [...typed.text].every(letter => letter === typed.text[0]);
+            const search = repeated ? typed.text.slice(0, 1) : typed.text;
+            const from = repeated ? index + 1 : index;
+            for (let step = 0; step < total; step++) {
+                const candidate = rows[(from + step) % total];
+                if (candidate.label.toLowerCase().startsWith(search)) {
+                    focusNode(candidate);
+                    break;
+                }
+            }
+        }
+        else
+            handled = false;
+        if (handled)
+            event.preventDefault();
+    }
+    // The context menu
+    const crud = !blocked && (creatable || editable || deletable);
+    const contextNode = contextKey === undefined ? focusedNode() : contextKey === null ? undefined : store.get(contextKey);
+    const contextItems = [];
+    if (crud) {
+        if (creatable) {
+            contextItems.push({
+                value: "create",
+                label: contextNode ? "Add item under it" : "Add item",
+                icon: _jsx(InlineIcon, { icon: iconPlus }),
+                shortcut: contextNode ? "Insert" : undefined,
+                disabled: !allowed("create", contextNode ?? null),
+            });
+        }
+        if (editable && contextNode) {
+            contextItems.push({ value: "update", label: "Rename", icon: _jsx(InlineIcon, { icon: iconPencil }), shortcut: "F2", disabled: !allowed("update", contextNode) });
+        }
+        if (deletable && contextNode) {
+            if (contextItems.length > 0)
+                contextItems.push({ separator: true });
+            contextItems.push({ value: "delete", label: "Delete", icon: _jsx(InlineIcon, { icon: iconTrash }), shortcut: "Delete", tone: "danger", disabled: !allowed("delete", contextNode) });
+        }
+    }
+    function onContextSelect(action) {
+        if (action === "create")
+            startCreate(contextNode ?? null);
+        else if (action === "update" && contextNode)
+            startRename(contextNode);
+        else if (action === "delete" && contextNode)
+            void requestDelete(contextNode);
+    }
+    useImperativeHandle(ref, () => ({
+        expandAll: levels => {
+            store.expandAll(levels);
+            setMotion(null);
+            bump();
+        },
+        collapseAll,
+        expand: expandValue => {
+            const node = store.get(expandValue);
+            if (!node)
+                return;
+            store.reveal(node);
+            store.expand(node);
+            setMotion(null);
+            bump();
+        },
+        collapse: collapseValue => {
+            const node = store.get(collapseValue);
+            if (node && store.collapse(node)) {
+                setMotion(null);
+                bump();
+            }
+        },
+        reveal: (revealValue, focus = true) => {
+            const node = store.get(revealValue);
+            if (!node)
+                return;
+            if (focus) {
+                focusNode(node);
+                return;
+            }
+            if (store.reveal(node))
+                setMotion(null);
+            pendingScrollRef.current = store.indexOf(node);
+            bump();
+        },
+        getValue: () => store.value(),
+        setValue: values => {
+            if (!store.setValue(values))
+                return;
+            touchedRef.current = true;
+            bump();
+        },
+        checkAll: checked => {
+            if (store.checkAll(checked))
+                afterCheck();
+        },
+        getItems: () => store.items(),
+        startCreate: parentValue => startCreate(parentValue === null ? null : (store.get(parentValue) ?? null)),
+        startRename: renameValue => {
+            const node = store.get(renameValue);
+            if (node)
+                startRename(node);
+        },
+        remove: removeValue => {
+            const node = store.get(removeValue);
+            return node ? requestDelete(node) : Promise.resolve(false);
+        },
+        focus: () => {
+            const node = focusedNode() ?? rows[0];
+            if (node)
+                focusNode(node);
+        },
+    }));
+    // Rendering
+    const showCounts = checkable && cascade && counts;
+    const tabbable = focusedNode() ?? rows[0];
+    const rendered = new Set();
+    function renderRow(node, ghost = false) {
+        if (!ghost)
+            rendered.add(node.key);
+        const hasChildren = node.children.length > 0;
+        const state = checkable ? store.state(node) : null;
+        const edit = !ghost && editing?.key === node.key ? editing : null;
+        const busy = busyKeys.has(node.key);
+        const locked = checkable ? node.locked : node.disabledPath;
+        const labelElementId = `${treeId}-l${node.uid}`;
+        const description = read(node.item, descriptionKey);
+        const hasDescription = typeof description === "string" ? description !== "" : typeof description === "number";
+        const descriptionElementId = hasDescription ? `${treeId}-d${node.uid}` : undefined;
+        const icon = iconOf(read(node.item, iconKey));
+        const actions = [];
+        if (!ghost && !edit && !busy && !node.draft) {
+            if (allowed("create", node)) {
+                actions.push(_jsx(Button, { variant: "ghost", size: "sm", className: "nx-tree__action", icon: _jsx(InlineIcon, { icon: iconPlus }), "aria-label": `Add an item under ${node.label}`, title: "Add item (Insert)", tabIndex: -1, onMouseDown: keepEditorFocus, onClick: () => startCreate(node) }, "create"));
+            }
+            if (allowed("update", node)) {
+                actions.push(_jsx(Button, { variant: "ghost", size: "sm", className: "nx-tree__action", icon: _jsx(InlineIcon, { icon: iconPencil }), "aria-label": `Rename ${node.label}`, title: "Rename (F2)", tabIndex: -1, onMouseDown: keepEditorFocus, onClick: () => startRename(node) }, "update"));
+            }
+            if (allowed("delete", node)) {
+                actions.push(_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", className: "nx-tree__action", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Delete ${node.label}`, title: "Delete (Delete)", tabIndex: -1, onMouseDown: keepEditorFocus, onClick: () => void requestDelete(node) }, "delete"));
+            }
+        }
+        return (_jsxs("div", { role: ghost ? undefined : "treeitem", className: cx("nx-tree__row", locked && "nx-tree__row--locked", edit && "nx-tree__row--editing"), style: { "--nx-tree-depth": node.depth }, "data-key": ghost ? undefined : node.key, "data-uid": ghost ? undefined : node.uid, "data-readonly": locked || undefined, tabIndex: ghost ? undefined : !disabled && tabbable === node ? 0 : -1, "aria-level": ghost ? undefined : node.depth + 1, "aria-setsize": ghost ? undefined : (node.parent ? node.parent.children.length : store.roots.length), "aria-posinset": ghost ? undefined : node.position + 1, "aria-expanded": ghost || !hasChildren ? undefined : node.expanded, "aria-checked": ghost || !state ? undefined : state === "mixed" ? "mixed" : state === "checked", "aria-disabled": ghost ? undefined : locked || undefined, "aria-busy": busy || undefined, "aria-labelledby": ghost || edit ? undefined : labelElementId, "aria-label": edit ? (edit.mode === "create" ? "New item" : `Renaming ${node.label}`) : undefined, "aria-describedby": ghost || edit ? undefined : descriptionElementId, children: [_jsx("span", { className: "nx-tree__toggle", "aria-hidden": "true", children: hasChildren && _jsx(InlineIcon, { icon: iconChevronRight }) }), checkable && (_jsx("span", { className: cx("nx-tree__check nx-choice", `nx-choice--${size}`), "aria-hidden": "true", children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", tabIndex: -1, checked: state === "checked", disabled: disabled, readOnly: true, ref: input => {
+                            if (input)
+                                input.indeterminate = state === "mixed";
+                        } }) })), icon && (_jsx("span", { className: "nx-tree__icon", "aria-hidden": "true", children: icon })), edit ? (_jsx(TreeEditor, { initial: editTextRef.current, select: edit.mode === "update", maxLength: maxLabelLength, saving: saving, label: edit.mode === "create" ? "Name of the new item" : `New name for ${node.label}`, invalid: message !== null, describedBy: message !== null ? messageId : undefined, onText: text => (editTextRef.current = text), onCommit: via => void commitEdit(via), onCancel: cancelEdit }, node.uid)) : (_jsxs("span", { className: "nx-tree__text", children: [_jsx("span", { id: ghost ? undefined : labelElementId, className: "nx-tree__label", title: node.label, children: node.label || "(no name)" }), hasDescription && (_jsx("span", { id: ghost ? undefined : descriptionElementId, className: "nx-tree__description", children: String(description) }))] })), showCounts && hasChildren && !edit && (_jsxs("span", { className: "nx-tree__count", "aria-hidden": "true", children: [node.checkedLeaves.toLocaleString(), "/", node.leaves.toLocaleString()] })), busy && !edit && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin nx-tree__busy", "aria-hidden": "true" }), locked && !edit && (_jsx("span", { className: "nx-tree__lock", title: lockedMessage, "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLock }) })), actions.length > 0 && _jsx("span", { className: "nx-tree__actions", children: actions })] }, node.uid));
+    }
+    const end = Math.min(range.end, total);
+    const start = Math.min(range.start, end);
+    let body;
+    let bottom;
+    const openValid = motion?.type === "open" && motion.at >= start && motion.at < end && motion.at + motion.count <= total;
+    const closeValid = motion?.type === "close" && motion.at >= start && motion.at <= end;
+    if (motion?.type === "open" && openValid) {
+        const groupEnd = Math.min(motion.at + motion.count, end);
+        const afterStart = motion.at + motion.count;
+        const afterEnd = Math.min(total, afterStart + (end - motion.at));
+        body = [
+            ...rows.slice(start, motion.at).map(node => renderRow(node)),
+            _jsx("div", { ref: motionRef, role: "none", className: "nx-tree__motion nx-tree__motion--open", style: { "--nx-tree-motion-height": `${(groupEnd - motion.at) * rowHeight}px` }, children: rows.slice(motion.at, groupEnd).map(node => renderRow(node)) }, `motion-${motion.id}`),
+            ...rows.slice(afterStart, afterEnd).map(node => renderRow(node)),
+        ];
+        bottom = (total - afterEnd) * rowHeight;
+    }
+    else if (motion?.type === "close" && closeValid) {
+        body = [
+            ...rows.slice(start, motion.at).map(node => renderRow(node)),
+            _jsx("div", { ref: motionRef, role: "none", "aria-hidden": "true", inert: true, className: "nx-tree__motion nx-tree__motion--close", style: { "--nx-tree-motion-height": `${motion.rows.length * rowHeight}px` }, children: motion.rows.map(node => renderRow(node, true)) }, `motion-${motion.id}`),
+            ...rows.slice(motion.at, end).map(node => renderRow(node)),
+        ];
+        bottom = (total - end) * rowHeight;
+    }
+    else {
+        body = rows.slice(start, end).map(node => renderRow(node));
+        bottom = (total - end) * rowHeight;
+    }
+    const allState = checkable ? store.allState() : null;
+    const tally = store.counts();
+    const hasParents = store.roots.some(root => root.children.length > 0);
+    const hasLabel = hasContent(label);
+    const shownMessage = message ?? (hasContent(error) ? error : null);
+    const empty = total === 0;
+    return (_jsxs("div", { className: cx("nx-field nx-field--standard", `nx-field--${size}`, "nx-tree-field", className), style: style, "data-invalid": shownMessage ? true : undefined, "data-readonly": readOnly || undefined, "data-disabled": disabled || undefined, children: [hasLabel && (_jsxs("span", { id: labelId, className: "nx-field__label", children: [label, readOnlyNotice.lock] })), _jsxs("div", { ref: panelRef, className: cx("nx-tree", `nx-tree--${size}`), onFocus: onPanelFocus, onBlur: onPanelBlur, children: [toolbar && (_jsxs("div", { className: "nx-tree__toolbar", children: [checkable && (_jsx(CheckBox, { size: "sm", className: "nx-tree__all", label: "Select all", checked: allState === "checked", indeterminate: allState === "mixed", disabled: disabled || allState === null || empty, readOnly: readOnly, readOnlyMessage: readOnlyMessage, onValueChange: toggleAll })), _jsxs("span", { className: "nx-tree__summary", "aria-live": "polite", children: [loading && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin", "aria-hidden": "true" }), loading && empty
+                                        ? "Loading…"
+                                        : checkable
+                                            ? `${tally.checked.toLocaleString()} of ${tally.total.toLocaleString()} selected`
+                                            : `${store.size.toLocaleString()} ${store.size === 1 ? "item" : "items"}`, !hasLabel && readOnlyNotice.lock] }), _jsxs("span", { className: "nx-tree__tools", children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconChevronsDown }), "aria-label": "Expand all", title: "Expand all", disabled: !hasParents, onClick: expandAll }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconChevronsUp }), "aria-label": "Collapse all", title: "Collapse all", disabled: !hasParents, onClick: collapseAll }), creatable && !blocked && (!canChange || canChange("create", null)) && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), onMouseDown: keepEditorFocus, onClick: () => startCreate(null), children: "Add" }))] })] })), _jsx(ContextMenu, { items: contextItems, onSelect: onContextSelect, disabled: contextItems.length === 0, "aria-label": "Item actions", children: _jsx("div", { ref: viewportRef, className: "nx-tree__viewport", style: { height, maxHeight: height === undefined ? maxHeight : undefined }, tabIndex: !disabled && !empty && !(tabbable && rendered.has(tabbable.key)) ? 0 : -1, onScroll: event => syncRange(event.currentTarget), onFocus: onViewportFocus, onPointerDown: onViewportPointerDown, onClick: onViewportClick, onKeyDown: onViewportKeyDown, children: empty ? (loading ? (_jsx("div", { className: "nx-tree__list", "aria-hidden": "true", children: SKELETON_WIDTHS.map((width, index) => (_jsxs("div", { className: "nx-tree__row nx-tree__row--skeleton", style: { "--nx-tree-depth": index % 3 === 0 ? 0 : 1 }, children: [_jsx("span", { className: "nx-tree__toggle" }), _jsx("span", { className: "nx-tree__skeleton", style: { width } })] }, index))) })) : (_jsx("p", { className: "nx-tree__empty", children: emptyMessage }))) : (_jsx("div", { role: "tree", className: "nx-tree__list", "aria-labelledby": hasLabel ? labelId : undefined, "aria-label": hasLabel ? undefined : (ariaLabel ?? "Tree"), "aria-describedby": shownMessage || hasContent(hint) ? messageId : undefined, "aria-disabled": disabled || undefined, "aria-readonly": readOnly || undefined, "aria-busy": loading || undefined, style: { paddingTop: PAD + start * rowHeight, paddingBottom: PAD + bottom }, children: body })) }) })] }), (shownMessage || hasContent(hint)) && (_jsx("div", { className: "nx-field__footer", children: _jsxs("p", { id: messageId, className: cx("nx-field__message", shownMessage && "nx-field__message--error"), role: message ? "alert" : undefined, children: [shownMessage && _jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: shownMessage ?? hint })] }) })), name && formValues.map(item => _jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: String(item) }, String(item))), readOnlyNotice.notice, lockedNotice.notice] }));
+}
+/** The name box of a row being added or renamed. Enter saves, Esc cancels, and leaving it saves. */
+function TreeEditor({ initial, select, maxLength, saving, label, invalid, describedBy, onText, onCommit, onCancel }) {
+    const inputRef = useRef(null);
+    useLayoutEffect(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        input.focus({ preventScroll: true });
+        if (select)
+            input.select();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (_jsxs("span", { className: "nx-tree__edit", onContextMenu: event => event.stopPropagation(), children: [_jsx("input", { ref: inputRef, className: "nx-tree__input", defaultValue: initial, maxLength: maxLength, readOnly: saving, "aria-label": label, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, spellCheck: true, onChange: event => onText(event.currentTarget.value), onKeyDown: event => {
+                    event.stopPropagation();
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        onCommit("enter");
+                    }
+                    else if (event.key === "Escape") {
+                        event.preventDefault();
+                        onCancel();
+                    }
+                }, onBlur: event => {
+                    // Leaving the box saves, but not when the row left the page (scrolled away) or the window lost focus.
+                    if (event.currentTarget.isConnected && document.hasFocus())
+                        onCommit("blur");
+                } }), _jsx(Button, { variant: "ghost", size: "sm", className: "nx-tree__action", icon: _jsx(InlineIcon, { icon: saving ? iconLoader2 : iconCheck, className: saving ? "nx-spin" : undefined }), "aria-label": "Save", title: "Save (Enter)", tabIndex: -1, disabled: saving, onMouseDown: keepEditorFocus, onClick: () => onCommit("enter") }), _jsx(Button, { variant: "ghost", size: "sm", className: "nx-tree__action", icon: _jsx(InlineIcon, { icon: iconX }), "aria-label": "Cancel", title: "Cancel (Esc)", tabIndex: -1, disabled: saving, onMouseDown: keepEditorFocus, onClick: onCancel })] }));
+}
+/** A press on a row's button keeps focus where it is, so an open editor is not saved by the press itself. */
+function keepEditorFocus(event) {
+    event.preventDefault();
+}
+function read(item, key) {
+    return item[key];
+}
+function iconOf(icon) {
+    if (typeof icon === "string" && icon)
+        return _jsx(Icon, { name: icon });
+    return isValidElement(icon) ? icon : null;
+}
+function isInside(node, ancestor) {
+    for (let parent = node?.parent; parent; parent = parent.parent)
+        if (parent === ancestor)
+            return true;
+    return false;
+}