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

…24_2_ssr_dubling_fix

.github/workflows/wrapper_tests.yml

@@ -77,12 +77,14 @@ jobs:
             exit 1
           fi
 
+      - name: Angular - Download Browser
+        run: pnpx puppeteer browsers install chrome@130.0.6723.69
+
       - name: Angular - Build
         run: pnpx nx build devextreme-angular
 
-# NOTE: temporary skipped during migrating to the PNPM
-#      - name: Angular - Run tests
-#        run: pnpx nx test:dev devextreme-angular
+      - name: Angular - Run tests
+        run: pnpx nx test:dev devextreme-angular
 
       - name: Angular - Check packing
         run: pnpx nx pack devextreme-angular

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

@@ -1720,3 +1720,47 @@ test('The row alternation should display correctly when grouping and virtual scr
   grouping: { autoExpandAll: true },
   scrolling: { mode: 'virtual', useNative: false },
 })));
+
+test('DataGrid - Gray boxes appear when the push method is used to remove rows in infinite scrolling mode (T1240079)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const data = [
+    { id: 1, text: 'text 1' },
+    { id: 2, text: 'text 2' },
+  ];
+  const changes = data.map((item) => ({
+    type: 'remove',
+    key: item.id,
+  }));
+
+  await dataGrid.apiPush(changes);
+  await t
+    .expect(await takeScreenshot('T1240079', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', () => {
+    const data = [
+      { id: 1, text: 'text 1' },
+      { id: 2, text: 'text 2' },
+    ];
+    const dataSource = {
+      reshapeOnPush: true,
+      store: new (window as any).DevExpress.data.CustomStore({
+        key: 'id',
+        loadMode: 'raw',
+        load: () => Promise.resolve(data),
+      }),
+    };
+
+    return {
+      dataSource,
+      showBorders: true,
+      scrolling: {
+        mode: 'infinite',
+      },
+      height: 300,
+    };
+  });
+});

packages/devextreme-angular/package.json

@@ -62,7 +62,7 @@
     "stream-browserify": "3.0.0",
     "tslib": "2.6.3",
     "typescript": "5.4.5",
-    "webpack": "5.94.0",
+    "webpack": "5.96.1",
     "yargs": "17.7.2",
     "zone.js": "0.14.10"
   },

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

