nexus-shared 4.0.0 → 4.1.0

package/dist/Components/Inputs/RowsInput.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconAlertCircle, iconArrowBackUp, iconPlus, InlineIcon } from "nexus-icons";
-import { memo, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
+import { memo, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useDatePreferences } from "../../Helpers/DatePreferences.js";
 import { browserInputMemory, FORM_SAVED_EVENT } from "../../Helpers/InputMemory.js";
+import { narrowingValue, narrowInputParamsBy } from "../../Helpers/InputNarrowing.js";
 import { inputFieldName } from "../../Helpers/InputParamsHelpers.js";
 import { RowsStore } from "../../Helpers/RowsStore.js";
 import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
+import { ComputedInput } from "./ComputedInput.js";
 import { hasContent } from "./Field.js";
 import { isFirstInvalid } from "./InputField.js";
 import { renderInput } from "./InputRenderer.js";
@@ -194,9 +196,43 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
         const row = store.row(key);
         return row ? ask(row, name, index) : undefined;
     }, [store, rowLock]);
+    // The form's values the rows follow (`narrowedBy` `from: "form"`): when one changes, every row draws again, narrowed afresh.
+    const formKey = formValuesKey(props.formValues);
+    const shownFormKey = useRef(formKey);
+    useLayoutEffect(() => {
+        if (shownFormKey.current === formKey)
+            return;
+        shownFormKey.current = formKey;
+        store.redrawRows();
+    }, [store, formKey]);
+    // Row inputs worked out from others (`compute`) read the rows' `computeWith` as they draw: a new one draws every row.
+    const computeWith = useCallback(() => latest.current.props.computeWith, []);
+    const shownComputeWith = useRef(props.computeWith);
+    useLayoutEffect(() => {
+        if (Object.is(shownComputeWith.current, props.computeWith))
+            return;
+        shownComputeWith.current = props.computeWith;
+        if (inputs.some(params => params.compute))
+            store.redrawRows();
+    }, [store, inputs, props.computeWith]);
     // A cell's own params, merged once per answer: the same answer gives the same object, so the cell does not draw again.
     const merged = useRef(new WeakMap());
     const cellParams = useCallback((key, params, index) => {
+        const own = ownCellParams(key, params, index);
+        // Options narrowed by the row's own values and the form's (`narrowedBy`): read as the row draws, which it does when
+        // one of them changes.
+        if (!params.narrowedBy)
+            return own;
+        const row = store.row(key);
+        const outer = latest.current.props.formValues;
+        return narrowInputParamsBy(own, narrowing => {
+            if (narrowing.from === "form")
+                return outer?.[narrowing.name] ?? { value: undefined };
+            return { value: row?.[narrowing.name], label: latest.current.props.inputs.find(input => input.name === narrowing.name)?.label };
+        });
+    }, [store]);
+    /** The column's params, or the row's own over them (`cellParams`). */
+    function ownCellParams(key, params, index) {
         const ask = latest.current.props.cellParams;
         if (!ask)
             return params;
@@ -216,8 +252,14 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
             byColumn.set(params, result);
         }
         return result;
