devextreme-react 23.2.6 → 24.1.2-beta

package/esm/diagram.js

@@ -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
  *
@@ -12,439 +12,290 @@
  */
 
 "use client";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
+    return __assign.apply(this, arguments);
+};
+import * as React from "react";
+import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
 import dxDiagram from "devextreme/ui/diagram";
-import * as PropTypes from "prop-types";
 import { Component as BaseComponent } from "./core/component";
 import NestedOption from "./core/nested-option";
-var Diagram = /** @class */ (function (_super) {
-    __extends(Diagram, _super);
-    function Diagram() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._WidgetClass = dxDiagram;
-        _this.subscribableOptions = ["gridSize", "gridSize.value", "pageSize", "pageSize.height", "pageSize.width", "zoomLevel", "zoomLevel.value"];
-        _this.independentEvents = ["onContentReady", "onCustomCommand", "onDisposing", "onInitialized", "onItemClick", "onItemDblClick", "onRequestEditOperation", "onRequestLayoutUpdate"];
-        _this._defaults = {
-            defaultGridSize: "gridSize",
-            defaultPageSize: "pageSize",
-            defaultZoomLevel: "zoomLevel"
-        };
-        _this._expectedChildren = {
-            contextMenu: { optionName: "contextMenu", isCollectionItem: false },
-            contextToolbox: { optionName: "contextToolbox", isCollectionItem: false },
-            customShape: { optionName: "customShapes", isCollectionItem: true },
-            defaultItemProperties: { optionName: "defaultItemProperties", isCollectionItem: false },
-            edges: { optionName: "edges", isCollectionItem: false },
-            editing: { optionName: "editing", isCollectionItem: false },
-            export: { optionName: "export", isCollectionItem: false },
-            gridSize: { optionName: "gridSize", isCollectionItem: false },
-            historyToolbar: { optionName: "historyToolbar", isCollectionItem: false },
-            mainToolbar: { optionName: "mainToolbar", isCollectionItem: false },
-            nodes: { optionName: "nodes", isCollectionItem: false },
-            pageSize: { optionName: "pageSize", isCollectionItem: false },
-            propertiesPanel: { optionName: "propertiesPanel", isCollectionItem: false },
-            toolbox: { optionName: "toolbox", isCollectionItem: false },
-            viewToolbar: { optionName: "viewToolbar", isCollectionItem: false },
-            zoomLevel: { optionName: "zoomLevel", isCollectionItem: false }
-        };
-        _this._templateProps = [{
-                tmplOption: "customShapeTemplate",
-                render: "customShapeRender",
-                component: "customShapeComponent",
-                keyFn: "customShapeKeyFn"
-            }, {
-                tmplOption: "customShapeToolboxTemplate",
-                render: "customShapeToolboxRender",
-                component: "customShapeToolboxComponent",
-                keyFn: "customShapeToolboxKeyFn"
-            }];
-        return _this;
-    }
-    Object.defineProperty(Diagram.prototype, "instance", {
-        get: function () {
-            return this._instance;
+var Diagram = memo(forwardRef(function (props, ref) {
+    var baseRef = useRef(null);
+    useImperativeHandle(ref, function () { return ({
+        instance: function () {
+            var _a;
+            return (_a = baseRef.current) === null || _a === void 0 ? void 0 : _a.getInstance();
+        }
+    }); }, [baseRef.current]);
+    var subscribableOptions = useMemo(function () { return (["gridSize", "gridSize.value", "pageSize", "pageSize.height", "pageSize.width", "zoomLevel", "zoomLevel.value"]); }, []);
+    var independentEvents = useMemo(function () { return (["onContentReady", "onCustomCommand", "onDisposing", "onInitialized", "onItemClick", "onItemDblClick", "onRequestEditOperation", "onRequestLayoutUpdate"]); }, []);
+    var defaults = useMemo(function () { return ({
+        defaultGridSize: "gridSize",
+        defaultPageSize: "pageSize",
+        defaultZoomLevel: "zoomLevel",
+    }); }, []);
+    var expectedChildren = useMemo(function () { return ({
+        contextMenu: { optionName: "contextMenu", isCollectionItem: false },
+        contextToolbox: { optionName: "contextToolbox", isCollectionItem: false },
+        customShape: { optionName: "customShapes", isCollectionItem: true },
+        defaultItemProperties: { optionName: "defaultItemProperties", isCollectionItem: false },
+        edges: { optionName: "edges", isCollectionItem: false },
+        editing: { optionName: "editing", isCollectionItem: false },
+        export: { optionName: "export", isCollectionItem: false },
+        gridSize: { optionName: "gridSize", isCollectionItem: false },
+        historyToolbar: { optionName: "historyToolbar", isCollectionItem: false },
+        mainToolbar: { optionName: "mainToolbar", isCollectionItem: false },
+        nodes: { optionName: "nodes", isCollectionItem: false },
+        pageSize: { optionName: "pageSize", isCollectionItem: false },
+        propertiesPanel: { optionName: "propertiesPanel", isCollectionItem: false },
+        toolbox: { optionName: "toolbox", isCollectionItem: false },
+        viewToolbar: { optionName: "viewToolbar", isCollectionItem: false },
+        zoomLevel: { optionName: "zoomLevel", isCollectionItem: false }
+    }); }, []);
+    var templateProps = useMemo(function () { return ([
+        {
+            tmplOption: "customShapeTemplate",
+            render: "customShapeRender",
+            component: "customShapeComponent"
         },
-        enumerable: false,
-        configurable: true
-    });
-    return Diagram;
-}(BaseComponent));
-Diagram.propTypes = {
-    autoZoomMode: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.oneOf([
-            "fitContent",
-            "fitWidth",
-            "disabled"
-        ])
-    ]),
-    contextMenu: PropTypes.object,
-    contextToolbox: PropTypes.object,
-    customShapes: PropTypes.array,
-    defaultItemProperties: PropTypes.object,
-    disabled: PropTypes.bool,
-    edges: PropTypes.object,
-    editing: PropTypes.object,
-    elementAttr: PropTypes.object,
-    export: PropTypes.object,
-    fullScreen: PropTypes.bool,
-    gridSize: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.object
-    ]),
-    hasChanges: PropTypes.bool,
-    height: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.number,
-        PropTypes.string
-    ]),
-    historyToolbar: PropTypes.object,
-    mainToolbar: PropTypes.object,
-    nodes: PropTypes.object,
-    onContentReady: PropTypes.func,
-    onCustomCommand: PropTypes.func,
-    onDisposing: PropTypes.func,
-    onInitialized: PropTypes.func,
-    onItemClick: PropTypes.func,
-    onItemDblClick: PropTypes.func,
-    onOptionChanged: PropTypes.func,
-    onRequestEditOperation: PropTypes.func,
-    onRequestLayoutUpdate: PropTypes.func,
-    onSelectionChanged: PropTypes.func,
-    pageColor: PropTypes.string,
-    pageOrientation: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.oneOf([
-            "portrait",
-            "landscape"
-        ])
-    ]),
-    pageSize: PropTypes.object,
-    propertiesPanel: PropTypes.object,
-    readOnly: PropTypes.bool,
-    rtlEnabled: PropTypes.bool,
-    showGrid: PropTypes.bool,
-    simpleView: PropTypes.bool,
-    snapToGrid: PropTypes.bool,
-    toolbox: PropTypes.object,
-    units: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.oneOf([
-            "in",
-            "cm",
-            "px"
-        ])
-    ]),
-    useNativeScrolling: PropTypes.bool,
-    viewToolbar: PropTypes.object,
-    viewUnits: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.oneOf([
-            "in",
-            "cm",
-            "px"
-        ])
-    ]),
-    visible: PropTypes.bool,
-    width: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.number,
-        PropTypes.string
-    ]),
-    zoomLevel: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.object
-    ])
-};
-var AutoLayout = /** @class */ (function (_super) {
-    __extends(AutoLayout, _super);
-    function AutoLayout() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AutoLayout.OptionName = "autoLayout";
-    return AutoLayout;
-}(NestedOption));
-var Command = /** @class */ (function (_super) {
-    __extends(Command, _super);
-    function Command() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Command.OptionName = "commands";
-    Command.IsCollectionItem = true;
-    return Command;
-}(NestedOption));
-var CommandItem = /** @class */ (function (_super) {
-    __extends(CommandItem, _super);
-    function CommandItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CommandItem.OptionName = "items";
-    CommandItem.IsCollectionItem = true;
-    return CommandItem;
-}(NestedOption));
-var ConnectionPoint = /** @class */ (function (_super) {
-    __extends(ConnectionPoint, _super);
-    function ConnectionPoint() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ConnectionPoint.OptionName = "connectionPoints";
-    ConnectionPoint.IsCollectionItem = true;
-    return ConnectionPoint;
-}(NestedOption));
-var ContextMenu = /** @class */ (function (_super) {
-    __extends(ContextMenu, _super);
-    function ContextMenu() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ContextMenu.OptionName = "contextMenu";
-    ContextMenu.ExpectedChildren = {
+        {
+            tmplOption: "customShapeToolboxTemplate",
+            render: "customShapeToolboxRender",
+            component: "customShapeToolboxComponent"
+        },
+    ]); }, []);
+    return (React.createElement((BaseComponent), __assign({ WidgetClass: dxDiagram, ref: baseRef, subscribableOptions: subscribableOptions, independentEvents: independentEvents, defaults: defaults, expectedChildren: expectedChildren, templateProps: templateProps }, props)));
+}));
+var _componentAutoLayout = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var AutoLayout = Object.assign(_componentAutoLayout, {
+    OptionName: "autoLayout",
+});
+var _componentCommand = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Command = Object.assign(_componentCommand, {
+    OptionName: "commands",
+    IsCollectionItem: true,
+});
+var _componentCommandItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var CommandItem = Object.assign(_componentCommandItem, {
+    OptionName: "items",
+    IsCollectionItem: true,
+});
+var _componentConnectionPoint = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ConnectionPoint = Object.assign(_componentConnectionPoint, {
+    OptionName: "connectionPoints",
+    IsCollectionItem: true,
+});
+var _componentContextMenu = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ContextMenu = Object.assign(_componentContextMenu, {
+    OptionName: "contextMenu",
+    ExpectedChildren: {
         command: { optionName: "commands", isCollectionItem: true }
-    };
-    return ContextMenu;
-}(NestedOption));
-var ContextToolbox = /** @class */ (function (_super) {
-    __extends(ContextToolbox, _super);
-    function ContextToolbox() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ContextToolbox.OptionName = "contextToolbox";
-    return ContextToolbox;
-}(NestedOption));
-var CustomShape = /** @class */ (function (_super) {
-    __extends(CustomShape, _super);
-    function CustomShape() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    CustomShape.OptionName = "customShapes";
-    CustomShape.IsCollectionItem = true;
-    CustomShape.ExpectedChildren = {
+    },
+});
+var _componentContextToolbox = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ContextToolbox = Object.assign(_componentContextToolbox, {
+    OptionName: "contextToolbox",
+});
+var _componentCustomShape = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var CustomShape = Object.assign(_componentCustomShape, {
+    OptionName: "customShapes",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         connectionPoint: { optionName: "connectionPoints", isCollectionItem: true }
-    };
-    CustomShape.TemplateProps = [{
+    },
+    TemplateProps: [{
             tmplOption: "template",
             render: "render",
-            component: "component",
-            keyFn: "keyFn"
+            component: "component"
         }, {
             tmplOption: "toolboxTemplate",
             render: "toolboxRender",
-            component: "toolboxComponent",
-            keyFn: "toolboxKeyFn"
-        }];
-    return CustomShape;
-}(NestedOption));
-var DefaultItemProperties = /** @class */ (function (_super) {
-    __extends(DefaultItemProperties, _super);
-    function DefaultItemProperties() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DefaultItemProperties.OptionName = "defaultItemProperties";
-    return DefaultItemProperties;
-}(NestedOption));
-var Edges = /** @class */ (function (_super) {
-    __extends(Edges, _super);
-    function Edges() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Edges.OptionName = "edges";
-    return Edges;
-}(NestedOption));
-var Editing = /** @class */ (function (_super) {
-    __extends(Editing, _super);
-    function Editing() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Editing.OptionName = "editing";
-    return Editing;
-}(NestedOption));
-var Export = /** @class */ (function (_super) {
-    __extends(Export, _super);
-    function Export() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Export.OptionName = "export";
-    return Export;
-}(NestedOption));
-var GridSize = /** @class */ (function (_super) {
-    __extends(GridSize, _super);
-    function GridSize() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    GridSize.OptionName = "gridSize";
-    GridSize.DefaultsProps = {
+            component: "toolboxComponent"
+        }],
+});
+var _componentDefaultItemProperties = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var DefaultItemProperties = Object.assign(_componentDefaultItemProperties, {
+    OptionName: "defaultItemProperties",
+});
+var _componentEdges = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Edges = Object.assign(_componentEdges, {
+    OptionName: "edges",
+});
+var _componentEditing = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Editing = Object.assign(_componentEditing, {
+    OptionName: "editing",
+});
+var _componentExport = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Export = Object.assign(_componentExport, {
+    OptionName: "export",
+});
+var _componentGridSize = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var GridSize = Object.assign(_componentGridSize, {
+    OptionName: "gridSize",
+    DefaultsProps: {
         defaultValue: "value"
-    };
-    return GridSize;
-}(NestedOption));
-var Group = /** @class */ (function (_super) {
-    __extends(Group, _super);
-    function Group() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Group.OptionName = "groups";
-    Group.IsCollectionItem = true;
-    return Group;
-}(NestedOption));
-var HistoryToolbar = /** @class */ (function (_super) {
-    __extends(HistoryToolbar, _super);
-    function HistoryToolbar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    HistoryToolbar.OptionName = "historyToolbar";
-    HistoryToolbar.ExpectedChildren = {
+    },
+});
+var _componentGroup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Group = Object.assign(_componentGroup, {
+    OptionName: "groups",
+    IsCollectionItem: true,
+});
+var _componentHistoryToolbar = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var HistoryToolbar = Object.assign(_componentHistoryToolbar, {
+    OptionName: "historyToolbar",
+    ExpectedChildren: {
         command: { optionName: "commands", isCollectionItem: true }
-    };
-    return HistoryToolbar;
-}(NestedOption));
-var Item = /** @class */ (function (_super) {
-    __extends(Item, _super);
-    function Item() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Item.OptionName = "items";
-    Item.IsCollectionItem = true;
-    return Item;
-}(NestedOption));
-var MainToolbar = /** @class */ (function (_super) {
-    __extends(MainToolbar, _super);
-    function MainToolbar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    MainToolbar.OptionName = "mainToolbar";
-    MainToolbar.ExpectedChildren = {
+    },
+});
+var _componentItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Item = Object.assign(_componentItem, {
+    OptionName: "items",
+    IsCollectionItem: true,
+});
+var _componentMainToolbar = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var MainToolbar = Object.assign(_componentMainToolbar, {
+    OptionName: "mainToolbar",
+    ExpectedChildren: {
         command: { optionName: "commands", isCollectionItem: true }
-    };
-    return MainToolbar;
-}(NestedOption));
-var Nodes = /** @class */ (function (_super) {
-    __extends(Nodes, _super);
-    function Nodes() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Nodes.OptionName = "nodes";
-    Nodes.ExpectedChildren = {
+    },
+});
+var _componentNodes = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Nodes = Object.assign(_componentNodes, {
+    OptionName: "nodes",
+    ExpectedChildren: {
         autoLayout: { optionName: "autoLayout", isCollectionItem: false }
-    };
-    return Nodes;
-}(NestedOption));
-var PageSize = /** @class */ (function (_super) {
-    __extends(PageSize, _super);
-    function PageSize() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PageSize.OptionName = "pageSize";
-    PageSize.DefaultsProps = {
+    },
+});
+var _componentPageSize = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var PageSize = Object.assign(_componentPageSize, {
+    OptionName: "pageSize",
+    DefaultsProps: {
         defaultHeight: "height",
         defaultWidth: "width"
-    };
-    PageSize.ExpectedChildren = {
+    },
+    ExpectedChildren: {
         item: { optionName: "items", isCollectionItem: true },
         pageSizeItem: { optionName: "items", isCollectionItem: true }
-    };
-    return PageSize;
-}(NestedOption));
-var PageSizeItem = /** @class */ (function (_super) {
-    __extends(PageSizeItem, _super);
-    function PageSizeItem() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PageSizeItem.OptionName = "items";
-    PageSizeItem.IsCollectionItem = true;
-    return PageSizeItem;
-}(NestedOption));
-var PropertiesPanel = /** @class */ (function (_super) {
-    __extends(PropertiesPanel, _super);
-    function PropertiesPanel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PropertiesPanel.OptionName = "propertiesPanel";
-    PropertiesPanel.ExpectedChildren = {
+    },
+});
+var _componentPageSizeItem = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var PageSizeItem = Object.assign(_componentPageSizeItem, {
+    OptionName: "items",
+    IsCollectionItem: true,
+});
+var _componentPropertiesPanel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var PropertiesPanel = Object.assign(_componentPropertiesPanel, {
+    OptionName: "propertiesPanel",
+    ExpectedChildren: {
         tab: { optionName: "tabs", isCollectionItem: true }
-    };
-    return PropertiesPanel;
-}(NestedOption));
-var Tab = /** @class */ (function (_super) {
-    __extends(Tab, _super);
-    function Tab() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Tab.OptionName = "tabs";
-    Tab.IsCollectionItem = true;
-    Tab.ExpectedChildren = {
+    },
+});
+var _componentTab = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Tab = Object.assign(_componentTab, {
+    OptionName: "tabs",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         command: { optionName: "commands", isCollectionItem: true },
         group: { optionName: "groups", isCollectionItem: true },
         tabGroup: { optionName: "groups", isCollectionItem: true }
-    };
-    return Tab;
-}(NestedOption));
-var TabGroup = /** @class */ (function (_super) {
-    __extends(TabGroup, _super);
-    function TabGroup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    TabGroup.OptionName = "groups";
-    TabGroup.IsCollectionItem = true;
-    TabGroup.ExpectedChildren = {
+    },
+});
+var _componentTabGroup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var TabGroup = Object.assign(_componentTabGroup, {
+    OptionName: "groups",
+    IsCollectionItem: true,
+    ExpectedChildren: {
         command: { optionName: "commands", isCollectionItem: true }
-    };
-    return TabGroup;
-}(NestedOption));
-var Toolbox = /** @class */ (function (_super) {
-    __extends(Toolbox, _super);
-    function Toolbox() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Toolbox.OptionName = "toolbox";
-    Toolbox.ExpectedChildren = {
+    },
+});
+var _componentToolbox = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var Toolbox = Object.assign(_componentToolbox, {
+    OptionName: "toolbox",
+    ExpectedChildren: {
         group: { optionName: "groups", isCollectionItem: true },
         toolboxGroup: { optionName: "groups", isCollectionItem: true }
-    };
-    return Toolbox;
-}(NestedOption));
-var ToolboxGroup = /** @class */ (function (_super) {
-    __extends(ToolboxGroup, _super);
-    function ToolboxGroup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ToolboxGroup.OptionName = "groups";
-    ToolboxGroup.IsCollectionItem = true;
-    return ToolboxGroup;
-}(NestedOption));
-var ViewToolbar = /** @class */ (function (_super) {
-    __extends(ViewToolbar, _super);
-    function ViewToolbar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ViewToolbar.OptionName = "viewToolbar";
-    ViewToolbar.ExpectedChildren = {
+    },
+});
+var _componentToolboxGroup = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ToolboxGroup = Object.assign(_componentToolboxGroup, {
+    OptionName: "groups",
+    IsCollectionItem: true,
+});
+var _componentViewToolbar = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ViewToolbar = Object.assign(_componentViewToolbar, {
+    OptionName: "viewToolbar",
+    ExpectedChildren: {
         command: { optionName: "commands", isCollectionItem: true }
-    };
-    return ViewToolbar;
-}(NestedOption));
-var ZoomLevel = /** @class */ (function (_super) {
-    __extends(ZoomLevel, _super);
-    function ZoomLevel() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ZoomLevel.OptionName = "zoomLevel";
-    ZoomLevel.DefaultsProps = {
+    },
+});
+var _componentZoomLevel = memo(function (props) {
+    return React.createElement((NestedOption), __assign({}, props));
+});
+var ZoomLevel = Object.assign(_componentZoomLevel, {
+    OptionName: "zoomLevel",
+    DefaultsProps: {
         defaultValue: "value"
-    };
-    return ZoomLevel;
-}(NestedOption));
+    },
+});
 export default Diagram;
 export { Diagram, AutoLayout, Command, CommandItem, ConnectionPoint, ContextMenu, ContextToolbox, CustomShape, DefaultItemProperties, Edges, Editing, Export, GridSize, Group, HistoryToolbar, Item, MainToolbar, Nodes, PageSize, PageSizeItem, PropertiesPanel, Tab, TabGroup, Toolbox, ToolboxGroup, ViewToolbar, ZoomLevel };