Merge branch '24_2' of github.com:DevExpress/DevExtreme into Paginati…

…on_Localization_24_2

apps/demos/Demos/HtmlEditor/OutputFormats/Angular/app/app.component.ts

@@ -1,7 +1,6 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import 'devextreme/ui/html_editor/converters/markdown';
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
 import { DxHtmlEditorModule, DxHtmlEditorTypes } from 'devextreme-angular/ui/html-editor';

apps/demos/Demos/HtmlEditor/OutputFormats/React/App.tsx

@@ -4,7 +4,6 @@ import ButtonGroup, { Item as ButtonItem } from 'devextreme-react/button-group';
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
 import { markup } from './data.ts';
-import 'devextreme/ui/html_editor/converters/markdown';
 
 const sizeValues = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'];
 const fontValues = ['Arial', 'Courier New', 'Georgia', 'Impact', 'Lucida Console', 'Tahoma', 'Times New Roman', 'Verdana'];

apps/demos/Demos/HtmlEditor/OutputFormats/ReactJs/App.js

@@ -4,7 +4,6 @@ import ButtonGroup, { Item as ButtonItem } from 'devextreme-react/button-group';
 import prettier from 'prettier/standalone';
 import parserHtml from 'prettier/parser-html';
 import { markup } from './data.js';
