Merge branch '24_1' of https://github.com/jdvictoria/DevExtreme into …

…24_1
jdvictoria · May 8, 2024 · 5d22106 · 5d22106
2 parents b065448 + ce7f093
commit 5d22106
Show file tree

Hide file tree

Showing 49 changed files with 341 additions and 163 deletions.
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
@@ -47,12 +47,20 @@ export class AppComponent {
   }
 
   prepareMarkup() {
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">${
-      document.getElementById('custom_markup_container').innerHTML
-    }<g transform="translate(305,12)">${
-      this.chart.instance.svg()
-    }</g>`
-            + '</svg>';
+    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 group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    group.setAttribute('transform', 'translate(305,12)');
+    group.innerHTML = this.chart.instance.svg();
+    svg.appendChild(group);
+
+    return svg;
   }
 }
 

diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx b/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
@@ -10,10 +10,22 @@ import Form from './Form.tsx';
 
 const barPadding = 0.3;
 
-function prepareMarkup(chartSvg, markup) {
-  return '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">'
-    + `${markup}<g transform="translate(305,12)">${chartSvg}</g></svg>`;
-}
+const prepareMarkup = (chartSVG, markup) => {
+  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 group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  group.setAttribute('transform', 'translate(305,12)');
+  group.innerHTML = chartSVG;
+  svg.appendChild(group);
+
+  return svg;
+};
 
 function App() {
   const childRef = useRef(null);

diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
@@ -14,12 +14,20 @@ import { dataSource } from './data.js';
 import Form from './Form.js';
 
 const barPadding = 0.3;
-function prepareMarkup(chartSvg, markup) {
-  return (
-    '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">'
-    + `${markup}<g transform="translate(305,12)">${chartSvg}</g></svg>`
-  );
-}
+const prepareMarkup = (chartSVG, markup) => {
+  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 group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  group.setAttribute('transform', 'translate(305,12)');
+  group.innerHTML = chartSVG;
+  svg.appendChild(group);
+  return svg;
+};
 function App() {
   const childRef = useRef(null);
   const chartRef = useRef(null);

diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue
@@ -76,8 +76,22 @@ import Form from './Form.vue';
 const form = ref();
 const chart = ref();
 
-const prepareMarkup = (chartSVG, markup) => `
-   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="820px" height="420px">${markup}<g transform="translate(305,12)">${chartSVG}</g></svg>`;
+const prepareMarkup = (chartSVG, markup) => {
+  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 group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+  group.setAttribute('transform', 'translate(305,12)');
+  group.innerHTML = chartSVG;
+  svg.appendChild(group);
+
+  return svg;
+};
 
 function onClick() {
   const chartSVG = chart.value.instance.svg();

diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.js b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.js
@@ -66,11 +66,19 @@ $(() => {
   });
 
   function prepareMarkup() {
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">${
-      $('#custom_markup_container').html()
-    }<g transform="translate(305,12)">${
-      chart.svg()
-    }</g>`
-            + '</svg>';
+    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 group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+    group.setAttribute('transform', 'translate(305,12)');
+    group.innerHTML = chart.svg();
+    svg.appendChild(group);
+
+    return svg;
   }
 });
diff --git a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css
@@ -26,3 +26,18 @@
   color: var(--dx-texteditor-color-label);
   font-size: 10px;
 }
+
+::ng-deep #splitter > .dx-splitter-item:first-child > .dx-splitter-item-content:focus {
+  border-start-start-radius: 8px;
+  border-end-start-radius: 8px;
+}
+
+::ng-deep #splitter > .dx-splitter-item:last-child > .dx-splitter-item-content:focus {
+  border-end-end-radius: 8px;
+  border-start-end-radius: 8px;
+}
+
+::ng-deep .dx-splitter-item-content:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--dx-color-primary);
+}
diff --git a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.html b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.html
@@ -35,11 +35,7 @@
           ></dxi-item>
 
           <ng-container *ngFor="let pane of paneContentTemplates">
-            <div
-              *dxTemplate="let data of pane.name"
-              class="pane-content"
-              tabindex="0"
-            >
+            <div *dxTemplate="let data of pane.name" tabindex="0">
               <ng-template
                 [ngTemplateOutlet]="customPaneTemplate"
                 [ngTemplateOutletContext]="{ data: data, title: pane.name }"
