Merge branch '24_2' into chatDateFormats__24_2

Signed-off-by: Anton Kuznetsov <[email protected]>

.github/codeql/codeql-config.yml

@@ -1,6 +1,9 @@
 name: "DevExtreme CodeQL config"
-
 paths-ignore:
-  - "/js/bundles/dx.custom.js"
-  - "/js/localization/default_messages.js"
-  - "/js/localization/cldr-data/**"
+  # all published sources are located in artifacts/npm/**, so we can disable following paths:
+  - "/artifacts/**"
+  - "/packages/devextreme/artifacts/js/**"
+  - "/packages/devextreme/artifacts/transpiled/**"
+  - "/packages/devextreme/artifacts/transpiled-esm-npm/**"
+  - "/packages/devextreme/artifacts/transpiled-renovation/**"
+  - "/packages/devextreme/artifacts/transpiled-renovation-npm/**"

.github/workflows/pr-filter-stubs.yml

@@ -24,6 +24,7 @@ jobs:
         uses: DevExpress/github-actions/pr-filter@v1
         with:
           paths: '**;!apps/**/*.md'
+          gh-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Show warning for .md files
         if: steps.mdFilesFilter.outputs.result == 'true'

apps/demos/Demos/DataGrid/ToolbarCustomization/React/description.md

@@ -0,0 +1,13 @@
+The DataGrid includes an integrated toolbar that displays predefined and custom controls. To add or remove toolbar items, declare the [toolbar](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/).[items[]](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/) array.
+<!--split-->
+
+This demo illustrates how to add the following items to the toolbar:
+
+* **Predefined Controls**            
+Declare a toolbar item element and specify the [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#name) and [properties](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/) that you want to customize. If a control does not need customization, include its **name** only. Ensure that **items[]** contain controls for all features that you enabled in your DataGrid. In this demo, we enable the [columnChooser](/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columnChooser/) and add the *"columnChooserButton"* to the **items[]** array.
+
+* **DevExtreme Components**           
+Configure the desired DevExtreme component within a toolbar item element. In this demo, we extended the toolbar's item collection with a [Button](/Demos/WidgetsGallery/Demo/Button/PredefinedTypes/) and a [SelectBox](/Demos/WidgetsGallery/Demo/SelectBox/Overview/).
+
+* **Custom Elements**             
+Specify a [rendering function](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#render) or a [custom component](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#component) for your custom element within a toolbar item.

apps/demos/Demos/DataGrid/ToolbarCustomization/ReactJs/description.md

@@ -0,0 +1,13 @@
+The DataGrid includes an integrated toolbar that displays predefined and custom controls. To add or remove toolbar items, declare the [toolbar](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/).[items[]](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/) array.
+<!--split-->
+
+This demo illustrates how to add the following items to the toolbar:
+
+* **Predefined Controls**            
+Declare a toolbar item element and specify the [name](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#name) and [properties](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/) that you want to customize. If a control does not need customization, include its **name** only. Ensure that **items[]** contain controls for all features that you enabled in your DataGrid. In this demo, we enable the [columnChooser](/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columnChooser/) and add the *"columnChooserButton"* to the **items[]** array.
+
+* **DevExtreme Components**           
+Configure the desired DevExtreme component within a toolbar item element. In this demo, we extended the toolbar's item collection with a [Button](/Demos/WidgetsGallery/Demo/Button/PredefinedTypes/) and a [SelectBox](/Demos/WidgetsGallery/Demo/SelectBox/Overview/).
+
+* **Custom Elements**             
+Specify a [rendering function](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#render) or a [custom component](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/toolbar/items/#component) for your custom element within a toolbar item.

e2e/testcafe-devextreme/tests/scheduler/a11y/appointment.ts

@@ -256,3 +256,43 @@ test('Scheduler a11y: appointments does not have info about reccurence', async (
     startDayHour: 9,
   });
 });
+
+test('Scheduler a11y: Appointment collector button doesn\'t have info about date', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const schedulerCollector = scheduler.collectors.get(0);
+  const dateText = 'March 6, 2021';
+
+  await t
+    .expect(scheduler.element().exists)
+    .ok()
+    .expect(schedulerCollector.element().getAttribute('aria-roledescription'))
+    .contains(dateText);
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: [
+      {
+        text: 'Website Re-Design Plan',
+        startDate: new Date('2021-03-05T23:45:00.000Z'),
+        endDate: new Date('2021-03-05T18:15:00.000Z'),
+      },
+      {
+        text: 'Complete Shipper Selection Form',
+        startDate: new Date('2021-03-05T15:30:00.000Z'),
+        endDate: new Date('2021-03-05T17:00:00.000Z'),
+      },
+      {
+        text: 'Upgrade Server Hardware',
+        startDate: new Date('2021-03-05T19:00:00.000Z'),
+        endDate: new Date('2021-03-05T21:15:00.000Z'),
+      },
+      {
+        text: 'Upgrade Personal Computers',
+        startDate: new Date('2021-03-05T21:45:00.000Z'),
+        endDate: new Date('2021-03-05T23:30:00.000Z'),
+      },
+    ],
+    currentView: 'month',
+    currentDate: new Date(2021, 2, 1),
+  });
+});

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

