Merge branch '26_1' into renovate/eslint-eslintrc-3.x

Author: Raushen

.github/copilot-instructions.md

@@ -7,7 +7,7 @@
 **Repository Stats:**
 - **Type:** Monorepo (pnpm workspaces + Nx)
 - **Size:** Large (1000+ files across multiple packages)
-- **Languages:** TypeScript, JavaScript, SCSS, C# (.NET for test runner)
+- **Languages:** TypeScript, JavaScript, SCSS
 - **Package Manager:** pnpm 9.15.4 (specified in package.json)
 - **Node Version:** 20.x (required by CI)
 - **Build System:** Gulp + Nx + custom build scripts + custom Nx executors (via `devextreme-nx-infra-plugin`)
@@ -24,7 +24,7 @@ pnpm install --frozen-lockfile
 
 **Node.js:** Version 20.x is required (CI uses Node 20)
 **pnpm:** Version 9.15.4 (managed via packageManager field)
-**.NET SDK:** Version 8.0.x required for building the test runner (packages/devextreme/testing/runner)
+**.NET SDK:** Version 8.0.x required for running devextreme-internal-tools (uses .NET tool for code generation)
 
 ### First-Time Setup
 

.github/workflows/codeql.yml

@@ -65,43 +65,10 @@ jobs:
           ref: refs/heads/${{ github.ref_name }}
           sha: ${{ steps.get-head-sha.outputs.SHA }}
 
-  analyze-csharp:
-    name: Analyze C#
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Get head SHA
-        id: get-head-sha
-        run: echo "SHA=$(git rev-parse origin/${{ github.ref_name }})" >> "$GITHUB_OUTPUT"
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v3
-        with:
-          languages: csharp
-          config-file: ./.github/codeql/codeql-config.yml
-
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v3
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v3
-        with:
-          category: "/language:csharp"
-          ref: refs/heads/${{ github.ref_name }}
-          sha: ${{ steps.get-head-sha.outputs.SHA }}
-
   fetch:
     runs-on: devextreme-shr2
     name: Fetch analysis
-    needs: [ analyze-javascript, analyze-csharp ]
+    needs: [ analyze-javascript ]
 
     steps:
       - name: Get Latest Analysis info

apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css

@@ -1,7 +1,3 @@
-::ng-deep #chart-demo {
-  height: 460px;
-}
-
 ::ng-deep #chart {
   position: absolute;
   top: 12px;
@@ -10,7 +6,7 @@
   height: 347px;
 }
 
-::ng-deep .chart_environment {
+::ng-deep .chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
@@ -19,3 +15,18 @@
 ::ng-deep .controls-pane {
   text-align: center;
 }
+
+::ng-deep .custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+::ng-deep .custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+::ng-deep .custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}

apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html

@@ -1,5 +1,5 @@
-<div class="chart_environment">
-  <div id="custom_markup_container">
+<div class="chart-environment">
+  <div id="custom-markup-container">
     <svg version="1.1" width="820px" height="420px">
       <path
         d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
@@ -17,27 +17,15 @@
       ></path>
       <text
         transform="translate(30,89)"
-        style="
-          fill: #ffffff;
-          font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana,
-            sans-serif;
-          font-size: 36px;
-          font-weight: bold;
-        "
+        class="custom-markup-text custom-markup-text-title"
       >
         <tspan x="0" y="0">Export</tspan>
         <tspan x="0" y="38">Custom</tspan>
         <tspan x="0" y="76">Markup</tspan>
       </text>
       <text
         transform="translate(32,199)"
-        style="
-          opacity: 0.8;
-          fill: #ffffff;
-          font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana,
-            sans-serif;
-          font-size: 14px;
-        "
+        class="custom-markup-text custom-markup-text-subtitle"
       >
         <tspan x="0" y="0">Export a chart with</tspan>
         <tspan x="0" y="19.2">custom elements</tspan>

apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts

@@ -54,13 +54,33 @@ export class AppComponent {
   }
 
   prepareMarkup() {
+    const sourceContainer = document.getElementById('custom-markup-container');
+    const sourceElements = sourceContainer.querySelectorAll('*');
+
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
     svg.setAttribute('version', '1.1');
     svg.setAttribute('width', '820px');
     svg.setAttribute('height', '420px');
-    svg.innerHTML = document.getElementById('custom_markup_container').innerHTML;
+
+    const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
+    const clonedElements = clonedContainer.querySelectorAll('*');
+
+    clonedElements.forEach((clonedEl, index) => {
+      const sourceEl = sourceElements[index] as HTMLElement;
+      if (!sourceEl) return;
+
+      const computed = window.getComputedStyle(sourceEl);
+      ['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
+        const value = computed.getPropertyValue(prop)?.trim();
+        if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+          (clonedEl as SVGElement).setAttribute(prop, value);
+        }
+      });
+    });
+
+    svg.innerHTML = clonedContainer.innerHTML;
 
     const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
     group.setAttribute('transform', 'translate(305,12)');

apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx

@@ -16,15 +16,31 @@ import Form from './Form.tsx';
 
 const barPadding = 0.3;
 
-const prepareMarkup = (chartSVG: string, markup: string) => {
+const prepareMarkup = (chartSVG: string, sourceContainer: HTMLElement) => {
+  const sourceElements = sourceContainer.querySelectorAll('*');
+
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
   svg.setAttribute('version', '1.1');
   svg.setAttribute('width', '820px');
   svg.setAttribute('height', '420px');
-  svg.innerHTML = markup;
+  const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
+  const clonedElements = clonedContainer.querySelectorAll('*');
+
+  clonedElements.forEach((clonedEl, index) => {
+    const sourceEl = sourceElements[index] as HTMLElement;
+    if (!sourceEl) return;
 
+    const computed = window.getComputedStyle(sourceEl);
+    ['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
+      const value = computed.getPropertyValue(prop)?.trim();
+      if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+        (clonedEl as SVGElement).setAttribute(prop, value);
+      }
+    });
+  });
+  svg.innerHTML = clonedContainer.innerHTML;
   const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   group.setAttribute('transform', 'translate(305,12)');
   group.innerHTML = chartSVG;
