cx 26.0.1 → 26.0.3

package/build/widgets/grid/GridCell.d.ts

@@ -0,0 +1,68 @@
+import { StyledContainerBase, StyledContainerConfig } from "../../ui";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface GridCellConfig extends StyledContainerConfig {
+    /** Selector used to obtain the value that should be displayed inside the cell. Not required if `field` is used. */
+    value?: StringProp | NumberProp;
+    /** Selector used to obtain the weight of the cell in aggregate operations, such as weighted averages. */
+    weight?: Prop<any>;
+    /** Add default padding to grid cell. */
+    pad?: BooleanProp;
+    /** Format specifier used to convert the value into a string. */
+    format?: StringProp;
+    /** Name of the field that holds the value to be displayed. */
+    field?: string;
+    /** Record alias. Default is `$record`. */
+    recordName?: string;
+    /** Record alias. Default is `$record`. */
+    recordAlias?: string;
+    /** Indicate if a cell is editable or not. Default value is true. */
+    editable?: boolean;
+    /**
+     * Used to indicate that the adjacent cells in the column should be merged together.
+     * If set to `same-value`, only cells with the same value will be merged.
+     * If set to `always`, all cells within the group will be merged.
+     * This is an experimental feature that might not work well with other
+     * grid related features such as multi-line rows, buffered rendering, etc.
+     */
+    mergeCells?: Prop<"same-value" | "always">;
+    /** Aggregate value for the cell. */
+    aggregateValue?: Prop<any>;
+    /** Column span. */
+    colSpan?: NumberProp;
+    /** Row span. */
+    rowSpan?: NumberProp;
+    /** Whether the column is fixed. */
+    fixed?: BooleanProp;
+    /** Cell alignment. */
+    align?: "left" | "right" | "center";
+    /** Editor widget for cell editing. */
+    editor?: any;
+    /** Unique column identifier. */
+    uniqueColumnId?: string;
+}
+export declare class GridCell extends StyledContainerBase<GridCellConfig> {
+    value?: StringProp | NumberProp;
+    field?: string;
+    recordName?: string;
+    editable?: boolean;
+    align?: "left" | "right" | "center";
+    editor?: any;
+    uniqueColumnId?: string;
+    pad?: boolean;
+    fixed?: boolean;
+    merged?: boolean;
+    constructor(config?: GridCellConfig);
+    declareData(...args: any[]): void;
+    init(): void;
+    prepareCSS(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): {
+        atomic: boolean;
+        content: any;
+        instance: Instance<import("..").Widget<any, any>>;
+        data: Record<string, any>;
+        key: string;
+        uniqueColumnId: string | undefined;
+    };
+}

package/build/widgets/grid/GridCell.js

@@ -0,0 +1,61 @@
+import { StyledContainerBase } from "../../ui";
+import { Format } from "../../ui/Format";
+import { isUndefined } from "../../util/isUndefined";
+export class GridCell extends StyledContainerBase {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        return super.declareData(...args, {
+            value: undefined,
+            aggregateValue: undefined,
+            weight: undefined,
+            pad: undefined,
+            format: undefined,
+            colSpan: undefined,
+            rowSpan: undefined,
+            editable: undefined,
+            fixed: undefined,
+            mergeCells: undefined,
+        });
+    }
+    init() {
+        if (!this.value && this.field)
+            this.value = { bind: this.recordName + "." + this.field };
+        if (isUndefined(this.editable))
+            this.editable = !!this.editor;
+        super.init();
+    }
+    prepareCSS(context, instance) {
+        let { data } = instance;
+        data.classNames = this.CSS.expand(data.className, data.class, this.CSS.state({
+            pad: data.pad,
+            editable: data.editable,
+            ["aligned-" + this.align]: this.align,
+            mergable: data.merged,
+        }));
+        data.style = this.CSS.parseStyle(data.style);
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        let content;
+        if (this.items.length > 0)
+            content = this.renderChildren(context, instance);
+        else {
+            content = data.value;
+            if (data.format)
+                content = Format.value(content, data.format);
+        }
+        return {
+            atomic: true,
+            content,
+            instance,
+            data,
+            key,
+            uniqueColumnId: this.uniqueColumnId,
+        };
+    }
+}
+GridCell.prototype.pad = true;
+GridCell.prototype.fixed = false;
+GridCell.prototype.merged = false;