@@ -229,6 +229,58 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
     }
 
 
+    /**
+     * [descr:dxChatOptions.showAvatar]
+    
+     */
+    @Input()
+    get showAvatar(): boolean {
+        return this._getOption('showAvatar');
+    }
+    set showAvatar(value: boolean) {
+        this._setOption('showAvatar', value);
+    }
+
+
+    /**
+     * [descr:dxChatOptions.showDayHeaders]
+    
+     */
+    @Input()
+    get showDayHeaders(): boolean {
+        return this._getOption('showDayHeaders');
+    }
+    set showDayHeaders(value: boolean) {
+        this._setOption('showDayHeaders', value);
+    }
+
+
+    /**
+     * [descr:dxChatOptions.showMessageTimestamp]
+    
+     */
+    @Input()
+    get showMessageTimestamp(): boolean {
+        return this._getOption('showMessageTimestamp');
+    }
+    set showMessageTimestamp(value: boolean) {
+        this._setOption('showMessageTimestamp', value);
+    }
+
+
+    /**
+     * [descr:dxChatOptions.showUserName]
+    
+     */
+    @Input()
+    get showUserName(): boolean {
+        return this._getOption('showUserName');
+    }
+    set showUserName(value: boolean) {
+        this._setOption('showUserName', value);
+    }
+
+
     /**
      * [descr:dxChatOptions.user]
     
@@ -399,6 +451,34 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
      */
     @Output() rtlEnabledChange: EventEmitter<boolean>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() showAvatarChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() showDayHeadersChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() showMessageTimestampChange: EventEmitter<boolean>;
+
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() showUserNameChange: EventEmitter<boolean>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -493,6 +573,10 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges
             { emit: 'hoverStateEnabledChange' },
             { emit: 'itemsChange' },
             { emit: 'rtlEnabledChange' },
+            { emit: 'showAvatarChange' },
+            { emit: 'showDayHeadersChange' },
+            { emit: 'showMessageTimestampChange' },
+            { emit: 'showUserNameChange' },
             { emit: 'userChange' },
             { emit: 'visibleChange' },
             { emit: 'widthChange' }

packages/devextreme-vue/src/chat.ts

@@ -22,6 +22,10 @@ type AccessibleOptions = Pick<Properties,
   "onTypingEnd" |
   "onTypingStart" |
   "rtlEnabled" |
+  "showAvatar" |
+  "showDayHeaders" |
+  "showMessageTimestamp" |
+  "showUserName" |
   "user" |
   "visible" |
   "width"