@@ -51,11 +47,7 @@
       </dxi-item>
 
       <ng-container *ngFor="let pane of paneContentTemplates">
-        <div
-          *dxTemplate="let data of pane.name"
-          class="pane-content"
-          tabindex="0"
-        >
+        <div *dxTemplate="let data of pane.name" tabindex="0">
           <ng-template
             [ngTemplateOutlet]="customPaneTemplate"
             [ngTemplateOutletContext]="{ data: data, title: pane.name }"
@@ -73,7 +65,7 @@
   ></dxi-item>
 
   <ng-container *ngFor="let pane of paneContentTemplates">
-    <div *dxTemplate="let data of pane.name" class="pane-content" tabindex="0">
+    <div *dxTemplate="let data of pane.name" tabindex="0">
       <ng-template
         [ngTemplateOutlet]="customPaneTemplate"
         [ngTemplateOutletContext]="{ data: data, title: pane.name }"
@@ -84,9 +76,11 @@
 </dx-splitter>
 
 <ng-template #customPaneTemplate let-data="data" let-title="title">
-  <div class="pane-title">{{ title }}</div>
-  <div class="pane-state">{{ getPaneState(data) }}</div>
-  <ng-container *ngFor="let item of filterDimensionOptions(data)">
-    <div class="pane-option">{{ item.key }}: {{ item.value }}</div>
-  </ng-container>
+  <div class="pane-content">
+    <div class="pane-title">{{ title }}</div>
+    <div class="pane-state">{{ getPaneState(data) }}</div>
+    <ng-container *ngFor="let item of filterDimensionOptions(data)">
+      <div class="pane-option">{{ item.key }}: {{ item.value }}</div>
+    </ng-container>
+  </div>
 </ng-template>
diff --git a/apps/demos/Demos/Splitter/Overview/React/App.tsx b/apps/demos/Demos/Splitter/Overview/React/App.tsx
@@ -2,10 +2,8 @@ import React from 'react';
 import Splitter, { Item } from 'devextreme-react/splitter';
 import PaneContent from './PaneContent.tsx';
 
