DataGrid: fix ts issues in react demos (#31978)

Author: anna-shakhova

apps/demos/Demos/DataGrid/AIColumns/React/App.tsx

@@ -1,20 +1,23 @@
 import React, { useCallback, useState } from 'react';
+
 import DataGrid, {
   Column,
   Paging,
   Grouping,
   AI,
 } from 'devextreme-react/data-grid';
+import type { DataGridTypes } from 'devextreme-react/data-grid';
 import Popup, { Position } from 'devextreme-react/popup';
+
 import { vehicles } from './data.ts';
 import { aiIntegration } from './service.ts';
-import Trademark from './Trademark.tsx';
 import Category from './Category.tsx';
 import LicenseInfo from './LicenseInfo.tsx';
-import { type Vehicle } from './types.ts';
+import Trademark from './Trademark.tsx';
+import type { Vehicle } from './types.ts';
 
-const onAIColumnRequestCreating = (e) => {
-  e.data = e.data.map((item) => ({
+const onAIColumnRequestCreating = (e: DataGridTypes.AIColumnRequestCreatingEvent) => {
+  e.data = e.data.map((item: Vehicle) => ({
     ID: item.ID,
     TrademarkName: item.TrademarkName,
     Name: item.Name,
@@ -34,7 +37,7 @@ export default function App() {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <DataGrid
         dataSource={vehicles}
         showBorders={true}
@@ -117,6 +120,6 @@ export default function App() {
           collision="fit"
         />
       </Popup>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/DataGrid/AIColumns/React/service.ts

@@ -1,9 +1,6 @@
 import { type AIMessage } from './types';
-import {
-  AIIntegration,
-  RequestParams,
-  Response,
-} from 'devextreme-react/common/ai-integration';
+import { AIIntegration } from 'devextreme-react/common/ai-integration';
+import type { RequestParams, Response } from 'devextreme-react/common/ai-integration';
 import { AzureOpenAI } from 'openai';
 import notify from 'devextreme/ui/notify';
 
@@ -31,7 +28,7 @@ async function getAIResponse(messages: AIMessage[], signal: AbortSignal) {
   return result;
 }
 
-async function getAIResponseRecursive(messages: AIMessage[], signal: AbortSignal) {
+async function getAIResponseRecursive(messages: AIMessage[], signal: AbortSignal): Promise<string | null | undefined> {
   return getAIResponse(messages, signal)
     .catch(async (error) => {
       if (!error.message.includes('Connection error')) {

apps/demos/Demos/DataGrid/AIColumns/ReactJs/App.js

@@ -5,9 +5,9 @@ import DataGrid, {
 import Popup, { Position } from 'devextreme-react/popup';
 import { vehicles } from './data.js';
 import { aiIntegration } from './service.js';
-import Trademark from './Trademark.js';
 import Category from './Category.js';
 import LicenseInfo from './LicenseInfo.js';
+import Trademark from './Trademark.js';
 
 const onAIColumnRequestCreating = (e) => {
   e.data = e.data.map((item) => ({
@@ -26,7 +26,7 @@ export default function App() {
     setCurrentVehicle(null);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <DataGrid
         dataSource={vehicles}
         showBorders={true}
@@ -107,6 +107,6 @@ export default function App() {
           collision="fit"
         />
       </Popup>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/AddressTab.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
 import { Form, Item } from 'devextreme-react/form';
+import type { TextBoxTypes } from 'devextreme-react/text-box';
 
 const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone'];
 
-const renderFormItem = (item) => (
+interface FormItemRenderData {
+  editorOptions: TextBoxTypes.Properties;
+}
+
+const renderFormItem = (item: FormItemRenderData) => (
   <span>{item.editorOptions.value}</span>
 );
 

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/MasterDetailView.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
+
+import type { DataGridTypes } from 'devextreme-react/data-grid';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
-import { type DataGridTypes } from 'devextreme-react/data-grid';
 
 import AddressTab from './AddressTab.tsx';
 import OrdersTab from './OrdersTab.tsx';

apps/demos/Demos/DataGrid/Appearance/React/App.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback, useState } from 'react';
+
+import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import DataGrid, { Column } from 'devextreme-react/data-grid';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
 
 import { employees } from './data.ts';
 
@@ -27,7 +29,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <DataGrid
         dataSource={employees}
         keyExpr="ID"
@@ -79,7 +81,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

apps/demos/Demos/DataGrid/Appearance/ReactJs/App.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import DataGrid, { Column } from 'devextreme-react/data-grid';
 import CheckBox from 'devextreme-react/check-box';
+import DataGrid, { Column } from 'devextreme-react/data-grid';
 import { employees } from './data.js';
 
 const App = () => {
@@ -21,7 +21,7 @@ const App = () => {
     setRowAlternationEnabled(e.value);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <DataGrid
         dataSource={employees}
         keyExpr="ID"
@@ -88,7 +88,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default App;

apps/demos/Demos/DataGrid/BatchEditing/React/App.tsx

@@ -1,13 +1,17 @@
 import React, { useCallback, useState } from 'react';
+
+import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import DataGrid, {
   Column,
   Editing,
   Paging,
   Lookup,
-  type DataGridTypes,
 } from 'devextreme-react/data-grid';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
-import SelectBox, { type SelectBoxTypes } from 'devextreme-react/select-box';
+import type { DataGridTypes } from 'devextreme-react/data-grid';
+import SelectBox from 'devextreme-react/select-box';
+import type { SelectBoxTypes } from 'devextreme-react/select-box';
+
 import { employees, states } from './data.ts';
 
 const startEditActions = ['click', 'dblClick'];

apps/demos/Demos/DataGrid/BatchEditing/ReactJs/App.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useState } from 'react';
+import CheckBox from 'devextreme-react/check-box';
 import DataGrid, {
   Column, Editing, Paging, Lookup,
 } from 'devextreme-react/data-grid';
-import CheckBox from 'devextreme-react/check-box';
 import SelectBox from 'devextreme-react/select-box';
 import { employees, states } from './data.js';
 

apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import DataGrid, { DataGridRef, Column, DataGridTypes, Editing, Pager } from 'devextreme-react/data-grid';
+import DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
+import type { DataGridRef, DataGridTypes } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';