package/build/widgets/grid/GridCellEditor.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource react */
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface GridCellEditorConfig extends StyledContainerConfig {
+}
+export declare class GridCellEditor extends ContainerBase<GridCellEditorConfig> {
+    constructor(config?: GridCellEditorConfig);
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+}

package/build/widgets/grid/GridCellEditor.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { ContainerBase } from "../../ui/Container";
+import { VDOM } from "../../ui/VDOM";
+import { findFirstChild, isFocusable, isFocusedDeep } from "../../util/DOM";
+export class GridCellEditor extends ContainerBase {
+    constructor(config) {
+        super(config);
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        return (_jsx(GridCellEditorCmp, { className: data.className, style: data.style, children: this.renderChildren(context, instance) }, key));
+    }
+}
+GridCellEditor.prototype.styled = true;
+class GridCellEditorCmp extends VDOM.Component {
+    el = null;
+    render() {
+        let { className, style, children } = this.props;
+        return (_jsx("div", { ref: (el) => (this.el = el), className: className, style: style, children: children }));
+    }
+    componentDidMount() {
+        if (!isFocusedDeep(this.el)) {
+            let focusableChild = findFirstChild(this.el, isFocusable);
+            if (focusableChild)
+                focusableChild.focus();
+        }
+    }
+}

package/build/widgets/grid/GridRow.d.ts

@@ -0,0 +1,87 @@
+import type { RenderingContext } from "../../ui/RenderingContext";
+import { VDOM } from "../../ui/Widget";
+import { ValidationGroup, ValidationGroupConfig, ValidationGroupInstance } from "../../widgets/form/ValidationGroup";
+import { GridRowLineConfig } from "./GridRowLine";
+import type { GridInstance } from "./Grid";
+import { BooleanProp, StringProp, Prop, StructuredProp } from "../../ui/Prop";
+import { WidgetStyleConfig } from "../../ui/Widget";
+export interface GridRowInstance extends ValidationGroupInstance {
+    dragHandles: any[];
+}
+export interface GridRowConfig extends ValidationGroupConfig, WidgetStyleConfig {
+    hoverId?: any;
+    line0?: GridRowLineConfig;
+    line1?: GridRowLineConfig;
+    line2?: GridRowLineConfig;
+    line3?: GridRowLineConfig;
+    line4?: GridRowLineConfig;
+    line5?: GridRowLineConfig;
+    line6?: GridRowLineConfig;
+    line7?: GridRowLineConfig;
+    line8?: GridRowLineConfig;
+    line9?: GridRowLineConfig;
+    recordName?: string;
+    invalid?: BooleanProp;
+    valid?: BooleanProp;
+    mod?: StringProp | Prop<string[]> | StructuredProp;
+}
+export declare class GridRow extends ValidationGroup<GridRowConfig> {
+    recordName?: string;
+    line0?: GridRowLineConfig;
+    line1?: GridRowLineConfig;
+    line2?: GridRowLineConfig;
+    line3?: GridRowLineConfig;
+    line4?: GridRowLineConfig;
+    line5?: GridRowLineConfig;
+    line6?: GridRowLineConfig;
+    line7?: GridRowLineConfig;
+    line8?: GridRowLineConfig;
+    line9?: GridRowLineConfig;
+    declareData(...args: Record<string, unknown>[]): void;
+    init(): void;
+    explore(context: RenderingContext, instance: GridRowInstance): void;
+    exploreCleanup(context: RenderingContext, instance: GridRowInstance): void;
+}
+export interface GridRowComponentProps {
+    key?: string;
+    className?: string;
+    store?: any;
+    dragSource?: any;
+    instance: GridRowInstance;
+    grid: GridInstance;
+    record: any;
+    parent: any;
+    cursorIndex?: number;
+    selected?: boolean;
+    isBeingDragged?: any;
+    isDraggedOver?: boolean;
+    cursor?: boolean;
+    cursorCellIndex?: number | false;
+    cellEdit?: any;
+    onMouseLeave?: any;
+    useTrTag?: boolean;
+    shouldUpdate?: boolean;
+    dimensionsVersion?: number;
+    fixed?: boolean;
+    children?: React.ReactNode;
+}
+interface GridRowComponentState {
+    hover?: boolean;
+}
+export declare class GridRowComponent extends VDOM.Component<GridRowComponentProps, GridRowComponentState> {
+    onDoubleClick?: (e: React.MouseEvent) => void;
+    onRowContextMenu?: (e: React.MouseEvent) => void;
+    unsubscribeHoverSync?: () => void;
+    constructor(props: GridRowComponentProps);
+    render(): React.ReactNode;
+    onMouseDown(e: React.MouseEvent | React.TouchEvent): void;
+    onMouseMove(e: React.MouseEvent | React.TouchEvent): void;
+    onMouseLeave(e: React.MouseEvent): void;
+    getCellIndex(e: React.MouseEvent | React.TouchEvent | React.KeyboardEvent): number;
+    onKeyDown(e: React.KeyboardEvent): void;
+    onClick(e: React.MouseEvent): void;
+    shouldComponentUpdate(props: GridRowComponentProps, state: GridRowComponentState): boolean;
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+}
+export {};

