From 6eaec2fea2e4f350a4a1dee2ac4502a1377e6fc0 Mon Sep 17 00:00:00 2001
From: DuckTieCorpMember <assylbek.danyshbek@devexpress.com>
Date: Thu, 10 Sep 2026 15:35:37 +0400
Subject: [PATCH 1/2] remove inlines form react gantt demos

---
 .../Demos/Gantt/Appearance/React/App.tsx      |  26 ++-
 .../Demos/Gantt/Appearance/ReactJs/App.js     |  47 ++--
 .../Demos/Gantt/ContextMenu/React/App.tsx     | 212 +++++++++---------
 .../Demos/Gantt/ContextMenu/ReactJs/App.js    |  22 +-
 apps/demos/Demos/Gantt/Sorting/React/App.tsx  | 176 +++++++--------
 apps/demos/Demos/Gantt/Sorting/ReactJs/App.js |  22 +-
 .../Gantt/TaskTemplate/React/TaskTemplate.tsx |   8 +-
 .../TaskTemplate/ReactJs/TaskTemplate.js      |   8 +-
 .../Demos/Gantt/Validation/React/App.tsx      | 180 +++++++--------
 .../Demos/Gantt/Validation/ReactJs/App.js     |  32 +--
 10 files changed, 380 insertions(+), 353 deletions(-)

diff --git a/apps/demos/Demos/Gantt/Appearance/React/App.tsx b/apps/demos/Demos/Gantt/Appearance/React/App.tsx
index 487f37685be0..172b1e0228eb 100644
--- a/apps/demos/Demos/Gantt/Appearance/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Appearance/React/App.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing,
 } from 'devextreme-react/gantt';
