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

…24_2_update_demos_menu

.github/workflows/qunit_tests-additional-renovation.yml

@@ -148,8 +148,10 @@ jobs:
           'ui.editors(1/2)',
           'ui.editors(2/2)',
           'ui.htmlEditor',
-          'ui.grid(1/2)',
-          'ui.grid(2/2)',
+          'ui.grid(1/4)',
+          'ui.grid(2/4)',
+          'ui.grid(3/4)',
+          'ui.grid(4/4)',
           'ui.scheduler(1/3)',
           'ui.scheduler(2/3)',
           'ui.scheduler(3/3)',

apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue

@@ -144,13 +144,13 @@ const onRowInserted = (e: DxDataGridTypes.RowInsertedEvent) => {
 };
 
 function calculateFilterExpression(
-  column: DxDataGridTypes.Column,
+  this: DxDataGridTypes.Column,
   filterValue: any,
   selectedFilterOperations: string | null,
   target: string,
 ) {
   if (target === 'search' && typeof filterValue === 'string') {
-    return [column.dataField, 'contains', filterValue];
+    return [this.dataField, 'contains', filterValue];
   }
 
   return (rowData: Task) => (rowData.AssignedEmployee || []).includes(filterValue);

e2e/testcafe-devextreme/tests/common/eventsEngine.ts

@@ -0,0 +1,61 @@
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+
+fixture.disablePageReloads`Events`
+  .page(url(__dirname, '../container.html'));
+
+const init = ClientFunction(() => {
+  const markup = `<div class="dx-viewport demo-container">
+      <div id="draggable" draggable="true" style="width: 200px; height: 200px; background-color: red;"></div>
+      <div id="target" style="width: 200px; height: 200px; background-color: black;"></div>
+      <div>hoverStartTriggerCount</div>
+      <div id="hoverStartTriggerCount">0</div>
+      <div>hoverEndTriggerCount</div>
+      <div id="hoverEndTriggerCount">0</div>
+  </div>`;
+
+  $('#container').html(markup);
+
+  const { DevExpress } = (window as any);
+
+  let hoverStartTriggerCount = 0;
+  let hoverEndTriggerCount = 0;
+
+  DevExpress.events.on($('#target'), 'dxhoverstart', () => {
+    hoverStartTriggerCount += 1;
+
+    $('#hoverStartTriggerCount').text(hoverStartTriggerCount);
+  });
+
+  DevExpress.events.on($('#target'), 'dxhoverend', () => {
+    hoverEndTriggerCount += 1;
+
+    $('#hoverEndTriggerCount').text(hoverEndTriggerCount);
+  });
+});
+
+test('The `dxhoverstart` event should be triggered after dragging and dropping an HTML draggable element (T1260277)', async (t) => {
+  const draggable = Selector('#draggable');
+  const target = Selector('#target');
+  const hoverStartTriggerCount = Selector('#hoverStartTriggerCount');
+  const hoverEndTriggerCount = Selector('#hoverEndTriggerCount');
+
+  await t
+    .drag(draggable, 0, 400, { speed: 1 });
+
+  // `.drag` does not trigger the `pointercancel` event.
+  // A sequence of `.drag` calls behaves like a single drag&drop operation,
+  // and each call does not trigger the `pointerup` event.
+  // Even if it did, the `pointercancel` event would not be triggered as specified in:
+  // https://www.w3.org/TR/pointerevents/#suppressing-a-pointer-event-stream
+  // This is a hack to test the event engine's logic.
+  await t.dispatchEvent(draggable, 'pointercancel');
+
+  await t
+    .drag(target, 0, 400, { speed: 1 });
+
+  await t.expect(hoverStartTriggerCount.textContent).eql('1');
+  await t.expect(hoverEndTriggerCount.textContent).eql('1');
+}).before(async () => {
+  await init();
+});

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

@@ -9,6 +9,49 @@ import { getNumberData } from '../helpers/generateDataSourceData';
 fixture.disablePageReloads`FilterRow`
   .page(url(__dirname, '../../container.html'));
 
+test('Filter should reset if the filter row editor text is cleared (T1257261)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);
+  const filterPanelText = dataGrid.getFilterPanel().getFilterText();
+
+  await t
+    // assert
+    .expect(filterPanelText.element.textContent)
+    .eql('[Text] Equals \'i\'')
+    // act
+    .click(filterEditor.input)
+    .pressKey('backspace')
+    .wait(100) // updateValueTimeout
+    // assert
+    .expect(filterPanelText.element.textContent)
+    .eql('Create Filter')
+    // act
+    .click(dataGrid.element)
+    // assert
+    .expect(filterPanelText.element.textContent)
+    .eql('Create Filter');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { ID: 1, Text: 'Item 1' },
+    { ID: 2, Text: '' },
+    { ID: 3, Text: 'Item 3' },
+  ],
+  keyExpr: 'ID',
+  showBorders: true,
+  remoteOperations: true,
+  headerFilter: { visible: true },
+  filterRow: { visible: true },
+  filterPanel: { visible: true },
+  filterValue: ['Text', '=', 'i'],
+  columns: ['ID', {
+    dataField: 'Text',
+    selectedFilterOperation: '=',
+  }],
+  onEditorPreparing(e: any) {
+    e.updateValueTimeout = 100;
+  },
+}));
+
 test('Filter row\'s height should be adjusted by content (T1072609)', async (t) => {
   const dataGrid = new DataGrid('#container');
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

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

@@ -10,6 +10,47 @@ fixture.disablePageReloads`Header Filter`
 
 const GRID_CONTAINER = '#container';
 
+test('Data should be filtered if (Blank) is selected in the header filter (T1257261)', async (t) => {
+  const result: string[] = [];
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const headerCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(1);
+  const dataCell = dataGrid.getDataRow(0).getDataCell(0);
+  const filterIconElement = headerCell.getFilterIcon();
+  const headerFilter = new HeaderFilter();
+  const buttons = headerFilter.getButtons();
+  const list = headerFilter.getList();
+
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(1).element) // Select second item with value 'Item 1'
+    .click(buttons.nth(0)); // Click OK
+
+  result[0] = await dataCell.element().innerText;
+
+  await t
+    .click(filterIconElement)
+    .click(list.getItem(1).element) // Deselect second item with value 'Item 1'
+    .click(list.getItem(0).element) // Select second item with value '(Blanks)'
+    .click(buttons.nth(0)); // Click OK
+
+  result[1] = await dataCell.element().innerText;
+
+  await t.expect(result[0]).eql('1')
+    .expect(result[1]).eql('2');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { ID: 1, Text: 'Item 1' },
+    { ID: 2, Text: '' },
+    { ID: 3, Text: 'Item 3' },
+  ],
+  keyExpr: 'ID',
+  showBorders: true,
+  remoteOperations: true,
+  headerFilter: { visible: true },
+  filterRow: { visible: true },
+  filterPanel: { visible: true },
+}));
+
 test('HeaderFilter icon should be grayed out after the clearFilter call (T1193648)', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid(GRID_CONTAINER);

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

@@ -180,3 +180,33 @@ test('Toolbar should not reset its widget values when changing the disabled prop
     }],
   },
 }));
