nexus-shared 3.2.0 → 4.0.0

package/dist/Components/Forms/CrudParts.js

@@ -5,6 +5,8 @@ import { motionAllowed } from "../../Helpers/AnimationHelpers.js";
 import { isAbortError } from "../../Helpers/ApiResponses.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { isAwaitedCrudField } from "../../Helpers/CrudDetailsTabs.js";
+import { crudDetailsRuns } from "../../Helpers/FormConfirm.js";
 import { readPath } from "../../Helpers/TableHelpers.js";
 import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { TableCellValue } from "../Viewers/DataTableParts.js";
@@ -15,8 +17,12 @@ import { MarkdownView } from "../Viewers/MarkdownView.js";
  * not drawn.
  */
 const usedHeight = (element) => parseFloat(getComputedStyle(element).height);
-/** A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. */
-export function CrudDetails({ row, columns, load, render }) {
+/**
+ * A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. Where
+ * columns name a `group` (a table's band), each run of neighbouring columns with one group is a section under that
+ * heading; columns with no group draw as before, without one.
+ */
+export function CrudDetails({ row, columns, load, render, currency }) {
     const [record, setRecord] = useState(row);
     const [state, setState] = useState(load ? "loading" : "done");
     const rootRef = useRef(null);
@@ -25,7 +31,7 @@ export function CrudDetails({ row, columns, load, render }) {
     const preferences = useDatePreferences();
     const timeZone = useBrowserTimeZone();
     const locale = useNumberLocale();
-    const options = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined, locale }), [preferences, timeZone, locale]);
+    const options = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined, locale, currency }), [preferences, timeZone, locale, currency]);
     useEffect(() => {
         if (!load)
             return;
@@ -64,6 +70,50 @@ export function CrudDetails({ row, columns, load, render }) {
     }, [record]);
     // A field the list's row does not carry can only be filled by the full record. Columns that draw or work out their
     // own value (`render`, `value`) draw as always, because only they know what they read.
-    const awaited = (column) => state !== "done" && !column.render && !column.value && readPath(record, column.key) === undefined;
-    return (_jsx("div", { ref: rootRef, className: "nx-crud-details", "aria-busy": state === "loading" || undefined, children: render ? (render(record)) : (_jsx("dl", { className: "nx-crud-details__list", children: columns.map(column => (_jsxs("div", { className: cx("nx-crud-details__item", column.wrap && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: awaited(column) ? (state === "failed" ? _jsx("span", { className: "nx-crud-details__missing", children: "Not loaded" }) : null) : column.markdown && !column.render ? (_jsx(MarkdownView, { value: String(readPath(record, column.key) ?? ""), placeholder: `No ${column.label.toLowerCase()}` })) : (_jsx(TableCellValue, { column: column, row: record, options: options })) })] }, column.key))) })) }));
+    const awaited = (column) => isAwaitedCrudField(column, record, state);
+    // Sections only where a column names a group: without one the list is drawn exactly as it always was.
+    const runs = useMemo(() => (columns.some(column => column.group) ? crudDetailsRuns(columns) : null), [columns]);
+    const list = (fields) => (_jsx("dl", { className: "nx-crud-details__list", children: fields.map(column => (_jsxs("div", { className: cx("nx-crud-details__item", column.wrap && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: awaited(column) ? (state === "failed" ? _jsx("span", { className: "nx-crud-details__missing", children: "Not loaded" }) : null) : column.markdown && !column.render ? (_jsx(MarkdownView, { value: String(readPath(record, column.key) ?? ""), placeholder: `No ${column.label.toLowerCase()}` })) : (_jsx(TableCellValue, { column: column, row: record, options: options })) })] }, column.key))) }));
+    return (_jsx("div", { ref: rootRef, className: "nx-crud-details", "aria-busy": state === "loading" || undefined, children: render
+            ? render(record)
+            : runs
+                ? runs.map((run, index) => (_jsxs("div", { className: "nx-crud-details__section", children: [run.group && _jsx("h3", { className: "nx-crud-details__heading", children: run.group }), list(run.columns)] }, `${index}:${run.group ?? ""}`)))
+                : list(columns) }));
+}
+/**
+ * The footer of a tab in a record's workspace (`CrudDetailsOptions.tabs`): one bar, its words at the start and its
+ * buttons at the end, put last in the tab. While the tab scrolls it stays at the bottom of the workspace's panel, so a
+ * long form's Save never falls below the window; at the end of the tab it sits in its place. It is drawn on the panel's
+ * own surface under a hairline, across the panel's whole width, with the popup footer's room, and on a phone its words
+ * and its buttons wrap as whole groups. Outside a workspace it is a plain bar where it stands.
+ *
+ * A field the keyboard moves to is scrolled into view above it, never under it.
+ *
+ * @example
+ * <ApiForm form={form} buttons={false} api={STAYS.create} inputs={STAY_INPUTS} />
+ * <CrudTabFooter>
+ *   <p role="status" aria-live="polite">3 nights in a double room · To pay Rs. 10,500.00</p>
+ *   <FormButtons form={form} submitLabel="Save" />
+ * </CrudTabFooter>
+ */
+export function CrudTabFooter({ children, className }) {
+    const ref = useRef(null);
+    // Its height is the room the panel keeps at its foot when the focus scrolls a field into view (`scroll-padding`).
+    useLayoutEffect(() => {
+        const bar = ref.current;
+        const panel = bar?.closest(".nx-crud-workspace__panel");
+        if (!bar || !panel)
+            return;
+        const write = () => panel.style.setProperty("--nx-crud-tab-footer-size", `${bar.getBoundingClientRect().height}px`);
+        write();
+        if (typeof ResizeObserver === "undefined")
+            return () => panel.style.removeProperty("--nx-crud-tab-footer-size");
+        const observer = new ResizeObserver(write);
+        observer.observe(bar);
+        return () => {
+            observer.disconnect();
+            panel.style.removeProperty("--nx-crud-tab-footer-size");
+        };
+    }, []);
+    return (_jsx("div", { ref: ref, className: cx("nx-crud-tab-footer", className), children: children }));
 }

