From 6b31b7d45b434d8397ac7b0e57abd866a24d1a16 Mon Sep 17 00:00:00 2001
From: DuckTieCorpMember <assylbek.danyshbek@devexpress.com>
Date: Thu, 10 Sep 2026 17:21:53 +0400
Subject: [PATCH 1/2] remove inlines form react scheduler and pivotgrid demos

---
 .../Demos/PivotGrid/DrillDown/React/App.tsx   | 201 +++++++------
 .../Demos/PivotGrid/DrillDown/ReactJs/App.js  |   6 +-
 .../StandaloneFieldChooser/React/App.tsx      | 283 +++++++++---------
 .../StandaloneFieldChooser/ReactJs/App.js     |  11 +-
 .../ContextMenu/React/itemTemplate.tsx        |  38 +--
 .../ContextMenu/ReactJs/itemTemplate.js       |  27 +-
 .../Demos/Scheduler/HiddenDays/React/App.tsx  | 153 +++++-----
 .../Demos/Scheduler/HiddenDays/ReactJs/App.js |  24 +-
 .../React/App.tsx                             |   3 +-
 .../ReactJs/App.js                            |   3 +-
 .../Scheduler/Overview/React/ResourceCell.tsx |   8 +-
 .../Overview/ReactJs/ResourceCell.js          |   8 +-
 .../ResolveTimeConflicts/React/App.tsx        |  30 +-
 .../ResolveTimeConflicts/ReactJs/App.js       |  38 ++-
 .../Demos/Scheduler/Resources/React/App.tsx   |   3 +-
 .../Demos/Scheduler/Resources/ReactJs/App.js  |   3 +-
 16 files changed, 463 insertions(+), 376 deletions(-)