+
+[
+  Themes.genericLight,
+  Themes.materialBlue,
+  Themes.fluentBlue,
+].forEach((theme) => {
+  test(`Invisible toolbar doesn't have additional paddings (T1261773) in ${theme}`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid('#container');
+
+    await t
+      .expect(await takeScreenshot(`invisible-toolbar-buttons-${theme}.png`, dataGrid.element))
+      .ok()
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(async () => {
+    await changeTheme(theme);
+
+    return createWidget('dxDataGrid', {
+      dataSource: getData(5, 3),
+      keyExpr: 'field_0',
+      toolbar: {
+        items: ['columnChooserButton'],
+        visible: false,
+      },
+    });
+  }).after(async () => {
+    await changeTheme(Themes.genericLight);
+  });
+});

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

@@ -7,6 +7,7 @@ import { getData } from '../helpers/generateDataSourceData';
 import url from '../../../helpers/getPageUrl';
 import { changeTheme } from '../../../helpers/changeTheme';
 import { Themes } from '../../../helpers/themes';
+import { defaultConfig } from './data';
 
 const DATA_GRID_SELECTOR = '#container';
 
@@ -1367,3 +1368,21 @@ safeSizeTest('The simulated scrollbar should display correctly when there are st
       });
   });
 });
+
+safeSizeTest('The grid should display correctly when there is no data and there are fixed columns (T1269088)', async (t) => {
+  // arrange, act
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await takeScreenshot('T1269088_grid_with_fixed_columns_and_without_data.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  dataSource: [],
+}));

