Merge branch '26_1' into implement_appt_hotkeys_26_1

Author: Tucchhaa

e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/visual.ts

@@ -32,7 +32,7 @@ test.meta({
   showBorders: true,
 }));
 
-test('FilterRow range overlay screenshot', async (t) => {
+test.meta({ unstable: true })('FilterRow range overlay screenshot', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   const dataGrid = new DataGrid('#container');
   const filterEditor = dataGrid.getFilterEditor(1, FilterTextBox);

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

@@ -47,6 +47,8 @@ import type {
 } from './calendar.views';
 import Views from './calendar.views';
 
+// STYLE calendar
+
 const CALENDAR_CLASS = 'dx-calendar';
 const CALENDAR_BODY_CLASS = 'dx-calendar-body';
 const CALENDAR_CELL_CLASS = 'dx-calendar-cell';
@@ -561,7 +563,7 @@ class Calendar<
     const strategyName = this._getSelectionStrategyName();
     const strategy = SELECTION_STRATEGIES[strategyName];
 
-    if (!this._selectionStrategy || this._selectionStrategy.NAME !== strategyName) {
+    if (this._selectionStrategy?.NAME !== strategyName) {
       // eslint-disable-next-line new-cap
       this._selectionStrategy = new strategy(this);
     }

packages/devextreme/js/__internal/ui/date_box/date_box.base.ts

@@ -12,7 +12,7 @@ import { extend } from '@js/core/utils/extend';
 import { inputType } from '@js/core/utils/support';
 import { isDate as isDateType, isNumeric, isString } from '@js/core/utils/type';
 import { getWindow, hasWindow } from '@js/core/utils/window';
-import type { DxEvent } from '@js/events';
+import type { DxEvent, InteractionEvent } from '@js/events';
 import type {
   DateLike,
   DatePickerType,
@@ -23,7 +23,6 @@ import type { ToolbarItem } from '@js/ui/popup';
 import type { OptionChanged } from '@ts/core/widget/types';
 import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor';
 
-import type { ValueChangedEvent } from '../editor/editor';
 import type { PopupProperties } from '../popup/m_popup';
 import uiDateUtils from './date_utils';
 import Calendar from './m_date_box.strategy.calendar';
@@ -71,6 +70,7 @@ const STRATEGY_CLASSES = {
 };
 
 export interface DateBoxBaseProperties extends Omit<Properties, 'onClosed' | 'onOpened'> {
+  buttonsLocation?: string;
   emptyDateValue?: Date;
   _showValidationIcon?: boolean;
 }
@@ -84,7 +84,8 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
 
   _userOptions?: DateBoxBaseProperties;
 
-  _supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
+  _supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | undefined> {
+    // @ts-expect-error ts-error
     return {
       ...super._supportedKeys(),
       ...this._strategy.supportedKeys(),
@@ -120,12 +121,13 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
   }
 
   _defaultOptionsRules(): DefaultOptionsRule<DateBoxBaseProperties>[] {
-    // @ts-expect-error ts-error
     return super._defaultOptionsRules().concat([
       {
         device: { platform: 'ios' },
         options: {
-          'dropDownOptions.showTitle': true,
+          dropDownOptions: {
+            showTitle: true,
+          },
         },
       },
       {
@@ -531,7 +533,9 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       : uiDateUtils.FORMATS_MAP[mode] as string | null;
   }
 
-  _valueChangeEventHandler(e: ValueChangedEvent): void {
+  _valueChangeEventHandler(
+    e: InteractionEvent,
+  ): void {
     const { text, type = 'date', validationError } = this.option();
     const currentValue = this.getDateOption('value');
 
@@ -548,7 +552,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     if (this._applyInternalValidation(date).isValid) {
       const displayedText = this._getDisplayedText(newValue);
 
-      if (value && newValue && value.getTime() === newValue.getTime() && displayedText !== text) {
+      if (value && value.getTime() === newValue?.getTime() && displayedText !== text) {
         this._renderValue();
       } else {
         this.dateValue(newValue, e);
@@ -577,7 +581,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
   _getParsedDate(text?: string): Date | undefined {
     const { displayFormat } = this.option();
     const strategyDisplayFormat = this._strategy.getDisplayFormat(displayFormat);
-    const parsedText = this._strategy.getParsedText(text, strategyDisplayFormat);
+    const parsedText = this._strategy.getParsedText(text, strategyDisplayFormat as string);
 
     return parsedText ?? undefined;
   }
@@ -631,7 +635,9 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
   _isValueChanged(newValue: Date | null): boolean {
     const oldValue = this.getDateOption('value');
 
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const oldTime = oldValue && oldValue.getTime();
+    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
     const newTime = newValue && newValue.getTime();
 
     return oldTime !== newTime;
@@ -686,7 +692,7 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
     this._refresh();
   }
 
-  _applyButtonHandler(e: { event: ValueChangedEvent }): void {
+  _applyButtonHandler(e: { event: InteractionEvent }): void {
     const value = this._strategy.getValue();
     this.dateValue(value, e.event);
 
@@ -794,18 +800,22 @@ class DateBox extends DropDownEditor<DateBoxBaseProperties> {
       return undefined;
     }
 
-    return dateSerialization.getDateSerializationFormat(value) as string | undefined;
+    return dateSerialization.getDateSerializationFormat(value) as string;
   }
 
   _updateValue(value?: Date | null): void {
     super._updateValue();
     this._applyInternalValidation(value ?? this.getDateOption('value'));
   }
 
-  dateValue(value: Date | null, dxEvent?: ValueChangedEvent): void {
+  dateValue(
+    value: Date | null,
+    dxEvent?: InteractionEvent | Event,
+  ): void {
     const isValueChanged = this._isValueChanged(value);
 
     if (isValueChanged && dxEvent) {
+      // @ts-expect-error editor's ValueChangedEvent should be extended
       this._saveValueChangeEvent(dxEvent);
     }
 

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

@@ -11,13 +11,12 @@ import { fitIntoRange, inRange, sign } from '@js/core/utils/math';
 import {
   isDate, isDefined, isFunction, isString,
 } from '@js/core/utils/type';
-import type { DxEvent } from '@js/events';
+import type { DxEvent, InteractionEvent } from '@js/events';
 import type { DateLike, Properties } from '@js/ui/date_box';
 import dateLocalization from '@ts/core/localization/date';
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
 
-import type { ValueChangedEvent } from '../editor/editor';
 import type { DxMouseWheelEvent } from '../scroll_view/types';
 import type { DateBoxBaseProperties } from './date_box.base';
 import DateBoxBase from './date_box.base';
@@ -47,14 +46,17 @@ class DateBoxMask extends DateBoxBase {
 
   _formatPattern?: string | null;
 
-  _supportedKeys(): Record<string, (e: KeyboardEvent) => unknown> {
+  _supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | undefined> {
     const originalHandlers = super._supportedKeys();
-    const callOriginalHandler = (e: KeyboardEvent): unknown => {
+    const callOriginalHandler = (e: KeyboardEvent): boolean | undefined => {
       const normalizedKeyName = normalizeKeyName(e);
       const originalHandler = normalizedKeyName ? originalHandlers[normalizedKeyName] : undefined;
       return originalHandler?.apply(this, [e]);
     };
-    const applyHandler = (e: KeyboardEvent, maskHandler: (e: KeyboardEvent) => void): unknown => {
+    const applyHandler = (
+      e: KeyboardEvent,
+      maskHandler: (e: KeyboardEvent) => boolean | undefined,
+    ): boolean | undefined => {
       if (this._shouldUseOriginalHandler(e)) {
         return callOriginalHandler.apply(this, [e]);
       }
@@ -68,42 +70,52 @@ class DateBoxMask extends DateBoxBase {
         if (!this._isAllSelected()) {
           event.preventDefault();
         }
+        return undefined;
       }),
       backspace: (e) => applyHandler(e, (event) => {
         this._revertPart(BACKWARD);
         if (!this._isAllSelected()) {
           event.preventDefault();
         }
+        return undefined;
       }),
-      home: (e) => applyHandler(e, (event): void => {
+      home: (e) => applyHandler(e, (event) => {
         this._selectFirstPart();
         event.preventDefault();
+        return undefined;
       }),
-      end: (e) => applyHandler(e, (event): void => {
+      end: (e) => applyHandler(e, (event) => {
         this._selectLastPart();
         event.preventDefault();
+        return undefined;
       }),
       escape: (e) => applyHandler(e, () => {
         this._revertChanges();
+        return undefined;
       }),
       enter: (e) => applyHandler(e, () => {
         this._enterHandler();
+        return undefined;
       }),
       leftArrow: (e) => applyHandler(e, (event) => {
         this._selectNextPart(BACKWARD);
         event.preventDefault();
+        return undefined;
       }),
       rightArrow: (e) => applyHandler(e, (event) => {
         this._selectNextPart(FORWARD);
         event.preventDefault();
+        return undefined;
       }),
       upArrow: (e) => applyHandler(e, (event) => {
         this._upDownArrowHandler(FORWARD);
         event.preventDefault();
+        return undefined;
       }),
       downArrow: (e) => applyHandler(e, (event) => {
         this._upDownArrowHandler(BACKWARD);
         event.preventDefault();
+        return undefined;
       }),
     };
   }
@@ -726,10 +738,11 @@ class DateBoxMask extends DateBoxBase {
     }
   }
 
-  _valueChangeEventHandler(e: ValueChangedEvent): void {
+  _valueChangeEventHandler(e: InteractionEvent): void {
     const { text } = this.option();
 
     if (this._useMaskBehavior()) {
+      // @ts-expect-error editor's ValueChangedEvent should be extended
       this._saveValueChangeEvent(e);
       if (!text) {
         this._maskValue = null;

packages/devextreme/js/__internal/ui/date_box/date_utils.ts

@@ -2,6 +2,7 @@ import dateLocalization from '@js/common/core/localization/date';
 import $ from '@js/core/renderer';
 import dateSerialization from '@js/core/utils/date_serialization';
 import { isDate } from '@js/core/utils/type';
+import type { Format } from '@js/localization';
 import type { DateLike, DateType } from '@js/ui/date_box';
 
 const DATE_COMPONENTS = ['year', 'day', 'month', 'day'];
@@ -20,14 +21,14 @@ interface FormatInfo {
   components: DateComponentKey[];
 }
 
-const getStringFormat = (format: string | { type: string }): string | null => {
+const getStringFormat = (format: Format): string | null | undefined => {
   const formatType = typeof format;
 
   if (formatType === 'string') {
     return 'format';
   }
 
-  if (typeof format === 'object' && format.type !== undefined) {
+  if (typeof format === 'object' && 'type' in format) {
     return format.type;
   }
 
@@ -165,7 +166,7 @@ const dateUtils = {
     return dateLocalization.formatUsesDayName(format);
   },
 
-  getLongestDate(format: string, monthNames: string[], dayNames: string[]): Date {
+  getLongestDate(format: Format, monthNames: string[], dayNames: string[]): Date {
     const stringFormat = getStringFormat(format);
     let month = 9;
 

packages/devextreme/js/__internal/ui/date_box/date_view.ts

@@ -106,9 +106,9 @@ class DateView extends Editor<DateViewProperties> {
     super._render();
     this.$element().addClass(DATEVIEW_CLASS);
 
-    const { type } = this.option();
+    const { type = 'date' } = this.option();
 
-    this._toggleFormatClasses(type as string);
+    this._toggleFormatClasses(type);
     this._toggleCompactClass();
   }