Merge branch '25_2' of https://github.com/DevExpress/DevExtreme into ng-new-syntax-form-html-editor

Author: dxvladislavvolkov

.github/instructions/localization.instructions.md

@@ -0,0 +1,39 @@
+---
+applyTo: "**/localization/messages/**/*.json"
+---
+
+# CRITICAL: DO NOT REVIEW LOCALIZATION FILES
+
+These files are managed by a dedicated localization team through a separate workflow.
+
+## Absolute Prohibitions - You MUST NOT:
+
+- ❌ NEVER suggest translating English text to other languages
+- ❌ NEVER comment that text should be translated to match the locale
+- ❌ NEVER suggest alternative translations or phrasings in any language
+- ❌ NEVER comment on language consistency (e.g., "this should be in Arabic")
+- ❌ NEVER suggest changing text content for localization purposes
+- ❌ NEVER comment on which language should be used
+- ❌ NEVER suggest adding or removing message keys
+- ❌ NEVER provide language-specific style recommendations
+
+## Why These Files Are Off-Limits:
+
+Translation suggestions make PR pages UNRESPONSIVE and overwhelm human reviewers. The localization team handles all translation work through a separate quality assurance process.
+
+## The ONLY Acceptable Comments:
+
+✅ Critical JSON syntax errors that would break the build (missing commas, unclosed brackets)
+✅ Severe grammar errors (ONLY if they would cause user confusion)
+
+## Examples of FORBIDDEN Comments:
+
+- ❌ "This English text should be translated to Arabic"
+- ❌ "Translation is missing for this locale"
+- ❌ "Consider translating '(No subject)' to '(بدون موضوع)'"
+- ❌ "This text is in English but should be in German"
+- ❌ "Inconsistent language - use native translation"
+
+If you have ANY doubt about whether to comment on a localization file, DO NOT COMMENT.
+
+Focus your review on actual code files instead.

.github/workflows/testcafe_tests.yml

@@ -102,10 +102,8 @@ jobs:
           { componentFolder: "dataGrid/common", name: "dataGrid / common (3/5)", indices: "3/5" },
           { componentFolder: "dataGrid/common", name: "dataGrid / common (4/5)", indices: "4/5" },
           { componentFolder: "dataGrid/common", name: "dataGrid / common (5/5)", indices: "5/5" },
-          { componentFolder: "dataGrid/sticky/common", name: "dataGrid / sticky common" },
-          { componentFolder: "dataGrid/sticky/fixed", name: "dataGrid / sticky (1/3)", indices: "1/3" },
-          { componentFolder: "dataGrid/sticky/fixed", name: "dataGrid / sticky (2/3)", indices: "2/3" },
-          { componentFolder: "dataGrid/sticky/fixed", name: "dataGrid / sticky (3/3)", indices: "3/3" },
+          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (1/2)", indices: "1/2" },
+          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (2/2)", indices: "2/2" },
           { componentFolder: "cardView", name: "cardView" },
 
           # Scheduler tests need to be reworked to work in fluent theme
@@ -120,8 +118,7 @@ jobs:
           { componentFolder: "scheduler/timezones", name: "scheduler / timezones (Europe/Berlin)", timezone: "Europe/Berlin", theme: 'generic.light' },
           { componentFolder: "scheduler/timezones", name: "scheduler / timezones (America/Los_Angeles)", timezone: "America/Los_Angeles", theme: 'generic.light' },
 
-          { componentFolder: "editors", name: "editors (1/2)", indices: "1/2" },
-          { componentFolder: "editors", name: "editors (2/2)", indices: "2/2" },
+          { componentFolder: "editors", name: "editors" },
           { componentFolder: "navigation", name: "navigation" },
         ]
     runs-on: devextreme-shr2

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.html

@@ -57,8 +57,11 @@
     <div class="option">
       <span>Animation duration</span>
       <dx-slider [min]="0" [max]="1000" [(value)]="accordion.animationDuration">
-        <dxo-tooltip [enabled]="true" position="bottom"></dxo-tooltip>
-        <dxo-label [visible]="true"></dxo-label>
+        <dxo-slider-tooltip
+          [enabled]="true"
+          position="bottom"
+        ></dxo-slider-tooltip>
+        <dxo-slider-label [visible]="true"></dxo-slider-label>
       </dx-slider>
     </div>
     <div class="option">

apps/demos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.html