-import 'devextreme/ui/html_editor/converters/markdown';
 
 const sizeValues = ['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt'];
 const fontValues = [

apps/demos/Demos/HtmlEditor/OutputFormats/Vue/App.vue

@@ -61,7 +61,6 @@ import {
 import * as prettier from 'prettier/standalone';
 import * as parserHtml from 'prettier/parser-html';
 import { markup } from './data.ts';
-import 'devextreme/ui/html_editor/converters/markdown';
 
 const valueContent = ref(markup);
 const selectedItems = ref([{ text: 'Html' }]);

apps/react-storybook/stories/chat/Chat.stories.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import {Chat, ChatTypes} from 'devextreme-react/chat'
 import type {Meta, StoryObj} from '@storybook/react';
-import { firstAuthor, secondAuthor, initialMessages } from './data';
+import DataSource from 'devextreme/data/data_source';
+import CustomStore from 'devextreme/data/custom_store';
+import { firstAuthor, secondAuthor, initialMessages, longError } from './data';
 import { Popup } from 'devextreme-react/popup';
 
 import './styles.css';
@@ -34,6 +36,7 @@ export const Overview: Story = {
     args: {
         items: initialMessages,
         user: firstAuthor,
+        errors: [],
         ...commonArgs,
     },
     argTypes: {
@@ -48,6 +51,23 @@ export const Overview: Story = {
         },
         hint: {
             control: 'text',
+        },
+        errors: {
+            control: 'select',
+            options: ['None', 'One error', 'One error with long text', 'Three errors'],
+            mapping: {
+                ['None']: [],
+                ['One error']: [
+                    { id: 1, message: 'Error Message 1. Error Description...' }
+                ],
+                ['One error with long text']: [longError],
+                ['Three errors']: [
+                    { id: 1, message: 'Error Message 1. Error Description...' },
+                    { id: 2, message: 'Error Message 2. Message was not sent' },
+                    longError,
+                ],
+            },
+            defaultValue: 'Empty',
         }
     },
     render: ({
@@ -57,6 +77,7 @@ export const Overview: Story = {
         rtlEnabled,
         user,
         items,
+        errors,
         visible,
         hint,
         activeStateEnabled,
@@ -84,6 +105,7 @@ export const Overview: Story = {
                     disabled={disabled}
                     rtlEnabled={rtlEnabled}
                     user={user}
+                    errors={errors}
                     onMessageSend={onMessageSend}
                     visible={visible}
                     hint={hint}
@@ -167,6 +189,74 @@ export const EmptyView: Story = {
     }
 }
 
+export const DataLoading: Story = {
+    args: {
+        items: initialMessages,
+        user: firstAuthor,
+        ...commonArgs,
+    },
+    argTypes: {
+        user: {
+            control: 'select',
+            options: [firstAuthor.name, secondAuthor.name],
+            mapping: {
+                [firstAuthor.name]: firstAuthor,
+                [secondAuthor.name]: secondAuthor,
+            },
+            defaultValue: firstAuthor.name,
+        },
+        hint: {
+            control: 'text',
+        },
+    },
+    render: ({
+        width,
+        height,
+        disabled,
+        rtlEnabled,
+        user,
+        visible,
+        hint,
+        activeStateEnabled,
+        hoverStateEnabled,
+        focusStateEnabled,
+    }) => {       
+        const dataSource = new DataSource({
+            store: new CustomStore({
+                load: () => {
+                  const promise = new Promise((resolve) => {
+                    setTimeout(() => {
+                      resolve(initialMessages);
+                    }, 3000);
+                  });
+
+                  return promise;
+                },
+            }),
+            paginate: false,
+        });
+
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <Chat
+                    width={width}
+                    height={height}
+                    dataSource={dataSource}
+                    disabled={disabled}
+                    rtlEnabled={rtlEnabled}
+                    user={user}
+                    visible={visible}
+                    hint={hint}
+                    activeStateEnabled={activeStateEnabled}
+                    focusStateEnabled={focusStateEnabled}
+                    hoverStateEnabled={hoverStateEnabled}
+                >
+                </Chat>
+            </div>
+        );
+    }
+}
+
 export const PopupIntegration: Story = {
     args: {
         items: initialMessages,

apps/react-storybook/stories/chat/data.ts

@@ -74,3 +74,5 @@ export const initialMessages: ChatTypes.Message[] = [
         text: "Great! Looking forward to it!"
     }
 ];
+
+export const longError = { id: '1234', message: 'Error Message. An unexpected issue occurred while processing your request. Please check your internet connection or contact support for further assistance.' };

e2e/testcafe-devextreme/tests/chat/errorList.ts

@@ -0,0 +1,77 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import Chat from 'devextreme-testcafe-models/chat';
+import { createUser } from './data';
+import url from '../../helpers/getPageUrl';
+import { createWidget } from '../../helpers/createWidget';
+import { getFullThemeName, testScreenshot } from '../../helpers/themeUtils';
+
+fixture.disablePageReloads`ChatErrorList`
+  .page(url(__dirname, '../container.html'));
+
+test('Errorlist appearance', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
+
+  await testScreenshot(t, takeScreenshot, 'Errorlist with one error.png', { element: '#container' });
+
+  await chat.option('errors', [
+    { id: 1, message: 'Error Message 1. Error Description...' },
+    { id: 2, message: 'Error Message 2. Message was not sent' },
+    { id: 3, message: 'Error Message 3. An unexpected issue occurred while processing your request. Please check your internet connection or contact support for further assistance.' },
+  ]);
+
+  await testScreenshot(t, takeScreenshot, 'Errorlist with long text in error.png', {
+    element: '#container',
+    shouldTestInCompact: true,
+    compactCallBack: async () => {
+      await chat.repaint();
+    },
+  });
+
+  const darkTheme = getFullThemeName().replace('light', 'dark');
+  await testScreenshot(t, takeScreenshot, 'Errorlist with long text in error.png', { element: '#container', theme: darkTheme });
+
+  await chat.option('rtlEnabled', true);
+
+  await testScreenshot(t, takeScreenshot, 'Errorlist appearance in RTL mode.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+  const msInDay = 86400000;
+  const today = new Date().setHours(7, 22, 0, 0);
+  const yesterday = today - msInDay;
+
+  const items = [{
+    timestamp: yesterday,
+    author: userSecond,
+    text: 'Message text 1',
+  }, {
+    timestamp: yesterday,
+    author: userSecond,
+    text: 'Message text 2',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'Message text 3',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'Message text 4',
+  }, {
+    timestamp: today,
+    author: userFirst,
+    text: 'Message text 5',
+  }];
+
+  return createWidget('dxChat', {
+    items,
+    user: userFirst,
+    width: 400,
+    height: 600,
+    errors: [{ id: 1, message: 'Error Message 1. Error Description...' }],
+  });
+});

e2e/testcafe-devextreme/tests/dataGrid/accessibility/fixedColumns.ts

@@ -152,7 +152,9 @@ test('Accessibility: Scrollable should have focusable element when navigate out
   await createWidget('dxButton', { text: 'Focus' }, '#myButton');
 
   await createWidget('dxDataGrid', getGridConfig());
-});
+}).after(async () => ClientFunction(() => {
+  $('#myButton').remove();
+})());
 
 test('Accessibility: Scrollable should have focusable when fixed on the right side columns are focused', async (t) => {
   const dataGrid = new DataGrid('#container');

e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts

@@ -147,7 +147,9 @@ safeSizeTest('The placeholder should appear when a cross-component dragging rows
       },
     }, '#otherContainer'),
   ]);
-});
+}).after(async () => ClientFunction(() => {
+  $('body').css('display', '');
+})());
 
 safeSizeTest('The cross-component drag and drop rows should work when there are fixed columns', async (t) => {
   const dataGrid = new DataGrid('#container');
@@ -254,7 +256,9 @@ safeSizeTest('The cross-component drag and drop rows should work when there are
       },
     }, '#otherContainer'),
   ]);
