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

…24_2_update_demos_menu

apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue

@@ -44,7 +44,7 @@
           </div>
         </template>
       </template>
-    <DxChat/>
+    </DxChat>
   </div>
 </template>
 

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

@@ -3,9 +3,8 @@
     class="employees"
     [ngClass]="pageSize === 4 ? 'employees--forth' : 'employees--six'"
   >
-    @for (employee of pageEmployees; track employee.ID) {
-    <employee-card [employee]="employee"></employee-card>
-    }
+    <employee-card *ngFor="let employee of pageEmployees" [employee]="employee">
+    </employee-card>
   </div>
 
   <dx-pagination

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

@@ -45,6 +45,7 @@ test('Chat: avatar', async (t) => {
 
 test('Chat: showAvatar set to false', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
   await testScreenshot(t, takeScreenshot, 'Avatar with showAvatar set to false.png', { element: '#chat' });
 
   await t

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

@@ -13,6 +13,7 @@ test('Chat: messagebox', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   const chat = new Chat('#chat');
+
   const shortText = getShortText();
   const longText = getLongText(false, 5);
 

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

@@ -116,7 +116,6 @@ test('Messagelist appearance with scrollbar', async (t) => {
 
 test('Messagelist should scrolled to the latest messages after being rendered inside an invisible element', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
   const tabPanel = new TabPanel('#container');
 
   await t
@@ -185,8 +184,8 @@ test('Messagelist with loadindicator appearance on initial loading', async (t) =
 });
 
 test('Messagelist with messageTemplate', async (t) => {
-  const chat = new Chat('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const chat = new Chat('#container');
 
   await testScreenshot(t, takeScreenshot, 'Messagelist with message template.png', { element: '#container' });
 

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

@@ -13,9 +13,10 @@ fixture.disablePageReloads`ChatTypingIndicator`
 
 test('Chat: typing indicator with emptyview', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-
   const chat = new Chat('#container');
 
+  await chat.repaint();
+
   await testScreenshot(t, takeScreenshot, 'Typing indicator with emptyview.png', {
     element: '#container',
     shouldTestInCompact: true,

e2e/testcafe-devextreme/tests/scheduler/dragAndDrop/T1263508.ts

@@ -0,0 +1,97 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { ClientFunction, Selector } from 'testcafe';
+import { MouseAction, MouseUpEvents } from '../../../helpers/mouseUpEvents';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Scheduler Drag-and-Drop Fix`
+  .page(url(__dirname, '../../container.html'));
+
+const DRAGGABLE_ITEM_CLASS = 'dx-card';
+const draggingGroupName = 'appointmentsGroup';
+
+const initList = ClientFunction(() => {
+  $('<div>', { id: 'list' }).appendTo('#parentContainer');
+});
+
+const addTasksToList = ClientFunction((tasks) => {
+  tasks.forEach((task) => {
+    $('<div>', {
+      class: 'dx-card',
+      text: task.text,
+    }).appendTo('#list');
+  });
+});
+
+const createItemElement = async (task) => {
+  await createWidget('dxDraggable', {
+    group: draggingGroupName,
+    data: task,
+    clone: true,
+    onDragStart(e) {
+      e.itemData = e.fromData;
+    },
+  }, `.${DRAGGABLE_ITEM_CLASS}:contains(${task.text})`);
+};
+
+test('Scheduler - The \'Cannot read properties of undefined (reading \'getTime\')\' error is thrown on an attempt to drag an outside element if the previous drag operation was canceled', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const draggableAppointment = scheduler.getAppointment('Book').element;
+  const targetCell = scheduler.getDateTableCell(5, 0);
+  const draggableItem = Selector(`.${DRAGGABLE_ITEM_CLASS}`).withText('Brochures');
+
+  await t.expect(scheduler.element.exists).ok();
+
+  await MouseUpEvents.disable(MouseAction.dragToElement);
+
+  await t
+    .dragToElement(draggableAppointment, targetCell)
+    .pressKey('esc');
+
+  await MouseUpEvents.enable(MouseAction.dragToElement);
+
+  await t
+    .expect(draggableItem.exists)
+    .ok()
+    .dragToElement(draggableItem, targetCell);
+
+  const newAppointment = scheduler.getAppointment('Brochures');
+
+  await t
+    .expect(newAppointment.element.exists)
+    .ok();
+}).before(async () => {
+  const tasks = [
+    { text: 'Brochures' },
+  ];
+
+  await initList();
+  await addTasksToList(tasks);
+  await Promise.all(tasks.map((task) => createItemElement(task)));
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: [
+      {
+        text: 'Book',
+        startDate: new Date('2021-04-26T19:00:00.000Z'),
+        endDate: new Date('2021-04-26T20:00:00.000Z'),
+      },
+    ],
+    currentDate: new Date(2021, 3, 26),
+    startDayHour: 9,
+    height: 600,
+    editing: true,
+    appointmentDragging: {
+      group: draggingGroupName,
+      onDragEnd(e) {
+        e.cancel = e.event.ctrlKey;
+      },
+      onRemove(e) {
+        e.component.deleteAppointment(e.itemData);
+      },
+      onAdd(e) {
+        e.component.addAppointment(e.itemData);
+      },
+    },
+  });
+});

e2e/testcafe-devextreme/tests/treeList/editing/editing.ts

@@ -0,0 +1,59 @@
+import TreeList from 'devextreme-testcafe-models/treeList';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture`Treelist - Editing`.page(url(__dirname, '../../container.html'));
+
+// T1247158
+test('TreeList - Insertafterkey doesn\'t work on children nodes', async (t) => {
+  const treeList = new TreeList('#container');
+  const expectedInsertedRowIndex = 2;
+
+  await t
+    .click(treeList.getDataCell(1, 0).element)
+    .pressKey('ctrl+enter')
+    .expect(treeList.getDataRow(expectedInsertedRowIndex).isInserted)
+    .ok();
+}).before(async () => createWidget('dxTreeList', {
+  dataSource: [
+    {
+      ID: 1,
+      Head_ID: -1,
+      Full_Name: 'John Heart',
+    },
+    {
+      ID: 2,
+      Head_ID: 1,
+      Full_Name: 'Samantha Bright',
+    },
+  ],
+  rootValue: -1,
+  keyExpr: 'ID',
+  parentIdExpr: 'Head_ID',
+  columns: ['Full_Name'],
+  editing: {
+    mode: 'batch',
+    allowAdding: true,
+    allowUpdating: true,
+    useIcons: true,
+  },
+  focusedRowEnabled: true,
+  expandedRowKeys: [1],
+  onKeyDown(e) {
+    if (e.event.ctrlKey && e.event.key === 'Enter') {
+      const currentSelectedParentTaskId = e.component.getNodeByKey(
+        e.component.option('focusedRowKey'),
+      )?.parent?.key;
+      const key = new (window as any).DevExpress.data.Guid().toString();
+      const data = { Head_ID: currentSelectedParentTaskId };
+      e.component.option('editing.changes', [
+        {
+          key,
+          type: 'insert',
+          insertAfterKey: e.component.option('focusedRowKey'),
+          data,
+        },
+      ]);
+    }
+  },
+}));

packages/devextreme/js/__internal/grids/tree_list/editing/m_editing.ts

@@ -39,8 +39,11 @@ class EditingController extends editingModule.controllers.editing {
   }
 
   protected _setInsertAfterOrBeforeKey(change, parentKey) {
-    if (parentKey !== undefined && parentKey !== this.option('rootValue')) {
-      change.insertAfterKey = parentKey;
+    const dataSourceAdapter = this._dataController.dataSource();
+    const key = parentKey || dataSourceAdapter?.parentKeyOf(change.data);
+
+    if (key !== undefined && key !== this.option('rootValue')) {
+      change.insertAfterKey = key;
     } else {
       // @ts-expect-error
       super._setInsertAfterOrBeforeKey.apply(this, arguments);
@@ -55,7 +58,8 @@ class EditingController extends editingModule.controllers.editing {
       const rowIndex = gridCoreUtils.getIndexByKey(parentKey, items);
       // @ts-expect-error
       if (rowIndex >= 0 && this._dataController.isRowExpanded(parentKey)) {
-        return rowIndex + 1;
+        // @ts-expect-error
+        return super._getLoadedRowIndex.apply(this, arguments);
       }
       return -1;
     }

packages/devextreme/js/__internal/scheduler/m_appointment_drag_behavior.ts

@@ -130,7 +130,7 @@ export default class AppointmentDragBehavior {
 
       // NOTE: event.cancel may be promise or different type, so we need strict check here.
       if (e.cancel === true) {
-        this.removeDroppableClasses();
+        options.onDragCancel(e);
       }
 
       if (e.cancel !== true && isSchedulerComponent(e.toComponent)) {

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts

@@ -51,6 +51,7 @@ import {
 import WidgetObserver from '../base/m_widget_observer';
 import AppointmentDragBehavior from '../m_appointment_drag_behavior';
 import {
+  APPOINTMENT_DRAG_SOURCE_CLASS,
   DATE_TABLE_CLASS,
   DATE_TABLE_ROW_CLASS,
   FIXED_CONTAINER_CLASS,
@@ -3383,6 +3384,15 @@ const createDragBehaviorConfig = (
     removeDroppableCellClass();
   };
 
+  const onDragCancel = (e) => {
+    if (!isDefaultDraggingMode) {
+      enableDefaultDragging();
+    }
+
+    removeDroppableCellClass();
+    e.itemElement?.removeClass?.(APPOINTMENT_DRAG_SOURCE_CLASS);
+  };
+
   const cursorOffset = options.isSetCursorOffset
     ? () => {
       const $dragElement = $(state.dragElement);
@@ -3399,6 +3409,7 @@ const createDragBehaviorConfig = (
     onDragStart,
     onDragMove,
     onDragEnd,
+    onDragCancel,
     cursorOffset,
     filter: options.filter,
   };