Merge branch '25_2' into update_jquery_demo

Author: Tucchhaa

.github/workflows/demos_visual_tests_frameworks.yml

@@ -35,7 +35,7 @@ jobs:
     needs: check-should-run
     if: needs.check-should-run.outputs.should-run == 'true'
     env:
-      NODE_OPTIONS: "--max-old-space-size=8192"
+      NODE_OPTIONS: --max-old-space-size=8192
     timeout-minutes: 40
 
     steps:
@@ -152,7 +152,7 @@ jobs:
       if: github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'force all tests')
       working-directory: apps/demos
       env:
-        NODE_OPTIONS: "--max-old-space-size=8192"
+        NODE_OPTIONS: --max-old-space-size=8192
       run: pnpx nx prepare-bundles
 
     - name: Demos - Run tsc

.github/workflows/qunit_tests.yml

@@ -148,19 +148,15 @@ jobs:
       matrix:
         constel: [
           'ui',
-          'ui.widgets(1/3)',
-          'ui.widgets(2/3)',
-          'ui.widgets(3/3)',
+          'ui.widgets(1/2)',
+          'ui.widgets(2/2)',
           'ui.editors(1/2)',
           'ui.editors(2/2)',
           'ui.htmlEditor',
-          'ui.grid(1/4)',
-          'ui.grid(2/4)',
-          'ui.grid(3/4)',
-          'ui.grid(4/4)',
-          'ui.scheduler(1/3)',
-          'ui.scheduler(2/3)',
-          'ui.scheduler(3/3)',
+          'ui.grid(1/2)',
+          'ui.grid(2/2)',
+          'ui.scheduler(1/2)',
+          'ui.scheduler(2/2)',
           'viz'
         ]
 

.github/workflows/testcafe_tests.yml

@@ -70,7 +70,9 @@ jobs:
 
     - name: Build
       shell: bash
-      run: pnpx nx build devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
+      run: pnpx nx build devextreme --uglify
 
     - name: Zip artifacts
       working-directory: ./packages/devextreme
@@ -92,18 +94,13 @@ jobs:
       fail-fast: false
       matrix:
         ARGS: [
-          { componentFolder: "accessibility", name: "accessibility (1/2)", indices: "1/2" },
-          { componentFolder: "accessibility", name: "accessibility (2/2)", indices: "2/2" },
+          { componentFolder: "accessibility", name: "accessibility" },
           { componentFolder: "common", name: "common" },
 
           # Grids tests need to be reworked to work in fluent theme
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (1/5)", indices: "1/5" },
-          { componentFolder: "dataGrid/common", name: "dataGrid / common (2/5)", indices: "2/5" },
-          { 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", name: "dataGrid / sticky (1/2)", indices: "1/2" },
-          { componentFolder: "dataGrid/sticky", name: "dataGrid / sticky (2/2)", indices: "2/2" },
+          { componentFolder: "dataGrid", name: "dataGrid (1/3)", indices: "1/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (2/3)", indices: "2/3" },
+          { componentFolder: "dataGrid", name: "dataGrid (3/3)", indices: "3/3" },
           { componentFolder: "cardView", name: "cardView" },
 
           # Scheduler tests need to be reworked to work in fluent theme
@@ -162,8 +159,8 @@ jobs:
       run: |
         echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
-    - uses: actions/cache@v4
-      name: Setup pnpm cache
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
       with:
         path: |
           ${{ env.STORE_PATH }}
@@ -177,6 +174,8 @@ jobs:
 
     - name: Run TestCafe tests
       working-directory: ./e2e/testcafe-devextreme
+      env:
+        NODE_OPTIONS: --max-old-space-size=8192
       run: |
         if [ "${{ matrix.ARGS.theme }}" != "" ]; then
           THEME="--theme ${{ matrix.ARGS.theme }}"

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/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);
+}