Merge branch '24_2' into 24_2chat_refactor

packages/devextreme/js/__internal/ui/calendar/m_calendar.base_view.ts

@@ -138,11 +138,49 @@ const BaseView = (Widget as any).inherit({
   },
 
   _getMultipleModeAriaLabel() {
-    const ariaLabel = this._getLocalizedWidgetName();
+    const localizedWidgetName = this._getLocalizedWidgetName();
+    const selectedRangesText = this._getMultipleRangesText();
+
+    const ariaLabel = `${localizedWidgetName}. ${selectedRangesText}`;
 
     return ariaLabel;
   },
 
+  _getMultipleRangesText() {
+    const { value } = this.option();
+    const ranges = coreDateUtils.getRangesByDates(value.map((date) => new Date(date)));
+
+    if (ranges.length > 2) {
+      // @ts-expect-error
+      const dateRangeCountText = messageLocalization.format('dxCalendar-selectedDateRangeCount', ranges.length);
+
+      return dateRangeCountText;
+    }
+
+    const selectedDatesText = messageLocalization.format('dxCalendar-selectedDates');
+    const rangesText = ranges
+      .map((range) => this._getRangeText(range))
+      .join(', ');
+
+    const result = `${selectedDatesText}: ${rangesText}`;
+
+    return result;
+  },
+
+  _getRangeText(range) {
+    const [startDate, endDate] = range;
+
+    const formattedStartDate = dateLocalization.format(startDate, ARIA_LABEL_DATE_FORMAT);
+    const formattedEndDate = dateLocalization.format(endDate, ARIA_LABEL_DATE_FORMAT);
+
+    const selectedDatesText = startDate && endDate
+      // @ts-expect-error
+      ? messageLocalization.format('dxCalendar-selectedMultipleDateRange', formattedStartDate, formattedEndDate)
+      : formattedStartDate;
+
+    return selectedDatesText;
+  },
+
   _getTableAriaLabel() {
     const { value, selectionMode } = this.option();
 

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -1,6 +1,7 @@
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import resizeObserverSingleton from '@js/core/resize_observer';
+import dateSerialization from '@js/core/utils/date_serialization';
 import { isElementInDom } from '@js/core/utils/dom';
 import { isDefined } from '@js/core/utils/type';
 import messageLocalization from '@js/localization/message';
@@ -23,6 +24,7 @@ const CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS = 'dx-chat-messagelist-empty-message'
 const CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS = 'dx-chat-messagelist-empty-prompt';
 
 const SCROLLABLE_CONTAINER_CLASS = 'dx-scrollable-container';
+export const MESSAGEGROUP_TIMEOUT = 5 * 1000 * 60;
 
 export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
@@ -177,10 +179,14 @@ class MessageList extends Widget<Properties> {
 
     items.forEach((item, index) => {
       const newMessageGroupItem = item ?? {};
-
       const id = newMessageGroupItem.author?.id;
 
-      if (id === currentMessageGroupUserId) {
+      const isTimeoutExceeded = this._isTimeoutExceeded(
+        currentMessageGroupItems[currentMessageGroupItems.length - 1] ?? {},
+        item,
+      );
+
+      if (id === currentMessageGroupUserId && !isTimeoutExceeded) {
         currentMessageGroupItems.push(newMessageGroupItem);
       } else {
         this._createMessageGroupComponent(currentMessageGroupItems, currentMessageGroupUserId);
@@ -197,22 +203,26 @@ class MessageList extends Widget<Properties> {
   }
 
   _renderMessage(message: Message): void {
-    const sender = message.author;
+    const { author } = message;
 
     const lastMessageGroup = this._messageGroups?.[this._messageGroups.length - 1];
 
     if (lastMessageGroup) {
-      const lastMessageGroupUserId = lastMessageGroup.option('items')[0].author?.id;
+      const { items } = lastMessageGroup.option();
+      const lastMessageGroupItem = items[items.length - 1];
+      const lastMessageGroupUserId = lastMessageGroupItem.author?.id;
+
+      const isTimeoutExceeded = this._isTimeoutExceeded(lastMessageGroupItem, message);
 
-      if (sender?.id === lastMessageGroupUserId) {
+      if (author?.id === lastMessageGroupUserId && !isTimeoutExceeded) {
         lastMessageGroup.renderMessage(message);
         this._scrollContentToLastMessage();
 
         return;
       }
     }
 
-    this._createMessageGroupComponent([message], sender?.id);
+    this._createMessageGroupComponent([message], author?.id);
 
     this._scrollContentToLastMessage();
   }
@@ -274,6 +284,22 @@ class MessageList extends Widget<Properties> {
     }
   }
 
+  _isTimeoutExceeded(lastMessage: Message, newMessage: Message): boolean {
+    const lastMessageTimestamp = lastMessage?.timestamp;
+    const newMessageTimestamp = newMessage?.timestamp;
+
+    if (!lastMessageTimestamp || !newMessageTimestamp) {
+      return false;
+    }
+
+    const lastMessageTimestampInMs = dateSerialization.deserializeDate(lastMessageTimestamp);
+    const newMessageTimestampInMs = dateSerialization.deserializeDate(newMessageTimestamp);
+
+    const result = newMessageTimestampInMs - lastMessageTimestampInMs > MESSAGEGROUP_TIMEOUT;
+
+    return result;
+  }
+
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value, previousValue } = args;
 

packages/devextreme/js/core/utils/date.js

@@ -5,6 +5,7 @@ import { adjust } from './math';
 import { each } from './iterator';
 import { camelize } from './inflector';
 import { toMilliseconds } from '../../renovation/ui/common/utils/date/index';
+import dateSerialization from './date_serialization';
 
 const DAYS_IN_WEEK = 7;
 const THURSDAY_WEEK_NUMBER = 4;
@@ -689,6 +690,37 @@ const getMachineTimezoneName = () => {
         : null;
 };
 
+const getRangesByDates = (dates) => {
+    const datesInMilliseconds = dates.map((value) => correctDateWithUnitBeginning(value, 'day').getTime());
+    const sortedDates = datesInMilliseconds.sort((a, b) => a - b);
+
+    const msInDay = toMilliseconds('day');
+    const ranges = [];
+
+    let startDate = sortedDates[0];
+
+    for(let i = 1; i <= sortedDates.length; ++i) {
+        const nextDate = sortedDates[i];
+        const currentDate = sortedDates[i - 1];
+
+        const isNewRange = nextDate - currentDate > msInDay;
+
+        if(isNewRange || i === sortedDates.length) {
+            const range = startDate === sortedDates[i - 1]
+                ? [startDate]
+                : [startDate, sortedDates[i - 1]];
+
+            const serializedRange = range.map((value) => dateSerialization.deserializeDate(value));
+
+            ranges.push(serializedRange);
+
+            startDate = nextDate;
+        }
+    }
+
+    return ranges;
+};
+
 const dateUtils = {
     dateUnitIntervals: dateUnitIntervals,
 
@@ -752,6 +784,8 @@ const dateUtils = {
     createDateWithFullYear: createDateWithFullYear,
 
     getMachineTimezoneName: getMachineTimezoneName,
+
+    getRangesByDates: getRangesByDates,
 };
 
 dateUtils.sameView = function(view, date1, date2) {

packages/devextreme/js/localization/messages/ar.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/ca.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/cs.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/de.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/el.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/en.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/es.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/fa.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/fi.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/fr.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/hu.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/it.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/ja.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/lt.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/lv.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/nb.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/nl.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",

packages/devextreme/js/localization/messages/pl.json

@@ -316,7 +316,10 @@
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
         "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDates": "The selected dates",
         "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
+        "dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
+        "dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
         "dxCalendar-readOnlyLabel": "Read-only calendar",
 
         "dxChat-emptyListMessage": "There are no messages in this chat",