Merge remote-tracking branch 'my/26_1_dx_scss_nx_infra_p' into 26_1_dx_scss_nx_infra_p

Author: GoodDayForSurf

apps/demos/Demos/Scheduler/CreateFromSelection/description.md

@@ -0,0 +1,7 @@
+This demo creates a new appointment from a multi-cell selection. Click and drag across two or more time cells to select a range. The Scheduler opens the appointment popup pre-filled with the corresponding start date, end date, and resource group.
+
+<!--split-->
+
+The Scheduler raises the [onSelectionEnd](/Documentation/ApiReference/UI_Components/dxScheduler/Configuration/#onSelectionEnd) event when a user finishes selecting cells. The event's `selectedCellData` array contains one object per selected cell, each with `startDate`, `endDate`, `allDay`, and group field values.
+
+In this demo, the event handler ignores single-cell selection and passes a new appointment object built from the first and last cell in the selection to the [showAppointmentPopup](/Documentation/ApiReference/UI_Components/dxScheduler/Methods/#showAppointmentPopupappointmentData-createNewAppointment-appointmentElement) method.

e2e/testcafe-devextreme/tests/editors/dateBox/label.ts

@@ -14,7 +14,7 @@ const DATEBOX_CLASS = 'dx-datebox';
 const stylingModes = ['outlined', 'underlined', 'filled'];
 const visibleLabelModes = ['floating', 'static', 'outside'];
 
-fixture.disablePageReloads`DateBox_Label`
+fixture`DateBox_Label`
   .page(url(__dirname, '../../container.html'));
 
 test('Symbol parts in label should not be cropped', async (t) => {
@@ -48,12 +48,8 @@ test('Symbol parts in label should not be cropped', async (t) => {
 test('DateBox with buttons container', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-  await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${DATEBOX_CLASS} { width: 220px; margin: 2px; }`);
-
   await testScreenshot(t, takeScreenshot, 'DateBox render with buttons container.png');
 
-  await removeStylesheetRulesFromPage();
-
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
@@ -81,4 +77,8 @@ test('DateBox with buttons container', async (t) => {
       }
     }
   }
+
+  await insertStylesheetRulesToPage(`#container { display: flex; flex-wrap: wrap; } .${DATEBOX_CLASS} { width: 220px; margin: 2px; }`);
+}).after(async () => {
+  await removeStylesheetRulesFromPage();
 });

e2e/testcafe-devextreme/tests/editors/lookup/common.ts

@@ -7,12 +7,17 @@ import { isMaterial, isMaterialBased, testScreenshot } from '../../../helpers/th
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
 import {
-  appendElementTo, insertStylesheetRulesToPage, setStyleAttribute,
+  appendElementTo, insertStylesheetRulesToPage, removeStylesheetRulesFromPage, setStyleAttribute,
 } from '../../../helpers/domUtils';
 
 const LOOKUP_FIELD_CLASS = 'dx-lookup-field';
 const OVERLAY_CLASS = 'dx-overlay-content';
 
+const LOADINDICATOR_SEGMENT_CLASS = 'dx-loadindicator-segment';
+const LOADINDICATOR_CONTENT_CLASS = 'dx-loadindicator-content';
+const LOADINDICATOR_ICON_CLASS = 'dx-loadindicator-icon';
+const LOADINDICATOR_SEGMENT_INNER_CLASS = 'dx-loadindicator-segment-inner';
+
 const stylingModes = ['outlined', 'underlined', 'filled'];
 const labelModes = ['static', 'floating', 'hidden', 'outside'];
 
@@ -98,7 +103,7 @@ test.meta({ browserSize: [300, 400] })('Check popup height with no found data op
     .ok(compareResults.errorMessages());
 }).before(async () => createWidget('dxLookup', { dataSource: [], searchEnabled: true }));
 
-test.meta({ browserSize: [300, 400], unstable: true })('Check popup height in loading state', async (t) => {
+test.meta({ browserSize: [300, 400] })('Check popup height in loading state', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
   await t.click(Selector(`.${LOOKUP_FIELD_CLASS}`));
@@ -109,19 +114,30 @@ test.meta({ browserSize: [300, 400], unstable: true })('Check popup height in lo
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
-}).before(async () => createWidget('dxLookup', {
-  dataSource: {
-    load() {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          resolve([1, 2, 3]);
-        }, 5000);
-      });
+}).before(async () => {
+  await insertStylesheetRulesToPage(`
+    .${LOADINDICATOR_SEGMENT_CLASS},
+    .${LOADINDICATOR_CONTENT_CLASS},
+    .${LOADINDICATOR_ICON_CLASS},
+    .${LOADINDICATOR_SEGMENT_INNER_CLASS} {
+      animation: none !important;
+    }
+  `);
+
+  return createWidget('dxLookup', {
+    dataSource: {
+      load() {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve([1, 2, 3]);
+          }, 5000);
+        });
+      },
     },
-  },
-  valueExpr: 'id',
-  displayExpr: 'text',
-}));
+    valueExpr: 'id',
+    displayExpr: 'text',
+  });
+}).after(async () => removeStylesheetRulesFromPage());
 
 test('Lookup appearance', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

packages/devextreme/js/__internal/core/localization/date.global_formats.test.ts

@@ -0,0 +1,275 @@
+import {
+  afterEach, beforeEach, describe, expect, it,
+} from '@jest/globals';
+import dateLocalization from '@js/common/core/localization/date';
+import config from '@js/core/config';
+
+const GLOBAL_FORMAT_KEYS = ['dateFormat', 'timeFormat', 'dateTimeFormat', 'numberFormat', 'dateTimeFormatPresets'] as const;
+type GlobalFormatKey = typeof GLOBAL_FORMAT_KEYS[number];
+
+const saveAndRestore = (): { save: () => void; restore: () => void } => {
+  let savedValues: Partial<Record<GlobalFormatKey, unknown>> = {};
+
+  return {
+    save() {
+      const currentConfig = config();
+
+      savedValues = {};
+      GLOBAL_FORMAT_KEYS.forEach((key) => {
+        savedValues[key] = currentConfig[key];
+      });
+    },
+    restore() {
+      const currentConfig = config();
+
+      GLOBAL_FORMAT_KEYS.forEach((key) => {
+        if (savedValues[key] === undefined) {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete currentConfig[key];
+        } else {
+          currentConfig[key] = savedValues[key] as never;
+        }
+      });
+    },
+  };
+};
+
+describe('date localization - dateTimeFormatPresets', () => {
+  const { save, restore } = saveAndRestore();
+
+  beforeEach(() => { save(); });
+  afterEach(() => { restore(); });
+
+  describe('string preset override', () => {
+    it('should override shortDate with custom LDML pattern', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: 'dd/MM/yyyy',
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      expect(result).toBe('02/01/2020');
+    });
+
+    it('should override shortTime with custom LDML pattern', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortTime: 'HH:mm:ss',
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2, 14, 5, 30), 'shortTime');
+
+      expect(result).toBe('14:05:30');
+    });
+
+    it('should override longDate with custom LDML pattern', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          longDate: 'dd MMMM yyyy',
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'longDate');
+
+      expect(result).toBe('02 January 2020');
+    });
+
+    it('should override shortDateShortTime with custom LDML pattern', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDateShortTime: 'dd/MM/yyyy HH:mm',
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2, 14, 5), 'shortDateShortTime');
+
+      expect(result).toBe('02/01/2020 14:05');
+    });
+  });
+
+  describe('function preset override', () => {
+    it('should use function override for shortDate', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: (d: Date) => `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`,
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      expect(result).toBe('2-1-2020');
+    });
+
+    it('should use function override for shortTime', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortTime: (d: Date) => `${d.getHours()}h${String(d.getMinutes()).padStart(2, '0')}`,
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2, 14, 5), 'shortTime');
+
+      expect(result).toBe('14h05');
+    });
+  });
+
+  describe('case insensitivity', () => {
+    it('should apply override regardless of case in format name', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: 'dd/MM/yyyy',
+        },
+      });
+
+      const date = new Date(2020, 0, 2);
+
+      expect(dateLocalization.format(date, 'shortdate')).toBe('02/01/2020');
+      expect(dateLocalization.format(date, 'SHORTDATE')).toBe('02/01/2020');
+      expect(dateLocalization.format(date, 'ShortDate')).toBe('02/01/2020');
+    });
+  });
+
+  describe('locale map in preset', () => {
+    it('should resolve preset with default locale', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: {
+            default: 'dd/MM/yyyy',
+            'de-DE': 'dd.MM.yyyy',
+          },
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      expect(result).toBe('02/01/2020');
+    });
+  });
+
+  describe('no override', () => {
+    it('should use built-in format when no preset override is configured', () => {
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      // Built-in Intl format for en locale
+      expect(result).toBeTruthy();
+      expect(typeof result).toBe('string');
+    });
+
+    it('should leave non-preset string formats unaffected', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: 'dd/MM/yyyy',
+        },
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'yyyy-MM-dd');
+
+      // LDML pattern should be used directly, not affected by preset overrides
+      expect(result).toBe('2020-01-02');
+    });
+
+    it('should leave FormatObject formats unaffected', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: 'dd/MM/yyyy',
+        },
+      });
+
+      const customFormatter = (value: number | Date): string => {
+        const d = value instanceof Date ? value : new Date(value);
+        return `custom:${d.getFullYear()}`;
+      };
+      const result = dateLocalization.format(new Date(2020, 0, 2), { formatter: customFormatter });
+
+      expect(result).toBe('custom:2020');
+    });
+
+    it('should not affect formatting when dateTimeFormatPresets is empty', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {},
+      });
+
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      expect(result).toBeTruthy();
+      expect(typeof result).toBe('string');
+    });
+  });
+
+  describe('unknown preset key', () => {
+    it('should safely ignore unknown preset keys', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          unknownFormat: 'dd/MM/yyyy',
+        },
+      });
+
+      // Known presets should still work normally
+      const result = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      expect(result).toBeTruthy();
+      expect(typeof result).toBe('string');
+    });
+  });
+
+  describe('preset override aliases another preset', () => {
+    it('should support aliasing one preset to another', () => {
+      config({
+        ...config(),
+        dateTimeFormatPresets: {
+          shortDate: 'longDate',
+        },
+      });
+
+      const dateLong = dateLocalization.format(new Date(2020, 0, 2), 'longDate');
+      const dateShort = dateLocalization.format(new Date(2020, 0, 2), 'shortDate');
+
+      // shortDate should now format like longDate
+      expect(dateShort).toBe(dateLong);
+    });
+  });
+});
+
+describe('date localization - global *Format precedence', () => {
+  const { save, restore } = saveAndRestore();
+
+  beforeEach(() => { save(); });
+  afterEach(() => { restore(); });
+
+  it('should apply dateFormat for direct calls with the resolved format', () => {
+    config({
+      ...config(),
+      dateFormat: 'dd/MM/yyyy',
+    });
+
+    const result = dateLocalization.format(new Date(2020, 0, 2), config().dateFormat);
+
+    expect(result).toBe('02/01/2020');
+  });
+
+  it('should apply dateTimeFormat for direct calls with the resolved format', () => {
+    config({
+      ...config(),
+      dateTimeFormat: 'dd/MM/yyyy, HH:mm',
+    });
+
+    const result = dateLocalization.format(new Date(2020, 0, 2, 14, 5), config().dateTimeFormat);
+
+    expect(result).toBe('02/01/2020, 14:05');
+  });
+});