@@ -35,17 +35,19 @@ const initialGanttConfig = {
 
 function App() {
   const [ganttConfig, setGanttConfig] = useState(initialGanttConfig);
-  const updateGanttConfig = (value: Partial<typeof initialGanttConfig>) => setGanttConfig({
-    ...ganttConfig,
-    ...value,
-  });
-  const onScaleTypeChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ scaleType: value });
-  const onTaskTitlePositionChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ taskTitlePosition: value });
-  const onShowResourcesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showResources: value });
-  const onShowDependenciesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showDependencies: value });
-  const onShowCustomTaskTooltip: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showCustomTaskTooltip: value });
-  const onStartDateValueChanged: IDateBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ startDateRange: value });
-  const onEndDateValueChanged: IDateBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ endDateRange: value });
+  const updateGanttConfig = useCallback((value: Partial<typeof initialGanttConfig>) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      ...value,
+    }));
+  }, []);
+  const onScaleTypeChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ scaleType: value }), [updateGanttConfig]);
+  const onTaskTitlePositionChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ taskTitlePosition: value }), [updateGanttConfig]);
+  const onShowResourcesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ showResources: value }), [updateGanttConfig]);
+  const onShowDependenciesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ showDependencies: value }), [updateGanttConfig]);
+  const onShowCustomTaskTooltip: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ showCustomTaskTooltip: value }), [updateGanttConfig]);
+  const onStartDateValueChanged: IDateBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ startDateRange: value }), [updateGanttConfig]);
+  const onEndDateValueChanged: IDateBoxOptions['onValueChanged'] = useCallback(({ value }) => updateGanttConfig({ endDateRange: value }), [updateGanttConfig]);
 
   return (
     <div id="form-demo">
diff --git a/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js b/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js
index e0c04dee0bb7..82ddde9a5193 100644
--- a/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Appearance/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks,
   Dependencies,
@@ -39,19 +39,40 @@ const initialGanttConfig = {
 };
 function App() {
   const [ganttConfig, setGanttConfig] = useState(initialGanttConfig);
-  const updateGanttConfig = (value) =>
-    setGanttConfig({
-      ...ganttConfig,
+  const updateGanttConfig = useCallback((value) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       ...value,
-    });
-  const onScaleTypeChanged = ({ value }) => updateGanttConfig({ scaleType: value });
-  const onTaskTitlePositionChanged = ({ value }) => updateGanttConfig({ taskTitlePosition: value });
-  const onShowResourcesChanged = ({ value }) => updateGanttConfig({ showResources: value });
-  const onShowDependenciesChanged = ({ value }) => updateGanttConfig({ showDependencies: value });
-  const onShowCustomTaskTooltip = ({ value }) =>
-    updateGanttConfig({ showCustomTaskTooltip: value });
-  const onStartDateValueChanged = ({ value }) => updateGanttConfig({ startDateRange: value });
-  const onEndDateValueChanged = ({ value }) => updateGanttConfig({ endDateRange: value });
+    }));
+  }, []);
+  const onScaleTypeChanged = useCallback(
+    ({ value }) => updateGanttConfig({ scaleType: value }),
+    [updateGanttConfig],
+  );
+  const onTaskTitlePositionChanged = useCallback(
+    ({ value }) => updateGanttConfig({ taskTitlePosition: value }),
+    [updateGanttConfig],
+  );
+  const onShowResourcesChanged = useCallback(
+    ({ value }) => updateGanttConfig({ showResources: value }),
+    [updateGanttConfig],
+  );
+  const onShowDependenciesChanged = useCallback(
+    ({ value }) => updateGanttConfig({ showDependencies: value }),
+    [updateGanttConfig],
+  );
+  const onShowCustomTaskTooltip = useCallback(
+    ({ value }) => updateGanttConfig({ showCustomTaskTooltip: value }),
+    [updateGanttConfig],
+  );
+  const onStartDateValueChanged = useCallback(
+    ({ value }) => updateGanttConfig({ startDateRange: value }),
+    [updateGanttConfig],
+  );
+  const onEndDateValueChanged = useCallback(
+    ({ value }) => updateGanttConfig({ endDateRange: value }),
+    [updateGanttConfig],
+  );
   return (
     <div id="form-demo">
       <div className="options">
diff --git a/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx b/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
index 67c998fea644..b1e887ad2329 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
+++ b/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
@@ -1,106 +1,106 @@
-import React, { useState } from 'react';
-import Gantt, {
-  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, ContextMenu,
-} from 'devextreme-react/gantt';
-import type { IContextMenuProps } from 'devextreme-react/gantt';
-import CheckBox from 'devextreme-react/check-box';
-import type { ICheckBoxOptions } from 'devextreme-react/check-box';
-import type { ContextMenuPreparingEvent } from 'devextreme/ui/gantt';
-import {
-  tasks, dependencies, resources, resourceAssignments,
-} from './data.ts';
-
-function App() {
-  const [ganttConfig, setGanttConfig] = useState({
-    showResources: true,
-    disableContextMenu: false,
-    contextMenuItems: getContextMenuItems(),
-  });
-  const onCustomizeContextMenu: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      contextMenuItems: value ? getContextMenuItems() : undefined,
-    });
-  };
-
-  const onPreventContextMenuShowing: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      disableContextMenu: value,
-    });
-  };
-
-  return (
-    <div id="form-demo">
-      <div className="options">
-        <div className="caption">Options</div>
-        <div className="option">
-          <CheckBox
-            text="Prevent Context Menu Showing"
-            value={ganttConfig.disableContextMenu}
-            onValueChanged={onPreventContextMenuShowing}
-          />
-        </div>
-          &nbsp;
-        <div className="option">
-          <CheckBox
-            text="Customize Context Menu"
-            defaultValue={true}
-            onValueChanged={onCustomizeContextMenu}
-          />
-        </div>
-      </div>
-      <div className="widget-container">
-        <Gantt
-          taskListWidth={500}
-          height={700}
-          showResources={ganttConfig.showResources}
-          scaleType="weeks"
-          onCustomCommand={onCustomCommandClick}
-          onContextMenuPreparing={onContextMenuPreparing}
-        >
-          <ContextMenu
-            items={ganttConfig.contextMenuItems} />
-
-          <Tasks dataSource={tasks} />
-          <Dependencies dataSource={dependencies} />
-          <Resources dataSource={resources} />
-          <ResourceAssignments dataSource={resourceAssignments} />
-
-          <Column dataField="title" caption="Subject" width={300} />
-          <Column dataField="start" caption="Start Date" />
-          <Column dataField="end" caption="End Date" />
-
-          <Editing enabled />
-        </Gantt>
-      </div>
-    </div>
-  );
-
-  function onContextMenuPreparing(e: ContextMenuPreparingEvent) {
-    e.cancel = ganttConfig.disableContextMenu;
-  }
-
-  function onCustomCommandClick(e: { name: string; }) {
-    if (e.name === 'ToggleDisplayOfResources') {
-      setGanttConfig({
-        ...ganttConfig,
-        showResources: !ganttConfig.showResources,
-      });
-    }
-  }
-
-  function getContextMenuItems(): IContextMenuProps['items'] {
-    return [
-      'addTask',
-      'taskDetails',
-      'deleteTask',
-      {
-        name: 'ToggleDisplayOfResources',
-        text: 'Toggle Display of Resources',
-      },
-    ];
-  }
-}
-
-export default App;
+import React, { useCallback, useState } from 'react';
+import Gantt, {
+  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, ContextMenu,
+} from 'devextreme-react/gantt';
+import type { IContextMenuProps } from 'devextreme-react/gantt';
+import CheckBox from 'devextreme-react/check-box';
+import type { ICheckBoxOptions } from 'devextreme-react/check-box';
+import type { ContextMenuPreparingEvent } from 'devextreme/ui/gantt';
+import {
+  tasks, dependencies, resources, resourceAssignments,
+} from './data.ts';
+
+function App() {
+  const [ganttConfig, setGanttConfig] = useState({
+    showResources: true,
+    disableContextMenu: false,
+    contextMenuItems: getContextMenuItems(),
+  });
+  const onCustomizeContextMenu: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      contextMenuItems: value ? getContextMenuItems() : undefined,
+    }));
+  }, []);
+
+  const onPreventContextMenuShowing: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      disableContextMenu: value,
+    }));
+  }, []);
+
+  return (
+    <div id="form-demo">
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            text="Prevent Context Menu Showing"
+            value={ganttConfig.disableContextMenu}
+            onValueChanged={onPreventContextMenuShowing}
+          />
+        </div>
+          &nbsp;
+        <div className="option">
+          <CheckBox
+            text="Customize Context Menu"
+            defaultValue={true}
+            onValueChanged={onCustomizeContextMenu}
+          />
+        </div>
+      </div>
+      <div className="widget-container">
+        <Gantt
+          taskListWidth={500}
+          height={700}
+          showResources={ganttConfig.showResources}
+          scaleType="weeks"
+          onCustomCommand={onCustomCommandClick}
+          onContextMenuPreparing={onContextMenuPreparing}
+        >
+          <ContextMenu
+            items={ganttConfig.contextMenuItems} />
+
+          <Tasks dataSource={tasks} />
+          <Dependencies dataSource={dependencies} />
+          <Resources dataSource={resources} />
+          <ResourceAssignments dataSource={resourceAssignments} />
+
+          <Column dataField="title" caption="Subject" width={300} />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+        </Gantt>
+      </div>
+    </div>
+  );
+
+  function onContextMenuPreparing(e: ContextMenuPreparingEvent) {
+    e.cancel = ganttConfig.disableContextMenu;
+  }
+
+  function onCustomCommandClick(e: { name: string; }) {
+    if (e.name === 'ToggleDisplayOfResources') {
+      setGanttConfig({
+        ...ganttConfig,
+        showResources: !ganttConfig.showResources,
+      });
+    }
+  }
+
+  function getContextMenuItems(): IContextMenuProps['items'] {
+    return [
+      'addTask',
+      'taskDetails',
+      'deleteTask',
+      {
+        name: 'ToggleDisplayOfResources',
+        text: 'Toggle Display of Resources',
+      },
+    ];
+  }
+}
+
+export default App;
diff --git a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js
index e23d7ccac2e0..45fb15b78c40 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/ContextMenu/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks,
   Dependencies,
