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

…24_2-add-chat-properties-d.ts

# Conflicts:
#	packages/devextreme/js/__internal/ui/chat/chat.ts
#	packages/devextreme/js/ui/chat.d.ts

apps/react-storybook/stories/examples/common/CustomConfigurationComponents.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from "react";
+
+import DataGrid, {
+  Column,
+  Grouping,
+  GroupPanel,
+  Pager,
+  Paging,
+  SearchPanel
+} from "devextreme-react/data-grid";
+import TabPanel, { Item } from "devextreme-react/tab-panel";
+import ODataStore from "devextreme/data/odata/store";
+
+const meta: Meta<typeof DataGrid> = {
+  title: 'Example/Common/Custom Configuration Components',
+  component: DataGrid,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/configure/story-layout
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DataGrid>;
+
+const pageSizes = [10, 25, 50, 100];
+
+const dataSourceOptions = {
+  store: new ODataStore({
+    version: 2,
+    url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
+    key: 'Id',
+    beforeSend(request) {
+      const year = new Date().getFullYear() - 1;
+      request.params.startDate = `${year}-05-10`;
+      request.params.endDate = `${year}-5-15`;
+    },
+  }),
+};
+
+const CustomerData = () => (
+  <>
+    <Column dataField="Region" dataType="string" />
+    <Column dataField="Customer" dataType="string" width={150} />
+  </>
+);
+
+const CommonSettings = () => (
+  <>
+    <GroupPanel visible={true} />
+    <SearchPanel visible={true} highlightCaseSensitive={true} />
+    <Grouping autoExpandAll={false} />
+    <Pager allowedPageSizes={pageSizes} showPageSizeSelector={true} />
+    <Paging defaultPageSize={10} />
+  </>
+);
+
+const CommonColumns = () => (
+  <>
+    <Column dataField="SaleDate" dataType="date" />
+    <Column dataField="Product" />
+  </>
+);
+
+const BriefGrid = () => (
+  <DataGrid
+    dataSource={dataSourceOptions}
+    style={{ padding: '10px' }}
+  >
+    <CommonSettings />
+    <CommonColumns />
+    <CustomerData />
+  </DataGrid>
+);
+
+const DetailGrid = () => (
+  <DataGrid
+    dataSource={dataSourceOptions}
+    style={{ padding: '10px' }}
+  >
+    <CommonSettings />
+    <CommonColumns />
+    <Column
+      dataField="Amount"
+      caption="Sale Amount"
+      dataType="number"
+      format="currency"
+      alignment="right"
+    />
+    <Column
+      dataField="Discount"
+      caption="Discount %"
+      dataType="number"
+      format="percent"
+      alignment="right"
+      allowGrouping={false}
+      cssClass="bullet"
+    />
+    <Column caption='Customer Data'>
+      <CustomerData />
+      <Column dataField="Sector" dataType="string" />
+      <Column dataField="Channel" dataType="string" />
+    </Column>
+  </DataGrid>
+);
+
+export const Overview: Story = {
+  render: () => {
+    return (
+      <TabPanel>
+        <Item title="Brief">
+          <BriefGrid />
+        </Item>
+        <Item title="Detailed">
+          <DetailGrid />
+        </Item>
+      </TabPanel>
+    );
+  }
+}

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

@@ -177,3 +177,66 @@ test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and e
   },
   columns: ['FirstName'],
 }));
+
+['infinite', 'virtual'].forEach((scrollingMode) => {
+  test(`Only the initially focused row should be focused while scrolling in ${scrollingMode} mode`, async (t) => {
+    const grid = new DataGrid(GRID_SELECTOR);
+
+    // assert
+    await t
+      .expect(grid.getDataRow(0).isFocusedRow)
+      .ok();
+
+    // act
+    await grid.scrollBy({ y: 200 });
+    await grid.scrollBy({ y: 200 });
+    await grid.scrollTo(t, { top: 0 });
+    await t.wait(300);
+
+    // assert
+    const rows = await grid.apiGetVisibleRows();
+    const isFocusedRows = await Promise.all(rows.map((_, i) => grid.getDataRow(i).isFocusedRow));
+    const focusedRows = isFocusedRows.filter((isFocusedRow) => isFocusedRow);
+
+    await t
+      .expect(focusedRows.length)
+      .eql(1)
+      .expect(grid.getDataRow(0).isFocusedRow)
+      .ok();
+  }).before(async () => {
+    const initStore = ClientFunction(() => {
+      (window as any).myStore = new (window as any).DevExpress.data.ArrayStore({
+        key: 'id',
+        data: new Array(40).fill(null).map((_, index) => ({ id: index + 1, text: `item ${index + 1}` })),
+      });
+    });
+
+    await initStore();
+
+    return await createWidget('dxDataGrid', {
+      dataSource: {
+        key: 'id',
+        load(loadOptions) {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              (window as any).myStore.load(loadOptions).done((data) => {
+                resolve(data);
+              });
+            }, 300);
+          });
+        },
+        totalCount(loadOptions) {
+          return (window as any).myStore.totalCount(loadOptions);
+        },
+      } as any,
+      height: 450,
+      remoteOperations: true,
+      scrolling: {
+        mode: scrollingMode as any,
+      },
+      showBorders: true,
+      focusedRowEnabled: true,
+      focusedRowKey: 1,
+    });
+  });
+});

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.0",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0-beta.5",
+    "devextreme-internal-tools": "16.0.0-beta.6",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

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