package/build/widgets/grid/GridRow.js

@@ -0,0 +1,192 @@
+import { preventFocusOnTouch, unfocusElement } from "../../ui/FocusManager";
+import { VDOM } from "../../ui/Widget";
+import { closest } from "../../util/DOM";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { KeyCode } from "../../util/KeyCode";
+import { ValidationGroup } from "../../widgets/form/ValidationGroup";
+import { ddDetect, ddMouseDown, ddMouseUp, isDragHandleEvent } from "../drag-drop/ops";
+import { GridRowLine } from "./GridRowLine";
+export class GridRow extends ValidationGroup {
+    declareData(...args) {
+        super.declareData(...args, {
+            hoverId: undefined,
+        });
+    }
+    init() {
+        this.items = [];
+        for (let i = 0; i < 10; i++) {
+            const lineKey = ("line" + i);
+            if (this[lineKey])
+                this.items.push(GridRowLine.create(this[lineKey], {
+                    recordName: this.recordName,
+                }));
+        }
+        super.init();
+    }
+    explore(context, instance) {
+        context.push("dragHandles", (instance.dragHandles = []));
+        super.explore(context, instance);
+    }
+    exploreCleanup(context, instance) {
+        super.exploreCleanup(context, instance);
+        context.pop("dragHandles");
+    }
+}
+GridRow.prototype.styled = true; //styles used on the wrapper component
+export class GridRowComponent extends VDOM.Component {
+    onDoubleClick;
+    onRowContextMenu;
+    unsubscribeHoverSync;
+    constructor(props) {
+        super(props);
+        this.onMouseMove = this.onMouseMove.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+        this.onClick = this.onClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        let { grid, instance } = props;
+        if (grid.widget.onRowDoubleClick)
+            this.onDoubleClick = (e) => {
+                grid.invoke("onRowDoubleClick", e, instance);
+            };
+        if (grid.widget.cellEditable)
+            this.onDoubleClick = (e) => {
+                this.props.parent.moveCursor(this.props.cursorIndex, {
+                    cellEdit: true,
+                });
+                e.preventDefault(); //prevent text selection
+            };
+        if (grid.widget.onRowContextMenu)
+            this.onRowContextMenu = (e) => {
+                grid.invoke("onRowContextMenu", e, instance);
+            };
+    }
+    render() {
+        let { className, dragSource, instance, record, useTrTag, children } = this.props;
+        let { data, widget } = instance;
+        let { CSS } = widget;
+        let move, up, keyDown, leave;
+        if (dragSource || data.hoverId != null) {
+            move = this.onMouseMove;
+            up = ddMouseUp;
+        }
+        if (data.hoverId != null) {
+            leave = this.onMouseLeave;
+        }
+        if (this.props.grid.widget.onRowClick)
+            keyDown = this.onKeyDown;
+        return VDOM.createElement(useTrTag ? "tr" : "tbody", {
+            className: CSS.expand(data.classNames, className, this.state && this.state.hover && CSS.state("hover")),
+            style: data.style,
+            onClick: this.onClick,
+            onDoubleClick: this.onDoubleClick,
+            onTouchStart: this.onMouseDown,
+            onMouseDown: this.onMouseDown,
+            onTouchMove: move,
+            onMouseMove: move,
+            onMouseLeave: leave,
+            onTouchEnd: up,
+            onMouseUp: up,
+            onKeyDown: keyDown,
+            onContextMenu: this.onRowContextMenu,
+            "data-record-key": record.key,
+        }, children);
+    }
+    onMouseDown(e) {
+        let { grid, record, instance, parent, cursorIndex } = this.props;
+        if (this.props.dragSource) {
+            ddMouseDown(e);
+            if (isDragHandleEvent(e) || instance.dragHandles.length == 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                //close context menu
+                unfocusElement(e.target, false);
+            }
+        }
+        let { store, widget } = grid;
+        if (widget.selectable)
+            preventFocusOnTouch(e);
+        parent.moveCursor(cursorIndex, {
+            select: !isTouchEvent() &&
+                (e.shiftKey || e.ctrlKey || !widget.selection.isSelected(store, record.data, record.index)),
+            selectRange: e.shiftKey,
+            selectOptions: {
+                toggle: e.ctrlKey && !e.shiftKey,
+                add: e.ctrlKey && e.shiftKey,
+            },
+            cellIndex: this.getCellIndex(e),
+        });
+        if (e.shiftKey && !isTouchEvent())
+            e.preventDefault();
+    }
+    onMouseMove(e) {
+        let { grid, instance, parent, record } = this.props;
+        if (ddDetect(e) && (isDragHandleEvent(e) || instance.dragHandles.length == 0))
+            parent.beginDragDrop(e, record);
+        if (grid.hoverSync && instance.data.hoverId != null)
+            grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, true);
+    }
+    onMouseLeave(e) {
+        let { grid, instance } = this.props;
+        if (grid.hoverSync && instance.data.hoverId != null)
+            grid.hoverSync.report(grid.widget.hoverChannel, instance.data.hoverId, false);
+    }
+    getCellIndex(e) {
+        let td = closest(e.target, (node) => node.tagName == "TD");
+        if (td)
+            return ((this.props.fixed ? 0 : this.props.grid.fixedColumnCount) +
+                Array.from(td.parentElement.children).indexOf(td));
+        return -1;
+    }
+    onKeyDown(e) {
+        let { grid, instance } = this.props;
+        if (e.keyCode == KeyCode.enter && grid.invoke("onRowClick", e, instance) === false) {
+            e.stopPropagation();
+        }
+    }
+    onClick(e) {
+        let { grid, record, instance, parent, cursorIndex } = this.props;
+        let { store, widget } = grid;
+        if (grid.widget.onRowClick) {
+            if (grid.invoke("onRowClick", e, instance) === false)
+                return;
+        }
+        e.stopPropagation();
+        parent.moveCursor(cursorIndex, {
+            select: isTouchEvent() ||
+                (!e.shiftKey && !e.ctrlKey && widget.selection.isSelected(store, record.data, record.index)),
+            selectRange: e.shiftKey,
+            selectOptions: {
+                toggle: e.ctrlKey && !e.shiftKey,
+                add: e.ctrlKey && e.shiftKey,
+            },
+            cellIndex: this.getCellIndex(e),
+        });
+    }
+    shouldComponentUpdate(props, state) {
+        return (props.shouldUpdate !== false ||
+            props.record != this.props.record ||
+            props.cursor != this.props.cursor ||
+            props.selected != this.props.selected ||
+            props.isBeingDragged != this.props.isBeingDragged ||
+            props.cursorIndex !== this.props.cursorIndex ||
+            props.cursorCellIndex !== this.props.cursorCellIndex ||
+            props.cellEdit !== this.props.cellEdit ||
+            props.dimensionsVersion !== this.props.dimensionsVersion ||
+            props.isDraggedOver !== this.props.isDraggedOver ||
+            state !== this.state);
+    }
+    componentWillUnmount() {
+        this.unsubscribeHoverSync && this.unsubscribeHoverSync();
+    }
+    componentDidMount() {
+        let { grid } = this.props;
+        if (grid.hoverSync) {
+            this.unsubscribeHoverSync = grid.hoverSync.subscribe(grid.widget.hoverChannel, (hoverId) => {
+                let hover = hoverId === this.props.instance.data.hoverId;
+                if (!this.state || hover !== this.state.hover)
+                    this.setState({ hover });
+            });
+        }
+    }
+}