@@ -19,18 +19,18 @@ function App() {
     disableContextMenu: false,
     contextMenuItems: getContextMenuItems(),
   });
-  const onCustomizeContextMenu = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onCustomizeContextMenu = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       contextMenuItems: value ? getContextMenuItems() : undefined,
-    });
-  };
-  const onPreventContextMenuShowing = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onPreventContextMenuShowing = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       disableContextMenu: value,
-    });
-  };
+    }));
+  }, []);
   return (
     <div id="form-demo">
       <div className="options">
diff --git a/apps/demos/Demos/Gantt/Sorting/React/App.tsx b/apps/demos/Demos/Gantt/Sorting/React/App.tsx
index afd0ce6cb7cf..c4553a9d61cb 100644
--- a/apps/demos/Demos/Gantt/Sorting/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Sorting/React/App.tsx
@@ -1,88 +1,88 @@
-import React, { useState } from 'react';
-import Gantt, {
-  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, Sorting,
-} from 'devextreme-react/gantt';
-import type { ISortingProps } from 'devextreme-react/gantt';
-import CheckBox from 'devextreme-react/check-box';
-import type { ICheckBoxOptions } from 'devextreme-react/check-box';
-import { SelectBox } from 'devextreme-react/select-box';
-import type { ISelectBoxOptions } from 'devextreme-react/select-box';
-import {
-  tasks, dependencies, resources, resourceAssignments, sortingModeLabel,
-} from './data.ts';
-
-const sortingModeValues: ISortingProps['mode'][] = ['single', 'multiple', 'none'];
-const sortingMode: ISortingProps['mode'] = 'single';
-function App() {
-  const [ganttConfig, setGanttConfig] = useState({
-    sortingMode,
-    showSortIndexes: false,
-    showSortIndexesDisabled: true,
-  });
-  const onSortingModeChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      sortingMode: value,
-      showSortIndexesDisabled: value !== 'multiple',
-    });
-  };
-
-  const onShowSortIndexesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      showSortIndexes: value,
-    });
-  };
-
-  return (
-    <div id="form-demo">
-      <div className="options">
-        <div className="caption">Options</div>
-        <div className="option">
-          <div className="label">Sorting Mode:</div>
-          {' '}
-          <div className="value">
-            <SelectBox
-              items={sortingModeValues}
-              inputAttr={sortingModeLabel}
-              value={ganttConfig.sortingMode}
-              onValueChanged={onSortingModeChanged}
-            />
-          </div>
-        </div>
-        {' '}
-        <div className="option">
-          <CheckBox
-            text="Show Sort Indexes"
-            value={ganttConfig.showSortIndexes}
-            onValueChanged={onShowSortIndexesChanged}
-            disabled={ganttConfig.showSortIndexesDisabled}
-          />
-        </div>
-      </div>
-      <div className="widget-container">
-        <Gantt
-          taskListWidth={500}
-          scaleType="weeks"
-          height={700}
-          rootValue={-1}>
-
-          <Tasks dataSource={tasks} />
-          <Dependencies dataSource={dependencies} />
-          <Resources dataSource={resources} />
-          <ResourceAssignments dataSource={resourceAssignments} />
-
-          <Column dataField="title" caption="Subject" width={300} sortOrder="asc" />
-          <Column dataField="start" caption="Start Date" />
-          <Column dataField="end" caption="End Date" />
-
-          <Editing enabled />
-          <Sorting mode={ganttConfig.sortingMode}
-            showSortIndexes={ganttConfig.showSortIndexes}></Sorting>
-        </Gantt>
-      </div>
-    </div>
-  );
-}
-
-export default App;
+import React, { useCallback, useState } from 'react';
+import Gantt, {
+  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, Sorting,
+} from 'devextreme-react/gantt';
+import type { ISortingProps } from 'devextreme-react/gantt';
+import CheckBox from 'devextreme-react/check-box';
+import type { ICheckBoxOptions } from 'devextreme-react/check-box';
+import { SelectBox } from 'devextreme-react/select-box';
+import type { ISelectBoxOptions } from 'devextreme-react/select-box';
+import {
+  tasks, dependencies, resources, resourceAssignments, sortingModeLabel,
+} from './data.ts';
+
+const sortingModeValues: ISortingProps['mode'][] = ['single', 'multiple', 'none'];
+const sortingMode: ISortingProps['mode'] = 'single';
+function App() {
+  const [ganttConfig, setGanttConfig] = useState({
+    sortingMode,
+    showSortIndexes: false,
+    showSortIndexesDisabled: true,
+  });
+  const onSortingModeChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      sortingMode: value,
+      showSortIndexesDisabled: value !== 'multiple',
+    }));
+  }, []);
+
+  const onShowSortIndexesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      showSortIndexes: value,
+    }));
+  }, []);
+
+  return (
+    <div id="form-demo">
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <div className="label">Sorting Mode:</div>
+          {' '}
+          <div className="value">
+            <SelectBox
+              items={sortingModeValues}
+              inputAttr={sortingModeLabel}
+              value={ganttConfig.sortingMode}
+              onValueChanged={onSortingModeChanged}
+            />
+          </div>
+        </div>
+        {' '}
+        <div className="option">
+          <CheckBox
+            text="Show Sort Indexes"
+            value={ganttConfig.showSortIndexes}
+            onValueChanged={onShowSortIndexesChanged}
+            disabled={ganttConfig.showSortIndexesDisabled}
+          />
+        </div>
+      </div>
+      <div className="widget-container">
+        <Gantt
+          taskListWidth={500}
+          scaleType="weeks"
+          height={700}
+          rootValue={-1}>
+
+          <Tasks dataSource={tasks} />
+          <Dependencies dataSource={dependencies} />
+          <Resources dataSource={resources} />
+          <ResourceAssignments dataSource={resourceAssignments} />
+
+          <Column dataField="title" caption="Subject" width={300} sortOrder="asc" />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+          <Sorting mode={ganttConfig.sortingMode}
+            showSortIndexes={ganttConfig.showSortIndexes}></Sorting>
+        </Gantt>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js b/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js
index 8974a61822d0..2d36301a548a 100644
--- a/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Sorting/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks,
   Dependencies,
@@ -22,19 +22,19 @@ function App() {
     showSortIndexes: false,
     showSortIndexesDisabled: true,
   });