@@ -1,9 +1,9 @@
 <dx-list (onItemClick)="itemClick($event)">
-  <dxi-item *ngFor="let contact of contacts">
+  <dxi-list-item *ngFor="let contact of contacts">
     <div>{{ contact.name }}</div>
     <div>{{ contact.phone }}</div>
     <div>{{ contact.email }}</div>
-  </dxi-item>
+  </dxi-list-item>
 </dx-list>
 <dx-action-sheet
   [items]="commands"

apps/demos/Demos/Box/Overview/Angular/app/app.component.html

@@ -1,43 +1,51 @@
 <dx-box direction="row" width="100%" [height]="75">
-  <dxi-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-item>
-  <dxi-item class="rect demo-light" [ratio]="2"> ratio = 2 </dxi-item>
-  <dxi-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-item>
+  <dxi-box-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-box-item>
+  <dxi-box-item class="rect demo-light" [ratio]="2"> ratio = 2 </dxi-box-item>
+  <dxi-box-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-box-item>
 </dx-box>
 <br />
 <dx-box direction="row" width="100%" [height]="75">
-  <dxi-item class="rect demo-dark" [ratio]="0" [baseSize]="150">
+  <dxi-box-item class="rect demo-dark" [ratio]="0" [baseSize]="150">
     150px
-  </dxi-item>
-  <dxi-item class="demo-light" [ratio]="1">
+  </dxi-box-item>
+  <dxi-box-item class="demo-light" [ratio]="1">
     <dx-box
       direction="row"
       width="100%"
       [height]="75"
       align="center"
       crossAlign="center"
     >
-      <dxi-item [ratio]="0" [baseSize]="50">
+      <dxi-box-item [ratio]="0" [baseSize]="50">
         <div class="small"></div>
-      </dxi-item>
-      <dxi-item [ratio]="0" [baseSize]="50">
+      </dxi-box-item>
+      <dxi-box-item [ratio]="0" [baseSize]="50">
         <div class="small"></div>
-      </dxi-item>
-      <dxi-item [ratio]="0" [baseSize]="50">
+      </dxi-box-item>
+      <dxi-box-item [ratio]="0" [baseSize]="50">
         <div class="small"></div>
-      </dxi-item>
+      </dxi-box-item>
     </dx-box>
-  </dxi-item>
-  <dxi-item class="rect demo-dark" [ratio]="0" baseSize="10%"> 10% </dxi-item>
+  </dxi-box-item>
+  <dxi-box-item class="rect demo-dark" [ratio]="0" baseSize="10%">
+    10%
+  </dxi-box-item>
 </dx-box>
 <br />
 <dx-box direction="col" width="100%" [height]="250">
-  <dxi-item class="rect demo-dark header" [ratio]="1"> Header </dxi-item>
-  <dxi-item [ratio]="2" [baseSize]="0">
+  <dxi-box-item class="rect demo-dark header" [ratio]="1">
+    Header
+  </dxi-box-item>
+  <dxi-box-item [ratio]="2" [baseSize]="0">
     <dx-box direction="row" width="100%" [height]="125">
-      <dxi-item class="rect demo-dark" [ratio]="1"> Left Bar </dxi-item>
-      <dxi-item class="rect demo-light" [ratio]="1"> Content </dxi-item>
-      <dxi-item class="rect demo-dark" [ratio]="1"> Right Bar </dxi-item>
+      <dxi-box-item class="rect demo-dark" [ratio]="1"> Left Bar </dxi-box-item>
+      <dxi-box-item class="rect demo-light" [ratio]="1"> Content </dxi-box-item>
+      <dxi-box-item class="rect demo-dark" [ratio]="1">
+        Right Bar
+      </dxi-box-item>
     </dx-box>
-  </dxi-item>
-  <dxi-item class="rect demo-dark footer" [ratio]="1"> Footer </dxi-item>
+  </dxi-box-item>
+  <dxi-box-item class="rect demo-dark footer" [ratio]="1">
+    Footer
+  </dxi-box-item>
 </dx-box>

apps/demos/Demos/Chat/FileAttachments/client-script.js

@@ -0,0 +1 @@
+MockDate.set(new Date('2025/05/05 16:35:10'));

apps/demos/Demos/Chat/FileAttachments/jQuery/data.js