@@ -40,7 +56,7 @@ function App() {
   const onClick = useCallback(() => {
     exportFromMarkup(
       prepareMarkup(chartRef.current?.instance().svg() ?? '',
-        childRef.current?.innerHTML ?? ''), {
+        childRef.current ?? document.createElement('div')), {
         width: 820,
         height: 420,
         margin: 0,
@@ -68,7 +84,7 @@ function App() {
 
   return (
     <div id="chart-demo">
-      <div className="chart_environment">
+      <div className="chart-environment">
         <Form ref={childRef} />
         <Chart
           ref={chartRef}

apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx

@@ -1,26 +1,18 @@
 import React from 'react';
 
-const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";
-
 const Form = React.forwardRef<HTMLDivElement>((_, ref) => (
-  <div id="custom_markup_container" ref={ref}>
+  <div id="custom-markup-container" ref={ref}>
     <svg width="820px" height="420px">
       <path opacity="1" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" strokeWidth="1"
         strokeLinecap="butt" fill="white" strokeLinejoin="miter"></path>
       <path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
       <path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
-      <text transform="translate(30,89)"
-        style={{
-          fill: '#FFFFFF', fontFamily, fontSize: 36, fontWeight: 'bold',
-        }}>
+      <text transform="translate(30,89)" className="custom-markup-text custom-markup-text-title">
         <tspan x="0" y="0">Export </tspan>
         <tspan x="0" y="38">Custom</tspan>
         <tspan x="0" y="76">Markup</tspan>
       </text>
-      <text transform="translate(32,199)"
-        style={{
-          opacity: 0.8, fill: '#FFFFFF', fontFamily, fontSize: 14,
-        }}>
+      <text transform="translate(32,199)" className="custom-markup-text custom-markup-text-subtitle">
         <tspan x="0" y="0">Export a chart with</tspan>
         <tspan x="0" y="19.2">custom elements</tspan>
       </text>

apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css

@@ -10,7 +10,7 @@
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
@@ -19,3 +19,18 @@
 .controls-pane {
   text-align: center;
 }
+
+.custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+.custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+.custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}

apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js

@@ -14,14 +14,36 @@ import { dataSource } from './data.js';
 import Form from './Form.js';
 
 const barPadding = 0.3;
-const prepareMarkup = (chartSVG, markup) => {
+const prepareMarkup = (chartSVG, sourceContainer) => {
+  const sourceElements = sourceContainer.querySelectorAll('*');
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
   svg.setAttribute('version', '1.1');
   svg.setAttribute('width', '820px');
   svg.setAttribute('height', '420px');
-  svg.innerHTML = markup;
+  const clonedContainer = sourceContainer.cloneNode(true);
+  const clonedElements = clonedContainer.querySelectorAll('*');
+  clonedElements.forEach((clonedEl, index) => {
+    const sourceEl = sourceElements[index];
+    if (!sourceEl) return;
+    const computed = window.getComputedStyle(sourceEl);
+    [
+      'fill',
+      'font-family',
+      'font-size',
+      'font-weight',
+      'opacity',
+      'stroke',
+      'stroke-width',
+    ].forEach((prop) => {
+      const value = computed.getPropertyValue(prop)?.trim();
+      if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+        clonedEl.setAttribute(prop, value);
+      }
+    });
+  });
+  svg.innerHTML = clonedContainer.innerHTML;
   const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   group.setAttribute('transform', 'translate(305,12)');
   group.innerHTML = chartSVG;
@@ -33,7 +55,10 @@ function App() {
   const chartRef = useRef(null);
   const onClick = useCallback(() => {
     exportFromMarkup(
-      prepareMarkup(chartRef.current?.instance().svg() ?? '', childRef.current?.innerHTML ?? ''),
+      prepareMarkup(
+        chartRef.current?.instance().svg() ?? '',
+        childRef.current ?? document.createElement('div'),
+      ),
       {
         width: 820,
         height: 420,
@@ -55,7 +80,7 @@ function App() {
   }, []);
   return (
     <div id="chart-demo">
-      <div className="chart_environment">
+      <div className="chart-environment">
         <Form ref={childRef} />
         <Chart
           ref={chartRef}

apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js

@@ -1,9 +1,8 @@
 import React from 'react';
 
-const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";
 const Form = React.forwardRef((_, ref) => (
   <div
-    id="custom_markup_container"
+    id="custom-markup-container"
     ref={ref}
   >
     <svg
@@ -30,12 +29,7 @@ const Form = React.forwardRef((_, ref) => (
       ></path>
       <text
         transform="translate(30,89)"
-        style={{
-          fill: '#FFFFFF',
-          fontFamily,
-          fontSize: 36,
-          fontWeight: 'bold',
-        }}
+        className="custom-markup-text custom-markup-text-title"
       >
         <tspan
           x="0"
@@ -58,12 +52,7 @@ const Form = React.forwardRef((_, ref) => (
       </text>
       <text
         transform="translate(32,199)"
-        style={{
-          opacity: 0.8,
-          fill: '#FFFFFF',
-          fontFamily,
-          fontSize: 14,
-        }}
+        className="custom-markup-text custom-markup-text-subtitle"
       >
         <tspan
           x="0"