diff --git a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
index 055fcdbd6c4c..f10a28c5b1ee 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
@@ -1,99 +1,102 @@
-import React, { useCallback, useRef, useState } from 'react';
-
-import {
-  PivotGrid,
-  FieldChooser,
-  type PivotGridTypes,
-} from 'devextreme-react/pivot-grid';
-import { DataGrid, Column } from 'devextreme-react/data-grid';
-import type { DataGridRef } from 'devextreme-react/data-grid';
-import { Popup } from 'devextreme-react/popup';
-import { DataSource } from 'devextreme-react/common/data';
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
-import { sales } from './data.ts';
-
-const App = () => {
-  const [popupTitle, setPopupTitle] = useState('');
-  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | undefined>(undefined);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const dataGridRef = useRef<DataGridRef>(null);
-
-  const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
-    if (e.area === 'data' && e.cell) {
-      const pivotGridDataSource = e.component.getDataSource();
-      const rowPathLength = e.cell.rowPath?.length ?? 0;
-      const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
-
-      setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
-      setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
-      setPopupVisible(true);
-    }
-  }, []);
-
-  return (
-    <>
-      <PivotGrid
-        id="sales"
-        allowSortingBySummary={true}
-        allowSorting={true}
-        allowFiltering={true}
-        allowExpandAll={true}
-        showBorders={true}
-        dataSource={dataSource}
-        onCellClick={onCellClick}
-      >
-        <FieldChooser enabled={false} />
-      </PivotGrid>
-      <Popup
-        visible={popupVisible}
-        width={600}
-        height={400}
-        title={popupTitle}
-        onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current?.instance().updateDimensions()}
-        showCloseButton={true}
-      >
-        <DataGrid
-          width={560}
-          height={300}
-          dataSource={drillDownDataSource}
-          ref={dataGridRef}
-        >
-          <Column dataField="region" />
-          <Column dataField="city" />
-          <Column dataField="amount" dataType="number" format="currency" />
-          <Column dataField="date" dataType="date" />
-        </DataGrid>
-      </Popup>
-    </>
-  );
-};
-
-const dataSource = new PivotGridDataSource({
-  fields: [{
-    caption: 'Region',
-    width: 120,
-    dataField: 'region',
-    area: 'row',
-  }, {
-    caption: 'City',
-    dataField: 'city',
-    width: 150,
-    area: 'row',
-  }, {
-    dataField: 'date',
-    dataType: 'date',
-    area: 'column',
-  }, {
-    caption: 'Total',
-    dataField: 'amount',
-    dataType: 'number',
-    summaryType: 'sum',
-    format: 'currency',
-    area: 'data',
-  }],
-  store: sales,
-});
-
-export default App;
+import React, { useCallback, useRef, useState } from 'react';
+
+import {
+  PivotGrid,
+  FieldChooser,
+  type PivotGridTypes,
+} from 'devextreme-react/pivot-grid';
+import { DataGrid, Column } from 'devextreme-react/data-grid';
+import type { DataGridRef } from 'devextreme-react/data-grid';
+import { Popup } from 'devextreme-react/popup';
+import { DataSource } from 'devextreme-react/common/data';
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+
+import { sales } from './data.ts';
+
+const App = () => {
+  const [popupTitle, setPopupTitle] = useState('');
+  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | undefined>(undefined);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const dataGridRef = useRef<DataGridRef>(null);
+
+  const onPopupHiding = useCallback(() => setPopupVisible(false), []);
+  const onPopupShown = useCallback(() => dataGridRef.current?.instance().updateDimensions(), []);
+
+  const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
+    if (e.area === 'data' && e.cell) {
+      const pivotGridDataSource = e.component.getDataSource();
+      const rowPathLength = e.cell.rowPath?.length ?? 0;
+      const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
+
+      setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
+      setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
+      setPopupVisible(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <PivotGrid
+        id="sales"
+        allowSortingBySummary={true}
+        allowSorting={true}
+        allowFiltering={true}
+        allowExpandAll={true}
+        showBorders={true}
+        dataSource={dataSource}
+        onCellClick={onCellClick}
+      >
+        <FieldChooser enabled={false} />
+      </PivotGrid>
+      <Popup
+        visible={popupVisible}
+        width={600}
+        height={400}
+        title={popupTitle}
+        onHiding={onPopupHiding}
+        onShown={onPopupShown}
+        showCloseButton={true}
+      >
+        <DataGrid
+          width={560}
+          height={300}
+          dataSource={drillDownDataSource}
+          ref={dataGridRef}
+        >
+          <Column dataField="region" />
+          <Column dataField="city" />
+          <Column dataField="amount" dataType="number" format="currency" />
+          <Column dataField="date" dataType="date" />
+        </DataGrid>
+      </Popup>
+    </>
+  );
+};
+
+const dataSource = new PivotGridDataSource({
+  fields: [{
+    caption: 'Region',
+    width: 120,
+    dataField: 'region',
+    area: 'row',
+  }, {
+    caption: 'City',
+    dataField: 'city',
+    width: 150,
+    area: 'row',
+  }, {
+    dataField: 'date',
+    dataType: 'date',
+    area: 'column',
+  }, {
+    caption: 'Total',
+    dataField: 'amount',
+    dataType: 'number',
+    summaryType: 'sum',
+    format: 'currency',
+    area: 'data',
+  }],
+  store: sales,
+});
+
+export default App;
diff --git a/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js b/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
index 25c0e925a192..2df774e09019 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js
@@ -10,6 +10,8 @@ const App = () => {
   const [drillDownDataSource, setDrillDownDataSource] = useState(undefined);
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef(null);
+  const onPopupHiding = useCallback(() => setPopupVisible(false), []);
+  const onPopupShown = useCallback(() => dataGridRef.current?.instance().updateDimensions(), []);
   const onCellClick = useCallback((e) => {
     if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
@@ -39,8 +41,8 @@ const App = () => {
         width={600}
         height={400}
         title={popupTitle}
-        onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current?.instance().updateDimensions()}
+        onHiding={onPopupHiding}
+        onShown={onPopupShown}
         showCloseButton={true}
       >
         <DataGrid
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
index 1c55eea8e87a..407b54627727 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
@@ -1,140 +1,143 @@
-import React, { useRef, useState } from 'react';
-
-import { Button } from 'devextreme-react/button';
-import type { ApplyChangesMode } from 'devextreme-react/common/grids';
-import type { FieldChooserLayout } from 'devextreme-react/common';
-import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
-import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
-import type { PivotGridFieldChooserRef } from 'devextreme-react/pivot-grid-field-chooser';
-import { RadioGroup } from 'devextreme-react/radio-group';
-import { SelectBox } from 'devextreme-react/select-box';
-
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
-import service from './data.ts';
-
-const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' };
-const applyChangesModes = ['instantly', 'onDemand'];
-const layouts = service.getLayouts();
-
-const App = () => {
-  const [applyChangesMode, setApplyChangesMode] = useState<ApplyChangesMode>('instantly');
-  const [layout, setLayout] = useState<FieldChooserLayout>(0);
-  const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null);
-
-  return (
-    <>
-      <PivotGrid
-        dataSource={dataSource}
-        allowSortingBySummary={true}
-        allowFiltering={true}
-        allowSorting={true}
-        showBorders={true}
-      >
-        <FieldChooser enabled={false} />
-      </PivotGrid>
-
-      <div className="container">
-        <PivotGridFieldChooser
-          ref={fieldChooserRef}
-          dataSource={dataSource}
-          width={400}
-          height={400}
-          layout={layout}
-          applyChangesMode={applyChangesMode}
-        >
-          <Texts
-            allFields="All"
-            columnFields="Columns"
-            dataFields="Data"
-            rowFields="Rows"
-            filterFields="Filter"
-          ></Texts>
-        </PivotGridFieldChooser>
-        { applyChangesMode === 'onDemand'
-          && <div className="bottom-bar">
-            <Button
-              text="Apply"
-              type="default"
-              onClick={() => fieldChooserRef.current?.instance().applyChanges()}
-            ></Button>
-            <Button
-              text="Cancel"
-              onClick={() => fieldChooserRef.current?.instance().cancelChanges()}
-            ></Button>
-          </div>
-        }
-
-        <div className="options">
-          <div className="caption">Options</div>
-          <div className="option">
-            <span>Choose layout:</span>
-            <RadioGroup
-              items={layouts}
-              value={layout}
-              className="option-editor"
-              layout="vertical"
-              valueExpr="key"
-              displayExpr="name"
-              onValueChange={setLayout}>
-            </RadioGroup>
-          </div>
-          <div className="option">
-            <span>Apply Changes Mode:</span>
-            <SelectBox
-              className="option-editor"
-              items={applyChangesModes}
-              inputAttr={applyChangesModeLabel}
-              width={180}
-              value={applyChangesMode}
-              onValueChange={setApplyChangesMode}>
-            </SelectBox>
-          </div>
-        </div>
-
-      </div>
-
-    </>
-  );
-};
-
-const dataSource = new PivotGridDataSource({
-  fields: [{
-    caption: 'Region',
-    width: 120,
-    dataField: 'region',
-    area: 'row',
-    headerFilter: {
-      search: {
-        enabled: true,
-      },
-    },
-  }, {
-    caption: 'City',
-    dataField: 'city',
-    width: 150,
-    area: 'row',
-    headerFilter: {
-      search: {
-        enabled: true,
-      },
-    },
-    selector(data: { city: any; country: any; }) {
-      return `${data.city} (${data.country})`;
-    },
-  }, {
-    dataField: 'date',
-    dataType: 'date',
-    area: 'column',
-  }, {
-    caption: 'Sales',
-    dataField: 'amount',
-    dataType: 'number',
-    summaryType: 'sum',
-    format: 'currency',
-    area: 'data',
-  }],
-  store: service.getSales(),
-});
-
-export default App;
+import React, { useCallback, useRef, useState } from 'react';
+
+import { Button } from 'devextreme-react/button';
+import type { ApplyChangesMode } from 'devextreme-react/common/grids';
+import type { FieldChooserLayout } from 'devextreme-react/common';
+import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
+import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
+import type { PivotGridFieldChooserRef } from 'devextreme-react/pivot-grid-field-chooser';
+import { RadioGroup } from 'devextreme-react/radio-group';
+import { SelectBox } from 'devextreme-react/select-box';
+
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+
+import service from './data.ts';
+
+const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' };
+const applyChangesModes = ['instantly', 'onDemand'];
+const layouts = service.getLayouts();
+
+const App = () => {
+  const [applyChangesMode, setApplyChangesMode] = useState<ApplyChangesMode>('instantly');
+  const [layout, setLayout] = useState<FieldChooserLayout>(0);
+  const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null);
+
+  const onApplyChanges = useCallback(() => fieldChooserRef.current?.instance().applyChanges(), []);
+  const onCancelChanges = useCallback(() => fieldChooserRef.current?.instance().cancelChanges(), []);
+
+  return (
+    <>
+      <PivotGrid
+        dataSource={dataSource}
+        allowSortingBySummary={true}
+        allowFiltering={true}
+        allowSorting={true}
+        showBorders={true}
+      >
+        <FieldChooser enabled={false} />
+      </PivotGrid>
+
+      <div className="container">
+        <PivotGridFieldChooser
+          ref={fieldChooserRef}
+          dataSource={dataSource}
+          width={400}
+          height={400}
+          layout={layout}
+          applyChangesMode={applyChangesMode}
+        >
+          <Texts
+            allFields="All"
+            columnFields="Columns"
+            dataFields="Data"
+            rowFields="Rows"
+            filterFields="Filter"
+          ></Texts>
+        </PivotGridFieldChooser>
+        { applyChangesMode === 'onDemand'
+          && <div className="bottom-bar">
+            <Button
+              text="Apply"
+              type="default"
+              onClick={onApplyChanges}
+            ></Button>
+            <Button
+              text="Cancel"
+              onClick={onCancelChanges}
+            ></Button>
+          </div>
+        }
+
+        <div className="options">
+          <div className="caption">Options</div>
+          <div className="option">
+            <span>Choose layout:</span>
+            <RadioGroup
+              items={layouts}
+              value={layout}
+              className="option-editor"
+              layout="vertical"
+              valueExpr="key"
+              displayExpr="name"
+              onValueChange={setLayout}>
+            </RadioGroup>
+          </div>
+          <div className="option">
+            <span>Apply Changes Mode:</span>
+            <SelectBox
+              className="option-editor"
+              items={applyChangesModes}
+              inputAttr={applyChangesModeLabel}
+              width={180}
+              value={applyChangesMode}
+              onValueChange={setApplyChangesMode}>
+            </SelectBox>
+          </div>
+        </div>
+
+      </div>
+
+    </>
+  );
+};
+
+const dataSource = new PivotGridDataSource({
+  fields: [{
+    caption: 'Region',
+    width: 120,
+    dataField: 'region',
+    area: 'row',
+    headerFilter: {
+      search: {
+        enabled: true,
+      },
+    },
+  }, {
+    caption: 'City',
+    dataField: 'city',
+    width: 150,
+    area: 'row',
+    headerFilter: {
+      search: {
+        enabled: true,
+      },
+    },
+    selector(data: { city: any; country: any; }) {
+      return `${data.city} (${data.country})`;
+    },
+  }, {
+    dataField: 'date',
+    dataType: 'date',
+    area: 'column',
+  }, {
+    caption: 'Sales',
+    dataField: 'amount',
+    dataType: 'number',
+    summaryType: 'sum',
+    format: 'currency',
+    area: 'data',
+  }],
+  store: service.getSales(),
+});
+
+export default App;
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js
index 63f5a1640a62..d99b56b47702 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/ReactJs/App.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Button } from 'devextreme-react/button';
 import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
 import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
@@ -14,6 +14,11 @@ const App = () => {
   const [applyChangesMode, setApplyChangesMode] = useState('instantly');
   const [layout, setLayout] = useState(0);
   const fieldChooserRef = useRef(null);
+  const onApplyChanges = useCallback(() => fieldChooserRef.current?.instance().applyChanges(), []);
+  const onCancelChanges = useCallback(
+    () => fieldChooserRef.current?.instance().cancelChanges(),
+    [],
+  );
   return (
     <>
       <PivotGrid
@@ -48,11 +53,11 @@ const App = () => {
             <Button
               text="Apply"
               type="default"
-              onClick={() => fieldChooserRef.current?.instance().applyChanges()}
+              onClick={onApplyChanges}
             ></Button>
             <Button
               text="Cancel"
-              onClick={() => fieldChooserRef.current?.instance().cancelChanges()}
+              onClick={onCancelChanges}
             ></Button>
           </div>
         )}
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
index ce704b4a2f01..a94d15f0d228 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
@@ -1,17 +1,21 @@
-import React from 'react';
-
-type ItemTemplateProps = {
-  data: {
-    color: string;
-    text: string;
-  }
-};
-
-const ItemTemplate = (props: ItemTemplateProps) => (
-  <div>
-    {props.data.color && <div className="item-badge" style={{ backgroundColor: props.data.color }} />}
-    {props.data.text}
-  </div>
-);
-
-export default ItemTemplate;
+import React, { useMemo } from 'react';
+
+type ItemTemplateProps = {
+  data: {
+    color: string;
+    text: string;
+  }
+};
+
+const ItemTemplate = (props: ItemTemplateProps) => {
+  const badgeStyle = useMemo(() => ({ backgroundColor: props.data.color }), [props.data.color]);
+
+  return (
+    <div>
+      {props.data.color && <div className="item-badge" style={badgeStyle} />}
+      {props.data.text}
+    </div>
+  );
+};
+
+export default ItemTemplate;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js
index 31eaeb9417d8..eaeb52c1a484 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js
+++ b/apps/demos/Demos/Scheduler/ContextMenu/ReactJs/itemTemplate.js
@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
-const ItemTemplate = (props) => (
-  <div>
-    {props.data.color && (
-      <div
-        className="item-badge"
-        style={{ backgroundColor: props.data.color }}
-      />
-    )}
-    {props.data.text}
-  </div>
-);
+const ItemTemplate = (props) => {
+  const badgeStyle = useMemo(() => ({ backgroundColor: props.data.color }), [props.data.color]);
+  return (
+    <div>
+      {props.data.color && (
+        <div
+          className="item-badge"
+          style={badgeStyle}
+        />
+      )}
+      {props.data.text}
+    </div>
+  );
+};
 export default ItemTemplate;
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx b/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx
index 5ecbbeba4e84..adca43bc196f 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx
@@ -1,69 +1,84 @@
-import React, { useCallback, useMemo, useState } from 'react';
-
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
-import { ArrayStore } from 'devextreme-react/common/data';
-import { data } from './data.ts';
-
-const dataSource = new ArrayStore({
-  key: 'id',
-  data,
-});
-
-const allDays: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 3, 4, 5, 6];
-const dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-const defaultVisible: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 4, 6];
-const views: SchedulerTypes.Properties['views'] = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
-const currentDate = new Date(2021, 3, 26);
-const VALIDATION_MESSAGE = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
-
-const App = () => {
-  const [visibleDays, setVisibleDays] = useState<SchedulerTypes.DayOfWeek[]>(defaultVisible);
-
-  const isInvalid = visibleDays.length === 0;
-
-  const hiddenWeekDays = useMemo(
-    () => allDays.filter((d) => !visibleDays.includes(d)),
-    [visibleDays],
-  );
-
-  const onDayToggle = useCallback((dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => {
-    setVisibleDays((prev) => (e.value
-      ? [...prev, dayIndex]
-      : prev.filter((d) => d !== dayIndex)));
-  }, []);
-
-  return (
-    <div className={`hidden-days-demo${isInvalid ? ' is-invalid' : ''}`}>
-      <div className="scheduler-container">
-        <Scheduler
-          timeZone="America/Los_Angeles"
-          dataSource={dataSource}
-          views={views}
-          hiddenWeekDays={hiddenWeekDays}
-          defaultCurrentView="week"
-          defaultCurrentDate={currentDate}
-          startDayHour={9}
-          height={730}
-        />
-      </div>
-      <div className="options">
-        <div className="caption">Visible Week Days</div>
-        {dayLabels.map((label, idx) => (
-          <div className="option" key={label}>
-            <CheckBox
-              text={label}
-              value={visibleDays.includes(idx as SchedulerTypes.DayOfWeek)}
-              onValueChanged={(e) => onDayToggle(idx as SchedulerTypes.DayOfWeek, e)}
-            />
-          </div>
-        ))}
-        <div className="validation-message">
-          {VALIDATION_MESSAGE}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default App;
+import React, { useCallback, useMemo, useState } from 'react';
+
+import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import { ArrayStore } from 'devextreme-react/common/data';
+import { data } from './data.ts';
+
+const dataSource = new ArrayStore({
+  key: 'id',
+  data,
+});
+
+const allDays: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 3, 4, 5, 6];
+const dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const defaultVisible: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 4, 6];
+const views: SchedulerTypes.Properties['views'] = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
+const currentDate = new Date(2021, 3, 26);
+const VALIDATION_MESSAGE = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+const DayCheckBox = ({
+  dayIndex, label, value, onDayToggle,
+}: {
+  dayIndex: SchedulerTypes.DayOfWeek;
+  label: string;
+  value: boolean;
+  onDayToggle: (dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => void;
+}) => {
+  const onValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+    onDayToggle(dayIndex, e);
+  }, [dayIndex, onDayToggle]);
+
+  return <CheckBox text={label} value={value} onValueChanged={onValueChanged} />;
+};
+
+const App = () => {
+  const [visibleDays, setVisibleDays] = useState<SchedulerTypes.DayOfWeek[]>(defaultVisible);
+
+  const isInvalid = visibleDays.length === 0;
+
+  const hiddenWeekDays = useMemo(
+    () => allDays.filter((d) => !visibleDays.includes(d)),
+    [visibleDays],
+  );
+
+  const onDayToggle = useCallback((dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => {
+    setVisibleDays((prev) => (e.value
+      ? [...prev, dayIndex]
+      : prev.filter((d) => d !== dayIndex)));
+  }, []);
+
+  return (
+    <div className={`hidden-days-demo${isInvalid ? ' is-invalid' : ''}`}>
+      <div className="scheduler-container">
+        <Scheduler
+          timeZone="America/Los_Angeles"
+          dataSource={dataSource}
+          views={views}
+          hiddenWeekDays={hiddenWeekDays}
+          defaultCurrentView="week"
+          defaultCurrentDate={currentDate}
+          startDayHour={9}
+          height={730}
+        />
+      </div>
+      <div className="options">
+        <div className="caption">Visible Week Days</div>
+        {dayLabels.map((label, idx) => (
+          <div className="option" key={label}>
+            <DayCheckBox
+              dayIndex={idx as SchedulerTypes.DayOfWeek}
+              label={label}
+              value={visibleDays.includes(idx as SchedulerTypes.DayOfWeek)}
+              onDayToggle={onDayToggle}
+            />
+          </div>
+        ))}
+        <div className="validation-message">
+          {VALIDATION_MESSAGE}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/App.js b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/App.js
index f6447c013062..08772f987b12 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/HiddenDays/ReactJs/App.js
@@ -15,6 +15,23 @@ const views = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
 const currentDate = new Date(2021, 3, 26);
 const VALIDATION_MESSAGE =
   'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+const DayCheckBox = ({
+  dayIndex, label, value, onDayToggle,
+}) => {
+  const onValueChanged = useCallback(
+    (e) => {
+      onDayToggle(dayIndex, e);
+    },
+    [dayIndex, onDayToggle],
+  );
+  return (
+    <CheckBox
+      text={label}
+      value={value}
+      onValueChanged={onValueChanged}
+    />
+  );
+};
 const App = () => {
   const [visibleDays, setVisibleDays] = useState(defaultVisible);
   const isInvalid = visibleDays.length === 0;
@@ -46,10 +63,11 @@ const App = () => {
             className="option"
             key={label}
           >
-            <CheckBox
-              text={label}
+            <DayCheckBox
+              dayIndex={idx}
+              label={label}
               value={visibleDays.includes(idx)}
-              onValueChanged={(e) => onDayToggle(idx, e)}
+              onDayToggle={onDayToggle}
             />
           </div>
         ))}
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
index 3f98a1fcbcf4..49e51404d699 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
@@ -13,6 +13,7 @@ const currentDate = new Date(2021, 3, 27);
 const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const typeGroups = ['typeId'];
 const priorityGroups = ['priorityId'];