-});
+}).after(async () => ClientFunction(() => {
+  $('body').css('display', '');
+})());
 
 safeSizeTest('The cross-component drag and drop rows should not block rows', async (t) => {
   const dataGrid = new DataGrid('#container');
@@ -359,7 +363,9 @@ safeSizeTest('The cross-component drag and drop rows should not block rows', asy
       },
     }, '#otherContainer'),
   ]);
-});
+}).after(async () => ClientFunction(() => {
+  $('body').css('display', '');
+})());
 
 safeSizeTest('Virtual rendering during auto scrolling should not cause errors in onDragChange', async (t) => {
   const dataGrid = new DataGrid('#container');

e2e/testcafe-devextreme/tests/dataGrid/scrolling.ts

@@ -946,10 +946,10 @@ safeSizeTest('Rows are rendered properly when window content is scrolled (T10703
 }, [800, 800]).before(async () => {
   const renderContent = ClientFunction(() => {
     for (let i = 0; i < 100; i += 1) {
-      $('body').prepend('<br/>');
+      $('body').prepend('<br class="myBr" />');
     }
     for (let i = 0; i < 100; i += 1) {
-      $('body').append('<br/>');
+      $('body').append('<br class="myBr" />');
     }
   });
 
@@ -975,7 +975,9 @@ safeSizeTest('Rows are rendered properly when window content is scrolled (T10703
       mode: 'virtual',
     },
   });
-});
+}).after(async () => ClientFunction(() => {
+  $('.myBr').remove();
+})());
 
 // T1129252
 test.meta({ unstable: true })('The data should display correctly after changing the dataSource and focusedRowIndex options when scroll position is at the end', async (t) => {

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumns.ts

@@ -1085,3 +1085,41 @@ borderConfigs.forEach(({ showRowLines, showColumnLines, showBorders }) => {
     }));
   });
 });
+
+safeSizeTest('The simulated scrollbar should display correctly when there are sticky columns', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scrollbarVerticalThumbTrack = dataGrid.getScrollBarThumbTrack('horizontal');
+
+  await t.hover(scrollbarVerticalThumbTrack);
+  await takeScreenshot('simulated_scrollbar_with_sticky_columns_1.png', dataGrid.element);
+
+  // act
+  await t
+    .drag(scrollbarVerticalThumbTrack, 600, 0)
+    .wait(1000);
+
+  await takeScreenshot('simulated_scrollbar_with_sticky_columns_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  scrolling: {
+    useNative: false,
+  },
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'left';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'left';
+
+    columns[8].fixed = true;
+    columns[8].fixedPosition = 'right';
+    columns[9].fixed = true;
+    columns[9].fixedPosition = 'right';
+  },
+}));