-  const onSortingModeChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onSortingModeChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       sortingMode: value,
       showSortIndexesDisabled: value !== 'multiple',
-    });
-  };
-  const onShowSortIndexesChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onShowSortIndexesChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       showSortIndexes: value,
-    });
-  };
+    }));
+  }, []);
   return (
     <div id="form-demo">
       <div className="options">
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx b/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx
index 83631e2f103c..2d780fba7de7 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx
+++ b/apps/demos/Demos/Gantt/TaskTemplate/React/TaskTemplate.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 interface TaskTemplateProps {
   taskData: {
@@ -26,8 +26,10 @@ function getTaskColor(taskId: number) {
 }
 
 export default function TaskTemplate({ taskData, taskSize, taskResources }: TaskTemplateProps) {
+  const taskWrapperStyle = useMemo(() => ({ width: `${taskSize.width}px` }), [taskSize.width]);
+  const progressStyle = useMemo(() => ({ width: `${taskData.progress}%` }), [taskData.progress]);
   return (
-    <div className={`custom-task ${getTaskColor(taskData.id)}`} style={ { width: `${taskSize.width}px` } }>
+    <div className={`custom-task ${getTaskColor(taskData.id)}`} style={taskWrapperStyle}>
       <div className="custom-task-img-wrapper">
         <img className="custom-task-img" src={getImagePath(taskData.id)} />
       </div>
@@ -35,7 +37,7 @@ export default function TaskTemplate({ taskData, taskSize, taskResources }: Task
         <div className='custom-task-title'>{taskData.title}</div>
         <div className='custom-task-row'>{taskResources[0].text}</div>
       </div>
-      <div className='custom-task-progress' style={ { width: `${taskData.progress}%` } }></div>
+      <div className='custom-task-progress' style={progressStyle}></div>
     </div>
   );
 }
diff --git a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js
index ef3f65f3808c..1cb941b96d7f 100644
--- a/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js
+++ b/apps/demos/Demos/Gantt/TaskTemplate/ReactJs/TaskTemplate.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 function getImagePath(taskId) {
   const imgPath = '../../../../images/employees';
@@ -11,10 +11,12 @@ function getTaskColor(taskId) {
   return `custom-task-color-${color}`;
 }
 export default function TaskTemplate({ taskData, taskSize, taskResources }) {
+  const taskWrapperStyle = useMemo(() => ({ width: `${taskSize.width}px` }), [taskSize.width]);
+  const progressStyle = useMemo(() => ({ width: `${taskData.progress}%` }), [taskData.progress]);
   return (
     <div
       className={`custom-task ${getTaskColor(taskData.id)}`}
-      style={{ width: `${taskSize.width}px` }}
+      style={taskWrapperStyle}
     >
       <div className="custom-task-img-wrapper">
         <img
@@ -28,7 +30,7 @@ export default function TaskTemplate({ taskData, taskSize, taskResources }) {
       </div>
       <div
         className="custom-task-progress"
-        style={{ width: `${taskData.progress}%` }}
+        style={progressStyle}
       ></div>
     </div>
   );
diff --git a/apps/demos/Demos/Gantt/Validation/React/App.tsx b/apps/demos/Demos/Gantt/Validation/React/App.tsx
index 46e042dcd933..00fef826a38c 100644
--- a/apps/demos/Demos/Gantt/Validation/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Validation/React/App.tsx
@@ -1,90 +1,90 @@
-import React, { useState } from 'react';
-import Gantt, {
-  Tasks, Dependencies, Column, Validation, Editing,
-} from 'devextreme-react/gantt';
-import CheckBox from 'devextreme-react/check-box';
-import type { ICheckBoxOptions } from 'devextreme-react/check-box';
-import { tasks, dependencies } from './data.ts';
-
-function App() {
-  const [ganttConfig, setGanttConfig] = useState({
-    autoUpdateParentTasks: true,
-    validateDependencies: true,
-    enablePredecessorGap: true,
-  });
-
-  const onEnablePredecessorGapChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      enablePredecessorGap: value,
-    });
-  };
-
-  const onAutoUpdateParentTasksChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      autoUpdateParentTasks: value,
-    });
-  };
-
-  const onValidateDependenciesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
-      validateDependencies: value,
-    });
-  };
-
-  return (
-    <div id="form-demo">
-      <div className="options">
-        <div className="caption">Options</div>
-        <div className="option">
-          <CheckBox
-            text="Auto Update Parent Tasks"
-            value={ganttConfig.autoUpdateParentTasks}
-            onValueChanged={onAutoUpdateParentTasksChanged}
-          />
-        </div>
-        {' '}
-        <div className="option">
-          <CheckBox
-            text="Enable Dependency Validation"
-            value={ganttConfig.validateDependencies}
-            onValueChanged={onValidateDependenciesChanged}
-          />
-        </div>
-        {' '}
-        <div className="option">
-          <CheckBox
-            text="Enable Predecessor Gap"
-            value={ganttConfig.enablePredecessorGap}
-            onValueChanged={onEnablePredecessorGapChanged}
-          />
-        </div>
-      </div>
-      <div className="widget-container">
-        <Gantt
-          taskListWidth={500}
-          height={700}
-          taskTitlePosition="none">
-
-          <Validation
-            autoUpdateParentTasks={ganttConfig.autoUpdateParentTasks}
-            validateDependencies={ganttConfig.validateDependencies}
-            enablePredecessorGap={ganttConfig.enablePredecessorGap} />
-
-          <Tasks dataSource={tasks} />
-          <Dependencies dataSource={dependencies} />
-
-          <Column dataField="title" caption="Task" width={300} />
-          <Column dataField="start" caption="Start Date" />
-          <Column dataField="end" caption="End Date" />
-
-          <Editing enabled />
-        </Gantt>
-      </div>
-    </div>
-  );
-}
-
-export default App;
+import React, { useCallback, useState } from 'react';
+import Gantt, {
+  Tasks, Dependencies, Column, Validation, Editing,
+} from 'devextreme-react/gantt';
+import CheckBox from 'devextreme-react/check-box';
+import type { ICheckBoxOptions } from 'devextreme-react/check-box';
+import { tasks, dependencies } from './data.ts';
+
+function App() {
+  const [ganttConfig, setGanttConfig] = useState({
+    autoUpdateParentTasks: true,
+    validateDependencies: true,
+    enablePredecessorGap: true,
+  });
+
+  const onEnablePredecessorGapChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      enablePredecessorGap: value,
+    }));
+  }, []);
+
+  const onAutoUpdateParentTasksChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      autoUpdateParentTasks: value,
+    }));
+  }, []);
+
+  const onValidateDependenciesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      validateDependencies: value,
+    }));
+  }, []);
+
+  return (
+    <div id="form-demo">
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            text="Auto Update Parent Tasks"
+            value={ganttConfig.autoUpdateParentTasks}
+            onValueChanged={onAutoUpdateParentTasksChanged}
+          />
+        </div>
+        {' '}
+        <div className="option">
+          <CheckBox
+            text="Enable Dependency Validation"
+            value={ganttConfig.validateDependencies}
+            onValueChanged={onValidateDependenciesChanged}
+          />
+        </div>
+        {' '}
+        <div className="option">
+          <CheckBox
+            text="Enable Predecessor Gap"
+            value={ganttConfig.enablePredecessorGap}
+            onValueChanged={onEnablePredecessorGapChanged}
+          />
+        </div>
+      </div>
+      <div className="widget-container">
+        <Gantt
+          taskListWidth={500}
+          height={700}
+          taskTitlePosition="none">
+
+          <Validation
+            autoUpdateParentTasks={ganttConfig.autoUpdateParentTasks}
+            validateDependencies={ganttConfig.validateDependencies}
+            enablePredecessorGap={ganttConfig.enablePredecessorGap} />
+
+          <Tasks dataSource={tasks} />
+          <Dependencies dataSource={dependencies} />
+
+          <Column dataField="title" caption="Task" width={300} />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+        </Gantt>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/demos/Demos/Gantt/Validation/ReactJs/App.js b/apps/demos/Demos/Gantt/Validation/ReactJs/App.js
index 94aadd50ba26..4ec60773c732 100644
--- a/apps/demos/Demos/Gantt/Validation/ReactJs/App.js
+++ b/apps/demos/Demos/Gantt/Validation/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import Gantt, {
   Tasks, Dependencies, Column, Validation, Editing,
 } from 'devextreme-react/gantt';
@@ -11,24 +11,24 @@ function App() {
     validateDependencies: true,
     enablePredecessorGap: true,
   });
