From c0be72d5bd2c6eb679401701a6fda1179d2c786f Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 9 Jan 2026 10:38:52 +0200 Subject: [PATCH 01/22] fix ts in FloatingActionButton --- .../Overview/React/App.tsx | 24 +++++++++---------- .../Overview/React/data.ts | 20 +++++++++++++++- 2 files changed, 31 insertions(+), 13 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index d17f9189ee5c..01e9211f4beb 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -2,19 +2,19 @@ import React, { useCallback, useRef, useState } from 'react'; import config from 'devextreme/core/config'; import repaintFloatingActionButton from 'devextreme/ui/speed_dial_action/repaint_floating_action_button'; import DataGrid, { - Column, Editing, Lookup, Texts, Selection, type DataGridTypes, + Column, Editing, Lookup, Texts, Selection, } from 'devextreme-react/data-grid'; import { SpeedDialAction } from 'devextreme-react/speed-dial-action'; import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box'; +import type { DataGridTypes, DataGridRef } from 'devextreme-react/data-grid'; import { - employees, states, directions, directionLabel, + employees, states, directions, optionDirections, directionLabel, } from './data.ts'; - -const optionDirections = ['auto', 'up', 'down']; +import type { DirectionKey } from './data.ts'; const App = () => { const [selectedRowIndex, setSelectedRowIndex] = useState(-1); - const gridRef = useRef(null); + const gridRef = useRef(null); const selectedChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => { setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0])); @@ -22,25 +22,25 @@ const App = () => { const directionChanged = useCallback((e: SelectBoxTypes.SelectionChangedEvent) => { config({ - floatingActionButtonConfig: directions[e.selectedItem], + floatingActionButtonConfig: directions[e.selectedItem as DirectionKey], }); repaintFloatingActionButton(); }, []); const editRow = useCallback(() => { - gridRef.current.instance().editRow(selectedRowIndex); - gridRef.current.instance().deselectAll(); + gridRef?.current?.instance()?.editRow(selectedRowIndex); + gridRef?.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const deleteRow = useCallback(() => { - gridRef.current.instance().deleteRow(selectedRowIndex); - gridRef.current.instance().deselectAll(); + gridRef?.current?.instance()?.deleteRow(selectedRowIndex); + gridRef?.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const addRow = useCallback(() => { - gridRef.current.instance().addRow(); - gridRef.current.instance().deselectAll(); + gridRef?.current?.instance()?.addRow(); + gridRef?.current?.instance()?.deselectAll(); }, [gridRef]); return ( diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts b/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts index bb415ae7953b..6c92ab90db07 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts @@ -1,4 +1,22 @@ -export const directions = { +import type { FloatingActionButtonDirection, PositionAlignment } from 'devextreme/common'; + +type DirectionValue = { + icon: string; + shading: boolean; + direction?: FloatingActionButtonDirection; + position: { + of: string; + my: PositionAlignment; + at: PositionAlignment; + offset: string; + }; +}; + +export const optionDirections = ['auto', 'up', 'down'] as const; + +export type DirectionKey = typeof optionDirections[number]; + +export const directions: Record = { auto: { icon: 'rowfield', shading: true, From 1b21217464f2cc246930243e75fed0d84b8e2b7d Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 9 Jan 2026 10:41:16 +0200 Subject: [PATCH 02/22] convert-to-js FloatingActionButton --- .../FloatingActionButton/Overview/ReactJs/App.js | 15 +++++++-------- .../FloatingActionButton/Overview/ReactJs/data.js | 1 + 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js index 804d66b8d647..d4abaa5df9ca 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js +++ b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js @@ -7,10 +7,9 @@ import DataGrid, { import { SpeedDialAction } from 'devextreme-react/speed-dial-action'; import { SelectBox } from 'devextreme-react/select-box'; import { - employees, states, directions, directionLabel, + employees, states, directions, optionDirections, directionLabel, } from './data.js'; -const optionDirections = ['auto', 'up', 'down']; const App = () => { const [selectedRowIndex, setSelectedRowIndex] = useState(-1); const gridRef = useRef(null); @@ -27,16 +26,16 @@ const App = () => { repaintFloatingActionButton(); }, []); const editRow = useCallback(() => { - gridRef.current.instance().editRow(selectedRowIndex); - gridRef.current.instance().deselectAll(); + gridRef?.current?.instance()?.editRow(selectedRowIndex); + gridRef?.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const deleteRow = useCallback(() => { - gridRef.current.instance().deleteRow(selectedRowIndex); - gridRef.current.instance().deselectAll(); + gridRef?.current?.instance()?.deleteRow(selectedRowIndex); + gridRef?.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const addRow = useCallback(() => { - gridRef.current.instance().addRow(); - gridRef.current.instance().deselectAll(); + gridRef?.current?.instance()?.addRow(); + gridRef?.current?.instance()?.deselectAll(); }, [gridRef]); return (
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/data.js b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/data.js index d3c036a6ddb5..5b8b7564465c 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/data.js +++ b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/data.js @@ -1,3 +1,4 @@ +export const optionDirections = ['auto', 'up', 'down']; export const directions = { auto: { icon: 'rowfield', From f0bb3921d779274cfb51c89297b4682a03cdda47 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 9 Jan 2026 16:29:50 +0200 Subject: [PATCH 03/22] fix ts in VectorMap --- .../VectorMap/BubbleMarkers/React/App.tsx | 4 +-- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../ColorsCustomization/React/App.tsx | 13 +++++---- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../VectorMap/CustomMapData/React/App.tsx | 4 +-- .../VectorMap/CustomProjection/React/data.ts | 9 +++++- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../VectorMap/DynamicViewport/React/App.tsx | 7 +++-- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../Demos/VectorMap/FloorPlan/React/App.tsx | 6 ++-- .../Demos/VectorMap/Legend/React/App.tsx | 3 +- .../Demos/VectorMap/Legend/React/data.ts | 2 ++ .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../Demos/VectorMap/Overview/React/App.tsx | 4 ++- .../Overview/React/PieChartComponent.tsx | 2 +- .../Overview/React/TooltipTemplate.tsx | 16 +++++++---- .../Demos/VectorMap/Overview/React/data.ts | 11 +++++++- .../React/devextreme-vectormap-data.d.ts | 28 +++++++++++++++++++ .../Demos/VectorMap/Palette/React/App.tsx | 6 ++-- .../Demos/VectorMap/Palette/React/data.ts | 2 ++ .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../Demos/VectorMap/PieMarkers/React/App.tsx | 2 +- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../TooltipsCustomization/React/App.tsx | 4 ++- .../React/PieChartComponent.tsx | 11 +++++++- .../React/TooltipTemplate.tsx | 14 ++++++---- .../TooltipsCustomization/React/data.ts | 11 +++++++- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ .../ZoomingAndCentering/React/App.tsx | 10 +++---- .../React/devextreme-vectormap-data.d.ts | 27 ++++++++++++++++++ apps/demos/tsconfig.react-check.json | 6 ++-- 32 files changed, 398 insertions(+), 47 deletions(-) create mode 100644 apps/demos/Demos/VectorMap/BubbleMarkers/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/ColorsCustomization/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/CustomAnnotations/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/CustomProjection/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/DynamicViewport/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/Legend/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/Overview/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/Palette/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/PieMarkers/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/TooltipsCustomization/React/devextreme-vectormap-data.d.ts create mode 100644 apps/demos/Demos/VectorMap/ZoomingAndCentering/React/devextreme-vectormap-data.d.ts diff --git a/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx b/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx index 392fc5ecbc00..eb9c249b27bd 100644 --- a/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx +++ b/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx @@ -18,10 +18,10 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { if (arg.layer.type === 'marker') { return { text: arg.attribute('tooltip') }; } - return null; + return {}; }; -const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; +const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)]; const customizeItems = (items: any[]) => items.reverse(); diff --git a/apps/demos/Demos/VectorMap/BubbleMarkers/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/BubbleMarkers/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/BubbleMarkers/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx index ef1154c0d5bd..fe6cf13683a8 100644 --- a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx @@ -9,13 +9,15 @@ import VectorMap, { import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; +import type { MapLayerElement } from 'devextreme/viz/vector_map'; import { countries } from './data.ts'; const bounds = [-180, 85, 180, -60]; const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { - const country = countries[element.attribute('name')]; + const name = element.attribute('name') as keyof typeof countries; + const country = countries[name]; if (country) { element.applySettings({ color: country.color, @@ -26,14 +28,15 @@ const customizeLayer: ILayerProps['customize'] = (elements) => { }); }; -const clickHandler = ({ target }) => { - if (target && countries[target.attribute('name')]) { +const clickHandler = ({ target }: { target: MapLayerElement }) => { + const name = target?.attribute('name') as keyof typeof countries; + if (target && countries[name]) { target.selected(!target.selected()); } }; const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => { - const name = attribute('name'); + const name = attribute('name') as keyof typeof countries; const country = countries[name]; if (country) { return { @@ -41,7 +44,7 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => { color: country.color, }; } - return null; + return {}; }; export default function App() { diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/ColorsCustomization/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/ColorsCustomization/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/CustomAnnotations/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/CustomAnnotations/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..e5de5ff1844d --- /dev/null +++ b/apps/demos/Demos/VectorMap/CustomAnnotations/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/usa.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const usa: FeatureCollection; + export { usa }; + export default usa; +} diff --git a/apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx b/apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx index ba49fed5555c..e402bc8c59ee 100644 --- a/apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx +++ b/apps/demos/Demos/VectorMap/CustomMapData/React/App.tsx @@ -9,8 +9,8 @@ import type { ILayerProps } from 'devextreme-react/vector-map'; import { pangaeaBorders, pangaeaContinents } from './data.ts'; const projection = { - to: ([l, lt]) => [l / 100, lt / 100], - from: ([x, y]) => [x * 100, y * 100], + to: ([l, lt]: [number, number]) => [l / 100, lt / 100], + from: ([x, y]: [number, number]) => [x * 100, y * 100], }; const customizeLayer: ILayerProps['customize'] = (elements) => { diff --git a/apps/demos/Demos/VectorMap/CustomProjection/React/data.ts b/apps/demos/Demos/VectorMap/CustomProjection/React/data.ts index d1c11419a29d..c2c942c4c838 100644 --- a/apps/demos/Demos/VectorMap/CustomProjection/React/data.ts +++ b/apps/demos/Demos/VectorMap/CustomProjection/React/data.ts @@ -1,6 +1,13 @@ +interface LineFeature { + geometry: { + type: string; + coordinates: number[][]; + }; +} + export const coordLinesData = { type: 'FeatureCollection', - features: [], + features: [] as LineFeature[], }; // add meridians diff --git a/apps/demos/Demos/VectorMap/CustomProjection/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/CustomProjection/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/CustomProjection/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx index 87141ae7d8cf..8c35e71addc1 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx +++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx @@ -1,9 +1,10 @@ import React, { useCallback, useRef, useState } from 'react'; -import VectorMap, { Layer, ControlBar, type VectorMapTypes } from 'devextreme-react/vector-map'; +import VectorMap, { Layer, ControlBar } from 'devextreme-react/vector-map'; import TextBox from 'devextreme-react/text-box'; import SelectBox from 'devextreme-react/select-box'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import Switch from 'devextreme-react/switch'; +import type { VectorMapTypes, VectorMapRef } from 'devextreme-react/vector-map'; import { viewportCoordinates, centerLabel, zoomLabel, continentLabel, } from './data.ts'; @@ -16,11 +17,11 @@ const App = () => { const [center, setCenter] = useState('0.000, 46.036'); const [panVisible, setPanVisible] = useState(true); const [zoomVisible, setZoomVisible] = useState(true); - const mapRef = useRef(null); + const mapRef = useRef(null); const continentChanged = useCallback(({ value }) => { setCoordinates(value); - mapRef.current.instance().viewport(value); + mapRef?.current?.instance().viewport(value); }, [setCoordinates]); const zoomFactorChanged = useCallback((e: VectorMapTypes.ZoomFactorChangedEvent) => { diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/DynamicViewport/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/FloorPlan/React/App.tsx b/apps/demos/Demos/VectorMap/FloorPlan/React/App.tsx index bd75449e3ff5..b603b5cea2fc 100644 --- a/apps/demos/Demos/VectorMap/FloorPlan/React/App.tsx +++ b/apps/demos/Demos/VectorMap/FloorPlan/React/App.tsx @@ -8,15 +8,15 @@ import type { ITooltipProps } from 'devextreme-react/vector-map'; import { roomsData, buildingData } from './data.ts'; const projection = { - to: ([l, lt]) => [l / 100, lt / 100], - from: ([x, y]) => [x * 100, y * 100], + to: ([l, lt]: [number, number]) => [l / 100, lt / 100], + from: ([x, y]: [number, number]) => [x * 100, y * 100], }; const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { if (arg.layer.name === 'rooms') { return { text: `Square: ${arg.attribute('square')} ft²` }; } - return null; + return {}; }; export default function App() { diff --git a/apps/demos/Demos/VectorMap/Legend/React/App.tsx b/apps/demos/Demos/VectorMap/Legend/React/App.tsx index 3dbf67df3945..a775a6269559 100644 --- a/apps/demos/Demos/VectorMap/Legend/React/App.tsx +++ b/apps/demos/Demos/VectorMap/Legend/React/App.tsx @@ -9,6 +9,7 @@ import VectorMap, { import type { ILayerProps, ILegendProps, ITooltipProps } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { populations, markers } from './data.ts'; +import type { PopulationKey } from './data.ts'; const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; const sizeGroups = [0, 8000, 10000, 50000]; @@ -34,7 +35,7 @@ const customizeItems: ILegendProps['customizeItems'] = (items) => items.reverse( const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { - const name = element.attribute('name'); + const name = element.attribute('name') as PopulationKey; const population = populations[name]; if (population) { element.attribute('population', population); diff --git a/apps/demos/Demos/VectorMap/Legend/React/data.ts b/apps/demos/Demos/VectorMap/Legend/React/data.ts index 261b08e55d55..5d02b26493f5 100644 --- a/apps/demos/Demos/VectorMap/Legend/React/data.ts +++ b/apps/demos/Demos/VectorMap/Legend/React/data.ts @@ -38,6 +38,8 @@ export const populations = { Uzbekistan: 0.43, }; +export type PopulationKey = keyof typeof populations; + export const markers = { type: 'FeatureCollection', features: [ diff --git a/apps/demos/Demos/VectorMap/Legend/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/Legend/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/Legend/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/Overview/React/App.tsx b/apps/demos/Demos/VectorMap/Overview/React/App.tsx index 2a9587e8a014..142f1d142d0d 100644 --- a/apps/demos/Demos/VectorMap/Overview/React/App.tsx +++ b/apps/demos/Demos/VectorMap/Overview/React/App.tsx @@ -14,13 +14,15 @@ import type { ILegendProps, ILayerProps } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { countriesGDP } from './data.ts'; import TooltipTemplate from './TooltipTemplate.tsx'; +import type { CountriesGDPKey } from './data.ts'; const colorGroups = [0, 10000, 50000, 100000, 500000, 1000000, 10000000, 50000000]; const mapBounds = [-180, 85, 180, -60]; const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { - const countryGDPData = countriesGDP[element.attribute('name')]; + const name = element.attribute('name') as CountriesGDPKey; + const countryGDPData = countriesGDP[name]; element.attribute('total', (countryGDPData?.total) || 0); }); }; diff --git a/apps/demos/Demos/VectorMap/Overview/React/PieChartComponent.tsx b/apps/demos/Demos/VectorMap/Overview/React/PieChartComponent.tsx index 1cd37c6bba95..ab3d3d4d705c 100644 --- a/apps/demos/Demos/VectorMap/Overview/React/PieChartComponent.tsx +++ b/apps/demos/Demos/VectorMap/Overview/React/PieChartComponent.tsx @@ -9,7 +9,7 @@ import type { ILabelProps } from 'devextreme-react/pie-chart'; const customizeText: ILabelProps['customizeText'] = (pointInfo) => `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${pointInfo.value}M`; -function PieChartComponent(props) { +function PieChartComponent(props: { data: { name: string; value: number }[] }) { return ( string; +}) { const name = info.attribute('name'); const countryGDPData = countriesGDP[name]; const total = countryGDPData?.total; diff --git a/apps/demos/Demos/VectorMap/Overview/React/data.ts b/apps/demos/Demos/VectorMap/Overview/React/data.ts index 41e0f1a3c3cd..6f87d206e060 100644 --- a/apps/demos/Demos/VectorMap/Overview/React/data.ts +++ b/apps/demos/Demos/VectorMap/Overview/React/data.ts @@ -1,4 +1,11 @@ -export const countriesGDP = { +export type CountryGDP = { + agriculture?: number; + industry?: number; + services?: number; + total?: number; +}; + +export const countriesGDP: Record = { Afghanistan: { agriculture: 34.9, industry: 25, services: 40, total: 20312, }, @@ -663,3 +670,5 @@ export const countriesGDP = { agriculture: 20.4, industry: 24.6, services: 54.9, total: 13672, }, }; + +export type CountriesGDPKey = keyof typeof countriesGDP; diff --git a/apps/demos/Demos/VectorMap/Overview/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/Overview/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..c50aa3059f60 --- /dev/null +++ b/apps/demos/Demos/VectorMap/Overview/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,28 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/Palette/React/App.tsx b/apps/demos/Demos/VectorMap/Palette/React/App.tsx index 5d503699ba75..8866c65858da 100644 --- a/apps/demos/Demos/VectorMap/Palette/React/App.tsx +++ b/apps/demos/Demos/VectorMap/Palette/React/App.tsx @@ -10,6 +10,7 @@ import type { ILayerProps, ILegendProps, ITooltipProps } from 'devextreme-react/ import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { populations } from './data.ts'; +import type { PopulationsKey } from './data.ts'; const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; @@ -17,7 +18,8 @@ const bounds = [-180, 85, 180, -60]; const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { - element.attribute('population', populations[element.attribute('name')]); + const name = element.attribute('name') as PopulationsKey; + element.attribute('population', populations[name]); }); }; @@ -37,7 +39,7 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { if (arg.attribute('population')) { return { text: `${arg.attribute('name')}: ${arg.attribute('population')}% of world population` }; } - return null; + return {}; }; export default function App() { diff --git a/apps/demos/Demos/VectorMap/Palette/React/data.ts b/apps/demos/Demos/VectorMap/Palette/React/data.ts index 905a0b6d729d..4b9c42f54c80 100644 --- a/apps/demos/Demos/VectorMap/Palette/React/data.ts +++ b/apps/demos/Demos/VectorMap/Palette/React/data.ts @@ -40,3 +40,5 @@ export const populations = { Morocco: 0.46, Uzbekistan: 0.43, }; + +export type PopulationsKey = keyof typeof populations; diff --git a/apps/demos/Demos/VectorMap/Palette/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/Palette/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/Palette/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/PieMarkers/React/App.tsx b/apps/demos/Demos/VectorMap/PieMarkers/React/App.tsx index 6708af986782..3cc132a89873 100644 --- a/apps/demos/Demos/VectorMap/PieMarkers/React/App.tsx +++ b/apps/demos/Demos/VectorMap/PieMarkers/React/App.tsx @@ -17,7 +17,7 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { text: arg.attribute('tooltip'), }; } - return null; + return {}; }; const customizeText: ILegendProps['customizeText'] = (arg) => names[arg.index]; diff --git a/apps/demos/Demos/VectorMap/PieMarkers/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/PieMarkers/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/PieMarkers/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/App.tsx index 36b5006af478..7ac6b1a86cd3 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/App.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/App.tsx @@ -16,6 +16,7 @@ import type { ILayerProps, ILegendProps } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { countriesGDP } from './data.ts'; import TooltipTemplate from './TooltipTemplate.tsx'; +import type { CountriesGDPKey } from './data.ts'; const colorGroups = [0, 10000, 50000, 100000, 500000, 1000000, 10000000, 50000000]; const mapBounds = [-180, 85, 180, -60]; @@ -26,7 +27,8 @@ const { format } = new Intl.NumberFormat('en-US', { const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { - const countryGDPData = countriesGDP[element.attribute('name')]; + const name = element.attribute('name') as CountriesGDPKey; + const countryGDPData = countriesGDP[name]; element.attribute('total', (countryGDPData?.total) || 0); }); }; diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx index 36d35644e815..f6a6c2871891 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx @@ -6,7 +6,16 @@ import PieChart, { Connector, } from 'devextreme-react/pie-chart'; -function PieChartComponent(props) { +interface PieChartDataItem { + name: string; + value: number; +} + +interface PieChartComponentProps { + data: PieChartDataItem[]; +} + +function PieChartComponent(props: PieChartComponentProps) { return ( string; }) { const name = info.attribute('name'); const countryGDPData = countriesGDP[name]; const total = countryGDPData?.total; diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/data.ts b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/data.ts index 41e0f1a3c3cd..6f87d206e060 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/data.ts +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/data.ts @@ -1,4 +1,11 @@ -export const countriesGDP = { +export type CountryGDP = { + agriculture?: number; + industry?: number; + services?: number; + total?: number; +}; + +export const countriesGDP: Record = { Afghanistan: { agriculture: 34.9, industry: 25, services: 40, total: 20312, }, @@ -663,3 +670,5 @@ export const countriesGDP = { agriculture: 20.4, industry: 24.6, services: 54.9, total: 13672, }, }; + +export type CountriesGDPKey = keyof typeof countriesGDP; diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx index d88795df2b22..4bfa5f3f005e 100644 --- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx @@ -3,7 +3,7 @@ import VectorMap, { Layer, Tooltip, } from 'devextreme-react/vector-map'; -import type { VectorMapTypes, ITooltipProps } from 'devextreme-react/vector-map'; +import type { VectorMapTypes, ITooltipProps, VectorMapRef } from 'devextreme-react/vector-map'; import Button from 'devextreme-react/button'; @@ -16,7 +16,7 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { if (arg.layer.type === 'marker') { return { text: arg.attribute('name') }; } - return null; + return {}; }; const markerClick = (e: VectorMapTypes.ClickEvent) => { @@ -27,11 +27,11 @@ const markerClick = (e: VectorMapTypes.ClickEvent) => { }; const App = () => { - const vectorMapRef = useRef(null); + const vectorMapRef = useRef(null); const reset = useCallback(() => { - vectorMapRef.current.instance().center(null); - vectorMapRef.current.instance().zoomFactor(null); + vectorMapRef?.current?.instance().center([0, 0]); + vectorMapRef?.current?.instance().zoomFactor(1); }, [vectorMapRef]); return ( diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/devextreme-vectormap-data.d.ts b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/devextreme-vectormap-data.d.ts new file mode 100644 index 000000000000..370ec277e5ea --- /dev/null +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/devextreme-vectormap-data.d.ts @@ -0,0 +1,27 @@ +declare module 'devextreme-dist/js/vectormap-data/world.js' { + type Position = number[]; + type Geometry = + | { type: 'Point'; coordinates: Position } + | { type: 'MultiPoint'; coordinates: Position[] } + | { type: 'LineString'; coordinates: Position[] } + | { type: 'MultiLineString'; coordinates: Position[][] } + | { type: 'Polygon'; coordinates: Position[][] } + | { type: 'MultiPolygon'; coordinates: Position[][][] }; + + interface Feature { + type: 'Feature'; + geometry: Geometry; + properties: Record; + } + + interface FeatureCollection { + type: 'FeatureCollection'; + features: Feature[]; + // eslint-disable-next-line spellcheck/spell-checker + bbox?: number[]; + } + + const world: FeatureCollection; + export { world }; + export default world; +} diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json index f4a7b2d526c6..8bd2fb9f4eb0 100644 --- a/apps/demos/tsconfig.react-check.json +++ b/apps/demos/tsconfig.react-check.json @@ -17,10 +17,8 @@ "Demos/**/React/**/*.ts" ], "exclude": [ - "Demos/FloatingActionButton/**/React/**/*.ts", - "Demos/FloatingActionButton/**/React/**/*.tsx", - "Demos/VectorMap/**/React/**/*.ts", - "Demos/VectorMap/**/React/**/*.tsx", + // "Demos/VectorMap/**/React/**/*.ts", + // "Demos/VectorMap/**/React/**/*.tsx", "Demos/Localization/**/React/**/*.ts", "Demos/Localization/**/React/**/*.tsx" ] From e81ac2554bb9364e6fa5e0dbfee369124dfbbf76 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 9 Jan 2026 16:38:12 +0200 Subject: [PATCH 04/22] convert-to-js VectorMap --- apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js | 4 ++-- .../Demos/VectorMap/ColorsCustomization/ReactJs/App.js | 8 +++++--- .../demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js | 2 +- apps/demos/Demos/VectorMap/FloorPlan/ReactJs/App.js | 2 +- apps/demos/Demos/VectorMap/Overview/ReactJs/App.js | 3 ++- .../Demos/VectorMap/Overview/ReactJs/TooltipTemplate.js | 9 +++++---- apps/demos/Demos/VectorMap/Palette/ReactJs/App.js | 5 +++-- apps/demos/Demos/VectorMap/PieMarkers/ReactJs/App.js | 2 +- .../Demos/VectorMap/TooltipsCustomization/ReactJs/App.js | 3 ++- .../TooltipsCustomization/ReactJs/TooltipTemplate.js | 9 +++++---- .../Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js | 6 +++--- 11 files changed, 30 insertions(+), 23 deletions(-) diff --git a/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js b/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js index 4eef4c4ec8a5..28789523f5a4 100644 --- a/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js @@ -11,9 +11,9 @@ const customizeTooltip = (arg) => { if (arg.layer.type === 'marker') { return { text: arg.attribute('tooltip') }; } - return null; + return {}; }; -const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; +const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)]; const customizeItems = (items) => items.reverse(); export default function App() { return ( diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/ReactJs/App.js b/apps/demos/Demos/VectorMap/ColorsCustomization/ReactJs/App.js index 7672fcda6f5d..1aa4c7c541fc 100644 --- a/apps/demos/Demos/VectorMap/ColorsCustomization/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/ColorsCustomization/ReactJs/App.js @@ -8,7 +8,8 @@ import { countries } from './data.js'; const bounds = [-180, 85, 180, -60]; const customizeLayer = (elements) => { elements.forEach((element) => { - const country = countries[element.attribute('name')]; + const name = element.attribute('name'); + const country = countries[name]; if (country) { element.applySettings({ color: country.color, @@ -19,7 +20,8 @@ const customizeLayer = (elements) => { }); }; const clickHandler = ({ target }) => { - if (target && countries[target.attribute('name')]) { + const name = target?.attribute('name'); + if (target && countries[name]) { target.selected(!target.selected()); } }; @@ -32,7 +34,7 @@ const customizeTooltip = ({ attribute }) => { color: country.color, }; } - return null; + return {}; }; export default function App() { return ( diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js index a65cae224f09..e9dd5a179c9c 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js @@ -19,7 +19,7 @@ const App = () => { const continentChanged = useCallback( ({ value }) => { setCoordinates(value); - mapRef.current.instance().viewport(value); + mapRef?.current?.instance().viewport(value); }, [setCoordinates], ); diff --git a/apps/demos/Demos/VectorMap/FloorPlan/ReactJs/App.js b/apps/demos/Demos/VectorMap/FloorPlan/ReactJs/App.js index 5a70077da92b..c50bb4626b34 100644 --- a/apps/demos/Demos/VectorMap/FloorPlan/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/FloorPlan/ReactJs/App.js @@ -10,7 +10,7 @@ const customizeTooltip = (arg) => { if (arg.layer.name === 'rooms') { return { text: `Square: ${arg.attribute('square')} ft²` }; } - return null; + return {}; }; export default function App() { return ( diff --git a/apps/demos/Demos/VectorMap/Overview/ReactJs/App.js b/apps/demos/Demos/VectorMap/Overview/ReactJs/App.js index 3553e3f44afb..8ad1791ad1a5 100644 --- a/apps/demos/Demos/VectorMap/Overview/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/Overview/ReactJs/App.js @@ -18,7 +18,8 @@ const colorGroups = [0, 10000, 50000, 100000, 500000, 1000000, 10000000, 5000000 const mapBounds = [-180, 85, 180, -60]; const customizeLayer = (elements) => { elements.forEach((element) => { - const countryGDPData = countriesGDP[element.attribute('name')]; + const name = element.attribute('name'); + const countryGDPData = countriesGDP[name]; element.attribute('total', countryGDPData?.total || 0); }); }; diff --git a/apps/demos/Demos/VectorMap/Overview/ReactJs/TooltipTemplate.js b/apps/demos/Demos/VectorMap/Overview/ReactJs/TooltipTemplate.js index 86369a91748b..25495f950c04 100644 --- a/apps/demos/Demos/VectorMap/Overview/ReactJs/TooltipTemplate.js +++ b/apps/demos/Demos/VectorMap/Overview/ReactJs/TooltipTemplate.js @@ -6,11 +6,12 @@ const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); function getPieData(name) { - return countriesGDP[name] + const data = countriesGDP[name]; + return data ? [ - { name: 'industry', value: countriesGDP[name].industry }, - { name: 'services', value: countriesGDP[name].services }, - { name: 'agriculture', value: countriesGDP[name].agriculture }, + { name: 'industry', value: data.industry ?? 0 }, + { name: 'services', value: data.services ?? 0 }, + { name: 'agriculture', value: data.agriculture ?? 0 }, ] : null; } diff --git a/apps/demos/Demos/VectorMap/Palette/ReactJs/App.js b/apps/demos/Demos/VectorMap/Palette/ReactJs/App.js index 5bdfdc964b87..619b9c094315 100644 --- a/apps/demos/Demos/VectorMap/Palette/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/Palette/ReactJs/App.js @@ -9,7 +9,8 @@ const colorGroups = [0, 0.5, 0.8, 1, 2, 3, 100]; const bounds = [-180, 85, 180, -60]; const customizeLayer = (elements) => { elements.forEach((element) => { - element.attribute('population', populations[element.attribute('name')]); + const name = element.attribute('name'); + element.attribute('population', populations[name]); }); }; const customizeText = (arg) => { @@ -29,7 +30,7 @@ const customizeTooltip = (arg) => { text: `${arg.attribute('name')}: ${arg.attribute('population')}% of world population`, }; } - return null; + return {}; }; export default function App() { return ( diff --git a/apps/demos/Demos/VectorMap/PieMarkers/ReactJs/App.js b/apps/demos/Demos/VectorMap/PieMarkers/ReactJs/App.js index f2c2c4e89d32..d43bfaf031ab 100644 --- a/apps/demos/Demos/VectorMap/PieMarkers/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/PieMarkers/ReactJs/App.js @@ -12,7 +12,7 @@ const customizeTooltip = (arg) => { text: arg.attribute('tooltip'), }; } - return null; + return {}; }; const customizeText = (arg) => names[arg.index]; export default function App() { diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/App.js b/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/App.js index 439f6de3f066..82cf573edf2b 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/App.js @@ -21,7 +21,8 @@ const { format } = new Intl.NumberFormat('en-US', { }); const customizeLayer = (elements) => { elements.forEach((element) => { - const countryGDPData = countriesGDP[element.attribute('name')]; + const name = element.attribute('name'); + const countryGDPData = countriesGDP[name]; element.attribute('total', countryGDPData?.total || 0); }); }; diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/TooltipTemplate.js b/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/TooltipTemplate.js index 86369a91748b..25495f950c04 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/TooltipTemplate.js +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/TooltipTemplate.js @@ -6,11 +6,12 @@ const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); function getPieData(name) { - return countriesGDP[name] + const data = countriesGDP[name]; + return data ? [ - { name: 'industry', value: countriesGDP[name].industry }, - { name: 'services', value: countriesGDP[name].services }, - { name: 'agriculture', value: countriesGDP[name].agriculture }, + { name: 'industry', value: data.industry ?? 0 }, + { name: 'services', value: data.services ?? 0 }, + { name: 'agriculture', value: data.agriculture ?? 0 }, ] : null; } diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js index b876c84f5f29..e27ca88e9902 100644 --- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js @@ -9,7 +9,7 @@ const customizeTooltip = (arg) => { if (arg.layer.type === 'marker') { return { text: arg.attribute('name') }; } - return null; + return {}; }; const markerClick = (e) => { if (e.target?.layer.type === 'marker') { @@ -20,8 +20,8 @@ const markerClick = (e) => { const App = () => { const vectorMapRef = useRef(null); const reset = useCallback(() => { - vectorMapRef.current.instance().center(null); - vectorMapRef.current.instance().zoomFactor(null); + vectorMapRef?.current?.instance().center([0, 0]); + vectorMapRef?.current?.instance().zoomFactor(1); }, [vectorMapRef]); return ( <> From 2e7a9ce99c8b3e3787b062e682f1b914d51d6dec Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 9 Jan 2026 16:47:23 +0200 Subject: [PATCH 05/22] fix ts in Localization --- .../Demos/Localization/UsingGlobalize/React/global.d.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts diff --git a/apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts b/apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts new file mode 100644 index 000000000000..3564a1a4dd78 --- /dev/null +++ b/apps/demos/Demos/Localization/UsingGlobalize/React/global.d.ts @@ -0,0 +1,9 @@ +declare module '*.json' { + const value: any; + export default value; +} + +declare module 'globalize' { + const Globalize: any; + export default Globalize; +} From 058cd43a02fd593decc462f5bc8e0e4020da5b9d Mon Sep 17 00:00:00 2001 From: dmlvr Date: Fri, 9 Jan 2026 16:48:36 +0200 Subject: [PATCH 06/22] modified tsconfig.react-check.json --- apps/demos/tsconfig.react-check.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/demos/tsconfig.react-check.json b/apps/demos/tsconfig.react-check.json index 8bd2fb9f4eb0..f3dfd1b1af9a 100644 --- a/apps/demos/tsconfig.react-check.json +++ b/apps/demos/tsconfig.react-check.json @@ -16,10 +16,4 @@ "Demos/**/React/**/*.tsx", "Demos/**/React/**/*.ts" ], - "exclude": [ - // "Demos/VectorMap/**/React/**/*.ts", - // "Demos/VectorMap/**/React/**/*.tsx", - "Demos/Localization/**/React/**/*.ts", - "Demos/Localization/**/React/**/*.tsx" - ] } From c20d00ce55e6f2c625fc534bee6171b7d3ae51de Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 11:01:18 +0200 Subject: [PATCH 07/22] fix imports --- .../Demos/FloatingActionButton/Overview/React/App.tsx | 3 ++- .../Demos/FloatingActionButton/Overview/React/data.ts | 2 +- .../Demos/VectorMap/ColorsCustomization/React/App.tsx | 7 ++++++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index 01e9211f4beb..7755515aacc7 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -5,7 +5,8 @@ import DataGrid, { Column, Editing, Lookup, Texts, Selection, } from 'devextreme-react/data-grid'; import { SpeedDialAction } from 'devextreme-react/speed-dial-action'; -import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box'; +import { SelectBox } from 'devextreme-react/select-box'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import type { DataGridTypes, DataGridRef } from 'devextreme-react/data-grid'; import { employees, states, directions, optionDirections, directionLabel, diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts b/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts index 6c92ab90db07..996f83765cd1 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/data.ts @@ -1,4 +1,4 @@ -import type { FloatingActionButtonDirection, PositionAlignment } from 'devextreme/common'; +import type { FloatingActionButtonDirection, PositionAlignment } from 'devextreme-react/common'; type DirectionValue = { icon: string; diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx index fe6cf13683a8..6c47b17b2fea 100644 --- a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx @@ -9,9 +9,14 @@ import VectorMap, { import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; -import type { MapLayerElement } from 'devextreme/viz/vector_map'; import { countries } from './data.ts'; +interface MapLayerElement { + attribute: (name: string) => string; + selected: (value?: boolean) => boolean; + applySettings?: (settings: Record) => void; +} + const bounds = [-180, 85, 180, -60]; const customizeLayer: ILayerProps['customize'] = (elements) => { From 6123f864174e799256f6d0ac6750b80609907ed6 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 11:52:17 +0200 Subject: [PATCH 08/22] skip-cache --- apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index 7755515aacc7..63d85f06f204 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -11,6 +11,7 @@ import type { DataGridTypes, DataGridRef } from 'devextreme-react/data-grid'; import { employees, states, directions, optionDirections, directionLabel, } from './data.ts'; + import type { DirectionKey } from './data.ts'; const App = () => { From d1ee8aef23e441c8dce03bbdf4558cdfb66b3622 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 12:28:57 +0200 Subject: [PATCH 09/22] fix by copilot review --- apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx | 1 - apps/demos/Demos/VectorMap/Overview/React/TooltipTemplate.tsx | 2 +- .../VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index 63d85f06f204..7755515aacc7 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -11,7 +11,6 @@ import type { DataGridTypes, DataGridRef } from 'devextreme-react/data-grid'; import { employees, states, directions, optionDirections, directionLabel, } from './data.ts'; - import type { DirectionKey } from './data.ts'; const App = () => { diff --git a/apps/demos/Demos/VectorMap/Overview/React/TooltipTemplate.tsx b/apps/demos/Demos/VectorMap/Overview/React/TooltipTemplate.tsx index f5105f9d6827..2c7ea144ff81 100644 --- a/apps/demos/Demos/VectorMap/Overview/React/TooltipTemplate.tsx +++ b/apps/demos/Demos/VectorMap/Overview/React/TooltipTemplate.tsx @@ -18,7 +18,7 @@ function getPieData(name: CountriesGDPKey) { } export default function TooltipTemplate(info: { - attribute: (name: CountriesGDPKey) => string; + attribute: (name: string) => string; }) { const name = info.attribute('name'); const countryGDPData = countriesGDP[name]; diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx index f18633247f44..c519731b5a52 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx @@ -17,7 +17,7 @@ function getPieData(name: CountriesGDPKey) { ] : null; } -export default function TooltipTemplate(info: { attribute: (name: CountriesGDPKey) => string; }) { +export default function TooltipTemplate(info: { attribute: (name: string) => string; }) { const name = info.attribute('name'); const countryGDPData = countriesGDP[name]; const total = countryGDPData?.total; From 712c4e0168dc85f118cfc4959f5c162761eb4308 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 14:17:33 +0200 Subject: [PATCH 10/22] fix by review --- .../FloatingActionButton/Overview/React/App.tsx | 2 +- .../FloatingActionButton/Overview/ReactJs/App.js | 9 +++------ .../Demos/Localization/UsingIntl/React/global.d.ts | 4 ++++ .../VectorMap/ColorsCustomization/React/App.tsx | 12 ++++-------- 4 files changed, 12 insertions(+), 15 deletions(-) create mode 100644 apps/demos/Demos/Localization/UsingIntl/React/global.d.ts diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index 7755515aacc7..c10cfe08aad1 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -19,7 +19,7 @@ const App = () => { const selectedChanged = useCallback((e: DataGridTypes.SelectionChangedEvent) => { setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0])); - }, [setSelectedRowIndex]); + }, []); const directionChanged = useCallback((e: SelectBoxTypes.SelectionChangedEvent) => { config({ diff --git a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js index d4abaa5df9ca..c3706ec7440d 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js +++ b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js @@ -13,12 +13,9 @@ import { const App = () => { const [selectedRowIndex, setSelectedRowIndex] = useState(-1); const gridRef = useRef(null); - const selectedChanged = useCallback( - (e) => { - setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0])); - }, - [setSelectedRowIndex], - ); + const selectedChanged = useCallback((e) => { + setSelectedRowIndex(e.component.getRowIndexByKey(e.selectedRowKeys[0])); + }, []); const directionChanged = useCallback((e) => { config({ floatingActionButtonConfig: directions[e.selectedItem], diff --git a/apps/demos/Demos/Localization/UsingIntl/React/global.d.ts b/apps/demos/Demos/Localization/UsingIntl/React/global.d.ts new file mode 100644 index 000000000000..bbab69d2fb01 --- /dev/null +++ b/apps/demos/Demos/Localization/UsingIntl/React/global.d.ts @@ -0,0 +1,4 @@ +declare module '*.json' { + const value: any; + export default value; +} diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx index 6c47b17b2fea..3e68405820a8 100644 --- a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx @@ -6,22 +6,18 @@ import VectorMap, { Border, Font, } from 'devextreme-react/vector-map'; -import type { ILayerProps, ITooltipProps } from 'devextreme-react/vector-map'; +import type { ILayerProps, ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { countries } from './data.ts'; -interface MapLayerElement { - attribute: (name: string) => string; - selected: (value?: boolean) => boolean; - applySettings?: (settings: Record) => void; -} +type CountriesKey = keyof typeof countries; const bounds = [-180, 85, 180, -60]; const customizeLayer: ILayerProps['customize'] = (elements) => { elements.forEach((element) => { - const name = element.attribute('name') as keyof typeof countries; + const name = element.attribute('name') as CountriesKey; const country = countries[name]; if (country) { element.applySettings({ @@ -33,7 +29,7 @@ const customizeLayer: ILayerProps['customize'] = (elements) => { }); }; -const clickHandler = ({ target }: { target: MapLayerElement }) => { +const clickHandler = ({ target }: VectorMapTypes.ClickEvent) => { const name = target?.attribute('name') as keyof typeof countries; if (target && countries[name]) { target.selected(!target.selected()); From 83716ea48004abe0ac7987b80789a4ccd9503822 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 15:23:16 +0200 Subject: [PATCH 11/22] fix Color Customization --- apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx index 3e68405820a8..173c98be4261 100644 --- a/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ColorsCustomization/React/App.tsx @@ -30,14 +30,14 @@ const customizeLayer: ILayerProps['customize'] = (elements) => { }; const clickHandler = ({ target }: VectorMapTypes.ClickEvent) => { - const name = target?.attribute('name') as keyof typeof countries; + const name = target?.attribute('name') as CountriesKey; if (target && countries[name]) { target.selected(!target.selected()); } }; const customizeTooltip: ITooltipProps['customizeTooltip'] = ({ attribute }) => { - const name = attribute('name') as keyof typeof countries; + const name = attribute('name') as CountriesKey; const country = countries[name]; if (country) { return { From 44357e2235fe2eb599125bec2b81018f92f676fc Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 15:33:47 +0200 Subject: [PATCH 12/22] remove extra useCallBack deps --- .../Demos/VectorMap/DynamicViewport/React/App.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx index 8c35e71addc1..7eebb020879a 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx +++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx @@ -22,24 +22,24 @@ const App = () => { const continentChanged = useCallback(({ value }) => { setCoordinates(value); mapRef?.current?.instance().viewport(value); - }, [setCoordinates]); + }, []); const zoomFactorChanged = useCallback((e: VectorMapTypes.ZoomFactorChangedEvent) => { setZoomFactor(e.zoomFactor.toFixed(2)); - }, [setZoomFactor]); + }, []); const centerChanged = useCallback((e: VectorMapTypes.CenterChangedEvent) => { const value = `${e.center[0].toFixed(3)}, ${e.center[1].toFixed(3)}`; setCenter(value); - }, [setCenter]); + }, []); const panVisibleChange = useCallback((value) => { setPanVisible(value); - }, [setPanVisible]); + }, []); const zoomVisibleChange = useCallback((value) => { setZoomVisible(value); - }, [setZoomVisible]); + }, []); return (
From 0dbde1a159c82b3e2d7f34f59f37284ff0613fd6 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 15:34:45 +0200 Subject: [PATCH 13/22] add ReactJs Demo --- .../VectorMap/DynamicViewport/ReactJs/App.js | 49 +++++++------------ 1 file changed, 17 insertions(+), 32 deletions(-) diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js index e9dd5a179c9c..62728941c6f0 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js @@ -16,38 +16,23 @@ const App = () => { const [panVisible, setPanVisible] = useState(true); const [zoomVisible, setZoomVisible] = useState(true); const mapRef = useRef(null); - const continentChanged = useCallback( - ({ value }) => { - setCoordinates(value); - mapRef?.current?.instance().viewport(value); - }, - [setCoordinates], - ); - const zoomFactorChanged = useCallback( - (e) => { - setZoomFactor(e.zoomFactor.toFixed(2)); - }, - [setZoomFactor], - ); - const centerChanged = useCallback( - (e) => { - const value = `${e.center[0].toFixed(3)}, ${e.center[1].toFixed(3)}`; - setCenter(value); - }, - [setCenter], - ); - const panVisibleChange = useCallback( - (value) => { - setPanVisible(value); - }, - [setPanVisible], - ); - const zoomVisibleChange = useCallback( - (value) => { - setZoomVisible(value); - }, - [setZoomVisible], - ); + const continentChanged = useCallback(({ value }) => { + setCoordinates(value); + mapRef?.current?.instance().viewport(value); + }, []); + const zoomFactorChanged = useCallback((e) => { + setZoomFactor(e.zoomFactor.toFixed(2)); + }, []); + const centerChanged = useCallback((e) => { + const value = `${e.center[0].toFixed(3)}, ${e.center[1].toFixed(3)}`; + setCenter(value); + }, []); + const panVisibleChange = useCallback((value) => { + setPanVisible(value); + }, []); + const zoomVisibleChange = useCallback((value) => { + setZoomVisible(value); + }, []); return (
Date: Mon, 12 Jan 2026 15:35:32 +0200 Subject: [PATCH 14/22] fix types --- .../VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx index c519731b5a52..8bee897cc9b2 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/TooltipTemplate.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { countriesGDP } from './data.ts'; -import type { CountriesGDPKey } from './data.ts'; import PieChart from './PieChartComponent.tsx'; @@ -8,7 +7,7 @@ const { format } = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0, }); -function getPieData(name: CountriesGDPKey) { +function getPieData(name: string) { const data = countriesGDP[name]; return data ? [ { name: 'industry', value: data.industry ?? 0 }, From 43ae64d1c962b4e10b1cb13a342b89ce7e42fdca Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 15:38:58 +0200 Subject: [PATCH 15/22] remove extra deps from useCallback --- apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx | 2 +- apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx index 4bfa5f3f005e..6c23ea00071b 100644 --- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx @@ -32,7 +32,7 @@ const App = () => { const reset = useCallback(() => { vectorMapRef?.current?.instance().center([0, 0]); vectorMapRef?.current?.instance().zoomFactor(1); - }, [vectorMapRef]); + }, []); return ( <> diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js index e27ca88e9902..1dfa379fc21d 100644 --- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js @@ -22,7 +22,7 @@ const App = () => { const reset = useCallback(() => { vectorMapRef?.current?.instance().center([0, 0]); vectorMapRef?.current?.instance().zoomFactor(1); - }, [vectorMapRef]); + }, []); return ( <> Date: Mon, 12 Jan 2026 16:08:38 +0200 Subject: [PATCH 16/22] fix by Copilot review --- .../FloatingActionButton/Overview/React/App.tsx | 12 ++++++------ .../Demos/VectorMap/DynamicViewport/React/App.tsx | 2 +- .../Demos/VectorMap/DynamicViewport/ReactJs/App.js | 2 +- .../VectorMap/ZoomingAndCentering/React/App.tsx | 4 ++-- .../VectorMap/ZoomingAndCentering/ReactJs/App.js | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index c10cfe08aad1..72f09e7cf556 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -30,18 +30,18 @@ const App = () => { }, []); const editRow = useCallback(() => { - gridRef?.current?.instance()?.editRow(selectedRowIndex); - gridRef?.current?.instance()?.deselectAll(); + gridRef.current?.instance()?.editRow(selectedRowIndex); + gridRef.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const deleteRow = useCallback(() => { - gridRef?.current?.instance()?.deleteRow(selectedRowIndex); - gridRef?.current?.instance()?.deselectAll(); + gridRef.current?.instance()?.deleteRow(selectedRowIndex); + gridRef.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const addRow = useCallback(() => { - gridRef?.current?.instance()?.addRow(); - gridRef?.current?.instance()?.deselectAll(); + gridRef.current?.instance()?.addRow(); + gridRef.current?.instance()?.deselectAll(); }, [gridRef]); return ( diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx index 7eebb020879a..ff04c99bd988 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx +++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx @@ -21,7 +21,7 @@ const App = () => { const continentChanged = useCallback(({ value }) => { setCoordinates(value); - mapRef?.current?.instance().viewport(value); + mapRef.current?.instance().viewport(value); }, []); const zoomFactorChanged = useCallback((e: VectorMapTypes.ZoomFactorChangedEvent) => { diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js index 62728941c6f0..68e557102a30 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/DynamicViewport/ReactJs/App.js @@ -18,7 +18,7 @@ const App = () => { const mapRef = useRef(null); const continentChanged = useCallback(({ value }) => { setCoordinates(value); - mapRef?.current?.instance().viewport(value); + mapRef.current?.instance().viewport(value); }, []); const zoomFactorChanged = useCallback((e) => { setZoomFactor(e.zoomFactor.toFixed(2)); diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx index 6c23ea00071b..0b13fc651d7f 100644 --- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/React/App.tsx @@ -30,8 +30,8 @@ const App = () => { const vectorMapRef = useRef(null); const reset = useCallback(() => { - vectorMapRef?.current?.instance().center([0, 0]); - vectorMapRef?.current?.instance().zoomFactor(1); + vectorMapRef.current?.instance().center([0, 0]); + vectorMapRef.current?.instance().zoomFactor(1); }, []); return ( diff --git a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js index 1dfa379fc21d..ef26685b939e 100644 --- a/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/ZoomingAndCentering/ReactJs/App.js @@ -20,8 +20,8 @@ const markerClick = (e) => { const App = () => { const vectorMapRef = useRef(null); const reset = useCallback(() => { - vectorMapRef?.current?.instance().center([0, 0]); - vectorMapRef?.current?.instance().zoomFactor(1); + vectorMapRef.current?.instance().center([0, 0]); + vectorMapRef.current?.instance().zoomFactor(1); }, []); return ( <> From 529e1f0a08812b5f1f34b8fb29c74ec6fefb8611 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 17:13:27 +0200 Subject: [PATCH 17/22] convert-to-js for FloatingActionButto --- .../FloatingActionButton/Overview/ReactJs/App.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js index c3706ec7440d..836a205c1d8a 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js +++ b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js @@ -23,16 +23,16 @@ const App = () => { repaintFloatingActionButton(); }, []); const editRow = useCallback(() => { - gridRef?.current?.instance()?.editRow(selectedRowIndex); - gridRef?.current?.instance()?.deselectAll(); + gridRef.current?.instance()?.editRow(selectedRowIndex); + gridRef.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const deleteRow = useCallback(() => { - gridRef?.current?.instance()?.deleteRow(selectedRowIndex); - gridRef?.current?.instance()?.deselectAll(); + gridRef.current?.instance()?.deleteRow(selectedRowIndex); + gridRef.current?.instance()?.deselectAll(); }, [gridRef, selectedRowIndex]); const addRow = useCallback(() => { - gridRef?.current?.instance()?.addRow(); - gridRef?.current?.instance()?.deselectAll(); + gridRef.current?.instance()?.addRow(); + gridRef.current?.instance()?.deselectAll(); }, [gridRef]); return (
From 35feec0422dddbc1c4571fdaa17c755fe33fd018 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 18:07:30 +0200 Subject: [PATCH 18/22] fix by copilot review --- .../Demos/FloatingActionButton/Overview/React/App.tsx | 6 +++--- .../Demos/FloatingActionButton/Overview/ReactJs/App.js | 6 +++--- apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx | 4 ++-- apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx | 7 ++++--- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx index 72f09e7cf556..e45f36ea21fc 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx +++ b/apps/demos/Demos/FloatingActionButton/Overview/React/App.tsx @@ -32,17 +32,17 @@ const App = () => { const editRow = useCallback(() => { gridRef.current?.instance()?.editRow(selectedRowIndex); gridRef.current?.instance()?.deselectAll(); - }, [gridRef, selectedRowIndex]); + }, [selectedRowIndex]); const deleteRow = useCallback(() => { gridRef.current?.instance()?.deleteRow(selectedRowIndex); gridRef.current?.instance()?.deselectAll(); - }, [gridRef, selectedRowIndex]); + }, [selectedRowIndex]); const addRow = useCallback(() => { gridRef.current?.instance()?.addRow(); gridRef.current?.instance()?.deselectAll(); - }, [gridRef]); + }, []); return (
diff --git a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js index 836a205c1d8a..f68c7a1518b7 100644 --- a/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js +++ b/apps/demos/Demos/FloatingActionButton/Overview/ReactJs/App.js @@ -25,15 +25,15 @@ const App = () => { const editRow = useCallback(() => { gridRef.current?.instance()?.editRow(selectedRowIndex); gridRef.current?.instance()?.deselectAll(); - }, [gridRef, selectedRowIndex]); + }, [selectedRowIndex]); const deleteRow = useCallback(() => { gridRef.current?.instance()?.deleteRow(selectedRowIndex); gridRef.current?.instance()?.deselectAll(); - }, [gridRef, selectedRowIndex]); + }, [selectedRowIndex]); const addRow = useCallback(() => { gridRef.current?.instance()?.addRow(); gridRef.current?.instance()?.deselectAll(); - }, [gridRef]); + }, []); return (
{ const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)]; -const customizeItems = (items: any[]) => items.reverse(); +const customizeItems = (items: VectorMapTypes.LegendItem[]) => items.reverse(); export default function App() { return ( diff --git a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx index ff04c99bd988..6a28ecfa91c2 100644 --- a/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx +++ b/apps/demos/Demos/VectorMap/DynamicViewport/React/App.tsx @@ -5,6 +5,7 @@ import SelectBox from 'devextreme-react/select-box'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import Switch from 'devextreme-react/switch'; import type { VectorMapTypes, VectorMapRef } from 'devextreme-react/vector-map'; +import type { SelectBoxTypes } from 'devextreme-react/select-box'; import { viewportCoordinates, centerLabel, zoomLabel, continentLabel, } from './data.ts'; @@ -19,7 +20,7 @@ const App = () => { const [zoomVisible, setZoomVisible] = useState(true); const mapRef = useRef(null); - const continentChanged = useCallback(({ value }) => { + const continentChanged = useCallback(({ value }: SelectBoxTypes.ValueChangedEvent) => { setCoordinates(value); mapRef.current?.instance().viewport(value); }, []); @@ -33,11 +34,11 @@ const App = () => { setCenter(value); }, []); - const panVisibleChange = useCallback((value) => { + const panVisibleChange = useCallback((value: boolean) => { setPanVisible(value); }, []); - const zoomVisibleChange = useCallback((value) => { + const zoomVisibleChange = useCallback((value: boolean) => { setZoomVisible(value); }, []); From 4683bd1bd407687ae50a5b768cef2c3254a3d9ff Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 18:44:04 +0200 Subject: [PATCH 19/22] fix some any types --- apps/demos/Demos/VectorMap/Legend/React/App.tsx | 2 +- .../VectorMap/TooltipsCustomization/React/PieChartComponent.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demos/Demos/VectorMap/Legend/React/App.tsx b/apps/demos/Demos/VectorMap/Legend/React/App.tsx index a775a6269559..28c5d2525b1c 100644 --- a/apps/demos/Demos/VectorMap/Legend/React/App.tsx +++ b/apps/demos/Demos/VectorMap/Legend/React/App.tsx @@ -16,7 +16,7 @@ const sizeGroups = [0, 8000, 10000, 50000]; const bounds = [-180, 85, 180, -75]; -const customizeText = (arg: { index: number; start: any; end: any; }) => { +const customizeText = (arg: { index: number; start: number; end: number; }) => { if (arg.index === 0) { return '< 0.5%'; } if (arg.index === 5) { diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx index f6a6c2871891..973c5cb9cb53 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx @@ -39,7 +39,7 @@ function PieChartComponent(props: PieChartComponentProps) { ); } -function customizeText(pointInfo: { argument: string | any[]; value: any; }) { +function customizeText(pointInfo: { argument: string | string[]; value: string; }) { return `${pointInfo.argument[0].toUpperCase()}${ pointInfo.argument.slice(1) }: $${pointInfo.value}M`; From b0ed1aaf92f124eb672a436b7c67039ee4f6f4f1 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 19:05:29 +0200 Subject: [PATCH 20/22] fix by copilot review --- apps/demos/Demos/VectorMap/Legend/React/App.tsx | 2 +- .../TooltipsCustomization/React/PieChartComponent.tsx | 9 ++++----- .../TooltipsCustomization/ReactJs/PieChartComponent.js | 7 ++----- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/apps/demos/Demos/VectorMap/Legend/React/App.tsx b/apps/demos/Demos/VectorMap/Legend/React/App.tsx index 28c5d2525b1c..21001ec9a60c 100644 --- a/apps/demos/Demos/VectorMap/Legend/React/App.tsx +++ b/apps/demos/Demos/VectorMap/Legend/React/App.tsx @@ -16,7 +16,7 @@ const sizeGroups = [0, 8000, 10000, 50000]; const bounds = [-180, 85, 180, -75]; -const customizeText = (arg: { index: number; start: number; end: number; }) => { +const customizeText: ILegendProps['customizeText'] = (arg) => { if (arg.index === 0) { return '< 0.5%'; } if (arg.index === 5) { diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx index 973c5cb9cb53..b7e396b8794e 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx @@ -4,6 +4,7 @@ import PieChart, { Label, Legend, Connector, + ILabelProps, } from 'devextreme-react/pie-chart'; interface PieChartDataItem { @@ -39,10 +40,8 @@ function PieChartComponent(props: PieChartComponentProps) { ); } -function customizeText(pointInfo: { argument: string | string[]; value: string; }) { - return `${pointInfo.argument[0].toUpperCase()}${ - pointInfo.argument.slice(1) - }: $${pointInfo.value}M`; -} +const customizeText: ILabelProps['customizeText'] = (pointInfo) => `${pointInfo.argument[0].toUpperCase()}${ + pointInfo.argument.slice(1) +}: $${pointInfo.value}M`; export default PieChartComponent; diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/PieChartComponent.js b/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/PieChartComponent.js index b9323e6dc088..180bb0ccd78b 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/PieChartComponent.js +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/ReactJs/PieChartComponent.js @@ -28,9 +28,6 @@ function PieChartComponent(props) { ); } -function customizeText(pointInfo) { - return `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${ - pointInfo.value - }M`; -} +const customizeText = (pointInfo) => + `${pointInfo.argument[0].toUpperCase()}${pointInfo.argument.slice(1)}: $${pointInfo.value}M`; export default PieChartComponent; From 6f2b88b309c7d32e74b8c267cd3ea479f69193f5 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Mon, 12 Jan 2026 19:10:17 +0200 Subject: [PATCH 21/22] fix by Copilot review --- apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx | 4 ++-- apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx b/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx index f2a7a3304cbe..54dba741441d 100644 --- a/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx +++ b/apps/demos/Demos/VectorMap/BubbleMarkers/React/App.tsx @@ -6,7 +6,7 @@ import VectorMap, { Source, Tooltip, } from 'devextreme-react/vector-map'; -import type { ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map'; +import type { ILegendProps, ITooltipProps, VectorMapTypes } from 'devextreme-react/vector-map'; import * as mapsData from 'devextreme-dist/js/vectormap-data/world.js'; import { markers } from './data.ts'; @@ -21,7 +21,7 @@ const customizeTooltip: ITooltipProps['customizeTooltip'] = (arg) => { return {}; }; -const customizeText = (arg: { index: string | number; }) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)]; +const customizeText: ILegendProps['customizeText'] = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; const customizeItems = (items: VectorMapTypes.LegendItem[]) => items.reverse(); diff --git a/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js b/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js index 28789523f5a4..eb8d2d43b11d 100644 --- a/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js +++ b/apps/demos/Demos/VectorMap/BubbleMarkers/ReactJs/App.js @@ -13,7 +13,7 @@ const customizeTooltip = (arg) => { } return {}; }; -const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][Number(arg.index)]; +const customizeText = (arg) => ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; const customizeItems = (items) => items.reverse(); export default function App() { return ( From d57aa318ef737b91306bb8dacc1cbc2a094f1ec1 Mon Sep 17 00:00:00 2001 From: dmlvr Date: Tue, 13 Jan 2026 10:08:48 +0200 Subject: [PATCH 22/22] change type import --- .../TooltipsCustomization/React/PieChartComponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx index b7e396b8794e..8db7f96a6c1d 100644 --- a/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx +++ b/apps/demos/Demos/VectorMap/TooltipsCustomization/React/PieChartComponent.tsx @@ -4,9 +4,10 @@ import PieChart, { Label, Legend, Connector, - ILabelProps, } from 'devextreme-react/pie-chart'; +import type { ILabelProps } from 'devextreme-react/pie-chart'; + interface PieChartDataItem { name: string; value: number;