@@ -51,6 +55,10 @@ const componentConfig = {
     onTypingEnd: Function,
     onTypingStart: Function,
     rtlEnabled: Boolean,
+    showAvatar: Boolean,
+    showDayHeaders: Boolean,
+    showMessageTimestamp: Boolean,
+    showUserName: Boolean,
     user: Object,
     visible: Boolean,
     width: [Function, Number, String]
@@ -76,6 +84,10 @@ const componentConfig = {
     "update:onTypingEnd": null,
     "update:onTypingStart": null,
     "update:rtlEnabled": null,
+    "update:showAvatar": null,
+    "update:showDayHeaders": null,
+    "update:showMessageTimestamp": null,
+    "update:showUserName": null,
     "update:user": null,
     "update:visible": null,
     "update:width": null,

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

@@ -1,6 +1,7 @@
 import { locate, move } from '@js/animation/translator';
 import $ from '@js/core/renderer';
 import { FunctionTemplate } from '@js/core/templates/function_template';
+import dateLocalization from '@js/localization/date';
 import messageLocalization from '@js/localization/message';
 import Button from '@js/ui/button';
 
@@ -137,10 +138,12 @@ export class CompactAppointmentsHelper {
   }
 
   _createCompactButtonElement({
-    isCompact, $container, coordinates, sortedIndex,
+    isCompact, $container, coordinates, sortedIndex, items,
   }) {
+    const appointmentDate = this._getDateText(items.data[0]);
     const result = $('<div>')
       .addClass(APPOINTMENT_COLLECTOR_CLASS)
+      .attr('aria-roledescription', appointmentDate)
       .toggleClass(COMPACT_APPOINTMENT_COLLECTOR_CLASS, isCompact)
       .appendTo($container);
 
@@ -181,4 +184,31 @@ export class CompactAppointmentsHelper {
       .append($('<span>').text(text))
       .addClass(APPOINTMENT_COLLECTOR_CONTENT_CLASS);
   }
+
+  _localizeDate(date) {
+    return `${dateLocalization.format(date, 'monthAndDay')}, ${dateLocalization.format(date, 'year')}`;
+  }
+
+  _getStartDate(appointment) {
+    const date = appointment.startDate;
+    return date ? new Date(date) : null;
+  }
+
+  _getEndDate(appointment) {
+    const date = appointment.endDate;
+    return date ? new Date(date) : null;
+  }
+
+  _getDateText(appointment) {
+    const startDate = this._getStartDate(appointment);
+    const endDate = this._getEndDate(appointment);
+    const startDateText = startDate ? this._localizeDate(startDate) : '';
+    const endDateText = endDate ? this._localizeDate(endDate) : '';
+
+    const dateText = startDateText === endDateText
+      ? `${startDateText}`
+      : `${startDateText} - ${endDateText}`;
+
+    return `${dateText}`;
+  }
 }

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

@@ -32,7 +32,6 @@ const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
 type Properties = ChatProperties & {
   title: string;
-  showDayHeaders: boolean;
   dayHeaderFormat?: Format;
   messageTimestampFormat?: Format;
 };
@@ -133,7 +132,7 @@ class Chat extends Widget<Properties> {
     const {
       items = [],
       user,
-      showDayHeaders,
+      showDayHeaders = true,
       dayHeaderFormat,
       messageTimestampFormat,
     } = this.option();

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

@@ -196,6 +196,30 @@ export interface dxChatOptions extends WidgetOptions<dxChat> {
      * @public
      */
     errors?: Array<ChatError>;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showDayHeaders?: boolean;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showUserName?: boolean;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showAvatar?: boolean;
+    /**
+     * @docid
+     * @default true
+     * @public
+     */
+    showMessageTimestamp?: boolean;
     /**
      * @docid
      * @default undefined

packages/devextreme/ts/dx.all.d.ts

@@ -9582,6 +9582,22 @@ declare module DevExpress.ui {
      * [descr:dxChatOptions.errors]
      */
     errors?: Array<DevExpress.ui.dxChat.ChatError>;
+    /**
+     * [descr:dxChatOptions.showDayHeaders]
+     */
+    showDayHeaders?: boolean;
+    /**
+     * [descr:dxChatOptions.showUserName]
+     */
+    showUserName?: boolean;
+    /**
+     * [descr:dxChatOptions.showAvatar]
+     */
+    showAvatar?: boolean;
+    /**
+     * [descr:dxChatOptions.showMessageTimestamp]
+     */
+    showMessageTimestamp?: boolean;
     /**
      * [descr:dxChatOptions.onMessageSend]
      */