package/dist/Components/Forms/CrudRowForms.d.ts

@@ -0,0 +1,26 @@
+import type { CrudRowForm } from "../../Interfaces/CrudInterfaces.ts";
+import type { FormValues } from "../../Interfaces/FormInterfaces.ts";
+/** What `openCrudRowForm` is opened with. */
+export interface CrudRowFormRequest<TRow extends FormValues = FormValues, TValues extends FormValues = FormValues> {
+    form: CrudRowForm<TRow, TValues>;
+    /** The record, as the list has it when the action was chosen. */
+    row: TRow;
+    /** The record's key as text: one popup per record and row form. */
+    key: string;
+    /** What the endpoints are called with in `{id}`: the form's `target`, else the record's key. */
+    id: string | number;
+    /** The record's key field, sent beside `id` as the details are. */
+    rowKey: string;
+    /** Tells one CRUD's popups from another's. */
+    name: string;
+    /** The record's name, under the popup's title. */
+    label: string;
+    /** After a save: the answer and the values sent (before `transform`). The popup closes itself. */
+    onSaved: (result: unknown, values: TValues) => void;
+}
+/**
+ * Opens a row form's popup: one per record and row form, brought back if it is open. Its values are read first when it
+ * has a `load` - and until they are, Save is out of reach: a read that fails (an answer that is not ok, or no record)
+ * shows "Could not load the values" with Retry and no Save, so an empty form can never be saved over the record.
+ */
+export declare function openCrudRowForm<TRow extends FormValues, TValues extends FormValues>(request: CrudRowFormRequest<TRow, TValues>): void;