@@ -0,0 +1,56 @@
+const getTimestamp = function (date, offsetMinutes = 0) {
+  return date.getTime() + offsetMinutes * 60000;
+};
+
+const date = new Date();
+date.setHours(0, 0, 0, 0);
+
+const currentUser = {
+  id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
+  name: 'John Doe',
+};
+
+const supportAgent = {
+  id: 'd16d1a4c-5c67-4e20-b70e-2991c22747c3',
+  name: 'Support Agent',
+  avatarUrl: '../../../../images/petersmith.png',
+};
+
+const createEmptyAttachment = (name, type) => {
+  const blob = new Blob([''], { type });
+  const url = URL.createObjectURL(blob);
+
+  return {
+    name,
+    url,
+    size: 1024 * 10,
+  };
+};
+
+const screenshot1 = createEmptyAttachment('Screenshot1.jpg', 'image/jpeg');
+const screenshot2 = createEmptyAttachment('Screenshot2.jpg', 'image/jpeg');
+const screenshot3 = createEmptyAttachment('Screenshot3.jpg', 'image/jpeg');
+const instructions = createEmptyAttachment('Instructions.pdf', 'application/pdf');
+
+const messages = [
+  {
+    id: new DevExpress.data.Guid(),
+    timestamp: getTimestamp(date, -9),
+    author: supportAgent,
+    text: 'Hello, John!\nHow can I assist you today?',
+  },
+  {
+    id: new DevExpress.data.Guid(),
+    timestamp: getTimestamp(date, -7),
+    author: currentUser,
+    text: "Hi, I'm having trouble accessing my account.\nIt says my password is incorrect. I’ve attached some screenshots for you to check.",
+    attachments: [screenshot1, screenshot2, screenshot3],
+  },
+  {
+    id: new DevExpress.data.Guid(),
+    timestamp: getTimestamp(date, -7),
+    author: supportAgent,
+    text: 'Thanks for the screenshots! I can help you with that. Please refer to the attached file for instructions to restore access.',
+    attachments: [instructions],
+  },
+];

apps/demos/Demos/Chat/FileAttachments/jQuery/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <script src="data.js"></script>
+    <script src="index.js"></script>
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div class="chat-container">
+        <div id="chat"></div>
+      </div>
+    </div>
+  </body>
+</html>

apps/demos/Demos/Chat/FileAttachments/jQuery/index.js

@@ -0,0 +1,66 @@
+$(() => {
+  const customStore = new DevExpress.data.CustomStore({
+    key: 'id',
+    load: async () => messages,
+    insert: async (message) => {
+      messages.push(message);
+      return message;
+    },
+  });
+
+  const dataSource = new DevExpress.data.DataSource({
+    store: customStore,
+    paginate: false,
+  });
+
+  const uploadedFilesMap = new Map();
+
+  $('#chat').dxChat({
+    height: 600,
+    dataSource,
+    reloadOnChange: false,
+    user: currentUser,
+    fileUploaderOptions: {
+      uploadFile: () => {},
+      onValueChanged(e) {
+        e.value.forEach((file) => {
+          const url = URL.createObjectURL(file);
+          uploadedFilesMap.set(file.name, url);
+        });
+      },
+    },
+    onMessageEntered(e) {
+      const { message } = e;
+
+      const attachmentsWithUrls = message.attachments?.map((attachment) => {
+        const url = uploadedFilesMap.get(attachment.name);
+        return { ...attachment, url };
+      });
+
+      dataSource.store().push([{
+        type: 'insert',
+        data: {
+          id: new DevExpress.data.Guid(),
+          ...message,
+          attachments: attachmentsWithUrls,
+        },
+      }]);
+    },
+    onAttachmentDownloadClick(e) {
+      const { attachment } = e;
+
+      if (!attachment?.url) {
+        return;
+      }
+
+      const link = document.createElement('a');
+      link.href = attachment.url;
+      link.download = attachment.name;
+      document.body.appendChild(link);
+
+      link.click();
+
+      document.body.removeChild(link);
+    },
+  }).dxChat('instance');
+});

apps/demos/Demos/Chat/FileAttachments/jQuery/styles.css

@@ -0,0 +1,23 @@
+.demo-container {
+  min-width: 720px;
+}
+
+.chat-container {
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.dx-chat {
+  max-width: 480px;
+}
+
+.caption {
+  font-size: var(--dx-font-size-sm);
+  font-weight: 500;
+}
+
+.dx-avatar {
+  border: 1px solid var(--dx-color-border);
+}