PivotGrid: fix ts issues in demos in strict mode (#32053)

apps/demos/Demos/PivotGrid/ChartIntegration/React/App.tsx

@@ -1,25 +1,21 @@
 import React, { useEffect, useRef } from 'react';
 
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-
 import Chart, {
   AdaptiveLayout,
   CommonSeriesSettings,
   Size,
   Tooltip,
-  ChartRef,
 } from 'devextreme-react/chart';
-
-import PivotGrid, {
-  FieldChooser,
-  PivotGridRef,
-} from 'devextreme-react/pivot-grid';
+import type { ChartRef, ChartTypes } from 'devextreme-react/chart';
+import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
+import type { PivotGridRef } from 'devextreme-react/pivot-grid';
 
 import { sales } from './data.ts';
 
-const customizeTooltip = (args) => {
+const customizeTooltip = (args: ChartTypes.CommonPointInfo) => {
   const valueText = (args.seriesName.indexOf('Total') !== -1)
-    ? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue)
+    ? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(args.originalValue as number)
     : args.originalValue;
 
   return {
@@ -33,14 +29,14 @@ const App = () => {
   const pivotGridRef = useRef<PivotGridRef>(null);
 
   useEffect(() => {
-    pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
+    pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
       dataFieldsDisplayMode: 'splitPanes',
       alternateDataFields: false,
     });
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Chart ref={chartRef}>
         <Size height={320} />
         <Tooltip enabled={true} customizeTooltip={customizeTooltip} />
@@ -62,7 +58,7 @@ const App = () => {
       >
         <FieldChooser enabled={true} height={400} />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 };
 

apps/demos/Demos/PivotGrid/ChartIntegration/ReactJs/App.js

@@ -21,13 +21,13 @@ const App = () => {
   const chartRef = useRef(null);
   const pivotGridRef = useRef(null);
   useEffect(() => {
-    pivotGridRef.current.instance().bindChart(chartRef.current.instance(), {
+    pivotGridRef.current?.instance().bindChart(chartRef.current?.instance(), {
       dataFieldsDisplayMode: 'splitPanes',
       alternateDataFields: false,
     });
   }, []);
   return (
-    <React.Fragment>
+    <>
       <Chart ref={chartRef}>
         <Size height={320} />
         <Tooltip
@@ -55,7 +55,7 @@ const App = () => {
           height={400}
         />
       </PivotGrid>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({

apps/demos/Demos/PivotGrid/Customization/React/App.tsx

@@ -1,16 +1,21 @@
 import React, { useState } from 'react';
+
 import PivotGrid, { FieldChooser } from 'devextreme-react/pivot-grid';
 import CheckBox from 'devextreme-react/check-box';
+import type { CheckBoxTypes } from 'devextreme-react/check-box';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+
 import { sales } from './data.ts';
 
+type CheckBoxValue = CheckBoxTypes.Properties['value'];
+
 const App = () => {
-  const [showTotalsPrior, setShowTotalsPrior] = useState(false);
-  const [dataFieldArea, setDataFieldArea] = useState(false);
-  const [rowHeaderLayout, setRowHeaderLayout] = useState(true);
+  const [showTotalsPrior, setShowTotalsPrior] = useState<CheckBoxValue>(false);
+  const [dataFieldArea, setDataFieldArea] = useState<CheckBoxValue>(false);
+  const [rowHeaderLayout, setRowHeaderLayout] = useState<CheckBoxValue>(true);
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         showTotalsPrior={showTotalsPrior ? 'both' : 'none'}
@@ -52,7 +57,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 

apps/demos/Demos/PivotGrid/Customization/ReactJs/App.js

@@ -9,7 +9,7 @@ const App = () => {
   const [dataFieldArea, setDataFieldArea] = useState(false);
   const [rowHeaderLayout, setRowHeaderLayout] = useState(true);
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         showTotalsPrior={showTotalsPrior ? 'both' : 'none'}
@@ -51,7 +51,7 @@ const App = () => {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({

apps/demos/Demos/PivotGrid/DrillDown/React/App.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useRef, useState } from 'react';
+
 import {
   PivotGrid,
   FieldChooser,
   type PivotGridTypes,
 } from 'devextreme-react/pivot-grid';
-import { DataGrid, Column, DataGridRef } from 'devextreme-react/data-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';
@@ -13,15 +15,15 @@ import { sales } from './data.ts';
 
 const App = () => {
   const [popupTitle, setPopupTitle] = useState('');
-  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource>(null);
+  const [drillDownDataSource, setDrillDownDataSource] = useState<DataSource | null>(null);
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef<DataGridRef>(null);
 
   const onCellClick = useCallback((e: PivotGridTypes.CellClickEvent) => {
-    if (e.area === 'data') {
+    if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
-      const rowPathLength = e.cell.rowPath.length;
-      const rowPathName = e.cell.rowPath[rowPathLength - 1];
+      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));
@@ -30,7 +32,7 @@ const App = () => {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         allowSortingBySummary={true}
@@ -49,7 +51,7 @@ const App = () => {
         height={400}
         title={popupTitle}
         onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current.instance().updateDimensions()}
+        onShown={() => dataGridRef.current?.instance().updateDimensions()}
         showCloseButton={true}
       >
         <DataGrid
@@ -64,7 +66,7 @@ const App = () => {
           <Column dataField="date" dataType="date" />
         </DataGrid>
       </Popup>
-    </React.Fragment>
+    </>
   );
 };
 

apps/demos/Demos/PivotGrid/DrillDown/ReactJs/App.js

@@ -11,17 +11,17 @@ const App = () => {
   const [popupVisible, setPopupVisible] = useState(false);
   const dataGridRef = useRef(null);
   const onCellClick = useCallback((e) => {
-    if (e.area === 'data') {
+    if (e.area === 'data' && e.cell) {
       const pivotGridDataSource = e.component.getDataSource();
-      const rowPathLength = e.cell.rowPath.length;
-      const rowPathName = e.cell.rowPath[rowPathLength - 1];
+      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 (
-    <React.Fragment>
+    <>
       <PivotGrid
         id="sales"
         allowSortingBySummary={true}
@@ -40,7 +40,7 @@ const App = () => {
         height={400}
         title={popupTitle}
         onHiding={() => setPopupVisible(false)}
-        onShown={() => dataGridRef.current.instance().updateDimensions()}
+        onShown={() => dataGridRef.current?.instance().updateDimensions()}
         showCloseButton={true}
       >
         <DataGrid
@@ -62,7 +62,7 @@ const App = () => {
           />
         </DataGrid>
       </Popup>
-    </React.Fragment>
+    </>
   );
 };
 const dataSource = new PivotGridDataSource({

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx

@@ -11,6 +11,8 @@ import { saveAs } from 'file-saver-es';
 // Our demo infrastructure requires us to use 'file-saver-es'.
 // We recommend that you use the official 'file-saver' package in your applications.
 import { exportPivotGrid } from 'devextreme/excel_exporter';
+import type { PivotGridCell, ExcelExportPivotGridProps } from 'devextreme/excel_exporter';
+
 import { sales } from './data.ts';
 
 interface ConditionalAppearance {
@@ -19,6 +21,8 @@ interface ConditionalAppearance {
   bold?: boolean,
 }
 
+type CustomizeCellOptions = Parameters<Required<ExcelExportPivotGridProps>['customizeCell']>[0];
+
 const dataSource = new PivotGridDataSource({
   fields: [{
     caption: 'Region',
@@ -45,9 +49,13 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 
-const isDataCell = (cell) => cell.rowType === 'D' && cell.columnType === 'D';
+const isDataCell = (cell: PivotGridCell) => cell.rowType === 'D' && cell.columnType === 'D';
 
-const isTotalCell = (cell) => (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');
+const isTotalCell = (cell: PivotGridCell) => (
+  cell.type === 'T' || cell.type === 'GT'
+  || cell.rowType === 'T' || cell.rowType === 'GT'
+  || cell.columnType === 'T' || cell.columnType === 'GT'
+);
 
 const getExcelCellFormat = ({ fill, font, bold }: ConditionalAppearance) =>
   ({
@@ -62,7 +70,7 @@ const getCssStyles = ({ fill, font, bold }: ConditionalAppearance) =>
     'font-weight': bold ? 'bold' : undefined,
   });
 
-const getConditionalAppearance = (cell): ConditionalAppearance => {
+const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance => {
   if (isTotalCell(cell)) {
     return { fill: 'F2F2F2', font: '3F3F3F', bold: true };
   }
@@ -83,19 +91,21 @@ const onExporting = (e: PivotGridTypes.ExportingEvent) => {
   exportPivotGrid({
     component: e.component,
     worksheet,
-    customizeCell: ({ pivotCell, excelCell }) => {
-      if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
-        const appearance = getConditionalAppearance(pivotCell);
-        Object.assign(excelCell, getExcelCellFormat(appearance));
-      }
+    customizeCell: ({ pivotCell, excelCell }: CustomizeCellOptions) => {
+      if (pivotCell && excelCell) {
+        if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
+          const appearance = getConditionalAppearance(pivotCell);
+          Object.assign(excelCell, getExcelCellFormat(appearance));
+        }
 
-      const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
-      excelCell.border = {
-        bottom: borderStyle,
-        left: borderStyle,
-        right: borderStyle,
-        top: borderStyle,
-      };
+        const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
+        excelCell.border = {
+          bottom: borderStyle,
+          left: borderStyle,
+          right: borderStyle,
+          top: borderStyle,
+        };
+      }
     },
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer) => {

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js

@@ -75,17 +75,19 @@ const onExporting = (e) => {
     component: e.component,
     worksheet,
     customizeCell: ({ pivotCell, excelCell }) => {
-      if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
-        const appearance = getConditionalAppearance(pivotCell);
-        Object.assign(excelCell, getExcelCellFormat(appearance));
+      if (pivotCell && excelCell) {
+        if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
+          const appearance = getConditionalAppearance(pivotCell);
+          Object.assign(excelCell, getExcelCellFormat(appearance));
+        }
+        const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
+        excelCell.border = {
+          bottom: borderStyle,
+          left: borderStyle,
+          right: borderStyle,
+          top: borderStyle,
+        };
       }
-      const borderStyle = { style: 'thin', color: { argb: 'FF7E7E7E' } };
-      excelCell.border = {
-        bottom: borderStyle,
-        left: borderStyle,
-        right: borderStyle,
-        top: borderStyle,
-      };
     },
   }).then(() => {
     workbook.xlsx.writeBuffer().then((buffer) => {