package/build/widgets/grid/GridRowLine.d.ts

@@ -0,0 +1,27 @@
+import { Container, ContainerConfig } from "../../ui/Container";
+import type { GridColumnConfig } from "./Grid";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp } from "../../ui/Prop";
+export interface GridRowLineConfig extends ContainerConfig {
+    /** Array of column configurations for this row line. */
+    columns?: GridColumnConfig[];
+    /** Record alias used for data binding. */
+    recordName?: string;
+    /** Whether this row line is visible. */
+    visible?: BooleanProp;
+    /** Whether to show the header row for this line. */
+    showHeader?: BooleanProp;
+}
+export declare class GridRowLine extends Container {
+    columns?: GridColumnConfig[];
+    recordName?: string;
+    constructor(config?: GridRowLineConfig);
+    init(): void;
+    render(context: RenderingContext, instance: Instance, key: string): {
+        key: string;
+        data: Record<string, any>;
+        content: any;
+        atomic: boolean;
+    };
+}

package/build/widgets/grid/GridRowLine.js

@@ -0,0 +1,24 @@
+import { Container } from "../../ui/Container";
+import { Widget } from "../../ui/Widget";
+import { GridCell } from "./GridCell";
+export class GridRowLine extends Container {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.items = Widget.create(GridCell, this.columns || [], {
+            recordName: this.recordName
+        });
+        super.init();
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        return {
+            key,
+            data,
+            content: this.renderChildren(context, instance),
+            atomic: true
+        };
+    }
+}
+GridRowLine.prototype.styled = true;