-    }, [store]);
-    return { store, snapshot, proxyRef, onInvalid, canAdd, actions, cellLock, rowLock, cellParams };
+    }
+    return { store, snapshot, proxyRef, onInvalid, canAdd, actions, cellLock, rowLock, cellParams, computeWith };
+}
+/** The form values rows follow, as text that changes only when one of them does (a new object with the same values does not). */
+function formValuesKey(values) {
+    if (!values)
+        return "";
+    return JSON.stringify(Object.keys(values).sort().map(name => [name, narrowingValue(values[name]?.value)]));
 }
 function addButtonOf(proxy) {
     return proxy?.closest(".nx-rows")?.querySelector(":scope > .nx-rows__footer .nx-rows__add:not(:disabled)") ?? null;
@@ -243,17 +285,23 @@ export function rowName(store, index) {
 export function labelText(params) {
     return typeof params.label === "string" ? params.label : (inputFieldName(params) ?? params.name);
 }
+/** A cell's control id: the rows' id, the row's key, and the input's name. */
+const cellId = (idPrefix, rowKey, name) => `${idPrefix}-${rowKey.replace(/[^A-Za-z0-9_-]/g, "_")}-${name}`;
 /**
  * One input of one row. It starts from the store's value when it mounts and writes every change back, so typing renders
  * nothing; a value set from code mounts it again (its key holds the value's revision). In a table the column header is
  * the label, so the input is named "City, row 2" for screen readers and its messages still say "City".
  */
-export const RowCell = memo(function RowCell({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock }) {
+export const RowCell = memo(function RowCell(props) {
+    const { store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock } = props;
     const [initial] = useState(() => store.get(rowKey, params.name));
     const onValueChange = useCallback((next) => store.set(rowKey, params.name, next, "input"), [store, rowKey, params.name]);
+    // Worked out from the row's other inputs: no value of its own, drawn from the row as it is now.
+    if (params.compute)
+        return _jsx(RowComputedCell, { ...props });
     const needsName = params.type === EInputTypes.RadioGroup || params.type === EInputTypes.CheckBoxGroup;
     const overrides = {
-        id: `${idPrefix}-${rowKey.replace(/[^A-Za-z0-9_-]/g, "_")}-${params.name}`,
+        id: cellId(idPrefix, rowKey, params.name),
         // Nothing goes into a parent form by itself: the rows go in whole, under the rows input's name.
         name: needsName ? `${ROW_INPUT_NAME}${idPrefix}:${rowKey}:${params.name}` : undefined,
         defaultValue: initial,
@@ -285,6 +333,31 @@ export const RowCell = memo(function RowCell({ store, rowKey, params, index, err
     }
     return renderInput(params, overrides);
 });
+/**
+ * A row input worked out from the row's others (`compute`): `ComputedInput` reading the row and the rows' `computeWith`,
+ * drawn again whenever the row changes, and writing a typed-in figure's answer as the person's change of the row
+ * (`RowsStore.setFromPerson`). In a table it has no label and no line under it: the note goes under the rows.
+ */
+function RowComputedCell({ store, rowKey, params, index, layout, idPrefix, size, design, readOnly, disabled, lock, cells }) {
+    useRowVersion(store, rowKey);
+    const at = useRef(index);
+    at.current = index;
+    const read = useCallback(() => (store.row(rowKey) ?? {}), [store, rowKey]);
+    const write = useCallback((values) => void store.setFromPerson(rowKey, values), [store, rowKey]);
+    // The row's other inputs as this row has them: its own params (`cellParams`), and read-only where the cell is locked.
+    const inputParams = useCallback((name) => {
+        const column = store.inputs.find(params => params.name === name);
+        if (!column || !cells)
+            return column;
+        const own = cells.cellParams(rowKey, column, at.current);
+        return cells.cellLock(rowKey, name, at.current) ? { ...own, readOnly: true } : own;
+    }, [store, rowKey, cells]);
+    const sourceId = useCallback((name) => cellId(idPrefix, rowKey, name), [idPrefix, rowKey]);
+    const tabular = layout === "tabular";
+    const say = cells?.onNote;
+    const onNote = useMemo(() => (tabular && say ? (note) => say(rowKey, params.name, note) : undefined), [tabular, say, rowKey, params.name]);
+    return (_jsx(ComputedInput, { params: params, id: cellId(idPrefix, rowKey, params.name), read: read, withValue: cells?.computeWith?.(), write: write, inputParams: inputParams, sourceId: sourceId, size: params.size ?? size, design: design, readOnly: readOnly || Boolean(lock), readOnlyMessage: typeof lock === "string" ? lock : undefined, disabled: disabled, cell: tabular ? { "aria-label": `${labelText(params)}, ${rowName(store, index)}` } : undefined, onNote: onNote }));
+}
 /** The legend of the rows, with the required mark and, when read-only, a lock. */
 export function RowsLegend({ id, label, required, lock }) {
     if (!hasContent(label))

package/dist/Components/Inputs/TabularForm.js

@@ -84,7 +84,7 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
             return;
         store.touch(rowKey, cell.dataset.nxCell ?? "");
     }
-    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsxs("div", { role: "cell", className: "nx-tabular__num", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), !atEnd && menu] })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name))), atEnd && (_jsxs("div", { role: "cell", className: "nx-tabular__actions", children: [removable && (_jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `Remove ${title}`, title: locked ? "Unlock the row to remove it" : "Remove", "data-tone": "danger", "data-nx-row-actions": "", disabled: locked || context.disabled, onClick: () => onAction("remove", rowKey), children: _jsx(InlineIcon, { icon: iconTrash }) })), lockable && (_jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${locked ? "Unlock" : "Lock"} ${title}`, "aria-pressed": locked, title: locked ? "Locked: unlock to change it" : "Lock, so it cannot be changed", "data-nx-row-actions": "", disabled: context.disabled, onClick: () => onAction(locked ? "unlock" : "lock", rowKey), children: _jsx(InlineIcon, { icon: locked ? iconLock : iconLockOpen }) })), menu] }))] }));
+    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsxs("div", { role: "cell", className: "nx-tabular__num", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), !atEnd && menu] })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index), cells: context }, store.revision(rowKey, params.name)) }, params.name))), atEnd && (_jsxs("div", { role: "cell", className: "nx-tabular__actions", children: [removable && (_jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `Remove ${title}`, title: locked ? "Unlock the row to remove it" : "Remove", "data-tone": "danger", "data-nx-row-actions": "", disabled: locked || context.disabled, onClick: () => onAction("remove", rowKey), children: _jsx(InlineIcon, { icon: iconTrash }) })), lockable && (_jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${locked ? "Unlock" : "Lock"} ${title}`, "aria-pressed": locked, title: locked ? "Locked: unlock to change it" : "Lock, so it cannot be changed", "data-nx-row-actions": "", disabled: context.disabled, onClick: () => onAction(locked ? "unlock" : "lock", rowKey), children: _jsx(InlineIcon, { icon: locked ? iconLock : iconLockOpen }) })), menu] }))] }));
 });
 /**
  * Rows of inputs in a table, one column per input: a person's emails or addresses, invoice lines, a salary sheet. The
@@ -135,6 +135,15 @@ export function TabularForm(props) {
     const pageRows = Math.ceil((typeof maxHeight === "number" ? maxHeight : 600) / rowHeight);
     const [range, setRange] = useState({ start: 0, end: pageRows + OVERSCAN });
     const [status, setStatus] = useState(null);
+    /** The note of the figure typed into a worked-out cell last (`compute.solve`), until it no longer applies. */
+    const [note, setNote] = useState(null);
+    const onNote = useCallback((key, name, next) => {
+        setNote(current => {
+            if (next)
+                return current && current.key === key && current.name === name && current.text === next.text && current.refused === next.refused ? current : { ...next, key, name };
+            return current && current.key === key && current.name === name ? null : current;
+        });
+    }, []);
     const pendingRef = useRef(null);
     const start = Math.min(range.start, count);
     const end = Math.min(count, Math.max(range.end, start + 1));
