Merge branch '25_1' of https://github.com/DevExpress/DevExtreme into 25_1_demos_csb_tgz

Author: GoodDayForSurf

apps/demos/Demos/Charts/ErrorBars/description.md

@@ -1,2 +1,13 @@
-If your data contains an error or measurement uncertainty, you can indicate a confidential interval on the Chart using error bars. To configure them, use the fields of the series’ **valueErrorBar** object. In this example, error bars indicate a range of average temperatures (on the upper pane) and humidity (on the lower pane) for a specific month.
-<!--split-->
+DevExtreme Chart supports value error bars. Implement these bars to indicate data measurement tolerances and [confidence intervals](https://en.wikipedia.org/wiki/Confidence_interval). Configure error bar settings and appearance in the **series**.[valueErrorBar](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/) object.
+
+<!--split-->
+
+To enable error bars, specify one of the following pairs of **valueErrorBar** properties:
+
+- [lowValueField](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#lowValueField) and [highValueField](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#highValueField)    
+Specify predefined error bars for each series point.
+
+- [value](Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#value) and [type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/valueErrorBar/#type)    
+Configure dynamically calculated error bars.
+
+This demo implements predefined error bars specified in the Chart data source.

apps/demos/Demos/Charts/MultiplePanes/description.md

@@ -1,2 +1,7 @@
-The Chart component allows you to create charts with multiple panes stacked vertically. Each pane can plot one or more series and can share the argument axis with other plots.
-<!--split-->
+The DevExtreme Chart component allows you to display data in multiple panes. To configure a multi-pane chart, specify the [panes[]](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/) array. The component stacks panes vertically (or horizontally when [rotated](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#rotated) is `true`).
+
+<!--split-->
+
+Chart assigns unique [value axes](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/) and a shared [argument axis](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/) to all panes. To configure the value axis of a specific pane, define **valueAxis** properties and assign the **pane**.[name](/Documentation/ApiReference/UI_Components/dxChart/Configuration/panes/#name) value to **valueAxis**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/#pane).
+
+DevExtreme Chart can display multiple [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) in a single pane. Specify the **series**.[pane](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#pane) property to display a series in a specific pane.

apps/demos/Demos/Charts/ParetoChart/description.md

@@ -1,3 +1,5 @@
-In this demo, the DevExtreme Chart component is used to create a [Pareto chart][0]. This example of a Pareto chart summarizes complaints about the service provided by a pizza shop. From this chart, the pizza shop owner may infer that to satisfy most of the customers, he or she needs to eliminate two most frequently encountered issues: delayed delivery and cold pizza.
+You can utilize the DevExtreme Chart component to display data in a [Pareto chart](https://en.wikipedia.org/wiki/Pareto_chart). A Pareto chart displays individual values along with their cumulative totals. In this demo, individual values are numbers of complaints and cumulative totals are represented as percentages.
 
-[0]: https://en.wikipedia.org/wiki/Pareto_chart
+<!--split-->
+
+To create a Pareto chart, configure two [series](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/) objects. Assign the [Bar](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/BarSeries/) and [Line](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/LineSeries/)/[Spline](/Documentation/ApiReference/UI_Components/dxChart/Series_Types/SplineSeries/) series types to **series**.[type](/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type). To represent the numbers of the [Pareto principle](https://en.wikipedia.org/wiki/Pareto_principle) (80/20), you can specify constant lines. This demo configures a **valueAxis**.[constantLines](/Documentation/ApiReference/UI_Components/dxChart/Configuration/valueAxis/constantLines/) object to display a constant line at 80% of the cumulative total axis.

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/startEditing.functional.ts

@@ -1,4 +1,5 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { ClientFunction } from 'testcafe';
 import url from '../../../../helpers/getPageUrl';
 import { createWidget } from '../../../../helpers/createWidget';
 
@@ -36,6 +37,86 @@ test('Editing should start by pressing enter after scrolling content with scroll
   });
 });
 
+test('editing.allowUpdating callback should receive correct row on tab key on first cell with virtual scrolling (T1290811)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.scrollBy({ y: 10000 });
+
+  await t
+    .click(dataGrid.getDataCell(49, 0).element)
+    .expect(dataGrid.getDataCell(49, 0).getEditor().element.focused).ok();
+
+  await t
+    .pressKey('tab')
+    .expect(dataGrid.getDataCell(49, 1).getEditor().element.focused).ok();
+
+  const eventRowKeys = await ClientFunction(() => (window as any).eventRowKeys)();
+  const uniqueRowKeys = [...new Set(eventRowKeys)];
+
+  await t.expect(uniqueRowKeys).eql([49]);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [...new Array(50)].map((_, i) => ({
+      id: i,
+      data: `Row ${i}`,
+    })),
+    keyExpr: 'id',
+    columns: ['id', 'data'],
+    editing: {
+      mode: 'cell',
+      allowUpdating: (e) => {
+        (window as any).eventRowKeys ??= [];
+        (window as any).eventRowKeys.push(e.row?.key);
+        return true;
+      },
+    },
+    scrolling: {
+      mode: 'virtual',
+    },
+    height: 300,
+  });
+});
+
+test('editing.allowUpdating callback should receive correct row on tab key on last cell with virtual scrolling (T1290811)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.scrollBy({ y: 10000 });
+
+  await t
+    .click(dataGrid.getDataCell(48, 1).element)
+    .expect(dataGrid.getDataCell(48, 1).getEditor().element.focused).ok();
+
+  await t
+    .pressKey('tab')
+    .expect(dataGrid.getDataCell(49, 0).getEditor().element.focused).ok();
+
+  const eventRowKeys = await ClientFunction(() => (window as any).eventRowKeys)();
+  const uniqueRowKeys = [...new Set(eventRowKeys)];
+
+  await t.expect(uniqueRowKeys).eql([48, 49]);
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    dataSource: [...new Array(50)].map((_, i) => ({
+      id: i,
+      data: `Row ${i}`,
+    })),
+    keyExpr: 'id',
+    columns: ['id', 'data'],
+    editing: {
+      mode: 'cell',
+      allowUpdating: (e) => {
+        (window as any).eventRowKeys ??= [];
+        (window as any).eventRowKeys.push(e.row?.key);
+        return true;
+      },
+    },
+    scrolling: {
+      mode: 'virtual',
+    },
+    height: 300,
+  });
+});
+
 test('DataGrid should not remove the minus symbol when editing started (T1201166)', async (t) => {
   const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 

e2e/testcafe-devextreme/tests/navigation/menu/etalons/Items should have links if item.url is set (fluent-blue-light).png

@@ -34,6 +34,17 @@
   &.dx-state-active {
     background-color: $menu-item-bg-active;
   }
+
+  .dx-item-url {
+    display: inherit;
+    gap: inherit;
+  }
+
+  .dx-icon-with-url {
+    &::before {
+      display: inline-block;
+    }
+  }
 }
 
 .dx-menu-item-selected {

e2e/testcafe-devextreme/tests/navigation/menu/etalons/Items with link should have correct focus style (fluent-blue-light).png

@@ -885,49 +885,52 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
 
   private _editingCellTabHandler(eventArgs, direction) {
     const eventTarget = eventArgs.originalEvent.target;
-    let $cell = this._getCellElementFromTarget(eventTarget);
-    let isEditingAllowed;
-    const $event = eventArgs.originalEvent;
-    const elementType = this._getElementType(eventTarget);
+    const $targetCell = this._getCellElementFromTarget(eventTarget);
+    const isCommandCell = $targetCell.is(COMMAND_CELL_SELECTOR);
 
-    if ($cell.is(COMMAND_CELL_SELECTOR)) {
+    if (isCommandCell) {
       return !this._targetCellTabHandler(eventArgs, direction);
     }
 
-    this._updateFocusedCellPosition($cell);
+    this._updateFocusedCellPosition($targetCell);
+
+    const elementType = this._getElementType(eventTarget);
     const nextCellInfo = this._getNextCellByTabKey(
-      $event,
+      eventArgs.originalEvent,
       direction,
       elementType,
     );
-    $cell = nextCellInfo.$cell;
+    const $nextCell = nextCellInfo.$cell;
 
-    if (!$cell || this._handleTabKeyOnMasterDetailCell($cell, direction)) {
+    if (!$nextCell || this._handleTabKeyOnMasterDetailCell($nextCell, direction)) {
       return false;
     }
 
-    const column = this._getColumnByCellElement($cell);
-    const $row = $cell.parent();
-    const rowIndex = this._getRowIndex($row);
-    const row = this._dataController.items()[rowIndex] as any;
-    const editingController = this._editingController;
+    let isEditingAllowed = false;
+    const column = this._getColumnByCellElement($nextCell);
 
-    if (column && column.allowEditing) {
+    if (column?.allowEditing) {
+      const $row = $nextCell.parent();
+      const rowIndex = this._getLocalRowIndex($row);
+      const row = this._dataController.items()[rowIndex] as any;
       const isDataRow = !row || row.rowType === 'data';
-      isEditingAllowed = editingController.allowUpdating({ row })
-        ? isDataRow
-        : row && row.isNewRow;
+
+      isEditingAllowed = this._editingController.allowUpdating({ row })
+        ? isDataRow : row?.isNewRow;
     }
 
     if (!isEditingAllowed) {
       this._closeEditCell();
     }
 
-    if (this._focusCell($cell, !nextCellInfo.isHighlighted)) {
-      if (!this._isRowEditMode() && isEditingAllowed) {
+    const nextCellFocused = this._focusCell($nextCell, !nextCellInfo.isHighlighted);
+
+    if (nextCellFocused) {
+      const isRowMode = this._isRowEditMode();
+      if (!isRowMode && isEditingAllowed) {
         this._editFocusedCell();
       } else {
-        this._focusInteractiveElement($cell, eventArgs.shift);
+        this._focusInteractiveElement($nextCell, eventArgs.shift);
       }
     }
 
@@ -2302,11 +2305,14 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     columnIndex: number,
   ): void {
     const $cell = this._getFocusedCell();
-    const rowIndex = this._getRowIndex($cell?.parent());
+    const $row = $cell?.parent();
+
+    const rowIndex = this.getRowIndex();
     const localRowIndex = Math.min(
-      rowIndex - this._dataController.getRowIndexOffset(),
+      this._getLocalRowIndex($row),
       this._dataController.items().length - 1,
     );
+
     const isEditingCell = this._editingController.isEditCell(
       localRowIndex,
       columnIndex,
@@ -2448,8 +2454,8 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     }
   }
 
-  protected _getRowIndex($row) {
-    let rowIndex = this._rowsView.getRowIndex($row);
+  protected _getRowIndex($row): number {
+    let rowIndex = this._getLocalRowIndex($row);
 
     if (rowIndex >= 0) {
       rowIndex += this._dataController.getRowIndexOffset();
@@ -2458,6 +2464,12 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     return rowIndex;
   }
 
+  protected _getLocalRowIndex($row): number {
+    const rowIndex = this._rowsView.getRowIndex($row);
+
+    return rowIndex;
+  }
+
   protected getCellIndex($cell, rowIndex): number {
     return this._rowsView.getCellIndex($cell, rowIndex);
   }