Editor: unify value and reset(value) types (T1304359) (#31009)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

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

@@ -746,10 +746,10 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
     
      */
     @Input()
-    get value(): string {
+    get value(): null | string {
         return this._getOption('value');
     }
-    set value(value: string) {
+    set value(value: null | string) {
         this._setOption('value', value);
     }
 
@@ -1311,7 +1311,7 @@ export class DxAutocompleteComponent extends DxComponent implements OnDestroy, C
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() valueChange: EventEmitter<string>;
+    @Output() valueChange: EventEmitter<null | string>;
 
     /**
     

packages/devextreme-angular/src/ui/color-box/index.ts

@@ -650,10 +650,10 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
     
      */
     @Input()
-    get value(): string {
+    get value(): null | string {
         return this._getOption('value');
     }
-    set value(value: string) {
+    set value(value: null | string) {
         this._setOption('value', value);
     }
 
@@ -1103,7 +1103,7 @@ export class DxColorBoxComponent extends DxComponent implements OnDestroy, Contr
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
     
      */
-    @Output() valueChange: EventEmitter<string>;
+    @Output() valueChange: EventEmitter<null | string>;
 
     /**
     

packages/devextreme-react/src/autocomplete.ts

@@ -55,9 +55,9 @@ type IAutocompleteOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties
   itemRender?: (...params: any) => React.ReactNode;
   itemComponent?: React.ComponentType<any>;
   defaultOpened?: boolean;
-  defaultValue?: string;
+  defaultValue?: null | string;
   onOpenedChange?: (value: boolean) => void;
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: null | string) => void;
 }>
 
 interface AutocompleteRef {

packages/devextreme-react/src/color-box.ts

@@ -51,9 +51,9 @@ type IColorBoxOptions = React.PropsWithChildren<ReplaceFieldTypes<Properties, IC
   fieldRender?: (...params: any) => React.ReactNode;
   fieldComponent?: React.ComponentType<any>;
   defaultOpened?: boolean;
-  defaultValue?: string;
+  defaultValue?: null | string;
   onOpenedChange?: (value: boolean) => void;
-  onValueChange?: (value: string) => void;
+  onValueChange?: (value: null | string) => void;
 }>
 
 interface ColorBoxRef {

packages/devextreme-vue/src/autocomplete.ts

@@ -243,7 +243,7 @@ const componentConfig = {
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
-    value: String,
+    value: String as PropType<null | string>,
     valueChangeEvent: String,
     valueExpr: [Function, String] as PropType<(((item: any) => string | number | boolean)) | string>,
     visible: Boolean,

packages/devextreme-vue/src/color-box.ts

@@ -208,7 +208,7 @@ const componentConfig = {
     validationMessageMode: String as PropType<ValidationMessageMode>,
     validationMessagePosition: String as PropType<Mode | Position>,
     validationStatus: String as PropType<ValidationStatus>,
-    value: String,
+    value: String as PropType<null | string>,
     visible: Boolean,
     width: [Number, String]
   },

packages/devextreme/js/__internal/ui/color_box/m_color_box.ts

@@ -227,7 +227,7 @@ class ColorBox extends DropDownEditor<ColorBoxProperties> {
     const color = new Color(newValue);
 
     if (color.colorIsInvalid) {
-      this._input().val(oldValue);
+      this._input().val(oldValue === null ? undefined : oldValue);
       return;
     }
     // @ts-expect-error ts-error

packages/devextreme/js/__internal/ui/color_box/m_color_view.ts

@@ -67,7 +67,7 @@ const BLACK_COLOR = '#000000';
 export interface ColorViewProperties extends EditorProperties {
   keyStep?: number;
 
-  matchValue?: string;
+  matchValue?: string | null;
 
   editAlphaChannel?: boolean;
 
@@ -299,7 +299,6 @@ class ColorView extends Editor<ColorViewProperties> {
     return {
       ...super._getDefaultOptions(),
       value: null,
-      // @ts-expect-error ts-error
       matchValue: null,
       onEnterKeyPressed: undefined,
       editAlphaChannel: false,

packages/devextreme/js/ui/autocomplete.d.ts

@@ -210,8 +210,7 @@ export interface dxAutocompleteOptions extends dxDropDownListOptions<dxAutocompl
      * @default null
      * @public
      */
-    value?: string;
-
+    value?: string | null;
     /**
      * @docid
      * @type dxPopupOptions
@@ -230,8 +229,9 @@ export default class dxAutocomplete extends dxDropDownList<dxAutocompleteOptions
      * @docid
      * @publicName reset(value)
      * @public
+     * @param1 value:string | null
      */
-    reset(value?: string | null): void;
+    reset(value?: Properties['value']): void;
 }
 
 /** @public */

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

@@ -236,9 +236,9 @@ export default class dxCalendar extends Editor<dxCalendarOptions> {
      * @docid
      * @publicName reset(value)
      * @public
-     * @param1 value:Date|number|string|Array<Date|number|string|null>|null
+     * @param1 value:Date | number | string | Array<Date | number | string | null> | null
      */
-    reset(value?: DateLike | Array<Date | number | string | null>): void;
+    reset(value?: Properties['value']): void;
 }
 
 /** @public */