package/dist/Components/Forms/CrudRowForms.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { unwrapApiResult } from "../../Helpers/ApiResponses.js";
+import { isApiEndpoint } from "../../Helpers/ApiRoutes.js";
+import { FormStore } from "../../Helpers/FormStore.js";
+import { api as browserApi } from "../../Services/BrowserApi.js";
+import { openPopup } from "../Layouts/PopupHost.js";
+import { popupRuleFor } from "../Layouts/PopupRules.js";
+import { ApiForm } from "./ApiForm.js";
+import { confirmDiscard, FormButtons } from "./SubmitForm.js";
+/*
+ * A row action that opens a form of its own for the record, in a popup (`Crud` `rowForms`): its inputs, the values it
+ * opens on (`load`), where a save goes (`submit`, `transform`), and the answer handed back so the CRUD writes what it
+ * names into the record (`writes`, Helpers/CrudRowForms.ts). The CRUD decides where it is offered and does the writing.
+ */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const isPromise = (value) => typeof value?.then === "function";
+/** One popup's load state, shared by the form (which loads) and the footer (whose Save waits for it). */
+function rowFormLoad(initial) {
+    let state = initial;
+    const listeners = new Set();
+    return {
+        get: () => state,
+        set(next) {
+            if (next === state)
+                return;
+            state = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+}
+/**
+ * Opens a row form's popup: one per record and row form, brought back if it is open. Its values are read first when it
+ * has a `load` - and until they are, Save is out of reach: a read that fails (an answer that is not ok, or no record)
+ * shows "Could not load the values" with Retry and no Save, so an empty form can never be saved over the record.
+ */
+export function openCrudRowForm(request) {
+    const { form: params, key, name, label } = request;
+    const form = new FormStore();
+    const status = rowFormLoad(params.load ? "loading" : "done");
+    const popupKey = `${name}-${params.id}-${key}`;
+    openPopup({
+        key: popupKey,
+        reopen: "restore",
+        title: params.title ?? params.label,
+        description: label,
+        icon: params.icon,
+        size: params.size ?? "md",
+        closeOnBackdrop: false,
+        // A CRUD page's forms can be put aside on the dock, as its Add and Edit; a page's rule for the key may say no.
+        minimizable: popupRuleFor(popupKey)?.minimizable ?? true,
+        beforeClose: () => confirmDiscard(form),
+        content: popup => (_jsx(CrudRowFormBody, { request: request, form: form, status: status, onSaved: (result, values) => {
+                request.onSaved(result, values);
+                popup.close();
+            } })),
+        footer: popup => _jsx(CrudRowFormFooter, { form: form, status: status, submitLabel: params.submitLabel, onCancel: () => popup.close() }),
+    });
+}
+/** The footer: the form's bar, its Save out of reach while the values could not be read. */
+function CrudRowFormFooter({ form, status, submitLabel, onCancel }) {
+    const state = useSyncExternalStore(status.subscribe, status.get, status.get);
+    return _jsx(FormButtons, { form: form, submitLabel: submitLabel ?? "Save", readOnly: state === "failed", onCancel: onCancel });
+}
+/** The popup's form: the values read once (and again on Retry), the inputs from the record and what was read. */
+function CrudRowFormBody({ request, form, status, onSaved, }) {
+    const { form: params, row, id, rowKey, label } = request;
+    const [loaded, setLoaded] = useState(null);
+    // The inputs: given, or made from the record and what was read - at once, or when a promise of them lands.
+    const made = useMemo(() => (typeof params.inputs === "function" ? params.inputs(row, loaded) : params.inputs), [params, row, loaded]);
+    const [later, setLater] = useState(null);
+    useEffect(() => {
+        if (!isPromise(made))
+            return;
+        let live = true;
+        made.then(inputs => live && setLater(inputs), () => live && setLater([]));
+        return () => {
+            live = false;
+        };
+    }, [made]);
+    const inputs = isPromise(made) ? (later ?? []) : made;
+    const load = params.load;
+    const loadValue = load
+        ? (signal) => {
+            status.set("loading");
+            const read = isApiEndpoint(load)
+                ? browserApi.get(load, { params: { id, [rowKey]: id }, signal, toast: false }).then(unwrapApiResult)
+                : load(row, signal);
+            return Promise.resolve(read)
+                .then(values => {
+                // A read that answers no record is a failure: the form would otherwise open empty and save that.
+                if (!isRecord(values))
+                    throw new Error("The values could not be read.");
+                setLoaded(values);
+                status.set("done");
+                return values;
+            })
+                .catch((error) => {
+                if (!signal.aborted)
+                    status.set("failed");
+                throw error;
+            });
+        }
+        : undefined;
+    return (_jsx(ApiForm, { form: form, inputs: inputs, buttons: false, defaultValue: load ? undefined : row, loadValue: loadValue, api: params.submit, transform: params.transform ? values => params.transform(values, row, loaded) : undefined, "aria-label": `${params.title ?? params.label}: ${label}`, onSuccess: (result, values) => onSaved(result, values) }));
+}

package/dist/Components/Forms/CrudScopes.d.ts

@@ -0,0 +1,28 @@
+import type { CrudScope, CrudScopes } from "../../Interfaces/CrudInterfaces.ts";
+import type { FormValues } from "../../Interfaces/FormInterfaces.ts";
+/** Where a CRUD's scopes stand. */
+export interface CrudScopeState<TRow extends FormValues = FormValues> {
+    /** The scope shown: `null` for the CRUD's own list. */
+    scope: CrudScope<TRow> | null;
+    /** The scopes offered now, in their order. */
+    offered: CrudScope<TRow>[];
+    /** While the kept choice is not read yet (the first draw, with `remember`): the CRUD asks for no list. */
+    waiting: boolean;
+    /** Shows a scope (`null`: the CRUD's own list) and keeps it as the person's choice. */
+    choose: (scope: string | null) => void;
+}
+/**
+ * The scope a CRUD shows. The choice kept in this browser is read after the first draw (a server draw has no storage, and
+ * the browser's first draw must match it), and before the CRUD asks for a list; one the CRUD does not offer now (the
+ * person's rights changed) opens the CRUD's own list and stays kept for when it is offered again.
+ */
+export declare function useCrudScopes<TRow extends FormValues>(scopes: CrudScopes<TRow> | undefined, callable: (scope: CrudScope<TRow>) => boolean): CrudScopeState<TRow>;
+/**
+ * The toolbar's control for the scopes offered: one is a switch (on shows it), two or more are tabs with the CRUD's own
+ * list first. Each says its `description` as its tooltip. Nothing while no other list is offered.
+ */
+export declare function CrudScopeControl<TRow extends FormValues>({ scopes, state, plural }: {
+    scopes: CrudScopes<TRow> | undefined;
+    state: CrudScopeState<TRow>;
+    plural: string;
+}): import("react").JSX.Element | null;

package/dist/Components/Forms/CrudScopes.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { crudScopeStorageKey, offeredCrudScopes, readCrudScope, shownCrudScope, writeCrudScope } from "../../Helpers/CrudScopes.js";
+import { TabButtons } from "../Documents/TabButtons.js";
+import { Switch } from "../Inputs/CheckBox.js";
+/*
+ * A CRUD whose list can be widened (`Crud` `scopes`): which list shows, the person's choice kept in this browser per
+ * viewer, and the switch (or the tabs) in the toolbar that picks it. The rules are in Helpers/CrudScopes.ts.
+ */
+/** This browser's local storage, or nothing where it cannot be reached (a server draw, storage switched off). */
+function browserStorage() {
+    try {
+        return typeof window === "undefined" ? null : window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * The scope a CRUD shows. The choice kept in this browser is read after the first draw (a server draw has no storage, and
+ * the browser's first draw must match it), and before the CRUD asks for a list; one the CRUD does not offer now (the
+ * person's rights changed) opens the CRUD's own list and stays kept for when it is offered again.
+ */
+export function useCrudScopes(scopes, callable) {
+    const storageKey = crudScopeStorageKey(scopes?.remember);
+    const [chosen, setChosen] = useState(null);
+    const [readKey, setReadKey] = useState(null);
+    // A choice made before the kept one was read is the person's: reading never replaces it.
+    const touched = useRef(false);
+    const latest = useRef(scopes);
+    latest.current = scopes;
+    useLayoutEffect(() => {
+        if (!storageKey)
+            return;
+        const kept = readCrudScope(browserStorage(), storageKey);
+        if (!touched.current && kept !== undefined)
+            setChosen(kept);
+        setReadKey(storageKey);
+    }, [storageKey]);
+    const waiting = storageKey !== null && readKey !== storageKey;
+    const offered = offeredCrudScopes(scopes, callable);
+    const scope = waiting ? null : shownCrudScope(offered, chosen);
+    // The page hears of every change of the list shown: a pick, a kept choice opened, a scope no longer offered.
+    const shownId = scope?.id ?? null;
+    const told = useRef(null);
+    useEffect(() => {
+        if (told.current === shownId)
+            return;
+        told.current = shownId;
+        latest.current?.onChange?.(shownId);
+    }, [shownId]);
+    const choose = (next) => {
+        touched.current = true;
+        setChosen(next);
+        writeCrudScope(browserStorage(), storageKey, next);
+    };
+    return { scope, offered, waiting, choose };
+}
+/** The tab of the CRUD's own list among the scopes' tabs. */
+const OWN_TAB = "";
+/**
+ * The toolbar's control for the scopes offered: one is a switch (on shows it), two or more are tabs with the CRUD's own
+ * list first. Each says its `description` as its tooltip. Nothing while no other list is offered.
+ */
+export function CrudScopeControl({ scopes, state, plural }) {
+    const { offered, scope, choose } = state;
+    if (!scopes || offered.length === 0)
+        return null;
+    if (offered.length === 1) {
+        const only = offered[0];
+        return _jsx(Switch, { size: "sm", label: only.label, title: only.description, checked: scope?.id === only.id, onValueChange: on => choose(on ? only.id : null) });
+    }
+    const options = [{ value: OWN_TAB, label: scopes.label ?? "Own", title: scopes.description }, ...offered.map(option => ({ value: option.id, label: option.label, title: option.description }))];
+    return _jsx(TabButtons, { size: "sm", options: options, value: scope?.id ?? OWN_TAB, onChange: value => choose(value === OWN_TAB ? null : value), "aria-label": `${plural[0]?.toUpperCase() ?? ""}${plural.slice(1)} to show` });
+}

package/dist/Components/Forms/CrudTree.d.ts

@@ -0,0 +1,90 @@
+import { type ReactNode, type Ref } from "react";
+import { type CrudBackend } from "../../Helpers/CrudBackend.ts";
+import { type TreeItem } from "../../Helpers/TreeStore.ts";
+import type { CrudActionName, CrudChange, CrudEndpoints, CrudFormOptions, CrudInputs, CrudTreePlacement } from "../../Interfaces/CrudInterfaces.ts";
+import type { FormValues } from "../../Interfaces/FormInterfaces.ts";
+import type { TableColumn } from "../../Interfaces/TableInterfaces.ts";
+import { type TreeViewHandle, type TreeViewProps } from "../Inputs/TreeView.tsx";
+/** What the panel beside the tree is handed (`details`). */
+export interface CrudTreeDetails<TRow extends FormValues = FormValues> {
+    /** The record picked in the tree as it is now - after an edit, after the trash; `null` before a pick. */
+    row: TRow | null;
+    /** Its fields, as the details popup draws them; `null` before a pick. */
+    body: ReactNode;
+    /**
+     * Buttons for what its list offers: Add New under it, Edit, Move to trash and History for an active record; Recover
+     * and Delete permanently once it is in the trash; Move back to trash once deleted. `null` before a pick.
+     */
+    actions: ReactNode;
+}
+/** Props of `CrudTree`. */
+export interface CrudTreeProps<TRow extends FormValues = FormValues, TItem extends TreeItem = TreeItem> {
+    /** The controller's endpoints, as the data table's `Crud` is given them. */
+    api: CrudEndpoints;
+    /** The Add and Edit forms' inputs: the data table's own, so a record is added the same way from either. */
+    inputs: CrudInputs<TRow>;
+    /** The fields the panel shows: the data table's columns. */
+    columns: readonly TableColumn<TRow>[];
+    /** Where the records sit in the tree, and the tree's keys and cache: the same placement a `Crud`'s `trees` names. */
+    place: CrudTreePlacement<TRow, TItem>;
+    /** The tree: how its levels load, its name for screen readers, `fill`, its look. Its keys and its cache come from `place`. */
+    tree: Omit<TreeViewProps<TItem>, "valueKey" | "hasChildrenKey" | "cacheKey" | "rowActions" | "add" | "onItemClick" | "selectedValue" | "ref" | "checkable" | "creatable" | "editable" | "deletable"> & {
+        loadChildren: NonNullable<TreeViewProps<TItem>["loadChildren"]>;
+    };
+    /** What one record is: "region". Default: the endpoints' subject. */
+    subject?: string;
+    subjectPlural?: string;
+    /** Tells popups apart. Default: the subject - so the tree's forms are the data table's. */
+    name?: string;
+    /** The field that tells records apart. Default `id`. */
+    rowKey?: string;
+    /** Names a record in titles and questions. Default: the first column's text. */
+    rowLabel?: (row: TRow) => string;
+    /** The Add and Edit forms: the data table's own `form`. */
+    form?: CrudFormOptions<TRow>;
+    /** The built-in actions to offer, of create, edit, history, trash, recover, delete and trashFromDelete. Default all. */
+    actions?: readonly CrudActionName[];
+    backend?: CrudBackend;
+    /** After every change made here. */
+    onChange?: (change: CrudChange<TRow>) => void;
+    /** The panel beside the tree, drawn by the page: the picked record, its fields, and its buttons. */
+    details?: (details: CrudTreeDetails<TRow>) => ReactNode;
+    ref?: Ref<CrudTreeHandle<TRow, TItem>>;
+}
+/** What `ref` gives on a `CrudTree`. */
+export interface CrudTreeHandle<TRow extends FormValues = FormValues, TItem extends TreeItem = TreeItem> {
+    /** The tree's own handle: `refresh` for a Reload, `expand`, `reveal`. */
+    readonly tree: TreeViewHandle<TItem> | null;
+    /**
+     * Opens the Add form under an item, or with the new record's values alone. With `place.placeKeys` it always adds inside
+     * an item - the selected row when none is given, and nothing while none is - its place fixed in the form.
+     */
+    create: (parent?: TItem | null, values?: Partial<TRow>) => void;
+    /** Opens a record's Edit form. */
+    edit: (row: TRow) => void;
+    /** Shows a record in the panel and selects its row, or neither. */
+    pick: (row: TRow | null) => void;
+}
+/**
+ * A controller's records as a tree, with Add New, Edit, Move to trash, Recover, Delete and History where they are shown:
+ * an icon button on each row for Add New under it, Edit and Move to trash (Insert, F2 and Delete on a focused row, all
+ * three in its context menu), Add New in the tree's toolbar, and every action of the picked record on the panel beside
+ * the tree. The forms and the calls are the data table's; a change is written into the tree and its kept pages, so no
+ * level is read again for it.
+ *
+ * A click or Enter on a row selects it - marked in the tree, and staying so while focus, the keys and the chevrons move
+ * on - and a record's row shows that record in the panel; a row that is not a record (a country above its regions)
+ * empties the panel and opens.
+ *
+ * With `place.placeKeys` the tree fixes where a record sits: every Add goes inside a row - the toolbar's inside the
+ * selected row, the one the panel shows, and saying why it cannot until there is one - and the Add and Edit forms show
+ * those fields read-only, saying why.
+ *
+ * @example
+ * <AdminSplit>
+ *   <CrudTree api={REGIONS} inputs={REGION_INPUTS} columns={REGION_COLUMNS} place={REGION_TREE} form={REGION_FORM}
+ *     tree={{ loadChildren, fill: true, "aria-label": "Regions" }}
+ *     details={({ row, body, actions }) => <AdminPanel title={row?.name ?? "Details"} action={actions}>{body}</AdminPanel>} />
+ * </AdminSplit>
+ */
+export declare function CrudTree<TRow extends FormValues = FormValues, TItem extends TreeItem = TreeItem>(props: CrudTreeProps<TRow, TItem>): import("react").JSX.Element;