@@ -311,7 +320,7 @@ export function TabularForm(props) {
             layoutRef.current?.focusRow(key, name);
         }
     }
-    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll, cellLock, cellParams: rows.cellParams, rowLock: rows.rowLock, actionsAt, lockable, isLocked }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll, cellLock, rows.cellParams, rows.rowLock, actionsAt, lockable, isLocked]);
+    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll, cellLock, cellParams: rows.cellParams, rowLock: rows.rowLock, actionsAt, lockable, isLocked, computeWith: rows.computeWith, onNote }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll, cellLock, rows.cellParams, rows.rowLock, actionsAt, lockable, isLocked, rows.computeWith, onNote]);
     /**
      * Which columns are generated for **every** row on the page. The lock is then said once, on the column header,
      * instead of on each of its cells: eighteen locks down one column is eighteen times the ink for one fact. The cells
@@ -369,6 +378,10 @@ export function TabularForm(props) {
     const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths, actionsWidth ?? "0px"].join(" + ")})`;
     const tableStyle = { "--nx-tabular-columns": template, "--nx-tabular-num": numbered ? numberWidth : "0px", minWidth };
     const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
+    // A typed-in figure's note, named with its row, says more than a hint; a message of the cell in focus says more still.
+    const noteRow = note ? store.indexOf(note.key) : -1;
+    const said = note && noteRow >= 0 ? { text: `${store.names.title} ${noteRow + 1}: ${note.text}`, error: note.refused } : null;
+    const footerStatus = status?.error ? status : (said ?? status);
     return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-tabular", `nx-tabular--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "data-actions-at": atEnd ? "end" : undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), _jsx("div", { ref: viewportRef, className: "nx-tabular__viewport", tabIndex: -1, 
                 // A focused cell scrolls clear of the actions fixed at the end, as it does of the number at the start.
                 style: { maxHeight: viewportMax ?? cssLength(maxHeight), scrollPaddingRight: actionsWidth ?? undefined }, onScroll: updateRange, children: _jsxs("div", { role: "table", className: "nx-tabular__table", style: tableStyle, "aria-labelledby": label ? frame.legendId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-rowcount": count + 1, children: [_jsx("div", { ref: headRef, role: "rowgroup", className: "nx-tabular__head", children: _jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": 1, children: [numbered && (_jsxs("div", { role: "columnheader", className: "nx-tabular__num", children: [_jsx("span", { "aria-hidden": "true", children: "#" }), _jsx("span", { className: "nx-visually-hidden", children: store.names.title })] })), columns.map(params => {
@@ -376,5 +389,5 @@ export function TabularForm(props) {
                                         const locked = lockedColumns.get(params.name);
                                         const reason = typeof locked === "string" ? locked : locked ? "Read-only" : undefined;
                                         return (_jsxs("div", { role: "columnheader", className: cx("nx-tabular__head-cell", `nx-tabular__cell--${cellKind(params)}`), title: reason ?? (typeof columnHint === "string" ? columnHint : undefined), "data-nx-locked": locked ? "" : undefined, children: [_jsx("span", { className: "nx-tabular__head-label", children: params.label ?? params.name }), params.required && !locked && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" })), locked && _jsx(InlineIcon, { icon: iconLock, className: "nx-tabular__head-lock", "aria-hidden": "true" })] }, params.name));
-                                    }), actionsWidth && (_jsx("div", { role: "columnheader", className: "nx-tabular__actions", children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: status, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
+                                    }), actionsWidth && (_jsx("div", { role: "columnheader", className: "nx-tabular__actions", children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: footerStatus, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
 }

package/dist/Components/Inputs/TreeView.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, type Ref } from "react";
-import { type TreeChangeRules, type TreeChildrenPage, type TreeChildrenRequest, type TreeItem, type TreeItemChange, type TreeValue, type TreeValueMode } from "../../Helpers/TreeStore.ts";
+import { type TreeChangeRules, type TreeChildrenPage, type TreeChildrenRequest, type TreeFilter, type TreeItem, type TreeItemChange, type TreeValue, type TreeValueMode } from "../../Helpers/TreeStore.ts";
 import type { TableRowAction } from "../../Interfaces/TableInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 export type TreeAction = "create" | "update" | "delete";
@@ -204,6 +204,29 @@ export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
      * where it is. Not on a `checkable` tree, whose rows are checked instead.
      */
     selectedValue?: TreeValue | null;