@@ -24,7 +24,7 @@ import {
 
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
-import { ChatError, DisposingEvent, InitializedEvent, Message, MessageSendEvent, OptionChangedEvent, User } from 'devextreme/ui/chat';
+import { ChatError, DisposingEvent, InitializedEvent, Message, MessageSendEvent, OptionChangedEvent, TypingEndEvent, TypingStartEvent, User } from 'devextreme/ui/chat';
 
 import DxChat from 'devextreme/ui/chat';
 
@@ -351,6 +351,22 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;
 
+    /**
+    
+     * [descr:dxChatOptions.onTypingEnd]
+    
+    
+     */
+    @Output() onTypingEnd: EventEmitter<TypingEndEvent>;
+
+    /**
+    
+     * [descr:dxChatOptions.onTypingStart]
+    
+    
+     */
+    @Output() onTypingStart: EventEmitter<TypingStartEvent>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -543,6 +559,8 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { subscribe: 'initialized', emit: 'onInitialized' },
             { subscribe: 'messageSend', emit: 'onMessageSend' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { subscribe: 'typingEnd', emit: 'onTypingEnd' },
+            { subscribe: 'typingStart', emit: 'onTypingStart' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },
             { emit: 'dataSourceChange' },

packages/devextreme-angular/src/ui/html-editor/index.ts

@@ -25,7 +25,7 @@ import {
 
 
 import { EditorStyle, Position, ValidationMessageMode, ValidationStatus } from 'devextreme/common';
-import { ContentReadyEvent, DisposingEvent, dxHtmlEditorImageUpload, dxHtmlEditorMediaResizing, dxHtmlEditorMention, dxHtmlEditorTableContextMenu, dxHtmlEditorTableResizing, dxHtmlEditorToolbar, dxHtmlEditorVariables, FocusInEvent, FocusOutEvent, InitializedEvent, OptionChangedEvent, ValueChangedEvent } from 'devextreme/ui/html_editor';
+import { ContentReadyEvent, Converter, DisposingEvent, dxHtmlEditorImageUpload, dxHtmlEditorMediaResizing, dxHtmlEditorMention, dxHtmlEditorTableContextMenu, dxHtmlEditorTableResizing, dxHtmlEditorToolbar, dxHtmlEditorVariables, FocusInEvent, FocusOutEvent, InitializedEvent, OptionChangedEvent, ValueChangedEvent } from 'devextreme/ui/html_editor';
 
 import DxHtmlEditor from 'devextreme/ui/html_editor';
 
@@ -44,6 +44,7 @@ import {
     WatcherHelper
 } from 'devextreme-angular/core';
 
+import { DxoConverterModule } from 'devextreme-angular/ui/nested';
 import { DxoImageUploadModule } from 'devextreme-angular/ui/nested';
 import { DxoFileUploaderOptionsModule } from 'devextreme-angular/ui/nested';
 import { DxiTabModule } from 'devextreme-angular/ui/nested';
@@ -55,6 +56,7 @@ import { DxoTableResizingModule } from 'devextreme-angular/ui/nested';
 import { DxoToolbarModule } from 'devextreme-angular/ui/nested';
 import { DxoVariablesModule } from 'devextreme-angular/ui/nested';
 
+import { DxoHtmlEditorConverterModule } from 'devextreme-angular/ui/html-editor/nested';
 import { DxoHtmlEditorImageUploadModule } from 'devextreme-angular/ui/html-editor/nested';
 import { DxoHtmlEditorFileUploaderOptionsModule } from 'devextreme-angular/ui/html-editor/nested';
 import { DxiHtmlEditorTabModule } from 'devextreme-angular/ui/html-editor/nested';
@@ -134,6 +136,19 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     }
 
 
+    /**
+     * [descr:dxHtmlEditorOptions.converter]
+    
+     */
+    @Input()
+    get converter(): Converter | undefined {
+        return this._getOption('converter');
+    }
+    set converter(value: Converter | undefined) {
+        this._setOption('converter', value);
+    }
+
+
     /**
      * [descr:dxHtmlEditorOptions.customizeModules]
     
@@ -600,6 +615,13 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
      */
     @Output() allowSoftLineBreakChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() converterChange: EventEmitter<Converter | undefined>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -866,6 +888,7 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },
             { emit: 'allowSoftLineBreakChange' },
+            { emit: 'converterChange' },
             { emit: 'customizeModulesChange' },
             { emit: 'disabledChange' },
             { emit: 'elementAttrChange' },
@@ -965,6 +988,7 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
 
 @NgModule({
   imports: [
+    DxoConverterModule,
     DxoImageUploadModule,
     DxoFileUploaderOptionsModule,
     DxiTabModule,
@@ -975,6 +999,7 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     DxoTableResizingModule,
     DxoToolbarModule,
     DxoVariablesModule,
+    DxoHtmlEditorConverterModule,
     DxoHtmlEditorImageUploadModule,
     DxoHtmlEditorFileUploaderOptionsModule,
     DxiHtmlEditorTabModule,
@@ -993,6 +1018,7 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
   ],
   exports: [
     DxHtmlEditorComponent,
+    DxoConverterModule,
     DxoImageUploadModule,
     DxoFileUploaderOptionsModule,
     DxiTabModule,
@@ -1003,6 +1029,7 @@ export class DxHtmlEditorComponent extends DxComponent implements OnDestroy, Con
     DxoTableResizingModule,
     DxoToolbarModule,
     DxoVariablesModule,
+    DxoHtmlEditorConverterModule,
     DxoHtmlEditorImageUploadModule,
     DxoHtmlEditorFileUploaderOptionsModule,
     DxiHtmlEditorTabModule,