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

…24_1

.github/workflows/pack_all.yml → .github/workflows/build_all.yml

@@ -1,7 +1,9 @@
-name: Pack all DevExtreme npm packages
+name: Build and pack DevExtreme npm packages
 
 on:
-  workflow_dispatch:
+  pull_request:
+  push:
+    branches: [24_1]
 
 jobs:
   build:
@@ -16,16 +18,16 @@ jobs:
         with:
           node-version: '20'
 
-      - name: Install packages in devextreme repo
-        run: npm install --no-audit --no-fund
+      - name: Install dependencies
+        run: npm install
 
       - name: Build npm packages
-        run: npm run all:pack
+        run: npm run all:build
 
       - name: Copy build artifacts
         uses: actions/upload-artifact@v3
         with:
           name: devextreme-npm-packages
           path: |
-            npm/*.tgz
+            artifacts/npm/*.tgz
           retention-days: 1

apps/demos/Demos/Charts/Doughnut/Angular/index.html

@@ -11,7 +11,6 @@
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.min.js"></script>
     <script src="../../../../../../node_modules/reflect-metadata/Reflect.js"></script>
     <script src="../../../../../../node_modules/systemjs/dist/system.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
 
     <script src="config.js"></script>
     <script>

apps/demos/Demos/Localization/UsingIntl/Angular/index.html

@@ -11,7 +11,6 @@
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.min.js"></script>
     <script src="../../../../../../node_modules/reflect-metadata/Reflect.js"></script>
     <script src="../../../../../../node_modules/systemjs/dist/system.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en,Intl.~locale.de,Intl.~locale.ru"></script>
 
     <script src="config.js"></script>
     <script>

apps/demos/Demos/Localization/UsingIntl/jQuery/index.html

@@ -9,7 +9,6 @@
     <link rel="stylesheet" type="text/css" href="../../../../../../node_modules/devextreme-dist/css/dx.light.css" />
 
     <script src="../../../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en,Intl.~locale.de,Intl.~locale.ru"></script>
     <script src="../../../../../../node_modules/devextreme-dist/js/localization/dx.messages.de.js"></script>
     <script src="../../../../../../node_modules/devextreme-dist/js/localization/dx.messages.ru.js"></script>
 

apps/demos/Demos/PivotGrid/ChartIntegration/Angular/index.html

@@ -11,7 +11,6 @@
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.min.js"></script>
     <script src="../../../../../../node_modules/reflect-metadata/Reflect.js"></script>
     <script src="../../../../../../node_modules/systemjs/dist/system.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
 
     <script src="config.js"></script>
     <script>

apps/demos/Demos/PivotGrid/ChartIntegration/Vue/index.html

@@ -15,8 +15,6 @@
     </script>
     <script src="../../../../../../node_modules/core-js/client/shim.min.js"></script>
     <script src="../../../../../../node_modules/systemjs/dist/system.js"></script>
-    <script src="../../../../../../node_modules/vue-i18n/dist/vue-i18n.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript">
       System.import("./index.ts");

apps/demos/Demos/PivotGrid/Overview/Angular/index.html

@@ -11,7 +11,6 @@
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.min.js"></script>
     <script src="../../../../../../node_modules/reflect-metadata/Reflect.js"></script>
     <script src="../../../../../../node_modules/systemjs/dist/system.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
 
     <script src="config.js"></script>
     <script>

apps/demos/Demos/TileView/ItemTemplate/Angular/index.html

@@ -11,7 +11,6 @@
     <script src="../../../../node_modules/zone.js/bundles/zone.umd.min.js"></script>
     <script src="../../../../../../node_modules/reflect-metadata/Reflect.js"></script>
     <script src="../../../../../../node_modules/systemjs/dist/system.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
 
     <script src="config.js"></script>
     <script>

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

@@ -1,6 +1,9 @@
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
+import { changeTheme } from '../../../helpers/changeTheme';
+import { Themes } from '../../../helpers/themes';
 
 fixture.disablePageReloads`Sorting`
   .page(url(__dirname, '../../container.html'));
@@ -47,3 +50,40 @@ test('Filter expression should be valid when sortingMethod, remoteOperations, an
     autoNavigateToFocusedRow: true,
   };
 }));
+
+test('Multiple sorting alphabetical icons should be correct in Fluent Theme (T1243658)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t
+    .rightClick(dataGrid.getHeaders().element);
+  await takeScreenshot(
+    'datagrid-alphabetical-icons-should-be-correct.png',
+    dataGrid.element,
+  );
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(
+  async () => {
+    await changeTheme(Themes.fluentBlue);
+    await createWidget('dxDataGrid', {
+      dataSource: [
+        {
+          ID: 1,
+          FirstName: 'John',
+        },
+      ],
+      keyExpr: 'ID',
+      sorting: {
+        mode: 'multiple',
+      },
+      columns: [
+        {
+          dataField: 'FirstName',
+          sortOrder: 'asc',
+        },
+      ],
+    });
+  },
+).after(async () => { await changeTheme(Themes.genericLight); });

packages/devextreme/build/gulp/context.js

@@ -18,6 +18,6 @@ module.exports = {
     TRANSPILED_PROD_RENOVATION_PATH: 'artifacts/transpiled-renovation-npm',
     TRANSPILED_RENOVATION_PATH: 'artifacts/transpiled-renovation',
     TRANSPILED_PROD_ESM_PATH: 'artifacts/transpiled-esm-npm',
-    SCSS_PACKAGE_PATH: '../../devextreme-scss',
+    SCSS_PACKAGE_PATH: '../devextreme-scss',
     EULA_URL: 'https://js.devexpress.com/Licensing/'
 };

packages/devextreme/build/gulp/gulp-data-uri.js

@@ -18,7 +18,7 @@ const img = (buffer, ext) => {
 };
 
 const handler = (_, svgEncoding, fileName) => {
-    const relativePath = path.join(__dirname, '..', '..', fileName);
+    const relativePath = path.join(__dirname, '..', '..', '..', 'devextreme-scss', fileName);
     const filePath = path.resolve(relativePath);
     const ext = filePath.split('.').pop();
     const data = fs.readFileSync(filePath);

packages/devextreme/build/gulp/npm.js

@@ -161,12 +161,12 @@ gulp.task('npm-sass', gulp.series(
             .pipe(gulp.dest(scssDir)),
 
         () => gulp
-            .src(`${ctx.SCSS_PACKAGE_PATH}/fonts/**/*`, { base: '.' })
-            .pipe(gulp.dest(`${scssDir}/widgets/material/typography`)),
+            .src(`${ctx.SCSS_PACKAGE_PATH}/fonts/**/*`)
+            .pipe(gulp.dest(`${scssDir}/widgets/material/typography/fonts`)),
 
         () => gulp
-            .src(`${ctx.SCSS_PACKAGE_PATH}/icons/**/*`, { base: '.' })
-            .pipe(gulp.dest(`${scssDir}/widgets/base`)),
+            .src(`${ctx.SCSS_PACKAGE_PATH}/icons/**/*`)
+            .pipe(gulp.dest(`${scssDir}/widgets/base/icons`)),
     )
 ));
 

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

@@ -1,11 +1,13 @@
 import type { Orientation } from '@js/common';
 import registerComponent from '@js/core/component_registrator';
+import domAdapter from '@js/core/dom_adapter';
 import { getPublicElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import resizeObserverSingleton from '@js/core/resize_observer';
 import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred } from '@js/core/utils/deferred';
+import { contains } from '@js/core/utils/dom';
 import { extend } from '@js/core/utils/extend';
 import {
   getOuterHeight,
@@ -214,17 +216,23 @@ class Splitter extends CollectionWidget<Properties> {
 
   _attachHoldEvent(): void {}
 
-  _resizeHandler(): void {
-    if (!this._shouldRecalculateLayout) {
-      return;
-    }
+  _isAttached(): boolean {
+    return !!contains(domAdapter.getBody(), $(this.element()).get(0));
+  }
 
-    this._layout = this._getDefaultLayoutBasedOnSize();
+  _isVisible(): boolean {
+    return isElementVisible($(this.element())[0]);
+  }
 
-    this._applyStylesFromLayout(this._layout);
-    this._updateItemSizes();
+  _resizeHandler(): void {
+    if (this._shouldRecalculateLayout && this._isAttached() && this._isVisible()) {
+      this._layout = this._getDefaultLayoutBasedOnSize();
+
+      this._applyStylesFromLayout(this._layout);
+      this._updateItemSizes();
 
-    this._shouldRecalculateLayout = false;
+      this._shouldRecalculateLayout = false;
+    }
   }
 
   _renderItems(items: Item[]): void {
@@ -233,7 +241,7 @@ class Splitter extends CollectionWidget<Properties> {
     this._updateResizeHandlesResizableState();
     this._updateResizeHandlesCollapsibleState();
 
-    if (isElementVisible($(this.element())[0])) {
+    if (this._isVisible()) {
       this._layout = this._getDefaultLayoutBasedOnSize();
       this._applyStylesFromLayout(this._layout);
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js

@@ -1239,6 +1239,52 @@ QUnit.module('Pane sizing', moduleConfig, () => {
 
         assert.strictEqual($leftPane.css('width'), '0px');
     });
+
+    QUnit.test('The splitter panes should maintain the correct ratio after being rendered inside an invisible element and display correctly when shown (T1241434)', function(assert) {
+        const done = assert.async();
+        $('#splitterParentContainer').css('display', 'none');
+
+        this.reinit({
+            dataSource: [{ size: '30%' }, { size: '70%' }]
+        }, '#splitterInContainer');
+
+        this.$element.css('width', '600px');
+
+        setTimeout(() => {
+            this.assertLayout(['', '']);
+
+            $('#splitterParentContainer').css('display', 'block');
+
+            setTimeout(() => {
+                this.assertLayout(['30.4054', '69.5946']);
+
+                done();
+            }, 10);
+        });
+    });
+
+    QUnit.test('The splitter panes should maintain the correct ratio after being initialized on a detached element and then attached to the DOM (T1241434)', function(assert) {
+        const done = assert.async();
+        const $splitter = $('<div id="splitterDetached">');
+
+        this.$element = $splitter.dxSplitter({
+            dataSource: [{ size: '30%' }, { size: '70%' }]
+        });
+
+        this.$element.css('width', 600);
+
+        setTimeout(() => {
+            this.assertLayout(['', '']);
+
+            $splitter.appendTo('#splitterParentContainer');
+
+            setTimeout(() => {
+                this.assertLayout(['30.4054', '69.5946']);
+
+                done();
+            }, 10);
+        });
+    });
 });
 
 QUnit.module('Resizing', moduleConfig, () => {

tools/scripts/build-all.ts

@@ -52,7 +52,7 @@ if (!devMode) {
 if (devMode) {
     sh.exec('npx nx build devextreme-main');
 } else {
-    sh.exec('npm run build -w devextreme-scss', sh);
+    sh.exec('npx nx build devextreme-scss');
     sh.exec('npm run build-dist -w devextreme-main', {
         env: {
             ...sh.env,