+    /**
+     * Small tabs above the rows that narrow them, such as All actions · View only · Add and edit · Trash and delete on a
+     * permission tree. A filter's `match` is asked of every item without children (one without `match` shows all); the
+     * tree shows the leaves it takes and the parents that hold one. While it is on, checking a parent - or Select all -
+     * checks or unchecks only the leaves shown, a parent's box and count read only them, and a leaf the filter hides keeps
+     * its check exactly as it was. The value is the same whatever tab is on: switching tabs never changes it, and never
+     * makes a form dirty. The first filter is on at the start, unless `defaultFilter` names another.
+     */
+    filters?: readonly TreeFilter<TItem>[];
+    /** With `filters`: the id of the filter on at the start. Default the first. */
+    defaultFilter?: string;
+    /**
+     * With `filters`: keeps the tab chosen in this browser, per `key` and `viewer` (the signed-in person), and opens it
+     * next time; nothing is kept without a viewer. Read after the first draw, as every kept choice is.
+     */
+    rememberFilter?: {
+        key: string;
+        viewer?: string | null;
+    };
+    /** With `filters`: after a tab is chosen, its id. */
+    onFilterChange?: (id: string) => void;
+    /** With `filters`: what a screen reader calls the tabs. Default "Show". */
+    filtersLabel?: string;
     /** The longest name the editor takes. Default 100. */
     maxLabelLength?: number;
     /** A click on a row without a checkbox, or Enter on it. Without it, a click expands or collapses a parent. */