packages/devextreme-scss/.stylelintrc.json

@@ -33,6 +33,8 @@
         "selector-not-notation": null,
         "keyframe-selector-notation": null,
         "media-feature-range-notation": null,
+        "no-eol-whitespace": true,
+        "no-missing-end-of-source-newline": true,
 
         "scss/at-else-empty-line-before": null,
         "scss/at-if-closing-brace-newline-after": null,

packages/devextreme-scss/package.json

@@ -14,7 +14,7 @@
     "sass-embedded": "1.59.2",
     "stylelint": "15.11.0",
     "stylelint-config-standard-scss": "9.0.0",
-    "stylelint-scss": "5.3.1",
+    "stylelint-scss": "6.10.0",
     "through2": "2.0.5",
     "ts-jest": "29.1.2"
   },

packages/devextreme-scss/scss/widgets/base/_dropDownMenu.scss

@@ -21,7 +21,7 @@
     display: block;
     border-top: 0;
   }
-  
+
   .dx-list-item-content {
     display: block;
   }

packages/devextreme-scss/scss/widgets/base/_tabPanel.scss

@@ -22,7 +22,7 @@
 
 .dx-tabpanel-tabs-position-right {
   flex-direction: row-reverse;
-  
+
   &.dx-rtl {
     flex-direction: row;
   }
@@ -34,7 +34,7 @@
 
 .dx-tabpanel-tabs-position-left {
   flex-direction: row;
-  
+
   &.dx-rtl {
     flex-direction: row-reverse;
   }

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss

@@ -24,13 +24,13 @@
       &:first-child {
         border-start-start-radius: $border-radius;
       }
-  
+
       &:last-child {
         border-end-start-radius: $border-radius;
       }
     }
   }
-  
+
   .dx-chat-messagegroup-alignment-end {
     .dx-chat-messagebubble {
       color: $color-primary;

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss

@@ -20,15 +20,15 @@
   .dx-chat-messagegroup-information {
     column-gap: $information-gap;
   }
-  
+
   .dx-chat-messagegroup-alignment-start {
     grid-template-columns: $messagegroup-start-template;
   }
 
   .dx-chat-messagegroup-alignment-start:has(.dx-avatar) {
     column-gap: $messagegroup-start-gap;
   }
-  
+
   .dx-chat-messagegroup-time {
     font-size: $information-font-size;
     color: $information-timestamp-color;

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss

@@ -25,7 +25,7 @@
     font-size: $font-size;
     color: $color;
   }
-  
+
   .dx-chat-typingindicator-bubble {
     padding-block: $bubble-padding-block;
     padding-inline: $bubble-padding-inline;

packages/devextreme-scss/scss/widgets/base/checkBox/_mixins.scss

@@ -29,7 +29,7 @@
   .dx-checkbox-icon {
     .dx-checkbox-indeterminate & {
       color: $color;
-    
+
       @include dx-checkbox-icon-centered($icon-height, $icon-width);
 
       &::before {

packages/devextreme-scss/scss/widgets/base/dataGrid/_index.scss

@@ -417,10 +417,9 @@ $datagrid-text-stub-background-image-path: null !default;
   tr {
     outline: none;
   }
-  
+
   &:focus-within {
     outline: 2px solid $datagrid-focused-border-color;
     outline-offset: -2px;
   }
 }
-

packages/devextreme-scss/scss/widgets/base/dropDownButton/_mixins.scss

@@ -7,7 +7,7 @@
       width: $dropdownbutton-icon-spindown-size;
       height: $dropdownbutton-icon-spindown-size;
     }
-  } 
+  }
 
   .dx-dropdownbutton-action {
     &.dx-button-has-icon:not(.dx-button-has-text) {
@@ -22,7 +22,7 @@
         margin-inline-start: 4px;
         margin-inline-end: 0;
       }
-    } 
+    }
   }
 
   .dx-dropdownbutton-has-arrow {

packages/devextreme-scss/scss/widgets/base/dropDownEditor/_mixins.scss

@@ -29,7 +29,7 @@
       .dx-texteditor-input {
         padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding;
       }
-      
+
       .dx-start-datebox {
         .dx-texteditor-input {
           padding-inline-end: $texteditor-filled-input-horizontal-padding;