nexus-shared 3.1.0 → 3.2.0

package/dist/Components/Inputs/DatePicker.js

@@ -10,6 +10,7 @@ import { Calendar } from "./Calendar.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 const GAP = 4;
 const MARGIN = 8;
 /**
@@ -20,7 +21,9 @@ const MARGIN = 8;
  * @example <DatePicker name="checkIn" label="Check-in" required min={todayIsoDate()} />
  */
 export function DatePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: this date cannot be changed.", validateOn, value, defaultValue, onValueChange, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: this date cannot be changed.", validateOn, value, defaultValue, onValueChange, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const settings = {
         calendar: props.calendar ?? preferences.calendar,

package/dist/Components/Inputs/DateRangePicker.js

@@ -10,6 +10,7 @@ import { Calendar } from "./Calendar.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 const GAP = 4;
 const MARGIN = 8;
 // Two months of the small calendar are about 480px wide; a narrower window gets one month.
@@ -26,7 +27,9 @@ const sameRange = (a, b) => (a === null || b === null ? a === b : a[0] === b[0]
  * @example <DateRangePicker startName="checkIn" endName="checkOut" label="Stay" required min={todayIsoDate()} minDistance={1} />
  */
 export function DateRangePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, months = 2, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: these dates cannot be changed.", validateOn, value, defaultValue, onValueChange, startName, endName, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, minDistance, maxDistance, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, months = 2, clearable = true, closeOnSelect = true, fieldName, readOnlyMessage = "Read-only: these dates cannot be changed.", validateOn, value, defaultValue, onValueChange, startName, endName, weekStart, weekendDays, isDateDisabled, showOutsideDays, className, inputClassName, style, required, min, max, minDistance, maxDistance, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const settings = {
         calendar: props.calendar ?? preferences.calendar,

package/dist/Components/Inputs/DateTimePicker.js

@@ -15,6 +15,7 @@ import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 import { TimePanel } from "./TimePanel.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 const PANEL_GAP = 4;
 const PANEL_MARGIN = 8;
 /**
@@ -27,7 +28,9 @@ const PANEL_MARGIN = 8;
  * @example <DateTimePicker name="pickupAt" label="Pickup" required min={new Date()} step={900} />
  */
 export function DateTimePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, calendar: calendarProp, format: formatProp, timeFormat: timeFormatProp, script: scriptProp, timeZone: timeZoneProp, showTimeZone = Boolean(timeZoneProp), view = "columns", defaultTime, clearable = true, fieldName, readOnlyMessage = "Read-only: this date and time cannot be changed.", validateOn, value, defaultValue, onValueChange, isDateDisabled, isTimeDisabled, weekStart, weekendDays, showOutsideDays, className, inputClassName, style, required, min, max, minTime, maxTime, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, calendar: calendarProp, format: formatProp, timeFormat: timeFormatProp, script: scriptProp, timeZone: timeZoneProp, showTimeZone = Boolean(timeZoneProp), view = "columns", defaultTime, clearable = true, fieldName, readOnlyMessage = "Read-only: this date and time cannot be changed.", validateOn, value, defaultValue, onValueChange, isDateDisabled, isTimeDisabled, weekStart, weekendDays, showOutsideDays, className, inputClassName, style, required, min, max, minTime, maxTime, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const browserZone = useBrowserTimeZone();
     // Unknown on the server and while the page hydrates: the box stays empty until then rather than show another zone's time.

package/dist/Components/Inputs/Dropdown.js

@@ -11,6 +11,7 @@ import { DropdownChip, DropdownMedia, DropdownOption, DropdownTag, hasIcon } fro
 import { Field } from "./Field.js";
 import { useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 /** Rows a local list renders at first, and adds each time it scrolls near its end, so 10,000 options open at once. */
 const RENDER_STEP = 100;
 /** Closer to the end of the list than this, in pixels, renders or loads more. */
@@ -27,7 +28,9 @@ const NAMES_LISTED = 20;
 const SKELETON_WIDTHS = ["72%", "54%", "64%", "46%"];
 const IDLE_LIST = { search: "", loadKey: undefined, items: [], page: 0, hasMore: false, total: undefined, status: "idle", errorPage: 1, firstKeys: new Set() };
 export function Dropdown(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, valueKey = "value", labelKey = "label", descriptionKey = "description", iconKey = "icon", columns, searchKeys, isOptionDisabled = isDisabledItem, isOptionInactive = isInactiveItem, searchable: searchableProp, clearable = true, loading = false, emptyMessage = "No options", renderValue, panelWidth, readOnlyMessage, fieldName, validateOn, className, inputClassName, style, required, validate, name, form, placeholder, disabled, readOnly, ref, onBlur, onFocus, onKeyDown, onClick, onInvalid, multiple: multipleProp, value: valueProp, defaultValue, onValueChange, min, max, selectAll = true, maxChips = 10, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, options, loadOptions, loadKey, pageSize = 50, selectedOptions, resolveOptions, valueKey = "value", labelKey = "label", descriptionKey = "description", iconKey = "icon", columns, searchKeys, isOptionDisabled = isDisabledItem, isOptionInactive = isInactiveItem, searchable: searchableProp, clearable = true, loading = false, emptyMessage = "No options", renderValue, panelWidth, readOnlyMessage, fieldName, validateOn, className, inputClassName, style, required, validate, name, form, placeholder, disabled, readOnly, ref, onBlur, onFocus, onKeyDown, onClick, onInvalid, multiple: multipleProp, value: valueProp, defaultValue, onValueChange, min, max, selectAll = true, maxChips = 10, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const multiple = multipleProp === true;
     const controlled = valueProp !== undefined;
     const editable = !disabled && !readOnly;

package/dist/Components/Inputs/InputRenderer.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
 import { CheckBox, RadioButton, Switch } from "./CheckBox.js";
 import { CheckBoxGroup } from "./CheckBoxGroup.js";
+import { CodeBox } from "./CodeBox.js";
 import { DatePicker } from "./DatePicker.js";
 import { DateRangePicker } from "./DateRangePicker.js";
 import { DateTimePicker } from "./DateTimePicker.js";
@@ -58,6 +59,8 @@ export function renderInput(params, overrides = {}) {
             return _jsx(TextArea, { ...props });
         case "number":
             return _jsx(NumberBox, { ...props });
+        case "code":
+            return _jsx(CodeBox, { ...props });
         case "checkbox":
             return _jsx(CheckBox, { ...props });
         case "switch":

package/dist/Components/Inputs/NumberBox.js

@@ -4,7 +4,7 @@ import { InlineIcon, iconMinus, iconPlus } from "nexus-icons";
 import { useEffect, useLayoutEffect, useRef, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { clampNumber, cleanNumberText, formatNumber, getNumberSymbols, isPartialNumber, parseNumber, readPastedNumber, roundDecimal, stepNumber, } from "../../Helpers/NumberHelpers.js";
-import { useNumberLocale } from "../../Helpers/UserPreferences.js";
+import { useInputDesign, useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { validateNumber } from "../../Helpers/ValidationHelpers.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
@@ -24,7 +24,9 @@ const isNumber = (value) => value !== null && !Number.isNaN(value);
  * @example <NumberBox label="Amount" prefix="Rs" min={0} decimals={2} fixedDecimals grouping required />
  */
 export function NumberBox(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, iconEnd, prefix, suffix, step = 1, stepper = false, clamp = false, readOnlyMessage = "Read-only: this number cannot be changed.", fieldName, validateOn, value, defaultValue, onValueChange, decimals, fixedDecimals = false, grouping = false, locale: ownLocale, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onPaste, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, iconEnd, prefix, suffix, step = 1, stepper = false, clamp = false, readOnlyMessage = "Read-only: this number cannot be changed.", fieldName, validateOn, value, defaultValue, onValueChange, decimals, fixedDecimals = false, grouping = false, locale: ownLocale, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onPaste, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     // Without a locale of its own, the box writes and reads numbers the way the person chose (Number scale, Thousands).
     const preferred = useNumberLocale();
     const locale = ownLocale ?? preferred;

package/dist/Components/Inputs/TextArea.js

@@ -4,13 +4,16 @@ import { cx } from "../../Helpers/ClassHelpers.js";
 import { Field } from "./Field.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 import { useTextField } from "./TextField.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 /**
  * A multi-line text input with the same label, hint, validation, and designs as `TextBox`.
  *
  * @example <TextArea label="Description" maxLength={500} showCount autoResize />
  */
 export function TextArea(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, rows = 3, autoResize = false, maxRows = 12, showCount = false, readOnlyMessage = "Read-only: this field cannot be changed.", fieldName, validateOn, onValueChange, className, textAreaClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, placeholder, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, ...textAreaProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, rows = 3, autoResize = false, maxRows = 12, showCount = false, readOnlyMessage = "Read-only: this field cannot be changed.", fieldName, validateOn, onValueChange, className, textAreaClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, placeholder, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, ...textAreaProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const field = useTextField(props);
     const rowsStyle = { "--nx-field-rows": rows, "--nx-field-max-rows": Math.max(rows, maxRows) };
     // A lock at the top end of the box, and a note under it when someone tries to change the text, say why nothing happens.

package/dist/Components/Inputs/TextBox.js

@@ -7,6 +7,7 @@ import { Field, hasContent } from "./Field.js";
 import { setInputValue } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 import { useTextField } from "./TextField.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 // Values that are not prose: no red spell-check underline, no capital first letter on phones.
 const PLAIN_TYPES = new Set(["email", "password", "tel", "url"]);
 /**
@@ -17,7 +18,9 @@ const PLAIN_TYPES = new Set(["email", "password", "tel", "url"]);
  * @example <TextBox label="Email" type="email" required pattern={TEXT_PATTERNS.email} icon={<InlineIcon icon={iconMail} />} />
  */
 export function TextBox(props) {
-    const { type = "text", label, hint, error, design = "standard", size = "md", icon, iconEnd, prefix, suffix, actionsStart, clearable = false, showCount = false, readOnlyMessage = "Read-only: this field cannot be changed.", fieldName, validateOn, onValueChange, className, inputClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, placeholder, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { type = "text", label, hint, error, design: ownDesign, size = "md", icon, iconEnd, prefix, suffix, actionsStart, clearable = false, showCount = false, readOnlyMessage = "Read-only: this field cannot be changed.", fieldName, validateOn, onValueChange, className, inputClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, placeholder, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const field = useTextField(props);
     const [revealed, setRevealed] = useState(false);
     const editable = !disabled && !readOnly;

package/dist/Components/Inputs/TimePicker.js

@@ -12,6 +12,7 @@ import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 import { TimePanel } from "./TimePanel.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 /**
  * A time input: type a time on either clock ("2:30 pm", "1430"), or pick one from the panel that opens under the box.
  * Written in the user's time format, 12- or 24-hour, and always held as an ISO time with no date and no zone, which a
@@ -20,7 +21,9 @@ import { TimePanel } from "./TimePanel.js";
  * @example <TimePicker name="arrival" label="Arrival" min="12:00" max="22:00" step={1800} view="list" />
  */
 export function TimePicker(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, prefix, view = "columns", clearable = true, fieldName, readOnlyMessage = "Read-only: this time cannot be changed.", validateOn, value, defaultValue, onValueChange, isTimeDisabled, className, inputClassName, style, required, min, max, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, prefix, view = "columns", clearable = true, fieldName, readOnlyMessage = "Read-only: this time cannot be changed.", validateOn, value, defaultValue, onValueChange, isTimeDisabled, className, inputClassName, style, required, min, max, step, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onClick, ...inputProps } = props;
+    // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
+    const design = useInputDesign(ownDesign, Boolean(label));
     const preferences = useDatePreferences();
     const script = props.script ?? (usesDevanagari(preferences.calendar, preferences.script) ? "devanagari" : "latin");
     const seconds = normalizeTimeStep(step) % 60 !== 0;

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

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode, type Ref } from "react";
-import { type TreeItem, type TreeValue, type TreeValueMode } from "../../Helpers/TreeStore.ts";
+import { type TreeChildrenPage, type TreeChildrenRequest, type TreeItem, type TreeValue, type TreeValueMode } from "../../Helpers/TreeStore.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 export type TreeAction = "create" | "update" | "delete";
 export interface TreeCreateRequest<TItem extends TreeItem = TreeItem> {
@@ -47,13 +47,46 @@ export interface TreeViewHandle<TItem extends TreeItem = TreeItem> {
     remove: (value: TreeValue) => Promise<boolean>;
     /** Focuses the focused row, or the first. */
     focus: () => void;
+    /**
+     * With `loadChildren`: drops the pages kept for the whole tree, or for one item and everything under it, and loads
+     * again only what is on screen - the top level and the open items with rows in view. An open item out of view loads
+     * when it scrolls in, a closed one when it is next expanded. What is drawn stays until the fresh pages replace it.
+     */
+    refresh: (value?: TreeValue) => void;
 }
 export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
     /**
      * The items, flat: each names its parent through `parentKey`, and siblings keep this order. Keep the array stable
-     * (state, a constant, or `useMemo`): a different array, or one with different items, builds the tree again.
+     * (state, a constant, or `useMemo`): a different array, or one with different items, builds the tree again. With
+     * `loadChildren`, leave it out to load the top level too, or give the top level and let the children load.
+     */
+    items?: readonly TItem[];
+    /**
+     * Loads children from a server, a page at a time: when an item is expanded the first time, when Load more is
+     * pressed, and for the top level when no `items` are given. It answers `{ items, total?, hasMore? }`, at once or in
+     * a promise; the children go under the item asked for, whatever their own parent field says. Values must be unique
+     * across the whole tree: map items whose ids could repeat between levels (`"c" + countryId`, `"r" + regionId`).
+     * A thrown error or rejected promise shows "Could not load the items." with Retry.
+     */
+    loadChildren?: (request: TreeChildrenRequest<TItem>) => TreeChildrenPage<TItem> | PromiseLike<TreeChildrenPage<TItem>>;
+    /** With `loadChildren`: children asked for at a time (the request's `take`). Default 50. */
+    childPageSize?: number;
+    /**
+     * With `loadChildren`: the item field saying whether it has children, before they are loaded - a boolean or a count,
+     * such as `childCount`. An item without it shows a chevron until its first page answers, and loses it if the page
+     * is empty. With `checkable` and `cascade`, an item known to have none can be checked before it is opened.
+     */
+    hasChildrenKey?: string;
+    /**
+     * With `loadChildren`: keeps the pages loaded in a cache shared by every tree on the page with the same key, for
+     * `cacheLifetime`: leaving the page and coming back, or a second tree, makes no call, and a request on its way is
+     * shared. Name the source, e.g. `"administrative-regions"`. Without it, pages are kept only in this tree.
      */
-    items: readonly TItem[];
+    cacheKey?: string;
+    /** How long a kept page is used, in milliseconds. Default 5 minutes. */
+    cacheLifetime?: number;
+    /** What a click on an item whose items are not all loaded says, with `checkable` and `cascade`. */
+    partialMessage?: string;
     /** The item field that holds its value. Default `id`. */
     valueKey?: string;
     /** The item field that holds its parent's value; empty for a top-level item. Default `parentId`. */
@@ -96,7 +129,10 @@ export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
     form?: string;
     /** With `checkable` and `cascade`: a parent shows how many of its items are checked, as "3/5". Default true. */
     counts?: boolean;
-    /** What is expanded at the start: `"all"`, a number of levels, or the values of items to open. */
+    /**
+     * What is expanded at the start: `"all"`, a number of levels, or the values of items to open. With `loadChildren`,
+     * only items whose children are given in `items`: nothing is asked for at the start but the top level.
+     */
     defaultExpanded?: "all" | number | readonly TreeValue[];
     /** Items can be added: a + on each row adds under it, and Add in the toolbar adds at the top level. */
     creatable?: boolean;
@@ -115,7 +151,11 @@ export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
     onUpdate?: (request: TreeUpdateRequest<TItem>) => TItem | void | Promise<TItem | void>;
     /** Deletes an item and everything under it. A thrown error keeps the items and shows the message. */
     onDelete?: (request: TreeDeleteRequest<TItem>) => void | Promise<void>;
-    /** After an item is added, renamed, or deleted: every item in tree order. Passing this array back as `items` does not rebuild the tree. */
+    /**
+     * After an item is added, renamed, or deleted: every item in tree order. Passing this array back as `items` does not
+     * rebuild the tree. With `loadChildren` it holds the loaded children too, whose own parent fields may not name the
+     * item they were loaded under: read it, but keep passing the `items` you gave.
+     */
     onItemsChange?: (items: TItem[]) => void;
     /** Asks before deleting. Default true; needs `<PopupHost />` on the page. */
     confirmDelete?: boolean;
@@ -154,7 +194,17 @@ export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
  * 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.
  *
+ * With `loadChildren` the children come from a server, a page at a time, when an item is first expanded: a loading
+ * row while they come, a row that says the page failed with Retry, and Load more with how many are left. Those rows
+ * are rows like the others, reached with the arrows and pressed with Enter or Space. What is loaded stays (collapse
+ * and expand again asks nothing), `cacheKey` shares it with the next tree, and the handle's `refresh` loads again what
+ * is on screen. With `cascade`, an item whose items are not all loaded cannot be checked as a whole: the value can only
+ * hold items that were loaded, so its check would silently leave the rest out.
+ *
  * @example
  * <TreeView label="Permissions" items={permissions} checkable name="actionIds" defaultExpanded={1} isItemDisabled={item => !item.canAssign} />
+ *
+ * <TreeView label="Regions" items={countries} hasChildrenKey="childCount" cacheKey="regions"
+ *   loadChildren={({ parent, skip, take, signal }) => loadRegions(parent, skip, take, signal)} />
  */
 export declare function TreeView<TItem extends TreeItem = TreeItem>(props: TreeViewProps<TItem>): import("react").JSX.Element;