package/build/widgets/grid/Pagination.d.ts

@@ -0,0 +1,23 @@
+/** @jsxImportSource react */
+import { Widget } from "../../ui/Widget";
+import { NumberProp } from "../../ui/Prop";
+import { StyledContainerConfig } from "../../ui/Container";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface PaginationConfig extends StyledContainerConfig {
+    /** Current page number. */
+    page?: NumberProp;
+    /** Total number of pages. */
+    pageCount?: NumberProp;
+    /** Number of page buttons to display. */
+    length?: NumberProp;
+}
+export declare class Pagination extends Widget<PaginationConfig> {
+    baseClass: string;
+    length: number;
+    constructor(config?: PaginationConfig);
+    declareData(): void;
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+    onKeyDown(e: React.KeyboardEvent, instance: Instance): void;
+    setPage(e: React.SyntheticEvent, instance: Instance, page: number): void;
+}

package/build/widgets/grid/Pagination.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../../ui/Widget";
+import { KeyCode } from "../../util/KeyCode";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import ForwardIcon from "../icons/forward";
+export class Pagination extends Widget {
+    constructor(config) {
+        super(config);
+    }
+    declareData() {
+        super.declareData({
+            page: undefined,
+            length: undefined,
+            pageCount: undefined,
+        }, ...arguments);
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        let { page, pageCount, length } = data;
+        let { CSS, baseClass } = this;
+        if (!pageCount)
+            pageCount = 1;
+        let minPage = Math.max(1, page - Math.floor(length / 2));
+        let maxPage = minPage + length - 1;
+        if (maxPage > pageCount) {
+            maxPage = Math.max(pageCount, length);
+            minPage = maxPage - length + 1;
+        }
+        let nextPageIcon = _jsx(ForwardIcon, { className: CSS.element(baseClass, "icon-next-page") });
+        let prevPageIcon = _jsx(ForwardIcon, { className: CSS.element(baseClass, "icon-prev-page") });
+        let pageBtns = [];
+        for (let p = minPage - 1; p <= maxPage + 1; p++) {
+            pageBtns.push(_jsx("li", { className: CSS.element(baseClass, "page", {
+                    active: page == p,
+                    disabled: (p <= maxPage && p > pageCount) ||
+                        (p < minPage && page == 1) ||
+                        (p > maxPage && page + 1 > pageCount),
+                }), onMouseDown: (e) => {
+                    e.stopPropagation();
+                    preventFocusOnTouch(e);
+                }, onClick: (e) => {
+                    this.setPage(e, instance, p < minPage ? page - 1 : p > maxPage ? page + 1 : p);
+                }, children: p < minPage ? prevPageIcon : p > maxPage ? nextPageIcon : p }, p < minPage ? "-1" : p > maxPage ? "-2" : p));
+        }
+        return (_jsx("ul", { className: data.classNames, style: data.style, tabIndex: 0, onKeyDown: (e) => {
+                this.onKeyDown(e, instance);
+            }, children: pageBtns }, key));
+    }
+    onKeyDown(e, instance) {
+        let { data } = instance;
+        switch (e.keyCode) {
+            case KeyCode.left:
+                this.setPage(e, instance, data.page - 1);
+                break;
+            case KeyCode.right:
+                this.setPage(e, instance, data.page + 1);
+                break;
+        }
+    }
+    setPage(e, instance, page) {
+        e.preventDefault();
+        e.stopPropagation();
+        let { data } = instance;
+        let { pageCount } = data;
+        if (page <= pageCount && page > 0)
+            instance.set("page", page);
+    }
+}
+Pagination.prototype.baseClass = "pagination";
+Pagination.prototype.length = 5;
+Pagination.prototype.styled = true;
+Widget.alias("pagination", Pagination);