-  const onEnablePredecessorGapChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+  const onEnablePredecessorGapChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       enablePredecessorGap: value,
-    });
-  };
-  const onAutoUpdateParentTasksChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onAutoUpdateParentTasksChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       autoUpdateParentTasks: value,
-    });
-  };
-  const onValidateDependenciesChanged = ({ value }) => {
-    setGanttConfig({
-      ...ganttConfig,
+    }));
+  }, []);
+  const onValidateDependenciesChanged = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
       validateDependencies: value,
-    });
-  };
+    }));
+  }, []);
   return (
     <div id="form-demo">
       <div className="options">

From 4228aaa784d23bb3bc4a2d630f70d7c17c27dd7d Mon Sep 17 00:00:00 2001
From: DuckTieCorpMember <assylbek.danyshbek@devexpress.com>
Date: Thu, 10 Sep 2026 18:25:11 +0400
Subject: [PATCH 2/2] restore line endings

---
 .../Demos/Gantt/ContextMenu/React/App.tsx     | 212 +++++++++---------
 apps/demos/Demos/Gantt/Sorting/React/App.tsx  | 176 +++++++--------
 .../Demos/Gantt/Validation/React/App.tsx      | 180 +++++++--------
 3 files changed, 284 insertions(+), 284 deletions(-)

diff --git a/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx b/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
index b1e887ad2329..67ad0d468a89 100644
--- a/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
+++ b/apps/demos/Demos/Gantt/ContextMenu/React/App.tsx
@@ -1,106 +1,106 @@
-import React, { useCallback, useState } from 'react';
-import Gantt, {
-  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, ContextMenu,
-} from 'devextreme-react/gantt';
-import type { IContextMenuProps } from 'devextreme-react/gantt';
-import CheckBox from 'devextreme-react/check-box';
-import type { ICheckBoxOptions } from 'devextreme-react/check-box';
-import type { ContextMenuPreparingEvent } from 'devextreme/ui/gantt';
-import {
-  tasks, dependencies, resources, resourceAssignments,
-} from './data.ts';
-
-function App() {
-  const [ganttConfig, setGanttConfig] = useState({
-    showResources: true,
-    disableContextMenu: false,
-    contextMenuItems: getContextMenuItems(),
-  });
-  const onCustomizeContextMenu: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      contextMenuItems: value ? getContextMenuItems() : undefined,
-    }));
-  }, []);
-
-  const onPreventContextMenuShowing: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      disableContextMenu: value,
-    }));
-  }, []);
-
-  return (
-    <div id="form-demo">
-      <div className="options">
-        <div className="caption">Options</div>
-        <div className="option">
-          <CheckBox
-            text="Prevent Context Menu Showing"
-            value={ganttConfig.disableContextMenu}
-            onValueChanged={onPreventContextMenuShowing}
-          />
-        </div>
-          &nbsp;
-        <div className="option">
-          <CheckBox
-            text="Customize Context Menu"
-            defaultValue={true}
-            onValueChanged={onCustomizeContextMenu}
-          />
-        </div>
-      </div>
-      <div className="widget-container">
-        <Gantt
-          taskListWidth={500}
-          height={700}
-          showResources={ganttConfig.showResources}
-          scaleType="weeks"
-          onCustomCommand={onCustomCommandClick}
-          onContextMenuPreparing={onContextMenuPreparing}
-        >
-          <ContextMenu
-            items={ganttConfig.contextMenuItems} />
-
-          <Tasks dataSource={tasks} />
-          <Dependencies dataSource={dependencies} />
-          <Resources dataSource={resources} />
-          <ResourceAssignments dataSource={resourceAssignments} />
-
-          <Column dataField="title" caption="Subject" width={300} />
-          <Column dataField="start" caption="Start Date" />
-          <Column dataField="end" caption="End Date" />
-
-          <Editing enabled />
-        </Gantt>
-      </div>
-    </div>
-  );
-
-  function onContextMenuPreparing(e: ContextMenuPreparingEvent) {
-    e.cancel = ganttConfig.disableContextMenu;
-  }
-
-  function onCustomCommandClick(e: { name: string; }) {
-    if (e.name === 'ToggleDisplayOfResources') {
-      setGanttConfig({
-        ...ganttConfig,
-        showResources: !ganttConfig.showResources,
-      });
-    }
-  }
-
-  function getContextMenuItems(): IContextMenuProps['items'] {
-    return [
-      'addTask',
-      'taskDetails',
-      'deleteTask',
-      {
-        name: 'ToggleDisplayOfResources',
-        text: 'Toggle Display of Resources',
-      },
-    ];
-  }
-}
-
-export default App;
+import React, { useCallback, useState } from 'react';
+import Gantt, {
+  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, ContextMenu,
+} from 'devextreme-react/gantt';
+import type { IContextMenuProps } from 'devextreme-react/gantt';
+import CheckBox from 'devextreme-react/check-box';
+import type { ICheckBoxOptions } from 'devextreme-react/check-box';
+import type { ContextMenuPreparingEvent } from 'devextreme/ui/gantt';
+import {
+  tasks, dependencies, resources, resourceAssignments,
+} from './data.ts';
+
+function App() {
+  const [ganttConfig, setGanttConfig] = useState({
+    showResources: true,
+    disableContextMenu: false,
+    contextMenuItems: getContextMenuItems(),
+  });
+  const onCustomizeContextMenu: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      contextMenuItems: value ? getContextMenuItems() : undefined,
+    }));
+  }, []);
+
+  const onPreventContextMenuShowing: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      disableContextMenu: value,
+    }));
+  }, []);
+
+  return (
+    <div id="form-demo">
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            text="Prevent Context Menu Showing"
+            value={ganttConfig.disableContextMenu}
+            onValueChanged={onPreventContextMenuShowing}
+          />
+        </div>
+          &nbsp;
+        <div className="option">
+          <CheckBox
+            text="Customize Context Menu"
+            defaultValue={true}
+            onValueChanged={onCustomizeContextMenu}
+          />
+        </div>
+      </div>
+      <div className="widget-container">
+        <Gantt
+          taskListWidth={500}
+          height={700}
+          showResources={ganttConfig.showResources}
+          scaleType="weeks"
+          onCustomCommand={onCustomCommandClick}
+          onContextMenuPreparing={onContextMenuPreparing}
+        >
+          <ContextMenu
+            items={ganttConfig.contextMenuItems} />
+
+          <Tasks dataSource={tasks} />
+          <Dependencies dataSource={dependencies} />
+          <Resources dataSource={resources} />
+          <ResourceAssignments dataSource={resourceAssignments} />
+
+          <Column dataField="title" caption="Subject" width={300} />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+        </Gantt>
+      </div>
+    </div>
+  );
+
+  function onContextMenuPreparing(e: ContextMenuPreparingEvent) {
+    e.cancel = ganttConfig.disableContextMenu;
+  }
+
+  function onCustomCommandClick(e: { name: string; }) {
+    if (e.name === 'ToggleDisplayOfResources') {
+      setGanttConfig({
+        ...ganttConfig,
+        showResources: !ganttConfig.showResources,
+      });
+    }
+  }
+
+  function getContextMenuItems(): IContextMenuProps['items'] {
+    return [
+      'addTask',
+      'taskDetails',
+      'deleteTask',
+      {
+        name: 'ToggleDisplayOfResources',
+        text: 'Toggle Display of Resources',
+      },
+    ];
+  }
+}
+
+export default App;
diff --git a/apps/demos/Demos/Gantt/Sorting/React/App.tsx b/apps/demos/Demos/Gantt/Sorting/React/App.tsx
index c4553a9d61cb..5b0728d9d00a 100644
--- a/apps/demos/Demos/Gantt/Sorting/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Sorting/React/App.tsx
@@ -1,88 +1,88 @@
-import React, { useCallback, useState } from 'react';
-import Gantt, {
-  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, Sorting,
-} from 'devextreme-react/gantt';
-import type { ISortingProps } from 'devextreme-react/gantt';
-import CheckBox from 'devextreme-react/check-box';
-import type { ICheckBoxOptions } from 'devextreme-react/check-box';
-import { SelectBox } from 'devextreme-react/select-box';
-import type { ISelectBoxOptions } from 'devextreme-react/select-box';
-import {
-  tasks, dependencies, resources, resourceAssignments, sortingModeLabel,
-} from './data.ts';
-
-const sortingModeValues: ISortingProps['mode'][] = ['single', 'multiple', 'none'];
-const sortingMode: ISortingProps['mode'] = 'single';
-function App() {
-  const [ganttConfig, setGanttConfig] = useState({
-    sortingMode,
-    showSortIndexes: false,
-    showSortIndexesDisabled: true,
-  });
-  const onSortingModeChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      sortingMode: value,
-      showSortIndexesDisabled: value !== 'multiple',
-    }));
-  }, []);
-
-  const onShowSortIndexesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      showSortIndexes: value,
-    }));
-  }, []);
-
-  return (
-    <div id="form-demo">
-      <div className="options">
-        <div className="caption">Options</div>
-        <div className="option">
-          <div className="label">Sorting Mode:</div>
-          {' '}
-          <div className="value">
-            <SelectBox
-              items={sortingModeValues}
-              inputAttr={sortingModeLabel}
-              value={ganttConfig.sortingMode}
-              onValueChanged={onSortingModeChanged}
-            />
-          </div>
-        </div>
-        {' '}
-        <div className="option">
-          <CheckBox
-            text="Show Sort Indexes"
-            value={ganttConfig.showSortIndexes}
-            onValueChanged={onShowSortIndexesChanged}
-            disabled={ganttConfig.showSortIndexesDisabled}
-          />
-        </div>
-      </div>
-      <div className="widget-container">
-        <Gantt
-          taskListWidth={500}
-          scaleType="weeks"
-          height={700}
-          rootValue={-1}>
-
-          <Tasks dataSource={tasks} />
-          <Dependencies dataSource={dependencies} />
-          <Resources dataSource={resources} />
-          <ResourceAssignments dataSource={resourceAssignments} />
-
-          <Column dataField="title" caption="Subject" width={300} sortOrder="asc" />
-          <Column dataField="start" caption="Start Date" />
-          <Column dataField="end" caption="End Date" />
-
-          <Editing enabled />
-          <Sorting mode={ganttConfig.sortingMode}
-            showSortIndexes={ganttConfig.showSortIndexes}></Sorting>
-        </Gantt>
-      </div>
-    </div>
-  );
-}
-
-export default App;
+import React, { useCallback, useState } from 'react';
+import Gantt, {
+  Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, Sorting,
+} from 'devextreme-react/gantt';
+import type { ISortingProps } from 'devextreme-react/gantt';
+import CheckBox from 'devextreme-react/check-box';
+import type { ICheckBoxOptions } from 'devextreme-react/check-box';
+import { SelectBox } from 'devextreme-react/select-box';
+import type { ISelectBoxOptions } from 'devextreme-react/select-box';
+import {
+  tasks, dependencies, resources, resourceAssignments, sortingModeLabel,
+} from './data.ts';
+
+const sortingModeValues: ISortingProps['mode'][] = ['single', 'multiple', 'none'];
+const sortingMode: ISortingProps['mode'] = 'single';
+function App() {
+  const [ganttConfig, setGanttConfig] = useState({
+    sortingMode,
+    showSortIndexes: false,
+    showSortIndexesDisabled: true,
+  });
+  const onSortingModeChanged: ISelectBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      sortingMode: value,
+      showSortIndexesDisabled: value !== 'multiple',
+    }));
+  }, []);
+
+  const onShowSortIndexesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      showSortIndexes: value,
+    }));
+  }, []);
+
+  return (
+    <div id="form-demo">
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <div className="label">Sorting Mode:</div>
+          {' '}
+          <div className="value">
+            <SelectBox
+              items={sortingModeValues}
+              inputAttr={sortingModeLabel}
+              value={ganttConfig.sortingMode}
+              onValueChanged={onSortingModeChanged}
+            />
+          </div>
+        </div>
+        {' '}
+        <div className="option">
+          <CheckBox
+            text="Show Sort Indexes"
+            value={ganttConfig.showSortIndexes}
+            onValueChanged={onShowSortIndexesChanged}
+            disabled={ganttConfig.showSortIndexesDisabled}
+          />
+        </div>
+      </div>
+      <div className="widget-container">
+        <Gantt
+          taskListWidth={500}
+          scaleType="weeks"
+          height={700}
+          rootValue={-1}>
+
+          <Tasks dataSource={tasks} />
+          <Dependencies dataSource={dependencies} />
+          <Resources dataSource={resources} />
+          <ResourceAssignments dataSource={resourceAssignments} />
+
+          <Column dataField="title" caption="Subject" width={300} sortOrder="asc" />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+          <Sorting mode={ganttConfig.sortingMode}
+            showSortIndexes={ganttConfig.showSortIndexes}></Sorting>
+        </Gantt>
+      </div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/apps/demos/Demos/Gantt/Validation/React/App.tsx b/apps/demos/Demos/Gantt/Validation/React/App.tsx
index 00fef826a38c..ac251413411d 100644
--- a/apps/demos/Demos/Gantt/Validation/React/App.tsx
+++ b/apps/demos/Demos/Gantt/Validation/React/App.tsx
@@ -1,90 +1,90 @@
-import React, { useCallback, useState } from 'react';
-import Gantt, {
-  Tasks, Dependencies, Column, Validation, Editing,
-} from 'devextreme-react/gantt';
-import CheckBox from 'devextreme-react/check-box';
-import type { ICheckBoxOptions } from 'devextreme-react/check-box';
-import { tasks, dependencies } from './data.ts';
-
-function App() {
-  const [ganttConfig, setGanttConfig] = useState({
-    autoUpdateParentTasks: true,
-    validateDependencies: true,
-    enablePredecessorGap: true,
-  });
-
-  const onEnablePredecessorGapChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      enablePredecessorGap: value,
-    }));
-  }, []);
-
-  const onAutoUpdateParentTasksChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      autoUpdateParentTasks: value,
-    }));
-  }, []);
-
-  const onValidateDependenciesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
-    setGanttConfig((prevConfig) => ({
-      ...prevConfig,
-      validateDependencies: value,
-    }));
-  }, []);
-
-  return (
-    <div id="form-demo">
-      <div className="options">
-        <div className="caption">Options</div>
-        <div className="option">
-          <CheckBox
-            text="Auto Update Parent Tasks"
-            value={ganttConfig.autoUpdateParentTasks}
-            onValueChanged={onAutoUpdateParentTasksChanged}
-          />
-        </div>
-        {' '}
-        <div className="option">
-          <CheckBox
-            text="Enable Dependency Validation"
-            value={ganttConfig.validateDependencies}
-            onValueChanged={onValidateDependenciesChanged}
-          />
-        </div>
-        {' '}
-        <div className="option">
-          <CheckBox
-            text="Enable Predecessor Gap"
-            value={ganttConfig.enablePredecessorGap}
-            onValueChanged={onEnablePredecessorGapChanged}
-          />
-        </div>
-      </div>
-      <div className="widget-container">
-        <Gantt
-          taskListWidth={500}
-          height={700}
-          taskTitlePosition="none">
-
-          <Validation
-            autoUpdateParentTasks={ganttConfig.autoUpdateParentTasks}
-            validateDependencies={ganttConfig.validateDependencies}
-            enablePredecessorGap={ganttConfig.enablePredecessorGap} />
-
-          <Tasks dataSource={tasks} />
-          <Dependencies dataSource={dependencies} />
-
-          <Column dataField="title" caption="Task" width={300} />
-          <Column dataField="start" caption="Start Date" />
-          <Column dataField="end" caption="End Date" />
-
-          <Editing enabled />
-        </Gantt>
-      </div>
-    </div>
-  );
-}
-
-export default App;
+import React, { useCallback, useState } from 'react';
+import Gantt, {
+  Tasks, Dependencies, Column, Validation, Editing,
+} from 'devextreme-react/gantt';
+import CheckBox from 'devextreme-react/check-box';
+import type { ICheckBoxOptions } from 'devextreme-react/check-box';
+import { tasks, dependencies } from './data.ts';
+
+function App() {
+  const [ganttConfig, setGanttConfig] = useState({
+    autoUpdateParentTasks: true,
+    validateDependencies: true,
+    enablePredecessorGap: true,
+  });
+
+  const onEnablePredecessorGapChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      enablePredecessorGap: value,
+    }));
+  }, []);
+
+  const onAutoUpdateParentTasksChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      autoUpdateParentTasks: value,
+    }));
+  }, []);
+
+  const onValidateDependenciesChanged: ICheckBoxOptions['onValueChanged'] = useCallback(({ value }) => {
+    setGanttConfig((prevConfig) => ({
+      ...prevConfig,
+      validateDependencies: value,
+    }));
+  }, []);
+
+  return (
+    <div id="form-demo">
+      <div className="options">
+        <div className="caption">Options</div>
+        <div className="option">
+          <CheckBox
+            text="Auto Update Parent Tasks"
+            value={ganttConfig.autoUpdateParentTasks}
+            onValueChanged={onAutoUpdateParentTasksChanged}
+          />
+        </div>
+        {' '}
+        <div className="option">
+          <CheckBox
+            text="Enable Dependency Validation"
+            value={ganttConfig.validateDependencies}
+            onValueChanged={onValidateDependenciesChanged}
+          />
+        </div>
+        {' '}
+        <div className="option">
+          <CheckBox
+            text="Enable Predecessor Gap"
+            value={ganttConfig.enablePredecessorGap}
+            onValueChanged={onEnablePredecessorGapChanged}
+          />
+        </div>
+      </div>
+      <div className="widget-container">
+        <Gantt
+          taskListWidth={500}
+          height={700}
+          taskTitlePosition="none">
+
+          <Validation
+            autoUpdateParentTasks={ganttConfig.autoUpdateParentTasks}
+            validateDependencies={ganttConfig.validateDependencies}
+            enablePredecessorGap={ganttConfig.enablePredecessorGap} />
+
+          <Tasks dataSource={tasks} />
+          <Dependencies dataSource={dependencies} />
+
+          <Column dataField="title" caption="Task" width={300} />
+          <Column dataField="start" caption="Start Date" />
+          <Column dataField="end" caption="End Date" />
+
+          <Editing enabled />
+        </Gantt>
+      </div>
+    </div>
+  );
+}
+
+export default App;