devextreme-react 24.1.2-beta → 24.1.3

package/cjs/defer-rendering.js

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 24.1.2-beta
- * Build date: Mon May 13 2024
+ * Version: 24.1.3
+ * Build date: Tue Jun 11 2024
  *
  * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -13,17 +13,6 @@
 
 "use client";
 "use strict";
-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 __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -52,30 +41,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.To = exports.Position = exports.Offset = exports.My = exports.From = exports.Collision = exports.BoundaryOffset = exports.At = exports.Animation = exports.DeferRendering = void 0;
-var React = __importStar(require("react"));
-var react_1 = require("react");
-var defer_rendering_1 = __importDefault(require("devextreme/ui/defer_rendering"));
-var component_1 = require("./core/component");
-var nested_option_1 = __importDefault(require("./core/nested-option"));
-var DeferRendering = (0, react_1.memo)((0, react_1.forwardRef)(function (props, ref) {
-    var baseRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, function () { return ({
-        instance: function () {
-            var _a;
-            return (_a = baseRef.current) === null || _a === void 0 ? void 0 : _a.getInstance();
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const defer_rendering_1 = __importDefault(require("devextreme/ui/defer_rendering"));
+const component_1 = require("./core/component");
+const nested_option_1 = __importDefault(require("./core/nested-option"));
+const DeferRendering = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const baseRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        instance() {
+            return baseRef.current?.getInstance();
         }
-    }); }, [baseRef.current]);
-    var independentEvents = (0, react_1.useMemo)(function () { return (["onContentReady", "onDisposing", "onInitialized", "onRendered", "onShown"]); }, []);
-    var expectedChildren = (0, react_1.useMemo)(function () { return ({
+    }), [baseRef.current]);
+    const independentEvents = (0, react_1.useMemo)(() => (["onContentReady", "onDisposing", "onInitialized", "onRendered", "onShown"]), []);
+    const expectedChildren = (0, react_1.useMemo)(() => ({
         animation: { optionName: "animation", isCollectionItem: false }
-    }); }, []);
-    return (React.createElement((component_1.Component), __assign({ WidgetClass: defer_rendering_1.default, ref: baseRef, independentEvents: independentEvents, expectedChildren: expectedChildren }, props)));
+    }), []);
+    return (React.createElement((component_1.Component), {
+        WidgetClass: defer_rendering_1.default,
+        ref: baseRef,
+        independentEvents,
+        expectedChildren,
+        ...props,
+    }));
 }));
 exports.DeferRendering = DeferRendering;