package/dist/Components/Inputs/TreeView.js

@@ -4,10 +4,12 @@ import { Icon, iconAlertCircle, iconCheck, iconChevronRight, iconChevronsDown, i
 import { isValidElement, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
 import { afterAnimation } from "../../Helpers/AnimationHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
+import { browserInputMemory } from "../../Helpers/InputMemory.js";
 import { isPromiseLike, REQUEST_CACHE_LIFETIME } from "../../Helpers/RequestCache.js";
-import { expireTreePages, subscribeTreeChanges, TREE_DEFAULT_KEYS, treeKey, treePageKey, treePages, TreeStore, treeStatusKey, } from "../../Helpers/TreeStore.js";
+import { expireTreePages, shownTreeFilter, subscribeTreeChanges, TREE_DEFAULT_KEYS, treeKey, treePageKey, treePages, TreeStore, treeFilterStorageKey, treeStatusKey, } from "../../Helpers/TreeStore.js";
 import { Button } from "../Documents/Button.js";
 import { ContextMenu } from "../Documents/Menu.js";
+import { TabButtons } from "../Documents/TabButtons.js";
 import { messageBox } from "../Layouts/MessageBox.js";
 import { CheckBox } from "./CheckBox.js";
 import { hasContent } from "./Field.js";
@@ -56,7 +58,7 @@ const sameItems = (a, b) => a === b || (a.length === b.length && a.every((item,
  *   loadChildren={({ parent, skip, take, signal }) => loadRegions(parent, skip, take, signal)} />
  */
 export function TreeView(props) {
-    const { items: givenItems, loadChildren, childPageSize = CHILD_PAGE_SIZE, hasChildrenKey, cacheKey, cacheLifetime = REQUEST_CACHE_LIFETIME, partialMessage = "Its items are not all loaded: open it and load them all to check it as a whole.", 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, rowActions, add, selectedValue, maxLabelLength = 100, onItemClick, loading = false, emptyMessage = "No items", toolbar = true, height, maxHeight = 420, fill = false, readOnly = false, readOnlyMessage = "Read-only: this tree cannot be changed.", disabled = false, id, className, style, "aria-label": ariaLabel, ref, } = props;
+    const { items: givenItems, loadChildren, childPageSize = CHILD_PAGE_SIZE, hasChildrenKey, cacheKey, cacheLifetime = REQUEST_CACHE_LIFETIME, partialMessage = "Its items are not all loaded: open it and load them all to check it as a whole.", 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, rowActions, add, selectedValue, filters, defaultFilter, rememberFilter, onFilterChange, filtersLabel = "Show", maxLabelLength = 100, onItemClick, loading = false, emptyMessage = "No items", toolbar = true, height, maxHeight = 420, fill = false, 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`;
@@ -75,6 +77,14 @@ export function TreeView(props) {
     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);
+    // The filter on: the tab chosen (or kept), else the default, else the first.
+    const [chosenFilter, setChosenFilter] = useState(null);
+    const activeFilter = shownTreeFilter(filters, chosenFilter, defaultFilter);
+    const activeFilterId = activeFilter?.match ? activeFilter.id : null;
+    // The store asks the filter through this, so a page passing a new arrow function each draw counts nothing again.
+    const matchRef = useRef(undefined);
+    matchRef.current = activeFilter?.match;
+    const storeMatch = (id) => (id === null ? null : item => (matchRef.current ? matchRef.current(item) : true));
     if (holderRef.current?.config !== config) {
         // A new rule (another value mode, say) keeps what was checked and expanded.
         const previous = holderRef.current?.store;
@@ -87,6 +97,7 @@ export function TreeView(props) {
             lazy,
             lazyRoots,
             hasChildrenKey,
+            filter: storeMatch(activeFilterId),
             isItemDisabled: item => (disabledRef.current ? disabledRef.current(item) : read(item, "disabled") === true || read(item, "isDisabled") === true),
         }, value ?? (previous && touchedRef.current ? previous.value() : defaultValue));
         if (previous)
@@ -97,10 +108,15 @@ export function TreeView(props) {
             store.expandAll(defaultExpanded);
         else if (defaultExpanded)
             store.expandValues(defaultExpanded);
-        holderRef.current = { config, store, items, value };
+        holderRef.current = { config, store, items, value, filterId: activeFilterId };
     }
     const holder = holderRef.current;
     const store = holder.store;
+    // Another filter (a kept one read, the filters changed): rows again, nothing checked or unchecked.
+    if (holder.filterId !== activeFilterId) {
+        store.setFilter(storeMatch(activeFilterId));
+        holder.filterId = activeFilterId;
+    }
     if (!sameItems(holder.items, items)) {
         store.setItems(items, value ?? (touchedRef.current ? store.value() : defaultValue));
         holder.items = items;
@@ -358,6 +374,59 @@ export function TreeView(props) {
     function onPanelFocus() {
         hadFocusRef.current = true;
     }
+    // Filters: the tab kept in this browser is read after the first draw, as the server drew none; a tab chosen before then wins.
+    const filterStorageKey = filters && filters.length > 0 ? treeFilterStorageKey(rememberFilter) : null;
+    const filterTouchedRef = useRef(false);
+    useLayoutEffect(() => {
+        if (!filterStorageKey)
+            return;
+        let kept = null;
+        try {
+            kept = browserInputMemory()?.getItem(filterStorageKey) ?? null;
+        }
+        catch {
+            kept = null;
+        }
+        if (kept !== null && !filterTouchedRef.current)
+            setChosenFilter(kept);
+    }, [filterStorageKey]);
+    /** A tab chosen: rows again for its filter, focus kept on a row still shown, and the choice kept. Nothing is checked or unchecked. */
+    function chooseFilter(id) {
+        const next = shownTreeFilter(filters, id, defaultFilter);
+        if (!next)
+            return;
+        filterTouchedRef.current = true;
+        setChosenFilter(next.id);
+        if (filterStorageKey) {
+            try {
+                browserInputMemory()?.setItem(filterStorageKey, next.id);
+            }
+            catch {
+                // Storage switched off or full: the choice lasts until the page goes.
+            }
+        }
+        matchRef.current = next.match;
+        const nextId = next.match ? next.id : null;
+        if (holder.filterId !== nextId) {
+            store.setFilter(storeMatch(nextId));
+            holder.filterId = nextId;
+        }
+        setMotion(null);
+        // A focused row the filter hides hands its place to its nearest shown parent, or to the first row.
+        const focused = focusKey === null ? undefined : store.find(focusKey);
+        if (focused && !store.isVisible(focused)) {
+            let up = focused.parent;
+            while (up && !store.isVisible(up))
+                up = up.parent;
+            setFocusKey((up ?? store.rows[0])?.key ?? null);
+        }
+        noteRowRef.current = null;
+        readOnlyNotice.hide();
+        lockedNotice.hide();
+        partialNotice.hide();
+        onFilterChange?.(next.id);
+        bump();
+    }
     /**
      * Changes made elsewhere, written in (the handle's `apply`). The focused row keeps focus; when it leaves the page or
      * moves in it, focus goes to the viewport first, while the DOM is whole, and comes back to it - or, when the item
@@ -1262,6 +1331,8 @@ export function TreeView(props) {
     const rendered = new Set();
     /** How many siblings a row has: all of them on the server when the loader said, loaded or not. */
     function setSize(node) {
+        if (store.filtered)
+            return store.shownChildCount(node.parent);
         const loaded = node.parent ? node.parent.children.length : store.roots.length;
         const total = store.pagesOf(node.parent)?.total;
         return total === undefined ? loaded : Math.max(total, loaded);
@@ -1329,7 +1400,7 @@ export function TreeView(props) {
         return (_jsxs("div", { role: ghost ? undefined : "treeitem", className: cx("nx-tree__row", locked && "nx-tree__row--locked", edit && "nx-tree__row--editing", node.key === selectedKey && "nx-tree__row--selected"), 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 : setSize(node), "aria-posinset": ghost ? undefined : node.position + 1, "aria-expanded": ghost || !expandable ? undefined : node.expanded, "aria-checked": ghost || !state ? undefined : state === "mixed" ? "mixed" : state === "checked", "aria-selected": !ghost && node.key === selectedKey ? true : undefined, "aria-disabled": ghost ? undefined : locked || undefined, "aria-busy": busy || childrenLoading || 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: expandable && _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(), node.partial && "+"] })), 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));
+                        } }) })), 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.shownChecked.toLocaleString(), "/", node.shownLeaves.toLocaleString(), node.partial && "+"] })), 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);
@@ -1362,6 +1433,8 @@ export function TreeView(props) {
     }
     const allState = checkable ? store.allState() : null;
     const tally = store.counts();
+    // Under a filter the toolbar counts what is shown, and everything after it.
+    const shownTally = store.filtered ? store.shownCounts() : null;
     const hasParents = store.roots.some(root => root.children.length > 0 || root.expanded);
     const hasLabel = hasContent(label);
     const shownMessage = message ?? (hasContent(error) ? error : null);
@@ -1370,11 +1443,15 @@ export function TreeView(props) {
     const rootWaiting = store.size === 0 && rootPages !== null && (rootPages.status === "idle" || rootPages.status === "loading");
     const waiting = loading || rootWaiting;
     const empty = total === 0 || rootWaiting;
-    return (_jsxs("div", { className: cx("nx-field nx-field--standard", `nx-field--${size}`, "nx-tree-field", fill && "nx-tree-field--fill", 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 || rootPages?.status === "loading") && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin", "aria-hidden": "true" }), waiting && empty
+    return (_jsxs("div", { className: cx("nx-field nx-field--standard", `nx-field--${size}`, "nx-tree-field", fill && "nx-tree-field--fill", 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: [activeFilter && filters && (_jsx("div", { className: "nx-tree__filters", children: _jsx(TabButtons, { size: "sm", wrap: true, options: filters.map(filter => ({ value: filter.id, label: filter.label, title: filter.title, disabled })), value: activeFilter.id, onChange: chooseFilter, 
+                            // An id no form has: the tabs are no value of the form around the tree.
+                            form: `${treeId}-filters`, "aria-label": filtersLabel }) })), 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 || rootPages?.status === "loading") && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin", "aria-hidden": "true" }), waiting && empty
                                         ? "Loading…"
                                         : checkable
-                                            ? `${tally.checked.toLocaleString()} of ${tally.total.toLocaleString()} selected`
-                                            : `${store.size.toLocaleString()} ${store.size === 1 ? "item" : "items"}${lazy ? " loaded" : ""}`, !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" })), add && !blocked && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), "aria-disabled": add.disabled || undefined, title: add.description, onMouseDown: keepEditorFocus, onKeyDown: addNotice.onKeyDown, onClick: event => (add.disabled ? addNotice.show(event.currentTarget) : add.onClick()), children: add.label }))] })] })), _jsx(ContextMenu, { items: contextItems, onSelect: onContextSelect, disabled: contextItems.length === 0, "aria-label": "Item actions", children: _jsx("div", { ref: viewportRef, className: "nx-tree__viewport", style: fill ? undefined : { 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 ? (waiting ? (_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": waiting || undefined, 
+                                            ? shownTally
+                                                ? `${shownTally.checked.toLocaleString()} of ${shownTally.total.toLocaleString()} selected · ${tally.checked.toLocaleString()} of ${tally.total.toLocaleString()} in all`
+                                                : `${tally.checked.toLocaleString()} of ${tally.total.toLocaleString()} selected`
+                                            : `${store.size.toLocaleString()} ${store.size === 1 ? "item" : "items"}${lazy ? " loaded" : ""}`, !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" })), add && !blocked && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconPlus }), "aria-disabled": add.disabled || undefined, title: add.description, onMouseDown: keepEditorFocus, onKeyDown: addNotice.onKeyDown, onClick: event => (add.disabled ? addNotice.show(event.currentTarget) : add.onClick()), children: add.label }))] })] })), _jsx(ContextMenu, { items: contextItems, onSelect: onContextSelect, disabled: contextItems.length === 0, "aria-label": "Item actions", children: _jsx("div", { ref: viewportRef, className: "nx-tree__viewport", style: fill ? undefined : { 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 ? (waiting ? (_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: store.filtered && store.size > 0 && activeFilter ? `No items in "${activeFilter.label}".` : 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": waiting || undefined, 
                                 // As tall as all of its rows at every moment of a commit, not only once it has finished. A scroll that
                                 // moves the window makes React take the rows that leave it out before it puts the new ones in and sets
                                 // this padding, and a layout in between - Chrome lays the page out inside the removal of a focused row,

package/dist/Components/Layouts/Popup.d.ts

@@ -40,6 +40,11 @@ export interface PopupProps {
     variant?: PopupVariant;
     /** Width: `xs` 360, `sm` 440, `md` 560 (default), `lg` 720, `xl` 960, or `full`. */
     size?: PopupSize;
+    /**
+     * Height, pixels or a CSS length: the body scrolls inside it. Default: as tall as the content, up to the window. A
+     * docked window is `32rem` tall by default, never taller than the window.
+     */
+    height?: number | string;
     /** Buttons at the end, right-aligned. */
     footer?: ReactNode;
     /** Shows the close button. Default true. */
@@ -67,13 +72,28 @@ export interface PopupProps {
     reopen?: PopupReopen;
     /** The window state, when the page controls it; pair it with `onWindowStateChange`. */
     windowState?: PopupWindowState;
+    /**
+     * A window that leaves the page usable: it opens without a backdrop at the bottom right, beside the other docked
+     * windows (the first on the right, each next one to its left; on a screen too narrow for two, over each other), the
+     * one last used on top. Esc inside it closes it, Tab leaves it for the page. A mail client's chat popups and compose
+     * window are docked. Minimize and maximize work as on any popup. Default false: a popup locks the page.
+     */
+    docked?: boolean;
+    /**
+     * A drawer: the window's whole height at its end edge (the right, in a left-to-right page), its width from `size`
+     * (all of it on a phone). Modal as any popup; it neither moves nor maximizes. A board's Add widget list is one.
+     */
+    drawer?: boolean;
     /** The window state each time the popup opens, when the page does not control it. Default `normal`. */
     defaultWindowState?: Exclude<PopupWindowState, "minimized">;
     /** When the buttons, a double-click on the title bar, a drag, or the minimized bar change the window state. */
     onWindowStateChange?: (state: PopupWindowState) => void;
     /** A body without padding, for tables and lists that reach the edges. */
     flush?: boolean;
-    /** A selector for the element that takes focus when the popup opens. Default: the first control in the body or footer. */
+    /**
+     * A selector for the element that takes focus when the popup opens. Default: an element of the body or footer marked
+     * `data-nx-focus` (with `tabIndex={-1}` when it is no control, such as a heading), else the first control there.
+     */
     initialFocus?: string;
     /** Name for screen readers when there is no title. */
     "aria-label"?: string;
@@ -96,4 +116,4 @@ export interface PopupProps {
  * @example
  * <Popup open={open} onClose={() => setOpen(false)} title="Edit booking" footer={<Button variant="primary">Save</Button>}>…</Popup>
  */
-export declare function Popup({ open, onClose, onClosed, title, description, icon, variant, size, footer, closable, closeOnEscape, closeOnBackdrop, minimizable, maximizable, movable, reopen, windowState: windowStateProp, defaultWindowState, onWindowStateChange, flush, initialFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, children, }: PopupProps): import("react").JSX.Element;
+export declare function Popup({ open, onClose, onClosed, title, description, icon, variant, size, height, footer, closable, closeOnEscape, closeOnBackdrop, minimizable, maximizable: maximizableProp, movable: movableProp, reopen, docked, drawer, windowState: windowStateProp, defaultWindowState, onWindowStateChange, flush, initialFocus, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, children, }: PopupProps): import("react").JSX.Element | null;