-const PaneContentWithTitleRender = (title, initialSize?: string) => {
-  const PaneContentRender = (data) => (<PaneContent title={title} {...data} size={initialSize} />);
-  return PaneContentRender;
-}
+const PaneContentWithTitle = (title: string, initialSize?: string) => (data) => (<PaneContent title={title} {...data} size={initialSize} />);
+
 const App = () => (
   <React.Fragment>
     <Splitter
@@ -15,7 +13,7 @@ const App = () => (
         resizable={true}
         size="140px"
         minSize="70px"
-        render={PaneContentWithTitleRender('Left Pane', '140px')}
+        render={PaneContentWithTitle('Left Pane', '140px')}
       />
       <Item
         resizable={true}
@@ -27,7 +25,7 @@ const App = () => (
             resizable={true}
             collapsible={true}
             maxSize="75%"
-            render={PaneContentWithTitleRender('Central Pane')}
+            render={PaneContentWithTitle('Central Pane')}
           />
           <Item
             resizable={true}
@@ -39,18 +37,18 @@ const App = () => (
                 collapsible={true}
                 size="30%"
                 minSize="5%"
-                render={PaneContentWithTitleRender('Nested Left Pane', '30%')}
+                render={PaneContentWithTitle('Nested Left Pane', '30%')}
               />
               <Item
                 resizable={true}
-                render={PaneContentWithTitleRender('Nested Central Pane')}
+                render={PaneContentWithTitle('Nested Central Pane')}
               />
               <Item
                 resizable={true}
                 collapsible={true}
                 size="30%"
                 minSize="5%"
-                render={PaneContentWithTitleRender('Nested Right Pane', '30%')}
+                render={PaneContentWithTitle('Nested Right Pane', '30%')}
               />
             </Splitter>
           </Item>
@@ -60,7 +58,7 @@ const App = () => (
         resizable={false}
         collapsible={false}
         size="140px"
-        render={PaneContentWithTitleRender('Right Pane', '140px')}
+        render={PaneContentWithTitle('Right Pane', '140px')}
       />
     </Splitter>
   </React.Fragment>

diff --git a/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx b/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 
 const dimensionOptions = new Set(['size', 'minSize', 'maxSize']);
 
@@ -16,16 +16,25 @@ const getFilteredDimensionOptions = (data) => Object.entries(data)
   .filter(([key, value]) => dimensionOptions.has(key) && value)
   .map(([key, value]) => ({ key, value }));
 
-const PaneContent = (data) => (
-  <div className="pane-content" tabIndex={0}>
-    <div className="pane-title">{data.title}</div>
-    <div className="pane-state">{getPaneState(data)}</div>
-    {getFilteredDimensionOptions(data).map((item, index) => (
-      <div className="pane-option" key={index}>
-        {item.key}: {item.value}
-      </div>
-    ))}
-  </div>
-);
+const PaneContent = (data: any) => {
+  const paneContentRef = useRef(null);
+
+  useEffect(() => {
+    const element = paneContentRef.current.parentNode;
+    element.setAttribute('tabIndex', '0');
+  });
+
+  return (
+    <div ref={paneContentRef} className="pane-content">
+      <div className="pane-title">{data.title}</div>
+      <div className="pane-state">{getPaneState(data)}</div>
+      {getFilteredDimensionOptions(data).map((item, index) => (
+        <div className="pane-option" key={index}>
+          {item.key}: {item.value}
+        </div>
+      ))}
+    </div>
+  );
+};
 
 export default PaneContent;
diff --git a/apps/demos/Demos/Splitter/Overview/React/styles.css b/apps/demos/Demos/Splitter/Overview/React/styles.css
@@ -30,3 +30,18 @@
   color: var(--dx-texteditor-color-label);
   font-size: 10px;
 }
+
+#splitter > .dx-splitter-item:first-child > .dx-splitter-item-content:focus {
+  border-start-start-radius: 8px;
+  border-end-start-radius: 8px;
+}
+
+#splitter > .dx-splitter-item:last-child > .dx-splitter-item-content:focus {
+  border-end-end-radius: 8px;
+  border-start-end-radius: 8px;
+}
+
+.dx-splitter-item-content:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--dx-color-primary);
+}
diff --git a/apps/demos/Demos/Splitter/Overview/ReactJs/App.js b/apps/demos/Demos/Splitter/Overview/ReactJs/App.js
@@ -2,32 +2,30 @@ import React from 'react';
 import Splitter, { Item } from 'devextreme-react/splitter';
 import PaneContent from './PaneContent.js';
 
-const PaneContentWithTitleRender = (title, initialSize) => {
-  const PaneContentRender = (data) => (
+const PaneContentWithTitle = (title, initialSize) => (data) =>
+  (
     <PaneContent
       title={title}
       {...data}
       size={initialSize}
     />
   );
-  return PaneContentRender;
-};
 const App = () => (
   <React.Fragment>
     <Splitter id="splitter">
       <Item
         resizable={true}
         size="140px"
         minSize="70px"
-        render={PaneContentWithTitleRender('Left Pane', '140px')}
+        render={PaneContentWithTitle('Left Pane', '140px')}
       />
       <Item resizable={true}>
         <Splitter orientation="vertical">
           <Item
             resizable={true}
             collapsible={true}
             maxSize="75%"
-            render={PaneContentWithTitleRender('Central Pane')}
+            render={PaneContentWithTitle('Central Pane')}
           />
           <Item
             resizable={true}
@@ -39,18 +37,18 @@ const App = () => (
                 collapsible={true}
                 size="30%"
                 minSize="5%"
-                render={PaneContentWithTitleRender('Nested Left Pane', '30%')}
+                render={PaneContentWithTitle('Nested Left Pane', '30%')}
               />
               <Item
                 resizable={true}
-                render={PaneContentWithTitleRender('Nested Central Pane')}
+                render={PaneContentWithTitle('Nested Central Pane')}
               />
               <Item
                 resizable={true}
                 collapsible={true}
                 size="30%"
                 minSize="5%"
-                render={PaneContentWithTitleRender('Nested Right Pane', '30%')}
+                render={PaneContentWithTitle('Nested Right Pane', '30%')}
               />
             </Splitter>
           </Item>
@@ -60,7 +58,7 @@ const App = () => (
         resizable={false}
         collapsible={false}
         size="140px"
-        render={PaneContentWithTitleRender('Right Pane', '140px')}
+        render={PaneContentWithTitle('Right Pane', '140px')}
       />
     </Splitter>
   </React.Fragment>