devextreme-react/cjs/diagram.d.ts

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 24.2.6
 * Build date: Mon Mar 17 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-react
 */

import * as React from "react";
import { Ref, ReactElement } from "react";
import dxDiagram, { Properties } from "devextreme/ui/diagram";
import { IHtmlOptions, NestedComponentMeta } from "./core/component";
import type { ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, DataLayoutType, Command as DiagramCommand, CustomCommand, ShapeCategory, ToolboxDisplayMode, ShapeType, dxDiagramShape, ConnectorLineEnd, ConnectorLineType, PanelVisibility } from "devextreme/ui/diagram";
import type { Orientation, ToolbarItemLocation, template } from "devextreme/common";
import type { dxSVGElement } from "devextreme/core/element";
import type { DataSourceOptions } from "devextreme/data/data_source";
import type { Store } from "devextreme/data/store";
import type DataSource from "devextreme/data/data_source";
type ReplaceFieldTypes<TSource, TReplacement> = {
    [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
};
type IDiagramOptionsNarrowedEvents = {
    onContentReady?: ((e: ContentReadyEvent) => void);
    onCustomCommand?: ((e: CustomCommandEvent) => void);
    onDisposing?: ((e: DisposingEvent) => void);
    onInitialized?: ((e: InitializedEvent) => void);
    onItemClick?: ((e: ItemClickEvent) => void);
    onItemDblClick?: ((e: ItemDblClickEvent) => void);
    onRequestEditOperation?: ((e: RequestEditOperationEvent) => void);
    onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void);
};
type IDiagramOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IDiagramOptionsNarrowedEvents> & IHtmlOptions & {
    customShapeRender?: (...params: any) => React.ReactNode;
    customShapeComponent?: React.ComponentType<any>;
    customShapeToolboxRender?: (...params: any) => React.ReactNode;
    customShapeToolboxComponent?: React.ComponentType<any>;
    defaultGridSize?: number | Record<string, any>;
    defaultPageSize?: Record<string, any>;
    defaultZoomLevel?: number | Record<string, any>;
    onGridSizeChange?: (value: number | Record<string, any>) => void;
    onPageSizeChange?: (value: Record<string, any>) => void;
    onZoomLevelChange?: (value: number | Record<string, any>) => void;
}>;
interface DiagramRef {
    instance: () => dxDiagram;
}
declare const Diagram: (props: React.PropsWithChildren<IDiagramOptions> & {
    ref?: Ref<DiagramRef>;
}) => ReactElement | null;
type IAutoLayoutProps = React.PropsWithChildren<{
    orientation?: Orientation;
    type?: DataLayoutType;
}>;
declare const AutoLayout: ((props: IAutoLayoutProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    orientation?: Orientation | undefined;
    type?: DataLayoutType | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICommandProps = React.PropsWithChildren<{
    icon?: string;
    items?: Array<DiagramCommand | CustomCommand>;
    location?: ToolbarItemLocation;
    name?: DiagramCommand | string;
    text?: string;
}>;
declare const Command: ((props: ICommandProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    icon?: string | undefined;
    items?: (DiagramCommand | CustomCommand)[] | undefined;
    location?: ToolbarItemLocation | undefined;
    name?: string | undefined;
    text?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICommandItemProps = React.PropsWithChildren<{
    icon?: string;
    items?: Array<DiagramCommand | CustomCommand>;
    location?: ToolbarItemLocation;
    name?: DiagramCommand | string;
    text?: string;
}>;
declare const CommandItem: ((props: ICommandItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    icon?: string | undefined;
    items?: (DiagramCommand | CustomCommand)[] | undefined;
    location?: ToolbarItemLocation | undefined;
    name?: string | undefined;
    text?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IConnectionPointProps = React.PropsWithChildren<{
    x?: number;
    y?: number;
}>;
declare const ConnectionPoint: ((props: IConnectionPointProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    x?: number | undefined;
    y?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IContextMenuProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    enabled?: boolean;
}>;
declare const ContextMenu: ((props: IContextMenuProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    enabled?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IContextToolboxProps = React.PropsWithChildren<{
    category?: ShapeCategory | string;
    displayMode?: ToolboxDisplayMode;
    enabled?: boolean;
    shapeIconsPerRow?: number;
    shapes?: Array<ShapeType>;
    width?: number;
}>;
declare const ContextToolbox: ((props: IContextToolboxProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    category?: string | undefined;
    displayMode?: ToolboxDisplayMode | undefined;
    enabled?: boolean | undefined;
    shapeIconsPerRow?: number | undefined;
    shapes?: ShapeType[] | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ICustomShapeProps = React.PropsWithChildren<{
    allowEditImage?: boolean;
    allowEditText?: boolean;
    allowResize?: boolean;
    backgroundImageHeight?: number;
    backgroundImageLeft?: number;
    backgroundImageToolboxUrl?: string;
    backgroundImageTop?: number;
    backgroundImageUrl?: string;
    backgroundImageWidth?: number;
    baseType?: ShapeType | string;
    category?: string;
    connectionPoints?: Array<Record<string, any>> | {
        x?: number;
        y?: number;
    }[];
    defaultHeight?: number;
    defaultImageUrl?: string;
    defaultText?: string;
    defaultWidth?: number;
    imageHeight?: number;
    imageLeft?: number;
    imageTop?: number;
    imageWidth?: number;
    keepRatioOnAutoSize?: boolean;
    maxHeight?: number;
    maxWidth?: number;
    minHeight?: number;
    minWidth?: number;
    template?: ((container: dxSVGElement, data: {
        item: dxDiagramShape;
    }) => void) | template;
    templateHeight?: number;
    templateLeft?: number;
    templateTop?: number;
    templateWidth?: number;
    textHeight?: number;
    textLeft?: number;
    textTop?: number;
    textWidth?: number;
    title?: string;
    toolboxTemplate?: ((container: dxSVGElement, data: {
        item: dxDiagramShape;
    }) => void) | template;
    toolboxWidthToHeightRatio?: number;
    type?: string;
    render?: (...params: any) => React.ReactNode;
    component?: React.ComponentType<any>;
    toolboxRender?: (...params: any) => React.ReactNode;
    toolboxComponent?: React.ComponentType<any>;
}>;
declare const CustomShape: ((props: ICustomShapeProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    allowEditImage?: boolean | undefined;
    allowEditText?: boolean | undefined;
    allowResize?: boolean | undefined;
    backgroundImageHeight?: number | undefined;
    backgroundImageLeft?: number | undefined;
    backgroundImageToolboxUrl?: string | undefined;
    backgroundImageTop?: number | undefined;
    backgroundImageUrl?: string | undefined;
    backgroundImageWidth?: number | undefined;
    baseType?: string | undefined;
    category?: string | undefined;
    connectionPoints?: Record<string, any>[] | {
        x?: number | undefined;
        y?: number | undefined;
    }[] | undefined;
    defaultHeight?: number | undefined;
    defaultImageUrl?: string | undefined;
    defaultText?: string | undefined;
    defaultWidth?: number | undefined;
    imageHeight?: number | undefined;
    imageLeft?: number | undefined;
    imageTop?: number | undefined;
    imageWidth?: number | undefined;
    keepRatioOnAutoSize?: boolean | undefined;
    maxHeight?: number | undefined;
    maxWidth?: number | undefined;
    minHeight?: number | undefined;
    minWidth?: number | undefined;
    template?: template | ((container: dxSVGElement, data: {
        item: dxDiagramShape;
    }) => void) | undefined;
    templateHeight?: number | undefined;
    templateLeft?: number | undefined;
    templateTop?: number | undefined;
    templateWidth?: number | undefined;
    textHeight?: number | undefined;
    textLeft?: number | undefined;
    textTop?: number | undefined;
    textWidth?: number | undefined;
    title?: string | undefined;
    toolboxTemplate?: template | ((container: dxSVGElement, data: {
        item: dxDiagramShape;
    }) => void) | undefined;
    toolboxWidthToHeightRatio?: number | undefined;
    type?: string | undefined;
    render?: ((...params: any) => React.ReactNode) | undefined;
    component?: React.ComponentType<any> | undefined;
    toolboxRender?: ((...params: any) => React.ReactNode) | undefined;
    toolboxComponent?: React.ComponentType<any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IDefaultItemPropertiesProps = React.PropsWithChildren<{
    connectorLineEnd?: ConnectorLineEnd;
    connectorLineStart?: ConnectorLineEnd;
    connectorLineType?: ConnectorLineType;
    shapeMaxHeight?: number | undefined;
    shapeMaxWidth?: number | undefined;
    shapeMinHeight?: number | undefined;
    shapeMinWidth?: number | undefined;
    style?: Record<string, any>;
    textStyle?: Record<string, any>;
}>;
declare const DefaultItemProperties: ((props: IDefaultItemPropertiesProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    connectorLineEnd?: ConnectorLineEnd | undefined;
    connectorLineStart?: ConnectorLineEnd | undefined;
    connectorLineType?: ConnectorLineType | undefined;
    shapeMaxHeight?: number | undefined;
    shapeMaxWidth?: number | undefined;
    shapeMinHeight?: number | undefined;
    shapeMinWidth?: number | undefined;
    style?: Record<string, any> | undefined;
    textStyle?: Record<string, any> | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEdgesProps = React.PropsWithChildren<{
    customDataExpr?: ((data: any, value: any) => any) | string | undefined;
    dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
    fromExpr?: ((data: any, value: any) => any) | string;
    fromLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
    fromPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
    keyExpr?: ((data: any, value: any) => any) | string;
    lineTypeExpr?: ((data: any, value: any) => any) | string | undefined;
    lockedExpr?: ((data: any, value: any) => any) | string | undefined;
    pointsExpr?: ((data: any, value: any) => any) | string | undefined;
    styleExpr?: ((data: any, value: any) => any) | string | undefined;
    textExpr?: ((data: any, value: any) => any) | string | undefined;
    textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
    toExpr?: ((data: any, value: any) => any) | string;
    toLineEndExpr?: ((data: any, value: any) => any) | string | undefined;
    toPointIndexExpr?: ((data: any, value: any) => any) | string | undefined;
    zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
}>;
declare const Edges: ((props: IEdgesProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    customDataExpr?: string | ((data: any, value: any) => any) | undefined;
    dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
    fromExpr?: string | ((data: any, value: any) => any) | undefined;
    fromLineEndExpr?: string | ((data: any, value: any) => any) | undefined;
    fromPointIndexExpr?: string | ((data: any, value: any) => any) | undefined;
    keyExpr?: string | ((data: any, value: any) => any) | undefined;
    lineTypeExpr?: string | ((data: any, value: any) => any) | undefined;
    lockedExpr?: string | ((data: any, value: any) => any) | undefined;
    pointsExpr?: string | ((data: any, value: any) => any) | undefined;
    styleExpr?: string | ((data: any, value: any) => any) | undefined;
    textExpr?: string | ((data: any, value: any) => any) | undefined;
    textStyleExpr?: string | ((data: any, value: any) => any) | undefined;
    toExpr?: string | ((data: any, value: any) => any) | undefined;
    toLineEndExpr?: string | ((data: any, value: any) => any) | undefined;
    toPointIndexExpr?: string | ((data: any, value: any) => any) | undefined;
    zIndexExpr?: string | ((data: any, value: any) => any) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IEditingProps = React.PropsWithChildren<{
    allowAddShape?: boolean;
    allowChangeConnection?: boolean;
    allowChangeConnectorPoints?: boolean;
    allowChangeConnectorText?: boolean;
    allowChangeShapeText?: boolean;
    allowDeleteConnector?: boolean;
    allowDeleteShape?: boolean;
    allowMoveShape?: boolean;
    allowResizeShape?: boolean;
}>;
declare const Editing: ((props: IEditingProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    allowAddShape?: boolean | undefined;
    allowChangeConnection?: boolean | undefined;
    allowChangeConnectorPoints?: boolean | undefined;
    allowChangeConnectorText?: boolean | undefined;
    allowChangeShapeText?: boolean | undefined;
    allowDeleteConnector?: boolean | undefined;
    allowDeleteShape?: boolean | undefined;
    allowMoveShape?: boolean | undefined;
    allowResizeShape?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IExportProps = React.PropsWithChildren<{
    fileName?: string;
}>;
declare const Export: ((props: IExportProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    fileName?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IGridSizeProps = React.PropsWithChildren<{
    items?: Array<number>;
    value?: number;
    defaultValue?: number;
    onValueChange?: (value: number) => void;
}>;
declare const GridSize: ((props: IGridSizeProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    items?: number[] | undefined;
    value?: number | undefined;
    defaultValue?: number | undefined;
    onValueChange?: ((value: number) => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IGroupProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    title?: string;
    category?: ShapeCategory | string;
    displayMode?: ToolboxDisplayMode;
    expanded?: boolean;
    shapes?: Array<ShapeType>;
}>;
declare const Group: ((props: IGroupProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    title?: string | undefined;
    category?: string | undefined;
    displayMode?: ToolboxDisplayMode | undefined;
    expanded?: boolean | undefined;
    shapes?: ShapeType[] | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IHistoryToolbarProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    visible?: boolean;
}>;
declare const HistoryToolbar: ((props: IHistoryToolbarProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    visible?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IItemProps = React.PropsWithChildren<{
    icon?: string;
    items?: Array<DiagramCommand | CustomCommand>;
    location?: ToolbarItemLocation;
    name?: DiagramCommand | string;
    text?: string;
    height?: number;
    width?: number;
}>;
declare const Item: ((props: IItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    icon?: string | undefined;
    items?: (DiagramCommand | CustomCommand)[] | undefined;
    location?: ToolbarItemLocation | undefined;
    name?: string | undefined;
    text?: string | undefined;
    height?: number | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IMainToolbarProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    visible?: boolean;
}>;
declare const MainToolbar: ((props: IMainToolbarProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    visible?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type INodesProps = React.PropsWithChildren<{
    autoLayout?: DataLayoutType | Record<string, any> | {
        orientation?: Orientation;
        type?: DataLayoutType;
    };
    autoSizeEnabled?: boolean;
    containerChildrenExpr?: ((data: any, value: any) => any) | string | undefined;
    containerKeyExpr?: ((data: any, value: any) => any) | string;
    customDataExpr?: ((data: any, value: any) => any) | string | undefined;
    dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
    heightExpr?: ((data: any, value: any) => any) | string | undefined;
    imageUrlExpr?: ((data: any, value: any) => any) | string | undefined;
    itemsExpr?: ((data: any, value: any) => any) | string | undefined;
    keyExpr?: ((data: any, value: any) => any) | string;
    leftExpr?: ((data: any, value: any) => any) | string | undefined;
    lockedExpr?: ((data: any, value: any) => any) | string | undefined;
    parentKeyExpr?: ((data: any, value: any) => any) | string | undefined;
    styleExpr?: ((data: any, value: any) => any) | string | undefined;
    textExpr?: ((data: any, value: any) => any) | string;
    textStyleExpr?: ((data: any, value: any) => any) | string | undefined;
    topExpr?: ((data: any, value: any) => any) | string | undefined;
    typeExpr?: ((data: any, value: any) => any) | string;
    widthExpr?: ((data: any, value: any) => any) | string | undefined;
    zIndexExpr?: ((data: any, value: any) => any) | string | undefined;
}>;
declare const Nodes: ((props: INodesProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    autoLayout?: Record<string, any> | DataLayoutType | {
        orientation?: Orientation | undefined;
        type?: DataLayoutType | undefined;
    } | undefined;
    autoSizeEnabled?: boolean | undefined;
    containerChildrenExpr?: string | ((data: any, value: any) => any) | undefined;
    containerKeyExpr?: string | ((data: any, value: any) => any) | undefined;
    customDataExpr?: string | ((data: any, value: any) => any) | undefined;
    dataSource?: string | any[] | DataSource<any, any> | DataSourceOptions<any, any, any, any> | Store<any, any> | null | undefined;
    heightExpr?: string | ((data: any, value: any) => any) | undefined;
    imageUrlExpr?: string | ((data: any, value: any) => any) | undefined;
    itemsExpr?: string | ((data: any, value: any) => any) | undefined;
    keyExpr?: string | ((data: any, value: any) => any) | undefined;
    leftExpr?: string | ((data: any, value: any) => any) | undefined;
    lockedExpr?: string | ((data: any, value: any) => any) | undefined;
    parentKeyExpr?: string | ((data: any, value: any) => any) | undefined;
    styleExpr?: string | ((data: any, value: any) => any) | undefined;
    textExpr?: string | ((data: any, value: any) => any) | undefined;
    textStyleExpr?: string | ((data: any, value: any) => any) | undefined;
    topExpr?: string | ((data: any, value: any) => any) | undefined;
    typeExpr?: string | ((data: any, value: any) => any) | undefined;
    widthExpr?: string | ((data: any, value: any) => any) | undefined;
    zIndexExpr?: string | ((data: any, value: any) => any) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IPageSizeProps = React.PropsWithChildren<{
    height?: number;
    items?: Array<Record<string, any>> | {
        height?: number;
        text?: string;
        width?: number;
    }[];
    width?: number;
    defaultHeight?: number;
    onHeightChange?: (value: number) => void;
    defaultWidth?: number;
    onWidthChange?: (value: number) => void;
}>;
declare const PageSize: ((props: IPageSizeProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    height?: number | undefined;
    items?: Record<string, any>[] | {
        height?: number | undefined;
        text?: string | undefined;
        width?: number | undefined;
    }[] | undefined;
    width?: number | undefined;
    defaultHeight?: number | undefined;
    onHeightChange?: ((value: number) => void) | undefined;
    defaultWidth?: number | undefined;
    onWidthChange?: ((value: number) => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IPageSizeItemProps = React.PropsWithChildren<{
    height?: number;
    text?: string;
    width?: number;
}>;
declare const PageSizeItem: ((props: IPageSizeItemProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    height?: number | undefined;
    text?: string | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IPropertiesPanelProps = React.PropsWithChildren<{
    tabs?: Array<Record<string, any>> | {
        commands?: Array<DiagramCommand | CustomCommand>;
        groups?: Array<Record<string, any>> | {
            commands?: Array<DiagramCommand | CustomCommand>;
            title?: string;
        }[];
        title?: string;
    }[];
    visibility?: PanelVisibility;
}>;
declare const PropertiesPanel: ((props: IPropertiesPanelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    tabs?: Record<string, any>[] | {
        commands?: (DiagramCommand | CustomCommand)[] | undefined;
        groups?: Record<string, any>[] | {
            commands?: (DiagramCommand | CustomCommand)[] | undefined;
            title?: string | undefined;
        }[] | undefined;
        title?: string | undefined;
    }[] | undefined;
    visibility?: PanelVisibility | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    groups?: Array<Record<string, any>> | {
        commands?: Array<DiagramCommand | CustomCommand>;
        title?: string;
    }[];
    title?: string;
}>;
declare const Tab: ((props: ITabProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    groups?: Record<string, any>[] | {
        commands?: (DiagramCommand | CustomCommand)[] | undefined;
        title?: string | undefined;
    }[] | undefined;
    title?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type ITabGroupProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    title?: string;
}>;
declare const TabGroup: ((props: ITabGroupProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    title?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IToolboxProps = React.PropsWithChildren<{
    groups?: Array<Record<string, any>> | {
        category?: ShapeCategory | string;
        displayMode?: ToolboxDisplayMode;
        expanded?: boolean;
        shapes?: Array<ShapeType>;
        title?: string;
    }[];
    shapeIconsPerRow?: number;
    showSearch?: boolean;
    visibility?: PanelVisibility;
    width?: number | undefined;
}>;
declare const Toolbox: ((props: IToolboxProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    groups?: Record<string, any>[] | {
        category?: string | undefined;
        displayMode?: ToolboxDisplayMode | undefined;
        expanded?: boolean | undefined;
        shapes?: ShapeType[] | undefined;
        title?: string | undefined;
    }[] | undefined;
    shapeIconsPerRow?: number | undefined;
    showSearch?: boolean | undefined;
    visibility?: PanelVisibility | undefined;
    width?: number | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IToolboxGroupProps = React.PropsWithChildren<{
    category?: ShapeCategory | string;
    displayMode?: ToolboxDisplayMode;
    expanded?: boolean;
    shapes?: Array<ShapeType>;
    title?: string;
}>;
declare const ToolboxGroup: ((props: IToolboxGroupProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    category?: string | undefined;
    displayMode?: ToolboxDisplayMode | undefined;
    expanded?: boolean | undefined;
    shapes?: ShapeType[] | undefined;
    title?: string | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IViewToolbarProps = React.PropsWithChildren<{
    commands?: Array<DiagramCommand | CustomCommand>;
    visible?: boolean;
}>;
declare const ViewToolbar: ((props: IViewToolbarProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    commands?: (DiagramCommand | CustomCommand)[] | undefined;
    visible?: boolean | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
type IZoomLevelProps = React.PropsWithChildren<{
    items?: Array<number>;
    value?: number | undefined;
    defaultValue?: number | undefined;
    onValueChange?: (value: number | undefined) => void;
}>;
declare const ZoomLevel: ((props: IZoomLevelProps) => React.FunctionComponentElement<React.PropsWithChildren<{
    items?: number[] | undefined;
    value?: number | undefined;
    defaultValue?: number | undefined;
    onValueChange?: ((value: number | undefined) => void) | undefined;
} & {
    children?: React.ReactNode;
} & {
    elementDescriptor: import("./core/configuration/react/element").IElementDescriptor;
}>>) & NestedComponentMeta;
export default Diagram;
export { Diagram, IDiagramOptions, DiagramRef, AutoLayout, IAutoLayoutProps, Command, ICommandProps, CommandItem, ICommandItemProps, ConnectionPoint, IConnectionPointProps, ContextMenu, IContextMenuProps, ContextToolbox, IContextToolboxProps, CustomShape, ICustomShapeProps, DefaultItemProperties, IDefaultItemPropertiesProps, Edges, IEdgesProps, Editing, IEditingProps, Export, IExportProps, GridSize, IGridSizeProps, Group, IGroupProps, HistoryToolbar, IHistoryToolbarProps, Item, IItemProps, MainToolbar, IMainToolbarProps, Nodes, INodesProps, PageSize, IPageSizeProps, PageSizeItem, IPageSizeItemProps, PropertiesPanel, IPropertiesPanelProps, Tab, ITabProps, TabGroup, ITabGroupProps, Toolbox, IToolboxProps, ToolboxGroup, IToolboxGroupProps, ViewToolbar, IViewToolbarProps, ZoomLevel, IZoomLevelProps };
import type * as DiagramTypes from 'devextreme/ui/diagram_types';
export { DiagramTypes };