+const colCountByScreen = { xs: 3 };
 
 type DateCellProps = {
   data: any;
@@ -67,7 +68,7 @@ const App = () => (
           <Item name="dateGroup" />
           <Item name="repeatGroup" />
           <Item name="resourcesGroup">
-            <Item name="priorityIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
+            <Item name="priorityIdGroup" colCount={3} colCountByScreen={colCountByScreen}>
               <Item name="priorityIdIcon" />
               <Item name="priorityIdEditor" />
               <Item name="typeIdEditor" />
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
index 4ad2cb8bd73a..2b011432326e 100644
--- a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
@@ -12,6 +12,7 @@ const currentDate = new Date(2021, 3, 27);
 const dayOfWeekNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 const typeGroups = ['typeId'];
 const priorityGroups = ['priorityId'];
+const colCountByScreen = { xs: 3 };
 const DateCell = ({ data: cellData }) => (
   <>
     <div className="name">{dayOfWeekNames[cellData.date.getDay()]}</div>
@@ -67,7 +68,7 @@ const App = () => (
             <Item
               name="priorityIdGroup"
               colCount={3}
-              colCountByScreen={{ xs: 3 }}
+              colCountByScreen={colCountByScreen}
             >
               <Item name="priorityIdIcon" />
               <Item name="priorityIdEditor" />
diff --git a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
index 23f948f62ecf..342286469e66 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
+++ b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 type ResourceCellProps = {
   data: { color: string; text: string; data: { avatar: string; age: number; discipline: string; }; };
@@ -6,10 +6,12 @@ type ResourceCellProps = {
 
 const ResourceCell = (props: ResourceCellProps) => {
   const { data: { color, text, data: { avatar, age, discipline } } } = props;
+  const backgroundStyle = useMemo(() => ({ background: color }), [color]);
+  const textStyle = useMemo(() => ({ color }), [color]);
 
   return (
     <div className="dx-template-wrapper">
-      <div className="name" style={{ background: color }}>
+      <div className="name" style={backgroundStyle}>
         <h2>{text}</h2>
       </div>
       <div className="avatar" title={text}>
@@ -18,7 +20,7 @@ const ResourceCell = (props: ResourceCellProps) => {
           alt={`${text} photo`}
         />
       </div>
-      <div className="info" style={{ color }}>
+      <div className="info" style={textStyle}>
         Age: {age}
         <br />
         <b>{discipline}</b>
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
index 6f080eb30b8a..7f745581c3f3 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 const ResourceCell = (props) => {
   const {
@@ -8,11 +8,13 @@ const ResourceCell = (props) => {
       data: { avatar, age, discipline },
     },
   } = props;
+  const backgroundStyle = useMemo(() => ({ background: color }), [color]);
+  const textStyle = useMemo(() => ({ color }), [color]);
   return (
     <div className="dx-template-wrapper">
       <div
         className="name"
-        style={{ background: color }}
+        style={backgroundStyle}
       >
         <h2>{text}</h2>
       </div>
@@ -27,7 +29,7 @@ const ResourceCell = (props) => {
       </div>
       <div
         className="info"
-        style={{ color }}
+        style={textStyle}
       >
         Age: {age}
         <br />
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
index 42a44a6958aa..c00bd50ff2af 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
@@ -25,6 +25,7 @@ const overlappingRuleItems = [
   { value: 'sameResource', text: 'Different Resources' },
   { value: 'allResources', text: 'Never' },
 ];
+const formElementAttr = { class: 'hide-informer', id: 'form' };
 
 function getNextDay(date: Date): Date {
   const next = new Date(date);
@@ -90,12 +91,21 @@ const assigneeIdEditorOptions = {
   tagTemplate: 'tagTemplate',
 };
 
-const tagTemplate = (itemData: Assignee) => (
-  <div className="dx-tag-content" style={{ backgroundColor: itemData.color, borderColor: itemData.color }}>
-    {itemData.text}
-    <div className="dx-tag-remove-button"></div>
-  </div>
-);
+const TagTemplate = ({ itemData }: { itemData: Assignee }) => {
+  const tagStyle = useMemo(() => ({
+    backgroundColor: itemData.color,
+    borderColor: itemData.color,
+  }), [itemData.color]);
+
+  return (
+    <div className="dx-tag-content" style={tagStyle}>
+      {itemData.text}
+      <div className="dx-tag-remove-button"></div>
+    </div>
+  );
+};
+
+const tagTemplate = (itemData: Assignee) => <TagTemplate itemData={itemData} />;
 
 const conflictInformerRender = () => (
   <div className="conflict-informer">This time slot conflicts with another appointment.</div>
@@ -107,6 +117,10 @@ const App = () => {
   const showConflictErrorRef = useRef(false);
   const overlappingRuleRef = useRef('sameResource');
 
+  const onOverlappingRuleChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => {
+    overlappingRuleRef.current = e.value;
+  }, []);
+
   const setConflictError = useCallback((show: boolean) => {
     showConflictErrorRef.current = show;
     formRef.current?.option('elementAttr.class', show ? '' : 'hide-informer');
@@ -226,7 +240,7 @@ const App = () => {
             labelMode="hidden"
             onInitialized={onFormInitialized}
             customizeItem={customizeItem}
-            elementAttr={{ class: 'hide-informer', id: 'form' }}
+            elementAttr={formElementAttr}
           >
             <Item
               name="conflictInformer"
@@ -260,7 +274,7 @@ const App = () => {
             valueExpr="value"
             displayExpr="text"
             defaultValue="sameResource"
-            onValueChanged={(e: SelectBoxTypes.ValueChangedEvent) => { overlappingRuleRef.current = e.value; }}
+            onValueChanged={onOverlappingRuleChanged}
           />
         </div>
       </div>
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
index e13487f0fae2..ec740a9b79a2 100644
--- a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
@@ -13,6 +13,7 @@ const overlappingRuleItems = [
   { value: 'sameResource', text: 'Different Resources' },
   { value: 'allResources', text: 'Never' },
 ];
+const formElementAttr = { class: 'hide-informer', id: 'form' };
 function getNextDay(date) {
   const next = new Date(date);
   next.setDate(next.getDate() + 1);
@@ -59,15 +60,25 @@ const assigneeIdEditorOptions = {
   },
   tagTemplate: 'tagTemplate',
 };
-const tagTemplate = (itemData) => (
-  <div
-    className="dx-tag-content"
-    style={{ backgroundColor: itemData.color, borderColor: itemData.color }}
-  >
-    {itemData.text}
-    <div className="dx-tag-remove-button"></div>
-  </div>
-);
+const TagTemplate = ({ itemData }) => {
+  const tagStyle = useMemo(
+    () => ({
+      backgroundColor: itemData.color,
+      borderColor: itemData.color,
+    }),
+    [itemData.color],
+  );
+  return (
+    <div
+      className="dx-tag-content"
+      style={tagStyle}
+    >
+      {itemData.text}
+      <div className="dx-tag-remove-button"></div>
+    </div>
+  );
+};
+const tagTemplate = (itemData) => <TagTemplate itemData={itemData} />;
 const conflictInformerRender = () => (
   <div className="conflict-informer">This time slot conflicts with another appointment.</div>
 );
@@ -76,6 +87,9 @@ const App = () => {
   const formRef = useRef(null);
   const showConflictErrorRef = useRef(false);
   const overlappingRuleRef = useRef('sameResource');
+  const onOverlappingRuleChanged = useCallback((e) => {
+    overlappingRuleRef.current = e.value;
+  }, []);
   const setConflictError = useCallback((show) => {
     showConflictErrorRef.current = show;
     formRef.current?.option('elementAttr.class', show ? '' : 'hide-informer');
@@ -201,7 +215,7 @@ const App = () => {
             labelMode="hidden"
             onInitialized={onFormInitialized}
             customizeItem={customizeItem}
-            elementAttr={{ class: 'hide-informer', id: 'form' }}
+            elementAttr={formElementAttr}
           >
             <Item
               name="conflictInformer"
@@ -244,9 +258,7 @@ const App = () => {
             valueExpr="value"
             displayExpr="text"
             defaultValue="sameResource"
-            onValueChanged={(e) => {
-              overlappingRuleRef.current = e.value;
-            }}
+            onValueChanged={onOverlappingRuleChanged}
           />
         </div>
       </div>
diff --git a/apps/demos/Demos/Scheduler/Resources/React/App.tsx b/apps/demos/Demos/Scheduler/Resources/React/App.tsx
index 0125755f0dc7..88b768e6b60a 100644
--- a/apps/demos/Demos/Scheduler/Resources/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Resources/React/App.tsx
@@ -17,6 +17,7 @@ import {
 
 const currentDate = new Date(2021, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['workWeek'];
+const colCountByScreen = { xs: 3 };
 
 const App = () => {
   const [currentResource, setCurrentResource] = useState(resourcesList[0]);
@@ -67,7 +68,7 @@ const App = () => {
               <Item name="dateGroup" />
               <Item name="repeatGroup" />
               <Item name="resourcesGroup">
-                <Item name="roomIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
+                <Item name="roomIdGroup" colCount={3} colCountByScreen={colCountByScreen}>
                   <Item name="roomIdIcon" />
                   <Item name="roomIdEditor" />
                   <Item name="priorityIdEditor" />
diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
index 984c1afb0811..b276ddef9cd6 100644
--- a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
@@ -12,6 +12,7 @@ import {
 
 const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek'];
+const colCountByScreen = { xs: 3 };
 const App = () => {
   const [currentResource, setCurrentResource] = useState(resourcesList[0]);
   const onRadioGroupValueChanged = useCallback((e) => {
@@ -62,7 +63,7 @@ const App = () => {
                 <Item
                   name="roomIdGroup"
                   colCount={3}
-                  colCountByScreen={{ xs: 3 }}
+                  colCountByScreen={colCountByScreen}
                 >
                   <Item name="roomIdIcon" />
                   <Item name="roomIdEditor" />

From 075216641e63fbcb283b5633a0243e9395edeced Mon Sep 17 00:00:00 2001
From: DuckTieCorpMember <assylbek.danyshbek@devexpress.com>
Date: Thu, 10 Sep 2026 19:05:16 +0400
Subject: [PATCH 2/2] restore line endings

---
 .../Demos/PivotGrid/DrillDown/React/App.tsx   | 204 ++++++-------
 .../StandaloneFieldChooser/React/App.tsx      | 286 +++++++++---------
 .../ContextMenu/React/itemTemplate.tsx        |  42 +--
 .../Demos/Scheduler/HiddenDays/React/App.tsx  | 168 +++++-----
 4 files changed, 350 insertions(+), 350 deletions(-)

diff --git a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
index f10a28c5b1ee..46e68c5c707f 100644
--- a/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx
@@ -1,102 +1,102 @@
-import React, { useCallback, useRef, useState } from 'react';
-
-import {
-  PivotGrid,
-  FieldChooser,
-  type PivotGridTypes,
-} from 'devextreme-react/pivot-grid';
-import { DataGrid, Column } from 'devextreme-react/data-grid';
-import type { DataGridRef } from 'devextreme-react/data-grid';
-import { Popup } from 'devextreme-react/popup';
-import { DataSource } from 'devextreme-react/common/data';
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
-import { sales } from './data.ts';
-
-const App = () => {
-  const [popupTitle, setPopupTitle] = useState('');
-  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | undefined>(undefined);
-  const [popupVisible, setPopupVisible] = useState(false);
-  const dataGridRef = useRef<DataGridRef>(null);
-
-  const onPopupHiding = useCallback(() => setPopupVisible(false), []);
-  const onPopupShown = useCallback(() => dataGridRef.current?.instance().updateDimensions(), []);
-
-  const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
-    if (e.area === 'data' && e.cell) {
-      const pivotGridDataSource = e.component.getDataSource();
-      const rowPathLength = e.cell.rowPath?.length ?? 0;
-      const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
-
-      setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
-      setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
-      setPopupVisible(true);
-    }
-  }, []);
-
-  return (
-    <>
-      <PivotGrid
-        id="sales"
-        allowSortingBySummary={true}
-        allowSorting={true}
-        allowFiltering={true}
-        allowExpandAll={true}
-        showBorders={true}
-        dataSource={dataSource}
-        onCellClick={onCellClick}
-      >
-        <FieldChooser enabled={false} />
-      </PivotGrid>
-      <Popup
-        visible={popupVisible}
-        width={600}
-        height={400}
-        title={popupTitle}
-        onHiding={onPopupHiding}
-        onShown={onPopupShown}
-        showCloseButton={true}
-      >
-        <DataGrid
-          width={560}
-          height={300}
-          dataSource={drillDownDataSource}
-          ref={dataGridRef}
-        >
-          <Column dataField="region" />
-          <Column dataField="city" />
-          <Column dataField="amount" dataType="number" format="currency" />
-          <Column dataField="date" dataType="date" />
-        </DataGrid>
-      </Popup>
-    </>
-  );
-};
-
-const dataSource = new PivotGridDataSource({
-  fields: [{
-    caption: 'Region',
-    width: 120,
-    dataField: 'region',
-    area: 'row',
-  }, {
-    caption: 'City',
-    dataField: 'city',
-    width: 150,
-    area: 'row',
-  }, {
-    dataField: 'date',
-    dataType: 'date',
-    area: 'column',
-  }, {
-    caption: 'Total',
-    dataField: 'amount',
-    dataType: 'number',
-    summaryType: 'sum',
-    format: 'currency',
-    area: 'data',
-  }],
-  store: sales,
-});
-
-export default App;
+import React, { useCallback, useRef, useState } from 'react';
+
+import {
+  PivotGrid,
+  FieldChooser,
+  type PivotGridTypes,
+} from 'devextreme-react/pivot-grid';
+import { DataGrid, Column } from 'devextreme-react/data-grid';
+import type { DataGridRef } from 'devextreme-react/data-grid';
+import { Popup } from 'devextreme-react/popup';
+import { DataSource } from 'devextreme-react/common/data';
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+
+import { sales } from './data.ts';
+
+const App = () => {
+  const [popupTitle, setPopupTitle] = useState('');
+  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | undefined>(undefined);
+  const [popupVisible, setPopupVisible] = useState(false);
+  const dataGridRef = useRef<DataGridRef>(null);
+
+  const onPopupHiding = useCallback(() => setPopupVisible(false), []);
+  const onPopupShown = useCallback(() => dataGridRef.current?.instance().updateDimensions(), []);
+
+  const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
+    if (e.area === 'data' && e.cell) {
+      const pivotGridDataSource = e.component.getDataSource();
+      const rowPathLength = e.cell.rowPath?.length ?? 0;
+      const rowPathName = e.cell.rowPath?.[rowPathLength - 1];
+
+      setPopupTitle(`${rowPathName || 'Total'} Drill Down Data`);
+      setDrillDownDataSource(pivotGridDataSource.createDrillDownDataSource(e.cell));
+      setPopupVisible(true);
+    }
+  }, []);
+
+  return (
+    <>
+      <PivotGrid
+        id="sales"
+        allowSortingBySummary={true}
+        allowSorting={true}
+        allowFiltering={true}
+        allowExpandAll={true}
+        showBorders={true}
+        dataSource={dataSource}
+        onCellClick={onCellClick}
+      >
+        <FieldChooser enabled={false} />
+      </PivotGrid>
+      <Popup
+        visible={popupVisible}
+        width={600}
+        height={400}
+        title={popupTitle}
+        onHiding={onPopupHiding}
+        onShown={onPopupShown}
+        showCloseButton={true}
+      >
+        <DataGrid
+          width={560}
+          height={300}
+          dataSource={drillDownDataSource}
+          ref={dataGridRef}
+        >
+          <Column dataField="region" />
+          <Column dataField="city" />
+          <Column dataField="amount" dataType="number" format="currency" />
+          <Column dataField="date" dataType="date" />
+        </DataGrid>
+      </Popup>
+    </>
+  );
+};
+
+const dataSource = new PivotGridDataSource({
+  fields: [{
+    caption: 'Region',
+    width: 120,
+    dataField: 'region',
+    area: 'row',
+  }, {
+    caption: 'City',
+    dataField: 'city',
+    width: 150,
+    area: 'row',
+  }, {
+    dataField: 'date',
+    dataType: 'date',
+    area: 'column',
+  }, {
+    caption: 'Total',
+    dataField: 'amount',
+    dataType: 'number',
+    summaryType: 'sum',
+    format: 'currency',
+    area: 'data',
+  }],
+  store: sales,
+});
+
+export default App;
diff --git a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
index 407b54627727..af11a2649f19 100644
--- a/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/StandaloneFieldChooser/React/App.tsx
@@ -1,143 +1,143 @@
-import React, { useCallback, useRef, useState } from 'react';
-
-import { Button } from 'devextreme-react/button';
-import type { ApplyChangesMode } from 'devextreme-react/common/grids';
-import type { FieldChooserLayout } from 'devextreme-react/common';
-import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
-import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
-import type { PivotGridFieldChooserRef } from 'devextreme-react/pivot-grid-field-chooser';
-import { RadioGroup } from 'devextreme-react/radio-group';
-import { SelectBox } from 'devextreme-react/select-box';
-
-import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
-import service from './data.ts';
-
-const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' };
-const applyChangesModes = ['instantly', 'onDemand'];
-const layouts = service.getLayouts();
-
-const App = () => {
-  const [applyChangesMode, setApplyChangesMode] = useState<ApplyChangesMode>('instantly');
-  const [layout, setLayout] = useState<FieldChooserLayout>(0);
-  const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null);
-
-  const onApplyChanges = useCallback(() => fieldChooserRef.current?.instance().applyChanges(), []);
-  const onCancelChanges = useCallback(() => fieldChooserRef.current?.instance().cancelChanges(), []);
-
-  return (
-    <>
-      <PivotGrid
-        dataSource={dataSource}
-        allowSortingBySummary={true}
-        allowFiltering={true}
-        allowSorting={true}
-        showBorders={true}
-      >
-        <FieldChooser enabled={false} />
-      </PivotGrid>
-
-      <div className="container">
-        <PivotGridFieldChooser
-          ref={fieldChooserRef}
-          dataSource={dataSource}
-          width={400}
-          height={400}
-          layout={layout}
-          applyChangesMode={applyChangesMode}
-        >
-          <Texts
-            allFields="All"
-            columnFields="Columns"
-            dataFields="Data"
-            rowFields="Rows"
-            filterFields="Filter"
-          ></Texts>
-        </PivotGridFieldChooser>
-        { applyChangesMode === 'onDemand'
-          && <div className="bottom-bar">
-            <Button
-              text="Apply"
-              type="default"
-              onClick={onApplyChanges}
-            ></Button>
-            <Button
-              text="Cancel"
-              onClick={onCancelChanges}
-            ></Button>
-          </div>
-        }
-
-        <div className="options">
-          <div className="caption">Options</div>
-          <div className="option">
-            <span>Choose layout:</span>
-            <RadioGroup
-              items={layouts}
-              value={layout}
-              className="option-editor"
-              layout="vertical"
-              valueExpr="key"
-              displayExpr="name"
-              onValueChange={setLayout}>
-            </RadioGroup>
-          </div>
-          <div className="option">
-            <span>Apply Changes Mode:</span>
-            <SelectBox
-              className="option-editor"
-              items={applyChangesModes}
-              inputAttr={applyChangesModeLabel}
-              width={180}
-              value={applyChangesMode}
-              onValueChange={setApplyChangesMode}>
-            </SelectBox>
-          </div>
-        </div>
-
-      </div>
-
-    </>
-  );
-};
-
-const dataSource = new PivotGridDataSource({
-  fields: [{
-    caption: 'Region',
-    width: 120,
-    dataField: 'region',
-    area: 'row',
-    headerFilter: {
-      search: {
-        enabled: true,
-      },
-    },
-  }, {
-    caption: 'City',
-    dataField: 'city',
-    width: 150,
-    area: 'row',
-    headerFilter: {
-      search: {
-        enabled: true,
-      },
-    },
-    selector(data: { city: any; country: any; }) {
-      return `${data.city} (${data.country})`;
-    },
-  }, {
-    dataField: 'date',
-    dataType: 'date',
-    area: 'column',
-  }, {
-    caption: 'Sales',
-    dataField: 'amount',
-    dataType: 'number',
-    summaryType: 'sum',
-    format: 'currency',
-    area: 'data',
-  }],
-  store: service.getSales(),
-});
-
-export default App;
+import React, { useCallback, useRef, useState } from 'react';
+
+import { Button } from 'devextreme-react/button';
+import type { ApplyChangesMode } from 'devextreme-react/common/grids';
+import type { FieldChooserLayout } from 'devextreme-react/common';
+import { PivotGrid, FieldChooser } from 'devextreme-react/pivot-grid';
+import { PivotGridFieldChooser, Texts } from 'devextreme-react/pivot-grid-field-chooser';
+import type { PivotGridFieldChooserRef } from 'devextreme-react/pivot-grid-field-chooser';
+import { RadioGroup } from 'devextreme-react/radio-group';
+import { SelectBox } from 'devextreme-react/select-box';
+
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+
+import service from './data.ts';
+
+const applyChangesModeLabel = { 'aria-label': 'Apply Changes Mode' };
+const applyChangesModes = ['instantly', 'onDemand'];
+const layouts = service.getLayouts();
+
+const App = () => {
+  const [applyChangesMode, setApplyChangesMode] = useState<ApplyChangesMode>('instantly');
+  const [layout, setLayout] = useState<FieldChooserLayout>(0);
+  const fieldChooserRef = useRef<PivotGridFieldChooserRef>(null);
+
+  const onApplyChanges = useCallback(() => fieldChooserRef.current?.instance().applyChanges(), []);
+  const onCancelChanges = useCallback(() => fieldChooserRef.current?.instance().cancelChanges(), []);
+
+  return (
+    <>
+      <PivotGrid
+        dataSource={dataSource}
+        allowSortingBySummary={true}
+        allowFiltering={true}
+        allowSorting={true}
+        showBorders={true}
+      >
+        <FieldChooser enabled={false} />
+      </PivotGrid>
+
+      <div className="container">
+        <PivotGridFieldChooser
+          ref={fieldChooserRef}
+          dataSource={dataSource}
+          width={400}
+          height={400}
+          layout={layout}
+          applyChangesMode={applyChangesMode}
+        >
+          <Texts
+            allFields="All"
+            columnFields="Columns"
+            dataFields="Data"
+            rowFields="Rows"
+            filterFields="Filter"
+          ></Texts>
+        </PivotGridFieldChooser>
+        { applyChangesMode === 'onDemand'
+          && <div className="bottom-bar">
+            <Button
+              text="Apply"
+              type="default"
+              onClick={onApplyChanges}
+            ></Button>
+            <Button
+              text="Cancel"
+              onClick={onCancelChanges}
+            ></Button>
+          </div>
+        }
+
+        <div className="options">
+          <div className="caption">Options</div>
+          <div className="option">
+            <span>Choose layout:</span>
+            <RadioGroup
+              items={layouts}
+              value={layout}
+              className="option-editor"
+              layout="vertical"
+              valueExpr="key"
+              displayExpr="name"
+              onValueChange={setLayout}>
+            </RadioGroup>
+          </div>
+          <div className="option">
+            <span>Apply Changes Mode:</span>
+            <SelectBox
+              className="option-editor"
+              items={applyChangesModes}
+              inputAttr={applyChangesModeLabel}
+              width={180}
+              value={applyChangesMode}
+              onValueChange={setApplyChangesMode}>
+            </SelectBox>
+          </div>
+        </div>
+
+      </div>
+
+    </>
+  );
+};
+
+const dataSource = new PivotGridDataSource({
+  fields: [{
+    caption: 'Region',
+    width: 120,
+    dataField: 'region',
+    area: 'row',
+    headerFilter: {
+      search: {
+        enabled: true,
+      },
+    },
+  }, {
+    caption: 'City',
+    dataField: 'city',
+    width: 150,
+    area: 'row',
+    headerFilter: {
+      search: {
+        enabled: true,
+      },
+    },
+    selector(data: { city: any; country: any; }) {
+      return `${data.city} (${data.country})`;
+    },
+  }, {
+    dataField: 'date',
+    dataType: 'date',
+    area: 'column',
+  }, {
+    caption: 'Sales',
+    dataField: 'amount',
+    dataType: 'number',
+    summaryType: 'sum',
+    format: 'currency',
+    area: 'data',
+  }],
+  store: service.getSales(),
+});
+
+export default App;
diff --git a/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx b/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
index a94d15f0d228..ae59a57e295b 100644
--- a/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
+++ b/apps/demos/Demos/Scheduler/ContextMenu/React/itemTemplate.tsx
@@ -1,21 +1,21 @@
-import React, { useMemo } from 'react';
-
-type ItemTemplateProps = {
-  data: {
-    color: string;
-    text: string;
-  }
-};
-
-const ItemTemplate = (props: ItemTemplateProps) => {
-  const badgeStyle = useMemo(() => ({ backgroundColor: props.data.color }), [props.data.color]);
-
-  return (
-    <div>
-      {props.data.color && <div className="item-badge" style={badgeStyle} />}
-      {props.data.text}
-    </div>
-  );
-};
-
-export default ItemTemplate;
+import React, { useMemo } from 'react';
+
+type ItemTemplateProps = {
+  data: {
+    color: string;
+    text: string;
+  }
+};
+
+const ItemTemplate = (props: ItemTemplateProps) => {
+  const badgeStyle = useMemo(() => ({ backgroundColor: props.data.color }), [props.data.color]);
+
+  return (
+    <div>
+      {props.data.color && <div className="item-badge" style={badgeStyle} />}
+      {props.data.text}
+    </div>
+  );
+};
+
+export default ItemTemplate;
diff --git a/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx b/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx
index adca43bc196f..2099e1462dac 100644
--- a/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/HiddenDays/React/App.tsx
@@ -1,84 +1,84 @@
-import React, { useCallback, useMemo, useState } from 'react';
-
-import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
-import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
-import { ArrayStore } from 'devextreme-react/common/data';
-import { data } from './data.ts';
-
-const dataSource = new ArrayStore({
-  key: 'id',
-  data,
-});
-
-const allDays: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 3, 4, 5, 6];
-const dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-const defaultVisible: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 4, 6];
-const views: SchedulerTypes.Properties['views'] = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
-const currentDate = new Date(2021, 3, 26);
-const VALIDATION_MESSAGE = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
-const DayCheckBox = ({
-  dayIndex, label, value, onDayToggle,
-}: {
-  dayIndex: SchedulerTypes.DayOfWeek;
-  label: string;
-  value: boolean;
-  onDayToggle: (dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => void;
-}) => {
-  const onValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
-    onDayToggle(dayIndex, e);
-  }, [dayIndex, onDayToggle]);
-
-  return <CheckBox text={label} value={value} onValueChanged={onValueChanged} />;
-};
-
-const App = () => {
-  const [visibleDays, setVisibleDays] = useState<SchedulerTypes.DayOfWeek[]>(defaultVisible);
-
-  const isInvalid = visibleDays.length === 0;
-
-  const hiddenWeekDays = useMemo(
-    () => allDays.filter((d) => !visibleDays.includes(d)),
-    [visibleDays],
-  );
-
-  const onDayToggle = useCallback((dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => {
-    setVisibleDays((prev) => (e.value
-      ? [...prev, dayIndex]
-      : prev.filter((d) => d !== dayIndex)));
-  }, []);
-
-  return (
-    <div className={`hidden-days-demo${isInvalid ? ' is-invalid' : ''}`}>
-      <div className="scheduler-container">
-        <Scheduler
-          timeZone="America/Los_Angeles"
-          dataSource={dataSource}
-          views={views}
-          hiddenWeekDays={hiddenWeekDays}
-          defaultCurrentView="week"
-          defaultCurrentDate={currentDate}
-          startDayHour={9}
-          height={730}
-        />
-      </div>
-      <div className="options">
-        <div className="caption">Visible Week Days</div>
-        {dayLabels.map((label, idx) => (
-          <div className="option" key={label}>
-            <DayCheckBox
-              dayIndex={idx as SchedulerTypes.DayOfWeek}
-              label={label}
-              value={visibleDays.includes(idx as SchedulerTypes.DayOfWeek)}
-              onDayToggle={onDayToggle}
-            />
-          </div>
-        ))}
-        <div className="validation-message">
-          {VALIDATION_MESSAGE}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default App;
+import React, { useCallback, useMemo, useState } from 'react';
+
+import Scheduler, { type SchedulerTypes } from 'devextreme-react/scheduler';
+import CheckBox, { type CheckBoxTypes } from 'devextreme-react/check-box';
+import { ArrayStore } from 'devextreme-react/common/data';
+import { data } from './data.ts';
+
+const dataSource = new ArrayStore({
+  key: 'id',
+  data,
+});
+
+const allDays: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 3, 4, 5, 6];
+const dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const defaultVisible: SchedulerTypes.DayOfWeek[] = [0, 1, 2, 4, 6];
+const views: SchedulerTypes.Properties['views'] = ['week', 'workWeek', 'month', 'timelineWeek', 'agenda'];
+const currentDate = new Date(2021, 3, 26);
+const VALIDATION_MESSAGE = 'The hiddenWeekDays option cannot hide all days of the week. At least one day must remain visible.';
+const DayCheckBox = ({
+  dayIndex, label, value, onDayToggle,
+}: {
+  dayIndex: SchedulerTypes.DayOfWeek;
+  label: string;
+  value: boolean;
+  onDayToggle: (dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => void;
+}) => {
+  const onValueChanged = useCallback((e: CheckBoxTypes.ValueChangedEvent) => {
+    onDayToggle(dayIndex, e);
+  }, [dayIndex, onDayToggle]);
+
+  return <CheckBox text={label} value={value} onValueChanged={onValueChanged} />;
+};
+
+const App = () => {
+  const [visibleDays, setVisibleDays] = useState<SchedulerTypes.DayOfWeek[]>(defaultVisible);
+
+  const isInvalid = visibleDays.length === 0;
+
+  const hiddenWeekDays = useMemo(
+    () => allDays.filter((d) => !visibleDays.includes(d)),
+    [visibleDays],
+  );
+
+  const onDayToggle = useCallback((dayIndex: SchedulerTypes.DayOfWeek, e: CheckBoxTypes.ValueChangedEvent) => {
+    setVisibleDays((prev) => (e.value
+      ? [...prev, dayIndex]
+      : prev.filter((d) => d !== dayIndex)));
+  }, []);
+
+  return (
+    <div className={`hidden-days-demo${isInvalid ? ' is-invalid' : ''}`}>
+      <div className="scheduler-container">
+        <Scheduler
+          timeZone="America/Los_Angeles"
+          dataSource={dataSource}
+          views={views}
+          hiddenWeekDays={hiddenWeekDays}
+          defaultCurrentView="week"
+          defaultCurrentDate={currentDate}
+          startDayHour={9}
+          height={730}
+        />
+      </div>
+      <div className="options">
+        <div className="caption">Visible Week Days</div>
+        {dayLabels.map((label, idx) => (
+          <div className="option" key={label}>
+            <DayCheckBox
+              dayIndex={idx as SchedulerTypes.DayOfWeek}
+              label={label}
+              value={visibleDays.includes(idx as SchedulerTypes.DayOfWeek)}
+              onDayToggle={onDayToggle}
+            />
+          </div>
+        ))}
+        <div className="validation-message">
+          {VALIDATION_MESSAGE}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;