devextreme-react 23.2.6 → 24.1.2-beta

package/cjs/diagram.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 23.2.6
- * Build date: Wed May 01 2024
+ * Version: 24.1.2-beta
+ * Build date: Mon May 13 2024
  *
  * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -11,20 +11,20 @@
  * https://github.com/DevExpress/devextreme-react
  */
 
-/// <reference types="react" />
+import * as React from "react";
+import { Ref, ReactElement } from "react";
 import dxDiagram, { Properties } from "devextreme/ui/diagram";
-import { Component as BaseComponent, IHtmlOptions } from "./core/component";
-import NestedOption from "./core/nested-option";
+import { IHtmlOptions, IElementDescriptor } from "./core/component";
 import type { ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, dxDiagramCustomCommand, dxDiagramShape } from "devextreme/ui/diagram";
 import type { dxSVGElement } from "devextreme/core/element";
 import type { template } from "devextreme/core/templates/template";
 import type { DataSourceOptions } from "devextreme/data/data_source";
 import type { Store } from "devextreme/data/store";
 import type DataSource from "devextreme/data/data_source";
-declare type ReplaceFieldTypes<TSource, TReplacement> = {
+type ReplaceFieldTypes<TSource, TReplacement> = {
     [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
 };
-declare type IDiagramOptionsNarrowedEvents = {
+type IDiagramOptionsNarrowedEvents = {
     onContentReady?: ((e: ContentReadyEvent) => void);
     onCustomCommand?: ((e: CustomCommandEvent) => void);
     onDisposing?: ((e: DisposingEvent) => void);
@@ -34,13 +34,11 @@ declare type IDiagramOptionsNarrowedEvents = {
     onRequestEditOperation?: ((e: RequestEditOperationEvent) => void);
     onRequestLayoutUpdate?: ((e: RequestLayoutUpdateEvent) => void);
 };
-declare type IDiagramOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IDiagramOptionsNarrowedEvents> & IHtmlOptions & {
+type IDiagramOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IDiagramOptionsNarrowedEvents> & IHtmlOptions & {
     customShapeRender?: (...params: any) => React.ReactNode;
     customShapeComponent?: React.ComponentType<any>;
-    customShapeKeyFn?: (data: any) => string;
     customShapeToolboxRender?: (...params: any) => React.ReactNode;
     customShapeToolboxComponent?: React.ComponentType<any>;
-    customShapeToolboxKeyFn?: (data: any) => string;
     defaultGridSize?: number | Record<string, any>;
     defaultPageSize?: Record<string, any>;
     defaultZoomLevel?: number | Record<string, any>;
@@ -48,140 +46,49 @@ declare type IDiagramOptions = React.PropsWithChildren<ReplaceFieldTypes<Propert
     onPageSizeChange?: (value: Record<string, any>) => void;
     onZoomLevelChange?: (value: number | Record<string, any>) => void;
 }>;
-declare class Diagram extends BaseComponent<React.PropsWithChildren<IDiagramOptions>> {
-    get instance(): dxDiagram;
-    protected _WidgetClass: typeof dxDiagram;
-    protected subscribableOptions: string[];
-    protected independentEvents: string[];
-    protected _defaults: {
-        defaultGridSize: string;
-        defaultPageSize: string;
-        defaultZoomLevel: string;
-    };
-    protected _expectedChildren: {
-        contextMenu: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        contextToolbox: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        customShape: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        defaultItemProperties: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        edges: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        editing: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        export: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        gridSize: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        historyToolbar: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        mainToolbar: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        nodes: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        pageSize: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        propertiesPanel: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        toolbox: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        viewToolbar: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        zoomLevel: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-    protected _templateProps: {
-        tmplOption: string;
-        render: string;
-        component: string;
-        keyFn: string;
-    }[];
+interface DiagramRef {
+    instance: () => dxDiagram;
 }
-declare type IAutoLayoutProps = React.PropsWithChildren<{
+declare const Diagram: (props: React.PropsWithChildren<IDiagramOptions> & {
+    ref?: Ref<DiagramRef>;
+}) => ReactElement | null;
+type IAutoLayoutProps = React.PropsWithChildren<{
     orientation?: "horizontal" | "vertical";
     type?: "auto" | "off" | "tree" | "layered";
 }>;
-declare class AutoLayout extends NestedOption<IAutoLayoutProps> {
-    static OptionName: string;
-}
-declare type ICommandProps = React.PropsWithChildren<{
+declare const _componentAutoLayout: React.MemoExoticComponent<(props: IAutoLayoutProps) => React.FunctionComponentElement<IAutoLayoutProps>>;
+declare const AutoLayout: typeof _componentAutoLayout & IElementDescriptor;
+type ICommandProps = React.PropsWithChildren<{
     icon?: string;
     items?: Array<dxDiagramCustomCommand>;
     location?: "after" | "before" | "center";
     name?: "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox";
     text?: string;
 }>;
-declare class Command extends NestedOption<ICommandProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type ICommandItemProps = React.PropsWithChildren<{
+declare const _componentCommand: React.MemoExoticComponent<(props: ICommandProps) => React.FunctionComponentElement<ICommandProps>>;
+declare const Command: typeof _componentCommand & IElementDescriptor;
+type ICommandItemProps = React.PropsWithChildren<{
     icon?: string;
     items?: Array<dxDiagramCustomCommand>;
     location?: "after" | "before" | "center";
     name?: "separator" | "exportSvg" | "exportPng" | "exportJpg" | "undo" | "redo" | "cut" | "copy" | "paste" | "selectAll" | "delete" | "fontName" | "fontSize" | "bold" | "italic" | "underline" | "fontColor" | "lineStyle" | "lineWidth" | "lineColor" | "fillColor" | "textAlignLeft" | "textAlignCenter" | "textAlignRight" | "lock" | "unlock" | "sendToBack" | "bringToFront" | "insertShapeImage" | "editShapeImage" | "deleteShapeImage" | "connectorLineType" | "connectorLineStart" | "connectorLineEnd" | "layoutTreeTopToBottom" | "layoutTreeBottomToTop" | "layoutTreeLeftToRight" | "layoutTreeRightToLeft" | "layoutLayeredTopToBottom" | "layoutLayeredBottomToTop" | "layoutLayeredLeftToRight" | "layoutLayeredRightToLeft" | "fullScreen" | "zoomLevel" | "showGrid" | "snapToGrid" | "gridSize" | "units" | "pageSize" | "pageOrientation" | "pageColor" | "simpleView" | "toolbox";
     text?: string;
 }>;
-declare class CommandItem extends NestedOption<ICommandItemProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type IConnectionPointProps = React.PropsWithChildren<{
+declare const _componentCommandItem: React.MemoExoticComponent<(props: ICommandItemProps) => React.FunctionComponentElement<ICommandItemProps>>;
+declare const CommandItem: typeof _componentCommandItem & IElementDescriptor;
+type IConnectionPointProps = React.PropsWithChildren<{
     x?: number;
     y?: number;
 }>;
-declare class ConnectionPoint extends NestedOption<IConnectionPointProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type IContextMenuProps = React.PropsWithChildren<{
+declare const _componentConnectionPoint: React.MemoExoticComponent<(props: IConnectionPointProps) => React.FunctionComponentElement<IConnectionPointProps>>;
+declare const ConnectionPoint: typeof _componentConnectionPoint & IElementDescriptor;
+type IContextMenuProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     enabled?: boolean;
 }>;
-declare class ContextMenu extends NestedOption<IContextMenuProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        command: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IContextToolboxProps = React.PropsWithChildren<{
+declare const _componentContextMenu: React.MemoExoticComponent<(props: IContextMenuProps) => React.FunctionComponentElement<IContextMenuProps>>;
+declare const ContextMenu: typeof _componentContextMenu & IElementDescriptor;
+type IContextToolboxProps = React.PropsWithChildren<{
     category?: "general" | "flowchart" | "orgChart" | "containers" | "custom";
     displayMode?: "icons" | "texts";
     enabled?: boolean;
@@ -189,10 +96,9 @@ declare type IContextToolboxProps = React.PropsWithChildren<{
     shapes?: Array<"text" | "rectangle" | "ellipse" | "cross" | "triangle" | "diamond" | "heart" | "pentagon" | "hexagon" | "octagon" | "star" | "arrowLeft" | "arrowTop" | "arrowRight" | "arrowBottom" | "arrowNorthSouth" | "arrowEastWest" | "process" | "decision" | "terminator" | "predefinedProcess" | "document" | "multipleDocuments" | "manualInput" | "preparation" | "data" | "database" | "hardDisk" | "internalStorage" | "paperTape" | "manualOperation" | "delay" | "storedData" | "display" | "merge" | "connector" | "or" | "summingJunction" | "verticalContainer" | "horizontalContainer" | "cardWithImageOnLeft" | "cardWithImageOnTop" | "cardWithImageOnRight">;
     width?: number;
 }>;
-declare class ContextToolbox extends NestedOption<IContextToolboxProps> {
-    static OptionName: string;
-}
-declare type ICustomShapeProps = React.PropsWithChildren<{
+declare const _componentContextToolbox: React.MemoExoticComponent<(props: IContextToolboxProps) => React.FunctionComponentElement<IContextToolboxProps>>;
+declare const ContextToolbox: typeof _componentContextToolbox & IElementDescriptor;
+type ICustomShapeProps = React.PropsWithChildren<{
     allowEditImage?: boolean;
     allowEditText?: boolean;
     allowResize?: boolean;
@@ -240,28 +146,12 @@ declare type ICustomShapeProps = React.PropsWithChildren<{
     type?: string;
     render?: (...params: any) => React.ReactNode;
     component?: React.ComponentType<any>;
-    keyFn?: (data: any) => string;
     toolboxRender?: (...params: any) => React.ReactNode;
     toolboxComponent?: React.ComponentType<any>;
-    toolboxKeyFn?: (data: any) => string;
 }>;
-declare class CustomShape extends NestedOption<ICustomShapeProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-    static ExpectedChildren: {
-        connectionPoint: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-    static TemplateProps: {
-        tmplOption: string;
-        render: string;
-        component: string;
-        keyFn: string;
-    }[];
-}
-declare type IDefaultItemPropertiesProps = React.PropsWithChildren<{
+declare const _componentCustomShape: React.MemoExoticComponent<(props: ICustomShapeProps) => React.FunctionComponentElement<ICustomShapeProps>>;
+declare const CustomShape: typeof _componentCustomShape & IElementDescriptor;
+type IDefaultItemPropertiesProps = React.PropsWithChildren<{
     connectorLineEnd?: "none" | "arrow" | "outlinedTriangle" | "filledTriangle";
     connectorLineStart?: "none" | "arrow" | "outlinedTriangle" | "filledTriangle";
     connectorLineType?: "straight" | "orthogonal";
@@ -272,10 +162,9 @@ declare type IDefaultItemPropertiesProps = React.PropsWithChildren<{
     style?: Record<string, any>;
     textStyle?: Record<string, any>;
 }>;
-declare class DefaultItemProperties extends NestedOption<IDefaultItemPropertiesProps> {
-    static OptionName: string;
-}
-declare type IEdgesProps = React.PropsWithChildren<{
+declare const _componentDefaultItemProperties: React.MemoExoticComponent<(props: IDefaultItemPropertiesProps) => React.FunctionComponentElement<IDefaultItemPropertiesProps>>;
+declare const DefaultItemProperties: typeof _componentDefaultItemProperties & IElementDescriptor;
+type IEdgesProps = React.PropsWithChildren<{
     customDataExpr?: ((data: any, value: any) => any) | string;
     dataSource?: Array<any> | DataSource | DataSourceOptions | null | Store | string;
     fromExpr?: ((data: any, value: any) => any) | string;
@@ -293,10 +182,9 @@ declare type IEdgesProps = React.PropsWithChildren<{
     toPointIndexExpr?: ((data: any, value: any) => any) | string;
     zIndexExpr?: ((data: any, value: any) => any) | string;
 }>;
-declare class Edges extends NestedOption<IEdgesProps> {
-    static OptionName: string;
-}
-declare type IEditingProps = React.PropsWithChildren<{
+declare const _componentEdges: React.MemoExoticComponent<(props: IEdgesProps) => React.FunctionComponentElement<IEdgesProps>>;
+declare const Edges: typeof _componentEdges & IElementDescriptor;
+type IEditingProps = React.PropsWithChildren<{
     allowAddShape?: boolean;
     allowChangeConnection?: boolean;
     allowChangeConnectorPoints?: boolean;
@@ -307,28 +195,22 @@ declare type IEditingProps = React.PropsWithChildren<{
     allowMoveShape?: boolean;
     allowResizeShape?: boolean;
 }>;
-declare class Editing extends NestedOption<IEditingProps> {
-    static OptionName: string;
-}
-declare type IExportProps = React.PropsWithChildren<{
+declare const _componentEditing: React.MemoExoticComponent<(props: IEditingProps) => React.FunctionComponentElement<IEditingProps>>;
+declare const Editing: typeof _componentEditing & IElementDescriptor;
+type IExportProps = React.PropsWithChildren<{
     fileName?: string;
 }>;
-declare class Export extends NestedOption<IExportProps> {
-    static OptionName: string;
-}
-declare type IGridSizeProps = React.PropsWithChildren<{
+declare const _componentExport: React.MemoExoticComponent<(props: IExportProps) => React.FunctionComponentElement<IExportProps>>;
+declare const Export: typeof _componentExport & IElementDescriptor;
+type IGridSizeProps = React.PropsWithChildren<{
     items?: Array<number>;
     value?: number;
     defaultValue?: number;
     onValueChange?: (value: number) => void;
 }>;
-declare class GridSize extends NestedOption<IGridSizeProps> {
-    static OptionName: string;
-    static DefaultsProps: {
-        defaultValue: string;
-    };
-}
-declare type IGroupProps = React.PropsWithChildren<{
+declare const _componentGridSize: React.MemoExoticComponent<(props: IGridSizeProps) => React.FunctionComponentElement<IGridSizeProps>>;
+declare const GridSize: typeof _componentGridSize & IElementDescriptor;
+type IGroupProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     title?: string;
     category?: "general" | "flowchart" | "orgChart" | "containers" | "custom";
@@ -336,24 +218,15 @@ declare type IGroupProps = React.PropsWithChildren<{
     expanded?: boolean;
     shapes?: Array<"text" | "rectangle" | "ellipse" | "cross" | "triangle" | "diamond" | "heart" | "pentagon" | "hexagon" | "octagon" | "star" | "arrowLeft" | "arrowTop" | "arrowRight" | "arrowBottom" | "arrowNorthSouth" | "arrowEastWest" | "process" | "decision" | "terminator" | "predefinedProcess" | "document" | "multipleDocuments" | "manualInput" | "preparation" | "data" | "database" | "hardDisk" | "internalStorage" | "paperTape" | "manualOperation" | "delay" | "storedData" | "display" | "merge" | "connector" | "or" | "summingJunction" | "verticalContainer" | "horizontalContainer" | "cardWithImageOnLeft" | "cardWithImageOnTop" | "cardWithImageOnRight">;
 }>;
-declare class Group extends NestedOption<IGroupProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type IHistoryToolbarProps = React.PropsWithChildren<{
+declare const _componentGroup: React.MemoExoticComponent<(props: IGroupProps) => React.FunctionComponentElement<IGroupProps>>;
+declare const Group: typeof _componentGroup & IElementDescriptor;
+type IHistoryToolbarProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     visible?: boolean;
 }>;
-declare class HistoryToolbar extends NestedOption<IHistoryToolbarProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        command: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IItemProps = React.PropsWithChildren<{
+declare const _componentHistoryToolbar: React.MemoExoticComponent<(props: IHistoryToolbarProps) => React.FunctionComponentElement<IHistoryToolbarProps>>;
+declare const HistoryToolbar: typeof _componentHistoryToolbar & IElementDescriptor;
+type IItemProps = React.PropsWithChildren<{
     icon?: string;
     items?: Array<dxDiagramCustomCommand>;
     location?: "after" | "before" | "center";
@@ -362,24 +235,15 @@ declare type IItemProps = React.PropsWithChildren<{
     height?: number;
     width?: number;
 }>;
-declare class Item extends NestedOption<IItemProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type IMainToolbarProps = React.PropsWithChildren<{
+declare const _componentItem: React.MemoExoticComponent<(props: IItemProps) => React.FunctionComponentElement<IItemProps>>;
+declare const Item: typeof _componentItem & IElementDescriptor;
+type IMainToolbarProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     visible?: boolean;
 }>;
-declare class MainToolbar extends NestedOption<IMainToolbarProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        command: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type INodesProps = React.PropsWithChildren<{
+declare const _componentMainToolbar: React.MemoExoticComponent<(props: IMainToolbarProps) => React.FunctionComponentElement<IMainToolbarProps>>;
+declare const MainToolbar: typeof _componentMainToolbar & IElementDescriptor;
+type INodesProps = React.PropsWithChildren<{
     autoLayout?: Record<string, any> | "auto" | "off" | "tree" | "layered" | {
         orientation?: "horizontal" | "vertical";
         type?: "auto" | "off" | "tree" | "layered";
@@ -404,16 +268,9 @@ declare type INodesProps = React.PropsWithChildren<{
     widthExpr?: ((data: any, value: any) => any) | string;
     zIndexExpr?: ((data: any, value: any) => any) | string;
 }>;
-declare class Nodes extends NestedOption<INodesProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        autoLayout: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IPageSizeProps = React.PropsWithChildren<{
+declare const _componentNodes: React.MemoExoticComponent<(props: INodesProps) => React.FunctionComponentElement<INodesProps>>;
+declare const Nodes: typeof _componentNodes & IElementDescriptor;
+type IPageSizeProps = React.PropsWithChildren<{
     height?: number;
     items?: Array<Record<string, any>> | {
         height?: number;
@@ -426,33 +283,16 @@ declare type IPageSizeProps = React.PropsWithChildren<{
     defaultWidth?: number;
     onWidthChange?: (value: number) => void;
 }>;
-declare class PageSize extends NestedOption<IPageSizeProps> {
-    static OptionName: string;
-    static DefaultsProps: {
-        defaultHeight: string;
-        defaultWidth: string;
-    };
-    static ExpectedChildren: {
-        item: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        pageSizeItem: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IPageSizeItemProps = React.PropsWithChildren<{
+declare const _componentPageSize: React.MemoExoticComponent<(props: IPageSizeProps) => React.FunctionComponentElement<IPageSizeProps>>;
+declare const PageSize: typeof _componentPageSize & IElementDescriptor;
+type IPageSizeItemProps = React.PropsWithChildren<{
     height?: number;
     text?: string;
     width?: number;
 }>;
-declare class PageSizeItem extends NestedOption<IPageSizeItemProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type IPropertiesPanelProps = React.PropsWithChildren<{
+declare const _componentPageSizeItem: React.MemoExoticComponent<(props: IPageSizeItemProps) => React.FunctionComponentElement<IPageSizeItemProps>>;
+declare const PageSizeItem: typeof _componentPageSizeItem & IElementDescriptor;
+type IPropertiesPanelProps = React.PropsWithChildren<{
     tabs?: Array<Record<string, any>> | {
         commands?: Array<dxDiagramCustomCommand>;
         groups?: Array<Record<string, any>> | {
@@ -463,16 +303,9 @@ declare type IPropertiesPanelProps = React.PropsWithChildren<{
     }[];
     visibility?: "auto" | "visible" | "collapsed" | "disabled";
 }>;
-declare class PropertiesPanel extends NestedOption<IPropertiesPanelProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        tab: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type ITabProps = React.PropsWithChildren<{
+declare const _componentPropertiesPanel: React.MemoExoticComponent<(props: IPropertiesPanelProps) => React.FunctionComponentElement<IPropertiesPanelProps>>;
+declare const PropertiesPanel: typeof _componentPropertiesPanel & IElementDescriptor;
+type ITabProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     groups?: Array<Record<string, any>> | {
         commands?: Array<dxDiagramCustomCommand>;
@@ -480,39 +313,15 @@ declare type ITabProps = React.PropsWithChildren<{
     }[];
     title?: string;
 }>;
-declare class Tab extends NestedOption<ITabProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-    static ExpectedChildren: {
-        command: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        group: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        tabGroup: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type ITabGroupProps = React.PropsWithChildren<{
+declare const _componentTab: React.MemoExoticComponent<(props: ITabProps) => React.FunctionComponentElement<ITabProps>>;
+declare const Tab: typeof _componentTab & IElementDescriptor;
+type ITabGroupProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     title?: string;
 }>;
-declare class TabGroup extends NestedOption<ITabGroupProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-    static ExpectedChildren: {
-        command: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IToolboxProps = React.PropsWithChildren<{
+declare const _componentTabGroup: React.MemoExoticComponent<(props: ITabGroupProps) => React.FunctionComponentElement<ITabGroupProps>>;
+declare const TabGroup: typeof _componentTabGroup & IElementDescriptor;
+type IToolboxProps = React.PropsWithChildren<{
     groups?: Array<Record<string, any>> | {
         category?: "general" | "flowchart" | "orgChart" | "containers" | "custom";
         displayMode?: "icons" | "texts";
@@ -525,56 +334,32 @@ declare type IToolboxProps = React.PropsWithChildren<{
     visibility?: "auto" | "visible" | "collapsed" | "disabled";
     width?: number;
 }>;
-declare class Toolbox extends NestedOption<IToolboxProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        group: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-        toolboxGroup: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IToolboxGroupProps = React.PropsWithChildren<{
+declare const _componentToolbox: React.MemoExoticComponent<(props: IToolboxProps) => React.FunctionComponentElement<IToolboxProps>>;
+declare const Toolbox: typeof _componentToolbox & IElementDescriptor;
+type IToolboxGroupProps = React.PropsWithChildren<{
     category?: "general" | "flowchart" | "orgChart" | "containers" | "custom";
     displayMode?: "icons" | "texts";
     expanded?: boolean;
     shapes?: Array<"text" | "rectangle" | "ellipse" | "cross" | "triangle" | "diamond" | "heart" | "pentagon" | "hexagon" | "octagon" | "star" | "arrowLeft" | "arrowTop" | "arrowRight" | "arrowBottom" | "arrowNorthSouth" | "arrowEastWest" | "process" | "decision" | "terminator" | "predefinedProcess" | "document" | "multipleDocuments" | "manualInput" | "preparation" | "data" | "database" | "hardDisk" | "internalStorage" | "paperTape" | "manualOperation" | "delay" | "storedData" | "display" | "merge" | "connector" | "or" | "summingJunction" | "verticalContainer" | "horizontalContainer" | "cardWithImageOnLeft" | "cardWithImageOnTop" | "cardWithImageOnRight">;
     title?: string;
 }>;
-declare class ToolboxGroup extends NestedOption<IToolboxGroupProps> {
-    static OptionName: string;
-    static IsCollectionItem: boolean;
-}
-declare type IViewToolbarProps = React.PropsWithChildren<{
+declare const _componentToolboxGroup: React.MemoExoticComponent<(props: IToolboxGroupProps) => React.FunctionComponentElement<IToolboxGroupProps>>;
+declare const ToolboxGroup: typeof _componentToolboxGroup & IElementDescriptor;
+type IViewToolbarProps = React.PropsWithChildren<{
     commands?: Array<dxDiagramCustomCommand>;
     visible?: boolean;
 }>;
-declare class ViewToolbar extends NestedOption<IViewToolbarProps> {
-    static OptionName: string;
-    static ExpectedChildren: {
-        command: {
-            optionName: string;
-            isCollectionItem: boolean;
-        };
-    };
-}
-declare type IZoomLevelProps = React.PropsWithChildren<{
+declare const _componentViewToolbar: React.MemoExoticComponent<(props: IViewToolbarProps) => React.FunctionComponentElement<IViewToolbarProps>>;
+declare const ViewToolbar: typeof _componentViewToolbar & IElementDescriptor;
+type IZoomLevelProps = React.PropsWithChildren<{
     items?: Array<number>;
     value?: number;
     defaultValue?: number;
     onValueChange?: (value: number) => void;
 }>;
-declare class ZoomLevel extends NestedOption<IZoomLevelProps> {
-    static OptionName: string;
-    static DefaultsProps: {
-        defaultValue: string;
-    };
-}
+declare const _componentZoomLevel: React.MemoExoticComponent<(props: IZoomLevelProps) => React.FunctionComponentElement<IZoomLevelProps>>;
+declare const ZoomLevel: typeof _componentZoomLevel & IElementDescriptor;
 export default Diagram;
-export { Diagram, IDiagramOptions, 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 };
+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 };