-var _componentAnimation = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentAnimation = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var Animation = Object.assign(_componentAnimation, {
+const Animation = Object.assign(_componentAnimation, {
     OptionName: "animation",
     ExpectedChildren: {
         from: { optionName: "from", isCollectionItem: false },
@@ -83,55 +77,55 @@ var Animation = Object.assign(_componentAnimation, {
     },
 });
 exports.Animation = Animation;
-var _componentAt = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentAt = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var At = Object.assign(_componentAt, {
+const At = Object.assign(_componentAt, {
     OptionName: "at",
 });
 exports.At = At;
-var _componentBoundaryOffset = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentBoundaryOffset = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var BoundaryOffset = Object.assign(_componentBoundaryOffset, {
+const BoundaryOffset = Object.assign(_componentBoundaryOffset, {
     OptionName: "boundaryOffset",
 });
 exports.BoundaryOffset = BoundaryOffset;
-var _componentCollision = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentCollision = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var Collision = Object.assign(_componentCollision, {
+const Collision = Object.assign(_componentCollision, {
     OptionName: "collision",
 });
 exports.Collision = Collision;
-var _componentFrom = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentFrom = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var From = Object.assign(_componentFrom, {
+const From = Object.assign(_componentFrom, {
     OptionName: "from",
     ExpectedChildren: {
         position: { optionName: "position", isCollectionItem: false }
     },
 });
 exports.From = From;
-var _componentMy = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentMy = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var My = Object.assign(_componentMy, {
+const My = Object.assign(_componentMy, {
     OptionName: "my",
 });
 exports.My = My;
-var _componentOffset = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentOffset = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var Offset = Object.assign(_componentOffset, {
+const Offset = Object.assign(_componentOffset, {
     OptionName: "offset",
 });
 exports.Offset = Offset;
-var _componentPosition = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentPosition = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var Position = Object.assign(_componentPosition, {
+const Position = Object.assign(_componentPosition, {
     OptionName: "position",
     ExpectedChildren: {
         at: { optionName: "at", isCollectionItem: false },
@@ -142,10 +136,10 @@ var Position = Object.assign(_componentPosition, {
     },
 });
 exports.Position = Position;
-var _componentTo = (0, react_1.memo)(function (props) {
-    return React.createElement((nested_option_1.default), __assign({}, props));
+const _componentTo = (0, react_1.memo)((props) => {
+    return React.createElement((nested_option_1.default), { ...props });
 });
-var To = Object.assign(_componentTo, {
+const To = Object.assign(_componentTo, {
     OptionName: "to",
 });
 exports.To = To;

package/cjs/diagram.d.ts

@@ -1,7 +1,7 @@
 /*!
  * devextreme-react
- * Version: 24.1.2-beta
- * Build date: Mon May 13 2024
+ * Version: 24.1.3
+ * Build date: Tue Jun 11 2024
  *
  * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
  *
@@ -15,7 +15,7 @@ import * as React from "react";
 import { Ref, ReactElement } from "react";
 import dxDiagram, { Properties } from "devextreme/ui/diagram";
 import { IHtmlOptions, IElementDescriptor } from "./core/component";
-import type { ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, dxDiagramCustomCommand, dxDiagramShape } from "devextreme/ui/diagram";
+import type { ContentReadyEvent, CustomCommandEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemDblClickEvent, RequestEditOperationEvent, RequestLayoutUpdateEvent, CustomCommand, 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";
@@ -60,7 +60,7 @@ declare const _componentAutoLayout: React.MemoExoticComponent<(props: IAutoLayou
 declare const AutoLayout: typeof _componentAutoLayout & IElementDescriptor;
 type ICommandProps = React.PropsWithChildren<{
     icon?: string;
-    items?: Array<dxDiagramCustomCommand>;
+    items?: Array<CustomCommand | "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">;
     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;
@@ -69,7 +69,7 @@ declare const _componentCommand: React.MemoExoticComponent<(props: ICommandProps
 declare const Command: typeof _componentCommand & IElementDescriptor;
 type ICommandItemProps = React.PropsWithChildren<{
     icon?: string;
-    items?: Array<dxDiagramCustomCommand>;
+    items?: Array<CustomCommand | "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">;
     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;
@@ -83,7 +83,7 @@ type IConnectionPointProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     enabled?: boolean;
 }>;
 declare const _componentContextMenu: React.MemoExoticComponent<(props: IContextMenuProps) => React.FunctionComponentElement<IContextMenuProps>>;
@@ -211,7 +211,7 @@ type IGridSizeProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     title?: string;
     category?: "general" | "flowchart" | "orgChart" | "containers" | "custom";
     displayMode?: "icons" | "texts";
@@ -221,14 +221,14 @@ type IGroupProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     visible?: boolean;
 }>;
 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>;
+    items?: Array<CustomCommand | "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">;
     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;
@@ -238,7 +238,7 @@ type IItemProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     visible?: boolean;
 }>;
 declare const _componentMainToolbar: React.MemoExoticComponent<(props: IMainToolbarProps) => React.FunctionComponentElement<IMainToolbarProps>>;
@@ -294,9 +294,9 @@ declare const _componentPageSizeItem: React.MemoExoticComponent<(props: IPageSiz
 declare const PageSizeItem: typeof _componentPageSizeItem & IElementDescriptor;
 type IPropertiesPanelProps = React.PropsWithChildren<{
     tabs?: Array<Record<string, any>> | {
-        commands?: Array<dxDiagramCustomCommand>;
+        commands?: Array<CustomCommand | "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">;
         groups?: Array<Record<string, any>> | {
-            commands?: Array<dxDiagramCustomCommand>;
+            commands?: Array<CustomCommand | "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">;
             title?: string;
         }[];
         title?: string;
@@ -306,9 +306,9 @@ type IPropertiesPanelProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     groups?: Array<Record<string, any>> | {
-        commands?: Array<dxDiagramCustomCommand>;
+        commands?: Array<CustomCommand | "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">;
         title?: string;
     }[];
     title?: string;
@@ -316,7 +316,7 @@ type ITabProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     title?: string;
 }>;
 declare const _componentTabGroup: React.MemoExoticComponent<(props: ITabGroupProps) => React.FunctionComponentElement<ITabGroupProps>>;
@@ -346,7 +346,7 @@ type IToolboxGroupProps = 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>;
+    commands?: Array<CustomCommand | "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">;
     visible?: boolean;
 }>;
 declare const _componentViewToolbar: React.MemoExoticComponent<(props: IViewToolbarProps) => React.FunctionComponentElement<IViewToolbarProps>>;