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

…25_1-tagbox-valueexpr-not-applying

.github/workflows/build_all.yml

@@ -49,9 +49,34 @@ jobs:
         run: pnpm run all:build
 
       - name: Copy build artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: devextreme-npm-packages
           path: |
             artifacts/npm/*.tgz
           retention-days: 1
+
+  custom_bundles:
+    runs-on: devextreme-shr2
+    needs: build
+
+    steps:
+      - name: Download npm packages
+        uses: actions/download-artifact@v4
+        with:
+          name: devextreme-npm-packages
+          path: npm
+
+      - name: Move devextreme package
+        run: mv ./npm/devextreme-2*.tgz ./devextreme.tgz
+
+      - name: Setup deps
+        run: |
+          npm init -y
+          npm i webpack terser-webpack-plugin
+          npm i ./devextreme.tgz
+
+      - name: Build bundle
+        run: |
+          npx devextreme-bundler-init custom-bundle
+          npx devextreme-bundler custom-bundle

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

@@ -240,3 +240,30 @@ test('DataGrid - FilterRow cell loses focus when focusedRowEnabled is true and e
     });
   });
 });
+
+['onFocusedRowChanged', 'onFocusedRowChanging'].forEach((event) => {
+  test(`Focus should be preserved on datagrid when rowsview repaints in ${event} event (T1224663)`, async (t) => {
+    const dataGrid = new DataGrid('#container');
+
+    await t
+      .click(dataGrid.getDataCell(0, 0).element)
+      .expect(dataGrid.getDataRow(0).isFocusedRow)
+      .ok();
+
+    await t
+      .pressKey('down')
+      .expect(dataGrid.getDataRow(1).isFocusedRow)
+      .ok();
+  }).before(async () => createWidget('dxDataGrid', {
+    dataSource: [
+      { id: 1, name: 'name 1' },
+      { id: 2, name: 'name 2' },
+      { id: 3, name: 'name 3' },
+    ],
+    keyExpr: 'id',
+    focusedRowEnabled: true,
+    [event]: (e) => {
+      e.component.repaint();
+    },
+  }));
+});

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

@@ -82,7 +82,7 @@
   .dx-popup-inherit-height & {
     @include dx-popup-content-auto-resizing();
 
-    > .dx-template-wrapper {
+    > div {
       max-height: inherit;
       min-height: inherit;
 

packages/devextreme/build/gulp/npm.js

@@ -123,8 +123,10 @@ const sources = (src, dist, distGlob) => (() => merge(
 
                 pkg.name = 'devextreme';
                 pkg.version = ctx.version;
+
                 delete pkg.devDependencies;
                 delete pkg.publishConfig;
+                delete pkg.scripts;
 
                 file.contents = Buffer.from(JSON.stringify(pkg, null, 2));
                 callback(null, file);

packages/devextreme/build/npm-bin/bundler.js

@@ -24,7 +24,9 @@ const createConfig = function(outputFile, mode) {
 
     config.resolve = {
         alias: {
-            'devextreme': sourcesDir
+            'devextreme': sourcesDir,
+            '../../events/index': path.resolve(sourcesDir, 'cjs/events/index.js'),
+            '../../common/core/events/utils/index': path.resolve(sourcesDir, 'cjs/common/core/events.js')
         },
         mainFields: ['main']
     };
@@ -43,7 +45,8 @@ webpack([
 
     const jsonStats = stats.toJson();
     if(jsonStats.errors.length) {
-        console.log('\'' + bundle + '\' bundles creation failed!\n\n' + jsonStats.errors.join('\n\n'));
+        const errorMessages = jsonStats.errors.map(({ message }) => message);
+        console.log('\'' + bundle + '\' bundles creation failed!\n\n' + errorMessages.join('\n\n'));
     } else {
         console.log('\'' + bundle + '\' bundles created!');
     }

packages/devextreme/js/__internal/core/options/m_index.ts

@@ -245,7 +245,7 @@ export class Options {
     return Object.prototype.hasOwnProperty.call(this._deprecated, name);
   }
 
-  cache(name, options) {
+  cache(name, options?: Record<string, unknown>) {
     const isGetter = arguments.length < 2;
 
     if (isGetter) {

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/const.ts

@@ -4,6 +4,7 @@ export const ATTRIBUTES = {
 };
 
 export const ROWS_VIEW_CLASS = 'rowsview';
+export const TABLE_CLASS = 'table';
 export const EDIT_FORM_CLASS = 'edit-form';
 export const GROUP_FOOTER_CLASS = 'group-footer';
 export const ROW_CLASS = 'dx-row';

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

@@ -24,6 +24,7 @@ import {
 import { isDeferred, isDefined, isEmptyObject } from '@js/core/utils/type';
 import * as accessibility from '@js/ui/shared/accessibility';
 import { focused } from '@js/ui/widget/selectors';
+import { isElementInDom } from '@ts/core/utils/m_dom';
 import type { AdaptiveColumnsController } from '@ts/grids/grid_core/adaptivity/m_adaptivity';
 import type { DataController } from '@ts/grids/grid_core/data_controller/m_data_controller';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
@@ -71,6 +72,7 @@ import {
   REVERT_BUTTON_CLASS,
   ROWS_VIEW,
   ROWS_VIEW_CLASS,
+  TABLE_CLASS,
   WIDGET_CLASS,
 } from './const';
 import { GridCoreKeyboardNavigationDom } from './dom';
@@ -331,18 +333,32 @@ export class KeyboardNavigationController extends modules.ViewController {
 
     this._documentClickHandler = this._documentClickHandler || this.createAction((e) => {
       const $target = $(e.event.target);
-      const isCurrentRowsViewClick = this._isEventInCurrentGrid(e.event)
-        && $target.closest(`.${this.addWidgetPrefix(ROWS_VIEW_CLASS)}`).length;
-      const isEditorOverlay = $target.closest(
-        `.${DROPDOWN_EDITOR_OVERLAY_CLASS}`,
-      ).length;
-      const isColumnResizing = !!this._columnResizerController && this._columnResizerController.isResizing();
-      if (!isCurrentRowsViewClick && !isEditorOverlay && !isColumnResizing) {
-        const targetInsideFocusedView = this._focusedView
-          ? $target.parents().filter(this._focusedView.element()).length > 0
-          : false;
-
-        !targetInsideFocusedView && this._resetFocusedCell(true);
+
+      const tableSelector = `.${this.addWidgetPrefix(TABLE_CLASS)}`;
+      const rowsViewSelector = `.${this.addWidgetPrefix(ROWS_VIEW_CLASS)}`;
+      const editorOverlaySelector = `.${DROPDOWN_EDITOR_OVERLAY_CLASS}`;
+
+      // if click was on the datagrid table, but the target element is no more presented in the DOM
+      const needKeepFocus = !!$target.closest(tableSelector).length && !isElementInDom($target);
+
+      if (needKeepFocus) {
+        e.event.preventDefault();
+        return;
+      }
+
+      const isRowsViewClick = this._isEventInCurrentGrid(e.event) && !!$target.closest(rowsViewSelector).length;
+      const isEditorOverlayClick = !!$target.closest(editorOverlaySelector).length;
+      const isColumnResizing = !!this._columnResizerController?.isResizing();
+
+      if (!isRowsViewClick && !isEditorOverlayClick && !isColumnResizing) {
+        const isClickOutsideFocusedView = this._focusedView
+          ? $target.closest(this._focusedView.element()).length === 0
+          : true;
+
+        if (isClickOutsideFocusedView) {
+          this._resetFocusedCell(true);
+        }
+
         this._resetFocusedView();
       }
     });

packages/devextreme/js/__internal/ui/collection/m_collection_widget.live_update.ts

@@ -19,21 +19,15 @@ export default CollectionWidget.inherit({
     });
   },
 
-  ctor() {
-    this.callBase.apply(this, arguments);
-
-    this._customizeStoreLoadOptions = (e) => {
-      const dataController = this._dataController;
-
-      if (dataController.getDataSource() && !this._dataController.isLoaded()) {
-        this._correctionIndex = 0;
-      }
-      if (this._correctionIndex && e.storeLoadOptions) {
-        e.storeLoadOptions.skip += this._correctionIndex;
-      }
-    };
+  _customizeStoreLoadOptions(e) {
+    const dataController = this._dataController;
 
-    this._dataController?.on('customizeStoreLoadOptions', this._customizeStoreLoadOptions);
+    if (dataController.getDataSource() && !this._dataController.isLoaded()) {
+      this._correctionIndex = 0;
+    }
+    if (this._correctionIndex && e.storeLoadOptions) {
+      e.storeLoadOptions.skip += this._correctionIndex;
+    }
   },
 
   reload() {
@@ -44,6 +38,7 @@ export default CollectionWidget.inherit({
     this.callBase();
     this._refreshItemsCache();
     this._correctionIndex = 0;
+    this._subscribeLoadOptionsCustomization(true);
   },
 
   _findItemElementByKey(key) {
@@ -146,7 +141,7 @@ export default CollectionWidget.inherit({
   },
 
   _dispose() {
-    this._dataController.off('customizeStoreLoadOptions', this._customizeStoreLoadOptions);
+    this._subscribeLoadOptionsCustomization(false);
     this.callBase();
   },
 
@@ -242,6 +237,19 @@ export default CollectionWidget.inherit({
     domAdapter.insertElement($container.get(0), $itemFrame.get(0), nextSiblingElement);
   },
 
+  _subscribeLoadOptionsCustomization(enable: boolean): void {
+    if (!this._dataController) {
+      return;
+    }
+
+    if (enable) {
+      this._correctionIndex = 0;
+      this._dataController.on('customizeStoreLoadOptions', this._customizeStoreLoadOptions.bind(this));
+    } else {
+      this._dataController.off('customizeStoreLoadOptions', this._customizeStoreLoadOptions.bind(this));
+    }
+  },
+
   _optionChanged(args) {
     switch (args.name) {
       case 'items': {
@@ -256,7 +264,9 @@ export default CollectionWidget.inherit({
           this.option('items', []);
         }
 
+        this._subscribeLoadOptionsCustomization(false);
         this.callBase(args);
+        this._subscribeLoadOptionsCustomization(true);
         break;
       case 'repaintChangesOnly':
         break;

packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts

@@ -420,7 +420,7 @@ const DateBoxMask = DateBoxBase.inherit({
   },
 
   _selectFirstPart() {
-    if (this.option('text')) {
+    if (this.option('text') && this._dateParts) {
       this._activePartIndex = -1;
       this._selectNextPart(FORWARD);
     }

packages/devextreme/js/__internal/ui/drawer/m_drawer.ts

@@ -11,12 +11,12 @@ import { extend } from '@js/core/utils/extend';
 import { getBoundingRect } from '@js/core/utils/position';
 import { isDefined, isFunction } from '@js/core/utils/type';
 import { hasWindow } from '@js/core/utils/window';
+import type { PanelLocation } from '@js/ui/drawer';
 import Widget from '@js/ui/widget/ui.widget';
-
-import { animation } from './m_drawer.animation';
-import OverlapStrategy from './m_drawer.rendering.strategy.overlap';
-import PushStrategy from './m_drawer.rendering.strategy.push';
-import ShrinkStrategy from './m_drawer.rendering.strategy.shrink';
+import { animation } from '@ts/ui/drawer/m_drawer.animation';
+import OverlapStrategy from '@ts/ui/drawer/m_drawer.rendering.strategy.overlap';
+import PushStrategy from '@ts/ui/drawer/m_drawer.rendering.strategy.push';
+import ShrinkStrategy from '@ts/ui/drawer/m_drawer.rendering.strategy.shrink';
 
 const DRAWER_CLASS = 'dx-drawer';
 const DRAWER_WRAPPER_CLASS = 'dx-drawer-wrapper';
@@ -216,12 +216,13 @@ const Drawer = (Widget as any).inherit({
     this.$element().addClass(`${DRAWER_CLASS}-${this.option('openedStateMode')}`);
   },
 
-  _refreshPositionClass(prevPosition) {
-    if (prevPosition) {
-      this.$element().removeClass(`${DRAWER_CLASS}-${prevPosition}`);
-    }
+  _refreshPositionClass(): void {
+    const positions = ['left', 'right', 'top', 'bottom'];
+    const classPrefix = `${DRAWER_CLASS}-`;
 
-    this.$element().addClass(`${DRAWER_CLASS}-${this.calcTargetPosition()}`);
+    this.$element()
+      .removeClass(positions.map((position) => `${classPrefix}${position}`).join(' '))
+      .addClass(`${classPrefix}${this.calcTargetPosition()}`);
   },
 
   _refreshWrapperChildrenOrder() {
@@ -279,17 +280,18 @@ const Drawer = (Widget as any).inherit({
     this._minSize = this.option('minSize') || 0;
   },
 
-  calcTargetPosition() {
-    const position = this.option('position');
-    const rtl = this.option('rtlEnabled');
-    let result = position;
+  calcTargetPosition(): PanelLocation {
+    const { position, rtlEnabled } = this.option();
 
     if (position === 'before') {
-      result = rtl ? 'right' : 'left';
-    } else if (position === 'after') {
-      result = rtl ? 'left' : 'right';
+      return rtlEnabled ? 'right' : 'left';
     }
-    return result;
+
+    if (position === 'after') {
+      return rtlEnabled ? 'left' : 'right';
+    }
+
+    return position;
   },
 
   getOverlayTarget() {
@@ -511,7 +513,7 @@ const Drawer = (Widget as any).inherit({
         this._togglePanelContentHiddenClass();
         break;
       case 'position':
-        this._refreshPositionClass(args.previousValue);
+        this._refreshPositionClass();
         this._refreshWrapperChildrenOrder();
         this._invalidate();
         break;