From 93aba07a2bc3221b09abe854f641a587cc8efdf1 Mon Sep 17 00:00:00 2001
From: Mikhail Preyskurantov <mikhail.preyskurantov@devexpress.com>
Date: Tue, 21 May 2024 13:29:21 +0300
Subject: [PATCH] Publish dxDiagram types, arrange "commands" props types
 (T1227506) (#27344)

(cherry picked from https://github.com/DevExpress/DevExtreme/pull/27344)
---
 .../React/App.tsx                             | 17 +++++++++++++----
 .../ReactJs/App.js                            | 11 ++++++-----
 .../Diagram/UICustomization/React/App.tsx     | 19 ++++++++++---------
 .../Diagram/UICustomization/ReactJs/App.js    | 11 ++++++-----
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
index 186c268588c..e8052b464e8 100644
--- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
+++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/React/App.tsx
@@ -1,6 +1,15 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
-  CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout, DiagramTypes,
+import {
+  Diagram,
+  AutoLayout,
+  ContextToolbox,
+  CustomShape,
+  Group,
+  Nodes,
+  PropertiesPanel,
+  Tab,
+  Toolbox,
+  DiagramTypes,
 } from 'devextreme-react/diagram';
 import { Popup } from 'devextreme-react/popup';
 import TextBox from 'devextreme-react/text-box';
@@ -10,7 +19,7 @@ import CustomShapeTemplate from './CustomShapeTemplate.tsx';
 import CustomShapeToolboxTemplate from './CustomShapeToolboxTemplate.tsx';
 import service, { Employee } from './data.ts';
 
-const pageCommands = ['pageSize', 'pageOrientation', 'pageColor'];
+const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
 
 const nameLabel = { 'aria-label': 'Name' };
 const emailLabel = { 'aria-label': 'Email' };
@@ -217,7 +226,7 @@ export default function App() {
         </Toolbox>
         <PropertiesPanel>
           <Tab>
-            <Group title="Page Properties" commands={pageCommands as any} />
+            <Group title="Page Properties" commands={pageCommands} />
           </Tab>
         </PropertiesPanel>
       </Diagram>
diff --git a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
index ed4e417bdc3..074ed509d70 100644
--- a/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
+++ b/JSDemos/Demos/Diagram/CustomShapesWithTemplatesWithEditing/ReactJs/App.js
@@ -1,13 +1,14 @@
 import React, { useCallback, useRef, useState } from 'react';
-import Diagram, {
-  CustomShape,
+import {
+  Diagram,
+  AutoLayout,
   ContextToolbox,
-  PropertiesPanel,
+  CustomShape,
   Group,
+  Nodes,
+  PropertiesPanel,
   Tab,
   Toolbox,
-  Nodes,
-  AutoLayout,
 } from 'devextreme-react/diagram';
 import { Popup } from 'devextreme-react/popup';
 import TextBox from 'devextreme-react/text-box';
diff --git a/JSDemos/Demos/Diagram/UICustomization/React/App.tsx b/JSDemos/Demos/Diagram/UICustomization/React/App.tsx
index a658c709e02..9e9d2174479 100644
--- a/JSDemos/Demos/Diagram/UICustomization/React/App.tsx
+++ b/JSDemos/Demos/Diagram/UICustomization/React/App.tsx
@@ -1,22 +1,23 @@
 import React, { useEffect, useRef } from 'react';
-import Diagram, {
+import {
+  Diagram,
+  Command,
   ContextMenu,
   ContextToolbox,
-  PropertiesPanel,
   Group,
-  Tab,
   HistoryToolbar,
-  ViewToolbar,
   MainToolbar,
-  Command,
+  PropertiesPanel,
+  Tab,
   Toolbox,
+  ViewToolbar,
   DiagramTypes,
 } from 'devextreme-react/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';
 
-const pageCommands = ['pageSize', 'pageOrientation', 'pageColor'];
-const menuCommands = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
+const pageCommands: DiagramTypes.Command[] = ['pageSize', 'pageOrientation', 'pageColor'];
+const menuCommands: DiagramTypes.Command[] = ['bringToFront', 'sendToBack', 'lock', 'unlock'];
 
 function onCustomCommand(e: DiagramTypes.CustomCommandEvent) {
   if (e.name === 'clear') {
@@ -54,7 +55,7 @@ export default function App() {
     >
       <ContextMenu
         enabled={true}
-        commands={menuCommands as any}
+        commands={menuCommands}
       />
       <ContextToolbox
         enabled={true}
@@ -64,7 +65,7 @@ export default function App() {
       />
       <PropertiesPanel visibility="visible">
         <Tab>
-          <Group title="Page Properties" commands={pageCommands as any} />
+          <Group title="Page Properties" commands={pageCommands} />
         </Tab>
       </PropertiesPanel>
       <HistoryToolbar visible={false} />
diff --git a/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js b/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js
index 70756115ba2..e3c5e450d0a 100644
--- a/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js
+++ b/JSDemos/Demos/Diagram/UICustomization/ReactJs/App.js
@@ -1,15 +1,16 @@
 import React, { useEffect, useRef } from 'react';
-import Diagram, {
+import {
+  Diagram,
+  Command,
   ContextMenu,
   ContextToolbox,
-  PropertiesPanel,
   Group,
-  Tab,
   HistoryToolbar,
-  ViewToolbar,
   MainToolbar,
-  Command,
+  PropertiesPanel,
+  Tab,
   Toolbox,
+  ViewToolbar,
 } from 'devextreme-react/diagram';
 import { confirm } from 'devextreme/ui/dialog';
 import 'whatwg-fetch';