package/build/widgets/grid/TreeNode.d.ts

@@ -0,0 +1,42 @@
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { BooleanProp, NumberProp, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+export interface TreeNodeConfig extends StyledContainerConfig {
+    /** Indentation level of the node. */
+    level?: NumberProp;
+    /** Set to `true` if the node is expanded. */
+    expanded?: BooleanProp;
+    /** Set to `true` if the node is a leaf (has no children). */
+    leaf?: BooleanProp;
+    /** Text to be displayed. */
+    text?: StringProp;
+    /** Set to `true` if the node is loading. */
+    loading?: BooleanProp;
+    /** Icon to be displayed. */
+    icon?: StringProp;
+    /** Icon for leaf nodes. */
+    leafIcon?: StringProp;
+    /** Icon for open folder. */
+    openFolderIcon?: StringProp;
+    /** Icon for folder. */
+    folderIcon?: StringProp;
+    /** Set to `true` to hide the arrow. */
+    hideArrow?: BooleanProp;
+}
+export declare class TreeNode extends ContainerBase<TreeNodeConfig> {
+    baseClass: string;
+    itemIcon: string;
+    leafIcon: string;
+    loadingIcon: string;
+    folderIcon: string;
+    openFolderIcon: string;
+    arrowIcon: string;
+    hideIcon: boolean;
+    constructor(config?: TreeNodeConfig);
+    init(): void;
+    declareData(): void;
+    prepareData(context: RenderingContext, instance: Instance): void;
+    render(context: RenderingContext, instance: Instance, key: string): import("react/jsx-runtime").JSX.Element;
+    toggle(e: React.MouseEvent, instance: Instance): void;
+}