DateRangeBox: improve typing

packages/devextreme/js/__internal/core/widget/component.ts

@@ -401,7 +401,7 @@ export class Component<
   }
 
   _createActionByOption(
-    optionName: keyof TProperties,
+    optionName: keyof TProperties | (string & {}),
     config?: ActionConfig,
   ): (event?: unknown) => void {
     // eslint-disable-next-line @typescript-eslint/init-declarations

packages/devextreme/js/__internal/core/widget/dom_component.ts

@@ -104,7 +104,7 @@ class DOMComponent<
     this._$element = $(element);
   }
 
-  _getSynchronizableOptionsForCreateComponent(): (keyof TProperties)[] {
+  _getSynchronizableOptionsForCreateComponent(): string[] {
     return ['rtlEnabled', 'disabled', 'templatesRenderAsynchronously'];
   }
 
@@ -344,7 +344,7 @@ class DOMComponent<
     const configuration = componentConfiguration ?? {};
 
     const synchronizableOptions = this._getSynchronizableOptionsForCreateComponent()
-      .filter((value) => !(value in configuration));
+      .filter((value) => !(value in configuration)) as (keyof TProperties)[];
 
     const { integrationOptions } = this.option();
     let { nestedComponentOptions } = this.option();

packages/devextreme/js/__internal/core/widget/types.ts

@@ -33,13 +33,14 @@ type DotNestedKeys<T, RLIMIT extends number = 10> = (
 export type ComponentPropertyType<
   T, TProp extends string,
 > = PropertyType<T, TProp> extends never ? never : PropertyType<T, TProp> | undefined;
-interface OptionChangedArgs<TProperties, TKey extends string = string> {
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type OptionChangedArgs<TProperties, TKey extends string = string> = {
   name: TKey extends `${infer TName}.${string}` ? TName : TKey;
   fullName: TKey;
   previousValue: ComponentPropertyType<TProperties, TKey>;
   value: ComponentPropertyType<TProperties, TKey>;
   handled: boolean;
-}
+};
 
 type OptionNames<TProperties> = DotNestedKeys<Required<TProperties>>;
 

packages/devextreme/js/__internal/m_sortable.ts

@@ -667,7 +667,6 @@ class Sortable extends Draggable {
       case 'onAdd':
       case 'onRemove':
       case 'onReorder':
-        // @ts-expect-error ts-error
         this[`_${name}Action`] = this._createActionByOption(name);
         break;
       case 'fromIndex':

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -1491,7 +1491,7 @@ class CollectionWidget<
     actionArgs: ActionArgs<TItem>,
     actionConfig?: ActionConfig,
   ): void {
-    const action = this._createActionByOption(handlerOptionName, {
+    const action = this._createActionByOption(String(handlerOptionName), {
       validatingTargetName: 'itemElement',
       ...actionConfig,
     });

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

@@ -43,8 +43,8 @@ class CalendarStrategy<
     };
   }
 
-  supportedKeys(): Record<string, (e: KeyboardEvent) => boolean | undefined> {
-    const homeEndHandler = (e: KeyboardEvent): boolean | undefined => {
+  supportedKeys(): Record<string, (e: DxEvent<KeyboardEvent>) => boolean | undefined> {
+    const homeEndHandler = (e: DxEvent<KeyboardEvent>): boolean | undefined => {
       if (this.dateBox.option('opened')) {
         e.preventDefault();
         return true;

packages/devextreme/js/__internal/ui/date_box/date_box.strategy.list.ts

@@ -42,7 +42,7 @@ class ListStrategy extends DateBoxStrategy {
     return this._widget as List;
   }
 
-  supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
+  supportedKeys(): Record<string, (e: DxEvent<KeyboardEvent>) => void> {
     return {
       space: noop,
       home: noop,

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

@@ -62,7 +62,7 @@ class DateBoxStrategy<TValue = Date | null> {
     return displayFormat || 'shortdate';
   }
 
-  supportedKeys(): Record<string, (e: KeyboardEvent) => void> {
+  supportedKeys(): Record<string, (e: DxEvent<KeyboardEvent>) => void> {
     return {};
   }
 

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

@@ -1,6 +1,8 @@
 import registerComponent from '@js/core/component_registrator';
 import DateBoxMask from '@ts/ui/date_box/date_box.mask';
 
+// STYLE dateBox
+
 registerComponent('dxDateBox', DateBoxMask);
 
 export default DateBoxMask;

packages/devextreme/js/__internal/ui/date_range_box/date_range.utils.ts

@@ -0,0 +1,45 @@
+import type { DateLike } from '@js/common';
+import dateUtils from '@js/core/utils/date';
+import dateSerialization from '@js/core/utils/date_serialization';
+
+export const getDeserializedDate = (
+  value: DateLike | undefined,
+): Date => dateSerialization.deserializeDate(value) as Date;
+
+export const isSameDates = (
+  date1: DateLike | undefined,
+  date2: DateLike | undefined,
+): boolean => {
+  if (!date1 && !date2) {
+    return true;
+  }
+
+  return dateUtils.sameDate(getDeserializedDate(date1), getDeserializedDate(date2));
+};
+
+export const isSameDateArrays = (
+  value: (DateLike | undefined)[],
+  previousValue: (DateLike | undefined)[],
+): boolean => {
+  const [startDate, endDate] = value;
+  const [previousStartDate, previousEndDate] = previousValue;
+
+  return isSameDates(startDate, previousStartDate) && isSameDates(endDate, previousEndDate);
+};
+
+export const sortDatesArray = (
+  value: (DateLike | undefined)[],
+): (DateLike | undefined)[] => {
+  const [startDate, endDate] = value;
+
+  if (startDate && endDate && getDeserializedDate(startDate) > getDeserializedDate(endDate)) {
+    return [endDate, startDate];
+  }
+
+  return value;
+};
+
+export const monthDifference = (
+  date1: Date,
+  date2: Date,
+): number => (date2.getFullYear() - date1.getFullYear()) * 12 - date1.getMonth() + date2.getMonth();