@@ -26,7 +26,7 @@ import {
 
 
 import * as CommonTypes from 'devextreme/common';
-import { EventInfo } from 'devextreme/common/core/events';
+import { DisposingEvent, InitializedEvent, OptionChangedEvent, ValidatedEvent } from 'devextreme/ui/validator';
 
 import DxValidator from 'devextreme/ui/validator';
 
@@ -180,35 +180,35 @@ export class DxValidatorComponent extends DxComponentExtension implements OnDest
 
     /**
     
-     * [descr:DOMComponentOptions.onDisposing]
+     * [descr:dxValidatorOptions.onDisposing]
     
     
      */
-    @Output() onDisposing: EventEmitter<EventInfo<any>>;
+    @Output() onDisposing: EventEmitter<DisposingEvent>;
 
     /**
     
-     * [descr:ComponentOptions.onInitialized]
+     * [descr:dxValidatorOptions.onInitialized]
     
     
      */
-    @Output() onInitialized: EventEmitter<Object>;
+    @Output() onInitialized: EventEmitter<InitializedEvent>;
 
     /**
     
-     * [descr:DOMComponentOptions.onOptionChanged]
+     * [descr:dxValidatorOptions.onOptionChanged]
     
     
      */
-    @Output() onOptionChanged: EventEmitter<Object>;
+    @Output() onOptionChanged: EventEmitter<OptionChangedEvent>;
 
     /**
     
      * [descr:dxValidatorOptions.onValidated]
     
     
      */
-    @Output() onValidated: EventEmitter<Object>;
+    @Output() onValidated: EventEmitter<ValidatedEvent>;
 
     /**
     

packages/devextreme-react/src/validator.ts

@@ -9,9 +9,20 @@ import { ExtensionComponent as BaseComponent } from "./core/extension-component"
 import { IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
+import type { DisposingEvent, InitializedEvent, ValidatedEvent } from "devextreme/ui/validator";
 import type { ValidationRuleType, ComparisonOperator } from "devextreme/common";
 
-type IValidatorOptions = React.PropsWithChildren<Properties & IHtmlOptions>
+type ReplaceFieldTypes<TSource, TReplacement> = {
+  [P in keyof TSource]: P extends keyof TReplacement ? TReplacement[P] : TSource[P];
+}
+
+type IValidatorOptionsNarrowedEvents = {
+  onDisposing?: ((e: DisposingEvent) => void);
+  onInitialized?: ((e: InitializedEvent) => void);
+  onValidated?: ((validatedInfo: ValidatedEvent) => void);
+}
+
+type IValidatorOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IValidatorOptionsNarrowedEvents> & IHtmlOptions>
 
 interface ValidatorRef {
   instance: () => dxValidator;

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

@@ -42,6 +42,7 @@
   }
 
   & .dx-popup-content > .dx-template-wrapper {
+    display: flow-root;
     height: 100%;
     width: 100%;
   }

packages/devextreme-vue/src/validator.ts

@@ -2,15 +2,13 @@ import { PropType } from "vue";
 import { defineComponent } from "vue";
 import { prepareExtensionComponentConfig } from "./core/index";
 import Validator, { Properties } from "devextreme/ui/validator";
-import  DOMComponent from "devextreme/core/dom_component";
 import {
- EventInfo,
-} from "devextreme/common/core/events";
+ DisposingEvent,
+ InitializedEvent,
+ OptionChangedEvent,
+ ValidatedEvent,
+} from "devextreme/ui/validator";
 import {
- Component,
-} from "devextreme/core/component";
-import {
- ValidationStatus,
  ValidationRuleType,
  ComparisonOperator,
 } from "devextreme/common";
@@ -41,10 +39,10 @@ const componentConfig = {
     elementAttr: Object as PropType<Record<string, any>>,
     height: [Function, Number, String] as PropType<((() => number | string)) | number | string>,
     name: String,
-    onDisposing: Function as PropType<((e: EventInfo<any>) => void)>,
-    onInitialized: Function as PropType<((e: { component: Component<any>, element: any }) => void)>,
-    onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>,
-    onValidated: Function as PropType<((validatedInfo: { brokenRule: CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule | CommonTypes.ValidationRule, brokenRules: Array<CommonTypes.ValidationRule>, isValid: boolean, name: string, status: ValidationStatus, validationRules: Array<CommonTypes.ValidationRule>, value: Record<string, any> }) => void)>,
+    onDisposing: Function as PropType<((e: DisposingEvent) => void)>,
+    onInitialized: Function as PropType<((e: InitializedEvent) => void)>,
+    onOptionChanged: Function as PropType<((e: OptionChangedEvent) => void)>,
+    onValidated: Function as PropType<((validatedInfo: ValidatedEvent) => void)>,
     validationGroup: String,
     validationRules: Array as PropType<Array<CommonTypes.ValidationRule>>,
     width: [Function, Number, String] as PropType<((() => number | string)) | number | string>

packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts

@@ -1613,6 +1613,11 @@ export const rowsView = (Base: ModuleType<RowsView>) => class VirtualScrollingRo
       .viewportItemSize(rowHeight);
 
     if (isVirtualMode(this) || gridCoreUtils.isVirtualRowRendering(this)) {
+      const isEmptyRows = this._dataController.isEmpty();
+      if (isEmptyRows) {
+        return;
+      }
+
       if (!isRender) {
         this._updateContentItemSizes();
       }

packages/devextreme/js/__internal/ui/popup/m_popup.ts

@@ -46,7 +46,7 @@ const POPUP_FULL_SCREEN_CLASS = 'dx-popup-fullscreen';
 const POPUP_FULL_SCREEN_WIDTH_CLASS = 'dx-popup-fullscreen-width';
 const POPUP_NORMAL_CLASS = 'dx-popup-normal';
 const POPUP_CONTENT_CLASS = 'dx-popup-content';
-const POPUP_CONTENT_SCROLLABLE_CLASS = 'dx-popup-content-scrollable';
+export const POPUP_CONTENT_SCROLLABLE_CLASS = 'dx-popup-content-scrollable';
 
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
 const POPUP_DRAGGABLE_CLASS = 'dx-popup-draggable';
@@ -58,7 +58,7 @@ const POPUP_BOTTOM_CLASS = 'dx-popup-bottom';
 
 const POPUP_HAS_CLOSE_BUTTON_CLASS = 'dx-has-close-button';
 
-const TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
+export const TEMPLATE_WRAPPER_CLASS = 'dx-template-wrapper';
 
 const POPUP_CONTENT_FLEX_HEIGHT_CLASS = 'dx-popup-flex-height';
 const POPUP_CONTENT_INHERIT_HEIGHT_CLASS = 'dx-popup-inherit-height';