Merge branch '24_2' into 24_2_testcafe_bump

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

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+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';
@@ -44,6 +44,7 @@ export const Overview: Story = {
                 [firstAuthor.name]: firstAuthor,
                 [secondAuthor.name]: secondAuthor,
             },
+            defaultValue: firstAuthor.name,
         },
         hint: {
             control: 'text',
@@ -65,8 +66,14 @@ export const Overview: Story = {
         const [messages, setMessages] = useState(items);
 
         const onMessageSend = useCallback(({ message }) => {
-            setMessages((prevMessages) => [...prevMessages, message]);
-        }, []);
+            const updatedMessages = [...messages, message];
+
+            setMessages(updatedMessages);
+        }, [messages]);
+
+        useEffect(() => {
+            setMessages(items);
+        }, [items]);
 
         return (
             <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -90,6 +97,76 @@ export const Overview: Story = {
     }
 }
 
+export const EmptyView: Story = {
+    args: {
+        items: [],
+        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,
+        items,
+        onItemsChange,
+        visible,
+        hint,
+        activeStateEnabled,
+        hoverStateEnabled,
+        focusStateEnabled,
+    }) => {
+        const [messages, setMessages] = useState(items);
+
+        const onMessageSend = useCallback(({ message }) => {
+            const updatedMessages = [...messages, message];
+
+            setMessages(updatedMessages);
+        }, [messages]);
+
+        useEffect(() => {
+            console.log(2);
+            setMessages(items);
+        }, [items]);
+
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <Chat
+                    width={width}
+                    height={height}
+                    items={messages}
+                    onItemsChange={onItemsChange}
+                    disabled={disabled}
+                    rtlEnabled={rtlEnabled}
+                    user={user}
+                    onMessageSend={onMessageSend}
+                    visible={visible}
+                    hint={hint}
+                    activeStateEnabled={activeStateEnabled}
+                    focusStateEnabled={focusStateEnabled}
+                    hoverStateEnabled={hoverStateEnabled}
+                >
+                </Chat>
+            </div>
+        );
+    }
+}
+
 export const PopupIntegration: Story = {
     args: {
         items: initialMessages,
@@ -106,6 +183,7 @@ export const PopupIntegration: Story = {
                 [firstAuthor.name]: firstAuthor,
                 [secondAuthor.name]: secondAuthor,
             },
+            defaultValue: firstAuthor.name,
         },
         hint: {
             control: 'text',
@@ -130,6 +208,10 @@ export const PopupIntegration: Story = {
             setMessages((prevMessages) => [...prevMessages, message]);
         }, []);
 
+        useEffect(() => {
+            setMessages(items);
+        }, [items]);
+
         return (
             <Popup
                 width={300}

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

@@ -12,6 +12,11 @@ export const secondAuthor: ChatTypes.User = {
     name: "Jane Smith"
 };
 
+const todayDate = new Date();
+
+const date = new Date();
+const yesterdayDate = date.setDate(date.getDate() - 1);
+
 export const initialMessages: ChatTypes.Message[] = [
     {
         timestamp: "2024-10-01T10:15:30Z",
@@ -54,8 +59,18 @@ export const initialMessages: ChatTypes.Message[] = [
         text: "I also want to get out into nature. Want to join me?"
     },
     {
-        timestamp: "2024-10-01T10:35:00Z",
+        timestamp: yesterdayDate,
         author: secondAuthor,
         text: "I'd love to! Just let me know when you're ready."
+    },
+    {
+        timestamp: todayDate,
+        author: firstAuthor,
+        text: "Great!"
+    },
+    {
+        timestamp: todayDate,
+        author: firstAuthor,
+        text: "Great! Looking forward to it!"
     }
 ];

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

@@ -104,6 +104,11 @@ test('Messagelist appearance with scrollbar', async (t) => {
     user: userSecond,
     width: 400,
     height: 600,
+    onMessageSend: (e) => {
+      const { component, message } = e;
+
+      component.renderMessage(message);
+    },
   });
 });
 

packages/devextreme-angular/src/ui/map/index.ts

@@ -110,10 +110,10 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges,
     
      */
     @Input()
-    get apiKey(): string | { bing?: string, google?: string, googleStatic?: string } {
+    get apiKey(): string | { azure?: string, bing?: string, google?: string, googleStatic?: string } {
         return this._getOption('apiKey');
     }
-    set apiKey(value: string | { bing?: string, google?: string, googleStatic?: string }) {
+    set apiKey(value: string | { azure?: string, bing?: string, google?: string, googleStatic?: string }) {
         this._setOption('apiKey', value);
     }
 
@@ -468,7 +468,7 @@ export class DxMapComponent extends DxComponent implements OnDestroy, OnChanges,
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() apiKeyChange: EventEmitter<string | { bing?: string, google?: string, googleStatic?: string }>;
+    @Output() apiKeyChange: EventEmitter<string | { azure?: string, bing?: string, google?: string, googleStatic?: string }>;
 
     /**
     

packages/devextreme-angular/src/ui/map/nested/api-key.ts

@@ -28,6 +28,14 @@ import { NestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxoMapApiKeyComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get azure(): string {
+        return this._getOption('azure');
+    }
+    set azure(value: string) {
+        this._setOption('azure', value);
+    }
+
     @Input()
     get bing(): string {
         return this._getOption('bing');

packages/devextreme-angular/src/ui/nested/api-key.ts

@@ -28,6 +28,14 @@ import { NestedOption } from 'devextreme-angular/core';
     providers: [NestedOptionHost]
 })
 export class DxoApiKeyComponent extends NestedOption implements OnDestroy, OnInit  {
+    @Input()
+    get azure(): string {
+        return this._getOption('azure');
+    }
+    set azure(value: string) {
+        this._setOption('azure', value);
+    }
+
     @Input()
     get bing(): string {
         return this._getOption('bing');

packages/devextreme-angular/src/ui/pagination/index.ts

@@ -22,7 +22,7 @@ import {
 
 import { DisplayMode } from 'devextreme/common';
 
-import DxPagination from 'devextreme/ui/pager';
+import DxPagination from 'devextreme/ui/pagination';
 
 
 import {
@@ -630,7 +630,7 @@ export class DxPaginationComponent extends DxComponent implements OnDestroy, OnC
 })
 export class DxPaginationModule { }
 
-import type * as DxPaginationTypes from "devextreme/ui/pager_types";
+import type * as DxPaginationTypes from "devextreme/ui/pagination_types";
 export { DxPaginationTypes };
 
 

packages/devextreme-react/src/map.ts

@@ -90,6 +90,7 @@ const Map = memo(
 // owners:
 // Map
 type IApiKeyProps = React.PropsWithChildren<{
+  azure?: string;
   bing?: string;
   google?: string;
   googleStatic?: string;

packages/devextreme-react/src/pagination.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 import { memo, forwardRef, useImperativeHandle, useRef, useMemo, ForwardedRef, Ref, ReactElement } from "react";
 import dxPagination, {
     Properties
-} from "devextreme/ui/pager";
+} from "devextreme/ui/pagination";
 
 import { Component as BaseComponent, IHtmlOptions, ComponentRef } from "./core/component";
 
@@ -58,6 +58,6 @@ export {
   IPaginationOptions,
   PaginationRef
 };
-import type * as PaginationTypes from 'devextreme/ui/pager_types';
+import type * as PaginationTypes from 'devextreme/ui/pagination_types';
 export { PaginationTypes };
 

packages/devextreme-vue/src/map.ts

@@ -140,11 +140,13 @@ const DxApiKeyConfig = {
   emits: {
     "update:isActive": null,
     "update:hoveredElement": null,
+    "update:azure": null,
     "update:bing": null,
     "update:google": null,
     "update:googleStatic": null,
   },
   props: {
+    azure: String,
     bing: String,
     google: String,
     googleStatic: String

packages/devextreme-vue/src/pagination.ts

@@ -1,4 +1,4 @@
-import Pagination, { Properties } from "devextreme/ui/pager";
+import Pagination, { Properties } from "devextreme/ui/pagination";
 import { defineComponent } from "vue";
 import { prepareComponentConfig } from "./core/index";
 
@@ -113,5 +113,5 @@ export default DxPagination;
 export {
   DxPagination
 };
-import type * as DxPaginationTypes from "devextreme/ui/pager_types";
+import type * as DxPaginationTypes from "devextreme/ui/pagination_types";
 export { DxPaginationTypes };

packages/devextreme/build/gulp/modules_metadata.json

@@ -501,7 +501,7 @@
     }
   },
   {
-    "name": "ui/pager",
+    "name": "ui/pagination",
     "exports": {
       "default": { "path": "ui.dxPagination", "isWidget": true }
     }

packages/devextreme/js/__internal/pager/common/base_pager_props.ts

@@ -1,5 +1,5 @@
 import type { DisplayMode } from '@js/common';
-import type { PageSize } from '@js/ui/pager_types';
+import type { PageSize } from '@js/ui/pagination_types';
 
 import messageLocalization from '../../../localization/message';
 import type { EventCallback } from '../../core/r1/event_callback';

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

@@ -166,7 +166,6 @@ class Chat extends Widget<Properties> {
       text,
     };
 
-    this.renderMessage(message);
     this._messageSendAction?.({ message, event });
   }